1. Web Programming JavaScript Essentials

2. Document Object Model Essentials Object Properties To put somenew text into a text box object, you assign a string to the object’s value property: document.forms[0].phone.value = “555-1212”; Object Methods // define the function function fullScreen() { this.moveTo(0,0); this.outerWidth = screen.availWidth; this.outerHeight = screen.availHeight; } // assign the function to a custom property window.maximize = fullScreen;... <input type=”button” value=”Maximize Window” onclick=”window.maximize

3. Document Object Model Essentials “New” HTML practices A Simple Page This is the one and only paragraph on the page. Tree diagram of nodes for the document

4. Document Object Model Essentials W3C DOM HTML-Related Node Types

5. Document Object Model Essentials Node Object Properties (W3C DOM Level 2)

6. Document Object Model Essentials Properties of Selected Nodes for a Simple HTML Document

7. Document Object Model Essentials Node methods Node Object Methods (W3C DOM Level 2)

8. Document Object Model Essentials Generating new node content var newElem = document.createElement(“p”); newElem.setAttribute(“id”, “newP”); or newElem.id = “newP”; create a new p element, use: assign an identifier to the new element: Both ways are perfectly legal. Even though the element has an ID at this point, it is not yet part of the document so you cannot retrieve it via the document.getElementById() method. To add some content to the paragraph, you next generate a text node as a separate object: var newText = document.createTextNode(“This is the second paragraph.”); Again, this node is just sitting around in memory waiting for you to apply it as a child of some other node. To make this text the content of the new paragraph, you can append the node as a child of the paragraph element that is still in memory: newElem.appendChild(newText); If you were able to inspect the HTML that represents the new paragraph element, it would look like the following: This is the second paragraph.

9. Document Object Model Essentials Replacing node content To use replaceChild(), a script must first generate a valid text node with the new text: var newText = document.createTextNode(“first”); The next step is to use the replaceChild() method. But recall that the point of view for this method is the parent of the child being replaced. The child here is the text node inside the em element, so you must invoke the replaceChild() method on the em element. Also, the replaceChild() method requires two parameters: the first is the new node; the second is a reference to the node to be replaced. Because the script statements get pretty long with the getElementById() method, an intermediate step grabs a reference to the text node inside the em element: var oldChild = document.getElementById(“emphasis1”).childNodes[0]; Now the script is ready to invoke the replaceChild() method on the em element, swapping the old text node with the new: document.getElementById(“emphasis1”).replaceChild(newText, oldChild);

10. Document Object Model Essentials If you want to capture the old node before it disappears entirely, be aware that the replaceChild() method returns a reference to the replaced node (which is only in memory at this point, and not part of the document node hierarchy). You can assign the method statement to a variable and use that old node somewhere else, if needed. This may seem like a long way to go; it is, especially if the HTML you are generating is complex. Fortunately, you can take a simpler approach for replacing text nodes. All it requires is a reference to the text node being replaced. You can assign that node’s nodeValue property its new string value: document.getElementById(“emphasis1”).childNodes[0].nodeValue = “first”;

11. Document Object Model Essentials A Simple Page function modify() { var newElem = document.createElement(“p”); newElem.id = “newP”; var newText = document.createTextNode(“This is the second paragraph.”); newElem.appendChild(newText); document.body.appendChild(newElem); document.getElementById(“emphasis1”).childNodes[0].nodeValue = “first”; } Add/Replace Text This is the one and only paragraph on the page. Adding/Replacing DOM Content

12. Essentials Objects Generic HTML Element Objects Window and Frame Objects Location and History Objects The Document and Body Objects Link and Anchor Objects Image, Area, and Map Objects The Form and Related Objects Button Objects Text-Related Form Objects Select, Option, and FileUpload Objects Event Objects Style Sheet and Style Objects

13. Button Objects Three Buttons Sharing One Function Button Click function displayTeam(btn) { if (btn.value == “Abbott”) { alert(“Abbott & Costello”); } if (btn.value == “Rowan”) { alert(“Rowan & Martin”); } if (btn.value == “Martin”) { alert(“Martin & Lewis”); } Click on your favorite half of a popular comedy team:

14. Window and Frame Objects window.closed Property // initialize global var for new window object // so it can be accessed by all functions on the page var newWind; // make the new window and put some stuff in it function newWindow() { newWind = window.open(“”,”subwindow”,”height=200,width=200”); setTimeout(“finishNewWindow()”, 100); } function finishNewWindow() { var output = “”; output += “ A Sub-window ”; output += “ <input type=’button’ value=’Close Main Window’”; output +=”onclick=’window.opener.close()’> ”; newWind.document.write(output); newWind.document.close(); } // close subwindow, including ugly workaround for IE3 function closeWindow() { if (newWind && !newWind.closed) { newWind.close(); } <input type=”button” value=”Open Window” onclick=”newWindow()” /> <input type=”button” value=”Close it if Still Open” onclick=”closeWindow()” /> Checking Before Closing a Window

15. Select, Option, and FileUpload Objects Changing Options On The Fly // flag to reload page for older NNs var isPreNN6 = (navigator.appName == “Netscape” && parseInt(navigator.appVersion) <= 4); // initialize color list arrays plainList = new Array(6); hardList = new Array(6); plainList[0] = “cyan”; hardList[0] = “#00FFFF”; plainList[1] = “magenta”; hardList[1] = “#FF00FF”; plainList[2] = “yellow”; hardList[2] = “#FFFF00”; plainList[3] = “lightgoldenrodyellow”; hardList[3] = “#FAFAD2”; plainList[4] = “salmon”; hardList[4] = “#FA8072”; plainList[5] = “dodgerblue”; hardList[5] = “#1E90FF”; // change color language set function setLang(which) { var listObj = document.forms[0].colors; // filter out old browsers if (listObj.type) { // find out if it’s 3 or 6 entries var listLength = listObj.length; // save selected index var currSelected = listObj.selectedIndex; // replace individual existing entries for (var i = 0; i < listLength; i++) { if (which == “plain”) { listObj.options[i].text = plainList[i]; } else { listObj.options[i].text = hardList[i]; } if (isPreNN6) { history.go(0); } else { listObj.selectedIndex = currSelected; } Modifying select Options

16. Select, Option, and FileUpload Objects // create entirely new options list function setCount(choice) { var listObj = document.forms[0].colors; // filter out old browsers if (listObj.type) { // get language setting var lang = (document.forms[0].geekLevel[0].checked) ? “plain” : “hard”; // empty options from list listObj.length = 0; // create new option object for each entry for (var i = 0; i < choice.value; i++) { if (lang == “plain”) { listObj.options[i] = new Option(plainList[i]); } else { listObj.options[i] = new Option(hardList[i]);

17. Select, Option, and FileUpload Objects } listObj.options[0].selected = true; if (isPreNN6) { history.go(0); } Flying Select Options Choose a palette size: <input type=”radio” name=”paletteSize” value=”3” onclick=”setCount(this)” checked=”checked” />Three <input type=”radio” name=”paletteSize” value=”6” onclick=”setCount(this)” />Six Choose geek level: <input type=”radio” name=”geekLevel” value=”” onclick=”setLang(‘plain’)” checked=”checked” />Plain-language <input type=”radio” name=”geekLevel” value=”” onclick=”setLang(‘hard’)” />Gimme hex-triplets! Select a color: cyan magenta yellow

18. Select, Option, and FileUpload Objects FileUpload Object File to be uploaded: <input type=”button” value=”View Value” onclick=”alert(this.form.fileToGo.value)” /> File Input Element

19. Thanks