Basic JavaScript

Loi Ngoc Nguyen, Duy-Ky Nguyen, PhD

What is JavaScript?

What can a JavaScript Do?

Comment is

// Single-line comment

/* Multi-line comment


       . . .


*/

Example 1

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

The code above will produce this output on an HTML page:

Hello World!

Where to Put the JavaScript

JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.

Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. When you place a script in the head section, you will ensure that the script is loaded before anyone uses it. 

<html>
<head>
<script type="text/javascript">
....
</script>
</head>

Scripts in the body section: Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page.

<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.

<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

Using an External JavaScript

Sometimes you might want to run the same JavaScript on several pages, without having to write the same script on every page.

To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension.

Note: The external script cannot contain the <script> tag!

To use the external script, point to the .js file in the "src" attribute of the <script> tag:

<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>

Note: Remember to place the script exactly where you normally would write the script!

JavaScript Events

By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.

Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

Examples of events:

Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs!


Event Handlers

New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of the attributes that can be inserted into HTML tags to define event actions.

FF: Firefox, N: Netscape, IE: Internet Explorer

Attribute The event occurs when... FF N IE
onabort Loading of an image is interrupted 1 3 4
onblur An element loses focus 1 2 3
onchange The user changes the content of a field 1 2 3
onclick Mouse clicks an object 1 2 3
ondblclick Mouse double-clicks an object 1 4 4
onerror An error occurs when loading a document or an image 1 3 4
onfocus An element gets focus 1 2 3
onkeydown A keyboard key is pressed 1 4 3
onkeypress A keyboard key is pressed or held down 1 4 3
onkeyup A keyboard key is released 1 4 3
onload A page or an image is finished loading 1 2 3
onmousedown A mouse button is pressed 1 4 4
onmousemove The mouse is moved 1 6 3
onmouseout The mouse is moved off an element 1 4 4
onmouseover The mouse is moved over an element 1 2 3
onmouseup A mouse button is released 1 4 4
onreset The reset button is clicked 1 3 4
onresize A window or frame is resized 1 4 4
onselect Text is selected 1 2 3
onsubmit The submit button is clicked 1 2 3
onunload The user exits the page 1 2 3

Example 1

<h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1>

and the output

Ooops!

Example 2

<h1 id="header1" onclick="this.style.color='red'">Click Me!</h1>

<p>If you click the header above, it turns red.</p>

and the output

Click Me!

If you click the header above, it turns red.


Example 3

<h1 onclick="document.getElementById('p1').style.color='red'">Click Me!</h1>

<p id="p1">If you click the header above, I turn red.</p>

and the output

Click Me!

If you click the header above, I turn red.



Example 4

<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>

and the output

Mouse over this text


Example 5

<p id="p2"> Hello World! </p>

<input type="button" value="Hide text" onclick="document.getElementById('p2').style.visibility='hidden'" />
<input type="button" value="Show text" onclick="document.getElementById('p2').style.visibility='visible'" />

and the output

Hello World!



Example 6
Execute upon completion of input
<script type="text/javascript">
function upperCase(x)
{
   var y=document.getElementById(x).value;
   document.getElementById(x).value=y.toUpperCase();
}
</script>
</head>
   <body>
        Enter your name:
<input type="text" id="fname" onchange="upperCase(this.id)">

and the output
Enter your name:

Example 7
Execute upon mouse click 
Field1: <input type="text" id="field1" value="Hello World!"><br />
Field2: <input type="text" id="field2"><br /><br />
Click the button below to copy the content of Field1 to Field2.<br />
<button onclick="document.getElementById('field2').value=document.getElementById('field1').value">Copy Text</button>

and the output
Field1:
Field2:

Click the button below to copy the content of Field1 to Field2.

Example 8
Move mouse in & out the object
<head>
<script type="text/javascript">
function mouseOver()
{
   document.b1.src="src/ptr_left.png";
}
function mouseOut()
{
   document.b1.src="src/ptr_right.png";
}
</script>
</head>

<body>

<a target="_blank">
<img border=="0" src="src/ptr_left.png" name="b1"
   onMouseOver="mouseOver()"
   onMouseOut="mouseOut()" />
</a>
<p/>Move mouse in and out the object

</body>
and the output

Move mouse in and out the object



Example 9
Turn On/Off the light
<head>
<script type="text/javascript">
cc=0;
function changeimage()
{
   if (cc==0)
   {
      cc=1;
      document.getElementById('myimage').src="bulbon.gif";
   }
   else
   {
      cc=0;
      document.getElementById('myimage').src="bulboff.gif";
   }
}
</script>
</head>

<body>

<img id="myimage" onclick="changeimage()" border="0" src="bulboff.gif" width="100" height="180" />
<p>Click to turn on/off the light</p>

</body>

and the output
 

Click to turn on/off the light

Example 10
Convert to upper case upon completion of input
Turn On/Off the light
<head>
<script type="text/javascript">
function lighton()
{
   document.getElementById('myimage').src="bulbon.gif";
}
function lightoff()
{
   document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head>

<body>
<img id="myimage" 
	onmousedown="lighton()" 
	onmouseup="lightoff()" 
	src="bulboff.gif" width="100" height="180">
<p>Press to turn on the light</p>
</body>

and the output

Press to turn on the light