I. Review JavaScript Concepts
a. Creating Code
i. Can be entered in any text editor
ii. Where is it located
1. Within HTML document
a. Head – executed immediately or stored for later in a function
b. Body – executed immediately or activated by an event
2. As external file (usually with extension “.js”)
b. Programming objects
i. An object is a self-contained piece of code
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. Practice
a. Create a page that alerts the user that the final is next week
i. Should happen as soon as page loads
ii. Must be located in <script> tag
iii. Use the “alert” method of the window object – window.alert(“final…”)
b. Create a page with your name as a link to you or your department’s web page
i. When I roll over your name the status bar should change
1. tell me (in the status bar) where the link will take me
2. look at last week’s sample for a sample
ii. When I click the link – it should open the new page
1. Germantown - http://www.mc.cc.md.us/Departments/cpappgt/
2. Rockville - http://www.mc.cc.md.us/Departments/cpapprv/
3. Takoma Park - http://www.mc.cc.md.us/Departments/bmistp/computer_app/
III. Detecting Browsers
a. Can detect which browser being used by looking at “userAgent”
i. IE 5.5 = Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)
ii. IE 6.0 = Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
iii. Netscape 4.7 = Mozilla/4.77 [en] (Windows NT 5.0; U)
iv. Netscape 6 = Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:0.9.4) Gecko/20011019 Netscape6/6.2
b. Search the userAgent string for the value that defines a specific browser
i. Search using the “indexOf” method that is available to all strings (groups of letters)
ii. Using indexOf you can find the starting point of a sub-string inside of a larger string.
1. If I’m using IE6 – userAgent.indexOf(“MSIE 6”) returns 25
2. Sub-string is at 26th position, but “indexOf” starts counting with zero
3. If sub-string not found, “indexOf” will return –1
c. Look at example of browser detection
i. How to use “if…elseif” structure
ii. Search for first positive report from “indexOf” searches
IV. Working with windows and forms
a. Creating new windows
i. Can be done with target=”_blank” if all we want is defaults
ii. Can be done manually to set specific values
b. Syntax
i. window.open(“url”, “name”, “features”)
ii. “url” – the location of the file to be placed inside the new window
iii. “name” – an internal value used to identify windows (cannot repeat)
iv. “features” – a set of options that can be activated (off by default)
1. width (must include a value)
2. height (must include a value)
3. directory buttons (directories)
4. location bar (location)
5. menu bar (menubar)
6. scroll bars (scrollbars)
7. status bar (status)
8. tool bar (toolbar)
9. resizable (resizable)
v. Netscape 6 has location bar incorporated inside of toolbar – to see location, you must also show the toolbar
c. Example
i. Activate script by using a button with “onclick” event
ii. Get height and width
1. Set memory variable (newWidth) equal to numeric value entered into form
2. If memory variable is not a number - assign default value
3. Check memory variable value for validity
a. Boolean Operators – (|| or), (&& and), (! not)
b. If value is too small (<0) or too big (>500) assign default value
4. Assign height and width to “features” string
iii. Check other options
1. See if checkbox is selected
a. windowWasher = form name
b. chkLoc = element name (chk reminds me it is a check box)
c. document.windowWasher.chkLoc refers to a specific check box
d. if (document.windowWasher.chkLoc.checked) looks to see if box is checked
2. If box is checked, add that option to “features”
a. features = features + … means to keep what is already defined and add more
b. “,location” says to add a comma and the requested feature
iv. Open the new window
1. Window opened with “window.open(…)
2. New window displays the feature list
a. “window.opener “ refers to the window that opened this one
b. “features” is the variable with the string of options
3. New window closes when it is no longer the focus of attention
a. <body onblur=”window.close”>
b. prevents trying to open multiple windows with same name