Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 1 Javascript Lecture 4 Lecture 4: Javascript| SCK3633."— Presentation transcript:

1 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 http://ngsiewteng-learningportfolio.weebly.com/web- programming.html

2 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

3 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

4 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

5 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

6 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

7 Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 7 A First Program in JavaScript <!-- document.writeln( " Welcome to JavaScript Programming! " ); // --> Simple Programs Internal script: Output: Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 7

8 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

9 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

10 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

11 Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 11 Printing Multiple Lines in a Dialog Box <!-- window.alert( "Welcome to\nJavaScript\nProgramming!" ); // --> 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

12 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

13 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

14 Javascript| SCK3633 Web Programming | Jumail, FSKSM, UTM, 2006 | Last Updated January 2006 Slide 14 Using Prompt Box <!-- var name; // string entered by the user // read the name from the prompt box as a string name = window.prompt ("Please enter your name", "Ali"); document.writeln(" Hello, " + name + ", welcome to JavaScript Programming! " ); // --> 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

15 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

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 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

27 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

28 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

29 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

30 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

31 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

32 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

33 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

34 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

35 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

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

37 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

38 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

39 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

40 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

41 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

42 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

43 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

44 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

45 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

46 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

47 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

48 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

49 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

50 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: 5 5 5 5 5 4 4 4 4 3 3 3 2 2 1 Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 50

51 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

52 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

53 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

54 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

55 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: 5 5 5 5 5 4 4 4 4 3 3 3 2 2 1 Lecture 4: Javascript| SCK3633 Web Programming | Jumail FSKSM UTM 2012 | Slide 55

56 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

57 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

58 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

59 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

60 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

61 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

62 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

63 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

64 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

65 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

66 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

67 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

68 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

69 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

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

71 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

72 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

73 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

74 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

75 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

76 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

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


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

Similar presentations


Ads by Google