HTML / JavaScript Reference

Intro to JS - Basics, Variables, SCRIPT tag

Public Domain

The HTML and JavaScript examples on this page and reference_js_intro_ex.html are released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

Overview

[Basics] [<script>] [Variables] [Variable Scope] [Other Resources]

The syntax of JavaScript is similar to Java, but JavaScript is meant to be simpler to learn and implement. There are different flavors of JavaScript. Netscape and Microsoft have their differences. There are client and server side variations, too. This reference will deal with client-side JavaScript. The basics are the same for both browsers.

Basics

Just like HTML, JavaScript is read by the browser when the web page is loaded. To include JavaScript in an HTML file it has to be placed between the start tag <script> and the end tag </script>. Then, the JavaScript should go into an HTML comment. Anything between these comments is the JavaScript. This can include statements, variables, and JavaScript comments. JavaScript comments are different from the HTML comments. One way to comment in JavaScript is two forward slashes // which will cause the rest of the line to be ignored. The other way to comment is to use a forward slash and asterisk /* to open a comment, and an asterisk and forward slash */ to close the comment. To understand what this looks like, look at the following example.

Basic Rules - example source (excerpt from Pace Calculator Source)

<script language="JavaScript">
<!--
/*
 * defaultStuff sets the defaults. It is called by the onLoad event.
 */
function defaultStuff()
{
	// set list box default to PACE
	document.Calc.CalcWhat.selectedIndex=2;
	
	// set option buttons to defaults
	document.Calc.optDist[0].checked=true;
	document.Calc.optPace[0].checked=true;
}
// -->
</script>

<script> tag

The <script> tag has several attributes. For a complete reference, refer to W3C's HTML 4.01 Specification § 18 Scripts.

Zero, one, or more attributes can be used in the same <SCRIPT> tag. The attributes discussed here are language, type, and src.

language
The W3C has deprecated this attribute in the standard, but it is still widely used and supported by browsers. In fact, the Netscape link above gives several examples using the language attribute.

example - start <SCRIPT> tag using language attribute

<script language="JavaScript">

type
The type attribute is required in the W3C HTML 4.01 standard. However, most browsers tend to ignore this requirement. The value of type has to be a valid MIME type.

example - start <SCRIPT> tag using type attribute

<script type="text/javascript">

src
Scripts can be included in separate files. The start and end <SCRIPT> tags are still required, but everything between them is ignored when src is present. For JavaScript, the code should go into a file with a dot-js extension. The contents of that file should not include any HTML tags, so that means no comment (<!-- and -->) tags. However, browsers will usually allow the comment tags before and after the JavaScript code.

An HTML file can use one or more dot-js files. Each needs its own <SCRIPT> tag.

The value for the src attribute is the path and file name to find the dot-js file. If the file is in the same directory as the HTML page that will use it, then just the file name is needed.

example - contents of foo.js

var x = 'value of x'; // set a variable
alert(x);             // display variable in a popup box.

example - start and end for <SCRIPT> tag using src attribute

<script type="text/javascript" src="foo.js"></script>

Variables

Variables in JavaScript are loosely typed, so a variable can store any data type JavaScript supports. This includes numbers, strings, and booleans (true or false). Many programming languages will require a variable to be declared as a certain data type. But, a JavaScript variable can be set equal to a string on one line. And on the next, set it equal to a number.

Some of the syntax rules for naming variables include: start with an alpha-character a...z, A...Z or an underscore _; the following characters can be alpha, underscore, or numerals 0...9. JavaScript is case-sensitive, so a variable named testing is different from TESTING.

Syntax rules have to be followed, but there are also some naming conventions which are not required, but help keep things consistent. Here are some variable naming conventions. Keep the first letter lower-case. And if the name consists of multiple words, run them together and capitalize each new word.

Some variables may not need to be changed throughout the code. They may only be needed as placeholders. If the value is going to stay constant, you can differentiate these variables by making them all upper-case, and separate different words with underscores. This also a naming convention and not required. The term "constant variable" may be an oxymoron, but they are useful. Constants can replace literal values. Literals are hard coded values. For example, when a variable is set to equal 4, the number 4 is a literal. Using constants will help to make the code easier to follow and understand.

variable naming - example

var a = 1;	// a is declared, and assigned the number value 1
a = "test";	// a is then assigned the string value "test"

var testWithLongVariableName;	// declared using typical naming convention

var NUMBER_OF_STRIPES = 13;	// naming convention in all upper case for constant

Variable Scope

In JavaScript, variable scope can be global or local. Scope is determined by where a variable is declared, and to some extent whether the var keyword is used. Compared to programming languages like C or Java, this is a very simplistic approach.

Global
A variable that is declared outside any functions is global. This means it can be referenced anywhere in the current document.

Local
A variable that is declared inside a function is local. This means it can only be referenced within the function it is declared.

Other notes

If a variable is declared inside a conditional statement, it is still available anywhere following the declaration in the containing function (or globally if the conditional is not in a function). However, it will equal undefined if the condition evaluates to false, unless the variable is later assigned a value.

If a local variable is referenced globally or in another function, a JavaScript error will occur. Depending on your browser, the error may say the variable "is not defined" or "is undefined". This is different from the variable equaling undefined like I mentioned above, because a variable that equals undefined can still be referenced.

variable scope - example

Variable scope and using the var keyword

Other Resources

For more information about JavaScript variables, visit Netscape's Values, Variables, and Literals manual for JavaScript 1.5.

About this page: