javascriptjavascript| sck3633 last updated january 2006 web programming | jumail, fsksm, utm, 2006 |...

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 1

Javascript

Lecture 4

Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 1

http://ngsiewteng-learningportfolio.weebly.com/web-

programming.html (Javascript: fundamentals)

http://lawchowkuan.weebly.com/web-programming.html

(Javascript: DOM)

http://ngsiewteng-learningportfolio.weebly.com/web-programming.html





http://elearn2.utm.my/11122/mod/resource/view.php?id=233229





Outline

• Introduction

• Fundemental of Javascript: – Keywords, variables, operators

– Control Statements

– Functions

– Arrays

– Objects

• Document Object Model (DOM)

• Applications of Javascript

Reference:

Internet & World Wide Web: How To Program, 3rd Ed., Dietel & Goldberg,

Prentice Hall



Introduction



Today’s Topics

• Introduction to Javascript

• Simple Programs

• Keywords

• Operators

• Variables



Introduction to Javascript

• To make web pages more dynamic and interactive

• An Interpreter-based language

• It is not Java

• Case-sensitive

• Must be embedded into HTML

• Browser dependent



What is Javascript

• Official name: ECMAScript maintain by ECMA organisations

• ECMA 262 – official Javascript standard based on Javascript (Netscape) & Jscript (Microsoft)

• Invented by Brendan Eich at Netscape (with Navigator 2.0)

• Development is still in progress!


What is Javascript

• Java and Javascript is not the SAME – only similar to

Java and C++

• The fundamentals of Javascript are similar to Java

and/or C++


What is Javascript?

• was designed to add interactivity to HTML pages

• Is a scripting language

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

• Case-sensitive

• Must be embedded into HTML

• Browser dependent

• Execute whenever the HTML doc. which contain the script open by browser.

• Everyone can use JavaScript without purchasing a license


What Javascript can do?

• JavaScript gives HTML designers a programming tool

• JavaScript can put dynamic text into an HTML page

• JavaScript can react to events

• JavaScript can read and write HTML elements

• JavaScript can be used to validate data

• JavaScript can be used to detect the visitor's browser

• JavaScript can be used to create cookies


• Limited capability application

– Clocks

– Mouse Trailers (an animation that follows your mouse when you surf a site)

– Countdown timer

– Drop Down Menus

• The objective of Javascript is not for creating full-blown application running in a browser!

• Limited capability application

– Clocks

– Mouse Trailers (an animation that follows your mouse when you surf a site)

– Countdown timer

– Drop Down Menus

• The objective of Javascript is not for creating full-blown application running in a browser!

Examples usage of Javascript


Examples usage of Javascript

• Event management

• Form management & verification

• Dynamic HTML (DHTML)

• Client-Server application - AJAX


Introduction to Javascript

Embedding Javascript into HTML:

<script type=“text/javascript”>

<!—

Javascript code goes here

// —->

</script>

<script language=“javascript”>

<!—

Javascript code goes here

// —->

</script>


<html>

<head>

<title>A First Program in JavaScript</title>

<script type = "text/javascript">



</script>

</head>

<body></body>

</html>

Simple Programs

Internal script:

Output:


Debugging Errors:

Click this.

Warning icon means there are some

errors in your script



Debugging Errors:



<html>

<head>

<title>A First Program in JavaScript</title>

<script type = "text/javascript“ src = “welcome.js”>

</script>

</head>

<body></body>

</html>

Simple Programs

External script:

Output:

HTML document (welcome.html)

document.writeln("<h1>Welcome to JavaScript Programming!</h1>" );

External Javascript file (welcome.js)


<html>

<head>

<title>Printing Multiple Lines in a Dialog Box</title>




</script>

</head>

<body>

<p>Click Refresh (or Reload) to run this script again.</p>

</body>

</html>

Simple Programs

Example 2: displaying simple message box using alert dialog The window method alert displays

an alert dialog to the user.

When the alert dialog displays, the string

passed as its one argument is displayed.

The escape sequence \n is the newline

character that places all remaining text on the

next line.


Simple Programs

Output:



Esc ap e sequenc e Desc rip tion

\n Newline. Position the screen cursor at the beginning of the next line.

\t Horizontal tab. Move the screen cursor to the next tab stop.

\r Carriage return. Position the screen cursor to the beginning of the current line; do not advance

to the next line. Any characters output after the carriage return overwrite the characters

previously output on that line.

\\ Backslash. Used to represent a backslash character in a string.

\" Double quote. Used to represent a double quote character in a string contained in double

quotes. For example, window.alert( "\"in quotes\"" );

displays "in quotes" in an alert dialog.

\' Single quote. Used to represent a single quote character in a string. For example, window.alert( '\'in quotes\'' );

displays 'in quotes' in an alert dialog.

Fig. 7.5 Some c ommon esc ape sequenc es.


<html>

<head>

<title>Using Prompt Box</title>




</script>

</head>

<body>

<p>Click Refresh (or Reload) to run this script again.</p>

</body>

</html>

Simple Programs

Example 3: getting user input using prompt dialog

This string is used as a prompt message

default value

The window method prompt displays

an input dialog to the user.


Simple Programs

Output:



Keywords

JavaSc rip t Keyword s

break case continue delete do

else false for function if

in new null return switch

this true typeof var void

while with

Keywords that are reserved, but not used by JavaScript

catch class const debugger default

enum export extends finally import

super try

Fig. 8.2 JavaSc rip t keywords.



Operators

JavaSc rip t

opera tion

Arithmetic

opera tor

Algeb ra ic

exp ression

JavaSc rip t

exp ression

Addition + f + 7 f + 7

Subtraction - p – c p - c

Multiplication * bm b * m

Division / x / y or <Anchor9> or x y x / y

Modulus % r mod s r % s

Fig. 7.11 Arithmetic opera tors.

Arithmetic operators:

Relational operators: Sta ndard a lgeb ra ic

equa lity op era tor or

rela tiona l opera tor

JavaSc rip t

equa lity or rela tiona l

opera tor

Samp le

JavaSc rip t

c ond ition

Mea ning of

JavaSc rip t c ond ition

Equality operators

= == x == y x is equal to y

!= x != y x is not equal to y

Relational operators > > x > y x is greater than y

< < x < y x is less than y

>= x >= y x is greater than or equal to y

￡ <= x <= y x is less than or equal to y

Fig. 7.14 Equa lity and re la tiona l opera tors.



Operators Precedence and Associativity:

Opera tors Assoc ia tivity Type

() left to right parentheses

* / % left to right multiplicative

+ - left to right additive

< <= > >= left to right relational

== != left to right equality

= right to left assignment

Fig. 7.16 Prec edenc e and assoc ia tivity of the opera tors d isc ussed so fa r.



Variables

Declaring and assigning variables:

var variable1; // example 1 – declaring a variable without any value

var variable2 = 100; // example 2 – declaring and assigning a variable

variable3 = 3.823; // example 3 – assigning without declaring first

Data type will affect the result of an operation:

Example:

num1 = 7; // an integer number

num2 = 2.0; // a real number

num3 = 2; // an integer number

ch = ‘2’; // a character

result = num1/num2; // result=3.5

result = num1/num3; // result=3.5, do not be confused with C

result = num1 + num2; // result=9

result = num1 + ch; // result=’72’;

result = ch + num1; // result=’2’;



Today’s Topics

• Selections

• Repetitions

• Jump statements



True and False in arithmetic scale

Logical data

• Also called Boolean

• Two types of boolean value: true and false

• For non-boolean data:

• a Zero value is treated as false

• a Non-Zero value is treated as true



Relational operators

Highest precedence

Lowest precedence



Operations for logical and/or



Selections



• Part 1 : the condition - an expression that is evaluated to

TRUE or FALSE.

if statement

if (score > 50)

{

document.write(“PASS”);

}

else

{

document.write(“FAIL”);

}



if (score > 50)

else

{

grade = FAIL;

}

• Part 2 : the TRUE-PART - a block of statements that are executed if the condition evaluates to TRUE

{


}

if statement



if (score > 50)

{

grade = PASS;

}

else

• Part 3 : the FALSE-PART - a block of statements that are

executed if the condition evaluates to FALSE

{


}

if the condition

evaluates to FALSE,

the TRUE-PART is skipped.

if statement



• Sometimes there is no FALSE-PART:

if ( attendance < 0.8 )

{


}

if statement



• If the TRUE-PART (or FALSE-PART) consists of only

one statement, then the curly braces may be

omitted.

• Example: these two statements are equivalent:

if (score > 50)

{


}

else

{


}

if (score > 50)


else


if statement



• Sometimes there are more than two parts. In those

cases you may use cascading (or nested) if/else

statements:

if (score > 90)

document.write(“Grade A”);

else if (score > 75)

document.write(“Grade B)”;


document.write(“Grade C”);


document.write(“Grade D”);

else

document.write(“Grade F”);

if statement



if(condition)

statement;

if (condition)

{ statement;

statement;

}

if (condition)

{ statement;

statement;

}

else

{ statement;

statement;

}

• Three forms of if statements

are shown at the next table.

• The condition is always in

parentheses

• All TRUE-PARTS and all FALSE-

PARTS are a single statement or

a block of statements (also

called compound statement)

if statement



Examples:

if ( attendance < 0.8 )

{


}

if statement

if (score > 90)

document.write(“Grade A”);


document.write(“Grade B)”;


document.write(“Grade C”);


document.write(“Grade D”);

else

document.write(“Grade F”);

if (score > 50)


else




• Simplifying the condition:

Simplifying if statements

if ( a != 0 )

statement;

if ( a > 0 )

statement;

if ( a < 0 )

statement;

if ( a )

statement;

Original statement

Simplified statment

if ( a==true )

statement;

if ( a!=false )

statement;



• Simplifying the condition:


if ( a==false )

statement;

if ( a!=true)

statement;

if ( a == 0 )

statement;

if (a )

statement;

Original statement

Simplified statment



• Example 1 : print a number only if it is an odd number


Original statement

Simplified statment

if ( n%2==1 )

document.write(n);

if ( n%2 )

document.write(n);

• Example 2: print a number only if it is an even number

Original statement

Simplified statment

if ( n%2==0 )

document.write(n);

if ( !(n%2) )

document.write(n);



Example 1



• If there are many nested if/else statements, you may be able

to replace them with a switch statement:

if (number == 1)

document.write(“One”);

else if (number == 2)

document.write(“Two”);


document.write(“Three”);


document.write(“Four”);

else

document.write(“Other number”);

switch (number)

{

case 1 : document.write(“One”);

break;

case 2 : document.write(“Two”);

break;

case 3 : document.write(“Three”);

break;

case 4 : document.write(“Four”);

break;

default:

document.write(“Other Number”);

break;

}

switch statement



switch (expression)

{

case value1: statements_1;

break;

case value2 : statements_2;

break;

...

default : statements;

break;

}

How the switch statement works?

1. Check the value of expression.

2. Is it equal to value1?

– If yes, execute the

statements_1 and break out of

the switch.

– If no, is it equal to value2?

etc.

3. If it is not equal to any values of

the above, execute the default

statements and then break out of

the switch.

switch statement


Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 45 Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 45

var value = 2;

switch (value)

{

case 1: document.write(“One”);

break;

case 2: document.write(“Two”);

break;

default : document.write(“Neither One nor Two”);

break;

}

switch statement

this expression

evaluates to 2

it is not equal to

this case-value

(i.e. 2!=1). So,

skip the

statements of

case 1 and move

to the next case. Prints Two

Output:

Two

break out of the switch it is equal to this

case-value (i.e.

2==2). So,

execute the

statements of the

‘case 2‘.

Example:


var value = 1;

switch (value)

{

case 1: document.write(“One ”);

case 2: document.write(“Two ”);

break;

default : document.write(“Neither One nor Two”);

break;

}

switch statement

evaluates to 1

it is equal to this

case-value (i.e.

1==1). So,

execute the

statements of the

case 1.

Prints One

Output:

One Two

break out of the switch

What if the break

statement is not

written?

No break

statement here.

So, no break

out and move

to the next

line.

Prints Two



Repetitions



for loops

Example: Prints odd numbers between 0 –10.

for (initialization; condition; update)

{

statements;

}

for (var n=1; n<10; n +=2)

{

document.write(n + “ <br>“);

}

Output:

1

3

5

7

9



while loops

Example: Prints odd numbers between 0 –10.

while (condition)

{

statements;

}

var n=1;

while (n<10)

{


n +=2;

}

Output:

1

3

5

7

9



do-while loops

Example: Prints odd numbers from 1 – 9.

do

{

statements;

} while (condition)

var n=1;

do

{


n +=2;

} while (n<10)

Output:

1

3

5

7

9



Nested loops

for (i = 1; i <= 5; i++)

{

for (j = 1; j <= i; j++)

document.write ("*");

document.write(“<br>");

}

Output:

*

**

***

****

*****



Jump

Statements



• Repetition of a loop is controlled by the loop condition.

• We can alter the flow of control by using using jump statements.

• Javascript provides three jump statements:

Jump statements



• It causes a loop to terminate

Example:

break statement

for (n=10; n>0; n=n-1)

{

if (n<8) break;

document.write(n, “ ”);

}

Output:

10 9 8



break statement



outer: { // labeled block – outer block

for (var i=5; i>0; i--)

{ // inner block

for (var j=0; j<i; j++)

{

if (j==2) break;

if (i==3) break outer;

document.writeln(i," ");

}

document.writeln("<br>");

}

}

break statement with label

Output:

5 5

4 4

This break (without label) terminates

the inner for loop.

This break (with label) terminates

the outer for loop

Example: with break statement



• In while and do…while loops, the continue statement transfers the flow of control to the loop condition.

• In for loop, the continue statement transfers the flow of control to the updating part.

continue statement

Figure 6-22: The continue statement



Example:

continue statement

for (n=10; n>0; n=n-1)

{

if (n%2==1) continue;

document.write(n,“ ”);

}

Output:

10 8 6 4 2



outer: { // labeled loop – outer loop

for (var i=5; i>0; i--)

{ // inner block

for (var j=0; j<i; j++)

{

if (j%2 == 1) continue;

if (i%2 == 0) continue outer;

document.writeln(i," ");

}

document.writeln("<br>");

}

}

continue statement with label

Output:

0 2 4

0 2

0

This continue (without label)

skips the remaining statements

in the same loop and goes to

the updating part (j++)

This continue (with label)

skips the remaining

statements and goes to

the updating part of the

outer loop (i--)

Example: with continue statement



• It causes a function to terminate. Example:

return statement

function print_numbers()

{ var n=10;

var i;

while (n>0)

{

for (i=n;i>0; i--)

{

if (i%2==1) continue;

if (i%4==0) break;

if (n==6) return;

document.write(i, “ “);

}

document.writeln(“<br>");

n=n-1;

}

}

Output:

10

6

The continue statement

transfers control to the

updating part ( i-- )

The break statement

terminates the for loop.

The return statement

terminates the function

and returns to the caller.



• When to use return?

• Example: the following functions are equivalent

return statement

function calc_point(grade)

{

var result;

if (grade=='A') result = 4.0;

else if (grade=='B') result = 3.0;

else if (grade=='C') result = 2.5;

else if (grade=='D') result = 2.0;

else result = 0.0;

return result;

}

function calc_point(grade)

{

if (grade=='A') return 4.0;

if (grade=='B') return 3.0;

if (grade=='C') return 2.5;

if (grade=='D') return 2.0;

return 0.0;

}

The else part of each if

statement may be omitted. It

has never been reached.



return statement

function calc_point3(grade)

{

var result;

switch (grade)

{

case 'A': result = 4.0;

break;

case 'B': result = 3.0;

break;

case 'C': result = 2.5;

break;

case 'D': result = 2.0;

break;

default: result =0.0;

}

return result;

}

function calc_point4(grade)

{

switch (grade)

{

case 'A': return 4.0;

case 'B': return 3.0;

case 'C': return 2.5;

case 'D': return 2.0;

}

return 0.0;

}

The break statement of each

case may be omitted. It has

never been reached.



Today’s Topics

• Functions

• Arrays

• Objects



Functions



Involves two steps:

Define: to define what processes should be taken

Call/Invoke: to execute the functions

Syntax of function definition:

function function_name (param1, param2, .., param_n)

//parameters are optional

{

//function’s code goes here

return value_or_object; //optional

}

Creating functions



Example:

<html>

<head>

<title> simple function </title>

<script language=“Javascript”>

//function definition

function hello()

{ alert(“Hello World”);

}

</script>

</head>

<body onLoad=“javascript:hello();”> <!-– function invocation-->

</body>

</html>

Creating functions (cont.)



Arrays



var a = new Array(12);// create 12-element array

var b = new Array(); // create an empty array

var c = new Array(12,10,11); // create 3-element array

// and initialize its elements with specified values

var d = [12,10,11]; // same as array ‘c’

var e = [1,,,10]; // only the first and last elements are

// initilized

Creating arrays



var A =new Array();

A.push(10);

A.push(20);

A.push(“Ali”);

A.push(2.34);

Result:

Inserting values into array

A[0] 2.34

A[1] Ali

A[2] 20

A[3] 10



var A =new Array();

A[0]= 10;

A[1]= 20;

A[2]=“Ali”;

A[3]=2.34;

Result:

Inserting values into array (cont.)

A[0] 10

A[1] 20

A[2] Ali

A[3] 2.34

// the following is better and more flexible

var A =new Array();

A[0]= 10;

A[A.length]= 20;

A[A.length]=“Ali”;

A[A.length]=2.34;



Traversing the elements of array // Example: summing up the elements of array A

sum =0;

for (var i=0; i<A.length; i++)

sum += A[i];

// Another way, using for-in loop

sum =0;

for (var i in A)

sum += A[i];



Traversing the elements of array

• concat()

- Join the contents in three arrays together and

display

• pop()

- Remove the last element of an array

• sort()

- sort an array alphabetically and ascending



Javascript Array - Multidimensional

• Technically, JavaScript does not support multi-

dimensional arrays

• Because array is an object, you can put object inside of

another object, so emulating a multi dimensional array

• So it is possible to have a different dimension (column)

for each row!



Javascript Array - Multidimensional

• var myarray=new Array(3)

• Create a multidimensional array



Objects



Creating classes

function class_name (property_1, . . ., property_n)

{

this.property_1 = property_1

. . .

this.property_n = property_n

this.method_1 = method_name_1

. . .

this.method_n = method_name_n

}

function method_name_1()

{

}

function method_name_n()

{

. . .

}



Creating classes (cont.)

Example:

function Person(aName,age)

{

this.name = aName;

this.age = age;

this.displayInfo = print;

}

function print()

{

window.alert(“Name= “ + this.name +

“\nAge= “ + this.age);

}



Creating object and accessing its members

object_name = new class_name (property_1, property_2, …..);

Example:

// creating an object of class Person

person1 = new Person(“Ali”,20);

// displaying info of person1

person1.displayInfo();

// changing property

person1.age=23;



Array of objects

Example:

var person_list = new Array(); // creating array

// inserting objects into the array elements

person_list[0]= new Person(“Ali”,20);

person_list[1]= new Person(“Aminah”,24);

person_list[2]= new Person(“Bakar”,19);

// displaying info of all persons

for (var i=0; i<person_list.length; i++)

person_list[i].displayInfo();

// calculating the average age of all persons

sum=0;

for (var i=0; i<person_list.length; i++)

sum += person_list[i].age;

average = sum / person_list.length;



Document Object Model



Document Object Model

• In the JavaScript binding, HTML elements are represented as objects and element attributes are represented as properties

Example:

<input type = "text" name = "address">

would be represented as an object with two properties, type and name, with the values "text" and "address"



Accessing Elements

There are several ways to access elements in JavaScript: 1. DOM address Example: Assuming we have an HTML document with just one form and one widget

<form>

<input type = "button" name = “button1">

</form>

To access the button in JavaScript:

document.forms[0].element[0]



2. Element Names Example: HTML document:

<form name = “form1”>

<input type = "button" name = “button1">

</form>


document.form1.button1

Accessing Elements (cont.)



3. Element IDs Example: HTML document:


<input type = "button"

name = “button1“

id=“button1” >

</form>


document.getElementById(“button1”)




• Once accessing an element, you can then access its attributes Example: HTML document:


<input type = "button“ name = “button1“

id=“button1” value=“Click on me”>

</form>

To change the button’s text from “Click on me” to “Ok”:

document.getElementById(“button1”).value = “Ok”


To make the text bold and red in color:

var btn = document.getElementById(“button1”); //firstly, access the button btn.style.color = “red”; // then, access the attributes btn.style.fontWeight = “bold”;



• If two different HTML elements use the same name, the name becomes an array in JavaScript.

Example: HTML document:


<input type = "button“ name = “btn“ value=“Ok”>

<input type = "button“ name = “btn“ value=“Cancel”>

</form>

In JavaScript:

document.form1.btn refers to an array of buttons


To refer to button “Cancel”:

document.form1.btn[0]



This feature is useful for manipulating checkboxes and radio buttons Example: HTML document:

<form id = "topGroup">

<input type = "checkbox" name = "toppings"

value = "olives">

...

<input type = "checkbox" name = "toppings"

value = "tomatoes">

</form>

In JavaScript, to calculate the number of checkboxes selected by the user:

var numChecked = 0;

var dom = document.getElementById("topGroup");

for index = 0; index < dom.toppings.length; index++)

if (dom.toppings[index].checked]

numChecked++;




Navigator

String

image

Array

Date

Math

button

window

history

frame

location document

applet

anchor

form

area

link

radio

text

reset

select

checkbox

submit

password

textarea

file

hidden

JavaScript Core Objects DHTML Object Model

Built-in Objects



• An event is a notification that something specific has occurred, either with the browser or an action of the browser user

• An event handler is a script that is implicitly executed in response to the appearance of an event

• The process of connecting an event handler to an event is called registration

Event Tag Attribute

blur onblur

change onchange

click onclick

focus onfocus

load onload

mousedown onmousedown

mousemove onmousemove

mouseout onmouseout

mouseover onmouseover

mouseup onmouseup

select onselect

submit onsubmit

unload onunload

Handling Events



• Event handlers can be registered by assigning the event handler script to an event tag attribute

Handling Events (cont.)

Examples: <input type=“button” name=“button1” value=“Ok”

onclick = "alert('Mouse click!');“ >

<input type=“button” name=“button1” value=“Ok”

onclick = “myHandler();“ >



JS: Built-in objects

• Date

• String

• Math



JS: Built-in objects - Date

• The Date object is useful when you want to display a date or use a timestamp in some sort of calculation.

• You can either make a Date object by supplying the date of your choice,

• or you can let Javascript create a Date object based on your visitor's system clock.

• It is usually best to let Javascript simply use the system clock.



JS: Built-in objects – Date

Activity 8 • getTime() - Number of milliseconds since 1/1/1970 @

12:00 AM

• getSeconds() - Number of seconds (0-59)

• getMinutes() - Number of minutes (0-59)

• getHours() - Number of hours (0-23)

• getDay() - Day of the week(0-6). 0 = Sunday, ... , 6 = Saturday

• getDate() - Day of the month (0-31)

• getMonth() - Number of month (0-11)

• getFullYear() - The four digit year (1970-9999)




• We check to see if hours or minutes is

less than 10, if it is then we need to add

a zero to the beginning of minutes.

• This is not necessary, but if it is 1:01 AM

then our clock would output "1:1 AM",

which doesn't look very nice at all!



JS: Popup window properties

• dependent - Subwindow closes if parent(the window that opened it) window closes

• fullscreen - Display browser in full screen mode

• height - The height of the new window, in pixels

• width - The width of the new window, in pixels

• left - Pixel offset from the left side of the screen

• top - Pixel offset from the top of the screen

• resizable - Allow the user to resize the window or prevent resizing

• status - Display the status bar or not



JS: Confirm

• Confirmation are most often used to

confirm an important action that is

taking place on a website.

• For example they may be about to submit

an order or about to visit a link that will

take them away from the current

website.



JS: Redirect

• To send user to your new website

location

• In case of changing website

address/domain


javascriptjavascript| sck3633 last updated january 2006 web programming | jumail, fsksm, utm, 2006 |...

Documents