CS2513: Client-Side Programming
Weekly Course Content - Week 6
Chapter 5: Working with the Document Object Model (DOM) and DHTML

Click Topic to Open | Open All | Close All
Objectives

Chapter 5: Working with the Document Object Model (DOM) and DHTML

  • Access elements by id, tag name, class, name, or selector
  • Access element content, CSS properties, and attributes
  • Add and remove document nodes
  • Create and close new browser tabs and windows with an app
  • Use the setTimeout() and setInterval() methods to specify a delay or a duration
  • Use the History, Location, Navigation, and Screen objects to manipulate the browser window
Assignments and Due Dates
Assignments and Due Dates: View
Required Readings

JavaScript //Sixth Edition by Sasha Vodnik and Don Gosselin
Chapter 5: Working with the Document Object Model (DOM) and DHTML

Text Errata Sheet:
http://www.cengagebrain.com/cgi-wadsworth/course_products_wp.pl?fid=M20b&product_isbn_issn=9781305078444&token= B8BD74F3B70F74FC7BA0B7DD68EDE7AED76C796FBF71150DA83380176DE6392AE2B09CF0F7F4D1461D0A2FDA3FDCDCDC

Required Class Coding Standards
http://www.occc.edu/aphilipp/htm_csp/CS2513_CodingStandards.htm

Highly Recommended Tutorials

JavaScript and Enhancing the DOM by FEDevelopment Tutorials
https://www.youtube.com/playlist?list=PL88GcyQxslJBT6eD-Z5amP7utJ3HUNsrT

According to the site, the topics include

What is the DOM?
Choosing and isolating elements
Traversing up and down DOM nodes
Changing HTML attributes
Modifying elements as text
Creating and appending nodes
Cloning and removing nodes
Adding a bubbling event listener
Adding and resizing images
Handling clicks

There are 36 videos which range from about 1.5 minutes to about 5 minutes. It is not expected that students would use all videos, but access them as needed to supplement the text material.

Examples. Note -- since these videos were not created in relationship

P. 293 -- What is the DOM?
https://www.youtube.com/watch?v=GA-VEAqqrac&index=6&list=PL88GcyQxslJBT6eD-Z5amP7utJ3HUNsrT

p. 313 -- Navigating the DOM with Developer Tools
https://www.youtube.com/watch?v=MTo_3t4KYHs&list=PL88GcyQxslJBT6eD-Z5amP7utJ3HUNsrT&index=11

p. 308 Adding and Removing Document Nodes
https://www.youtube.com/watch?v=QbKlrWteLUo&list=PL88GcyQxslJBT6eD-Z5amP7utJ3HUNsrT&index=2

Sample Code

Sample code from the text is not being provided this week since students are required to use it as part of this week's assignment.

Supplemental Materials
  1. PowerPoint from Text: CS2513GosselinJS_CH05 - View (ppt) | Print (pdf)
Software

DOM Inspector: Use Chrome's to be consistent with the text.

For this week's website assignment you will need to have images of your choosing which are a specific height and width. If you to not have images of your own or need to resize images, the following resources may be helpful.

ImageQuest DataBase- OCCC's Library

https://librarynt.occc.edu/login?url=http://quest.eb.com
If an MLA citation is required include it at the bottom of the main content area. These images can be used for educational purposes only and may not continued to be used outside that realm.

PicMonkey - Online Photo Editing

PicMonkey http://www.picmonkey.com/ is online photo editing site that I have used when creating online photobooks. While I am not aware of any issues and have not had any personally, it is still not an endorsement of the product. As with any website, Use at your own risk. At the time of this writing you do not need to sign up for or purchase Royale. If you MouseOver/Click Edit at the top of the screen and you should have access to the necessary tools.

Chapter Questions and Test Reviews

Chapter Review Questions
Source for quiz and test questions. It is highly recommended that students know the answers.

Chapter 05: Review Questions (.rtf file)
Test 2: Review Sheet

Required Assignments

CSP05 - Working with DOM and DHTML: Specifications
     (Complete, upload to Apollo1, then submit URL in the LMS)
Weekly Quiz: Chapter 05 (Located in the LMS)

Professor's Class Notes and Comments


Some of this week's material maybe be a bit of a reinforcement or review. We have already used methods such as .getElementById() and .getElementsByTagName(). But don't let that fool you! There is a great deal of important and new material in this chapter so be sure to allow adequate time for studying this week's material.

While the JavaScript console for any of the major browsers can be used, the text uses the one from Google Chrome. See p. 314 for an example. It might be easiest to use one that matches the text.
To access it from the menu bar View --> Developer --> JavaScript Console. An alternative is to use the Customize and Control Chrome icon (icon with three black bars which is located at the right of the omnibox"). Click on the icon --> More Tools --> JavaScript Console.

"Omnibox is the textbox at the top of a Google Chrome window which combines the address bar and search box.

P. 291-292

Be sure to know the difference between BOM (Browser Object Model) and DOM (Document Object Model)

P. 296

As you progress through the next several pages, note the use of the plural for TagName, ClassName, Name. Keep in mind that an Id many only be used by one element on a web page while tag, class, and name may be shared by multiple elements.

getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()

P. 297

IMPORTANT: This week's assignment will be based on the photo gallery that is created through out the chapter. You might want to take a look at the assignment specifications before working through the chapter example.

P. 310

The z-index property specifies the stack order of an element. An element with greater number is always in front of an element with a lower number A z-index of 2 will appear "on top" of an element with a z-index of 1. Try it out at http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

As the text states when referencing a hyphenated CSS property in JavaScript, the hyphen is removed that the letter after the hyphen is capitalized; Example: z-index = zIndex

P. 329

Most often to open a link in a new window target="_blank" has been used. The open in a new window and assign a name to the window the book uses the following HTML. Notice that there is no JavaScript in this statement.

<a href="http://www.occc.edu" target="OCCCWindow">OCCC</a>

P. 334

The focus() method is introduced as part of the photo gallery. It is used a great deal with forms. It can be used to place the cursor in the first form of a field, to move the cursor to the next field, and to move the cursor to a field with an error when a form is being validated. The use of this method can often save a great deal of frustration for users.