Next Page

JavaScript Tutorial

JavaScript is a programming language used to create dynamic content on the web.

This tutorial goes over basic JavaScript functionality.

Using JavaScript

JavaScript code can be added to HTML pages by either using the <script> tag or using an extrnal JavaScript file.

Using <script> Tag

To add JavaScript code directly to HTML pages using <script> tag, add the JavaScript code between <script> and </script> tags.

<!DOCTYPE html>
<html>
    <body>
        <script>
            document.write("Placing Some Text!");
        </script>
    </body>
</html>

The above code will display the following:

Placing Some Text!

In the <script> tag, type attribute can be used to specify the scripting language. For JavaScript it would be set to text/javascript. The above exmaple, with type attribute, now look like below:

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript">
            document.write("Placing Some Text!");
        </script>
    </body>
</html>

Since HTML 5, the type attribute is optional and defaults to text/javascript.

Using External JavaScript

JavaScript code can also be added to external files. With external JavaScript files, same code can be reused in multiple webpages. It will also separate HTML and JavaScript codebase, which makes it easier to manage and read. External JavaScript files get cached by browsers which can improve loading speed.

External JavaScript files end with .js file extension. To use an external file, use <script> tag with the attribute src containing the JavaScript filename. 

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript" src="myExternalFile.js"></script>
    </body>
</html>

The myExternalFile.js file can then contain the javascript code. Do not place the <script> tag in external JavaScript files.

document.write("Placing Some Text!");

If the src attribute only contains the filename, then it will look for the file within the same directory as the webpage. In the below example, the myExternalFile.js file will be retrieved from same directory as the webpage.

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

Directory names can also be added to indicate where the JavaScript file resides. In the below example, the myExternalFile.js file will be retrieved from examples directory.

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

src attribute can contain URL of the JavaScript file to load.

<script type="text/javascript" src="http://structfeed.com/examples/hello.js"></script>

Where To Place JavaScript Scripts

JavaScript scripts can be added in <head>, <body> or both <head> and <body> sections.

In below example, the script is inside the <head> tag. The script inside <head> tag will get loaded before rest of the page gets displayed.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            //will alert the text before page loads
            alert("Alert Some Text!");
        </script>
    </head>
    <body>
        <h1>Test Page</h1>
    </body>
</html>

In below example, the script is inside the <body> tag. Scripts inside the <body> tag will run as the page loads.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>Test Page</h1>
        <script type="text/javascript">
            //will alert the text after page heading loads
            alert("Alert Some More Text!");
            //after alert, the p tag content below is displayed
        </script>
        <p>Some more text.</p>
    </body>
</html>

In below example, the script is inside the <head> and <body> tags.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            //will alert the text before page loads
            alert("Alert Some Text!");
        </script>
    </head>
    <body>
        <h1>Test Page</h1>
        <script type="text/javascript">
            //will alert the text after page heading loads
            alert("Alert Some More Text!");
            //after alert, the p tag content below is displayed
        </script>
        <p>Some more text.</p>
    </body>
</html>
Next Page