introduction to javascript. what html can & can not do html can html can display text display...

Introduction to Introduction to JavascriptJavascript

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

HTML CanHTML Can Display textDisplay text Display imagesDisplay images Display even animated clipartDisplay even 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 Change color of a button when the cursor hovers over itChange color of a button when the cursor hovers over it 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 Change color of a button when the cursor hovers over it Change color of a button when the cursor hovers over it 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 JavaJava Visual BasicVisual Basic

What Is What Is JavascriptJavascript??

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 by a European Invented by Netscape, now controlled by a European

Standards group Standards group 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.

Screen OutputScreen Output

var message = alert(“Aloha, you’all.”);var message = alert(“Aloha, you’all.”); var question = confirm(“Do you want to var question = confirm(“Do you want to

continue?”); continue?”); document.write (“Welcome to Hawaii.”);document.write (“Welcome to Hawaii.”);

Keyboard InputKeyboard Input

var name = prompt(“What is your name?”);var name = prompt(“What is your name?”);alert(“Welcome to Hawaii, “ + name);alert(“Welcome to Hawaii, “ + name);

Embedding JS Code Embedding JS Code in HTML Pagein HTML Page<html><html>

<head><head>

<title>Java Script Demo</title><title>Java Script Demo</title>

</head></head>

<body><body>

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

<script type="text/javascript"><script type="text/javascript">

var mess = alert("Aloha, you'all.");var mess = alert("Aloha, you'all.");

var quest = confirm("Do you want to continue?");var quest = confirm("Do you want to continue?");

var name = prompt("What is your name?", "");var name = prompt("What is your name?", "");

document.write("How are you, " + name + "?");document.write("How are you, " + name + "?");

</script></script>

</body></body>

</html></html>

Sample Web Page with JavascriptSample Web Page with Javascript

Alert Demo (Demo (JS code)) Prompt Demo (Demo (JS code)) Date Demo (JS code)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 the Validity of Form EntriesCheck the 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;

All JS variables are of All JS variables are of variantvariant type (not specific) type (not specific) Variables may be declared, or notVariables may be declared, or not

var num1 = 5var num1 = 5var str1 = “hello”var str1 = “hello”num2 = 6num2 = 6str2 = “Goodbye”str2 = “Goodbye”

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. */ */

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

Open/Close New WindowOpen/Close New Window

To Open a new window:To Open a new window: myWindow = myWindow =

window.open(http://www.mydomain.com”,window.open(http://www.mydomain.com”, “nameOfMyWindow”); “nameOfMyWindow”);

To Close a window:To Close a window: nameOfMyWindow.close();nameOfMyWindow.close();

or (for active window)or (for active window) window.close();window.close();

Customizing WindowCustomizing WindowOption Explanation

toolbar = yes | no Add /remove browser toolbar

location = yes | no Add/ remove browser location field

directories = yes | no Add/ remove browser directories field

status = yes | no Add/ remove browser status field

menubar = yes | no Add/ remove browser menubar

scrollbar = yes | no Add/remove browser scrollbar

resizable = yes | no Allow new window to be resizable

width = value Set window width in pixels

height = value Set window height in pixels

New Window--ExampleNew Window--Example pageURL=http://www.chaminade.edu;pageURL=http://www.chaminade.edu;

windowName=“myPopupWindow”;windowName=“myPopupWindow”;settings="toolbar=yes,location=yes,directories=yes,"+"status=no,menubar=no,scrollbars=yes,"+"resizable=yes,width=600,height=300";myNewWindow=window.open(pageURL, windowName, settings);

(Note: no space between settings)

New Window--ExampleNew Window--Example<script Language="JavaScript"></script>

<a href="#" onClick="popup(‘www.chaminade.edu', 'Win1', 300, 300); return false">Click Here To Go to Yahoo</a>

introduction to javascript. what html can & can not do html can html can display text display...

Documents