Scott Marino MSMIS Summer Session 1 - 2001 Web Site Design and Authoring Session 8 Scott Marino

Scott MarinoMSMIS Summer Session 1 - 2001

Web Site Design and Authoring

Session 8

Scott Marino


Topics

• Intro to JavaScript– Objects, Properties, Methods, Events, Values,

Operators, and Assignments

– JavaScript / Chapter 1

• JavaScript Basics– JavaScript / Chapter 2


What is JavaScript?

• A programming language• Designed to add interactivity to web pages• Creates an active user interface• Allows for control over browser functions• Client-Side execution• JavaScript is NOT Java


Objects, Properties and Methods

• Objects are named items– Windows

– Frames

– Forms

– Form elements

• Objects have properties– A window has a title which

is a property

– A form element has a value

• Methods– Things that objects can do

• Windows can open and close

• Buttons can be clicked

• Syntax uses parenthesis to denote a method

• click() or open()

• document.write()

• window.open()


Event Driven

• Events are actions that a user performs or specific events that occur within the browser– Submitting a form

– Moving a mouse over an element

– Completion of page loading

• JavaScript is activated by event handlers– Trigger the named event to execute when a named

event


Event Handlers

• onAbort - the user aborts page loading• onBlur - the user left the object• onChange - the user has changed the object• onClick - the user has clicked on an object• onError - the script has encountered an error• onFocus - the user has made an object active• onLoad - the object (page) has finished loading


Event Handlers

• onMouseover - the cursor moves over an object• onMouseout - the cursor moved off the object• onSelect - the user selected the contents of an

object• onSubmit - the user “submits” a form• onUnload - the user has left the window


Value Types

• Number - any numeric value• String - Characters inside quotation marks• Boolean - True or False• Null - no value• Object - any value associated with the object• Function - value as returned by the function


Operators

• x + y (numeric) adds the values• x + y (string) concatenates the values• x - y subtracts y from x• x * y multiplies x and y• x / y divides x by y• x % y modulus of x and y (remainder)• x++ increments x by 1• x-- decrements x by 1


Assignments

• x = y assigns the value of y to x• x += y assign the value x + y to x• x -= y assign the value x - y to x• x *= y assign the value x * y to x• x /= y assign the value x / y to x• x %= y assign the value x % y to x


Comparisons

• x == y Returns true if x and y are equal• x != y Returns true if x and y are not equal• x > y Returns true if x is greater than y• x >= y Returns true if x is equal or greater than y• x < y Returns true if x is less than y• x <= y Returns true if x is equal or less than y• x && y Returns true if x and y are both true• x || y Returns true if either x or y is true• !x Returns true is x is false


JavaScript Basics

• Scripts can be located within the <head> tags or within the <body> tags

• <SCRIPT LANGUAGE=JAVASCRIPTTYPE="TEXT/JAVASCRIPT">document.write("Hello World!")</SCRIPT>

• Will write “Hello World!” in the web page

• Document is the object, write is the method, and “Hello World!” is the value passed to the object via the method


JavaScript Basics

• Older browsers have difficulty with JavScript– Use commenting technique to solve this

• <SCRIPT LANGUAGE=JAVASCRIPTTYPE="TEXT/JAVASCRIPT"></SCRIPT>


JavaScript Basics

• Comments– Comment a single line by starting it with a //

– Comment multiple lines by starting it with a /* and ending the comment with a */

• <noscript>This page needs JavaScript</noscript>– Only displays in older browsers that don’t support

JavaScript or in browsers where the user has turned off JavaScript


JavaScript Basics

• Alerts– alert(“Welcome to my page”)

• Confirmations– confirm(“Are you sure?”)

• returns true or false

• Prompts– ans = prompt(“How old are you?”,””)

• ans is assigned the response


JavaScript Basics

• If statements– if ( statement ) {

true action}else { false action}

• True and False actions are separated by braces {}


JavaScript Basics

• Redirection– window.location=“somepage.htm”

– If the browser is JavaScript enabled, the user would be redirected to the new location

• Browser Detection– navigator.appName=“Netscape”

– navigator.appName=“Microsoft Internet Explorer”

• Plug-in Detection– navigator.plugins{“[Shockwave Flash]”)


JavaScript Basics

• Looping– hasQT = false

for (i=0; i<navigator.plugins.length; i++) { if (navigator.plugins[i].name.indexOf(“QuickTime”) >= 0) { hasQT = true }}

• Loops through the list of plugins looking for QuickTime


JavaScript Basics

• Functions– function saySomething(message) {

alert(message)}

– <INPUT TYPE=BUTTON VALUE="Lincoln" onClick="saySomething('Four score and seven years ago...')">

• Status Bar Messages– Can scroll a message or have an event driven message

Documents

Scott Marino MSMIS Summer Session 1 - 2001 Web Site Design and Authoring Session 8 Scott Marino