Welcome to my tutorial on Java Script. I hope this helps you have a fun learning experience in the world of web programming. Java Script is an object-oriented web scripting language used within an HTML document.Object-oriented means that the language uses objects, and manipulates their behaviors. Objects in Java Script include the document the web document), forms, form members (text boxes, option buttons, etc.), windows etc. I will explain object-oriented programming in later lessons. Java Script was developed by Netscape Communications in 1995. Do not confuse the language with Java. Java is another programming language which was developed by Sun Microsystems in 1995. Java is a programming language commonly used to create applets, which are sometimes called Java Applets. These are programs written in Java that can be embedded on a web page within an HTML document. Not all Java programs are written for web pages. Many programs written in Java are run from the desktop environment. Java is a universal language, meaning it is compatible on nearly all operating systems. It has become increasingly popular in small electronics such as mobile phones. A Java program is written in a plain text file with a .java extension. This file must then be compiled into byte-code which the computer can interpret and execute. This byte-code is stored in a file with a .class extension. All programs written in Java must be compiled and have a file with a .class extension in order to run.
The vast difference between Java and Java Script is that Java programs must be compiled using a Java compiler before the program is executed. Java Script is written in an html document and the code is interpreted by an html interpreter, such as a web browser. Each line is compiled by the browser before interpreting it on the web page. Similarly to a program which is compiled though, one small error in the coding can cause the entire page to not work. Java Script is very similar to Java in terms of syntax (rules of the programming language or way code is used). Much of Java Script is derived from Java, hence the name Java Script. If you know Java, Java Script should be very easy to learn. That's about all you need to know about Java Script and its history, so let's learn some coding.
I should also mention that is is good to have some basic knowledge of HTML. HTML is an easy language to learn. Even if you are new to HTML, most of the HTML code we write should be very straight forward. The first thing we need to do is select a text editor. I recommend you use Text Pad by Helios Software solutions. You can download it from their website HERE. Once you have selected a text editor, we may begin.
Type the following lines in a blank text document:
<html>
<head>
<title>My First Java Script</title>
<Script Language = "JavaScript">
<!--
// -->
</script>
</head>
<body>
</body>
</html>
This is a simple structure of an html document. It must begin with the <html> tag, and end with the </html> tag. The tag <head> indicates the header portion of the html document. An HTML document executes the code written between these tags first, then it executes the code between the <body> and </body> tags. Most Java Script is written between the <head> and </head> tags. The tag <Script Language = " JavaScript"> begins the declaration of Java Script coding. That is, the code from here down to the </script> tag is all Java Script. However, the one line that is not Java Script between the lines is the "<!--". This line is HTML code. This begins an HTML comment. Many people writing Java Script may write "<!-- Block script from browsers not supporting Java Script". If the browser does not support Java Script, the code we write between the "<!--" and the "// -->" would not execute. By putting these tags here, older browsers treat the entire script as an html comment.
HTML comments are declare with the "<!--" and they end with the "-->". The comment expands through all the lines until the "-->" is found because this ends the comment. Java Script comments are made with the "//" and multi-line comments begin with "/*" then continue until the "*/". As you see, we use the two slashes "//" above the </script> tag. If the browser supports Java Script, it will comment the "-->" because the two slashes are before it, thus voiding the multi-line comment it creates. If the HTML comment is commented out by the Java Script comment, then the script is read and interpreted by the browser. So in this case, the only line commented by the HTML comment is the line after the tag <Script Language = "JavaScript">.
Let's get this page to do something with Java Script.
Between the comment tags (<!-- and // -->), type: document.write("This was written using Java Script.");
To use this script, you must first save the file. I suggest you save it on the desktop for ease of execution. If you are using Text Pad:
Choose File > Save.
In the Save as type box, choose HTML (*.htm; *.stm).
Enter a name to save the file as in the file name box.
Click Save.
On the toolbar beneath the menu's (File, Edit, Search, etc.), click the globe.
When the mouse is over the button, some tool tip text will appear (the text that tells user what the button does). It will say View in web browser. This opens the file you wrote in the default web browser. If you are using some other text editor that you are unfamiliar with or that has not View in Browser option, find the file that you saved and double-click it. This loads the file in the default web browser as well.
Test your page. You should see the sentence This was written using Java Script on the page. As it says, write on the document "This was written using Java Script". This code explains itself, but I will explain the core of how this works. As I mentioned earlier, Java Script is an object oriented language. This line of code uses the write method of the document object. A method is a way of using the object. We are using the document to write on. For instance, a ball may have a method kick or throw. Within Java Script's platform is a class called document. This class is simply an object or group of objects. The class document has several methods and properties coded into it within the platform. This code determines how each method or property executes. A property is a part of an object. The class document has properties such as title (the web page title) and links (links on the web page). These are no different than any object in the real world. In context, we can say Joe owns a blue car with four doors and a spare tire. To put this in programming terms, we may say object Joe owns property car. The car has attribute blue. Even further into this example, we may say the object car has property door and property tire. The limitations are endless.
Notice that at the end of the line is a semi-colon. If you remove the semi-colon from the end of the line, the code should still work. Java Script does not require you to put a semi-colon at the end of each line. However, it is good programming practice to do so. If we were using C++ or Java, the use of a semi-colon at the end of each line is required. You will find that using a semi-colon is not overlooked by the browser. Using a semi-colon at the end of a statement could also allow us to enter more statements on the same line, although the code would become messy and hard to read.
The document object in Java Script has several other methods and properties. They include:
Property:
alinkColor (document.alinkColor): The color of an active link on the document. When a link is being processed, it changes to the color specified in this property
bgColor (document.bgColor): The color of the document's background
fgColor (document.fgColor): The color of the document's foreground (the text and other objects)
title (document.title): The document's title
location (document.location): The document's location (web address)
lastModified (document.lastModified): The time and date of the document's last modification
As you can see, these properties all store some sort of information (color, location, title etc.). Many of these properties can be written to as well. We could say document.title = "Page 1";, which would set the title of the page to "Page 1".
Method:
write (document.write()): Use to write something on the web page.
writeln (document.writeln()): Use to write something on the web page and add a carriage return at the end of the line.
Let's write some more code.
Below the line we entered earlier, enter:
window.alert("Now we are learning Java Script!");
As the code indicates, this makes the window (the web browser) display an alert with the text indicated in the parenthesis. We could have just entered alert("Now we are learning Java Script!"); instead of entering "window." in front. I just wanted to show you that the method alert() is part of the window object. Most properties of the window object can be modified only by typing "window." first. However, alert() is a method of the window object, not a property.
Let's learn how to do something else. Now we are going to change the color of the web page.
Go to the end of the <body> tag in the document we have in our document and press ENTER.
Type the following lines:
<Script Language = "JavaScript">
<!--
document.fgColor = "ffffff"; // white
document.bgColor = "000000"; // black
alert("");
document.fgColor = "000000"; // black
document.bgColor = "ff0000"; // red
alert("");
document.bgColor = "00ff00"; // green
alert("");
document.bgColor = "0000ff"; // blue
alert("");
document.bgColor = "ffff00"; // yellow
alert("");
document.bgColor = "ff00ff"; // purple
alert("");
document.bgColor = "ff7f00"; // orange
// -->
</script>
Be sure that you entered all this code between the <body> and </body> tags. In this example, we use Java Script to change the color of the web page's foreground and background. I had you enter alert(""); because this color transition happens so fast that if we did not use something to interrupt each color change, we can never see each color. As you notice when you run the page, the web page's title is "New Title", the page has the text Welcome to Java Script! What shall we do now? on it, and we see an alert displaying Now we are learning Java Script! This is the code we entered earlier in the header portion of this web page (the portion between the <head> and </head> tags). Web pages always execute the code between these tags before any other code. When we learn to write functions later, they are written between the Java Script tags between the <head> and </head> tags.
The code we entered simply changes the document's background color property (bgColor) to a specified value and the foreground color property (fgColor) likewise. The value that we specify is written in Hex, or Hexi-decimal. We also may have simply entered "purple" or "red", but using Hex format gives us a much greater range of colors. You may notice in the color spectrum selector in many graphics tools such as Photoshop that there is a box with six digits. This is the Hex format for the selected color. Entering the hex format of the color you have selected from a color spectrum into the document's fgColor or bgColor property sets it to that color.
I hope this page helped you understand how Java Script works. Continue to Page 2 to learn some programming fundamentals.