Introduction

to JavaScript

IT 112

History
First web scripting language called
LiveScript
Developed in 10 days in May 1995
by Brendan Eich, then working
at Netscape and now of Mozilla
JavaScript was not always known as
JavaScript: the original name was
Mocha, a name chosen by Marc
Andreessen, founder of Netscape.
JavaScript

History
In parallel with this, Sun was developing
Java
Netscape and Sun got together and
realized that many of the specifications
for Java could apply to LiveScript
Result is JavaScript

JavaScript

Client script vs Server script

A client-side scripting
language
Client-side refers to
the fact that it is
executed in the client
(software) that the
viewer is using. In the
case of JavaScript, the
client is the browser.
Interpreted on-the-fly by
the client
Each line is processed
as it loads in the
browser

A server-side language
is one that runs on the
Web server. Examples:
PHP, Python
To maintain data
shared among
applications or clients
To maintain information
during client accesses
To access a database
To access server files
To call server C
libraries
To customize Java
applets
4

What is JavaScript?
Browsers have limited functionality
Text, images, tables, frames

JavaScript allows for interactivity

Browser/page manipulation
Reacting to user actions

A type of programming language

Easy to learn
It allows you to make interactive Web
pages
It can be fun!

JavaScript Allows Interactivity

Improve appearance
Especially graphics
Visual feedback

Site navigation
Perform calculations
Validation of input
Other technologies
javascript.internet.com

How Does It Work?

Embedded within HTML page
View source

Executes on client
Fast, no connection needed once loaded

Simple programming statements

combined with HTML tags
Interpreted (not compiled)
No special tools required

Java vs JavaScript
In reality, Java and JavaScript are
unrelated

JavaScript Versus Java

JavaScript is interpreted while Java is
compiled
But server-side JavaScript is compiled

JavaScript is object-based while Java is

object-oriented
Object-based languages can utilize predefined objects, but you are limited in
terms of creating your own objects
JavaScript

JavaScript Versus Java

JavaScript has loose data typing, while
Java has strong data typing
Loose data typing means that a variable
can hold any kind of data

JavaScript code is embedded in an

HTML document while Java applets are
stand-alone applications that can be
accessed from HTML
JavaScript

10

JavaScript Versus Java

JavaScript has dynamic binding, while
Java has static binding
Names bound at runtime

JavaScript can access browser objects

and functionality, while Java cannot

JavaScript

11

What is Java?

Totally different
A full programming language
Much harder!
A compiled language
Independent of the web
Sometimes used together

JavaScript

Extends functionality of Web pages

Written in the HTML Document
Controls page elements
Reacts to user actions
Instructions - code downloaded as text
Platform independent
Object Oriented

Object Oriented
Objects have
Qualities or attributes
Things they can do

In JavaScript these are

Properties
Methods

Object Examples
Object
Computer

Disk Drive

Attribute

Things it can do

Brand name
Model Name
Processor Type
Processor Speed
Disk Drive
Brand name
Model name
Storage capacity
Transfer rate
Access time

Boot up
Run an application
Perform math calculations
Shut down
Store information
Retrieve information
Delete information

JavaScript Object Example

To Reference Properties and methods

document.title
document.bgColor
document.writeln(<H1>My Heading</H1>)

Fundamental Concepts
Objects: The nouns of the language
Instances: incarnations of objects
Properties: attributes or state of objects
Methods: The verbs of the language
that define the behaviors of objects
Events and Events Handlers

JavaScript Variables
Variables: containers for data
All variables have

Name
Type JavaScript is loosely typed
Value or null
To declare a variable
var variablename

Beware of reserved words (book page 558)

The Document Object Model

Internal road map of
objects on a web
page
Hierarchical model of
web browser objects
Old DOMs for
Netscape, Microsoft
New browsers use
the standard DOM
by W3C

Embedding JavaScript in HTML

As statements and functions via <script> tag
<script type=text/javascript src=some file.js >
javascript statements...if not external

</script>
Attributes
Ttype, SRC

Within HTML tags as event handlersLater

Provide the doorway between HTML and Scripts

A Word About Comments

JavaScript Comments
These comments must be within a script
// begins a single line comment
These can start anywhere on the line, but the remainder of the
line becomes a comment

/* All of your comments here */

Everything between the start and end comment markers are
comments
Can be on a single line or span many

HTML Comments
<!-- All of your comments here -->

JavaScript in HTML, Template

<head>
<title>My page with javascript</title>
</head>
<body)
<script language=javascript type=text/javascript >
<!-- begin hiding here
javascript statements
// end hiding here -->
</script>
<noscript>
<b>the page requires a browser with javascript </b>
</noscript>...

JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write('This is my first
JavaScript Page');
Note the symbol for
line continuation

</script>
</body>
</html>

JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language=JavaScript">
document.write('<h1>This is my first
JavaScript Page</h1>');
</script>
</body>
</html>

HTML written
inside JavaScript

JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<p>
<a href="myfile.html">My Page</a>
<br />
<a href="myfile.html"
onMouseover="window.alert('Hello');" >
My Page</A>
JavaScript written
An Event
</p>
inside HTML
</body>
</html>

Example Statements
<script language="JavaScript">
window.prompt('Enter your
name:','');
Another event
</script>
<form>
<input type="button" Value="Press"
onClick="window.alert('Hello');"
Note quotes: " and '
>
</form>

Hello, World!
Typically, in any programming
language, the first example you learn
displays Hello, World!
We are going to take a look at a Hello
World example and then examine all of
its parts.

27

Hello World in JavaScript

<!DOCTYPE html>
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<script type="text/javascript">
<!-document.write("<h1>Hello, world!</h1>");
//-->
</script>
</body>
</html>

28

Hello World Screenshot

29

The <script></script> tag

The code for the script is contained in the <script>
</script> tag

<script type="text/javascript">
.
.
.
</script>
30

Single Line Comment

Example
<script type="text/javascript">
<!-// This is my JavaScript comment
document.write("<h1>Hello!</h1>");
//-->
</script>
31

Multiple Line Comment

Example
<script type="text/javascript">
<!-/* This is a multiple line comment.
* The star at the beginning of this line is optional.
* So is the star at the beginning of this line.
*/
document.write("<h1>Hello!</h1>");
//-->
</script>
32

HTML Forms and JavaScript

JavaScript is very good at processing
user input in the web browser
HTML <form> elements receive input
Forms and form elements have unique
names
Each unique element can be identified
Uses JavaScript Document Object Model
(DOM)

Naming Form Elements in HTML

<form name="addressform">
Name: <input name="yourname"><br
/>
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>

Forms and JavaScript

document.formname.elementname.value
Thus:
document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value

Using Form Data

Personalising an alert box

<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' +
document.alertform.yourname.value);">
</form>

Tips

Check your statements are on one line

Check your " and ' quotes match
Take care with capitalization
Lay it out neatly - use tabs
Remember in the workbook denotes a
continuing line
Be patient
Presentation slides adapted from scom.hud.ac.uk/scomsjw/Web%20Authoring%20Module/Lecture%20Slides/introjs.ppt

Find the Bug!

<script type="text/javascript">
<!-/* This is my JavaScript comment
* that spans more than 1 line.
*
document.write("<h1>Hello!</h1>");
//-->
</script>

38

JavaScript Lab Exercise 1

Create a web page that contains

A title of My first JavaScript Page

A Javascript to ask the user for their name
A personalized welcome message to the user.

Create another page that combines image swap

and function example
Have the function called from the button switch the
images