Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 1 Javascript Lecture 4 Lecture 4: Javascript| SCK3633.

Slides:

Advertisements

Similar presentations

Chapter 7 JavaScript: Introduction to Scripting. Outline Simple Programs Objects and Variables Obtaining User Input with prompt Dialogs – –Dynamic Welcome.

Advertisements

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic JavaScript: Introduction to Scripting.

Java review and more. Class Header  Public class Welcome  Case sensitive  Body of the class must be enclosed by braces.

1 Outline 13.1Introduction 13.2A Simple Program: Printing a Line of Text in a Web Page 13.3Another JavaScript Program: Adding Integers 13.4Memory Concepts.

 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.

Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 8: JavaScript I.

2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr

Introduction to JavaScript for Python Programmers

Introduction to scripting

4.1 JavaScript Introduction

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.

JavaScript: Control Structures September 27, 2005 Slides modified from Internet & World Wide Web: How to Program (3rd) edition. By Deitel, Deitel,

 2004 Prentice Hall, Inc. All rights reserved. Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

WEB DESIGN AND PROGRAMMING Introduction to Javascript.

 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

Week 9 PHP Cookies and Session Introduction to JavaScript.

Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.

Javascript. Outline Introduction Fundamental of JavaScript Javascript events management DOM and Dynamic HTML (DHTML)

 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.

CMPS 211 JavaScript Topic 1 JavaScript Syntax. 2Outline Goals and Objectives Goals and Objectives Chapter Headlines Chapter Headlines Introduction Introduction.

Javascript Browser – Client Side Processing Activity page/examples: Browser – Client Side Processing Activity page/examples:

 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.

Java Script: Arrays (Chapter 11 in [2]). 2 Outline Introduction Introduction Arrays Arrays Declaring and Allocating Arrays Declaring and Allocating Arrays.

Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.

JavaScript Scripting language What is Scripting ? A scripting language, script language, or extension language is a programming language.

Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.

 2000 Deitel & Associates, Inc. All rights reserved. Outline 8.1Introduction 8.2A Simple Program: Printing a Line of Text in a Web Page 8.3Another JavaScript.

Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.

JavaScript, Fourth Edition

 2000 Deitel & Associates, Inc. All rights reserved. Chapter 10 - JavaScript/JScript: Control Structures II Outline 10.1Introduction 10.2Essentials of.

COMP403 Web Design JAVA SCRİPTS Tolgay KARANFİLLER.

1 Chapter 3 – JavaScript Outline Introduction Flowcharts Control Structures if Selection Structure if/else Selection Structure while Repetition Structure.

4. Javascript M. Udin Harun Al Rasyid, S.Kom, Ph.D Lab Jaringan Komputer (C-307) Desain.

 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.

ECA 225 Applied Interactive Programming ECA 225 Applied Online Programming control structures, events, objects.

JavaScript 1 COE 201- Computer Proficiency. Introduction JavaScript scripting language ▫Originally created by Netscape ▫Facilitates disciplined approach.

Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing a Line of Text in a Web Page 7.3 Another JavaScript.

Adapted from  2004 Prentice Hall, Inc. All rights reserved. 5 th and 4 th ed: Chapters 6,7,8 SY306 Web and Databases for Cyber Operations SlideSet #6:

JavaScript. JavaScript Introduction JavaScript is the world's most popular programming language. It is the language for HTML and the web, for servers,

LECTURE # 8 : REPETITION STATEMENTS By Mr. Ali Edan.

Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 9 - JavaScript: Control Structures II Outline 9.1 Introduction 9.2 Essentials of Counter-Controlled.

CGS 3066: Web Programming and Design Spring 2016 Introduction to JavaScript.

REEM ALMOTIRI Information Technology Department Majmaah University.

1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.

JavaScript Tutorial First lecture 19/2/2016. Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a part.

INTERNET APPLICATIONS CPIT405 JavaScript Instructor: Rasha AlOmari

JavaScript: Control Structures I Outline 1 Introduction 2 Algorithms 3 Pseudocode 4 Control Structures 5 if Selection Structure 6 if/else Selection Structure.

 2001 Prentice Hall, Inc. All rights reserved. Outline 1 JavaScript.

© 2010 Robert K. Moniot1 Chapter 6 Introduction to JavaScript.

CGS 3066: Web Programming and Design Spring 2017

Chapter 6 JavaScript: Introduction to Scripting

Selection (also known as Branching) Jumail Bin Taliba by

Introduction to Scripting

Chapter 6: Conditional Statements and Loops

Chapter 7 - JavaScript: Introduction to Scripting

JavaScript: Introduction to Scripting

WEB PROGRAMMING JavaScript.

T. Jumana Abu Shmais – AOU - Riyadh

Chapter 7 - JavaScript: Introduction to Scripting

JavaScript: Introduction to Scripting

Chapter 7 - JavaScript: Introduction to Scripting

Chapter 7 - JavaScript: Introduction to Scripting

Chapter 7 - JavaScript: Introduction to Scripting

Presentation transcript:

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 1 Javascript Lecture 4 Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 1 programming.html

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, 3 rd Ed., Dietel & Goldberg, Prentice Hall Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 2

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 3 Introduction Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | 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 isn’t Java Case-sensitive Must be embedded into HTML Browser dependent Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 5

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 6 Introduction to Javascript Embedding Javascript into HTML: <!— Javascript code goes here // —-> <!— Javascript code goes here // —-> Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 6

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 7 A First Program in JavaScript  Simple Programs Internal script: Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 7

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 8 Debugging Errors: Click this. Warning icon means there are some errors in your script Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 8

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 9 Debugging Errors: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 9

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 10 A First Program in JavaScript Simple Programs External script: Output: HTML document (welcome.html) document.writeln(" Welcome to JavaScript Programming! " ); External Javascript file (welcome.js) Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 10

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 11 Printing Multiple Lines in a Dialog Box  Click Refresh (or Reload) to run this script again. 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 11

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 12 Simple Programs Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 12

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 13 Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 13

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 14 Using Prompt Box  Click Refresh (or Reload) to run this script again. Simple Programs Example 3: getting user input using prompt dialog This string is used as a prompt messagedefault value The window method prompt displays an input dialog to the user. Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 14

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 15 Simple Programs Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 15

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 16 Keywords Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 16

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 17 Operators Arithmetic operators: Relational operators: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 17

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 18 Operators Precedence and Associativity: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 18

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 19 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 19

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 20 Today’s Topics Selections Repetitions Jump statements Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 20

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 21 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 21

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 22 Relational operators Highest precedence Lowest precedence Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 22

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 23 Operations for logical and/or Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 23

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 24 Selections Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 24

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 25 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 25

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 26 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 26

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 27 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 27

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 28 Sometimes there is no FALSE-PART: if ( attendance < 0.8 ) { document.write(“FAIL”); } if statement Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 28

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 29 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(“FAIL”); else document.write(“FAIL”); if statement Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 29

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 30 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 30

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 31 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. _________________________ if statement Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 31

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 32 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(“FAIL”); else document.write(“FAIL”); Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 32

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 33 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 33

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 34 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 34

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 35 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 35

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 36 Example 1

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 37 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 37

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 38 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 38

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 39 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 Example: Output: Two Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 39

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 40 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 40

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 41 Repetitions Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 41

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 42 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 + “ “); } Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 42

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 43 while loops Example: Prints odd numbers between 0 –10. while (condition) { statements; } var n=1; while (n<10) { document.write(n + “ “); n +=2; } Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 43

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 44 do-while loops Example: Prints odd numbers from 1 – 9. do { statements; } while (condition) var n=1; do { document.write(n + “ “); n +=2; } while (n<10) Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 44

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 45 Nested loops for (i = 1; i <= 5; i++) { for (j = 1; j <= i; j++) document.write ("*"); document.write(“ "); } Output: * ** *** **** ***** Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 45

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 46 Jump Statements Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 46

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 47 ________________ Jump statements Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 47

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 48 ______________________________ Example: break statement for (n=10; n>0; n=n-1) { if (n<8) break; document.write(n, “ ”); } Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 48

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 49 break statement Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 49

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 50 It causes the flow of control jump to the end of labeled block Example: without break statement break statement with label for (var i=5; i>0; i--) { for (var j=0; j<i; j++) { document.writeln(i,” "); } document.writeln(" "); } Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 50

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 51 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(" "); } break statement with label Output: Example: with break statement Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 51

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 52 __________________ continue statement Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 52

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 53 Example: continue statement for (n=10; n>0; n=n-1) { if (n%2==1) continue; document.write(n,“ ”); } Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 53

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 54 Example: continue statement n = 10; while (n>0) { document.write(n, “ ”); if (n%2==1) continue; n = n –1; } Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 54

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 55 It causes the flow of control jump to the labeled loop Example: without continue statement continue statement with label for (var i=5; i>0; i--) { for (var j=0; j<i; j++) { document.writeln(i,” "); } document.writeln(" "); } Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 55

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 56 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(" "); } continue statement with label Output: Example: with continue statement Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 56

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 57 _____________________ 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(“ "); n=n-1; } Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 57

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 58 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; } Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 58

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 59 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; } Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 59

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 60 Today’s Topics Functions Arrays Objects Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 60

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 61 Functions Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 61

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 62 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 62

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 63 Example: simple function //function definition function hello() { alert(“Hello World”); } Creating functions (cont.) Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 63

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 64 Arrays Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 64

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 65 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 65

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 66 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 66

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 67 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 67

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 68 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 68

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 69 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

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 70 Javascript Array - Multidimensional Technically, JavaScript doesn't support multidimensional 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!

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 71 Javascript Array - Multidimensional var myarray=new Array(3) Create a multidimensional array

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 72 Objects Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 72

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 73 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 73

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 74 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 74

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 75 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 75

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 76 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| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 76

Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 77 document.write(" Big: " + txt.big() + " "); document.write(" Small: " + txt.small() + " "); document.write(" Bold: " + txt.bold() + " "); document.write(" Italic: " + txt.italics() + " "); document.write(" Fixed: " + txt.fixed() + " "); document.write(" Strike: " + txt.strike() + " "); document.write(" Fontcolor: " + txt.fontcolor("green") + " "); document.write(" Fontsize: " + txt.fontsize(6) + " "); document.write(" Subscript: " + txt.sub() + " "); document.write(" Superscript: " + txt.sup() + " "); document.write(" Blink: " + txt.blink() + " (does not work in IE, Chrome, or Safari) ");