Chapter 4(b): Fundamentals of JavaScript

Post on 30-Dec-2015

28 views 1 download

description

Chapter 4(b): Fundamentals of JavaScript. 4.1 Capabilities 4.2 Essential Terminology 4.3 Structure of JavaScript Code 4.4 Data and Objects 4.5 Tokens, Operators, Expressions, and Statements 4.6 The JavaScript math Object 4.7 Comparison Operators and Decision-Making Structures - PowerPoint PPT Presentation

Transcript of Chapter 4(b): Fundamentals of JavaScript

Chapter 4(b): Fundamentals of Chapter 4(b): Fundamentals of JavaScriptJavaScript

4.1 Capabilities 4.2 Essential Terminology 4.3 Structure of JavaScript Code 4.4 Data and Objects 4.5 Tokens, Operators, Expressions, and

Statements 4.6 The JavaScript math Object 4.7 Comparison Operators and Decision-Making

Structures 4.8 Loop Structures 4.9 Using JavaScript to Change Values in Form

Fields

Chapter 4.8:Chapter 4.8: Loop (Repetition) Structures Loop (Repetition) Structures

Loops provide a structured way to perform repetitive calculations.

Count-controlled loops perform calculations a pre-defined number of times.

Conditional loops perform calculations until, or as long as, some predefined condition is true.

Count-ControlledCount-Controlled Loops Loopsfor (counter=start; {expression based on high (or low) value of counter}; expression controlling incrementing (or decrementing) of counter})

Document 4.7 (counter2.htm)<html><head><title>Counter</title><script>var k;document.write("Here's a simple counter: "+"<br />");for (k=0; k<=10; k++) document.write(k+"<br />");</script></head><body></body></html>

More Count-Controlled LoopsMore Count-Controlled Loops

Document 4.8 (countdown2.htm)<html><head> <title>Countdown</title><script>var k;document.write("Start launch sequence!" +"<br />");for (k=10; k>=0; k--) document.write(k+"<br />");document.write("FIRE!!");</script></head><body></body></html>

Conditional LoopsConditional Loops Pre-test loops – may not be executed at all, depending on

initial settings.

while ( {logical expression} ) {{statements that result in changing the value of the pre-test

logical expression} }

Post-test loops – always executed at least once.

do {{statements that result in changing the value of the post-test logical expression}

} while ( {logical expression} );

The Elevator ProblemThe Elevator ProblemDocument 4.9 (gorilla1.htm, partial)<script language="javascript" type="text/javascript"> var totalWeight=0.,limitWeight=500.,maxWeight=500.; var newWeight; do { newWeight=Math.floor(Math.random()*(maxWeight+1)); if ((totalWeight + newWeight) <= limitWeight) { totalWeight += newWeight;

document.write("New weight = " + newWeight + " total weight = " + totalWeight + "<br />"); newWeight=0.; } else document.write("You weigh " + newWeight + " lb. I'm sorry, but you can't get on."); } while ((totalWeight + newWeight) <= limitWeight);</script>

Newton's Square Root Newton's Square Root AlgorithmAlgorithmGiven a number n:

1. Make a guess for the square root of n. n/2 is a reasonable guess.2. Replace g with (g + n/g)/2.3. Repeat step 2 until the absolute difference between g*g and n is smaller than some specified value.

Document 4.10 (newtonSqrt2.htm)<html><head><title>Newton's square root algorithm</title><script language="javascript" type="text/javascript">var n=parseFloat(prompt("Enter a positive number:"));var g=n/2;do {

g = (g + n/g)/2.;} while (Math.abs(g*g-n) > 1e-5);alert(g+" is the square root of "+n+".");</script></head><body></body></html>

Using JavaScript to Change Using JavaScript to Change Form Field ValuesForm Field Values

The basic use for JavaScript is to access and change the values in <input /> elements used in forms

"Event handlers" allow us to do this from within forms.

Pressure CalculationPressure Calculation<form>Fill in elevation and sea-level pressure: <input type="text" name="elevation" value="0" size="8" maxlength="7" /> (m)<input type="text" name="sea_level_pressure" value="1013.25" size="8" maxlength="7" /> (mbar) <br /><input type="button" name="Calculate" value="Click here to get station pressure:" onclick="result.value= parseFloat(sea_level_pressure.value)- parseFloat(elevation.value)/9.2;" /><input type="text" name="result" value="1013.25" size="8" maxlength="7" /> (mbar)<br /> <input type="reset" value="Reset all fields." /></form>

Rectangular Rule Rectangular Rule IntegrationIntegration

How do we do it?

Rectangular Rule Rectangular Rule IntegrationIntegration

INITIALIZE integral = 0 (Initialize the value to 0.)LOOP for i = 0 to n – 1,

x = x0 + i•dx + dx/2y=x•x (This could be any function of x.)integral = integral + y

END LOOPASSIGN integral = integral•dx

Use pseudocode to develop the algorithm:

The The code:code:

Document 4.13

<html><head><title></title></head><body><h2>Rectangular Rule integration</h2>for f(x)=x<sup>2</sup><form> x<sub>0</sub>: <input type="text" name="x0" value="1" /> <br /> x<sub>1</sub>: <input type="text" name="x1" value="3" /> <br /> <input type="button" value="Click here to integrate." onclick="var x,X0,X1,i,n=20,integral=0,y; //y=x*x

X1=parseFloat(x1.value);X0=parseFloat(x0.value);dx=(X1-X0)/n;for(i=0; i<n; i++) { x=X0 + i*dx + dx/2; y=x*x; integral+=y;}result.value=integral*dx; "/>

<input type="text" name="result" value="result" /></br /></form></body></html>