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.
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.
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!
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 window.open() method. Inside the window.open() 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.
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.
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.
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.
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! :-)
|
