1. Web Programming Java Script (Programming Fundamentals, Part I,II)

2. What Language Is This? The language you’re studying is called JavaScript. But the language has some other names that you may have heard. JScript is Microsoft’s name for the language. By leaving out the “ava,” the company doesn’t have to license the “Java” name from its trademark owner: Sun Microsystems. A standards body called ECMA (pronounced ECK-ma) now governs the specifications for the language (no matter what you call it). The document that provides all of the details about the language is known as ECMA-262 (it’s the 262nd standard published by ECMA). Both JavaScript and JScript are ECMA- 262 compatible. Some earlier browser versions exhibit very slight deviations from ECMA-262 (which came later than the earliest browsers).

3. JavaScript Value (Data) Types

4. Variables The data that a program works with is merely a collection of bits (on and off states) in your computer’s memory. The most convenient way to work with data in a script is to first assign the data to a variable. It’s usually easier to think of a variable as a basket that holds information. How long the variable holds the information depends on a number of factors. Creating a variable var myAge; OR var myAge = 45; OR var myAge; myAge = 45; Expressions and variables var textToWrite = “ of “ + navigator.appName + “.”; document.write(textToWrite);

5. Data Type Conversions 3 + 3 // result = 6 3 + “3” // result = “33” 3 + 3 + “3” // result = “63” Converting strings to numbers parseInt(“42”) // result = 42 parseInt(“42.33”) // result = 42 parseFloat(“42”) // result = 42 parseFloat(“42.33”) // result = 42.33 3 + 3 + parseInt(“3”) // result = 9 Converting numbers to strings (“” + 2500) // result = “2500” (“” + 2500).length // result = 4

6. Operators Arithmetic operators firstName = “John”; lastName = “Doe”; fullName = firstName + “ “ + lastName Comparison operators

7. Decisions and Loops Control Structures(if constructions) Structure 1: if (condition) { statement[s] if true } if (myAge < 18) { alert(“Sorry, you cannot vote.”); } Structure 2: if (condition) { statement[s] if true } else { statement[s] if false } var febDays; var theYear = 2004; if (theYear % 4 == 0) { febDays = 29; } else { febDays = 28; }

8. Loops and Functions About Repeat Loops for ([initial expression]; [condition]; [update expression]) { statement[s] inside loop } for (var i = startValue; i <= maxValue; i++) { statement[s] inside loop } Functions function functionName ( [parameter1]...[,parameterN] ) { statement[s] }

9. Function parameters Calling a Function from an Event Handler (Single Parameter) function showMsg(msg) { alert(“The button sent: “ + msg); } <input type=”button” value=”Click Me” onclick=”showMsg(‘The button has been clicked!’)”>

10. Function parameters Cont… function sayHiToFirst(a, b, c) { alert(“Say hello, “ + a); } sayHiToFirst(“Gracie”, “George”, “Harry”); sayHiToFirst(“Larry”, “Moe”, “Curly”); Multiple Parameter

11. Variable scope Global and Local Variable Scope Demonstration var aBoy = “Charlie Brown”; // global var hisDog = “Snoopy”; // global function demo() { // using improper design to demonstrate a point var hisDog = “Gromit”; // local version of hisDog var output = hisDog + “ does not belong to “ + aBoy + “. ”; document.write(output); } demo(); // runs as document loads document.write(hisDog + “ belongs to “ + aBoy + “.”);

12. Arrays Creating an array var USStates = new Array(51); USStates[0] = “Alabama”; USStates[1] = “Alaska”; USStates[2] = “Arizona”; USStates[3] = “Arkansas”;... USStates[50] = “Wyoming”; Accessing array data alert(“The largest state is “ + USStates[1] + “.”); Parallel arrays var stateEntered = new Array(51); stateEntered [0] = 1819; stateEntered [1] = 1959; stateEntered [2] = 1912; stateEntered [3] = 1836;... stateEntered [50] = 1890;

13. Arrays Cont… Example: An event handler from either the text field or a clickable button calls a function that looks up the state name, fetches the corresponding entry year, and displays an alert message with the information. The function is as follows: function getStateDate() { var selectedState = document.getElementById(“entry”).value; for ( var i = 0; i < USStates.length; i++) { if (USStates[i] == selectedState) { break; } alert(“That state entered the Union in “ + stateEntered[i] + “.”); } Document objects in arrays For example, if your page includes two tag sets, then two forms appear in the document. The browser maintains an array of form objects for that document. References to those forms are document.forms[0] document.forms[1]

14. Thanks