October 24th, 2009 §
Advanced assignment
For those of you who are finished with all the previous assignments and feel comfortable with everything so far, here is the advanced assignment.
Your job is to make a tic-tac-toe game online using XHTML, CSS, Javascript, and JQuery.
Tic-tac-toe is a two player game. One player is “X” and the other player is “O”.
Wireframes
Here is the beginning screen before either player has moved:
Players can click on any empty square. But once a square has been clicked, it cannot be clicked again.
When the first player clicks on any square, that square becomes an “X”:
The next player then clicks on any empty square, and it becomes an “O”:
The players then take turns until one player has three of their squares in a row, either horizontally, vertically, or diagonally. For example, the “X” player in this example has three X’s in a row vertically, so she has won:
When a player wins, the browser detect the winning state, and should pop up a message that indicates who has won.
It is possible that neither player has won after all the squares have been clicked. If this is the case, the browser should show an appropriate message:
Once the player clicks the “Start over” button or clicks the little “x” at the top right of the message box, the game should start over, the message box should disappear, and the game board should become blank again.
October 24th, 2009 §
Please complete all client-side assignments
This week marks the end of covering the client-side technologies, XHTML, CSS, and Javascript. Next week, we will begin with the server-side technologies, PHP, and MySQL. So the major assignment for this week is to make sure all your assignments from past weeks are completed, working, and linked from your blog so I can grade them. There will be a general amnesty for late assignments – if you complete them by the end of the week, you will receive a full grade.
PS: Please test the links to your assignments before posting them to your blog. If the links don’t work, then I can’t see your assignments, which means you get a zero grade for them. Not a happy conclusion to your hard work. Also, a screenshot of your assignment is not a substitute for a link to it. There are several of you who are repeat offenders on both counts – please go through your old posts and make sure all links to past assignments are present and working.
The assignments so far are:
Quiz
We will be having a quiz next week on the client-side material, so please make sure you have done all the assignments and gone through all the previous reading material that has been assigned.
July 19th, 2009 §
The Class 6 assignment brings together all of the technologies and best practices we have been studying all week. The XHTML and CSS layout is somewhat advanced, and the Javascript/JQuery code that is necessary to create the mouseover/mouseout effects indicated in the wireframe diagram will undoubtedly get your hands dirty with coding complex behaviors on the web.
Those of you who have already spent time tackling the Javascript/JQuery aspect of the assignment may have wondered whether there wasn’t a quick and efficient way of setting the behavior for all of the product thumbnails without having to repeat the same code 9 times for each thumbnail. Furthermore, some of you may have experienced buggy behavior in your solutions (such as not all of the mouseover and mouseouts resetting the thumbnails properly) and wondered what was truly the best solution.
Here are three possible solutions to the interactive part of the assignment that avoid common pitfalls and should serve as case studies for how to think about problems like this.
The First Solution: using JQuery selectors to their best advantage
The first example relies on the fact that the XHTML code for each product thumbnail is set up in a particular nesting structure. Each product thumbnail is surrounded by a div with class=”product”. Inside of this div is an <img> tag which is the product image, and another <div> tag that contains the product info.
<div class="product">
<img src="images/muffin1.jpg" />
<div>
<h3>Product 1</h3>
<p>Definitely the best muffin around</p>
<a href="#">$3.99</a>
</div>
</div>
Assuming this to be the XHTML structure of all product thumbnails, the JQuery code for this solution can then attach the mouseover and mouseout behaviors to the outer div, which is always visible on the page.
//when a user mouses over a div with class="product"...
$("div.product").mouseover (function () {
//make the div and img tags inside of the product div toggle their respective visibilities
$("div", this).toggle(); //the second parameter of $() specifies the context for the selector - in other words, which element to search within for matching elements. in this case, using "this" indicates to search within the element that was moused over
$("img", this).toggle();
});
//when a user mouses out of a div with class="product", do the same thing
$("div.product").mouseout (function () {
$("div", this).toggle();
$("img", this).toggle();
});
When a user mouses over one of the <div> tags with class=”product”, the ensuing code toggles the visibility of each the nested <div> and the nested <img> tags by using a JQuery selector that takes advantage of the $() function’s optional second parameter, which specify the context in which the selector should be applied. By using the “this” variable for the second parameter in the command $(“div”, this).toggle(), we are telling JQuery to select only those <div> tags that are inside of the element that is currently being moused over (i.e., the “this” element). So JQuery will not toggle the visibility of other divs that are outside of the moused-over element. Likewise the image – only the image within the moused-over element will have its visibility toggled.
The Second Solution: using JQuery to switch elements’ CSS styles
This second solution uses the same XHTML structure as the last solution, and simply uses JQuery to add a class to any product <div> that is currently moused-over. Here is the code that does so:
//when a user mouses over a div with class="product", add the class "selected" to the element
$("div.product").mouseover (function () {
$(this).addClass("selected");
});
//when a user mouses out of a div with class="product", remove the class
$("div.product").mouseout (function () {
$(this).removeClass("selected");
});
In the CSS code for this solution, there are predefined styles for how the relevant parts of the product thumbnails should look. By default, the product image is visible, and the product description is invisible. However, when the outer product <div> has the “selected” class applied to it, the CSS code indicates to make the product image invisible, and the product information visible.
Here is the relevant CSS. Notice the different “display” properties for the inner <div> and <img> tags both in their default state, and when the outer div has the class “selected” applied:
/* BEGIN default styles for the product thumbnails */
div.product > div {
/* center product description within the product container */
text-align: center;
display: none;
}
div.product > img {
/* center product images within the product container */
display: block;
margin: 0 auto;
}
/* BEGIN styles for when a product thumbnail is moused over */
div.product.selected > div {
display: block;
}
div.product.selected > img {
display: none;
}
The Third Solution: pure CSS
The third solution is entirely achieved in CSS. Using JQuery is absolutely unnecessary for simply changing how things look when they are moused over. There is no need for JQuery to add the “selected” class to the currently moused-over product thumbnail element. The same CSS tricks used in the last solution can be done by relying on the CSS “:hover” pseudo-class, rather than an explicit “selected” class. The “:hover” selector is a built-in CSS pseudo-class that helps define styles that only are applied if an element is currently moused-over. In this case, we do not apply styles to the element that is being moused over itself, but rather to its child elements.
Here is the relevant CSS. Note that it is almost identical to that in the last solution, save for the use of “:hover” in place of “.selected”:
/* BEGIN default styles for the product thumbnails */
div.product > div {
/* center product description within the product container */
text-align: center;
display: none;
}
div.product > img {
/* center product images within the product container */
display: block;
margin: 0 auto;
}
/* BEGIN styles for when a product thumbnail is moused over */
div.product:hover > div {
display: block;
}
div.product:hover > img {
display: none;
}
July 17th, 2009 §
Many developers have created plugins for JQuery that add extra functionality. These are not part of the official jQuery library, but can be added to that library by simply including a few extra Javascript files into your XHTML document.
Here are a few useful JQuery plugins:
Try searching for JQuery Plugins, and you’ll see there are many more.
July 17th, 2009 §
The use of the JQuery functionality we are reviewing today requires that you include the JQuery Javascript library into your code. Every page that you create which relies upon JQuery functionality must include a <script> tag in the XHTML that indicates where the browser can find the JQuery files.
Downloading the JQuery files
To begin creating a project that uses JQuery, you must download the JQuery library. Here are the relevant URLs:
This will give you copies of the JQuery library files.
Setting up your project workspace
Then, as usual in web development, you will need to set up a project folder for the new project For example, if my project is called “my_project”, I will need to create the following project files and folders within my workspace folder, which we’ll call “my_workspace”:
- /my_workspace/my_project/
- /my_workspace/my_project/images/
- /my_workspace/my_project/scripts/
- /my_workspace/my_project/styles/
The you will need to put the minimum necessary files into these folders:
- /my_workspace/my_project/index.html
- /my_workspace/my_project/styles/main.css
If you are using JQuery, then you must copy the JQuery files you downloaded into the scripts/ folder for this project:
- /my_workspace/my_project/scripts/jquery-1.3.2.js
… and any other JQuery-related libraries, such as “ui.core.js” if you are using the JQuery UI, would go into this same scripts folder
Including JQuery into XHTML files
Once you have downloaded the JQuery library files, and you have properly set up your project workspace, you are ready to write XHTML code.
To include JQuery into your XHTML, you must use <script> tags in the <head> section of your XHTML document. These tell the browser where to find the JQuery code.
For example, the minimum amount of XHTML code necessary for a JQuery project would look like this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>The Title of Your Page</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
//use jquery to detect when the page has fully loaded
$(document).ready(function() {
//put code here that you want to run after the page fully loads
});
</script>
</head>
<body>
<!-- the contents of the page go here -->
</body>
</html>
July 16th, 2009 §
In Class 5, we introduce the Javascript “framework” known as JQuery. A Javascript framework is a fancy word for a bunch of Javascript functions that someone has written which make common Javascript coding tasks simpler to do and more efficient than they would otherwise be.
Why we use JQuery
Javascript itself is something of an unpleasant and inconsistent language for those people who know about such things. This makes it especially difficult for students to learn and for teachers to teach. JQuery and other Javascript frameworks are meant to address this issue. They attempt to add consistency and ease-of-use to an otherwise difficult language. So, although we have hardly touched the surface of beginning Javascript, I believe it is expedient to switch to the JQuery style of programming Javascript as soon as possible.
Read this post for an argument in favor of Javascript frameworks, and see this page for one example of trying to detect the width of an element on the page can be totally inconsistent and counterintuitive in Javascript.
One of the things we will be doing today is taking the same Javascript examples we created in Class 4, and showing how the exact same tasks can be accomplished using the JQuery framework, rather than the raw Javascript we have been using to date. So we will be achieving the same ends, but with slightly different means.
JQuery examples
Introducing the JQuery $() function
As you go through the JQuery examples below, I advise you to have this explanation of JQuery syntax open at the same time, so you can compare the code in the examples with a description of their intended use.
With that in mind, here are the basic examples of JQuery usage.
Using JQuery to handle events
Using JQuery to change element styles
Jquery effects
JQuery comes with some built-in effects and animations. With a small amount of code, you can make elements appear, disappear, fade in, fade out, slide up, slide down.
Jquery user interface controls
Jquery also comes with some built-in user interface controls, known as JQuer UI. If you have a strong command of basic JQuery, everything in JQuery UI will be relatively easy to use with a minimal amount of code. These UI controls include the ability to add “drag and drop” functionality to your pages, to allow users to resize elements of your page by dragging them to new sizes. You can also use JQuery UI to make “Accordian” style expandable lists, date pickers for calendars, dialog boxes (modal dialogs), progress bars, sliders, and tabs.
JQuery assignment
For those of you who feel relatively confident in your ability to create page layouts using XHTML and CSS, and who were able to more-rather-than-less grasp the concepts we encountered in our experience with Javascript so far, this assignment is for you.
This is an advanced assignment
If you are not yet satisfied with your progress in XHTML and CSS, I encourage you to NOT try to create the Javascript code for this assignment. Rather, I would prefer you to focus on perfecting your XHTML, CSS skills to create the basic layout of this page. Once that is complete and you think you may be able to create XHTML and CSS layouts for just about any page design I throw at you, only then should you begin to think seriously about writing the Javascript code necessary for this assignment. XHTML and CSS are the foundation upon which all web development rests.
With that illustrious introduction, here is the assignment.
April 18th, 2009 §
If you remember way back in Class 5, we saw examples of using JQuery, the Javascript framework. Some of those examples used JQuery to create event handlers for mouseover, mouseout, page load, etc.
In particular, the show/hide example showed how to change the contents of the page in response to user events. In this case, we were making an element show up or disappear depending on user actions. This is basic DHTML.
You can think of AJAX as doing something similar. With AJAX we often make things show up on the page that were not there before. The difference between our old show/hide example and an AJAX version is that the content that shows up on the page using AJAX would not be pre-loaded on the page, as it is in the show/hide example.
AJAX is a way of making requests to the server without reloading the entire page. You can think of it as being a behind-the-scenes way of making requests to the server.
Sometimes AJAX is used to load new content to display on the current page. Other times, AJAX is used to autotmatically submit form data to the server without requiring the user to actually submit a form in the normal way.
Here are the AJAX examples we covered in class today:
March 14th, 2009 §
JQuery’s syntax can be confusing, especially since you only started learning regular Javascript about a week ago. Don’t worry, it’s going to be ok 
Let’s first deconstruct some of the more common JQuery commands that you’ll come across, so you can start to recognize the common elements in all JQuery scripts.
Wating for the page to load
First, and most importantly among JQuery commands, is $(document).ready(). This is the command we use to wait until the page is loaded before doing any manipulation of elements on the page.
Remember that objects are specific instances of classes (e.g., a specific Ford Mustang would be an instance – i.e., an object – of a general Car class). Objects have both properties and methods.
By default the web browser automatically creates an object that it calls “document” that has a variety of properties and methods related to the contents of the current web page. This document object is the highest level object in the Document Object Model (DOM), which is the internal representation the browser has of the contents of any page.
The ready() method is an extra method that JQuery adds on to the browser’s existing “document” object. It offers a relatively simple way to run some code only once the page has finished loading. This method takes one parameter, which is the function to run when the page is ready.
To extend the “document” object so that it has this extra ready() method (as well as many other extra JQuery properties and methods), we wrap it in the $() function. So we write “$(document)” whereas in regular Javascript, we would use just “document”. This “$()” indicates that we want to use the extended JQuery version of this object, with the extra methods and properties. You can use this same technique for any element in the DOM that you want to extend with JQuery’s extra properties and functions.
So in the end, $(document).ready(some_function) is the way we call this extended document object’s ready() function. We pass it, as a parameter, the function we want called when the page is ready.
some_function can either be the name of the function to call, or the definition of the function itself. So you could have code that looks like this:
function doSomething() {
//some code that you want to run when the page loads
}
$(document).ready(doSomething); //call the doSomething() function when the page is ready
…or, we could use an alternative syntax, which takes advantage of Javascript’s ability to write anonymous functions, meaning functions with no name that are only used once:
$(document).ready(function() {
//some code that you want to run when the page loads
});
These two code snippets are functionally identical as far as the browser is concerned. The latter syntax, using an anonymous function as a parameter, is more common in this context among experienced developers, since it is more compact.
Creating an event handler
The next most common thing you will want to do in JQuery code is create an event handler. This means creating a block of Javascript code that responds to a browser event, be it a click, mouseover, mouseout, keypress, keyup, or any other type of event. JQuery makes this process standardized, and quite simple.
A typical JQuery click event handler will look something like this:
$("a.class1").click(function(event) {
//some code that you want to run when the user clicks any element that matches the "a.class1" CSS-style selector
});
Let’s dissect this code. Let’s first look at the first part, $(“a.class1″). Once again, we see the ubiquitous “$()” JQuery function. This time, it is wrapped around a CSS-style selector, “a.class1″. As you know, if this were CSS code, that selector would match any <a> tag with class=”class1″. And it works exactly the same way here, because the developers of JQuery decided that this type of selector is easy to use. Putting a CSS-style selector as a String literal like this between the parentheses (as a parameter) of the $() function tells JQuery to return an array (i.e., a list) of all DOM elements that match this selector.
For all the elements that match this selector, we attach a “click” event handler. An “event handler” is just code that does something in response to an event: in this case the event would be a user clicking on any of the matching <a> elements. To attach the event handler to these elements, we call the click() method of the matching DOM elements. This click() method is is one of those method that JQuery adds as an extension to the default DOM element methods.
Any time you use the $() function to get a single element, or a list of elements, you can be sure that the objects that are returned by that function have the additional extended methods and properties that JQuery provides. So now you know that click() is an extended method of any DOM element returned by the $() function, and it takes one parameter: the function to run when a user clicks one of the matching elements.
Like the $(document).ready() method, we can think of this method as looking something like this:
$(some_css_selector).click(some_function)
The some_css_selector indicated in this code would be a CSS-style selector, such as “a.class1″. And just as with the $(document).ready() function, some_function can be either the name of an existing function, or an anonymous function definition, as illustrated in the following two equivalent ways of doing this task. First the long-winded way of doing it:
function doSomething(event) {
//some code that you want to run when the user clicks any element that matches the "a.class1" CSS-style selector
}
$("a.class1").click(doSomething);
You may notice that our function’s signature, “function doSomething(event)”, takes a parameter that we call “event”. This paramater automatically gets passed by JQuery to any function that called as an event handler. And so the “event” variable in that function holds the a special JQuery Event object that has properties and methods related to the browser event that triggered this event handler to be called. In this case, the “event” object has properties and methods related to the “click” event that caused the function to get called. For example, the event.type property would hold the type of event, be it “click”, “mouseover”, or something else. And event.preventDefault() is a method of the JQuery Event object that prevents links or forms from actually taking the user to another page.
The directly equivalent, but more compact, way of writing this same event handler using an anonymous function definition would be:
$("a.class1").click(function(event) {
//some code that you want to run when the user clicks any element that matches the "a.class1" CSS-style selector
});
Which method you choose is up to you, but you will probably see both being used by other developers. The two are equivalent as far as the browser is concerned.
The this
Within any function that gets called as a the result of an event handler, we have a special variable called “this”. This variable automatically holds the DOM element that triggered the event.
For example:
$("a.class1").click(function(event) {
//some code that you want to run when the user clicks any element that matches the "a.class1" CSS-style selector
$(this).addClass("selected");
});
The “this”, in this example, holds the regular Javascript DOM element that triggered the “click” event, which was handled by the anonymous function that is passed as a parameter to the click() method.
If we want to use JQuery to modify this DOM element, we have to first extend it by wrapping it in $(). So we write $(this) in order to be able to use the special JQuery methods and properties, like addClass() that JQuery adds to regular DOM elements. The addClass() method is a simple method that takes a single parameter, the name of a CSS class to add to the element. In this case, we are using it to add the class, “selected”, to the element that was clicked.
Putting it all together
So taking a real-world example…. the way you would use JQuery to handle an event is by combining the above methods. First you would wait for the page to finish loading, using the $(document).ready() method. And as the sole parameter to this ready() method, you would pass a function that defined an event handler.
For example:
$(document).ready(function() {
//some code that you want to run when the page loads
$("a.class1").click(function(event) {
//some code that you want to run when the user clicks any element that matches the "a.class1" CSS-style selector
$(this).addClass("selected");
});
});
See how we have nested the “click” event handler within the anonymous function that gets called when the page is “ready”. This makes sure that the event handler is only set after the page has loaded, thereby assuring that the DOM elements of the page that we want to modify are already loaded and available to be modified.
March 14th, 2009 §
Here are links to each of the JQuery examples we looked at today.
In addition, here is the link to the example page that we used to exhibit one way in which Javascript is inconsistent and can produce unexpected results. In this case, the style.width property of elements in Javascript is inconsistently applied: it works for some elements, but not others.
And here is the example that demonstrates how to override the default behavior of links and forms. This example prevents them from actually taking the user to another page, and keeps them on the current page instead.
March 14th, 2009 §
Your assignment in class today is to convert this diagram into a fully functioning XHTML/CSS/Javascript/JQuery page.
Mock e-commerce store wireframe
You hopefully realize that this assignment is identical to the class 5 assignment, except that this time, you will be writing Javascript code that takes advantage of the jQuery framework, rather than writing native Javascript as you did in the previous assignment.
When someone mouses over any of the product thumbnails, the thumbnail should disappear, and a div containing information about that product should appear. The information div should show up as exactly the same height and width in exactly the same place where the thumbnail was on the page.
When the user then mouses out of the product info div, the info div should disappear, and the product thumbnail image for that product should reappear.
Where to start
I highly encourage you to make sure you understand all the discussion points from the class 5 page and the the class 6 page of this site. In case you wish to refer to some more “official” documentation, here are some external links to relevant pages from the JQuery site that you may find useful (you may also find them difficult to comprehend, so take them with a grain of salt):
A hint
To approach this problem, it might be helpful to go over the high-level flow of control of the page. Here are the steps involved in a typical scenario:
- Your code waits for the page to load, using JQuery’s $(document).ready() method. (Maybe it would be smart to refer to the example of the ready() function on the class 6 page of this site)
- Once the page loads, your code sets mouseover and mouseout event handlers around all the thumbnails using the mouseover() and mouseout() methods available to all extended JQuery elements…. something like this (the ids and classes used in the CSS-style selectors in your code will probably be different): $(“img.product_thumb”).mouseover() and $(“div.product_info”).mouseout()
- These event handlers call functions that use JQuery’s show() and hide() methods of all extended elements to show and hide the corresponding images and divs. For example $(“img#thumb1″).show() and $(“div#info1″).hide()
