JavaScript

Location

  1. Place the script in the body section if you want the script to be executed as the page loads.

    <html>
    <body>
    <script type="text/javascript">
        document.write("<h1>Hello World!</h1>")
    </script>
    </body>
    </html>
     

  2. Place the script in the head section if you want the script to be executed when called or in response to an event.

    <html>
    <head>
    <script type="text/javascript">
    function hello()
    {
        alert("Hello world!")
    }
    </script>
    </head>
    <body>
    <form>
    <input type="button"
    onClick="hello()"
    value="Call function">
    </form>
    </body>
    </html>

  3. If a script is to be used on more than one page you can create an external script.  Save the script in an external file with a .js extension.  Note the <script> tag is not used in the external file.
     
    file: myscript.js

    document.write("<h1>Hello World!</h1>")
    file: index.html

    <html>
    <body>
    <script src="myscript.js"></script>
    </body>
    </html>

Language fundamentals

Variables

A variable is a location in a computers memory where you can store a value and later retrieve or modify that value.

<script type="text/javascript">
var name = "Susan Smith"
document.write(name)
</script>

Operators

Arithmetic operators
+
-
*
/
%
++
--		 addition
subtraction
multiplication
division
remainder
increment
decrement
Assignment operators
=
+=		 equals
a=a+b OR a +=b
Comparison operators
==
!=
>
>=
<
<=		 equal to
not equal to
greater than
greater than or equal to
less than
less than or equal to
Logical operators
&&
||
!		 and
or
not
String operators
+ concatenate

Decisions

<script type="text/javascript">
var date = new Date()
var time = date.getHours()
if (time < 12)
{
    document.write("Good morning.")
}
else
{
    document.write("Good afternoon.")
}
</script>

Repetition

<script type="text/javascript">
for (i = 0; i < 10; i++)
{
    document.write("The number is " +  i + "<br>")
}
</script>

Functions

See script in location section.

Objects

JavaScript is an object-oriented language.  In object oriented programming we can create objects such as a ball that has properties such as position, size, color and behaviors such as fall, roll and bounce.  The ability to create objects means allows us to create programs that more closely resemble the real world.  Such programs are easier to design and maintain, particularly in large software projects.  In this section we briefly review some of the terminology associated with object-oriented programming.

Objects

In the section below I have included some simple examples using various types of objects.  For a complete listing of all of the methods available to each type of object, refer to the w3schools web site.

String

<script type="text/javascript">
var phrase="JavaScript is fun!"
document.write(phrase.fontcolor('blue') + "<br>")
document.write(phrase.length + " characters")
</script>

Array

<script type="text/javascript">
var fruit = new Array(4)
fruit[0] = "Apple"
fruit[1] = "Orange"
fruit[2] = "Banana"
fruit[3] = "Grape"
for (i=0; i<fruit.length; i++)
{
    document.write(fruit[i] + "<br>")
}
</script>

Date

<script type="text/javascript">
var d = new Date()
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
</script>

Math

<script type="text/javascript">
document.write(Math.random())
</script>

Window

<head>
<script type="text/javascript">
function openwindow()
{
    window.open("http://www.oocities.org/vuumanj")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Window" onClick="openwindow()">
</form>
</body>

Frame

Form

<head>
<title>Compute Area</title>
<script type="text/javascript">
function ComputeArea( )
{
    var l = document.rectangle.length.value
    var w = document.rectangle.width.value
    var a = l*w
    document.rectangle.area.value = a
}
</script>
</head>
<body>
<form name="rectangle">
<table>
<tr>
<td>Length </td>
<td><input type="text" name="length" size="20"> </td>
</tr>
<tr>
<td>Width </td>
<td><input type="text" name="width" size="20"> </td>
</tr>
<tr>
<td>Area </td>
<td><input type="text" name="area" size="20"> </td>
</tr>
</table>
<br>
<input type="button" value="Compute Area" onClick="ComputeArea( );">
<input type="reset" value="Reset">
</form>
</body>

Browser

<script type="text/javascript">
document.write("Browser: ")
document.write(navigator.appName + "<br>")
document.write("Browser Version: ")
document.write(navigator.appVersion + "<br>")
</script>

Event Handlers


onAbort user aborts loading the page
onBlur user left the object
onChange user changed the object
onClick user clicked on the object
onError error in a script
onFocus user made object active
onLoad object finished loading
onMouseOver cursor moved over an object
onMouseOut cursor moved off an object
onSelect user selected contents of an object
onSubmit user submitted a form
onUnload user left the window

<a href
onMouseOver="document.imagename.src='Chem53.gif'"
onMouseOut ="document.imagename.src='Chem56.gif'">
<img src="Chem56.gif" width=100 height=100 border=8 name="imagename">
</a>

 

 

 


Experiment with JavaScript




Potential Projects

  1. Mouse rollover
  2. Calculator
  3. Interactive Quiz