Introduction to Javascript. Web Page Technologies To create Web Page documents, you use: To create...

Introduction to Introduction to JavascriptJavascript

Web Page TechnologiesWeb Page Technologies

To create Web Page documents, you use:To create Web Page documents, you use: HTML – contents and structuresHTML – contents and structures CSS – presentation, formattingCSS – presentation, formatting Programs (Javascript, ASP, php, etc.) – user Programs (Javascript, ASP, php, etc.) – user

interactivity, dynamic modification of pagesinteractivity, dynamic modification of pages

What HTML Can & Can Not DoWhat HTML Can & Can Not Do

HTML CanHTML Can Display text Display text Display imagesDisplay images Display animated clipartDisplay animated clipart Allow users to input dataAllow users to input data

HTML Can NotHTML Can Not Do calculationsDo calculations Display current dateDisplay current date Check validity of input dataCheck validity of input data Respond to user actionsRespond to user actions Be Be interactiveinteractive

ProgrammingProgramming For a Web Page to be able to be For a Web Page to be able to be interactiveinteractive

CalculateCalculate Display current date Display current date Check validity of input dataCheck validity of input data Add dynamic effectsAdd dynamic effects

You need to include aYou need to include a program program A set of detailed instruction to the computer to accomplish A set of detailed instruction to the computer to accomplish

some tasksome task Using a Using a programming language programming language

JavaScriptJavaScript VBScriptVBScript phpphp perlperl

What Is What Is JavascriptJavascript??(Now called EcmaScript)(Now called EcmaScript)

A scripting language used to add greater power and A scripting language used to add greater power and interactivity to Web pages 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 Invented by Netscape, now controlled by Ecma by Ecma

InternationalInternational Often called a Often called a scriptingscripting language, rather than a language, rather than a

programmingprogramming language language Distinct from Distinct from JavaJava, which is a full-fledged programming , which is a full-fledged programming

language invented by Sun Microsystems. language invented by Sun Microsystems.

Sample Web Page with JavascriptSample Web Page with Javascript

Alert Demo (Demo (JS code)) Prompt Demo (Demo (JS code)) Date Demo (Demo (JS code))

Other Examples of JS UseOther Examples of JS Use

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

Calling FunctionsCalling Functions

Greet on ClickGreet on Click (Code) (Code) Change Background on MouseOverChange Background on MouseOver (Code) (Code) Alert on ClickAlert on Click (Code) (Code)

<html><head> <title>JS Demo</title> <script language="Javascript"> function greet() { alert("Hello"); } </script> </head> <body> <h1>Javascript ONCLICK Demo</h1> <form> <input type="button" value="Click Me“ onClick="greet()"> </form> </body> </html>

Greet on ClickGreet on Click

<html> <head> <title>JS Demo</title> <script language="Javascript"> function toBlue() { document.bgColor="0000ff| }

function toWhite() { document.bgColor="ffffff"; } </script> </head>

<body>

. . .

Change Background on MouseOverChange Background on MouseOver

. . .

<body> <h1>Javascript ONMOUSEOVER Demo</h1> <form> <input type="button" onMouseOver="toBlue()“ onMouseOut="toWhite()"> </form> </body> </html

<html> <head> <title>JS Demo</title> <script language="Javascript"> function quote(mesg){ alert(mesg); } </script> </head>

<body>

<h1>Famous Quotes</h1> <form> <input type=“button” value=“Lincoln” onClick="quote('Four scores and seven years ago...')">

Alert on ClickAlert on Click

. . .

<input type=“button” value=“Washington” onClick="quote('I cannot tell a lie.')"> <input type=“button” value=“Kennedy” onClick="quote('Let the race (to the moon) begin.')"> </from>

</body> </html

<html> <head><title>JS Demo</title></head>

<body> <h1>Javascript Demo</h1>

<script language="Javascript"> <!– Javascript code goes here. //--> </script>

</body> </html>

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

<html> <head><title>JS Demo</title> <script language="Javascript"> function greet() { alert("Hello"); }</script> </head>

<body> <h1>Javascript ONCLICK Demo</h1> <form> <input type="button" value="Click Me" onClick="greet()"> </form> </body> </html>

Where to Embed JS Function (2)Where to Embed JS Function (2)

Javascript Language Javascript Language BasicsBasics

General RulesGeneral Rules

JS is case sensitive. JS is case sensitive. Sum = n1 + n2;Sum = n1 + n2; // These statements are different // These statements are differentsum = N1 + N2;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 This form of delimiters can span several lines of

comments.comments. */ */

VariablesVariables

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

OperatorsOperators

// concatenation operator fulName = firstName + " " + lastName;

// arithmetic operator totalPrice = priceOfBook + priceOfCD;

// arithmetic operator ageOfMyBrother = myAge - 2;

Pre-defined FunctionsPre-defined Functions

// current date and timetoday = new Date();

// year value (integer) of today year = today.getYear();

// pop up a window displaying alert("Welcome to Honolulu");

// prints string to the current pagedocument.write("Hello."). document.writeln(" Good-bye");

User-defined FunctionsUser-defined Functionsfunction 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; }

EventsEvents

EventEvent is an action external to the program that is an action external to the program that triggers a code to be executed. triggers a code to be executed.

Partial List of EventsPartial List of Events

EventEvent Works withWorks with WhenWhen

OnclickOnclick A, INPUT (e.g., button), A, INPUT (e.g., button), FORM, TABLE, & FORM, TABLE, & many othersmany others

an element is an element is clicked clicked

EventEvent Works withWorks with WhenWhen

onbluronblur A, AREA, BUTTON, A, AREA, BUTTON, INPUT, LABEL, INPUT, LABEL, SELECT, SELECT, TEXTAREA TEXTAREA

the mouse leaves an the mouse leaves an element which was element which was in focus in focus

onloadonload BODY, FRAMESETBODY, FRAMESET a page is loaded a page is loaded into the browserinto the browser

ondblclickondblclick Same as ONCLICKSame as ONCLICK an element is an element is double-clicked double-clicked

onmouseoveronmouseover Same as ONCLICK Same as ONCLICK mouse is moved mouse is moved over the elementover the element

onmouseoutonmouseout Same as ONCLICKSame as ONCLICK mouse is moved out mouse is moved out of the element's of the element's areaarea

Introduction to Javascript. Web Page Technologies To create Web Page documents, you use: To create...

Documents

Transcript of Introduction to Javascript. Web Page Technologies To create Web Page documents, you use: To create...