JavaScript Tutorial Part 1- Some Basics
Orientation
How the browser knows it is JavaScript
This is how JavaScript works
Some programming basics
~~ Orientation
Let's clear up any confusion there may be between
JavaScript and Java:
Although they have similar names, they are very
different. Java is a compiled language with modules
that load into your browser from a source external to
the web page. JavaScript, on the other hand, is an
interpreted language and is almost always an integral
part of the web page source code.
"Compiled language" means the source code of the
program is translated (compiled) into machine-language
(composed only of 0's and 1's) before use. When it is
time to run the program, the translated version is
used by the computer instead of the original source
code. Unless you are the programmer, you might never
see the source code of the program you are using.
"Interpreted language" means when it loads a page, the
browser's interpreter uses the original source code
and translates it into machine language. The
translation is stored in the browser's memory ready
to run all or portions of it as appropriate. When the
browser window gets ready to load a different web
page, the previous page's translated JavaScript is
discarded.
JavaScript can be easier to learn than some other languages
because there is a great abundance of examples on the
internet. Just use your browser's "view source" menu choice
and you can see the source code of web pages.
| Note: |
Some
browsers will display only the active source
code when you "view source". In other words, you
see only the source code that is actually being used
to display the page at the time you are viewing it.
If you suspect your browser is "censoring" parts of
the source code on a particular page, you can use
. shows you all of the
code in its glory or lack thereof. Just go to
/master/snooper/MasterSnooper.cgi
and type in the URL of the web page. (
is also good to see how framed, doorway, and
redirection pages are built, because it shows you
only the source code rather than drawing the display
or getting itself redirected.)
|
JavaScript can be quick to develop because you can make
a change and test it immediately. To set it up, load the
source code file into both your word processor and your
browser. When you can change something, save the file and
click your browser's "reload/refresh" button for immediate
feedback.
Be sure to use a plain text word processor. NotePad.exe
and BBEdit are both good. I use Arachnophilia
(CareWare [no monetary requirements] from
http://www.arachnoid.com/arachnophilia -- Windows)
for almost all of my HTML and JavaScript development.
~~ How the browser knows it is JavaScript:
JavaScript program lines must be between <script...>
</script> tags unless the line is within an HTML tag.
The JavaScript between the <script...> </script> tags
must also be enclosed with HTML comment tags.
Often, you'll find JavaScript in this format:
<script language="JavaScript">
<!-- programmer comments can go here
JavaScript program code goes here
// programmer comments can go here -->
</script>
The language="JavaScript" part is not specifically
required. However it is good to get in the habit of
typing it in because there are other script languages
out there, Active X for example, and the language
designation tells the browser which scripting
language is being used.
Without the <!-- and --> HTML comment begin/end tags, the
browser tries to display the JavaScript as regular text --
this last statement may not be true for the very latest
browsers, but it is true for most recent browsers and it
certainly is true for browsers that are not JavaScript
enabled.
The second line contains the HTML comment begin tag. The
JavaScript interpreter ignores the entire line so long as
it begins with that tag. Some people put a copyright
notice or other comments on the rest of that line.
Notice the characters
//
on the second from last line. Two slashes next to each
other tell the browser's JavaScript interpreter that the
rest of the line is not valid JavaScript code -- it is
ignored the same as all programmer comments are ignored by
the interpreter. The rest of the line contains, of course,
the HTML end comment tag. (You can use the space between
// and --> for comments of your own -- the JavaScript
interpreter will ignore it, and it is still inside the
HTML comment tag so the HTML interpreter will ignore it,
too.)
You can put your comments anywhere in a JavaScript program
so long as they begin with the characters: //
There is no "end" comment code for JavaScript. All
JavaScript comments that begin with // end automatically at
the end of that same line.
Sometimes, you'll find JavaScript within HTML tags:
For mouseovers and some other functionality, you will find
JavaScript code within the anchor tag. Example:
<a href="somedomain.com"
onMouseover="do_some_function()"
onMouseout="do_different_function()">
<img ...>
</a>
JavaScript code is also found within other HTML tags. Two
of the most used are the <body...> and <input...> tags.
An example of JavaScript code in a <body...> tag:
<body onLoad="do_some_function()">
An example of JavaScript code in an <input...> tag:
<input type="submit" onClick="do_some_function()">
The reason non-JavaScript enabled browsers don't get
confused when they find JavaScript in HTML tags is because
they are programmed to ignore anything in tags that they
do not recognize.
~~ This is how JavaScript works:
When someone visits a web page, it loads into the browser.
The HTML is converted into a visible display.
If the browser is JavaScript enabled then the JavaScript
program lines are interpreted and executed. If the
JavaScript directs any visible effects, those effects
become visible in the page display.
Although all of thee JavaScript code is interpreted during
loading not all of it will be executed right away.
JavaScript program lines within HTML tags are executed only
when the link or form element is activated, such as the
mouseover link example above. And functions are executed
only when a program lines calls them.
~~ Some programming basics:
Where to put JavaScript program code:
The JavaScript program lines above the <body...> tag are
interpreted and appropriate lines executed before the HTML
page is loaded. The JavaScript below the <body...> tag is
interpreted and appropriate lines executed at the same time
as the HTML page.
JavaScript program code that must be put above the
<body...> tag are
- any that must execute before the entire page has
finished loading, such as code that immediately
determines what kind of browser the visitor is
using, and
- functions (we'll describe what they are and other
stuff about them in a later part of this series)
that are called within the <body...> tag.
JavaScript program code that must be put below the
<body...> tag are any that adjust the page's visual
elements, such as printing text or displaying graphics.
Oftentimes, it won't matter whether the program code is
above or below the <body...> tag. Many programmers, this
author included, usually opt for the "above" position. It
helps keep all or most of the program code in one place
rather than scattered about.
How to make your program remember things:
You can specify stuff that the JavaScript program must
remember. And you can access that remembered stuff later on.
In order to store stuff in memory and access it later, that
memory spot must have a name. The memory spot, itself, is
called a "variable" because the contents of the memory spot
can change.
To declare that a variable exists and give it a name, you
type something like
var blahblah;
which creates a variable called "blahblah" where you can
store stuff.
To store something into that memory spot, you type
something like
blahblah = 5;
and the number "5" is stored in (assigned to) that memory
spot.
You can also do all the above in one line, if you want, by
typing
var blahblah = 5;
However, once a variable name has been declared, don't
declare it again. If, later on in the program, you want to
change the contents of the variable "blahblah", do it as a
simple assignment statement, like
blahblah = 4;
To access what you have stored in a variable (the value you
assigned to it), you either have to print it (have it show
up on your web page) or assign it to another variable. To
print it to your web page, you type
document.write(blahblah);
and, when interpreted and executed, that program line will
print the value of "blahblah" on your web page.
Here it is, all put together:
<script language="JavaScript">
<!--
var blahblah = 5;
document.write(blahblah);
// -->
</script>
Put the above JavaScript code somewhere below the <body...>
tag of a web page and you'll see how it prints the value
of "blahblah". (You put it below the <body...> tag because
it actually writes something to the page -- and some
browsers protest if you try to write something to the page
above the <body...> tag.)
The above demonstrates a simple use of a variable. Other
uses (described in a later part of this series) include
doing mathematical calculations, manipulating strings of
characters, storing form field contents, and having your
program make decisions based on what a variable contains.
Using strings of characters:
Strings of characters need to be enclosed between either
apostrophes (') or quote marks (").
Whichever character you choose, it must be used both at
the beginning and at the end of the string.
If you have one or more apostrophes within your string,
it makes good sense to choose quote marks to contain the
string. Example:
"I'm hot."
On the other hand, if you have one or more quote marks
within your string, it makes sense to enclose it within
apostrophes, like this:
'He said, "hot".'
A special situation arises when you have a string with both
an apostrophe and a quote mark within it. In that case, you
put a backslash character in front of each occurrence of
the character that encloses the string. For example, the
string of characters
He said, "I'm hot."
can be enclosed within apostrophes as
'He said, "I\'m hot."'
or within quote marks as
"He said, \"I'm hot.\""
The backslash tells the browser's interpreter to treat the
character following the backslash as a literal character
rather than an "end of string" marker. Once the interpreter
has done that, it discards the backslash from the string.
(If you want to use a backslash in a string, you must use
two of them in sequence -- the browser will discard the
first one.)
Try this JavaScript program code in a web page to see it
work:
<script language="JavaScript">
<!--
var hotstuff = 'He said, "I\'m hot."';
document.write(hotstuff);
// -->
</script>
~~ To come:
This article has reached its length limit.
The next article in this series will describe useful things
to do with variables and will also describe functions and
how to call them.
Will Bontrager
©2000 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
