Scribd
Upload
366 views

04 Javascript

This document provides an overview of JavaScript programming concepts including: - Embedding JavaScript code in HTML documents using <script> tags. - Common JavaScript keywords, variables, operators, control structures like if/else statements and loops. - Examples of JavaScript programs to display messages, get user input, and perform basic calculations. - Debugging JavaScript code using browser developer tools to identify and fix errors. - Escape sequences to include special characters in strings and different data types in JavaScript.

Uploaded by

Peter Hazops
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
366 views

04 Javascript

This document provides an overview of JavaScript programming concepts including: - Embedding JavaScript code in HTML documents using <script> tags. - Common JavaScript keywords, variables, operators, control structures like if/else statements and loops. - Examples of JavaScript programs to display messages, get user input, and perform basic calculations. - Debugging JavaScript code using browser developer tools to identify and fix errors. - Escape sequences to include special characters in strings and different data types in JavaScript.

Uploaded by

Peter Hazops
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

WEB PROGRAMMING SCV1223 Javascript

Dr. Md Sah bin Hj Salam En. Jumail bin Taliba

Outline
Introduction Fundamental of Javascript:
Keywords, variables, operators Control Statements Functions Arrays Objects

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

Introduction to Javascript
To make web pages more dynamic and interactive An Interpreter-based language It isnt Java Case-sensitive Must be embedded into HTML Browser dependent

Introduction to Javascript
Embedding Javascript into HTML: <script type=text/javascript> <! Javascript code goes here // -> </script>

<script language=javascript>
<!

Javascript code goes here


// ->

</script>

Internal script:

Simple Program

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

Output:

Debugging Errors:

Click this.
Warning icon means there are some errors in your script

Debugging Errors:

External script:

Simple Program

HTML document (welcome.html)

<html> <head> <title>A First Program in JavaScript</title> <script type = "text/javascript src = welcome.js> </script> </head> <body></body> </html>

External Javascript file (welcome.js)


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

Output:

Simple Programs
Example 2: displaying simple message box using alert dialog
<html> an alert dialog to the user. <head> <title>Printing Multiple Lines in a Dialog Box</title> <script type = "text/javascript"> <!-window.alert( "Welcome to\nJavaScript\nProgramming!" ); // --> When the alert dialog displays, the string </script> passed as its one argument is displayed. </head> <body> character that places all remaining text on the <p>Click Refresh (or Reload) to run this script again.</p> next line. </body> </html>

The window method alert displays

The escape sequence \n is the newline

Simple Programs
Output:

Esc a p e seq ue nc e

De sc rip tio n

\n \t \r

Newline. Position the screen cursor at the beginning of the next line. Horizontal tab. Move the screen cursor to the next tab stop. 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

Som e c om m on esc a p e seq uenc es.

Simple Programs
Example 3: getting user input using prompt dialog
<html> <head> <title>Using Prompt Box</title> This <script type = "text/javascript"> <!-var name; // string entered by the user

string is used as a prompt message default value

// 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> The window method prompt displays </head>

an input dialog to the user.

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

Simple Program
Output:

Keywords
Ja va Sc rip t Ke yw ord s

break

case

continue

delete function return var

do if switch void

else false for in new null this true typeof while with Keywords that are reserved, but not used by JavaScript catch class const enum export extends super try Fig. 8.2 Ja va Sc rip t ke yw ord s.

debugger finally

default import

Arithmetic operators:
Ja va S c rip t op era tio n Arithm etic op era tor

Operators
Alg eb ra ic exp ression Ja va S c rip t exp ression

Addition Subtraction Multiplication Division Modulus

+ * / %
op e ra tors.

f+7 pc bm x / y or <Anchor9> or x y r mod s

f + 7 p - c b * m x / y r % s

Fig. 7.11 Arithm etic

Relational operators:
S ta nd a rd a lg eb ra ic eq ua lity op era tor or rela tiona l op era tor Ja va S c rip t eq ua lity or rela tio na l op era tor S a m p le Ja va S c rip t c o nd itio n Mea ning of Ja va S c rip t c o nd itio n

Equality operators
=

Relational operators
> <

== != > < >= <=


re la tiona l op era tors.

x == y x != y x x x x > y < y >= y <= y

x is equal to y x is not equal to y x is greater than y x is less than y x is greater than or equal to y x is less than or equal to y

Fig. 7.14 Eq ua lity a nd

Precedence and Associativity:


Op era tors Assoc ia tivity

Operators
Typ e

() * / % + < <= > >= == != = Fig. 7.16 Prec ed e nc e a nd

left to right left to right left to right left to right left to right right to left

parentheses multiplicative additive relational equality assignment

a ssoc ia tivity of the op e ra tors d isc ussed so fa r.

Variables
Declaring and assigning variables:
var variable1; var variable2 = 100; variable3 = 3.823; // example 1 declaring a variable without any value // example 2 declaring and assigning a variable // example 3 assigning without declaring first

Data type will affect the result of an operation:


Example:
num1 num2 num3 ch = = = = 7; // an integer number 2.0; // a real number 2; // an integer number 2; // a character = = = = = num1/num2; num1/num3; num1 + num2; num1 + ch; ch + num1; // // // // // result=3.5 result=3.5, do not be confused with C result=9 result=72; result=2;

result result result result result

Selections

if statement
Three forms of if statements are shown at the next table.
if(condition) statement; if (condition) { statement; statement; } if (condition) { statement; statement; } else { statement; statement; }

The condition is always in parentheses


All TRUE-PARTS and all FALSEPARTS are a single statement or a block of statements (also called compound statement)

Examples:

if statement
if (score > 50)
document.write(FAIL);

if ( attendance < 0.8 ) {


document.write(FAIL);

else
document.write(FAIL);

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);

switch statement
switch (expression) { case value1: statements_1; break; case value2 : statements_2; break; ... default : statements; break; } 3. How the switch statement works?

1.
2.

Check the value of expression.


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. If it is not equal to any values of the above, execute the default statements and then break out of the switch.

switch statement
Example: var value = 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. it is equal to this case-value (i.e. 2==2). So, execute the statements of the case 2. this expression evaluates to 2

switch (value) { case 1: document.write(One); break; case 2: document.write(Two); break;


break out of the switch Prints Two

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

break; }
Output:

Two

Repetitions

for loops
for (initialization; condition; update) { statements; }
Example: Prints odd numbers between 0 10.

Output: for (var n=1; n<10; n +=2) { document.write(n + <br>); } 1 3 5 7 9

while loops
while (condition) { statements; }
Example: Prints odd numbers between 0 10.

var n=1;
while (n<10) { document.write(n + <br>); n +=2; }

Output: 1 3 5 7 9

do-while loops
do { statements; } while (condition)
Example: Prints odd numbers from 1 9.

var n=1;
do { document.write(n + <br>); n +=2; } while (n<10)

Output: 1 3 5 7 9

Jump Statements

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:

break statement
It causes a loop to terminate Example: for (n=10; n>0; n=n-1) { if (n<8) break; document.write(n, ); } Output: 10 9 8

break statement

break statement with label


Example: with break statement
outer: { // labeled block outer block for (var i=5; i>0; i--) { // inner block for (var j=0; j<i; j++) { This break (without label) terminates the inner for loop. if (j==2) break; if (i==3) break outer; document.writeln(i," "); This break (with label) terminates the outer for loop } document.writeln("<br>"); } }

Output: 5 5 4 4

continue statement
In while and dowhile 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.

Figure 6-22: The continue statement

continue statement
Example:

for (n=10; n>0; n=n-1) { if (n%2==1) continue; document.write(n, ); }

Output: 10 8 6 4 2

continue statement with label


Example: with continue statement
outer: { // labeled loop outer loop for (var i=5; i>0; i--) This continue (without label) { // inner block skips the remaining statements in the same loop and goes to for (var j=0; j<i; j++) the updating part (j++) { if (j%2 == 1) continue; This continue (with label) skips the remaining if (i%2 == 0) continue outer; statements and goes to the updating part of the document.writeln(i," "); outer loop (i--) } document.writeln("<br>"); } }

Output: 0 2 4 0 2 0

return statement
It causes a function to terminate.
Example:
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; } The return statement terminates the function and returns to the caller.

Output: 10
The continue statement transfers control to the updating part ( i-- ) The break statement terminates the for loop.

return statement
When to use return? Example: the following functions are equivalent
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: } return result; } result =0.0;

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.

Functions

Creating 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

{
//functions code goes here

return value_or_object; //optional }

Creating functions (cont.)


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>

Arrays

Creating arrays
var a = new Array(12);// var b = new Array(); //
create 12-element 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]; var e = [1,,,10];

// same as array c

// only the first and last elements are // initilized

Inserting values into array


var A =new Array(); A.push(10); A.push(20); A.push(Ali); A.push(2.34); Result:
A[0] A[1] A[2] A[3]

2.34 Ali 20 10

Inserting values into array


var A =new Array(); A[0]= 10; A[1]= 20; A[2]=Ali; A[3]=2.34; Result:
A[0] A[1] A[2] A[3]

(cont.)

// 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;

10 20

Ali
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];

Objects

Creating classes
function class_name { this.property_1 . . . this.property_n this.method_1 = . . . this.method_n = } (property_1, . . ., property_n) = property_1 = property_n method_name_1 method_name_n

function method_name_1() { } function method_name_n() { . . . }

Creating classes
Example:
function Person(aName,age) { this.name = aName; this.age = age; this.displayInfo = print; } function print() { window.alert(Name= + this.name + \nAge= + this.age); }

(cont.)

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;

Example:

Array of objects

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;

Reference
Sebesta, R. W., Programming the World Wide Web, (2009), 5th Edition, Pearson. Deitel P. J, Deitel H. M., Internet & World Wide Web: How To Program, (2007), 5th Edition, Prentice Hall. Anderson-Freed S., (2001), Weaving A Website: Programming in HTML, JavaScript, PHP and Java. Prentice Hall

You might also like