Introduction to JavaScript | Still Plugging Away

In this lesson we begin exploring the JavaScript programming language, getting down the fundamental ideas:

Scripts as event handling programs
" = " - the assignment statement
Variables and rules for variable names
The var statement
Attributes as variables
Style properties as variables
The 'this' element identifier
Expressions

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

Lesson 13: Introduction to JavaScript

Click here for the video transcript

Supplemental materials

A cumulative summary of the contents of the course so far: Click here

Hands on exercise

For those who want to practice using what we cover in this class, most lessons have an opportunity for you to learn on your computer. The exercise for this lesson is primarily concerned with creating a page for testing JavaScript event handlers.

First, create a new page, scripts1.html. (Remember, 'html_skel' is available.)

Add a paragraph with two event handlers:

      onclick - turn the text blue
      ondblclick - turn the text red

The text of the paragraph should be: Click is blue, dblclick is red.

After you get that working, add an image element with two event handlers:

the 'src' for the image should be daffy-teria.jpg, the event handlers:

      onmouseover - set document.images[0].src='conf_b.jpg';
      onmouseout - set document.images[0].src='daffy-teria.jpg';

After you have both sets of event handlers working, add a link to scripts1.html from your index.html page.

Regarding the "document.images[0].src" notation: "document" is a reserved word representing the whole page; "images" is an array of all the images in the document (all the 'img' elements) and "images[0]" references the first img element in the page; then adding ".src" specifies the "src" attribute of the chosen <img> element. This is explained further in the next lesson.

Email us if you would like additional information. We would love to see your comments and recommendations for our site.

Our privacy policy: we use cookies to keep track of where you are on the site, but we do not leave cookies on your site; we do not track your visits; we do not disseminate any information about you because we do not gather any information about you.