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

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

3. Scott Marino MSMIS Summer Session 1 - 2001 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

4. Scott Marino MSMIS Summer Session 1 - 2001 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()

5. Scott Marino MSMIS Summer Session 1 - 2001 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

6. Scott Marino MSMIS Summer Session 1 - 2001 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

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

8. Scott Marino MSMIS Summer Session 1 - 2001 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

9. Scott Marino MSMIS Summer Session 1 - 2001 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

10. Scott Marino MSMIS Summer Session 1 - 2001 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

11. Scott Marino MSMIS Summer Session 1 - 2001 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

12. Scott Marino MSMIS Summer Session 1 - 2001 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

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

14. Scott Marino MSMIS Summer Session 1 - 2001 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

15. Scott Marino MSMIS Summer Session 1 - 2001 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

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

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

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

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