Download presentation
Presentation is loading. Please wait.
1
Presentation 7: JavaScript continued Control structures and functions Fundamentals of Web-Centric Development
2
Ingeniørhøjskolen i Århus Slide 2 af 15 This presentation Overview of JavaScript’s support of –Variables –Operators –Control structures –Functions Different examples Comments to students –From previous programming experience you will know most of it –Ex. In this course it is presumed that you now about algorithms recursion, pseudo code, control structures, loop in general and boolean expressions etc
3
Ingeniørhøjskolen i Århus Slide 3 af 15 Variable Loosely-typed language Types –Number, Boolean, String, Function, Object Variable declared by –var [= ] –Notice: no type to the var Scope –Global and local –Like other typical programming language (Nearest scope) –Local variables leaves scope and disappears
![Ingeniørhøjskolen i Århus Slide 3 af 15 Variable Loosely-typed language Types –Number, Boolean, String, Function, Object Variable declared by –var [= ] –Notice: no type to the var Scope –Global and local –Like other typical programming language (Nearest scope) –Local variables leaves scope and disappears](http://images.slideplayer.com./10/2833742/slides/slide_3.jpg "Ingeniørhøjskolen i Århus Slide 3 af 15 Variable Loosely-typed language Types –Number, Boolean, String, Function, Object Variable declared by –var [= ] –Notice: no type to the var Scope –Global and local –Like other typical programming language (Nearest scope) –Local variables leaves scope and disappears")
4
Ingeniørhøjskolen i Århus Slide 4 af 15 Operators Arithmetic's +, -, *, /, %, +, +=, … Equations ==, !=, NOTICE NEVER USE “=“ in equations Boolean && = AND, || = OR, ! = NOT Strings Concatenating of strings ”alfa”+”beta” = ”alfabeta”
5
Ingeniørhøjskolen i Århus Slide 5 af 15 Control structures Like other programming languages: –If-else if (<>) { … } else { … } –Switch-case switch ( ) { case : … break; … default: … }
6
Ingeniørhøjskolen i Århus Slide 6 af 15 Loops More control structures –For loop for (var counter=0; counter<list.length; counter++) { … use a counter. counter for indexing an array. } –While loop while (list.next()) { … } –Do/while loop (at least one loop) do { … } while { … }
7
Ingeniørhøjskolen i Århus Slide 7 af 15 Functions Used for: –Structuring and encapsulating functionality –Event handling (more when DHTML) –Example: calculations –Example: validating of user input HTML element <FORM.. Declaration: function oneAddition (x, y) { var sum = x+y; return(sum); } Invoking: var sumRetur = oneAddition(3, 4) ; Objects following presentation.
8
Ingeniørhøjskolen i Århus Slide 8 af 15 Examples Some Examples using functions and control structures in XHTML
9
Ingeniørhøjskolen i Århus Slide 9 af 15 Average.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Class Average Program 11 12 13 <!-- 14 var total, // sum of grades 15 gradeCounter, // number of grades entered 16 gradeValue, // grade value 17 average, // average of all grades 18 grade; // grade typed by user 19 20 // Initialization Phase 21 total = 0; // clear total 22 gradeCounter = 1; // prepare to loop 23 24 // Processing Phase 25 while ( gradeCounter <= 10 ) { // loop 10 times 26 27 // prompt for input and read grade from user 28 grade = window.prompt( "Enter integer grade:", "0" ); 29 30 // convert grade from a string to an integer 31 gradeValue = parseInt( grade ); 32 33 // add gradeValue to total 34 total = total + gradeValue; 35 The while loop will execute the statements in the body of the loop until the value of gradeCounter equals 10. Prompt for the user input a grade.Convert input to an integer. Add new grade to total.
10
Ingeniørhøjskolen i Århus Slide 10 af 15 Average.html Program Output 36 // add 1 to gradeCounter 37 gradeCounter = gradeCounter + 1; 38 } 39 40 // Termination Phase 41 average = total / 10; // calculate the average 42 43 // display average of exam grades 44 document.writeln( 45 " Class average is " + average + " " ); 46 // --> 47 48 49 50 51 Click Refresh (or Reload) to run the script again 52 53 Increment the counter. Calculate the average of the grades input by the user. Write the result to the XHTML document.
11
Ingeniørhøjskolen i Århus Slide 11 af 15 ForCounter.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Counter-Controlled Repetition 11 12 13 <!-- 14 // Initialization, repetition condition and 15 // incrementing are all included in the for 16 // structure header. 17 for ( var counter = 1; counter <= 7; ++counter ) 18 document.writeln( "<p style = \"font-size: " + 19 counter + "ex\">XHTML font size " + counter + 20 "ex " ); 21 // --> 22 23 24 25 InitializationRepetition conditionIncrementing
12
Ingeniørhøjskolen i Århus Slide 12 af 15 Program Output
13
Ingeniørhøjskolen i Århus Slide 13 af 15 BreakTest.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 11 Using the break Statement in a for Structure 12 13 14 15 <!-- 16 for ( var count = 1; count <= 10; ++count ) { 17 if ( count == 5 ) 18 break; // break loop only if count == 5 19 20 document.writeln( "Count is: " + count + " " ); 21 } 22 23 document.writeln( 24 "Broke out of loop at count = " + count ); 25 // --> 26 27 28 29 When the value of variable count equals 5, the break statement causes program control to proceed to the first line outside the for loop.
14
Ingeniørhøjskolen i Århus Slide 14 af 15 Functions Examples –Calculations –FORM Data validating (DHTML)
15
Ingeniørhøjskolen i Århus Slide 15 af 15 SquareInt.htm 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 A Programmer-Defined square Function 11 12 13 <!-- 14 document.writeln( 15 " Square the numbers from 1 to 10 " ); 16 17 // square the numbers from 1 to 10 18 for ( var x = 1; x <= 10; ++x ) 19 document.writeln( "The square of " + x + " is " + 20 square( x ) + " " ); 21 22 // The following square function's body is executed 23 // only when the function is explicitly called. 24 25 // square function definition 26 function square( y ) 27 { 28 return y * y; 29 } 30 // --> 31 32 33 34 Calling function square and passing it the value of x.Variable y gets the value of variable x. The return statement passes the value of y * y back to the calling function.
Similar presentations
