Scott Marino MSMIS Summer Session Web Site Design and Authoring Session 8 Scott Marino

MSMIS Summer Session Topics Intro to JavaScript –Objects, Properties, Methods, Events, Values, Operators, and Assignments –JavaScript / Chapter 1 JavaScript Basics –JavaScript / Chapter 2

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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()

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session JavaScript Basics Scripts can be located within the tags or within the tags document.write("Hello World!") 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

Scott Marino MSMIS Summer Session JavaScript Basics Older browsers have difficulty with JavScript –Use commenting technique to solve this

Scott Marino MSMIS Summer Session 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 */ This page needs JavaScript –Only displays in older browsers that don’t support JavaScript or in browsers where the user has turned off JavaScript

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session JavaScript Basics If statements –if ( statement ) { true action } else { false action } True and False actions are separated by braces {}

Scott Marino MSMIS Summer Session 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]”)

Scott Marino MSMIS Summer Session JavaScript Basics Looping –hasQT = false for (i=0; i = 0) { hasQT = true } } Loops through the list of plugins looking for QuickTime

Scott Marino MSMIS Summer Session JavaScript Basics Functions –function saySomething(message) { alert(message) } – Status Bar Messages –Can scroll a message or have an event driven message