Class 5
Discussions
- 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
- Document Object Model Cheat Sheet
Examples
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
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
Functions
- Defining and calling a simple function
- Passing an argument to a function
- Example of a function with a return value
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
Event handlers
- Detecting a click event
- Detecting a mouseover event
- Detecting a mouseout event
- Detecting a page load event
- Detecting a form submit event
Basics of dynamic HTML (dHTML)
- 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
Drop-down submenu examples
Misc
In-class Assignment
Homework
- The tutorials and reference pages about Javascript on w3schools.com
- Mock e-commerce page with dynamic HTML (see the Javascript core solution here; and an alternative CSS-only solution here; and a variation on the CSS-only solution here)
Loading ...