(1)Intro to JavaScript

8/13/2019 (1)Intro to JavaScript

1/30

Introduction to JavaScript


2/30

OutlinePart A

Overview of JavaScript Versions, embedding, comments

JavaScript Basics Variables and Data Types

Operators

Expressions

JavaScript Control Structures Conditional Statements

Looping Statements


3/30

OutlinePart B

JavaScript Functions and Events Events Handlers

Using Object in JavaScript Object-Oriented Programming

JavaScript Object Model

Using Built-In objects (Predefined Object)

Custom Object Types Error in JavaScript

Exception Handling in JavaScript


4/30

OutlinePart C

Working with Browser Objects

Document Object Model (DOM)

Creating Cookies in JavaScript Constructing a standard cookie

Interaction with the cookie

Introducing DHTML Styles and Layers

Dynamic Positioning


5/30

OutlinePart D

JavaScript Application Development

JavaScript Example

Discuss the execution requirements

How to break down the syntax

Cool JavaScript Sites

JavaScript and DHTML Reference Hints for JavaScript coding

Summary


6/30

Introduction

The growth of the WWW has resulted in ademand for dynamic and interactive websites.

There are different kinds of scriptinglanguagesJavaScript,

This lecture aims at offeringin-depth

knowledge of JavaScript, discussing thecomplexity of scripting and studyingvarious common examples.


7/30

JavaScript Capabilities

Improve the user interface of a website

Make your site easier to navigate

Easily create pop-up alert, windows Replace images on a page without reload

the page

Form validation Many others


8/30

JavaScript Versions

JavaScript 1.0 Supported by Netscape 2.0 and IE 3.0

JavaScript 1.1

Supported by Netscape 3.0 and IE 4.0 JavaScript 1.2

Supported by Netscape 4.0 and IE 4.0

JavaScript 1.3

Supported by Netscape 4.5 and IE 5.0 JavaScript 1.5

Supported by Netscape 6.0 and IE 5.5 and later


9/30

The Future of JavaScript

ECMA standard brings JavaScript and Jscripttogether.

ECMA - An International industry association

dedicated to standardize information andcommunication systems.

Both Netscape and Microsoft have pledged thatthey will support and develop JavaScript in the

future. It is future-proof, and it is not going to disappear

in the near future.


10/30

A Simple Script

First JavaScript Page

First JavaScript Page


11/30

JavaScript Syntax.

Unlike HTML, JavaScript is case sensitive.

Dot Syntax is used to combine terms.

e.g., document.write("Hello World WideWeb");document.write("Hello World)

Certain characters and terms arereserved.

JavaScript is simple text (ASCII).


12/30

Embedding JavaScript

A tag can be placed either withinthe or tag of an HTMLdocument.

First JavaScript Program


13/30

JavaScript Source File

SRCspecifies the location of an external script

TYPEspecifies the scripting language of the script

LANGUAGEspecifies the scripting language of thescript

TYPEand LANGUAGEhave a similar function, we useLANGUAGE to specify the language used in the script


14/30

JavaScript Terminology.

JavaScript programming uses specializedterminology.

Understanding JavaScript terms isfundamental to understanding the script.

Objects, Properties, Methods, Events,Functions, Values, Variables, Expressions,

Operators.


15/30

Objects

Objects refers to windows, documents,images, tables, forms, buttons or links, etc.

Objects should be named.

Objects have properties that act asmodifiers.


16/30

Properties

Properties are object attributes.

Object properties are defined by using theobject's name, a period, and the propertyname.

e.g., background color is expressed by:document.bgcolor

Documentis the object.

Bgcoloris the property.


17/30

Methods

Methods are actions applied to particularobjects. Methods are what objects can do.

e.g., document.write(Hello World)

Documentis object.

Writeis method.


18/30

Events

Events associate an object with an action.

e.g., the onmouseoverevent handler action

can change an image. e.g., the onsubmitevent handler sends a

form.

User actions trigger events.


19/30

Functions

Functions are named statements thatperforms tasks.

e.g., function dowhatever() {statements} The curly braces contain the statements of

the function.

JavaScript has built-in functions, and youcan also write your own.


20/30

Need for a source file

If the JavaScript code is fairly short, you arerecommended to include the code in the HTMLdocument.

To add clarity to an HTML document. To share JavaScript code across multiple HTMLdocuments.

To help you hide your JavaScript code.

Spent lot of time for JavaScript coding. Viewer can only see the location of the source file but

not the contents.


21/30

JavaScriptand Javaconfusion

JavaScript JavaInterpreted by the client-sidecomputer

Compiled on the server beforeexecuted on the client machine

Dynamic binding, object referencesare checked at runtime

Static binding, object referencesmust exist at compile time

No need to declare data types Data types must be declared

Code is embedded in HTML Code is not integrated in HTML

Limited by the browser functionality Java applications are standalone

Can access browser objects Java has no access to browserobjects


22/30


23/30

Using the alert() Method

It is the easiest methods to use amongst alert(),prompt() and confirm().

You can use it to display textual information tothe user (simple and concise).

The user can simply click OK to close it.

alert(An alert triggered by JavaScript);


24/30

Using the confirm() Method

This box is used to give the user a choice eitherOK or Cancel.

It is very similar to the alert() method. You can also put your message in the method.

confirm(Are you happy with the class?);


25/30

Using the prompt() Method

This is the only one that allows the user to typein his own response to the specific question.

You can give a default value to avoid displayingundefined.

prompt(What is your student id number?);

prompt(What is your name?,No name);


26/30

Three methods

alert("This is an Alert method");

confirm("Are you OK?");

prompt("What is your name?");

prompt("How old are you?","20");


27/30

Variables

JavaScript allows you to declare and usevariables to store values.

How to assign a name to a variable?

Include uppercase and lowercase letters Digits from 0 through 9

The underscore _ and the dollar sign $

No space and punctuation characters

First character must be alphabetic letter orunderscore99Total?, 012345number?,

Case-sensitive

No reserved words or keywords


28/30

Declaring JavaScript

Variables You declare JavaScript variables with the var

keyword:

var x;

var carname;

After the declaration shown above, the variablesare empty (they have no values yet).

However, you can also assign values to thevariables when you declare them:

var x=5;

var carname="Volvo";


29/30

Which one is legal?

My_variable

$my_variable

1my_example

_my_variable@my_variable

My_variable_example

++my_variable

%my_variable

#my_variable

~my_variable

myVariableExample

Legal

Illegal


30/30

Variable on-the-fly

We should use var because it is moreeasy to keep track of the variables.

var id;

id = prompt(What is your student id number?);

alert(id);name = prompt(What is your name?,No name);

alert(name);

Variable declaration

Documents

(1)Intro to JavaScript