Web Engineering: Bài giảng 17, 18

Web Engineering

Lecture 17-18 MAJID MUMTAZ Department of Computer Science, CIIT Wah

JavaScript Statements

• In JavaScript we have the following conditional

statements: – if statement - use this statement to execute some

code only if a specified condition is true

– if...else statement - use this statement to execute

some code if the condition is true and another code if the condition is false

– if...else if....else statement - use this statement to select one of many blocks of code to be executed

– switch statement - use this statement to select one of

many blocks of code to be executed

JavaScript Statements

• If Statement if (condition)

{ code to be executed if condition is true } • Example

if (time<20)

{ x="Good day"; }

JavaScript Statements

•

If...else Statement: Use the if....else statement to execute some code if a condition is true and another code if the condition is not true. – if (condition)

{ code to be executed if condition is true } else { code to be executed if condition is not true } Example:

JavaScript Statements

•

If...else if...else Statement: Use the if....else if...else statement to select one of several blocks of code to be executed. – if (condition1)

{ code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if neither condition1 nor condition2 is true }

JavaScript Statements

•

The JavaScript Switch Statement :Use the switch statement to select one of many blocks of code to be executed.

Syntax:

switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 } • Home work:

– Display today's weekday-name. Note that Sunday=0, Monday=1, Tuesday=2,

etc:

JavaScript Loops

• Loops can execute a block of code a number of

times.

• Different Kinds of Loops: JavaScript supports

different kinds of loops: – for - loops through a block of code a number of times – for/in - loops through the properties of an object – while - loops through a block of code while a specified

condition is true

– do/while - also loops through a block of code while a

specified condition is true

The For Loop

• The for loop has the following syntax: for (initialization; condition; Increment/decrement)

{ the code block to be executed }

The For/In Loop

• The JavaScript for/in statement loops through the properties of an

statements;

object: Syntax for(var property_name in object){ }

Example:

var txt="";

var person={Fname:“Ali“, Lname:“khan", age:25}; for (var x in person) { txt=txt + person[x]; }

Document.write(” ” + txt); // Alikhan25

JavaScript While Loop

• Loops can execute a block of code as long as a specified

condition is true.

• Syntax while (condition)

{ code block to be executed } Example:

var i =0; while (i<5)

{ document.write ("The number is " + i + "
“); i++; }

The Do/While Loop

• The do/while loop is a variant of the while loop. This loop will

execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

• Syntax do

{ code block to be executed } while (condition);

Example do

{ document.write ("The number is " + i + "
“); i++; } while (i<5);

Home work

• Create a for loop that displays numbers as: 10 9 8 7 6 5 4 3 2 1. Put the numbers in HTML table cells.

• Repeat same task using while loop • JavaScript dialog Boxes

– Alert box – Confirm box – Prompt box

JavaScript Break and Continue

• The break statement "jumps out" of a loop. • The continue statement "jumps over" one iteration in the

loop. E.g. Examples: 1. for (i=0;i<10;i++)

{ if (i==3) break; x=x + "The number is " + i + "
"; }

2. for (i=0;i<=10;i++)

{ if (i==3) continue; x=x + "The number is " + i + "
"; }

JavaScript Errors

• The try statement lets you test a block of code

for errors.

• The catch statement lets you handle the error. • The throw statement lets you create custom

errors.

JavaScript Errors

• JavaScript try and catch:

– Syntax try { //Run some code here } catch(err) { //Handle errors here }

The HTML DOM (Document Object Model)

• When a web page is loaded, the browser creates a Document Object Model of the page.

• The HTML DOM model is constructed as a

tree of Objects:

What is the DOM?

• The DOM is a W3C (World Wide Web

Consortium) standard.

• The DOM defines a standard for accessing

documents:

• "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

• Core DOM, XML DOM, HTML DOM

What is the HTML DOM?

• The HTML DOM is a standard object model and programming interface for HTML. It defines: – The HTML elements as objects – The properties of all HTML elements – The methods to access all HTML elements – The events for all HTML elements

HTML DOM Methods

• HTML DOM methods are actions you can perform (on HTML Elements) • HTML DOM properties are values (of HTML Elements) that you can set or

change

Example:

Hello World!

Note: getElementById is a method, while innerHTML is a property.

Finding HTML Elements

• Often, with JavaScript, you want to manipulate HTML

elements.

• To do so, you have to find the elements first. There are a

couple of ways to do this: – Finding HTML elements by id – Finding HTML elements by tag name – Finding HTML elements by class name – Finding HTML elements by HTML object collections

• Examples

– var x=document.getElementById("intro"); – var x=document.getElementById("main"); var y=x.getElementsByTagName("p");

– document.getElementsByClassName("intro");

Finding HTML Elements attributes

• Changing the Value of an Attribute

– To change the value of an HTML attribute, use this syntax: – document.getElementById(id).attribute=new value

• Example

HTML DOM - Changing CSS

• Changing HTML Style: To change the style of an

HTML element, use this syntax:

document.getElementById(id).style.property=new style Example

Hello World!

JavaScript and The Browser Object Model (BOM)

• JavaScript programs are associated with a browser window and the document displayed in the window. The window is a browser object and the document is an HTML object.

The document object model • The document object model refers to the HTML document and all the elements and attributes associated with it. Because your Web page is so closely linked to HTML (or XML), JavaScript uses the DOM to access the HTML elements and attributes within a page. The document is the root of this model.

Combination of browser and document object model

• By combining the browser and document object models, JavaScript allows you to manipulate all of the elements in a page as objects, from the window down the hierarchy.

The Window Object

•

The window object is supported by all browsers. It represent the browser's window.

• All global JavaScript objects, functions, and variables automatically become

members of the window object.

• Global variables are properties of the window object. • Global functions are methods of the window object. •

Even the document object (of the HTML DOM) is a property of the window object: e.g. window.document.getElementById("header"); is same as document.getElementById("header");

Some Window Methods

– Some other methods: – window.open() - open a new window – window.close() - close the current window – window.moveTo() -move the current window – window.resizeTo() -resize the current window

Window Screen

• The window.screen object can be written without the

window prefix. • Some properties:

– screen.availWidth - available screen width – screen.availHeight - available screen height

• Example

Output: Available Width: 1366

Window Location

• The window.location object can be written without the

window prefix. • Some examples:

– location.hostname returns the domain name of the web host – location.pathname returns the path and filename of the current

page

– location.port returns the port of the web host (80 or 443) – location.protocol returns the web protocol used (http:// or

https://)

• Window Location Href : The location.href property returns

•

the URL of the current page.

Window History

• The window.history object can be written

without the window prefix.

• To protect the privacy of the users, there are limitations to how JavaScript can access this object.

• Some methods:

– history.back() - same as clicking back in the browser – history.forward() - same as clicking forward in the

browser

Window Navigator

• The navigator object contains properties and methods that describe the browser. Netscape Navigator and Internet Explorer support the navigator object, but some browsers do not. You can use navigator object as “navigator.appCodeName” without using windows object.