Javascript by Gail Horwitz

Javascript Notes

Javascript is just a matter of practice -- eventually bits and parts of code are added together to make something work. Someday you will be able to manipulate all this, it just takes time.

*ns -- means netscape 4.0
* ie -- means any microsoft internet explorer version - 4.0 and higher for most functions
* ver6 - please use Netscape 6.0

Search throughout my site for javascript terms and explanations

Basics

html basics

Tags --Just skip this if you are in the javascript class.

It's called XHTML and there are new rules for the tags
We will cover XHTML in the "Web Site Design Tools" class -
This class also covers added functionality for Javascript and DHTML

escapes - we'll use this when we do some writing to layers and manipulating strings, also used in html.
linking in html

definitions
check your code for compliance - not necessary, just a resource...
http://developer.netscape.com/evangelism/tools/tune-up/
setting up our javascript

Linking

link/button
css file
js file
dtd standards
layer/iframe - how to include external html pages in your html page/ without server side includes.
"A" tag and javascript - list of functions to use for your "a" tag

Image switch -- basic buttons

Image maps

set up
add javascript
A free image mapper from Dan Steinman --makes it easier to set up your image map.

Functions

setup includes information on variables, initializing, and modularity
alerter
global expressions and variables
writeline
advanced writeline
send a variable (or function with arguments) -- Quickie reference for "how to" set up variables to use in expressions with the various browsers. (Bottom of the page)
rewrite whole page
return a value
write to status bar
conditional basics
while
dowhile
for/in
with
if
multiple choices, the switch statement
arrays basics -- from the arrays section, but you need to know the basics about an array to use our looping functions, sometimes.
confirm

Forms

Buttons
textarea -- access the information put inside a field in your form
set the value of the textbox, get the value too
forms
submit, and send email
display differences -- It might be a good idea to check out "Dot Notation", in the "DOM" section, after you study this display differences page - This is the example I use for dot notation.
prompter - an advanced "alert" function
password page - basic
more password
radios options

radio usability aspect -- labels for forms

checkboxes-- Global Variables, concatenating to variables, local variables, passing arguments, initializing a variable
optionbox - select one - selectedIndex
add to a listbox
highlight your form , Focus for an item on a form, set an item to "READONLY", also add two inline javascript functions together, on the form or form item, itself.
Pass an argument to another html page
Access items on a page, numerically - set up variable names for items you will reuse to save time in rendering your page.

.Events

document events

With IE -- preload an image
Netscape 4
With NS6

mouse events

keypress

With IE
Netscape 4
With NS6 -- needs more updating

no right-click

forms

With IE and Netscape 4
With NS6 -- attach an event to a specific button or tag

Capturing events

Explanation
capture all events - Example -- Drag the shirts into the cart to order, this is the "Essential CSS & DHTML for Web Professionals" working code.

Evaluation statement

set up -- use Netscape 4.0
examples and set up a separate *.js document to link to in your html page.
create a function on the fly

Arrays

array -- basics
multiple array
more pulldown and list boxes examples
associative array
nested arrays
call an array - good image preloader
prototype arrays
custom collections
Sort arrays by a property
properties of arrays
follow mouse - uses nested loops and associated arrays

Communicating

talk to a frame
get out of a frame
load into a frame -- force it into your frame
switching frames with javascript
writing to a frame with a query
layer/iframe - how to include external html pages in your html page/ without server side includes.
open and close a window
chromeless window -- need to adjust for NS6
talk to another window from main window- while both are open
send information to a page
location function
history information
Hide history

Sniffer -InternetNews discusses percentages of people using various browsers

screen height/width & window height/width
write a separate CSS file depending on resolution
Browser version
Operating System
detect javascript, cookie enabled, javascript version, java enabled
web TV
visibility example - simple example showing the visibility of layers using various browser methods
set css attributes depending on browser -- advanced dynamic css changes

Animation

move

netscape
ie -- also uses parseInt() to retrieve the coordinates of a layer
ver6

move with a timer

Kill scrollbars
basic clipping

timed clipping

netscape
ie
ver6 -- Not working and I think it should as is, currently checking for solutions. Take a look and let me know what you think.

Change opacity and display an image (only for NS6 and IE5++)

ver6 one image slowly displays
ie - same functions for IE

Listing animation functions

onError .

Calendar

get the date -- easy example of using a function to return a value and using an object
format the date

Math functions

Regular Expressions (String functions)

All layer & Div info

Basics
Iframe and ILayer -- linking layers to external sources
innerhtml

moving layers -- check out animation
Nested layers

Objects

.DOM

Plug-Ins

IE's structured graphics plug-in, an activeX add-in
Plugin explanation, detect javaEnabled and shockwave example
Detect basic activeX, Quicttime, Media Player, Real Player
Display

Send information, basic information about using variables with java

send text to java - these all use the mayscript attribute
send numbers to java
get numbers from java

File and Server Talk

last date your page was modified
add to favorites and set to homepage
add aol instant messenger -- just something I found on a website, once
write to a file on your server
find a folder or file to upload to your server, or to email
server side includes
email
referrer property -- find out where your clients are comming from, if from some other server
database connectivity and use

The following will be covered in the "Web Site Design Tools" class

CSS - Cascading Style Sheets, how to use this in your html projects

Glossary A list of the common attributes used with tags
basic information for using the alignment attributes
masterlist of how CSS-1 tags and if they work with each browser
list for CSS-2 tags and if they work with various browsers
inheritance for attributes
Various examples

Sound Styles for CSS -- This is why it all started (the CSS, I mean)
Fonts
Style with javascript
Access style with netscape
Some more examples
linespacing -- just to see what it could look like under the worst of circumstances....
body margins
lists with CSS
Scrollbars - only IE5+ and NS6
Shadow on text
tables
Css for forms
printer friendly pages

Dynamic CSS

change background

netscape --
ie
ver6 -- All netscape browsers stop showing the style change at the beginning of a nested tag.

visibility

netscape -- shows need for the "eval" statement when using for Netscape 4 and variables for expressions on the fly
ie -- added a background image for our layer
ver6

change font color

ie
ver6 - mismatched parameters can be used for javascript, middle, in the body, placement of javascript doesn't matter, either.
netscape -- I put this one last, because with all the escapes to keep the browser from executing our re-writes, it gets to looking pretty complicated. But, anyway - you can change anything in the class for our layer, dynamically.

Recap - new browsers

For NS6 and IE5 -- Change styles if you are using an EXTERNAL Css link and a recap of style methods available
Layer Placement and size - Uses the getElementbyTag() for NS6

Extra

http://webdeveloper.earthweb.com/repository/javascripts/2002/09/99061/meta.htm

searchengines

Future Topics

Java Programming
Jscript.net framework -- link to how to install and use free versions of the jscript.net sdk provided by microsoft.This allows the javascript used by IE to be partially compiled, rendering pages much faster.
XML/XSL - works with every programming type my examples just include asps. This will be covered in the "Web Site Design Tools" class
ASP examples - you need a microsoft server to use these examples
Working with fonts