CS2513: Client-Side Programming
Weekly Course Content - Week 6
Chapter 5: Working with the Document Object Model (DOM) and DHTML
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
JavaScript //Sixth Edition by Sasha Vodnik and Don Gosselin
Chapter 5: Working with the Document Object Model (DOM) and DHTML
Required Class Coding Standards
http://www.occc.edu/aphilipp/htm_csp/CS2513_CodingStandards.htm
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 clicksThere 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-Z5amP7utJ3HUNsrTp. 313 -- Navigating the DOM with Developer Tools
https://www.youtube.com/watch?v=MTo_3t4KYHs&list=PL88GcyQxslJBT6eD-Z5amP7utJ3HUNsrT&index=11p. 308 Adding and Removing Document Nodes
https://www.youtube.com/watch?v=QbKlrWteLUo&list=PL88GcyQxslJBT6eD-Z5amP7utJ3HUNsrT&index=2
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.
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 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
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)