10/11/2009 Learning JavaScript - Writing and Testi…

S to p Mis s ing Ca lls W hile Y o u' re Online !

Get the details on the CallWave Internet Ansering Machine
FRE E 3 0 -d a y Tria l in US

Writing and Testing Your First Script

(Lesson 2)

Ok, how are we doing on time? We have a lot to cover today and I don't want to
keep you here too late. So let me look at my clock and see what time it is
8:32:18 PM . Oh, it is only a little after 8:25, so we still have plenty of
time to get into an Introduction of JavaScript.

Opps! Sorry, there I go showing some of the power of JavaScript instead of

teaching it. I will try to keep my mind on the teaching for the rest of this lesson :-)

What is JavaScript?
I have already shown you that JavaScript can be used to display a specific
greeting based on the time of day and can be used to generate a simple clock.

It c a n a ls o d is p la y to d a y ' s d a te a nd time in ma ny d iffe re nt fo rma ts :

October 11, 2009

Sunday, October 11, 2009
11.10.09
More Information Sun Oct 11 2009 20:25:59 GMT+0500 (West Asia Standard Time)
There are only -3571 days until the year 2000.
Good Book to
Supplement It c a n p ut s c ro lling te xt o n y o ur p a g e :
this Class

ase take your time with each lesson and enjoy..... Welcome to Learning JavaScript for Be

It c a n p ut a d ro p d o wn me nu o n y o ur p a g e :

JavaScripts

This menu has been disabled but you will will learn how to do the real thing is this class.

It c a n g e t b a s ic info rma tio n a b o ut y o ur v is ito r a nd his B ro ws e r:

I see you have a computer with windows installed.

Browser: Netscape
JavaScript is enabled!
You are currently in an area whose time is 5 hours ahead of GMT.

It c a n d o s o me c o o l thing s with ima g e s , s uc h a s a ro llo v e r :

It c a n d o p o p -up wind o ws :

Click here to view a JavaScript pop-up window

It is fa s t:

javascriptmall.com/learn/lesson2.htm 1/9
10/11/2009 Learning JavaScript - Writing and Testi…
JavaScript is 100% text, just like HTML is. Therefore it loads
quickly from the server to your computer. JavaScript runs on your
computer and does not have to download any additional
applications to do it's job.

It c a n b e mixe d with H T ML:

You use the HTML tag combination <SCRIPT> </SCRIPT> to

identify JavaScript. This makes it HTML friendly.

It c a n b e a nno y ing to y o ur v is ito rs :

if you use too much.

are more interested in doing cute things rather than adding functionality to
your page
take away some of the browser features that your visitor relies on,
example using the status bar at the bottom of your browser for something
that keeps your visitor from seeing normal messages.

It c a n b e frus tra ting to d e v e lo p :

When you make a mistake and try to trouble shoot. But so can
HTML! Have you ever left off a closing tag such as </FONT> and
spent some time trying to find the mistake among the many tag
combinations on your page.

It is Ob je c t Orie nte d :

JavaScript is composed of what is called objects that have

properties and methods. The window that you are now using is an
object that has properties such as height and width. Methods do
things for us. For instance, I used a JavaScript method to open the
pop-up window in the demo above. The pop-up window contains
a close button. Pressing this button causes another JavaScript
method to run and close the window. We will be talking about
objects in lesson 7.

It is no t J a v a :

Java is a compiled language, i.e. put into machine language

before it gets to your computer. JavaScript is an interpreted
language, i.e. put into machine language on your computer. The
coding in JavaScript is somewhat similar to Java but it is much
less restrictive. For example, as you will learn in lesson 4,
JavaScript allows you to assign any type of value to your
variables. Java does not. Java is a language that experienced
programmers use to develop applications. JavaScript is for us
less experienced web developers. JavaScript was originally
developed independent of Java by Netscape under the name of
LiveScript. Netscape changed the name to JavaScript in 1995 as
a result of an agreement with Sun, the developer of Java.

It is c a lle d js c rip t b y Mic ro s o ft:

Microsoft Internet Explorer browsers have what is called jscript.

The results from a browser that has jscript is basically the same
as one that has JavaScript. The documentation that Microsoft
provides makes it look a little different. Call it what you want to, the
bottom line is that JavaScript works on the Internet Explorer

javascriptmall.com/learn/lesson2.htm 2/9
10/11/2009 Learning JavaScript - Writing and Testi…
browsers.

Our First Script

Let's start our journey into the learning of JavaScript by typing in the following
HTML code. We will add to it and eventually wind up with a working clock similar
to the one above. Of course it will take us a several lessons to get there
because we first need to learn the basics.

<HTML>
<HEAD>
<TITLE>Our First Script</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Our First Script</H1>
</CENTER>
<P>Today is
</BODY>
</HTML>

Save this code as script1.html. It looks something like this when we load it into
our browser by using File/Open on the menu.

Our First Script

Today is

Not very exciting! Lets add some JavaScript to our code. Add the following
script after the line <P>Today is

<SCRIPT Language="JavaScript">
var today = new Date()
document.write(today)
</SCRIPT>

Your html code should now look like this.

<HTML>
<HEAD>
<TITLE>Our First Script</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Our First Script</H1>
</CENTER>
<P>Today is
<SCRIPT Language="JavaScript">
var today = new Date()
document.write(today)
</SCRIPT>
</BODY>

javascriptmall.com/learn/lesson2.htm 3/9
10/11/2009 Learning JavaScript - Writing and Testi…
</HTML>

Save this script and reload it into you browser. It should render something like
this:

Our First Script

Today is Sun Oct 11 2009 20:25:59 GMT+0500 (West Asia Standard Time)

Still not real exciting, but remember this is only our first script and does
demonstrate something you can't do with plain HTML.

The <SCRIPT> tags

As a quick review, a simple HTML tag has the following syntax:

<TAG-NAME [ATTRIBUTE=["VALUE"]....]>

(some text)
</TAG-NAME>

The HTML tags that are used to identify JavaScript are

<SCRIPT language="JavaScript"> and </SCRIPT>. All text between these two
tags is interpreted as JavaScript code by the browser that has the capability
(Netscape 2+ and Internet Explorer 3+). The tag contains one attribute language
that has the value "JavaScript". You will probably find that your scripts will work if
you leave this attribute out. This is not recommended since (1) the attribute
identifies the code as JavaScript to someone reading your source and (2) future
browsers may require that this attribute be defined to distinguish it from other
languages. The book recommended for this class does not enclose
"JavaScript", the value of the attribute, in quotes. However, it is conventional
and recommended that quotes be used.

Most browsers in use today have some version of JavaScript built in. However,
there are still a few in use that don't understand JavaScript. These browsers will
ignore the <SCRIPT> tag but will display the text between the tags. To prevent
this, the JavaScript code is enclosed by a combination of the HTML comment
tag <!-- --> and the double slash ( //) that is used in JavaScript to identify a
comment. The result looks like this <!-- //-->.

The complete template for JavaScript is therefore:

<SCRIPT language="JavaScript">
<!-- hide from old browsers

(some text that is JavaScript code)

//-->
</SCRIPT>
javascriptmall.com/learn/lesson2.htm 4/9
10/11/2009 Learning JavaScript - Writing and Testi…

Another format of this same template that is more compact is

<SCRIPT language="JavaScript"><!--

(some text that is JavaScript code)

//--></SCRIPT>

Use whichever template that you feel the most comfortable with.

Our completed first Script

Ok, add the two necessary lines to our first script to hide it from older browsers.
Our completed html code should now look that shown below. Make sure that
you reload the script in the browser to prove that it still works the same.

<HTML>
<HEAD>
<TITLE>Our First Script</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Our First Script</H1>
</CENTER>
<P>Today is
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
var today = new Date()
document.write(today)
//-->
</SCRIPT>
</BODY>
</HTML>

A little about the JavaScript code in our first Script

Look closer at the completed version or our first Script. You should now be able
to identify the <SCRIPT> tags and the text that is used to hide our code from the
older browsers. The remaining two lines between the <SCRIPT> tags is
JavaScript code. The first line initializes a date object. Date objects will be
discussed in detail in a future lesson. The other line of our code is a method of
the document object which will be also be discussed later. For now, all you
need to know about it is that you can use this method to write information to the
document contained in your browser.

Where to put Scripts

We already know that we can put scripts between the <BODY> and </BODY>
tags because that's where we put our first script. You can put JavaScript

javascriptmall.com/learn/lesson2.htm 5/9
10/11/2009 Learning JavaScript - Writing and Testi…
anywhere in the BODY section of HTML code. Now I am going to do something
daring and ask you to look at my HTML code for this page. Please be nice now
and don't find too many faults (LOL). Ok if you look in the head section, you will
notice some <SCRIPT> tags there too. So, yes you can put JavaScript in the
HEAD section also. Notice that the word func tio n is used several times in the
HEAD section. A function is something that we will learn about real soon. Just
wanted you to note these and get the idea that the HEAD section is where you
might put your functions. So it turns out that JavaScript can be placed most
anywhere in our HEAD and/or our BODY sections. As you learn more about
JavaScript, you will understand when you should put it in the HEAD section and
when it should go in the BODY of the document. You will also learn that
JavaScript can also be placed inside other tags, such as the <BODY> tag.

Test Script using Internet Explorer Browser

Now let's compare the results you got using this Netscape browser with that of
the Internet Explorer browser. Load script1.html into the Internet Explorer browser
and compare it with what you got using this browser. You might be surprised to
see that the results of this simple script are not the same on both browsers. In a
later lesson we will show how to make the results the same. This is just one
small sample of how the results can be different on different browsers. There
are many times that a script will run perfectly on one browser but not on the other.
So test, test, test.

Our first JavaScript Error (hopefully!)

I say hopefully because you might have already experienced this if had a typo
in our script right above. Now to demonstrate one of the important
characteristics of JavaScript, change the words document.write to all caps
like this DOCUMENT.WRITE(today). Save your file and reload it into the
browser. Surprise! What happened? You got your first JavaScript error. Better
get use to it. I try to do my work in small chunks so I can weed out the errors
more easily. The more practice with error messages you have the easier it will
be to decipher them.

Here is a sample of how the error will look on the Netscape and Internet
Explorer browsers. Yours may vary a little from this.

Netscape 4
(click on image for larger view)

javascriptmall.com/learn/lesson2.htm 6/9
10/11/2009 Learning JavaScript - Writing and Testi…

Netscape 4.5 Console

(click on image for larger view)

Microsoft Internet Explorer 4

Microsoft Internet Explorer 5

Ok so what caused our error here? The answer is "JavaScript is case
sensitive". When I was first setting up this demo I entered Date as date. It took
me a while to find out what was wrong. So be careful when you are entering
JavaScript code to get the case right and be aware that it is likely that the wrong
case could be your problem when you get a JavaScript error.

Notice that all of the error messages show a line number that the error occurred
on. In our simple case the line number is exactly where the error occurred. This
will not always be the case as our scripts get more complex. However, it will
javascriptmall.com/learn/lesson2.htm 7/9
10/11/2009 Learning JavaScript - Writing and Testi…
give you some clue as to where to start looking. The error call out can be a little
confusing and needs some getting use to.

You probably want to change the case for "document.write" back to all small
letters in our example script, save it and make sure it runs ok before we proceed
further.

More about document.write()

The document.write() method is one that you will be using a lot. For now,
don't worry too much about what a method is beyond our basic explanation we
gave when we talked about JavaScript being Object Oriented. We will explain
that and why you see the period between the words document and write during
lesson 7. Just realize that you can use this method to write a string to the
document while it is loading. The syntax for the document.write() method is
as follows:

document.write("string")

So, what is a string? As we will learn in lesson 4, it is nothing more than a series
of characters. You put the characters in quote marks, except when the string is
something that is returned by another method, which was the case in our first
script, or is a variable which you will also learn about in lesson 4.

So if we wanted to write Welcome to my Web Page using document.write(),

this is how we would do it:

document.write("Welcome to my Web Page")

You can include HTML tags in this string if you want. For instance, we can make
our welcome bold by doing the following. I will add a second line too.

document.write("<P><B>Welcome to my Web Page</B>")

document.write("<BR>Glad you stopped by!")

Now suppose we want to use document.write() to insert an image in

the document. Normally we would use the <IMG> tag to do this. For instance, the
tag would look something like this if we were inserting our pet's picture named
pet.gif.

<IMG src="pet.gif">

We will need to put quotes around this when we use it with the
document.write() method. This will mean that we will have quotes
within quotes. This will not work but there is a solution. Yo u a lte rna te ly us e
s ing le q uo te s a nd d o ub le q uo te s in J a v a S c rip t if y o u ne e d to p ut
q uo te s within q uo te s . Heres how we would do our image:

document.write('<IMG src="pet.gif">')

or

document.write("<IMG src='pet.gif'>")

Either way will work fine.

Ok, so it is true that we can do this much simpler by just typing our words into the
document itself without all this document.write() stuff. After we learn a little

javascriptmall.com/learn/lesson2.htm 8/9
10/11/2009 Learning JavaScript - Writing and Testi…
more JavaScript we will be using this method to dynamically create sections of
a web page which is actually what we did with our first script. In fact you can
create the complete document for a web page using
document.write().
Don't forget that you must put our above example scripts between the
<SCRIPT> </SCRIPT> tags for them to work.

Confused yet?
So are you completely confused yet? If you can

Identify the <SCRIPT> tag.

Know how to hide your scripts from older browsers.
Look at someone else's source code and identify the parts that are
JavaScript (by identifying the <SCRIPT> </SCRIPT> tags of course and
knowing that all in between is JavaScript).
Know that you can use the document.write() method to write to the
document as it is loading.
Understand that the results you get from JavaScript may be different for
different browsers and in fact may not work in some cases.

Then I would say you have learned a great deal in this lesson and are ready to
move on and learn the basics on JavaScript.

Assignment
1. Surf the web and try to determine where JavaScript was used. Note
pages that used JavaScript in an effective way.

2. Make a very simple web page using a series of document.write()

methods to generate everything that you will see on the screen. This
means that all of your BODY section will be a series of
document.write() methods. Include at least one image in your web
page. You might even want to include the date as we learned how to do
in our first script. Realize that this is not the best way to do this simple web
page but it does prepare us to do bigger things soon.

After completing problem 2, take a look at my simple page, compare

my solution to yours, and read my notes on this assignment.

S to p Mis s ing Ca lls W hile Y o u' re Online !

Get the details on the CallWave Internet Ansering Machine
FRE E 3 0 -d a y Tria l in US

[ Top of Page | Contents ]

© 1999 - 2004 by Ray Stott - All Rights Reserved.

javascriptmall.com/learn/lesson2.htm 9/9