CIT190 - JavaScript Programming
Complete the following programming exercises: 35 points
1. Open the CIT190 folder and create the following folders: lesson4
Open the lesson5 folder and create the following folders:
Objective: To modify existing event handling and implement DOM event handlers and listeners
To see a video demonstrating how to complete task #2 and task #3 on a similar web page, watch: https://youtu.be/waQV1Qfrtr8
1. Download windChillCalculator.html to your lesson5 folder
2. Download windchill.js to your lesson5/js folder
3. Download windchill.css to your lesson5/css folder
4. Download coldWinter.jpg to your lesson5/media folder
5. Download the following fonts to your lesson5/fonts folder: chiller.ttf , melted.ttf, Caviar_Dreams_Bold.ttf
6. Open the windChillCalculator and save the file as windChill.html. Complete the following tasks:
a) Remove the onclick events from the buttons and the <body>tag
b) Save
your changes.
7. Open Lesson5/js/windchill.js.
8. Modify the code to use a DOM property event for the loading of the page and event listeners/handlers for the buttons. (Refer to lecture notes section 2 Events and DOM properties and lecture notes section 3. Events and the addEventListener() Method).
Complete the following tasks:
a) Add an event listener to call the windChill() function when the button with an id
of "calc" is clicked
b) Add an event listener to call the getFocus() function when
the button with an id of "reset" is clicked
c) Add a DOM property event
handler to call the
getFocus() function when the page loads.
9. Save your changes and test the code. Correct any errors.
Objective: Convert the windChill() function to an anonymous function.
1. Open windchill.js for editing
2. Copy/paste the windChill() function and comment out one of the functions.
3. Comment out the current event listener for the "calc" button.
4. Convert the remaining windChill() function into an event listener with an anonymous function. (Refer to lecture notes section 3. Events and the addEventListener() Method, part C. Using anonymous functions with event listeners)
5. Save your changes and test the code. Correct any errors.
Objective: Become familiar with DOM events/properties using DOM animation
To see a video explaination of the code used to create Zeppos World, see: https://youtu.be/2uOCiQGmD6s
1. Create a new web document, name the file: myAnimation.html and save it into your Lesson5 folder
2. Apply styling to your page using a separate css file that should be saved to your Lesson5/css folder (you decide on the styling and a name for your file)
3. Include the following in your page (you decide how to incorporate the requirements)
a) an object that you animate through use of at least 4 buttons (you decide on the type of animation you want to use)
b) you should have a background image that goes with the object you are animating.
c) display information on the page about the animated item as you move it around the screen (you can display the x and y coordinates or other information)
4. You should use event listeners/handlers with your buttons (do not use HTML attributes for events)
5. Make sure you have tested your code and that everything works (Ask for help if you get stuck)
Zeppos World is an example of what you need to do. NOTE: The example uses an internal stylesheet, but you need to create an external style sheet instead.
Objective: Become familiar with BOM events/properties
1. Create a new web document, name the file: BOM-events.html and save it into your Lesson5 folder
2. Apply styling to your page using a separate css file that should be saved to your Lesson5/css folder (you decide on the styling)
3. Include the following in your page (you decide how to incorporate the requirements)
a) use 2 window object methods
b) use 1 location object method
c) display window information using window object properties
d) display navigator information using navigator object properties
e) display location information using location object properties
f) display history information using history object properties
g) display screen information using screen object properties
4. You should use DOM property event handling OR event listeners/handlers (do not use HTML attributes for events)
5. Make sure you have tested your code and that everything works (Ask for help if you get stuck)
There are many examples in the chapter 6 lecture that illustrate how to use the various methods and properties. Examples include:
Remember, history only has 1 property, length.
| Created the lesson5, media, js and font folders | 1 point |
| Added links to the assignment page | 2 points |
| Removed HTML event handling and saved the file as windChill.html | 1 point |
| Edited windchill.js to use a DOM property event handler for the page loading, an event listener/handler for the reset button and an event listener/handler for the calc button (the event listener/handler should have been modified to use an anonymous function) | 7 points |
| Created an Animated image that can be controlled with buttons and displayed information about the animated object (such as coordinates) on the screen. | 12 points |
| Created BOM-events.html with all required elements and css styling | 12 points |
| Total | 35 points |
