javascript chapter 6 note new scoring. spin.js (page 67) function spin() function spin() { var...
TRANSCRIPT
JavaScript Chapter 6JavaScript Chapter 6Note new scoringNote new scoring
spin.js (page 67)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.htmlspin.html
<head><head> <title>Using Math PI</title><title>Using Math PI</title> <script type="text/javascript" src="spin.js"><script type="text/javascript" src="spin.js"> </script></script> <link rel="stylesheet" type="text/css" href="spin.css"/><link rel="stylesheet" type="text/css" href="spin.css"/> </head></head> <body onload="spin()"><body onload="spin()"> <div id="d1"></div><div id="d1"></div> </body></body> </html></html>
spin.cssspin.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; blackborder:1px solid; black }}
Math FunctionsMath Functions
Math.random (); //from 0.0 to 1.0Math.random (); //from 0.0 to 1.0
Math.round(n);Math.round(n);
Math.floor(n);Math.floor(n);
Math.ceil(n);Math.ceil(n);
Lots of others…Lots of others…
Exercise 1Exercise 1Square Root Calculator Square Root Calculator
Create a form where you can enter a Create a form where you can enter a number and click a button to alert the number and click a button to alert the square root.square root.
Use parseFloat on page 84.Use parseFloat on page 84.
Exercise 1 (HTML)Exercise 1 (HTML)
<form id=“num" ><form id=“num" > Value: <input type="text" id="val" value=" Value: <input type="text" id="val" value="
"><br>"><br> <input id="btn1" type="button" value="Go" <input id="btn1" type="button" value="Go"
onclick= onclick= "go(document.forms.num.val.value)" >"go(document.forms.num.val.value)" >
</form></form>
Exercise 1 (JavaScript)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 2Exercise 2Round and roundRound 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 Starting with page 67 (spin) create a program that spins different size boxes at program that spins different size boxes at different radii and different speeds.different radii and different speeds.
The Generic ProgramThe 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.jsspin.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 statespin.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 handlerspin.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 ProgramThe 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.