11

JavaScriptJavaScript

• Describe common uses of JavaScript in Web Describe common uses of JavaScript in Web pages.pages.

• Describe the purpose of the Document Describe the purpose of the Document Object Model and list some common events.Object Model and list some common events.

• Create a simple JavaScript using the Create a simple JavaScript using the <script> tag and the alert() method.<script> tag and the alert() method.

• Describe the considerations for XHTML Describe the considerations for XHTML conformance and JavaScript.conformance and JavaScript.

• Use variables, operators and the if control Use variables, operators and the if control structure.structure.

• Create a basic form validation script.Create a basic form validation script.

22

What isWhat isJavaScript?JavaScript?

Object-oriented scripting language. Object-oriented scripting language. Used to work with the objects associated with a Used to work with the objects associated with a

web page document --the window, the web page document --the window, the document, the elements such as forms, document, the elements such as forms, images, links, etcimages, links, etc

Originally developed by Netscape and called Originally developed by Netscape and called LiveScriptLiveScript

Netscape collaborated with Sun Microsystems Netscape collaborated with Sun Microsystems on modifications to the language and it was on modifications to the language and it was renamed JavaScript renamed JavaScript

JavaScript is NOT JavaJavaScript is NOT Java

33

Common UsesCommon Usesof JavaScriptof JavaScript

Display a message boxDisplay a message box Select list navigationSelect list navigation Edit and validate form informationEdit and validate form information Create a new window with a specified size Create a new window with a specified size

and screen positionand screen position Image RolloversImage Rollovers Status MessagesStatus Messages Display Current DateDisplay Current Date CalculationsCalculations

44

CodingCodingJavaScriptJavaScript

JavaScript code can be added to a JavaScript code can be added to a web page using two different web page using two different techniques:techniques:• Place Javascript code between <script> Place Javascript code between <script>

tags tags • Place Javascript code as part of an event Place Javascript code as part of an event

attached to an XHTML elementattached to an XHTML element

55

JavaScriptJavaScriptUsing <script> tagsUsing <script> tags

The script tagThe script tag A container tagA container tag May be placed in either the header or the body May be placed in either the header or the body

section of a web pagesection of a web page

<script language="JavaScript" type=”text/javascript”><script language="JavaScript" type=”text/javascript”>

<!- -<!- -

alert("Welcome to Our Site");alert("Welcome to Our Site");

// - ->// - ->

</script></script>

66

QuestionsQuestions1.1. Describe two uses of JavaScript.Describe two uses of JavaScript.

2.2. Describe two XHTML tag used to add Describe two XHTML tag used to add JavaScript to a Web page.JavaScript to a Web page.

3.3. True or False. JavaScript is the same as True or False. JavaScript is the same as Java.Java.

77

Document Object ModelDocument Object Model(DOM)(DOM)

The DOM defines The DOM defines every object and every object and element on a web element on a web page.page.

Its hierarchical Its hierarchical structure can be structure can be used to access used to access page elements page elements and apply styles and apply styles to page elements. to page elements.

A portion of the A portion of the DOM is shown at DOM is shown at the right.the right.

88

ObjectObject

An object is a thing or entity.An object is a thing or entity.• Browser windowBrowser window• Submit buttonSubmit button• Web page documentWeb page document

99

PropertyProperty A property is a characteristic or attribute A property is a characteristic or attribute

of an object.of an object.• The background color of a web page documentThe background color of a web page document

document.bgcolordocument.bgcolor

• The date the web page file was last modifiedThe date the web page file was last modifieddocument.lastmodifieddocument.lastmodified

• The src file of an image objectThe src file of an image objectimage1.srcimage1.src

1010

MethodMethod

A method is an action (a verb)A method is an action (a verb)• Writing text to a web page document Writing text to a web page document

document.write()document.write()

• Submitting a formSubmitting a formform1.submit()form1.submit()

1111

JavaScriptJavaScriptand Eventsand Events

Events are actions that the visitor to the web page can Events are actions that the visitor to the web page can take such as take such as • clicking (onclick), clicking (onclick), • placing the mouse on an element (onmouseover), placing the mouse on an element (onmouseover), • removing the mouse from an element (onmouseout),removing the mouse from an element (onmouseout),• loading the page (onload), loading the page (onload), • unloading the page (onunload), etc. unloading the page (onunload), etc.

JavaScript can be configured to perform actions when JavaScript can be configured to perform actions when these and other events occur. these and other events occur.

The JavaScript code is added directly to the XHTML tag The JavaScript code is added directly to the XHTML tag with the type of event as an attribute. with the type of event as an attribute.

The value of the event attribute will contain one or more The value of the event attribute will contain one or more JavaScript statements. JavaScript statements.

1212

Events Events

EventEvent Event HandlerEvent Handler

clickclick onclickonclick

loadload onloadonload

mouseovermouseover onmouseoveronmouseover

mouseoutmouseout onmouseoutonmouseout

submitsubmit onsubmitonsubmit

unloadunload onunloadonunload

1313

JavaScriptJavaScriptCoding for EventsCoding for Events

The sample code below will display an alert The sample code below will display an alert box when the mouse is placed over a link.box when the mouse is placed over a link.

<a href=”home.htm” onmouseover=”alert(‘Click to go home’)”>Home</a><a href=”home.htm” onmouseover=”alert(‘Click to go home’)”>Home</a>

1414

JavaScriptJavaScriptDebugging(1)Debugging(1)

Check the syntax of the statements that you typed - Check the syntax of the statements that you typed - pay very close attention to upper and lower case pay very close attention to upper and lower case letters, spaces, and quotations. letters, spaces, and quotations.

Verify that you have saved the page with your most Verify that you have saved the page with your most recent changes.recent changes.

Verify that you are testing the most recent version of Verify that you are testing the most recent version of the page (refresh or reload the page)the page (refresh or reload the page)

If you get an error message, Use the error messages If you get an error message, Use the error messages that are displayed by the browser. that are displayed by the browser.

1515

JavaScriptJavaScriptDebugging(2)Debugging(2)

Use the Firefox or Mozilla browser:Use the Firefox or Mozilla browser:• Type “javascript: in the address bar to view the Type “javascript: in the address bar to view the

JavaScript console.JavaScript console.• The JavaScript Console will indicate an issue and The JavaScript Console will indicate an issue and

the line numberthe line number• This may not be exactly where the problem isThis may not be exactly where the problem is• Sometimes the error is a one or two lines above Sometimes the error is a one or two lines above

the indicated line number. the indicated line number.

1616

QuestionsQuestions1.1. With respect to objects, describe the difference With respect to objects, describe the difference

between a property and a method. Feel free to between a property and a method. Feel free to use words like “thing,” “action,” “description,” use words like “thing,” “action,” “description,” “attribute,” and so forth.“attribute,” and so forth.

2.2. What is the difference between an event and an What is the difference between an event and an event handler?event handler?

3.3. Where are event handlers placed in the XHTML Where are event handlers placed in the XHTML document?document?

1717

VariableVariable

A variable is a placeholder for information.A variable is a placeholder for information. The variable is stored in the computer’s The variable is stored in the computer’s

memory (RAM).memory (RAM).

var userName;var userName;

userName = "Karen";userName = "Karen";

document.write(userName);document.write(userName);

1818

PromptsPrompts

prompt() methodprompt() method• Displays a message and accepts a Displays a message and accepts a

value from the uservalue from the user

myName = prompt(“prompt message”);myName = prompt(“prompt message”);

• The value typed by the user is The value typed by the user is stored in the variable myNamestored in the variable myName

1919

Arithmetic OperatorsArithmetic OperatorsOperatorOperator DescriptionDescription ExampleExample Value of Value of

QuantityQuantity

== assignassign quantity = quantity = 1010

1010

++ additionaddition quantity = quantity = 10 + 610 + 6

1616

-- subtractionsubtraction quantity = quantity = 10 - 610 - 6

44

** multiplicatimultiplicationon

quantity = quantity = 10 * 210 * 2

2020

// divisiondivision quantity = quantity = 10 / 210 / 2

55

2020

Comparison OperatorsComparison OperatorsOperatoOperato

rrDescriptionDescription ExampleExample Sample values of Sample values of

quantity that quantity that would result in would result in truetrue

= == = Double equals sign Double equals sign (equivalent)(equivalent)“is exactly equal “is exactly equal to”to”

quantity = = quantity = = 1010

1010

>> Greater thanGreater than quantity > 10quantity > 10 11, 12 (but not 10)11, 12 (but not 10)

> => = Greater than or equal Greater than or equal toto

quantity > = quantity > = 1010

10, 11, 1210, 11, 12

< < Less thanLess than quantity < 10quantity < 10 8, 9 (but not 10)8, 9 (but not 10)

< =< = Less than or equal toLess than or equal to quantity < = quantity < = 1010

8, 9, 108, 9, 10

! =! = Not equal toNot equal to quantity ! = quantity ! = 1010

8, 9, 11 (but not 10)8, 9, 11 (but not 10)

2121

Decision MakingDecision Making

if (condition)if (condition){{ … … commands to execute if condition commands to execute if condition

is trueis true} } else {else { … … commands to execute if condition commands to execute if condition

is falseis false}}

2222

FunctionFunction

A function is a block of one or more A function is a block of one or more JavaScript statements with a specific JavaScript statements with a specific purpose, which can be run when needed. purpose, which can be run when needed.

function function_name() function function_name() {{ ... JavaScript statements …... JavaScript statements …}}

2323

Defining the FunctionDefining the Function

function showAlert()function showAlert()

{{

alert("Please click OK to continue.");alert("Please click OK to continue.");

}}

Calling the FunctionCalling the FunctionshowAlert();showAlert();

2424

QuestionsQuestions

1.1. What is a function definition?What is a function definition?

2.2. Why do you call a function?Why do you call a function?

3.3. Can you call a function more than Can you call a function more than once?once?

2525

Form ValidationForm Validation

It is common to use JavaScript to validate It is common to use JavaScript to validate form information before submitting it to form information before submitting it to the Web server.the Web server.• Is the name entered?Is the name entered?• Is the e-mail address of correct format?Is the e-mail address of correct format?• Is the phone number in the correct format?Is the phone number in the correct format?

See Hands-on Practice 14.8See Hands-on Practice 14.8

2626

Validating Form FieldsValidating Form Fields

Use the “” or null to check to Use the “” or null to check to determine if a form field has determine if a form field has informationinformation

if (document.forms[0].userName.value == "" )if (document.forms[0].userName.value == "" )

{{

alert("Name field cannot be empty.");alert("Name field cannot be empty.");

return false;return false;

} // end if } // end if

2727

JavaScript & AccessibilityJavaScript & Accessibility

Don’t expect JavaScript to always function Don’t expect JavaScript to always function for every visitorfor every visitor• Some may have JavaScript disabledSome may have JavaScript disabled• Some may be physically unable to click a Some may be physically unable to click a

mousemouse Provide a way for your site to be used if Provide a way for your site to be used if

JavaScript is not functioningJavaScript is not functioning• Plain text linksPlain text links• E-mail contact infoE-mail contact info

2828

JavaScript ResourcesJavaScript Resources

Beginning JavaScript TutorialsBeginning JavaScript Tutorialshttp://www.pageresource.com/jscript/index.htmlhttp://www.pageresource.com/jscript/index.html

JavaScript Tutorial for the Total Non-Programmer JavaScript Tutorial for the Total Non-Programmer http://www.webteacher.com/javascript/http://www.webteacher.com/javascript/

More Beginning JavaScript Tutorials More Beginning JavaScript Tutorials http://echoecho.com/javascript.htmhttp://echoecho.com/javascript.htm

Core JavaScript 1.5 Reference Manual Core JavaScript 1.5 Reference Manual http://www.webreference.com/javascript/reference/corhttp://www.webreference.com/javascript/reference/core_refe_ref

The JavaScript Source The JavaScript Source http://javascript.internet.comhttp://javascript.internet.com

2929

QuestionsQuestions1.1. What is meant by the term “form What is meant by the term “form

data validation”?data validation”?2.2. Give three examples of form data Give three examples of form data

that may require validation.that may require validation.3.3. Should you always expect your Should you always expect your

JavaScript to “work” – why or why JavaScript to “work” – why or why not?not?