javascript handson 01 - university of houstonsmiertsc/2336itec/javascript_handson_01.pdf ·...
TRANSCRIPT
Internet & World Wide Web: How to Program byInternet & World Wide Web: How to Program by Deitel and Deitel
JavascriptpHands-OnL 01Lesson 01
Use a Text EditorUse a Text Editor
The file you create must be plain textThe file you create must be plain text– Not a Word document
Not Rich Text Format ( rtf)– Not Rich Text Format (.rtf)– Just text
We will give an extension of html– We will give an extension of .htmlNotepad – bare bonesVisual Studio’s text editor – much betterMany other tools – some are WYSIWYGy
G tti St t d ithGetting Started with Visual Studio
Open Visual StudioFile – Open Web
SiteOpen MyWebSite
that contains all your other in-classyour other in class pages
ORFile – New Web Site
(to start from scratch)Choose the
Empty Web Site Template
G tti St t d ithGetting Started with Visual Studio
In Solution Explorer, right-click on the name of the solution and add an images folder if there is not one already
In Solution Explorer, right-click on gthe name of the solution
Select Add New Item
Select the HTML Page template
Click Add
Name the page whatever you want
Problem 6.19 From D it l T t P 231Deitel Text Pages 231-232
6.19 Write a script that gets from the user the radius of a circle and outputs XHTML text that displays the circle's diameter, circumference and area. …
Fl h t f S l tiFlowchart of Solution Algorithm
Create a flowchart of the solution process
P d C d fPseudo Code of Solution Process
Write pseudo code or detailed 1. Declare the variables you will need
• a variable to hold the value of the radius that the user instructions for the solution process • a variable to hold the value of the radius that the user inputs. The user will input a value, but the input will be treated as a string
• a variable to hold the numerical value of the radius that will be used in the calculation
• a variable to hold the value of the diameter that you calculate based on the user's input value of radius
• a variable to hold the value of the circumference that you calculate based on the user's input value of radius
• a variable to hold the value of the area that you calculate based on the user's input value of radius
2. Create a prompt window that asks the user to enter a value for the radius of a circle. The statement should save the value in the variable you set up for the string input value of the radius
3. Convert the input string value of the radius to the type float (a javascript function you can use for that purpose is ( j p y p pparseFloat)
4. Compute the circumference
5. Use the Math.round function to round the circumference value computed to tenths or hundreths
6. Write a javascript statement to compute the area6. Write a javascript statement to compute the area
7. Use the Math.round function to round the area value computed to tenths or hundreths
8. Write 3 javascript statements to output the results
S t th PSet up the Page Structure for the Script
Add a <script></script> element to the <head></head> element of the page that will call the script
1 Declare the Variables
You need:a variable to hold the value of the
radius that the user inputs. The user will input a value, but the input will be treated as a string
i bl t h ld th i la variable to hold the numerical value of the radius that will be used in the calculation
a variable to hold the value of the diameter that you calculate baseddiameter that you calculate based on the user's input value of radius
a variable to hold the value of the circumference that you calculate based on the user's input value of radius
a variable to hold the value of the area that you calculate based on the user's input value of radius
2 Get Input from Userp
Create a prompt window that asks the user to enter a value for the radius of a circle.The statement should save the value in the variable you set up for the string input value of the radius.Convert the input string value of the radius to the type float (a javascript function you can use for that purpose is parseFloat)
3 Process or Calculate
Compute the circumferenceUse the Math.round function to
round the circumference value computed to tenths or hundreths
Write a javascript statement to t thcompute the area
Use the Math.round function to round the area value computed to tenths or hundreths
4 Show Output
Write 3 javascript statements to output the results
Save – Build – Start w/o Debugging to Testgg g
The browser renders the content with the structure specified by the XHTML markup and the embedded Javascript code
Results!Results!
http://math.about.com/library/blcirclecalculator.htm
Other Ways
y
http://www.csgnetwork.coMany similar resources available
m/circle_sphere_area_calculator.html
Use Page – View Source option in IE to examine the JavaScript used
Some sites use php – a server id i ti l
http://easycalculation.com/area/circle.php
side scripting language – or some other server-side language
Can you tell which sites use JavaScript and which use a server-side program? p p
http://www.basic-/ f
Which of these calculators do you like best? Why? Can you find one you like better?
mathematics.com/circumference-calculator.html
Internet & World Wide Web: How to Program byInternet & World Wide Web: How to Program by Deitel and Deitel
JavascriptpHands-OnL 01Lesson 01