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? | ||
| ex002_datatype.htm ex002a_datatype.htm |
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 | ||
| ex007_function.htm ex007a_function.htm |
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 |
| ex010_variable.htm ex010a_variable.htm |
variables, data types => JavaScript is a loosely typed language | ||
| ex011_parse.htm | parsing integer | ||
| ex012_parse.htm ex012a_parse.htm |
more parsing integer and floating point number | ||
| ex013_relational.htm | relational operators <, <=, >, >=, ==, != | ||
| ex014_conditional.htm ex014a_conditional.htm |
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 {} | ||
| ex016_nested_if.htm ex016a_nested_if.htm |
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; | ||
| ex033_getorder.htm | 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 |
| ex040_email_form.htm | form, e-mail from form | ||
| ex041_form.htm | 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 | ||
| ex046_external.htm ex045_external.js |
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 | ||
| ex048_array.htm | populate array with while loop | ||
| ex049_array.htm | 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.open(), 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. | |||
| eg016while.htm | |||
| 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 | ||