DUE Thursday, Apr 12 – 5 points
(Friday NOON deadline)

This week, we will be discussing JavaScript. So far we have discussed the history, basic syntax, and events in JavaScript. We now turn to talking about how to use JavaScript in real-world web sites. I believe this is the most technical material for the whole class. While some of you will love it, I know others will hate it. Please stick with it, and please do not cry: even if you will never write JavaScript after this class, it is important that you have a basic understand of how it works if you will be publishing material on the web.

• Introducing DOM Scripting by Christian Heilmann
  This is an excellent article addressed to beginning JavaScript developers about the difference between old bad practice (called “DHTML”) and new good practice (called “DOM Scripting”). Since most of you are not familiar with old bad practice, we’ll just be reading the parts of this article that discuss new good practice.

  I recommend first taking a look at a demonstration of what Christian is building through the article. This first link shows the page without JavaScript: [HTML/CSS Only]. This second link shows the same page with JavaScript applied: [JavaScript Enhanced]. The JavaScript converts the long list of features into a tabbed interface and the list of images into a photo gallery.

  In the first half of the article Christian explained how you might have built this using old bad practice (DHTML), but we’ll start in in the middle of the document where Christian explains how to use the new good practice. Follow this link and read everything in this “Introducing DOM Scripting” section, stopping right before the “Re-creating the demo page” section. Introducing DOM Scripting »

• The essentials of DOM scripting (00:00-9:40) by Christian Heilmann
  In this video, Christian demonstrates various JavaScript commands for retrieving and manipulating various nodes in the DOM.

Once you have completed the reading, you will need to take a quiz of ten true-false questions. (These questions will be randomly selected from the questions below. You can retake the quiz up to five times. Don’t stress about getting 100% on these quizzes: if you get 80% or better, you will be ready to proceed to the next activity and I will give you full credit.)

All questions should be prefaced with an understood, “According to the author of the material … “:

1. T/F? When using new good JavaScript practice (“DOM scripting”), you do not rely on the presence of JavaScript: the page will not have the fancy interactivity without JavaScript, but the page will still work.
2. T/F? New good JavaScript practice (“DOM scripting”) is forward-thinking in that it aims to work in the future; it is not meant just to “do the job” at the time it is written.
3. T/F? JavaScript is the technology that makes up the “behavior” layer.
4. T/F? It is a good practice to add JavaScript event handlers directly into your HTML code.
5. T/F? Progressive Enhancement and Graceful Degradation are exactly the same thing.
6. T/F? To implement Progressive Enhancement with JavaScript, you check for the support of certain objects in your scripts before you try to apply them.
7. T/F? Christian recommends checking if a browser can execute the following two commands before running any code that accesses the DOM: [document.getElementById] and [document.createTextNode].
8. T/F? Christian recommends changing the style collection with JavaScript using syntax like this — h2.style.color=”red”;
9. T/F? The JavaScript ternary notation looks like — <test> ? <do if true> : <do if false>; — and is shorthand for — if (<test>) { <do if true>; } else { <do if false>;}
10. T/F? Christian recommends using — document.write() — to add HTML to your document.
11. T/F? External JavaScript files can be included with a <script> tag in the HTML file that looks like this: <script type=”text/javascript” src=”filename.js”></script>
12. T/F? With new good JavaScript practice (“DOM scripting”), you can assume that your script is the only one being applied to a web page.
13. T/F? Christian recommends including an addEvent() function like the one written by Scott Andrew LePera in 2001.
14. T/F? Using global variables keeps scripts from interfering with each other.
15. T/F? The function getElementByID() returns a single element with an ID that matches the parameter we pass to it.
16. T/F? Computers typically start counting at zero instead of at one: this applies to the array of elements returned by getElementsByTagName.
17. T/F? You can change the text inside an HTML element by finding the text node within the element node and changing the nodeValue.
18. T/F? Text nodes have a nodeType equal to 7.
19. T/F? You can change an attribute inside an HTML element by using the function changeAttribute.
20. T/F? New nodes appear in the document as soon as you call createElement or createTextNode.

DUE Thursday, Apr 12 – 5 points
(Friday NOON deadline)