Ken Walsh

Web Page Design Foundations

6. Introduction to JavaScript

JavaScript is primarily a browser scripting language, although it has been adapted for other uses. A browser scripting language is a computer language where the code is included with or referenced by the html page and is executed by the browser, after being downloaded from the web server. The code essentially makes the page dynamic in that it can take action on a users inputs, check for accuracy in a form, make calculations based on a user's input, or change the content or graphics on the page after it has downloaded. A Short History of JavaScript describes where the language came from and how it has evolved.

Note that JavaScript is not related to the popular server-side programming language, JAVA.


The JavaScript code is placed within HTML script tags to seprate it from the HTML language. The scrip tags can be in either the head or body section of the html document, depending on when they should be executed. The scripts in the body section are executed as they are encountered while displaying the page while the scripts in the head section are not executed until called upon. The scripting language can also be in a separate text file with a js extension. When it is a separate file, it is included in the src property of the script tag and executes the same way as inline scripts. The advantage of the external file is that it may contain common scripts that are used on multiple places.


A script tag referencing an external file would look like:


<script src="myScript.js"></script>

Below is an example of the document.write command used to display output to the page, followed by it output. Notice that what is in parenthesis is what is output and it includes HTML tags. Since the output is writing to the html page, it must still be HTML compatible. In this case the p tags are being written by the JavaScript and the browser will then interpret the p tags to display the text correctly.


The semi-colon ends every JavaScript line.



    document.write("<p>A paragraph written by the script.</p>");


A paragraph written by the script.


Now look at a second example that has the exact same results. The difference is the p tags are in the HTML document, but not in the script. since the out put of the document.write is inserted in the HTML file, the resulting HTML is the same as the previous example.




    document.write("A paragraph written by the script.");



JavaScript can have variables and do math so that you can vary the output, as well. In the following script, the var command is used to declare a variable. The equal sign (=) is used to assign a value to the variable and the document.write is used to output the paragraph as before. Notice the document.write uses the comma to separate different out puts. Plain text is written between quotes, while the variable x must be outside of quotes so that its value is written.



    var x;

    x = 5 + 6;

    document.write("<p>5 + 6 = ", x, "</p>");




5 + 6 = 11


A list of mathmatical operators like + can be found at JavaScript Operators.


If the math were to be used in more than one place or use different values, it would be better to make it a function, rather than repeating it. A function allows for a section of code to be declared once and called as many times as needed. It also allows the variables to be substituted so the function can produce different results for different input.


The example below shows the use of a function declared in the head section of an html document. Functions can be declared in either section or the body section, but since they are not executed until they re called, the head section is the more common place. The word function is a JavaScript keyword for the function declartion. AddSix is the name chosen for the function. The y is a variable being passed to the function when it is called. That variable allow the function to be called another time with a different value. The return command defines what value will be the output of the function. The output replaces the function call in the document.write line.




    function AddSix(y) {

       var x;

       x = y + 6;

       return x;






       document.write("<p>5 + 6 = ", AddSix(5), "</p>");



The output is the same as the last example:


5 + 6 = 11


Math Object Properties


Sometimes when doing math special constant terms are need like PI, for example. JavaAcript provides those as properties of the math object. The following code wite the value of PI.



   document.write("<p>PI= ", Math.PI, "</p>");


The output is:


PI= 3.141592653589793


Other Math object properties can be found at JavaScript Math Object.




Like most programming languages, JavaScript supports iteration so that lines of code can repeat as necessary. Below shows the use of the for loop to repeat the document.write line 10 times. Notice the for statement has three parameters. The first defines the variable i and sets it to an initial value of 0. The second parameter, separated by the semi-colon, tells when the loop should continue, in this case, as long as i is less than 10. The third parameter, i++, says to increment the i for every loop. Note if you forget to increment i, then i would always be less than 10 and the loop would go forever!


for (var i = 0; i < 10; i++) {

   document.write("<p>",i," + 6 = ", AddSix(i), "</p>");


The document.write output with the for loop:


0 + 6 = 6


1 + 6 = 7


2 + 6 = 8


3 + 6 = 9


4 + 6 = 10


5 + 6 = 11


6 + 6 = 12


7 + 6 = 13


8 + 6 = 14


9 + 6 = 15


In addition to the for loop, there are while and do/while variations. See more examples at W3C JavaScript Loops.


Back to Table of Contents