Web Programming:
JavaScript

UO Library IT Curriculum, JQ Johnson

Exercises

Exercise 1: Start NOTEPAD, and write a simple HTML program that checks for the type of browser, and creates different web pages depending on whether or not it's Netscape.

 
<script language="javascript"><!--
if (navigator.appName.substring(0,8) == "Netscape") {
   document.write("<h1>Netscape!</h1>")} 
else {
   document.write("<h1>Maybe MSIE</h1>")}
// --></script>
<noscript>
<h1>Some old browser</h1>
</noscript>

Exercise 2: Create an HTML page with a rollover image (that changes when you move the cursor over it) [note: images are in http://darkwing.uoregon.edu/ ~jqj/inter-pub/js/]

 
<A HREF="index.html" 
 ONMOUSEOVER="home.src='homehl.gif'" 
 ONMOUSEOUT="home.src='home.gif'">
<IMG NAME="home" SRC="home.gif"
 BORDER=0></A>

Exercise 3: Create an HTML form that implements a pulldown list of destinations similar to the one at the right.

 
<FORM>
<select onchange="window.location=
     this.options[selectedIndex].value">
  <option selected value="#">Select a destination
  <option value="http://www.uoregon.edu">UO Home
  <option value="index.html">My home page
 </select>    
</FORM>

Exercise 4: Write an HTML form that requests numeric input. Add javascript to check that the value typed was actually a number.

 
<SCRIPT LANGUAGE="JavaScript"> <!--
function validate(data) {
  if (parseInt(data) != data) {
    alert(data + " is not a positive number")
    return false
  } else { return true }
}   // --></SCRIPT>
 . . .       
<FORM  METHOD=POST
 ACTION="http://www.uoregon.edu/cgi-bin/post-query" 
 onsubmit="return validate(this.best.value)">
My fav number: <INPUT TYPE=text NAME=best><BR>
<INPUT TYPE=submit NAME=Check VALUE="Submit">
</FORM>

Online links for further information

Some books on JavaScript