Friday 22 June 2012

Part 1 - Introduction

Thousands of sites around the world use JavaScript but it is still not a particularly well known programming language (compared to HTML). If you have seen anything interactive on a website like a calculation, pop-up-window, some web counters and even some navigation systems then you have probably seen JavaScript.

Unfortunately, JavaScript has changed from being a language which improves web sites to a language which destroys them. This is because there are huge JavaScript sites which have thousands of scripts for download. These usually involve things which do not benefit a website at all, like status bar effects and scrolling text which do not add much to a website.

JavaScript must not be confused with Java. Java is a completely different programming language. It is usually used for text effects and games, although there are some JavaScript games around.

So why should you use JavaScript? Well, JavaScript can allow you to create new things on your website that are both dynamic and interactive, allowing you to do things like find out some information about a user (like monitor resolution and browser), check that forms have been filled in correctly, rotate images, make random text, do calculations and many other things.

In this tutorial I am assuming that you understand HTML.

What Do I Need?

You will not need any special hardware or software to write JavaScript, you can just use Notepad or any other text editor. You do not even need to have any special software on your webserver. JavaScript will run on any webserver anywhere! All you will need to do is make sure that you have at least a version 3 browser, as versions of Internet Explorer and Netscape Navigator before this do not support JavaScript, so you will not be able to see your creations.

Declaring JavaScript 

Adding JavaScript to a web page is actually surprisingly easy! To add a JavaScript all you need to add is the following (either between the <head></head> tags or between the <body></body> tags - I will explain more about this later):

<script language="JavaScript">

JavaScript

</script>

As you can see the JavaScript is just contained in a normal HTML tag set. The next thing you must do is make sure that the older browsers ignore it. If you don't do this the code for the JavaScript will be shown which will look awful.

There are two things you must do to hide the code from older browsers and show something instead:

<script language="JavaScript">
<!--Begin Hide

JavaScript

// End Hide-->
</script>
<noscript>

HTML Code

</noscript>

As you can see this makes the code look a lot more complex, but it is really quite simple. If you look closely you can see that all that has been done is that the JavaScript is now contained in an HTML comment tag. This is so that any old browsers which do not understand <script> will just think it is an HTML comment and ignore it.

Because of this the <noscript> tag was created. This will be ignored by browsers which understand <script> but will be read by the older browsers. All you need to do is put between <noscript> and </noscript> what you want to appear if the browser does not support JavaScript. This could be an alternative feature or just a message saying it is not available. You do not have to include the tag if you don't want anything shown instead.

Commenting

Something you might have noticed in the example above was that on the line:

// End Hide-->

There was a:

//

which does not usually appear in an HTML comment. This is because it is the sign for a JavaScript comment (it was included here to stop the browser from thinking the closing HTML tag was a piece of JavaScript).

It is very important in JavaScript, as with any other programming language t
o include comments, especially if you want others to learn from your code. It is also useful for including a copyright message.

What Now?

Now you have learnt all about the basics of JavaScript. You know how to declare a JavaScript and how to make it backwards compatible. In the next part I will show you how to write some code to actually do something.

No comments:

Post a Comment