Web Development
Friday, July 17, 2009

I’m going to get started in five minutes. I posted new information on the blog. Look there and get yourself acclimated to what’s going on there. I will give you five minutes to finish up reading what’s on the blog and getting comfortable with some of the material. Then I will start going through it.

If you have any questions from yesterday or this past week ask now. Or are there too many questions?

I’m going to get started. I’m going to run through some things on the blog first. Hopefully you had a chance to read some of it.

Today we are going to focus on JQuery. It’s an advanced JavaScript.

Figure out as much as you can about what I’m showing. As questions as you need. Some of this will make sense. It should be easier once we get the hang of using JQuery.

First is the concept of the JavaScript framework. This is meant to make common tasks easier in the browser. JavaScript has a long history of incompatability. JQuery and other frameworks hide the inner workings of JavaScript from you. It gives you a unified platform to make interesting pages.

There’s an example I’m going to pull up here in which JavaScript would do something. You would expect that there is a width to these red boxes. They occupy space on the screen, but for some reason, depending on how you set up your style sheet and how you coded it, the width property is or is not accessible using JavaScript.

The first paragraph has no style. There’s a red boarder, but that’s it. If I click the button it will run the function of looking for the width property in JavaScript. It looks like this [On overhead.]

We saw some of this the other day. How you would access the style property of any element. We are using the ID of the element. We are getting it into memory based on the ID. Then we look for the style.width property.

For the first one, which has no CSS styles applied, has no width.

The second one does have CSS applied but that’s in the head. This is an internal file. Normally it would be external because you should always separate your files. 200 pixels applied to paragraph two. Yet, it still doesn’t work.

The last paragraph example has another CSS width property defined, but it’s defined in line the HTML attribute.

You can define styles with in line attributes. This style attribute will allow you to. I don’t recommend doing that unless you are very careful. You should always try to separate the files so you remember where you put the styles.

You will see more of this today.

This is defined in an attribute within itself. JavaScript decides this one will give you a width.

It doesn’t make sense why one would have width and the other wouldn’t. This is a basic inconsistency.

Generally we try to avoid these issues all together and use a framework that does those things for us. JQuery is the framework for this class.

If you go back to the blog there’s a link to a description of the concept of frameworks. Some of the same things I just said.

We are going to run through examples of how to use JQuery doing the same things we did yesterday.

I’m going to fly through these and show you the differences between what we did yesterday and what we’re doing today.

Questions?

Let’s get a handle of basic JQuery selectors. I mentioned that you should read this explanation of JQuery. It’s detailed information. I’m going to pop that open at the same time that I show you the examples.

Let’s start with basic usage of JQuery selectives.

This list of items is an example of what we are doing. This list in the XHTML, if you look at the source code, is items 1 through 6. Two have a specific class. Otherwise, the text is the same. Yet, on the page I can see the words hello on numbers two and six.

I’m doing something in JavaScript to replace the HTML element.

Obviously something is happening with the class special on those two. That’s how the JavaScript is finding these elements and changing them. Just like in CSS we apply different styles. This is the same thing with JQuery. We attach the specific behavior to those two elements.

The JavaScript we are running is up in the head section. I recommend using external JavaScript files when possible. A lot of these examples will be in the head so you have it all in one file though.

This is relatively simple. It’s only three lines of code. The first line is the first thing I’m going to focus on.

In the document that outlines the syntax of query the first thing I mentioned is the document ready code. This is now a JQuery code. When you see a dollar sign and parentheses you can be pretty sure it’s JQuery.

This is a function. Dollar sign is the name JQuery has given to a special function. JQuery is written in JavaScript. This is a function call. It’s a special character with parentheses. That’s how we recognize a function.

You would also recognize the ready function. It’s returning some special object. I’m not going to focus on what objects are, but this object has another function inside of it.

We are getting an object and calling it reading function.

When you see the dot it means this thing is a property or function. Think of this as a set of variables and functions.

Do you remember document.write? The function we saw in the first few examples.

I can run out to ask in the front. We’ll take a break and I will ask.

Do you remember we did document.write and it wrote to the screen? Document is a special object. It has certain properties and certain functions. Like a car would be an object. It has a number of wheels and certain things it can do.

This document property is a variable with certain sub-variables. One of the functions you can do on the document is write something to it. I don’t want to belabor the object point. Just recognize that this is a property.

In JQuery we call this special function as passing it as a parameter. It adds special functions to the document object that wasn’t there before. It augments the normal document object with some special functions that makes it easier to do our job. A special function is the ready function.

The ready function will automatically be called when the document is written. It’s like the onload event.

Do you remember the onload event the other day? There was an example for waiting for the onload event. Basic JavaScript examples. Detecting the page movement. When the page first loads it pops up. If you read the source we will remember there was the onload attribute. That’s how we were able to say that when the body loads call that function.

This does the same thing in JQuery. What we just saw. This is how you define it in JQuery. The same functionality. In the code it looks like that [On overhead.] When the page is ready, whatever is between this parentheses is a function call. That’s the parameter for the function and it will be run when the page loads.

Forget the details inside there. Recognize that this is a function. It looks unlike any parameter we have seen before. But it is just a parameter to the function.

Are we clear?

JQuery will only run the code when the read is ready.

What we are passing as a parameter here is another function. This is what will be run when the page loads. That’s the function JQuery will run when the page is ready.

Now we are going to isolate this part and focus on what I have highlighted [On overhead.]

The first thing we do is define the variable new Text and set it equal to Hello.

Then, this is somewhat unique, we are using a CSS selector inside this special JQuery function. Recognize that this is selecting for all list items with class special. It’s allowing us to get a list of all the elements that are list items with the class selector.

We are going to change the HTML inside those elements to be the new HTML we want to put there. In this case, the word Hello. That’s what we are putting in the HTML.

This is a special JQuery function. This time it is doing something different. It’s not waiting for the page to load, it’s replacing the HTML of all the elements that match this element selector. It goes through the page and looks for the elements with the tag LI in the class Special. It replaces the HTML inside of them with the word Hello.

If I had said, H1 Hello you can insert HTML into this element. You see that it has inserted text and HTML code. That’s why it’s called HTML.

I can insert this into any element. It doesn’t have to be these classes. I can insert it into the body type. I can replace the whole body with the word Hello. I’m going to wipe out everything in there and put the word Hello. Hopefully that will work.

It has overwritten whatever HTML was there before with the word Hello. If I view source you still see the same old stuff. The JavaScript waited for the page to load and deleted everything out of the document behind the scenes and replaced it with the word Hello in H1.

The important thing to note is that, in this example, we use the ready function to wait for the page to load and calls whatever function you put as the parameter to run as the page loads.

In this case, the function creates a variable with some text and overwrites all the matching elements with that new text. That’s the point. To show you the ready function and how to use CSS selectors to get matching elements.

Female Student: What fundamental difference do we make with parentheses after the function?

Teacher: You can create a function the other day. That’s the normal way. In this example you see this [On overhead.] It’s almost the same. It’s anonymous. The ready function knows what to do with this. It doesn’t need a name.

You could give it a name and it would work the same way. It will still work, but there’s no need for it.

Male Student: Do you need the very last two or can you just have function bracket? Can you just end it with brackets around function?

Male Student: Do you need the parentheses?

Teacher: You do. That’s always necessary. Even when there are no parameters. It’s just a technical requirement.

It would make sense that we don’t, but we do based on how the language works.

Female Student: Is that always empty?

Teacher: Generally. This is a function called by the Ready. If Ready was supplying a parameter, which maybe it does, then we could put a parameter name in there.

Functions accept parameters. If we expect a parameter to be passed in this function we would put it in there.

JQuery does a lot of things automatically that we don’t have to think about. That might be one of them.

Other questions?

Let’s move on to the next example.

We have to include the JQuery script. It’s a big library of JavaScript functions. None of this will work without the script with all the functions in them. The dollar sign function is defined here. Without this the JavaScript has no idea what the dollar sign means.

If you look at the JQuery library, which you can do like any other JavaScript, you will see the very long, one line code. You can download versions from the JQuery site that are broken into more than one line.

It’s small. It’s compactly written. It’s almost impossible to understand. If you wanted to you would see it’s just JavaScript in there.

Let’s move on to the next example. We are going to do the same thing we did the other day. We are going to respond to the page load event. We had this page that loaded and popped up an alert. This was done using the on load attribute.

This one does it slightly different using JQuery. It looks like this. [On overhead.] There’s no on load equals some function, which is what we did yesterday. That’s how we initiated the on load event.

JQuery further isolates the JavaScript from the XHTML. We use the same ready function and pass it as the parameter that calls the function we want when the page loads.

The parameter is a function that falls in this function that pops up the alert.

Questions?

That’s the only difference from what we did yesterday. Yesterday it was on load equals something. Today it’s document.ready something.

Male Student: Those would be on a separate page?

Teacher: You would have one with the JQuery library. Leave that alone. Don’t ever edit that file. Make another script separate.

Male Student: I’m talking about the function to say Hello then the one above it.

Teacher: You are referring to the say Hello function?

Male Student: The one in the HTML document.

Teacher: You can put this in the HTML document. This is defined in the other code. It’s specific to this page. I would include it in this document. You could easily move it though.

Male Student: Document.ready function. Say Hello is all I see.

Teacher: When the page loads it’s going to run this code. Say Hello is the code that will run when the page loads. It takes whatever code is in it and runs when the page loads. That function must be defined where the page loads.

You don’t see it here, so it’s probably defined elsewhere in another code.

This function is defined in this external script onload. It defines that function.

JQuery is JavaScript.

This is the function I wrote. If you don’t see the dollar sign function you are probably not in JQuery. It almost always uses the dollar sign.

I could want some JQuery style code in this function, I just don’t need to. I could easily have used that dollar sign function.

Female Student: The JQuery bits would be included in the HTML or the JavaScript?

Teacher: I can write any JavaScript I want on this page in the script head. I didn’t emphasize that here because I don’t want you to do that in this class. I would rather it in an external file.

You can define scripts. I can use it as an internal script.

Female Student: Any bits of JQuery you would include in the JavaScript file you have.

Teacher: If you have the JQuery library as the first script in your scripts. Then every script after will refer to functions defined in the JQuery library.

Remember the browser goes from top to bottom. Load the most important stuff first, which is JQuery.

Male Student: JQuery file we can find on line?

Teacher: I’m going to show you in the website.

You want to download whatever the latest version is. Jquery.com. I’m using version 1.2. There is probably a new version. Download the file and put it in your script. We will be doing that later.

Let’s take a look. See how it says uncompressed? That means it’s not all in one line. It has maybe 100 times as many white space characters. That makes it somewhat bigger. The other has been gzipped. That’s why it’s smaller. The combination makes this smaller.

For our purposes it doesn’t matter. I would eventually download the smaller one.

Back to the example. Any questions about this?

Every time you see this document.ready I always include the beginning of the function definition on the same line. It’s a standard set. I can be sure everything in there will be run when the page loads. I can see what will load.

For me, this is a standard copy and paste.

Let’s move on again.

The next example is to handle click events. This is what we saw yesterday with the On Click attribute. We will do the same functionality with JQuery. When I click it runs a function that pops up this message.

I will show you how it works with JQuery, rather than just plain JavaScript.

One thing I want to point out in the beginning is that the links themselves in the HTML have no JavaScript in them.

Yesterday it would have been On Click equals run some function. We did that yesterday. You may or may not remember. [Class laughing.] This is a fast paced class.

This is a preferred way of doing the same thing. JavaScript is being totally isolated from the XHTML. We are not putting on load attributes or other kind of JavaScript attributes in the HTML. We are defining all the HTML behaviors in the JavaScript section of the page or the external JavaScript files.

This is easier to maintain. When I want to maintain behaviors I just go to JavaScript, I don’t have to dig through the XHTML.

When a document is ready, I’m doing this slightly different, instead of defining the function within the ready function, I separated it so it’s defined elsewhere. I’m just referring to it.

I could have put this whole function definition in there. I’ve just chosen to show you it’s possible to separate it out.

Female Student: The top function with the double sided parentheses means anything called A tag is called?

Teacher: The behavior is the click behavior. When you click on it, just like the ready function, it’s called to function when you click on it.

I could have put this function inside there if I wanted to. You would have had a similar structure to the original example. It’s easier to read separately. It’s my preference of how I like to read my code.

This is more analogous to how we see functions now.

I’m going to repeat. This is what happens when the page loads. When you see the document.ready function is the beginning.

When the page is ready it calls the function called page is loaded. That function sets a bunch of behaviors for any link with the class dummy. For all links with the class dummy create a click behavior that when they click that link it will call another function called link is clicked.

The link is clicked function calls another function called say Hello. I call this special JQuery function called prevent default. It prevents the link from taking you to another page. This cancels the link.

Male Student: Is event built in?

Teacher: It’s the parameter, it’s just my name. This goes back to your question earlier. Would I ever put something as a parameter in there?

In this case, the click function is calling this other function. It will supply that with reference to the events data. It supplies you with information about the event, like what element was clicked to cause this event.

That’s what is in here. We prevent that event from going any further.

I want to go through the flow one more time. The document extended augmented object has the ready function for when the page is loaded. It calls the function, page is loaded. Then defines behaviors.

I wait until the page loads. Then I define the behaviors. We do that so the body section is loaded before we define behaviors for the body. If we do it before the browser will be confused. We would refer to the links before the page is ready.

When the page has loaded and we define this behavior, we say to JQuery, look for link tags with the class dummy. When they get clicked call the function for hello. This prevents the link from taking you to another site.

Female Student: In our HTML document, all of this will go in JavaScript except the initial call? Would that be in HTML?

Teacher: Meaning the ready function? Yeah. You could do it exactly like I have here. You can put functions in the HTML like I have.

It would be better to have things in the separate file. A big reason to do so is that often your functions are kind of generic and apply to multiple pages. If you put everything in the HTML it won’t be usable for other HTML documents.

Document.ready is usually specific to this document. You might want to do slightly different things for the documents.

Let’s move on. Now that we are seeing this style of coding you will see the similarities.

Using JQuery to mouse over events. When I mouse over it pops up an alert. If I view the source on that you can see that, first of all, here’s the button, and there’s no JavaScript code. The HTML tags do not have any JavaScript code in that.

Yesterday we would’ve seen: on mouse over equals some function. Today we are not doing that anymore.

Today we are just using JavaScript code to define those behaviors. We wait until the page is ready and fully loaded. Then we run the code, which is going to attach behaviors to all elements with the ID button 1.

We know there’s only one element, but there may be many.

For that button we attach an event when the user mouses over. This function will be called.

This is similar the other examples. Define the behavior to a particular group of elements and that’s it.

Next. The on mouse out example. This is very similar. Mouse over does nothing. Mouse out creates some response. It’s almost exactly the same, except we use the function mouse out.

When the page loads it calls this function. All buttons with button 1 calls this function to say Hello.

Female Student: Is it common to see an HTML page with a series of those JQuery things that say document.ready and then many functions?

Teacher: Very common. That’s what most sites will do when you are set up.

You can say for example, for the body, when it’s clicked alert the body.

Maybe for all page one tags, when they are moused over alert something else.

I would normally stack many behaviors for the elements I want.

Let me load this up.

When I click on the body it will tell me I clicked the body. If I mouse over the head it will tell me.

I would attach many behaviors in the same document.ready. You cascade as many as you want. I’m separating one by one for examples.

Male Student: If the button was a class, not an ID what would it look like?

Teacher: Then it would be a dot. It’s just like in CSS.

Male Student: Because it’s in brackets it’s not confused as a function.

Teacher: Yes.

You don’t have to say the tag name if you don’t want to, but I recommend you do to keep it clear for yourselves.

Let’s move on to how to handle form events. We had the on submit tag yesterday. Same thing. When the user submits a form we call upon a Java function. This time we are using JQuery.

There’s no JavaScript in the HTML again. Yesterday we would have had: on submit equals some function.

Today we are doing entirely JQuery so it’s all in the script section. We wait until the page loads. Everything between those two lines is what happens when the page loads.

We look for all elements with ID form 1. We attach a behavior to their submit button.

When a user submits that form we will call the function that pops up an alert. We will do the same thing we did with the links and prevent a behavior.

Forms will usually take you to another page. Links will link you to another page. I fu want to stop those from happening you would prevent the event which stops the link from taking you off the page.

That’s the only difference between this and the last example. We are using the submit behavior instead of the click or mouse out. We are preventing the event from taking you away from this page.

A lot of times it will take you to the top of the page if you don’t specify where else you are indicating. You don’t always want that to happen.

A lot of times links will be defined.

As an example for the form example, it may be that in a real world scenario I might ask someone for a first name on a form. I want to make sure they filled something in. When I click submit I wouldn’t just prevent the form, I would check for an entry. If they entered something I’d let them go through. I would check the forms first. You would want both possibilities, to be taken away from the page or stay.

We are going to move on to the same thing we did yesterday. Changing element styles using JQuery this time. If you mouse over the paragraph from the first example we will do the same style change we did yesterday, which is changing the font size.

You should now understand how I would structure the page. There’s a ready function waiting for the page to load.

The paragraph I’m changing is P1. That’s how I’m referencing this paragraph. When you want to address a particular behavior or style sheet you need to address it.

This is the JavaScript code that is responsible for the behavior. Every JQuery will have this ready function to wait until the page is loaded. When the page is loaded I’m defining a mouse over event for the tag with the ID P1. For all tags with ID P1, create a mouse over event handler. In this case, this is how I change an individual CSS style using JQuery. This is a nicer way than the way we saw yesterday. It’s more reliable.

This will change the font size to 20 font. I can put any CSS property here. I can change the margin to 20 pixels. I can change the boarder width to 20 pixels also, or 2 pixels. I can change any individual style with this same function.

Male Student: The function is physically written as this?

Teacher: That goes back to an earlier question. This select all the element with the ID P1 defines a function of what to do with the mouse over. JQuery will automatically create the variable THIS. It refers to the object that was moused over.

That object, CSS, is what we are going to change. This is the element that triggered the event.

Female Student: This refers to ID P1?

Teacher: If we had a lot of paragraphs that had the same event, the THIS would refer to the currently used one, not all the other ones. There might be a differentiation. It’s a special JavaScript query that refers to the current object.

Male Student: Could you put P1 in there?

Teacher: That would be perfectly fine. That may be easier to remember.

Male Student: I just don’t know where THIS came from.

Teacher: If we had a class with 20 paragraphs it would change the CSS for all of them. You would want to use THIS. I only have one paragraph so it would be the same. Stick with THIS.

Female Student: The word THIS refers to everything in the first parentheses? Everything being moused over? That’s the idea.

Teacher: When I mouse over this paragraph, the event is being triggered and the THIS variable holds a reference to the current paragraph. That’s a special built in object that refers to the currently used elements that triggered this event.

It would be the same thing with the click event. You could use THIS. The THIS variable is available in all of the event handlers. Mouse over. Mouse out. Click. Load. Etc.

Male Student: Is P1 being passed to event?

Teacher: It’s an abstract representation of the event that happened. It’s also the exact position on the screen.

Male Student: You need an event for something being passed to?

Teacher: I could leave that out. It would still get passed there. It would just get lost. I don’t need it in there. It’s optional. It’s in there for consistency. We are not doing anything with the event. If I wanted to modify the event then I have a reference.

The next thing is the mouse out function. We are reducing the font size back. I could do twenty different behaviors on different elements.

Next. We are going to change, rather than one style at a time, the entire class of a paragraph. We did this yesterday. Here’s how we change the class. This is paragraph P1 that has been predefined.

When you run your JQuery code, it waits until the page loads. Then it says for the paragraph with the ID P1, when you mouse over it, remove the class class 1 and add the class 2. You can also add it on. In this case we want to get rid of it though. This is a nice way to quickly add and remove elements from the screen.

Since class two has a larger font size and different background color the style will look different on the page. That’s how we get the change with the mouse over.

The browser will automatically update this on the page.

Questions?

Is this conceptually easier than yesterday? I think it is. It has an easier way of using it than plain JavaScript.

That’s the mouse over behavior.

This is the mouse out behavior, which is just the reverse. Takes off class 2, puts on class 1.

Let’s move to the last example. Showing and hiding an element. This is an exact analog from yesterday, but we use JQuery to hide and show this.

The two buttons are called the show button and hide button. That’s the ID I have given.

When you click the show button, remember the JQuery waits until the page loaded, and it defines the behaviors. The show button will get the paragraph with the ID P1 and show it.

When you click hide it will hide P1. If you remember yesterday we were changing the display property. Now we don’t have to meddle with the details. It will just say show and hide.

There’s not much to say about that example.

Now we are going to move into the next series of examples. Effects. JQuery come prepackaged with several kinds of effects. I want to show you the commonly used ones.

Animating you can change the style of an element. It will slide it in or animate it into the new style or position.

I have the style sheet predefined. When I click the button it will animate the change from the old style to the new style.

It’s limited, but does easy things like moving the element. This starts with a boarder of two pixels, ends up with probably ten pixels. It does it in an incremental fashion. Same with the font size. It goes from a font size of 14 to 30.

That happens in the code. The first example has an ID animate button. The text we are animating is in a div called animate block.

For anything with animate button, when it is clicked run this function. The function says get animate block, and animate it with these parameters.

These are the CSS settings we want to change to.

1500 is the number of milliseconds it takes to do the animation. We can set that to what we want. This should take five seconds. It looks funky.

Questions?

That’s the animate function. The next thing is the toggle function. You switch one div for another. One paragraph for another. It looks like you change the content, but you are actually switching between two separate paragraph tags.

In the HTML we set it up so the button with the ID toggle button. We have two paragraphs with the class Toggle P, indicating which paragraphs will be swapped.

When you click this button it will show and hide one of these depending on the last state. The second one starts invisible from the style sheet. It won’t show up on the page. When you write the JavaScript it says when the page is ready define this animation.

When you click the toggle button it will run this code, which gets all the elements of class Toggle P. That means to switch them to the alternate state. If it’s hiding it will show. If it’s showing it will hide.

It looks similar to the image swap with the rabbit and the hat. Similar effect.

This doesn’t have to be a click. You can do this on mouse over or any other event button.

The next example is toggling with animation. It toggles between two paragraphs and animates them at the same time. That happens with this code [On overhead.]

We wait for someone to click the element with the ID toggle Slow button. We run this function. It gets the paragraphs with the ID Toggle Slow. It toggles them and passes the parameter slow.

I’m assuming we can pass it fast. I have never tried. I’m assuming there are parameters you can set for exactly how long you want it to take. I haven’t played around with this.

Here’s the next example. Slide down. That means when you click the slide down button it’s going to show something. While it shows it will make it look like it’s sliding slowing down the page. That looks for the element with the ID Slide Down Block. It passes slow.

These are the relevant elements on the page. This is the button, that’s the block. The block, by default, will be invisible. You don’t want it to show up when you load the page.

The next one is the Fade In Button. This is similar to the slide. It seems faded, instead of immediately showing up. It will fade in slowly That is set up the same way. You have a div with the ID Faded Block which is initially invisible. You have a faded button that will cause the animation to happen. Here’s the code [On overhead.]

That’s it for the example.

Male Student: What if you didn’t have anything in there? Does it matter in the slow box?

Teacher: Let’s try. I don’t use these personally. We will have to try it out.

It seems to be the same. It may default to slow.

Now we are going to jump to another bunch of things that JQuery can do.

There’s a link to the page outlining effects. You can go there. It’s not as intuitive as it could be done, but it gives you the effects.

The fade in takes two parameters of speed. The callback is the function to bring it back.

There are usually examples here too. You have information about the function and a demo. It shows you in the source tab, the source they used to create the demo.

It’s a pretty ok documentation. The code is so small and simple that it’s pretty easy to copy and paste in your own sites.

It also describes the parameters. Speed can be a number or words, like slow, fast, etc.

Fade In slow means how long it would take. I can define an anonymous function like this. When it’s done fading in it will call the function to pop up an alert, Done Fading In.

Let’s see if that works.

That’s how you would trigger different things when the animations and effects are completed. Most of these effects take the callback function.

This doesn’t have to be an anonyms function. I could put a name like Show Message. That would call the function to alert you that it’s done animating.

That’s the idea of callbacks.

I will leave that in there for you to have as a reference. It’s easier to read this way. I will leave it that way [On overhead.]

Now we move on to the quick overview of the other thing JQuery provides. User interface controls.

I didn’t do the example page for this. Go to the JQuery site and see what the user controls are. The drag and drop functions are interesting. I can make any element draggable. You tell it the ID of the element you want to make draggable, or the class name, and you call the draggable function on it.

There’s also a droppable function. Here’s both. I can drag the draggable and drop it in the droppable. [Class laughing.] I can drag it and drop it. That’s defined with saying this is the draggable thing and this is the droppable and when something is dropped in the droppable this is the function that will be called when the drop happens.

Sorry. [Teacher laughing.]

It’s four lines of code that may take you a hundred lines or more with ten years experience.

It’s a pretty powerful library. There’s little reason to use the native JavaScript code.

Male Student: What menu were you in?

Teacher: JQuery UI.

Female Student: Is this why Flash has become less used?

Teacher: JavaScript has become more sophisticated.

I will let you check out these examples. I want to highlight some interesting ones.

There’s a sortable list. It allows you to create lists of sortable lists. Their demo is not work. It should show up. I will have to come up with an example myself.

Let’s look at the accordion. You will see that somewhat frequently. That’s a menu like this [On overhead.] This is making something into an accordion menu. It looks like that [On overhead.] You can add this to your page with one line of code.

This is how you choose which element to make into an accordion. This is looking for the element with the ID accordion. You will have to structure your code the same way to make this work. You tell it which element is the containing element for the accordion menu. In that element you create a series of elements and divs.

A date picker can be a nightmare. You can make it look different in your CSS. The functionality is dictated by JQuery. You would want to use callback functions to indicate when someone clicks on a date and give it a response.

Let’s view the source here. They made an empty div for the clicker. They called a JQuery function to go into the element and fill in the information necessary for a date picker. You don’t have to do the coding for that.

Tabs are also something that are somewhat difficult to do. I need to find the example. The tab pickers are a series of divs that they converted into a series of tabs by using the one function call and supplying an ID of container div.

View the source to see the way it’s set up. Kind of accordion. The outer container div. Then a series of list items that are headings for the tabs. Then a series of divs that are the tab contents.

You see how they structured it. If I wanted it on my page I would copy and paste it first, then modify it.

You will want to make sure you include the scripts they indue in their examples. This has all the UI functionality in it. This has all the tabs. Include those same files, otherwise it won’t work.

Everything is based on the main JQuery library. Once you have that installed as you first script you can then run these.

Many third party developers make more functionality on JQuery. If you have a task you want to accomplish you can probably find it. Start with the basics first.

That’s it for JQuery for the examples.

I want you to, for the rest of the day, get practicing the layout and CSS. It’s critical to what we are doing here. If you can’t lay out the boxes side by side you can’t do the rest.

In this link to the assignment, there’s a diagram I want you to create. This is a mock one-commerce shop. I want you to create this in XHTML and CSS.

Then create a behavior, so when I mouse over any of these boxes, I will replace this thumbnail image with information about that.

When I first load the page I see a list of products, side by side. When I mouse over an image I see this product.

That’s your assignment.

First get HTML and CSS worked out. That’s the core. When you are done with that, then think about adding JQuery on top.

Questions about the assignment? About anything?

Male Student: Multiple JavaScript. I create a function that differing files have the same …

Teacher: Two functions with the same name in different files. That would be a problem. If two had the same function only the different one would be used. It’s called incapsulation. It’s a complicated technique. If you do get there you have to do them different.

Programming by definition incapsulates. You want to be clear which function you want to call. I will get further into that at the end of class.

Any other questions?

I’ll help you out if you need it. I want you to focus on this first just let me know if you have questions.

Student: General knowledge. What’s the advantage of using the other program then Flash?

Professor: You must learn the other program searches prefer HTML. It’s easier code. Not 100% of the world has the Flash.

Student: So you do whatever player?

Professor: Some have it, some don’t. It’s a minor issue it depends on the language and the animation. JQuery does some things but not all the FLash does. If you want to do a good animated game you are better with Flash but if you don’t care then you use
JQuery.

Or you could have both. It’s way more complicated but …

Ok. So that’s it. Start with the assignments. Or if you have things from the first classes get those done first. Then flag me down.

[Students working.]

Hi! Since we are in 2.0 with these Internet technologies and these foster our lives. I want to set up a networking time and celebrate our first week. At third and St. Marks there’s the Ale House and I want to go there after class.

Professor: Post that to the blog!

Speaker: 5 PM today.

[Students working.]

Take a lunch break for sustenance.

[Lunch.]

Your attention for a few minutes.

So I just posted something to the blog. These are the plug ins featured for JQuery to add functionality. These are useful so I have examples for these. You can Google the JQuery plug ins too. There are many.

One thing is curving corners. You can make rounded boxes. The dives are normally square but people get irritated when they try to make the carved boxes. So this plug in makes it essay. I’m specifying that these certain sides need to be rounded but no not others.

If you view the sourcing you see it’s simple.

These boxes. Then this one and this one here. It’s a paragraph of the effects. The code is for the first box is just the corner function on all the ID boxes. This first one is the only one that matches. I pulled the corner function from the library to make it do that.

Then the second has parameters. These are specifications for the corners. 16 pixels, then the top right has no rounded corner … the bottom corner is rounded at 16. So that’s it! Then you specify the CSS or style selector so you can pick the boxes on the corners then just apply.

The function is included in the top of the page here. This is the the plug in. It’s the script file. These are just JavaScript functions. You have to include these to make them work.

That’s it for that one.

Student: What’s the proffered method?

Professor: There’s no HTML way.

You can make the box image in the corner then put it in all four positions. You can make custom ones for different things that way. It’s very flexible and saves you time.

It only took a minute. But it would take 5 in HTML.

So the next one, is forming sample. It inserts placeholders in the form. These are all linked to the home pages of the people who made them. Then I linked them to my examples. If you want the original though, click the first link.

Here’s mine. See the placeholder text? I enter the text and it goes away I click again and it comes back. In CSS I styled the color and the text. It’s easy. The code I used is simple.

The input is down here. ID first thing. Up here I said for all elements with ID first name I said give this text then in the quotes you put the text.

Next. Alpha numeric. It limits the characters you enter in the form. Like if you want a phone number or email form, you want to not include certain characters.

I’ll try a dollar sign. But it’s rejected. So it limits the characters in these boxes.

Or you can’t capitalize here either. This one doesn’t accept letters.

This is an example of the exceptions to the rules. I accept the alpha numerics and commas, and periods. That’s the setting code. The source for this — I included the alpha numeric plug in as the script file. These are the text fields. Then the IDS. Text 1, 2,3 etc. Here’s the code. All the elements with ID text one. I entered what’s NOT acceptable. The last one is odd, since I said it should allow alpha numeric then these settings. Allow commas and periods and space characters. That’s that.

Light box is popular. It’s an easy way to make the slideshows. Quick and easy. [On board.]

It’s a few lines of code. There are nice navigation controls. This box will resize too. That’s the close button. You can have titles and captains too. It’s nice and easy to use and make a slide show.

Source is here. This is a required CSS file. They supply the CSS file so that’s how it makes it the way it looks. But you would modify this if you wanted it to look different. Just leave it until you get more comfortable. Then this script is the plug in. That’s the logic!

You can specify where the images are in the code. I’m specifying that all the elements of the ID gallery and the anchor tags in it “lightbox function” they put the buttons on the slide show. You see here.

It references the anchor gallery and the div tags. So the list of items and images you want in the slide show. Wrap it with a div then tell JQuery where to find it in the div.

It’s easy!

Next. Is Cycle. It’s another slide show. This has a variety of other slide shows with effects. You can navigate it to see the varieties. This is the basic one. It’s just a slide down one. You see the pictures of donkey’s that just slide. Then you can specify the animation. Like fade in or out.

Now the code. These are the images here. I have the div with the ID gallery. Then there are the image tags. In the JQuery section I specify where the Plug in gets the images. Here are the settings I specify how the image gets treated. There’s a default setting too.

I told it to scroll down and take 300 milliseconds with pictures. Then to pause if you hover over the picture. It stays on the picture that way. Take the mouse off then it changes.

That’s the pause setting.

Random means to randomize the images. If it can’t load then it stops after 2 seconds. The viewer won’t wait that way.

Then the plug in file is at the top as they all are.

That’s it. But browse around and Google the the plug noise. There are many.

Any questions? That’s it. Over the weekend think about your final projects. Conceptualize it for a final website. There’s only one more week. So make it simple. But you should show your skills. Think about it and get some ideas about what you want to do.

Student: So just for this week?

Professor: Take the weekend to review what we’ve done. But I want you to use the week for the final project. I don’t want to cram stuff in. Any questions?

That’s it! You are free to leave early but I’ll stick around.

[End of class.]