Javascript

The best way to understand Javascript is to write some logic and make something happen. First we'll track the size of our window object when a user resizes the browser. Then we will write the logic to make an exquisite corpse game, and we'll automate it with a timer. Finally, we'll write the logic for a style-switcher inspired by the site Readability.com. While writing our demonstration pages, we will explore how Javascript addresses an HTML page using the DOM (Document Object Model).

Student Outcomes

• Learn JS Language basics.
• Understand variables.
• Understand functions.
• Understand conditionals.

Assignments

• Assignment 10.1: Javascript Review
• Project 2: Demonstration Library Revisited & portfolio

Assignment 10.1: Javascript Review

Description

In this ]class, we made four small pages, each with its own styles and scripts. Please re-create the demonstration files from this module, using your own images. The demonstration files you will need to turn in are:

• m10_resize.htm
• m10_equisite.html
• m10_interval.html
• m10_styleswitcher.html

Purpose

The purpose of these demonstration files is to learn more about the following concepts in Javascript:

• Objects -- the Window, Document, and Style objects in particular
• Object properties and methods
• Using variables, both local and global
• Using and writing custom functions
• Understanding conditionals
• Navigating the DOM

Javascript has lots of different objects. Examples include:

Window object: This gives you access to all the properties and methods of the user's browser window. Using the window object, you can retrieve how wide the browser window is or how tall the browser chrome is. You could pop open a tiny new browser window and scoot it across the user's monitor. (Whether you should do this or not is open to debate.)

Navigator object: This helps you determine which browser your web page is being viewed on, or whether cookies are enabled.

Location object: This is used to load and reload pages. It contains information about the URL.

History object: This maintains a history of the web pages your user has viewed on your site. You can use it help the user move back and forth between your web pages.

Document object: This gives you access to the entire HTML page and the elements inside. You can use it to activate a button, change the style of a single element, add new text, remove unneeded content, and much, much more.

Image object: The image object allows you to preload heavy images to make your pages feel livelier. It can track when an image finishes loading.

Date object: This contains properties and methods related to the date and time. Using it, you can get the current day, or find the exact time in a completely different time zone.

Math object: This has many valuable methods for working with numbers. Using it, you can round numbers off, or up, or down. You could use the Math object to do elaborate trigonomic functions, find the square root of a number, and much more.

There are many many fascinating Javascript objects. Over the next couple of modules, we'll explore a number of them. But first, more basics...

Javascript uses "dot syntax." The goodies inside of an object are accessed by calling the name of the object, and then using a dot to access the property or method of that object. The syntax looks like this:

objectname.property

Or:

objectname.method(parameter)

For instance, the Document object has a property named "lastModified." It tracks when the page was last changed. You could grab the value of this property by writing:

document.lastModified

The getElementById() method of the Document class retrieves any element id passed in as a parameter to this method. If you had a page with div on it with the id of "content" you could grab it by saying:

document.getElementById("content")

Once you have hold of the div, you can play with and modify it how ever you want.

notes