Introduction to Javascript

Web Page Technologies To create Web Page documents, you use: To create Web Page documents, you use: HTML – contents and structures HTML – contents and structures CSS – presentation, formatting CSS – presentation, formatting Programs (Javascript, ASP, php, etc.) – user interactivity, dynamic modification of pages Programs (Javascript, ASP, php, etc.) – user interactivity, dynamic modification of pages

What HTML Can & Can Not Do HTML Can HTML Can Display text Display text Display images Display images Display animated clipart Display animated clipart Allow users to input data Allow users to input data HTML Can Not HTML Can Not Do calculations Do calculations Display current date Display current date Check validity of input data Check validity of input data Respond to user actions Respond to user actions Be interactive Be interactive

Programming For a Web Page to be able to be interactive For a Web Page to be able to be interactive Calculate Calculate Display current date Display current date Check validity of input data Check validity of input data Add dynamic effects Add dynamic effects You need to include a program You need to include a program A set of detailed instruction to the computer to accomplish some task A set of detailed instruction to the computer to accomplish some task Using a programming language Using a programming language JavaScript JavaScript VBScript VBScript php php perl perl

What Is Javascript? (Now called EcmaScript) A scripting language used to add greater power and interactivity to Web pages A scripting language used to add greater power and interactivity to Web pages Freely combined with HTML in the Web document Freely combined with HTML in the Web document Invented by Netscape, now controlled by Ecma International Invented by Netscape, now controlled by Ecma International Often called a scripting language, rather than a programming language Often called a scripting language, rather than a programming language Distinct from Java, which is a full-fledged programming language invented by Sun Microsystems. Distinct from Java, which is a full-fledged programming language invented by Sun Microsystems.

Sample Web Page with Javascript Alert Demo (JS code) Alert Demo (JS code) Alert JS code Alert JS code Prompt Demo (JS code) Prompt Demo (JS code) Prompt JS code Prompt JS code Date Demo (JS code) Date Demo (JS code) Date JS code Date JS code

Other Examples of JS Use Create a new window on the fly. Create a new window on the fly. Create a new window on the fly Create a new window on the fly Check validity of form entries. Check validity of form entries. Check validity of form entries Check validity of form entries Manipulate document objects. Manipulate document objects. Manipulate document objects Manipulate document objects

Calling Functions Greet on Click (Code) Greet on Click (Code) Greet on ClickCode Greet on ClickCode Change Background on MouseOver (Code) Change Background on MouseOver (Code) Change Background on MouseOverCode Change Background on MouseOverCode Alert on Click (Code) Alert on Click (Code) Alert on Click Code Alert on Click Code

JS Demo function greet() { alert("Hello"); } Javascript ONCLICK Demo Greet on Click

JS Demo function toBlue() { document.bgColor="0000ff| } function toWhite() { document.bgColor="ffffff"; }... Change Background on MouseOver

... Javascript ONMOUSEOVER Demo </html

JS Demo function quote(mesg){ alert(mesg); } Famous Quotes Alert on Click

... </html

JS Demo Javascript Demo Where to Embed JS Function (1)

JS Demo function greet() { alert("Hello"); } Javascript ONCLICK Demo Where to Embed JS Function (2)

Javascript Language Basics

General Rules JS is case sensitive. JS is case sensitive. Sum = n1 + n2; // These statements are different sum = N1 + N2; Sum = n1 + n2; // These statements are different sum = N1 + N2; Statements end with a semicolon. Statements end with a semicolon. today = new Date(); today = new Date(); Comments Comments // This form is for short comments to end of line // This form is for short comments to end of line /* This form of delimiters can span several lines of comments. */ /* This form of delimiters can span several lines of comments. */

Variables firstName = "Maria"; // String value lastName = "Martinez"; // " myMotto = "Be Prepared"; // " myAge = 21; // integer value priceOfBook = 27.25; // float value priceOfCD = 18.50; // "

Operators // concatenation operator fulName = firstName + " " + lastName; // arithmetic operator totalPrice = priceOfBook + priceOfCD; // arithmetic operator ageOfMyBrother = myAge - 2;

Pre-defined Functions // current date and time today = new Date(); // year value (integer) of today year = today.getYear(); // pop up a window displaying alert("Welcome to Honolulu"); // prints string to the current page document.write("Hello."). document.writeln(" Good-bye");

User-defined Functions function greet() { alert("Welcome to Hawaii."); } function greetWithName(name) { alert("Welcome to Hawaii, " + name); } function changeBackColor(someColor) { alert("Here is a new background color."); document.bgColor = someColor; }

Events Event is an action external to the program that triggers a code to be executed. Event is an action external to the program that triggers a code to be executed. Partial List of Events Partial List of Events Event Works with When Onclick A, INPUT (e.g., button), FORM, TABLE, & many others an element is clicked

Event Works with When onblur A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA the mouse leaves an element which was in focus onload BODY, FRAMESET a page is loaded into the browser ondblclick Same as ONCLICK an element is double-clicked onmouseover Same as ONCLICK mouse is moved over the element onmouseout Same as ONCLICK mouse is moved out of the element's area