Web engineering: Lecture 17, 18 - Majid Mumtaz

Chia sẻ: You You | Ngày: | Loại File: PDF | Số trang:31

Thêm vào BST

Báo xấu

60
lượt xem 3
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

This lecture introduce JavaScript Statements. In JavaScript we have the following conditional statements, that is If statement, if...else statement, if...else if...else statement, and switch statement. In this lecture, we will learn this four statements.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Web engineering: Lecture 17, 18 - Majid Mumtaz

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
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
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 object: Syntax for(var property_name in object){ statements; } 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
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
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
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: var txt=""; – Syntax function message() { try try { adddlert("Welcome guest!"); { } catch(err) { //Run some code here txt="There was an error on this page.\n\n"; txt+="Error description: " + err.message + } "\n\n"; txt+="Click OK to continue.\n\n"; catch(err) alert(txt); } { } //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! var txt= document.getElementById("intro").innerHTML; document.write(txt); 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