JavaScript is Easy!

Advanced Webpage Design

JavaScript Lesson 1

JavaScript: Lesson 1

JavaScript is not for computer nerds or advanced programmers only! It is actually a pretty easy computer language once you get the hang of it! You only need Notepad or a similar text editing program to do JavaScript. Before you start this lesson, make sure you understand HTML first. The reason for this is because I won't be explaining most of the HTML tags in great detail. If you need a refresher, see my lesson entitled " Writing Your Own WebPages (HTML)." Let's get started.

JavaScript Sample Code

First, create the simple HTML page shown above. Save it to your desktop as "test.html" (Make sure you use this name or it won't work!) There is nothing special about this file. It is only a page with a red background needed for the JavaScript example. Next, copy the HTML page shown below, and save it to your desktop as "lesson.html" (Again, make sure you use this name only!). If you notice, this HTML page also includes JavaScript.

JavaScript Lesson 1

Click here to see it work

As I mentioned before, we won't go into all of the HTML tags. Most of these you're probably already familiar with. The first line you should look at is the one that says: <SCRIPT LANGUAGE="JavaScript"> This HTML tag tells the browser that what follows is not HTML, but a script, this one being JavaScript.

Not all Web browsers are capable of handling JavaScript. For this reason we need to hide the actual script from browsers that don't. The <!-- opening comment tag and the //--> closing comment tag hides the JavaScript code from those browsers. Browsers capable of handling JavaScript only ignore comments or plain HTML inside these comment tags. They do not ignore the JavaScript code itself. This is where JavaScript code is normally put.

The first line of code declares, (or creates), a variable. By using the JavaScript keyword var, we are telling the browser we want to create a variable. We are going to call this variable your_words, and assign it the value of the text string "I Am Changed!" We end the line with the semicolon ";". The semi colon is optional, but I like to use it. It's required in some computer languages. It's good practice to use it and makes your code look more professional.

The next line defines the first function. The keyword function is used to tell the browser that this will be a function. We will call this function your_window. Inside the parenthesis following the function are what is called the parameters of the function. There may not be any parameters, like in the second function, or there may be one or even more parameters. Parameters are used to pass information from the function call to the function itself. The function call for this function is down in the HTML code. It is going to pass the value of an html file called "test.html" to the function just like you'd pass a football. When the function receives the information it will store it in the variable called page. You can name variables just about anything in JavaScript as long as they are not keywords or begin with numbers!

JavaScript Lesson 1

The function statements are enclosed with two braces, an opening brace "{" and a closing brace "}". The first statement creates a new window object called "window_name". The second statement changes the value of the text input located in the form in the "lesson.html" file.

The new window object is created with the method. Inside the method are three parameters. The first parameter is the location of the HTML file for the new window. Since we passed the "test.html" file to the function and used the variable page to store it in, we can simply use page as our first parameter. We could have also used "test.html" itself, but in order to show how easy it is to pass items to functions, I chose to use the page variable. Notice also that when you're using a variable you do not use quotation marks. If you want to experiment with replacing the page variable with "test.html" you will need to enclose "test.html" with quotation marks.

The next parameter gives the window a name for use with HTML references. This is NOT the name of our window object! The name "html_name" is used only with HTML references like a frame or HTML target is. When referring to the window with JavaScript, we will use the object name "window_name". (Notice that window_name equals the new window.) The third and last parameter defines the characteristics of the new window. There are several other characteristics we could have used, but here we will only set the height and width.

JavaScript Lesson 1

The second statement within the function is used to reset the value of the text input located in the "lesson.html" file. In JavaScript we must point to the location of each item that we are dealing with. Notice how the value of input is located within the browser window in the picture above. Each of these targets has a name used to identify them.

First we specify the Web browser window. Window is the top location, or starting point. It contains everything inside the browser window. Next we point to the document inside the window, which is the "lesson.html" file. Inside the "lesson.html" file we need to point to the form object that I chose to name "form_name". (I could have named it any other name as well). We must also locate the specific input within the form. This time it's easy because there is only one input. I named it "input_name". (Very original, right?) ;-) Since we want to change the value of this input object, we must also reference the value. We assign the value of the variable "your_words" to the input's value element. We could have assigned it a value like, "Why did you change me?" using quotation marks, but when using variables you don't use quotation marks.

Summing everything up: we referenced the window, the document ("lesson.html") inside the window, the form ("form_name") inside the document, the input ("input_name") inside the form, and finally the value of the input. Look over the picture above and make sure you understand everything before we continue.

JavaScript Lesson 1

The second function has no parameters. We call this function "to_window". It's always a good idea to define functions and variables with names that are descriptive. It makes the code much easier to read and follow. The function is fairly simple. It first references the browser window. Then instead of the "lesson.html" document, this one refers to the new window object we named "window_name" instead. The next reference is to the location of this new window. To change the location of window_name's window, we simply assign it a new location of, "lesson.html" It's that easy! That's the end of the JavaScript code. Now let's look at the HTML part.

JavaScript Lesson 1

First notice that I gave the FORM a name. I called it "form_name" in order to reference it with JavaScript. Inside the form I also gave the input tag a name for the same reason. I named it "input_name". This is a text input with the value "Change Me!" When you first open this HTML file, it will begin by displaying "Change Me!" in the text box.

JavaScript Lesson 1

The next thing to notice is the A tag. Inside the A tag are the calls to the JavaScript functions. The HREF of the A tag will call the "to_window()" function when the link is clicked like an ordinary link usually opens a new HTML file. The next call uses the onMouseOver event handler. When the cursor is moved over the A link it executes the event, which in this case is the "your_window()" function call. The call to the "your_window()" function contains an argument that will be passed to the function when executed. The argument in this case is the "test.html" file. The quotation marks are required to pass this file! Notice that I used the single quote quotation marks. I did this because I used the double quote quotation marks to enclose the function call. I could have reversed it and used single quotes to enclose the function call and double quotes to enclose "test.html", but be careful to NEVER overlap them! If you overlap them your code won't work.

This concludes the JavaScript lesson. Launch the "lesson.html" file, and play around with the code. Change the form and input names, making sure that you also change them inside the script as well so that they can be properly referenced. Change the value of the variable "your_words". Rename "your_words" to something else, but when you do, don't forget to change the name of this variable inside the "your_window()" function also. Rename the functions. Remembering that you must also rename the function calls as well! Add some of your own inputs to the HTML file. Add more functions to the script. Add other statements to the functions. The more you play around, the more you will learn. After you become comfortable, try using other JavaScript events like onMouseOut and onClick.

Remember this lesson is only an introduction to JavaScript. There are lots and lots of other things you can do with JavaScript! The key to learning how to code is to code! :-) Experimenting is the best teacher! As with HTML, view the source of pages that have JavaScript! Copy these scripts and try altering them. Buy a good JavaScript reference book. The Netscape JavaScript Reference is a good online reference! Netscape is who developed the JavaScript language. Good luck and happy JavaScripting! :-)

~ JavaScript Links ~

Lisa Explains It - Javascript

Netscape JavaScript 1.1 Guide

HTML Goodies Javascript Primers

Webteacher JavaScript Tutorial

JavaScript Kit Reference

W3Schools Tutorials

The JavaScript Source

Back to Learn