|
Introduction to
JAVASCRIPT,
JavaScript is the programming
language of the Web! you will learn how to write JavaScript's
and insert them into your HTML documents, and how to make your
pages more dynamic and interactive.
What is
JavaScript?
- JavaScript is a scripting
language
- A scripting language is a
lightweight programming language
- A JavaScript is lines of
executable computer code
- A JavaScript can be
inserted into an HTML page
- JavaScript is an open
scripting language that anyone can use without purchasing a
license
- JavaScript is supported by
all major browsers like Netscape and Internet Explorer
How Does it
Work?
When a JavaScript is inserted
into an HTML document, the Internet browser will read the HTML
and interpret the JavaScript. The JavaScript can be executed
immediately, or at a later event.
What can a
JavaScript Do?
JavaScript
gives HTML designers a programming tool
HTML authors are normally not
programmers, but since JavaScript is a very light programming
language with a very simple syntax, almost anyone can start
putting small "snippets" of code into their HTML documents.
JavaScript
can put dynamic text into an HTML page
A JavaScript statement like
this: document. write("<h1>" + name + "</h1>") can write a
variable text into the display of an HTML page, just like the
static HTML text: <h1>Bill Gates</h1> does.
JavaScript
can react to events
A JavaScript can be set to
execute when something happens, like when a page has finished
loading or when a user clicks on an HTML element.
JavaScript
can read and write HTML elements
A JavaScript can read an HTML
element and change the content of an HTML element.
JavaScript
can be used to validate data
JavaScript's can be used to
validate data in a form before it is submitted to a server. This
function is particularly well suited to save the server from
extra processing.
Use the <script>
tag to insert a JavaScript in an HTML document.
How to Put a
JavaScript Into an HTML Document
<html>
<head>
</head>
<body>
<script type="text/JavaScript">
document.write("Hello World!")
</script>
</body>
</html>
|
And it
produces this output:
To insert a script in an HTML
document, use the <script> tag. Use the type attribute to define
the scripting language.
<script type="text/JavaScript">
|
Then comes the JavaScript: In
JavaScript the command for writing some text on a page is
document. write:
document.write("Hello World!")
|
The script
ends:
Ending
Statements with a Semicolon?
With the traditional
programming languages C++ and Java, each code statement has to
end with a semicolon.
Many programmers continue this
habit when writing JavaScript, but in general, semicolons are
optional and are required only if you want to put more than
one statement on a single line.
How to
Handle Older Browsers
Older browsers that do not
support scripts will display the script as page content. To
prevent them from doing this, you can use the HTML comment tag:
<script type="text/JavaScript">
<!--
some statements
//-->
</script>
|
The two forward slashes in
front of the end of comment line (//) are a JavaScript comment
symbol, and prevent the JavaScript from trying to compile the
line.
Note that you can't put // in
front of the first comment line (like //<!--), because older
browser will display it. Funny? Yes ! But that's the way it is.
JavaScript
Where To ...
Scripts in a page
will be executed immediately when the page loads. This is not
always what we want. Sometimes we want to execute a script when
a page loads, other times when a user triggers an event.
Examples
Head section
Scripts that contain functions go in the head section of the
document. Then we can be sure that the script is loaded before
the function is called.
Body section
Execute a script that is placed in the body section.
External script
How to access an external script.
Where to Put
the JavaScript
Scripts in a page will be
executed immediately while the page loads into the browser. This
is not always what we want. Sometimes we want to execute a
script when a page loads, other times when a user triggers an
event.
Scripts in the head section: Scripts to be executed
when they are called, or when an event is triggered, go in the
head section. When you place a script in the head section, you
will ensure that the script is loaded before anyone uses it.
<html>
<head>
<script type="text/JavaScript">
some statements
</script>
</head>
|
Scripts in the body section: Scripts to be executed
when the page loads go in the body section. When you place a
script in the body section it generates the content of the page.
<html>
<head>
</head>
<body>
<script type="text/JavaScript">
some statements
</script>
</body>
|
Scripts in both the body and the head section: You
can place an unlimited number of scripts in your document, so
you can have scripts in both the body and the head section.
<html>
<head>
<script type="text/JavaScript">
some statements
</script>
</head>
<body>
<script type="text/JavaScript">
some statements
</script>
</body>
|
How to Run
an External JavaScript
Sometimes you might want to run
the same script on several pages, without writing the script on
each and every page.
To simplify this you can write
a script in an external file, and save it with a .js file
extension, like this:
document.write("This script is external")
|
Save the external file as
xxx.js.
Note:
The external script cannot contain the <script> tag
Now you can call this script,
using the "src" attribute, from any of your pages:
<html>
<head>
</head>
<body>
<script src="xxx.js"></script>
</body>
</html>
|
Page 1
2 3
4 |
