Breadcrumbs

Too Easy JavaScript - Introduction [1]

Over the course of many years web browsers have added support for dynamic capabilities alongside the typical (X)HTML. JavaScript appeared in December 1995, originally titled LiveScript. JavaScript is a web browser interpreted scripting language that allows the user to embed small programs into web pages that can react to events occurring in the web browser.

This begins the first of an eight series column featuring the fundamentals of getting started with JavaScript.

Including JavaScript in (X)HTML

You can include JavaScript in (X)HTML either inline or external. Both make use of the <script> tag, with the required attribute of type. To store JavaScript externally you have to save the script as a .js file and include it in the <head> or <body> tags of your document:

Code: XHTML

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

The src attribute specifies the location of the JavaScript file using relative or absolute file paths. To declare your JavaScript internal you use the <script> tag:

Code: XHTML

<script type="text/javascript">
// <[CDATA[
    alert("This is JavaScript!");
// ]]>
</script>

In the above example we start by declaring the <script> tag. The next line tells the XML parser that all characters inside the CDATA block should be treated as literal characters, and not parsed as XML. This is only relevant if you serve your web page under the application/xhtml+xml MIME type.

If you only plan to serve your web page as HTML then you can enclose your JavaScript in HTML comment tags:

Code: XHTML

<script type="text/javascript">
<!--
    alert("This is JavaScript!");
//-->
</script>

The comment tags are ignored by most web browsers, and they'll still execute the code. Their purpose is to hide JavaScript from browsers that are yet to support it, which are few in numbers.

Adding Code Comments

While scripting it is often useful to place an explanation or comment in your code, that won't affect the output. You can place comments easily in JavaScript, and they have no effect on the code. The browser's parser will simply ignore the comment.

Code: JavaScript

<script type="text/javascript">
// <[CDATA[
    // This is a one line comment
    /* This is a
    multilined comment */
// ]]>
</script>

Above, you see the two methods for adding a comment. Comments are a great method of documenting what your code does, for later reference.

You may have also noticed that we begin the CDATA declaration with a JavaScript comment. This is so the XML parser still picks up the declaration, but JavaScript ignores it.

Screen Output

You can write text to a page using a built in JavaScript function building off of the document object. document.write() enables you to output data to the user's monitor:

Code: JavaScript

<script type="text/javascript">
// <[CDATA[
    // Outputs to the screen
    document.write("Hello World!");
// ]]>
</script>

Using document.write() you can output HTML and text. You can now bridge the gap between HTML and JavaScript, by outputting your dynamic output directly as HTML.

The Magic Semicolon

Is it recommended to end JavaScript statements with a semicolon? Yes. Is it required? Absolutely not.

JavaScript is one of the few programming languages that doesn't require the semicolon to end a statement. Although, placing semicolons to end a statement is a good practice and keeps your code more uniform.

The only areas where semicolons are required is when you'd like to place more than one statement on the same line. Otherwise you can completely leave them out.

People Turn Off JavaScript

The largest issue with JavaScript is that many people choose to disable it. This renders all of your JavaScript useless, meaning it won't execute. People turn off JavaScript for their various reason, most believing that every cookie on their computer will destroy everything. In order for your website to be accessible to everyone, you must take certain precautions.

You shouldn't create pages that solely rely on JavaScript. Rather, you should make the JavaScript enhance the page, so that those without JavaScript won't have problems. JavaScript has a lot of potential for your web page, but you should use it sparingly.

(X)HTML provides a useful tag for dealing with the JavaScript dilemma. <noscript> will display a message if the user doesn't have JavaScript support:

Code: JavaScript

<script type="text/javascript">
// <[CDATA[
    document.write("You have JavaScript support!");
// ]]>
</script>
<noscript>You don't have JavaScript support.</noscript>

<noscript> can be a useful alternative for areas of your website that rely heavily on JavaScript. You should always include it if the script executes a visual.

XHTML and JavaScript

Sadly, XHTML (served under the application/xhtml+xml MIME type) doesn't mix well with JavaScript. Two problems evolve - you have to declare the JavaScript CDATA and you cannot directly output using document.write().

XHTML and JavaScript's main issue is the inability to use document.write(). Rather, you must use DOM functions to output to your web page. If you're just starting out with JavaScript it would be best to use text/html until you fully grasp all of JavaScript's concepts.

Summary

JavaScript is a vast scripting language brining many dynamic capabilities, to the otherwise boring web pages, without using server scripting. We'll continue in Part 2 by exploring how to store data using JavaScript.