Notes and Examples

The examples below are to support the textbook "Introduction to JavaScript Programming with XML and PHP". It is used for the many courses and it is a very good and comprehensive book.
You cannot learn programming concepts by examples alone, please read the above textbook.
Note that the textbook uses XHTML 1, we use HTML 5 here.

document.write() is not a good way to design live websites, but it is suitable for teaching programming concepts

0. Setting up Programming Environment

html, css, js etc file / title Txt file / link Description Video
preparation, basic html review
Preparation   - Show File Extensions in Windows 8/8.1 video 00_001
    - install notepad++ video 00_002
    - Create Screen Captures, Save As PDF Files video 00_003
html Review
html/css page

JavaScript page
- First HTML 5 File - html 5, notepad++, W3C Markup Validator video html_ex001_basic
    - Linking HTML & CSS Files video html_ex003_selector


Ch 1. JavaScript Programming Basics

html, css, js etc file / title Txt file / link Description Video
ex001_prompt.htm   prompt(), document.write() functions. script tag?  

  data type, variable  
ex003_event.htm   onClick() event, simple function  
ex004_event.htm   onload event, in the <body>  
ex005_getvalue.htm   use getElementbyID to get value  
ex006_open.htm   open and close new window  

  pass value to function  
ex008_showprompt.htm   call prompt in function, pass value out  
ex009_nowrite.htm   how NOT to use document.write()  


Ch 2. Building Blocks: Variables and Operators

html, css, js etc file / title Txt file / link Description Video

  variables, data types => JavaScript is a loosely typed language  
ex011_parse.htm   parsing integer  

  more parsing integer and floating point number  
ex013_relational.htm   relational operators <, <=, >, >=, ==, !=  

  conditional operator ? :, charAt()  


Ch 3. Making Decisions: The Selection Structure

html, css, js etc file / title Txt file / link Description Video
ex015_if_else.htm   if () {} else {}  

  nested if else statements  
ex017_within_range.htm   lots of if statements to check if some number is within range  
ex018_outside_range.htm   check if some number is outside range  
ex019_if_else_if.htm   if ... else if ... else  
ex020_switch.htm   use switch statement to change body background color  
ex021_switch.htm   use switch statement for area of shape  
ex022_switch.htm   use switch statement, multiple choices  


Ch 4. Going Round and Round: The Repetition Structure

html, css, js etc file / title Txt file / link Description Video
ex023_while.htm   while loop, ask user for input  
ex024_while.htm   while loop to output number  
ex025_while.htm   do..while loop for multiple calculations and table creation, toUpperCase(), toLowerCase()  
ex026_crement.htm   increment / decrement, ++, --  
ex027_for.htm   for loop, output numbers  
ex028_for.htm   for loop  
ex029_while.htm   while loop, ask for +ve number as input, isNaN: is NOT a Number function  
ex030_mail_check.htm   use for loop for check for valid e-mail address  
ex031_unicode.htm   use for loop to get unicode hence utf code for APSU and apsu  


Ch 5. Advanced Decisions and Loops

html, css, js etc file / title Txt file / link Description Video
ex032_sum.htm   while loop, ask user for input, sentinal (-999); calculate sum, average; count the number of inputs; find highest, lowest;  


  while loop with switch, for order calculation, and multiple decision making  
ex034_countby3.htm   use for loop and if statement together, compare stuff in for loop  
ex035_for_if.htm   use for loop and if statement, use continue to skip for loop iteration  
eg036_nested_for.htm   nested for loops, nested while (and do while) loops  
eg037_nested_for.htm   use nested for loop to get subtotals  
eg038_war.htm   use while loop to play a game of war  
eg039_border.htm   use for loop to draw a border with image  


Ch 6. Forms and Form Controls

html, css, js etc file / title Txt file / link Description Video


  form, e-mail from form  



  get form fields  


Ch 7. Functions and JavaScript Source Files

html, css, js etc file / title Txt file / link Description Video
ex042_return.htm   function, return value from function  
ex043_scope.htm   scope of variable and pass variable by value to function  
ex044_scope.htm   compare to ex043, how to return value  
ex045_object.htm   create boolean object, date object  

  create external ex045_external.js file  


Ch 8. Arrays

html, css, js etc file / title Txt file / link Description Video
ex047_array.htm   array basic, element, populate array with for loop  


  populate array with while loop  


  populate array with while loop, go through array again  
ex050_array_operation.htm   how array operations can be used  
ex051_2d_array.htm   two dimensional array  
ex052_2d_array.htm   two dimensional array in a html table  




OLD Notes and Examples

html, css, js etc file / title Txt file / link Description Video
The examples below are from the OLD csci3300 course textbook.
eg001.htm   JavaScript tag, document.write() - Textbook Ch 2.  
eg002menu.htm   window.alert()  
eg003function.htm   function, form, input button  
eg004function.htm   function, return value  
eg005global.htm   scope of variables  
eg006datatype.htm   built-in function, data types, and something interesting (encode/decode URI).  
eg007arithmetic.htm   arithmetic operators  
eg008FormCaln.htm   Using arithmetic operators in functions  
eg009Array.htm   storing data in arrays, if statement - Textbook Ch 3.  
eg010Quiz1.htm   quiz using function, and if statement  
eg011Quiz2.htm   quiz using function, and switch statement  
eg012while.htm   while loop and do while loop  
eg013Quiz3.htm   quiz using while loop and array  
Browser Object Model - Textbook Ch 4.
eg014onclick.htm   override internal event hander with onclick, onmouseover, onmouseout  
textbook page 201 to 206   Note: The defaultStatus property does not work in the default configuration of IE, Firefox, Chrome, or Safari. To allow scripts to change the text of the status, the user must set the dom.disable_window_status_change preference to false in the about:config screen. (or in Firefox: "Tools - Options - Content -Enable JavaScript / Advanced - Allow scripts to change status bar text").  
textbook page 212 to 216, window.focus  
number of decimal places, toFixed()      
eg015settimeout.htm   setTimeout(), clearTimeout()  
textbook page 219, setInterval()      
Validating Form Data - Textbook Ch 5.
form attribute: enctype
MIME type :: application/x-www-form-urlencoded : form data encoded as one long string
MIME type:: multipart/form-data : encods each field as a seperate section
MIME type:: text/plain : used to upload a document or to submit data to an e-mail address
textbook page 255 to 266; page 291 to294.      
Using Object-Oriented JavaScript - Textbook Ch 6.
eg017_date.htm   using Date class/object (textbook page 320, 321 tables for method definitions)  
eg18_date_form   create a new site, form processing with dates