Home

JavaScript Syntax: Client-Specific Features

Related HTML Tags

Category Description of Syntax Examples
script tag surrounds JavaScript code (language attribute and version are usually unneeded)
can appear in head or body of HTML document (functions are best defined in the document head)		 <SCRIPT LANGUAGE="JavaScript1.3">
JavaScript statements...
</SCRIPT>
HTML
comments		 Text between <!-- and --> is not treated as HTML
used to hide script contents from very old browsers (but not really necessary)		 <script><!-- Begin hiding script
JavaScript statements... 
// End hiding --></script>
source
file		 specify a file as the JavaScript source instead of embedding in HTML
useful for sharing functions on many pages and/or as a data input file		 <script SRC="common.js"></script>
HTML
attributes		 use JavaScript expressions as HTML attribute values <hr width="&{barWidth};%" align="left">
quotation
marks		 use single quotes for string literals
use double quotes for write statements and attributes 		 function bar(widthPct) { document.write("<hr align='left' width=" + widthPct + "%>")}
<input type="button" value="Press Me" onClick="myfunc('astring')">
noscript
tag		 used to display HTML if JavaScript is disabled in the user's browser <NOSCRIPT>
<p>Please enable JavaScript to see this page properly.</p>
</NOSCRIPT>
form tag used to contain HTML form elements
can be named or have an action		 <FORM>
<input type=submit value="Send" onSubmit="send(this.form)">
</FORM>

Navigator Objects

Category Description of Syntax Examples
example objects window, document, frame, form, link, image, and those HTML form elements listed below see below
document The write or writeln method of the document object is often used to dynamically generate HTML code. document.writeln("<p>Today is"+Date()+"</p>");

Commonly Used HTML Form Elements

Category Purpose Examples Result
text field Input a number or short amount of text <input type="text" name="username" width=10> 
password field Input a password that does not appear on screen <input type="password" name="mypassword"> 
text area Input a large amount or multiple lines of text <textarea rows=2 cols=20>Type your answer here.</textarea> 
radio button Select one of several options <input type=radio name="q1" value="1"> True
<input type=radio name="q1" value="0"> False		 True
False
checkbox Select or unselect an option <input type=checkbox name="married" checked> Married Married
link Go to another page or URL <a href="home.htm">My Home Page</a> My Home Page
select menu Select an option from a pull-down menu What is your favorite color? 
<select> <option>red <option>blue <option>other </select>		 What is your favorite color?
multiple
select menu		 Select or unselect objects on a menu Which of these do you eat? 
<select size=3 multiple> <option>meat <option>vegetables <option>dairy products <option>insects </select>		 Which of these do you eat?
file upload Select a file to upload <input type="file" name="myfile"> Upload a file Upload a file
push button Do what the button text indicates. <input type="button" value="Save"> 
submit button Submit a form (e.g. to Java or a CGI script) <input type="submit" value="Submit Form"> 
reset button Reset form to initial values <input type="reset" value="Reset all values"> 

Commonly Used Event Handlers

Event handler User event (action/trigger) Applies to Examples
onClick User clicks form element or link buttons, submit buttons, reset buttons, radio buttons, checkboxes, links <input type="button" value="Calculate" onClick="compute(this.form)">
onChange User changes value of element text fields, textareas, select lists <input type="text" onChange="alert('Sorry, this value is read only.')">
onFocus User gives input focus to window or form element windows and all form elements <input type="text" onFocus="this.select()">
onBlur User removes input focus from window or form element windows and all form elements <input type="text" onBlur="updateValue(this.form)">
onMouseOver User moves the cursor over a link using the mouse links, images <a href="home.htm" 
onMouseOver="alert('Click this link to go to my home page.')">
My Home Page</a>
onMouseOut User moves cursor off of a link using the mouse links, images <a href="home.htm" 
onMouseOut="alert('Why didn\'t you click?')">
My Home Page</a>
onLoad User loads the page in the browser document body, images <body onLoad="startAnimation()">
onUnload User exits the page in the browser document body <body onUnload="stopAnimation()">