JAVASCRIPTWeek1

mewstennisSoftware and s/w Development

Nov 4, 2013 (4 years and 8 days ago)

81 views

INTRODUCTION TO
JAVASCRIPT

By Dave Poobalasingam

Topics


What is Javascript?


Are Java and Javascript is the same?


What can a Javascript DO?


Basics of Javascript


Formatting using Javascript


Event Handlers


Objects


Javascript Comments


More about Javascript


History


Basic syntax of Javascript




What is JavaScript?



JavaScript was designed to add interactivity to HTML
pages


JavaScript is a scripting language


A scripting language is a lightweight programming
language


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
Same?

NO!

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


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.


<html>

<body>


<script type="text/javascript">

document.write("Hello World!");

</script>


</body>

</html>



BROWSER OUTPUT:


HELLO WORLD








Write HTML with Javascript

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


<html>

<body>


<script type="text/javascript">

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

</script>


</body>

</html>



BROWSER OUTPUT:


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
ends:

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

Formatting

XHTML formatting of JavaScript text:

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


or

JavaScript formatting of JavaScript text:

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


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.

Eg:

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


<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.

Object

The word
document.write

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:

<html>

<body>

<script type="text/javascript">

document.write("Hello World!");

</script>

</body>

</html>


JavaScript
objects

have
methods

and
properties

and can utilise a
number of
event handlers.

Object
-

Cont

function aboutNow()

{


time = new Date()


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

}


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

Exercise

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

Exercise


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
alert”.

Exercise

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

<script>


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

</script>

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.

Exercise


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
comment.

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
statements.


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


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


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


{ ………… } contains Javascript statements.


[ ………….] used in arrays.


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