Bookmark and Share

Where to Place JavaScript

There are three general areas that JavaScript can be placed for use in a webpage.

Advertise on Tizag.com
  1. Inside the head tag
  2. Within the body tag (like our example in the previous lesson)
  3. In an external file (we'll talk about this next lesson)

The location choice of head or body is very simple. If you want to have a script run on some event, such as when a user clicks somewhere, then you will place that script in the head. If you want the script to run when the page loads, like our "Hello World!" example in the previous lesson, then you will want to place the script within the body tag.

External JavaScript files and their uses will be discussed in the next lesson.

An Example Head Script

Since we have already seen the kind of script that goes in the body, how about we write a script that takes place when some event occurs? Let's have an alert show up when a user click on a button.

HTML & JavaScript Code:

<html>
<head>
<script type="text/JavaScript">
<!--
function popup() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="popup()" value="popup">
</body>
</html>

Display:

We created a function called popup and placed it in the head of the HTML document. Now every time someone clicks on the button (this is an event), an alert will pop up with "Hello World!". We will go into more depth on functions and events in a later lesson.

Bookmark and Share




Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials