mewstennisSoftware and s/w Development

Nov 4, 2013 (3 years and 7 months ago)



By Dave Poobalasingam


What is Javascript?

Are Java and Javascript is the same?

What can a Javascript DO?

Basics of Javascript

Formatting using Javascript

Event Handlers


Javascript Comments

More about Javascript


Basic syntax of Javascript

What is JavaScript?

JavaScript was designed to add interactivity to HTML

JavaScript is a scripting language

A scripting language is a lightweight programming

A JavaScript consists of lines of executable computer code

A JavaScript is usually embedded directly into HTML pages

JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)

Everyone can use JavaScript without purchasing a license

Are Java and JavaScript the


Java and JavaScript are two completely
different languages in both concept and

Java (developed by Sun Microsystems) is a
powerful and much more complex
programming language

in the same
category as C and C++.

What can a JavaScript Do?

JavaScript gives HTML designers a programming tool

HTML authors
are normally not programmers, but JavaScript is a scripting language with a
very simple syntax! Almost anyone can put small "snippets" of code into
their HTML pages

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 an HTML page

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
and change the content of an HTML element

JavaScript can be used to validate data

A JavaScript can be used to
validate form data before it is submitted to a server. This saves the server
from extra processing

JavaScript can be used to detect the visitor's browser


A JavaScript
can be used to detect the visitor's browser, and

depending on the browser

load another page specifically designed for that browser

JavaScript can be used to create cookies


A JavaScript can be used to
store and retrieve information on the visitor's computer

Write text with Javascript

The example demonstrates how to use JavaSript to write text on a
web page.



<script type="text/javascript">

document.write("Hello World!");






Write HTML with Javascript

The example demonstrates how to use JavaScript to write HTML
tags on a web page.



<script type="text/javascript">

document.write("<h1>This is a header</h1>");





This is a header

Basics of Javascript

To insert a JavaScript into an HTML page, we
use the <script> tag. Inside the <script> tag
we use the "type=" attribute to define the
scripting language.

So, the <script type="text/javascript"> and
</script> tells where the JavaScript starts and

<html> <body> <script type="text/javascript">
... </script> </body> </html>The word


XHTML formatting of JavaScript text:

<b><u><script> document.writeln(“I am a bold Italian.”)


JavaScript formatting of JavaScript text:

<script> document.writeln(“<b><u>I am a bold

will both yield the same result. However the ability to
write xhtml from a JavaScript function can be a
powerful technique.

Event handlers

In order to combine JavaScript with HTML, the Javascript “script” is
embedded in HTML code using <script>….</script> tags, or in
the content of an
event handler,
which calls a JavaScript
function, in a range of other tags.


<img ……..
=”….” >

<script> …………………………………..</script>

<script type=”text/JavaScript”>………..</script>

<script language = “JavaScript”> ……</script>

<script language=“JavaScript1.2” src=”Location”>

<form name=”form1” onLoad=”loadPicture()”>

“omMouseover”, and “onLoad” are event handlers

they “describe”
a web page event, in this case, the mouse pointer moving over
an image, and a web page loading into memory.


The word

is a standard JavaScript command for writing
output to a page.

By entering the document.write command between the <script> and
</script> tags, the browser will recognize it as a JavaScript command
and execute the code line. In this case the browser will write Hello
World! to the page:



<script type="text/javascript">

document.write("Hello World!");







and can utilise a
number of
event handlers.



function aboutNow()


time = new Date()

document.write( time.getHours() + “:” +


Date(), is the JavaScript Date object, and getHours()
and getMinutes() are two of its methods.


See if you can enhance this using the getDay(),
getMonth() and getYear() methods. You will
need to modify the (xhtml) text as well. You
may find that this is difficult to do, and gives
you unexpected outputs. Suggest how the
display could be made to look as required


Add two more lines of differently formatted text.
One line will be left aligned and one will be
right aligned, using CSS. Finally add another
alert that displays the text

“My second


Add the following script in between the </title> tag and
the </head> tag.


document.writeln(“<br/>You are using “ +


Save the file and load it into your browser. Load it
into the OTHER browser and ensure the responses
are correct. This time you have utilised the
“navigator” object’s “appName” property.


Lets discuss

See if you can work out what the following
script does

window.status = “Here I am, down here where
I am usually overlooked.”

“status” is a property of the Window object.

JavaScript Comments

As in HTML, you can add explanatory
comments to your JavaScript quite simply:

// for a single line and

/* …………………*/ for a multiple line block of

Remember that < !


> is for
XHTML comments.

More about Javascript

JavaScript is a Netscape product.

It is not however browser dependent, both MicroSoft’s Internet Explorer
and Netscape’s Navigator (and Mozilla Firefox…… ) support it. (There
are some notable differences however.).

As we saw earlier JavaScript is embedded in X/HTML, and works with
the various X/HTML elements to exercise control over a Web page.

There are various versions of JavaScript and some are, and are not,
supported by various versions of the above mentioned browsers.
Microsoft has a version of JavaScript, called Jscript, which is very
similar, but does have some differences.

You can also use MicroSoft’s VBScript to perform similarly to
JavaScript, BUT ONLY IN EXPLORER. Appropriate documentation can
be found at the relevant Web sites. There are a number of other
scripting languages that can be used in web pages.

Basic Syntax in Javascript

Javascript is case sensitive

All statements should end in a semi
colon. [ …or nothing ]

Javascript ignores spaces, tabs and new lines that appear in

A string is a group of characters enclosed in single or double

Javascript recognises spaces, tabs and newlines that are part of
a string.

Close all opened brackets, or every bracket should be half of a

{ ………… } contains Javascript statements.

[ ………….] used in arrays.

( ………….) contains a function’s or a method’s arguments.