A brief organizational matter first. All scripts and other information will appear on this page. But there are links to other pages that actually run the scripts. On each page that has a script running, there will be a back link to take you to this page again.
JavaScript is a scripting language. The code you write is in the HTML page inside a <SCRIPT> container. For example, the next page has a script that prompts you for your name, and prints your name along with the current date: Go to First Example
The script for the first example is:
<html>
<head>
<title>Example 1</title>
</head>
<body>
<script>
your_name = prompt("What's your name?", "");
document.writeln("Hello <b>" + your_name + "</b>");
document.writeln("<p>Today is " + Date());
</script>
<p>
This is the regular page.
<p>
<a href="js1.htm"> Go Back </a>
</body>
</html>
As you can see, the script appears in the body of the html page.
The first line of code assigns a value to the variable your_name. As you can see, you do not need to declare this variable or give it a type.
The value comes from the return value of the prompt function. The prompt function displays a prompt on the screen. The first argument of the function is the prompt the user sees. The second argument is the default value (in this case, there is no default value).
To write to the HTML page itself, you use the document.writeln function, as is done in the second and third statements. In these stements, we execute the writeln function on the document object. The argument of writeln is a string. As you can see, the string can be constructed using the concatenation operator. HTML commands can be part of that string.
In the second statement, a variable's value is part of the string that's printed.
In the third statement, the return value of the Date() function is included in the string.
In the next example, we use an alert function.
The script for this example is also inside the body container:
<body>
<script language=javascript>
your_name = prompt("Who are you?","");
alert("Welcome to the second example, " + your_name);
</script>
The alert function has just one string argument.
Also note that the language attribute of the script command has been set to javascript. This is not necessary - as long as your browser uses JavaScript as its default scripting language.
There are a couple of other places where you can put your scripts. We could put this script in the head container instead, as is done in the third example:
When the script is in the head container, it's executed before the page is loaded.
<html>
<head>
<title>Example 3</title>
<script language=javascript>
your_name = prompt("Who are you?","");
alert("Welcome to the second example, " + your_name);
document.writeln("Hello <b>" + your_name + "</b>!<P>")
</script>
</head>
<body>
This is the regular page.
<p>
<a href="js1.htm#ex3"> Go Back </a>
</body>
</html>
Another place to put the script is inside the body command as part of an event handler. One such event handler is onload. In this example, the code is executed after the page is loaded:
<html>
<head>
<title>Example 4</title>
</head>
<body onload="your_name = prompt('Who are you?','');
alert('Welcome to the second example, ' + your_name);">
This is the regular page.
<p>
<a href="js1.htm#ex4"> Go Back </a>
</body>
</html>
If there were document.writeln statements inside the code now, the code would replace the contents of the page.
As you can the way you put code inside the onload attribute is:
onload="statement1; statement2;"
Since we now can no longer use double quotes inside the statements, we can use single quotes instead.
Since a longer script might be awkward to place inside the quotes, we can write a function that gets called inside the onload event handler, as occurs in the following example:
<html>
<head>
<title>Example 5</title>
<script>
function WelcomeMessage()
{
your_name = prompt("Who are you?","");
alert("Welcome to the fifth example, " + your_name);
}
</script>
</head>
<body onload="WelcomeMessage();">
This is the regular page.
<p>
<a href="js1.htm#ex5"> Go Back </a>
</body>
</html>
Notice that the function definition is within a script container within the head container.
The general form of an argumentless function is:
function functionName()
{
statement1;
statement2;
etc.
}
You call a function the usual way.
You can also call a function inside of a regular script, as in the sixth example:
<html>
<head>
<title>Example 6</title>
<script>
function WelcomeMessage()
{
your_name = prompt("Who are you?","");
alert("Welcome to the sixth example, " + your_name);
document.writeln("Welcome <b>" + your_name + "</b>!<p>");
}
</script>
</head>
<body>
<script>
WelcomeMessage();
</script>
This is the regular page.
<p>
<a href="js1.htm#ex6"> Go Back </a>
</body>
</html>
Why is it OK to have a document.writeln inside this WelcomeMessage function, but it would not have been in the earlier WelcomeMessage function?
Another place to put code is inside the event handler for a form object. In the next example, the WelcomeMessage function is executed when the user clicks a button:
<html>
<head>
<title>Example 7</title>
<script>
function WelcomeMessage()
{
your_name = prompt("Who are you?","");
alert("Welcome to the seventh example, " + your_name);
}
</script>
</head>
<body>
<form>
<input type=button name=button1 value="Click Me" onclick=WelcomeMessage()>
</form>
<p>
This is the regular page.
<p>
<a href="js1.htm#ex7"> Go Back </a>
</body>
</html>
Again, no document.writeln statements inside the function, since it would replace the body of the page.
We use the onclick attribute to show what should be executed when the button is clicked.
Also note that JavaScript is sort of sloppy. There are no quotes around the script inside the onclick handler, and there is no semi-colon after the function call; but it all works anyway.
You can also put code inside a A tag. Although we could write code for the onClick handler, the following example executes code for a onMouseOver handler:
<html>
<head>
<title>Example 8</title>
<script>
function Encourage1()
{
window.status="Go ahead and click to go back!";
}
function Encourage2()
{
window.status="Go ahead and click to go to St. Rose!";
}
</script>
</head>
<body>
<a href="http://www.strose.edu" onMouseOver="Encourage2(); return
true"> Go To St. Rose </a>
<p>
<a href="js1.htm#ex8" onMouseOver="Encourage1(); return true">
Go Back </a>
</body>
</html>
A function gets called when you put the mouse over the hot text. The function changes the message in the window's status line (normally you see where the link goes to instead). It's also necessary to put return true in the code for the onMouseOver event handler - otherwise you'll still see the link location; but when you move the mouse away, then you'll see the status line message.
We can do the same trick inside an imagemap, as you can see in the next example:
<html>
<head>
<title>Example 9</title>
<script>
function FunctionOver(myText)
{
window.status="Click on " + myText + "!";
}
</script>
</head>
<body>
<img SRC="boston.gif" usemap="#boston" height=250 width=400>
<map name="boston">
<area shape="rect" href="BunkerHill.htm" coords="160,0,200,30"
onMouseOver="FunctionOver('Bunker
Hill');return true"
onMouseOut="window.status='Or not';return
true;">
<area shape="rect" href="ScienceMuseum.htm" coords="120,40,160,70"
onMouseOver="FunctionOver('Science
Museum');return true"
onMouseOut="window.status='Or not';return
true;">
<area shape="rect" href="Logan.htm" coords="280,50,300,80"
onMouseOver="FunctionOver('Logan
Airport');return true"
onMouseOut="window.status='Or not';return
true;">
</map>
<p>
<a href="js1.htm#ex9"> Go Back </a>
</body>
</html>
As you can see, each area on the imagemap has both an onMouseOver attribute and an onMouseOut attribute.
The onMouseOver attribute calls a function called FunctionOver. This time, the function has a string argument.
The function definition now has an argument. Notice that you do not have to indicate the argument's type!
Your AREA or A tags can also have onclick handlers. What happens here is that you first see the result of the onclick handler and then you go to the link. Look at the next example:
<html>
<head>
<title>Example 10</title>
<script>
function FunctionOver(myText)
{
window.status="Click on " + myText + "!";
}
</script>
</head>
<body>
<img SRC="boston.gif" usemap="#boston" height=250 width=400>
<map name="boston">
<area shape="rect" href="BunkerHill.htm" coords="160,0,200,30"
onMouseOver="FunctionOver('Bunker
Hill');return true"
onMouseOut="window.status='Or not';return
true;"
onClick="alert('Ready to go to Bunker
Hill?'); return true">
<area shape="rect" href="ScienceMuseum.htm" coords="120,40,160,70"
onMouseOver="FunctionOver('Science
Museum');return true"
onMouseOut="window.status='Or not';return
true;"
onClick="alert('Ready to go to the
Science Museum?'); return true">
<area shape="rect" href="Logan.htm" coords="280,50,300,80"
onMouseOver="FunctionOver('Logan
Airport');return true"
onMouseOut="window.status='Or not';return
true;"
onClick="alert('Ready to go to Logan
Airport?'); return true">
</map>
<p>
<a href="js1.htm#ex10"> Go Back </a>
</body>
</html>
Since we now have two links to the "Bunker Hill" page (as well as to the other Boston area pages), it would be nice to be able to click a Back button on the Bunker Hill to always return to the page that we came from. Let's look at the code for the Bunker Hill page:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor = "FFFF00">
<CENTER>
<FONT SIZE=+2>
Welcome to Bunker Hill!
</FONT>
<p>
<form>
<input type="button" value="Back to Boston" onclick="history.go(-1)">
</form>
</CENTER>
</BODY>
</HTML>
The function history.go will take you to another page. The argument -1 means go back one page. You could have any integer argument, positive or negative.
The last example doesn't introduce anything new. It's just a bit longer. It represents a Madlib game.
<html>
<head>
<title>Madlib Page</title>
<script>
function Madlib()
{
adverb1 = prompt("Type an adverb", "");
pluralnoun1 = prompt("Type a plural noun", "");
adjective1 = prompt("Type an adjective", "");
pluralnoun2 = prompt("Type a plural noun", "");
bodypart1 = prompt("Type a body part", "");
animal1 = prompt("Type an animal", "");
noun1 = prompt("Type a noun", "");
number1 = prompt("Type a number", "");
adjective2 = prompt("Type an adjective", "");
verb1 = prompt("Type a verb (present tense)", "");
bodypart2 = prompt("Type a body part", "");
animal2 = prompt("Type an animal", "");
location1 = prompt("Type a geographic location", "");
food1 = prompt("Type a food", "");
bodypart3 = prompt("Type a body part", "");
document.writeln("<center> Superstitions</center>");
document.writeln("<p>Although we believe ourselves to
be ");
document.writeln(adverb1 + " civilized, most of us are really
");
document.writeln(pluralnoun1 + " at heart because we still
believe ");
document.writeln("in " + adjective1 + " superstitions that
began ");
document.writeln("while people still lived in " + pluralnoun2
+ ".");
document.writeln(" Some of these superstitions are:");
document.writeln("<p>1. If you spill salt, throw some
over your ");
document.writeln("left " + bodypart1 + ".");
document.writeln("<br>2. If a black " + animal1 + " runs
in front ");
document.writeln("of you, you are in trouble.");
document.writeln("<br>3. If you break a/an " + noun1
+",you will ");
document.writeln("have " + number1 + " years of " + adjective2
+ " luck.");
document.writeln("<br>4. Never " + verb1 + " under a
ladder.");
document.writeln("<br>5. If your " + bodypart2 + " itches,
it means ");
document.writeln("you will have a visitor.");
document.writeln("<br>6. If you hear a/an " + animal2
+" howl at midnight");
document.writeln(", someone in your family will end up in
" + location1);
document.writeln(".");
document.writeln("<br>7. If you want to keep vampires
away, always wear ");
document.writeln("a/an " + food1 + " on a string around
your ");
document.writeln(bodypart3 + ".");
}
</script>
</head>
<body>
<script>
Madlib();
</script>
<p>
Do you like the above madlib?
<p>
<a href="js1.htm#madlib"> Go Back </a>
</body>
</html>