Basics of Javascript - Objects, Properties,Methods, Event Handlers

by Stephen Wilson, Professor, Conceptual Design, SFSU

What is Javascript? - What can it do? What can't it do?

Object Model

Basic Script tag

The following tags must enclose Javascript code. Also the html comment tags are used to hide the code from browsers that cannot interpret code. <SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript - .......code here....... // - End of JavaScript - --> </SCRIPT>

Event Handlers

Any time the user clicks the mouse or selects a link, and event occurs. Many contemporary languages are primarily driven by these actions. Javascript offers several event handlers. You can indicate a particular builtin or user written function in response. The first example code snippet would generate an alert box if the user clicked a button. The second would be activated when a user chose to move to another page. These examples show only a subset of the full html you would need to place.

<INPUT NAME="askit" TYPE=Button VALUE="" onClick="alert('are you sure?')"> <BODY onUnload="endfunction()">

onAbort - attempt to stop loading onBlur - click outside an entry field, frame, or window onChange - attempt to change what is in entry field onClick - click on a button or link onError - when script generates an error onFocus - when click inside an entry field, frame, or window onLoad - when a page is done loading onMouseOut - move out of an area onMouseOver - when the mouse is over a link onReset - when a reset button is clicked in a form onSelect - when text is selected in entry or select field onSubmit - when suer submits a form onUnload - when user chooses to get new page

List of Javascript Objects

Here is a list of most of the objects available in Javascript

Window Document Anchorİ(anchorsİarray) Area Array form (forms array) button checkbox elementsİarray Option password radio reset selectİ(optionsİarray) submit text textarea Frameİ(framesİarray) Image Linkİ(linksİarray) Location Date Function hidden History Math Navigator Applet Plugins mimeTypes String

List of Methods to be Applied to Objects

Window Object alert closeİ(window) confirm javaEnabled prompt openİ(window) replace scroll Date Object getDate getDay getHours getMinutes getMonth getSeconds getTime getTimezoneOffset getYear setDate setHours setMinutes setMonth setSeconds setTimeout setTime setYear toGMTString toLocaleString String Object anchor big blink bold charAt escape fontcolor fontsize indexOf isNaN italics join lastIndexOf parse parseFloat parseInt reverse small sort split strike sub substring sup toLowerCase toString toUpperCase unescape write writeln Math object abs acos asin atan atan2 ceil cos eval exp fixed floor log max min random round sin sqrt tan History Object back forward go reload Miscellaneous clearTimeout click blur closeİ(document) focus submit taint untaint UTC link openİ(document) pow reset select

Properties

Forms & form elements action checked defaultChecked defaultSelected elements fileupload (possible in submit) options Math E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2 Image NAME SRC LOWSRC HEIGHT WIDTH HSPACE VSPACE BORDER ALIGN COMPLETE

Document alinkColor anchors bgColor fgColor linkColor vlinkColor Window & Frames appCodeName appName appVersion cookie defaultStatus enabledPlugin encoding window frames javaenabled lastModified name opener parent status target URL userAgent Link & area hash href hostname host index path port protocol referrer method pathname

Miscellaneous New Features for Navigator 3

Miscellaneous defaultValue description filename forms index length (now part of array, images, frames arrays,plugins) hash (quality of area object) links (also includes area links) replace(history list) reverse (reverses array) search (part of area ) prototype (allow add properties ot date, string, userobjects) selected selectedIndex self sort (an array) suffixes (plug ins) text title top typeof (string or number) value (value of fileupload in form)

Reserved Words & commands

The following statements are available in JavaScript:
break comment continue for for...in function if...else new return this var while with

- This page created by Stephen Wilson, Professor Conceptual Design, SFSU (http://userwww.sfsu.edu/~swilson) swilson@sfsu.edu
- More information about the Conceptual Design program is available at (http://userwww.sfsu.edu/~infoarts)
- It is a resource used in Art511 Art&Telecommunications course (http://userwww.sfsu.edu/~infoarts/Tele/Tele95.index.html)
- A comprehensive guide to Web design is available in the book World Wide Web Design Guide (Hayden Books) by Stephen Wilson
- The url of this page is (http://userwww.sfsu.edu/~infoarts/Tele/wilson.javascript.basic.html)