April 22nd, 2010 §
AJAX is an acronym that stands for Asynchronous Javascript And XML. It refers to a specific feature of the browsers’ implementations of Javascript that became popular in the first few years of this century because it provided a way in which web pages could load content on demand in reaction to a user’s actions, rather than preloading all content with the initial page load, as had been the norm previously.
Many people in the web industry conflate the terms AJAX and dHTML. Since you are taking this class, you should know the accurate meaning of each of these terms, even if you choose not to stick to the correct meanings when conversing with the ignorant and incorrigible masses.
dHTML
Since Javascript was first introduced into Netscape Navigator in 1995, people have been using it to change the content of web pages. In other words, long before AJAX was even possible, there was dHTML. Dynamic HTML is the technique, which we have already seen, of using Javascript to change the content of the page dynamically. Most typically, this change is in response to a user’s action, such as a click, a mouseover, mouseout, or some other action that changes the appearance of the page in some way. Often, these changes are simply showing and hiding various parts of the content, or changing the styles associated with some of the content.
By preparing Javascript, CSS, and XHTML in just the right way, a website maker can make a page seem to be dynamic and responsive to user actions. dHTML refers to this use of Javascript, in combination with CSS and XHTML, to make a page seem dynamic and responsive.
People don’t use the term dHTML very much anymore, although the dHTML techniques are used more than ever.
AJAX
AJAX refers exclusively to the technique in Javascript whereby Javascript code on a page makes a request to the server without requiring a reload of the entire web page. As we have discussed the client/server relationship, the HTTP GET and HTTP POST methods, persistent data and passing data, we have spoken as if a request to the server is one and the same as the loading a whole web page in the browser. Now you know that there is a way to make requests to the server without requiring the reload of the entire page – it is called AJAX.
After an AJAX request is made from the Javascript code running on the client to the server, the server may respond, as it usually does to any request. The Javascript code that made the request often waits [asynchronously] for that response. Once the response is received from the server, the Javascript code on the client then updates the content of the page dynamically using standard dHTML techniques depending on exactly what response it got back.
People often [inacurrately] use the term AJAX to mean any dHTML, regardless of whether it actually involves a request to the server. The term, AJAX, has been usurped by marketers to indicate any kind of dynamic content.
Conceptually, making an AJAX request is identical to any other request to the web server. The Javascript code makes the request using either HTTP GET or HTTP POST. The client can pass data to the server along with that request, or not. The server can process that request using PHP or some other server-side language, read any data that was passed, do some business logic, and respond appropriately.
According to how AJAX was originally conceived, the server was supposed to respond with some XML code that the browser thean parsed. Practically-speaking, the browser is not especially good at parsing XML, so receiving a response in XML is more work than it’s worth. Today, having the server respond with XML is the exception rather than the rule, although it is still done. However, these days the server is programmed to usually respond either with an XHTML snippet which is then dynamically output on the page by the Javascript script on the client, or the server responds with a Javascript code snippet of its own which is then run by the client.
JQuery
Naturally, Internet Explorer handles making AJAX requests differently from Firefox and the other popular browsers. Once again, JQuery solves this problem by providing a set of functions that normalize the browser differences for us. While you can, of course, use the native Javascript AJAX methods to handle the asynchronous requests to the server, I strongly recommend that you use JQuery or another Javascript framework instead to make your code more reliable across browsers, and to keep it simpler and easier to maintain.
March 28th, 2010 §
Here is an attempt at a cheat sheet for working with the Document Object Model. This diagram shows the most commonly used objects and their properties and methods. It is by no means an exhaustive list of every feature of the DOM.
Curated List of Dom Objects
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.
October 23rd, 2009 §
In your studies of Javascript, you will most likely come across the Document Object Model (DOM for short) at some point. The DOM is simply the internal representation the browser has of the contents of a web page. We have already discussed some aspects of the DOM without calling it such.
The layout engine
Whenever you write XHTML and CSS code, the web browser does some internal processing to determine out how the page is supposed to look. The part of the browser responsible for this task is known as the layout engine. The different browsers often have slight different layout engines which means the browsers sometimes display the contents of any given page slightly differently.
The internal representation that the browser makes of the page, the DOM, is made accessible to any Javascript code on the page as a series of built-in Javascript variables. For example, “window” is a built-in variable that holds information about the entire browser window. “document” is another built-in variable that contains all the information about the content in the <body> section of the page.
Developers can write Javascript code to interact with the DOM to either detect or to change how the page is internally represented.
Object-oriented DOM variables
These built-in variables that hold the browser’s internal DOM information are object-oriented, which for our purposes means that these variables do not necessarily hold just text or numbers. They often are wrappers that contain other properties, functions, or other objects “inside” of them. For example, the “window” object has a “title” property inside of it, which is simply a variable that holds the text inside the <title> tag in the XHTML.
When one property, function, or object is inside of another, we use dot notation to indicate the hierarchical relationship. So window.title indicates that title is a sub-property of the window object. The code window.close() tells the browser to run the function called close() that is inside of the window object, which happens to close the window automatically. Similarly, window.alert(“hello”) tells the browser to run the alert() function of the window object and pass it the parameter, “hello”.
The DOM on a need-to-know basis
There are lots of built-in variables, objects, and functions in the DOM, and it can easily become overwhelming. However, in practice, we only use a few of these. Don’t try to memorize them all. By following the conventions taught in this class, it is not necessary that you delve too far into the details.
There are some things you will want to know:
- window is the highest level DOM object. All other DOM objects are sub-objects of window. In fact, your own variables and functions that you define in your code are also automatically created as sub-properties of window.
- document is a sub-object of window. So to get access in Javascript to information concerning the stuff inside the <body> tag, you use the window.document object. Fortunately, for convenience, you can refer to the document object as simply document. It’s not necessary to specify the full window.document variable name. The “window.” part is implicit in all variable names, so you don’t need to write it.
- You can get the DOM representation of any element in the <body> tag by using the getElementById() function of the document object. For example, var el = document.getElementById(‘foo’); will find the XHTML element that has the id attribute set to “foo” and store it in memory in an object named “el”. The variable “el” now holds an element object, which is a standard type of object used to hold all the information about individual XHTML elements. Element objects have a variety of properties and functions that are especially useful when dealing with individual XHTML elements.
- The className property of the element object holds the name of the class that is specified in the XHTML. For example, to detect the class of an XHTML element that looks like this <p id=”p1″ class=”foo”>…</p>, you would first get an element object that holds information about this element by using var el = document.getElementById(‘p1′); Then you would access this element’s className property by referring to it as el.className. For example, if you said, alert(el.className);, the word “foo” would pop up in an alert window.
- The style property of the element object contains information about the CSS used to control the design of that element in the browser. For example, to get the font-size property of an element such as <p id=”p1″>, you could (in theory), access that information through the DOM by referring to the element’s style.fontSize property in Javasacript. First you would get a reference to the element object by using var el = document.getElementById(‘p1′);, then you would access this element’s font-size property, for example, with alert(el.style.fontSize);
- Image elements have a src property which represents the source file used to display the image. For example, if you have an image tag in your XHTML like this, <img id=”img1″ src=”images/monkey.jpg” />, you can manipulate the src attribute in Javascript by doing something like, var el = document.getElementById(‘img1′); img1.src = “images/cat.jpg”;
See also
October 17th, 2009 §
Your coding assignment is to convert the following wireframe diagram into a fully functioning page, using XHTML & CSS for the layout and Javascript for the interactive behaviors.
Note: this is a wireframe, not a design comp. So do not try to use make your pages pixel-perfect based on this diagram. Use the diagram as a rough guide, and just make sure the Ad Banner and Skyscraper Ads you use are the size that is written into the wireframe. All other design elements, including dimensions, colors, fonts, and borders are up to you.
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.
So the trick to this assignment will be to first create the layout with all the basic page elements using XHTML & CSS. Be sure to create an “img” tag and a “div” tag for each product. The img tag should be visible when the page first loads, and the div tag should be invisible by setting its “display” property to be “none” in the CSS.
Create the mouseover and mouseout Javascript event handlers so that when you mouse over an image the image disappears and the div shows up. And when you mouse out of the div, the div should disappear and the image should re-appear.
Tips / Spoilers
Note: don’t read this if you want to figure out the solution yourself.
Solution #1: Here is an example of how I would set up the product thumbnails in terms of both XHTLML and Javascript. You can use this exact code for the thumbnails on your own pages, but be sure you understand how it is working.
Solution #2: It just so happens that you don’t even need to use Javascript to complete this assignment. Here is an example that has no Javascript and relies instead upon the CSS :hover pseudo-class to do the same thing.
Solution #3: Here is a slight variation on the CSS-only solution outlined in Solution #2. This version makes the product thumbnail become partially transparent when it is moused-over, instead of disappearing entirely.
October 17th, 2009 §
Your assignment in class today is to develop a sort of text-capturing script. The page is going to be divided into two identical panels. In the left panel, you will have one text input, one password input, and one textarea input. When a user begins to enter text into any of the fields in the left panel, the corresponding field in the right panel will start to be automatically filled-in with the same text that they entered in the left.
To do this assignment, you will have to look into Javascript “keyup” events.
Here is the information architecture wireframe for this in-class assignment:
Text-capturing wireframe
The best way to approach this assignment is to first lay out the page in XHTML and CSS before doing any Javascript coding. Then start thinking about the how the logic of this type of interaction might be structured. Break it down into discrete individual steps.
Here are the basic steps that need to be handled in order for something like this works
- set event handlers to detect the “keyup” event whenever a user types anything into any of the form elements on the left side of the page
- if a keyup event is triggered, call a function
- in that function, first get the values of all form elements on the left side of the page and store them each in their own variable
- Take the values stored in those variables and insert them into the corresponding form elements on the right side of the page
I expect you’ll have questions for me about exactly to do this, so please try to figure it out based on the examples so far, and ask for help when you get stuck.
Hint
Dealing with keypress, keyup, or any other type of supported Javascript event is not so different from the examples we went over for mouseover, mouseout, and click events. You create an XHTML attribute called “onkeypress” or “onkeyup” in each element you want to detect these events for, and set its value to be a call to a Javascript function…
<input type="text" name="first_name" id="first_name" onkeyup="doSomething();">
To get an XHTML element into memory in Javascript, you access it based on its “id” attribute. So, for example, to get an element with the id=”first_name” into memory, we would do the following in Javascript:
var firstNameElement = document.getElementById("first_name");
To get the value of a text input, password input, or textarea element, you can use the .value property of the element in Javascript. So, for example, to get the value of the element retrieved above, we could do something like:
var firstNameValue = firstNameElement.value;
To set the value of a text input, password input, or textarea element, you can do the reverse. For example:
firstNameElement.value = "some new value here";
where “some new value here” can be left as a string literal, as in what we just saw, or replaced by a variable that holds a string in memory, such as:
var newName = "Amos";
firstNameElement.value = newName;
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 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.
July 16th, 2009 §
Your task today is to complete this assignment. It deals with events in Javascript, which is the topic of the day.
