Like this document? Why not share!

# 06 - JavaScript and AJAX

## on Apr 29, 2010

• 617 views

### Views

Total Views
617
Views on SlideShare
617
Embed Views
0

Likes
0
0
0

No embeds

### Report content

• Comment goes here.
Are you sure you want to

## 06 - JavaScript and AJAXDocument Transcript

• </html> To make it look perfect, we add a table to force the top hat to stay at the same height as the rabbit-expanded hat. The script remains the same. <body> <h1 class="center">A Magic Trick</h1> <table align="center"> <tr><td height="500" valign="bottom"> <img src="topHat.gif" id="hat" onclick="magic()"/> </td></tr> </table> </body> Return to our extended Example We want to find an approximation of the number (Pi) experimentally. To do this we imagine a cannon that shoots a ball into a square with corners (1,1), (-1,1), (-1,-1), (1,-1). We assume that the ball always lands inside that square, but at completely random locations. In particular, sometimes the balls falls inside a circle of radius 1 centered at the origin, other times it falls outside that circle: If T is the total number of shots, and I is the number of times the ball lands inside the circle, we finally compute We already wrote the basic program with the output appearing in an alert dialog. Now we’ll take a different approach, where we want to display instructions, offer the user a ‘Go’ button, and then see the results displayed in the existing page. No problem. Attempt 3:
• <html> <head> <title>Experimenting with Randomness 3</title> <script language="javascript" type="text/javascript"> function simulateCannon() { var totals = 1000.0; var inside = 0.0; var fieldTotals = document.getElementById("totals"); var fieldInside = document.getElementById("inside"); var fieldAnswer = document.getElementById("answer"); for (var count = 1; count <= totals; count++) { var x = 2.0 * Math.random() - 1.0; var y = 2.0 * Math.random() - 1.0; var r = Math.sqrt(x*x + y*y); if (r < 1) { inside++; } } fieldTotals.innerHTML = "" + totals; fieldInside.innerHTML = "" + inside; fieldAnswer.innerHTML = "" + 4.0 * inside / totals; } </script> </head> <body> <h1>Experimenting with Randomness 3</h1> <p align="center"> <img alt="Cannon shooting inside Square" src="cannon_square.jpg"> </p> <ul> <li>Total shots: <span id="totals">0.0</span></li> <li>Inside circle: <span id="inside">0.0</span></li> <li>Estimation: <span id="answer">0.0</span></li> </ul> <form> <input type="button" value="Shoot" onclick="simulateCannon()"> de Cannon </form> </body> </html> Finally we use a text field so that a user can type in the desired amount of tries themselves. This time, instead of setting or changing a value on the DOM we read what the user enters and use that value in our program. Attempt 4: <html> <head> <title>Experimenting with Randomness 4</title> <script language="javascript" type="text/javascript"> function simulateCannon() { var inputTotals = document.getElementById("input");
• var totals = inputTotals.value; var inside = 0.0; var fieldTotals = document.getElementById("totals"); var fieldInside = document.getElementById("inside"); var fieldAnswer = document.getElementById("answer"); for (var count = 1; count <= totals; count++) { var x = 2.0 * Math.random() - 1.0; var y = 2.0 * Math.random() - 1.0; var r = Math.sqrt(x*x + y*y); if (r < 1) { inside++; } } fieldTotals.innerHTML = "" + totals; fieldInside.innerHTML = "" + inside; fieldAnswer.innerHTML = "" + 4.0 * inside / totals; } </script> </head> <body> <h1>Experimenting with Randomness 4</h1> <p align="center"> <img alt="Cannon shooting inside Square" src="cannon_square.jpg"> </p> <ul> <li>Total shots: <span id="totals">0.0</span></li> <li>Inside circle: <span id="inside">0.0</span></li> <li>Estimation: <span id="answer">0.0</span></li> </ul> <form> <input type="button" value="Shoot" onclick="simulateCannon()"> de Cannon <input type="text" value="1000" size="10" id="input"> times. </form> </body> </html> Next, let’s go back to one of the other primary functions of JavaScript: to improve the look of a document. Switching Style Sheets We learned how to attach multiple style sheets to a document, which all ‘cascade’ into one style. You can also define alternate style sheets so that the user can switch between them to give a page the look they prefer. You can, for example: • use a default style sheet for your average user • provide an alternate style sheet with large print for users with poor eye sight • provide another style sheet in gray-scale to use for printing • use yet another style sheet to optimize your content to viewers with small devices (smart phones)
• Of course we need (at least) two style sheets. For simplicity, let’s create two very simple style sheets right now: File style1.css /* Simple style sheet using entire width of screen */ body { margin: 10px; width: 100%; } h1 { background-color: blue; color: yellow; } .justified { text-align: left; } File style2.css /* Style suitable for small device such as smart phone */ body { margin: 10px auto; width: 480px; } h1 { background-color: yellow; color: blue; } .justified { text-align: right; } Now let’s create a simple HTML file with the first style sheet attached: File style-test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Style Switcher</title> <link href="style1.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Style Switcher</h1> <p class="justified">This is some text.</p> </body>