JavaScript Tutorial: The Basics of JavaScript

There are many terms that you will have to learn when it comes to JavaScript. However, you don't have to learn them right now, before you do any scripting. It is easier to learn the terms as you go along, as this will give you a greater understanding of them. So, we will not be throwing terms out there to confuse or frighten you. However, there are terms that you will need to know - and will come to know - and they need to be noted before you can go any further.

With that said, the first thing you need to know is that JavaScript 'thinks' in terms of objects. DOM, which stands for Document Object Model is the foundation of JavaScript. Don't panic. Just focus on the word object. You know what an object is. It's a thing. Your computer is an object. Your desk is an object. Let's look into the computer screen, and you will see other objects. A browser window is an object. A web page is a document, and a document is an object. A graphic on a web page is an object.

As you can see, many objects contain other objects. For instance, the desk contains the computer, which contains the web browser window, which contains the web page, which contains the graphics.

Now, each object has properties. For instance, a web page has a background color, and it uses a certain font. These are properties. But, the background color could also be considered an object, with the property being the actual color. Don't feel confused. For now, all you need to know is that there are objects and objects have properties.

JavaScripts cause actions to occur on or with objects. These actions are called methods. These methods may be referred to as functions. Functions are methods that you set up to perform a certain task. Method and Function are pretty much interchangeable in this way.

There are just a few more terms to note. Don't run away! In JavaScript, we also have events, and event handlers. An event is something that happens. In the world of JavaScript, an event is usually something that the website visitor did, such as moving their mouse over a link. That is an event. An event handler comes into play when the event occurs. The event occurs and the event handler calls a JavaScript or reaction into play.

You will learn some other important terms as you go along. Remember, you don't have to cram all of this into your head right now. These are the basic terms that relate to JavaScript, and you will get to know them as you move forward in this tutorial.

So, let's move forward and write our first JavaScript.

Writing Your First JavaScript

Open your NotePad or favorite text editor, and let's get started. The first thing you are going to learn is how to make JavaScript write something to your HTML document. Within your text editor, write or copy and paste the following script:

This script will write the words, HI Everybody on your webpage. Now, this is a very simple script, and you can use HTML to write words on your page, but the basis of this script will be very important later on, so it is important to learn this one. Let's look at each element of the script.

First, we are telling the web browser that it is about to see and interpret JavaScript with this tag:

This is an important tag. The browser needs to know what it is about to see. The next part is really important as well. You see, not all browsers recognize JavaScript for what it is. They just see it as text that should be printed on a page, as it is. You have to prevent this from happening, by hiding the JavaScript from older browsers. This is done by using HTML comment tags, as seen below:

Now, with the JavaScript hidden inside the comment tag, older browsers will ignore it, but newer browsers will see it for what it is, and if the browser is JavaScript enabled, it will run the script. If the browser is not JavaScript enabled, nothing will happen.

The next part of our script is:

The document is an object. We discussed this earlier, remember? Write is the method (or function) that we want to use on the document. It is presented with a period between the two words: document.write. The write method is actually presented as write() with what you want written inside the parentheses.

The text that we want written is called a string in JavaScript, and it is therefore enclosed in quotation marks. It is presented as this:

Note that we have also added a little HTML into the mix with the use of tags that will force the text to be printed in italics. We've written the object, the method, and the string so that now the script has everything it needs to run. We've also closed or ended the comment, and then the script with the following:

Congratulations! You've written your first JavaScript, and it is the basis for so many other wonderful things that can be done with JavaScript. Be sure that you paste this code into an HTML document, and load it up to your web server so you can see how it works.

Dealing With Non-JavaScript Enabled Browsers

As stated in the previous lesson, if a user's browser is not JavaScript enabled, the script can't run. Often, nothing will happen, but it is possible that the user will get error reports. This can be prevented by using the <noscript> JavaScript tag. It looks like this:

So far, you have learned about objects, methods, and strings. You have learned how to write a very basic JavaScript, and you have learned how to hide JavaScript from old browsers, and how to handle browsers that do not have JavaScript enabled. Let's take a closer look at events now.

Previous	Next

  JavaScript Tutorial: An Introduction to JavaScript
  The Basics of JavaScript
  JavaScript Events
  JavaScript Variables and Arrays
  JavaScript Statements
  JavaScript Functions and Methods
  JavaScript Errors
  JavaScript Food Chain
  Writing JavaScript Code
  JavaScript Object Reference
  JavaScript Events Reference
  JavaScript Functions Reference
  JavaScript Math Object Reference
  JavaScript Array Object Reference
  JavaScript String Object Reference
  JavaScript Date Object Reference