Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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)
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 2
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 2
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 3
Introduction
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 3
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 4
Today’s Topics
• Introduction to Javascript
• Simple Programs
• Keywords
• Operators
• Variables
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 4
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 5
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 5
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 6
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!
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 7
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++
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 8
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
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 9
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
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 10
• 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
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 11
Examples usage of Javascript
• Event management
• Form management & verification
• Dynamic HTML (DHTML)
• Client-Server application - AJAX
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 12
Introduction to Javascript
Embedding Javascript into HTML:
<script type=“text/javascript”>
<!—
Javascript code goes here
// —->
</script>
<script language=“javascript”>
<!—
Javascript code goes here
// —->
</script>
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 12
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 13
<html>
<head>
<title>A First Program in JavaScript</title>
<script type = "text/javascript">
<!--
document.writeln(
"<h1>Welcome to JavaScript Programming!</h1>" );
// -->
</script>
</head>
<body></body>
</html>
Simple Programs
Internal script:
Output:
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 13
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 14
Debugging Errors:
Click this.
Warning icon means there are some
errors in your script
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 14
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 15
Debugging Errors:
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 15
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 16
<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)
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 16
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 17
<html>
<head>
<title>Printing Multiple Lines in a Dialog Box</title>
<script type = "text/javascript">
<!--
window.alert( "Welcome to\nJavaScript\nProgramming!" );
// -->
</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.
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 17
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 18
Simple Programs
Output:
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 18
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 19
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.
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 19
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 20
<html>
<head>
<title>Using Prompt Box</title>
<script type = "text/javascript">
<!--
var name; // string entered by the user
// read the name from the prompt box as a string
name = window.prompt ("Please enter your name", "Ali");
document.writeln("<h1>Hello, " + name +
", welcome to JavaScript Programming!</h1>" );
// -->
</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.
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 20
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 21
Simple Programs
Output:
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 21
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 22
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.
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 22
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 23
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.
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 23
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 24
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.
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 24
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 25
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’;
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 25
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 26
Today’s Topics
• Selections
• Repetitions
• Jump statements
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 26
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 27
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 27
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 28
Relational operators
Highest precedence
Lowest precedence
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 28
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 29
Operations for logical and/or
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 29
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 30
Selections
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 30
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 31
• 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”);
}
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 31
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 32
if (score > 50)
else
{
grade = FAIL;
}
• Part 2 : the TRUE-PART - a block of statements that are executed if the condition evaluates to TRUE
{
document.write(“PASS”);
}
if statement
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 32
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 33
if (score > 50)
{
grade = PASS;
}
else
• Part 3 : the FALSE-PART - a block of statements that are
executed if the condition evaluates to FALSE
{
document.write(“FAIL”);
}
if the condition
evaluates to FALSE,
the TRUE-PART is skipped.
if statement
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 33
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 34
• Sometimes there is no FALSE-PART:
if ( attendance < 0.8 )
{
document.write(“FAIL”);
}
if statement
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 34
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 35
• 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)
{
document.write(“PASS”);
}
else
{
document.write(“FAIL”);
}
if (score > 50)
document.write(“PASS”);
else
document.write(“FAIL”);
if statement
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 35
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 36
• 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)”;
else if (score > 60)
document.write(“Grade C”);
else if (score > 50)
document.write(“Grade D”);
else
document.write(“Grade F”);
if statement
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 36
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 37
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 37
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 38
Examples:
if ( attendance < 0.8 )
{
document.write(“FAIL”);
}
if statement
if (score > 90)
document.write(“Grade A”);
else if (score > 75)
document.write(“Grade B)”;
else if (score > 60)
document.write(“Grade C”);
else if (score > 50)
document.write(“Grade D”);
else
document.write(“Grade F”);
if (score > 50)
document.write(“PASS”);
else
document.write(“FAIL”);
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 38
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 39
• 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;
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 39
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 40
• Simplifying the condition:
Simplifying if statements
if ( a==false )
statement;
if ( a!=true)
statement;
if ( a == 0 )
statement;
if (a )
statement;
Original statement
Simplified statment
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 40
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 41
• Example 1 : print a number only if it is an odd number
Simplifying if statements
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);
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 41
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 42
Example 1
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 42
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 43
• 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”);
else if (number == 3)
document.write(“Three”);
else if (number == 4)
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 43
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 44
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 44
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:
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 46
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 46
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 47
Repetitions
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 47
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 48
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 48
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 49
while loops
Example: Prints odd numbers between 0 –10.
while (condition)
{
statements;
}
var n=1;
while (n<10)
{
document.write(n + “ <br>“);
n +=2;
}
Output:
1
3
5
7
9
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 49
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 50
do-while loops
Example: Prints odd numbers from 1 – 9.
do
{
statements;
} while (condition)
var n=1;
do
{
document.write(n + “ <br>“);
n +=2;
} while (n<10)
Output:
1
3
5
7
9
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 50
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 51
Nested loops
for (i = 1; i <= 5; i++)
{
for (j = 1; j <= i; j++)
document.write ("*");
document.write(“<br>");
}
Output:
*
**
***
****
*****
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 51
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 52
Jump
Statements
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 52
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 53
• 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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 53
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 54
• 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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 54
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 55
break statement
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 55
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 56
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 56
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 57
• 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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 57
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 58
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 58
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 59
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 59
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 60
• 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.
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 60
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 61
• 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.
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 61
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 62
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.
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 62
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 63
Today’s Topics
• Functions
• Arrays
• Objects
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 63
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 64
Functions
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 64
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 65
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 65
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 66
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.)
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 66
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 67
Arrays
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 67
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 68
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 68
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 69
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 69
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 70
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;
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 70
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 71
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];
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 71
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 72
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 72
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 73
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!
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 73
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 74
Javascript Array - Multidimensional
• var myarray=new Array(3)
• Create a multidimensional array
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 74
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 75
Objects
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 75
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 76
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()
{
. . .
}
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 76
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 77
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);
}
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 77
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 78
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;
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 78
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 79
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;
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 79
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 80
Document Object Model
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 80
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 81
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"
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 81
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 82
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]
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 82
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 83
2. Element Names Example: HTML document:
<form name = “form1”>
<input type = "button" name = “button1">
</form>
To access the button in JavaScript:
document.form1.button1
Accessing Elements (cont.)
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 83
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 84
3. Element IDs Example: HTML document:
<form name = “form1”>
<input type = "button"
name = “button1“
id=“button1” >
</form>
To access the button in JavaScript:
document.getElementById(“button1”)
Accessing Elements (cont.)
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 84
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 85
• Once accessing an element, you can then access its attributes Example: HTML document:
<form name = “form1”>
<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”
Accessing Elements (cont.)
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”;
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 85
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 86
• If two different HTML elements use the same name, the name becomes an array in JavaScript.
Example: HTML document:
<form name = “form1”>
<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
Accessing Elements (cont.)
To refer to button “Cancel”:
document.form1.btn[0]
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 86
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 87
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++;
Accessing Elements (cont.)
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 87
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 88
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 88
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 89
• 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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 89
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 90
• 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();“ >
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 90
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 91
JS: Built-in objects
• Date
• String
• Math
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 91
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 92
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.
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 92
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 93
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)
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 93
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 94
JS: Built-in objects - Date
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 94
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 95
JS: Built-in objects - Date
• 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!
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 95
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 96
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
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 96
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 97
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.
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 97
Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 98
JS: Redirect
• To send user to your new website
location
• In case of changing website
address/domain
Lecture 4: Javascript| SCSV1223 Web Programming | Jumail FC UTM 2013 | Slide 98