An Introduction To JavaScript
By Gary Newell
Introduction
The following guide is a brief introduction to JavaScript.
The aim of the guide is to show you where JavaScript fits within
the realms of web page creation. Where does JavaScript fit in compared to
HTML, Cascading Style Sheets and other languages such as PHP or ASP. What
can you do with JavaScript? What are the limitations? Do you even need to
know JavaScript?
Finally you will learn to write your very first script.
A Brief History
It is hard to believe that the Internet is relatively young and
has only been around since the early 1990s. Great strides have been made in
a very short amount of time. Given what has happened since it first reared its
head it is hard to estimate what is in store for the Internet in the coming
five, ten or even twenty years.
As an invention the Internet has to be the greatest since the
wheel or as some would say since sliced bread although why such importance is
placed on sliced bread I have no idea.
The heading for this section is "A Brief History" and
that's because JavaScript has no long, in depth, convoluted path.
When the Internet first started there were two major web browsers
called Netscape Navigator and Internet Explorer. Both were able to display basic
static web pages but they were like pages of a book. A user could jump from
page to page using hyperlinks but that's about as interactive as the user could
get.
Netscape, in an attempt to shape the future, came up with a programming
language that would enable users to interact with web pages and they called
the language Livescript. Livescript contained many of the same concepts used
in JavaScript today.
Shortly after Netscape released Livescript a new language was
created called Java. Java was a fully fledged programming language and could
be used not just to interact with web pages but to create full applications.
Netscape realised that they could make Livescript more popular just by renaming
it to JavaScript.
At this point do not get confused into thinking that JavaScript
and Java are the same languages because they are not. JavaScript is known
as an interpreted language. This means that the code is entered directly into
the web page and then the web browser interprets what the code is supposed
to do. Java on the other hand is a compiled language meaning that any code
written in Java has to be processed by a compiler and turned into an executable
form.
Java and JavaScript serve very different purposes.
Microsoft realised that Netscape had an edge and without wanting
to fall behind they instantly released a version of Internet Explorer that
could run two separate scripting languages. One of the languages was called
vbscript and is based on the BASIC programming language. The other was called
JScript and was so similar to JavaScript that many of the commands for JavaScript
worked in JScript and vice versa.
Microsoft's attempts to make Internet Explorer the favoured
browser had failed and so with each iteration of Internet Explorer JScript
became more and more like JavaScript until the two languages were indistinguishable.
JavaScript eventually became too big for both Microsoft and Netscape
to handle alone and so in 1996 JavaScript was formally handed over to a standards
body called the ECMA. The ECMA are now responsible for the future advances in
JavaScript and in fact the actual language itself is now called ECMAScript or
ECMA-262 but that's just useful trivia because everyone still refers to it as
being called JavaScript.
Meanwhile the browser wars continue and some opportunist new
ventures have hit the market such as Opera and Firefox. Microsoft's aim for
world domination continues and high profile law suits have plagued them since
releasing Internet Explorer as part of Windows architecture.
HTML, CSS and JavaScript
In this section you will learn where JavaScript fits in, what
JavaScript can be used for and the limitations that JavaScript has.
HTML stands for HyperText Markup Language. It is used to produce
web pages in a clean and accessible format to enable viewers to read and navigate
content. HTML on its own enables you to display content much in the same way
as a magazine.
Just like a magazine however HTML does not enable you to do
anything else. You cannot create games (unless you are willing to create hundreds
of pages with hyperlinks), you cannot validate input and you can only produce
the most basic of menu systems.
The following link will show a web page created purely in HTML.
There are no Cascading Style Sheets and no JavaScript.
JavaScript Example 1 - A Basic HTML Page
CSS stands for Cascading Style Sheets and they are used to apply
standard formatting for HTML tags. What does that mean? That means that each
HTML tag can have formatting applied to it.
Using CSS you can make all paragraphs use the same font family,
size, paragraphing and positioning. It is therefore possible to make the page
in the above example look slightly better by using rollovers on the menu items.
JavaScript Example 2 - A Basic HTML Page
with CSS formatting
With HTML and CSS you can make very nice and very intricate
web pages. The pages are however static and except for the rollover effect,
hyperlinks and maybe even marquee tags the text is fixed to the layout.
JavaScript changes all that. With JavaScript you can apply effects
to any HTML element including the browser window, form elements, images and
links.
JavaScript can be used for but is not limited to creating games,
creating menus, form validation, animation, clocks, creating calculators,
creating basic web editors and creating slide shows.
The only downside to JavaScript is that because it is a client
side process it cannot write to files (except cookies). This means that information
cannot be stored and retrieved from disk.
What is client side processing? JavaScript as mentioned before
is an interpreted language and is embedded within a HTML page. This means as
the HTML page is loaded into your browser so is the JavaScript. The good thing
about this is once the page is loaded you can disconnect your Internet connection
and continue to view the page and use the JavaScript functionality. The bad
side is that JavaScript cannot write to files which is important for storing
large amounts of data. It is not a good idea for JavaScript to be able to write
to files as unscrupulous hackers would use the ability to write files to user's
machines as a method for gaining access to that machine.
JavaScript is not a language associated with complete applications.
Yes you can create calculators but for real applications server side languages
such as PHP and ASP are used..
PHP and ASP are examples of server side processing. This means
that the PHP or ASP script is ran directly from the server and so you have to
be connected to the Internet for the script to process. Any file manipulation
is performed physically on the server. The upside of this is that the only machine
that is at risk is the server itself. Since the person who owns the server is
enabling PHP and ASP scripts to run it is highly likely that there is little
or no chance of hackers gaining access.
Your First JavaScript
The very first program that anyone learns whether it is a scripting
language or a fully fledged compiled language is the "Hello World"
application.
<html>
<head>
<title>JavaScript Example 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#ffffff" text="#000000">
<script language="JavaScript">
document.write("Hello World");
</script>
</body>
</html>
JavaScript Example 3- Hello World
The above example could have easily been achieved using HTML and
is really not all that useful.
There are however a few things in the example that will aid you
along your way.
The first thing to note is that to start a script you use the
<script language="JavaScript"> tag and to end a script you use
a </script> tag. Anything between those tags is considered to be JavaScript
code and if it isn't you will see an error appear in the status bar of your
web page.
The second thing to note is that to display text to the screen
you use the document.write function. You will learn all about functions in another
tutorial. All you need to know is that between the two quotes you can place
any text you wish and that includes HTML tags for example:
document.write("<h1>Hello World</h1>");
