JavaScript Chapter 6 Note new scoring

spin.js (page 67) function spin() function spin() { var obj_style = document.getElementById("d1").style; var obj_style = document.getElementById("d1").style; var radius = 40; var radius = 40; var x_offset = 50; var x_offset = 50; var y_offset = 50; var y_offset = 50; pos += 10; pos += 10; x = radius * Math.cos( pos * Math.PI/180 ); x = radius * Math.cos( pos * Math.PI/180 ); y = radius * Math.sin( pos * Math.PI/180 ); y = radius * Math.sin( pos * Math.PI/180 ); x += x_offset; x += x_offset; y += y_offset; y += y_offset; obj_style.left = x + "px"; obj_style.left = x + "px"; obj_style.top = y + "px"; obj_style.top = y + "px"; setTimeout( "spin()",100 ); setTimeout( "spin()",100 ); }

spin.html Using Math PI Using Math PI

spin.css #d1 #d1 { position:absolute; position:absolute; top:100px; top:100px; left:100px; left:100px; width:30px; width:30px; height:30px; height:30px; background-color: red; background-color: red; border:1px solid; black border:1px solid; black }

Math Functions Math.random (); //from 0.0 to 1.0 Math.round(n);Math.floor(n);Math.ceil(n); Lots of others…

Exercise 1 Square Root Calculator Create a form where you can enter a number and click a button to alert the square root. Use parseFloat on page 84.

Exercise 1 (HTML) Value: Value:

Exercise 1 (JavaScript) Function go(number) Function go(number) { Var realNumber = parseFloat(number); Var realNumber = parseFloat(number); alert(math.sqrt(realNumber)); alert(math.sqrt(realNumber)); }

Exercise 2 Round and round Create a form to input three numbers: Create a form to input three numbers: center (position) of circle, center (position) of circle, radius of circle, and radius of circle, and speed of rotation. speed of rotation. Starting with page 67 (spin) create a program that spins different size boxes at different radii and different speeds. Starting with page 67 (spin) create a program that spins different size boxes at different radii and different speeds.

The Generic Program Loop (aka Spin) Loop (aka Spin) State (radius, position, and speed) State (radius, position, and speed) User Interface or Event Handler User Interface or Event Handler Forms and functions for onclick etc. Forms and functions for onclick etc.

spin.js function spin() function spin() { var obj_style = document.getElementById("d1").style; var obj_style = document.getElementById("d1").style; var radius = 40; //radius **move to state** var radius = 40; //radius **move to state** var x_offset = 50; //position **move to state** var x_offset = 50; //position **move to state** var y_offset = 50; //position **move to state** var y_offset = 50; //position **move to state** pos += 10; //speed **move to state** pos += 10; //speed **move to state** x = radius * Math.cos( pos * Math.PI/180 ); x = radius * Math.cos( pos * Math.PI/180 ); y = radius * Math.sin( pos * Math.PI/180 ); y = radius * Math.sin( pos * Math.PI/180 ); x += x_offset; x += x_offset; y += y_offset; y += y_offset; obj_style.left = x + "px"; obj_style.left = x + "px"; obj_style.top = y + "px"; obj_style.top = y + "px"; setTimeout( "spin()",100 ); setTimeout( "spin()",100 ); }

spin.js with state var radius = 40; //radius **moved into state** var radius = 40; //radius **moved into state** var x_offset = 50; //position **moved into state** var x_offset = 50; //position **moved into state** var y_offset = 50; //position **moved into state** var y_offset = 50; //position **moved into state** var speed = 10; var speed = 10; function spin() function spin() { var obj_style = document.getElementById("d1").style; var obj_style = document.getElementById("d1").style; pos += speed; //speed **from state** pos += speed; //speed **from state** x = radius * Math.cos( pos * Math.PI/180 ); // radius **from state** x = radius * Math.cos( pos * Math.PI/180 ); // radius **from state** y = radius * Math.sin( pos * Math.PI/180 ); // radius **from state** y = radius * Math.sin( pos * Math.PI/180 ); // radius **from state** x += x_offset; //position **from state** x += x_offset; //position **from state** y += y_offset; //position **from state** y += y_offset; //position **from state** obj_style.left = x + "px"; obj_style.left = x + "px"; obj_style.top = y + "px"; obj_style.top = y + "px"; setTimeout( "spin()",100 ); setTimeout( "spin()",100 ); }

spin.js event handler var radius = 40; //radius **moved into state** var radius = 40; //radius **moved into state** var x_offset = 50; //position **moved into state** var x_offset = 50; //position **moved into state** var y_offset = 50; //position **moved into state** var y_offset = 50; //position **moved into state** var speed = 10; var speed = 10; function setPosition(xStringInput, yStringInput) function setPosition(xStringInput, yStringInput) { x_offset = parseFloat(xStringInput); x_offset = parseFloat(xStringInput); y_offset = parseFloat(yStringInput); y_offset = parseFloat(yStringInput); }

The Generic Program Loop (aka Spin) Loop (aka Spin) State (box size, position, and speed) State (box size, position, and speed) User Interface or Event Handler User Interface or Event Handler Forms and functions for onclick etc. Forms and functions for onclick etc.