I. Intro to JavaScript
a. Quick History
i. Developed as “LiveScript” by Netscape
ii. Changed to JavaScript after alliance with Sun Microsystems
iii. Microsoft developed JScript – which was similar but not exactly the same
iv. Programmers faced with Browser AND language incompatibilities
v. European Computer Manufacturers Association developed ECMAScript
1. combines best features of NN and IE
2. is cross-browser compatible
3. we will be studying ECMAScript, but refer to it by its popular name JavaScript
b. How is it created
i. Any text editor
ii. Can be viewed by user
1. If you can see it you can steal it!
2. We may look at other code for ideas, but do our own coding
c. Where is it located
i. Within HTML document
1. Head – executed immediately or “called” later by an “event”
a. Uses the <script> element to define start/end
b. Sample events
i. Body – onload, onunload
ii. Button – onclick
iii. Form – onsubmit
iv. Image – onmouseover, onmouseout
c. Browser “listens” for event then “fires” an event handler
2. Body – activated by an event or immediately
ii. As external file (usually with extension “.js”)
d. A quick intro into programming objects
i. An object is a self-contained piece of code
1. It may talk to other objects to gather data or request things get done
2. It may “inherit” information form objects that call to it
ii. Objects have three aspects (from a user perspective)
1. Properties – what it knows (size, color, font)
2. Methods – what it can do (save, print, submit a form)
3. Events – what can trigger it into action (mouse actions, keyboard actions)
II. Programming the browser
i. Window Object – global object – contains all other objects
1. Location Object – information about the current page
2. History Object – information about the past pages
3. Document Object – information on the current page
a. Forms array – an array of all forms on a page
b. Images array – an array of all the images on a page
c. Links array – an array of all the links on a page
4. Navigator Object – information about the browser
5. Screen Object – information about the current display capabilities
ii. Look at example that prints properties
iii. Chart of results
b. Window Object
i. Notes:
1. The window is the browser’s frame, it contains the web pages
2. A global object so its properties and methods are available anywhere, anytime
3. Some properties are read-only and some are read-write
ii. Properties (a partial list of properties available across browsers)
1. defaultStatus – the default message that appears in the status bar
2. Math – an object holding mathematical functions and constants
3. name – the name of the window
4. opener – the window that opened the current window
5. status – the current message that is displayed in the status bar
iii. Methods
1. alert() – displays a message in a dialog box
2. close() – will close the current window
3. confirm() – ask a yes/no question in a dialog box
4. open() – will open a new window
5. prompt() – will ask for information via a dialog box
iv. Events
1. onblur – fired when window loses focus
2. onfocus – fired when window gains focus
3. onload – fired when window is completely loaded
4. onresize – fired when the window is resized
5. onunload – fired when the window leaves the current document/frameset
c. History Object
i. Notes:
1. This object keeps a list of pages visited called the “history stack”
2. For privacy reasons we cannot read page addresses in stack
3. We can direct the browser to go forward or backward in the stack
ii. Properties
1. length – the number of pages in the stack
iii. Methods
1. forward() – go forward one page
2. back() – go backward one page
3. go() – move indicated number of pages
a. positive value – move forward that many pages
b. negative value – move backward that many pages
d. Location Object – information about the current page’s position
i. Properties
1. protocol – the protocol used to access this page, including the trailing colon (http:)
2. host – the hostname and port of the current URL
3. pathname – the full path and filename of current page
4. href – the entire URL (read/write capable) – if written to, will add to history stack
ii. Methods
1. reload() – reloads the current document
2. replace() – move to new location without an entry on the history stack
e. Navigator Object
i. Notes:
1. More appropriate name is “Browser Object,” but created first by Netscape – so called the “navigator object”
2. Similar to a Chrysler having a part called “the ford object”
3. Microsoft has the “clientInformation object” that refers to the same information available in the “navigator object”
ii. Properties
1. appName – the name of the browser
a. IE55 - Microsoft Internet Explorer
b. IE6 - Microsoft Internet Explorer
c. Netscape 6.2 – Netscape
2. appVersion – which version of the application
a. IE55 - 4.0 (compatible; MSIE 5.5; Windows 98)
b. IE6 - 4.0 (compatible; MSIE 6.0; Windows NT 5.0)
c. Netscape 6.2 - 5.0 (Windows; en-US)
3. plugins[] – an array of available plug-ins – always empty in IE
4. userAgent – how the browser identifies itself
a. IE55 - Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)
b. IE6 - Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
c. Netscape 6.2 - Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:0.9.4) Gecko/20011019 Netscape6/6.2
iii. Methods
1. javaEnabled() – checks to see if Java is enabled
f. Document Object – the page itself
i. Arrays – the DOM contains a series of arrays of objects that further define the page
1. forms() – all of the form elements on the page
2. images() – all of the images on the page
3. links() – all of the links placed on the page
ii. Properties
1. bgColor, fgColor – color of the page
2. linkColor, vlinkColor, alinkColor – color of the links on the page
3. referrer – URL of the page that linked to current page
4. cookie – a string containing cookie data for this document
iii. Methods
1. write() – inserts a specified string into a document
III. Hands-on Examples
a. Displaying an Alert window when the page loads
i. Sample
ii. Code
b. Look-up a definition and display on status bar
i. Sample
ii. Code
c. Create new windows with detailed information
i. Sample
ii. Code