Some basic documentation
To begin understanding Javascript, and programming in general, I recommend you begin reading some of the documentation I have written about Javascript. In particular:
- How to put Javascript code into your XHTML documents
- An explanation of Javascript variables
- An explanation of Javascript functions
- Intro to the browsers’ Document Object Model
The tutorials and reference pages about Javascript on w3schools.com are also very good.
Example files
With that information in mind, here are links to each of the Javascript examples I will be covering in our first day of learning Javascript.
How to include Javascript on your web page
- As an external file linked from the <head> section of your XHTML code
- As an internal script in the <head> section of your XHTML code
- As an external or internal script linked from somewhere in the <body> section of your XHTML code
- Inline as an attribute of an XHTML tag
Understanding variables
- Example of creating a variable and printing the value that variable to the page
- Example of popping up the value of a variable in an alert box
- Exhibiting that Javascript is an untyped language
- Exhibiting the difference between adding numbers and concatenating strings
- Defining an array and looping through it
Understanding functions
Conditional statements and loops
- If/else statements check whether any of a number of possible conditions is true
- For loops repeat a task a pre-set number of times
- While loops repeat a task until a test condition is no longer true
- Foreach loops and associative arrays
Detecting user interaction with event handlers
- Detecting a click event
- Detecting a mouseover event
- Detecting a mouseout event
- Detecting a page load event
- Detecting a form submit event
The Basics of dynamic HTML
- Using mouseover and mouseout events to make an image swap
- Modifying an individual style sheet property of an element in response to a user action
- Modifying the entire style sheet class of an element in response to a user action
- Make an element appear and disappear in response to a user action
Detecting the value of form elements
- Detecting the value of text and password form inputs
- Detecting the value of textarea elements
- Detecting the selected value of radio buttons
- Detecting the value of checkboxes
- Detect the selected value of a select element with options