Web Engineering
Lecture 17-18 MAJID MUMTAZ Department of Computer Science, CIIT Wah
1
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
2
JavaScript Statements
• If Statement if (condition)
{ code to be executed if condition is true } • Example
if (time<20)
{ x="Good day"; }
3
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:
if (time<20)
if(confirm("Are you really OK?") == true){ alert("Then we can proceed!");
} else{
alert("We'll try when you feel better? ");
{ x="Good day"; } else { x="Good evening"; }
}
4
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 }
5
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:
6
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
7
The For Loop
• The for loop has the following syntax: for (initialization; condition; Increment/decrement)
{ the code block to be executed }
8
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
9
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++;
}
10
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);
11
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
12
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 + "
";
}
13
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.
14
JavaScript Errors
• JavaScript try and catch:
– Syntax try { //Run some code here } catch(err) { //Handle errors here }
15
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:
16
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
17
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
18
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.
19
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");
20
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
document.getElementById("image").src="landscape.j pg";
21
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!
22
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.
23
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.
24
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.
25
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
26
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
document.write("Available Width: " + screen.availWidth);
Output: Available Width: 1366
27
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.
28
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
29
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.
30
Questions
31