Basics of Javascript

Javascript is intended to add interactive elements to HTML pages. Javascript is a scripting language with the ability to perform calculations as well as modify HTML elements. Javascript is not related to Java; there are some similarities between them, like the syntax and grouping objects into hierarchies.

Like all elements of a web page, Javascript is embedded inside of tags. In this case its a script tag, you have to have a type attribute to specify the type of script to run. For example:

<html>
  <body>
    <script type="text/javascript">
      document.write("Hello World!");
    </script>
  </body>
</html>

The text inside the script tag, “document.write(”Hello World!”);”, is the Javascript. All Javascript lines end with a semi-colon, as shown here. Javascript is built upon objects, the line shown here makes use of the document object. That object represents the HTML page being displayed. We’re calling the write() method of that object in order to write some text onto the page.

If you strip out the Javascript that page is blank. So you can see how the Javascript is effecting that page.

Javascript allows you to create variables, both scalers and arrays. Variables are declared with the var keyword, and can be named using numbers or letters. You can initialize the variable with some value when its created. For example: var Num1 = 5;.

Arrays are a type of object. Objects are special variable types that must be initialized by a specific function for that object. They also must be declared as a new instance of the object using the new keyword. Arrays use the Array() function, creating an array looks like this: var MyArray = new Array();.

To get to elements of the array place the index isnide of square brackets, [ ], just after the variable name. The indexes can be text or numbers and they don’t have to be in order. If you assign a value to an index that didn’t exist it will be added to the array.

var Arr = new Array();
Arr[0] = 15;
Arr[5] = "Hello";
Arr["Text"] = 37;

All of the basic math functions are available; addition (+), subtraction (-), multiplication (*), division (/) and modulus (%). It also includes increment and decrement by 1 opperators, ++ and –. All of these lines assign the variable Num to 5:

Num = 1 + 4;
Num = 5 * 1;
Num = 20 / 4;

The plus sign also works for string concatenation. For example:

var Str1 = "Hello";
var Str2 = "World!";
Str1 = Str1 + Str2;

When that code completes Str1 has the value “HelloWorld!”; there wasn’t a space in any of the values used, so the final result doesn’t include one either.

As you can probably imagine Javascript can really clutter up the HTML code when its tucked into the body tag as shown before. Normally the Javascript is stored in the header as functions, which are then called from inside the body. Sort of like this:

<html>
  <head>
    <script type="text/javascript">
      function WriteText()
      {
        document.write("Hello World!");
      }
    </script>
  </head>
  <body>
    <script type="text/javascript">
      WriteText();
    </script>
  </body>
</html>

That doesn’t look much better than the first example; in fact it looks worse. Theres two reasons for that. First, the function is very small; if the function was 10 lines or so then moving it out of the body would be helpful. Second, this isn’t really how Javascript is typically done.

Javascript code thats in the body inside script tags is executed when its encountered. A better way to make use of Javascript is to use the built in events that other tags have. For example there is an OnLoad event, this event triggers when the page has finished loading. Calling a Javascript function from the event looks like this:

<html>
  <head>
    <script type="text/javascript">
      function WriteText()
      {
        document.write("Hello World!");
      }
    </script>
  </head>
  <body OnLoad="WriteText();">
  </body>
</html>

The OnLoad event is only supported by the body tag. There are other events that are supported by just about all tags. For example the OnClick event which happens when the user clicks on an HTML element; or the OnMouseOver or OnMouseOut events which happen when the mouse moves over our out of an HTML element.

All of the events work the same way. You add them as an attribute whose value is the Javascript to execute. Typically you’ll want to create functions inside the head of the page then call those functions as events in the body of the page.

You can also store the Javascript functions in a separate file and have the browser load them from there. This is can be done by adding a src attribute to the script tag. Here is an example of what that would look like:

<script type='text/javascript' src="http://www.mindlence.com/javascript.js">

Theres a lot more to the language that whats I’ve shown here. Getting into all the available functions, objects, and events available would make this article extremely long, and I just wanted to cover the absolute basics.

Leave a Reply

© 2007 Mindlence