The Quirksmode site has a good chart outlining all the majors browsers’ support of standard CSS commands.
The red elements in the chart indicate the features of CSS not supported by the browsers. This chart makes it easy to see why web developers dislike Microsoft Internet Explorer.
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”.
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.
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:
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.
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 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.
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 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;
}
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.
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.
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.
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”:
The you will need to put the minimum necessary files into these folders:
If you are using JQuery, then you must copy the JQuery files you downloaded into the scripts/ folder for this project:
… 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
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>
Today, we introduce the Javascript “framework” known as JQuery. A Javascript framework is a fancy word for an external Javascript file with a bunch of functions that someone has written which make common Javascript coding tasks simpler to do and more efficient than they would otherwise be if you tried to code them from scratch.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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):
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:
To sum up our previous discussions and examples, the most common uses of Javascript fall into these general categories:
You should be aware that there are significant inconsistencies in how the major web browsers handle Javascript. There are also inconsistencies and bugs within each browser’s support of Javascript. Until only a few years ago, Javascript developers often had to write several sets of code: one for each of the browsers they wanted to support. Although this still happens, it is not as common, due to the popularity of a few Javascript “Frameworks”, which simplify coding practices.
Thankfully, a few altruistic developers have created these Javascript libraries (scripts written in Javascript) whose sole purpose is to smooth out these inconsistencies in the browsers’ support of Javascript so that regular developers no longer have to worry about them. This is achieved by creating a layer of abstraction between the code the Javascript developer writes, and the actual code that is eventually run in the browser.
Javascript framework as an abstraction layer
You, the developer, write code using the intuitive-looking functions and objects provided by the Javascript framework. The Javascript framework then converts your nice clean Javascript code into the horrible mess that the browser’s Javascript engine actually understands.
Thus, the frameworks hide the complexity of the buggy browser implementations from the average developer. The frameworks include functions and objects that your code can call instead of calling the buggy built-in Javascript functions and objects. You write one set of code using those functions and objects, and it runs as you would expect it to regardless of which browser you’re using.
Behind the scenes, rest assured that the framework is determining which browser you are using and running idiosyncratic code that is known to work for that browser, but you don’t need to (or want to) know that.
In addition to smoothing out the inconsistencies and differences in each browser’s Javascript implementation, the frameworks also offer some shortcut ways of doing common programming tasks. These shortcuts expedite development and make developers’ lives at least a little bit more enjoyable.
Four independent (and competing) frameworks that serve this purpose are Prototype, JQuery, YUI, and MooTools. Each provides much of the same functionality as far as we are concerned, although they achieve it in slightly different ways. In this class, we will be using JQuery, although everything we will be doing with it can also be done in any of the other frameworks (and in fact, anything we do with any Javascript library can be done – with much difficulty – in plain Javascript, since the libraries are themselves written in plain Javascript).
How much time, on average, did you spend each week on web development course assignments?
Total Voters: 45
Loading ...