n_erudite > 12-30-2015, 08:18 AM
<script> của trang HTML:
//store and display the value of PI:
var pi = Math.PI;
document.write(pi);
<!DOCTYPE html>
<html>
<head>
<title>Lesson 12: JavaScript Objects - Math Object</title>
<script type="text/javascript" src="lesson12_tryout1.js"></script>
</head>
<body>
<h1>Lesson 12: Circumference calculator</h1>
<p>Enter length of radius: <input type="text" id="txtRadius" /></p>
<p><input type="button" id="btnSubmit" value="Calculate circumference" /></p>
<p id="result"></p>
</body>
</html>
//init() function binds the processAnswer() function
//to the onclick event of the button
function init()
{
var myButton = document.getElementById("btnSubmit");
myButton.onclick = processAnswer;
}
/*********************************************/
//Bind the init function to the onload event
onload = init;
/*********************************************/
//This function checks the user's input,
//calls the function that performs the calculation,
//and displays the result
function processAnswer()
{
//store a reference to the inputbox
var inputBox = document.getElementById("txtRadius");
//get the radius value entered in the inputbox
//make sure to convert the string (text) to a number:
//calculations can only be performed with numbers,
//and the value in the inputbox is processed as string.
//parseInt(string) and parseFloat(string)
//take a string as input and return an integer
//or a floating point number respectively.
var radius = parseInt(inputBox.value);
//get a reference to the paragraph to display result
var result = document.getElementById("result");
//create and initialize a var to store the result
var resultString = "";
//Perform some validation on the user's input:
//if the value entered by the user is not a number
//alert the user. isNaN(value) takes
//a value as input and returns true if the value is not a number,
//it returns false if the value is a number.
//the expression below is short for:
//if (isNaN(radius) == true)
if (isNaN(radius))
{
alert("Please, enter a number");
}
else
{
//if the user has correctly entered a number,
//call the function that performs the calculation
//and display the result on the page
var circ = getCircumference(radius);
resultString = "Circumference is: " + circ;
result.innerHTML = resultString;
}
}
/*********************************************/
//This is the function that performs the calculation:
//it takes the radius as input and returns the circumference
function getCircumference(rad)
{
var circumference = 2 * (Math.PI * rad);
return circumference;
}
var squareRoot = Math.sqrt(25);
document.write("The square root of 25 is: " + squareRoot);
//This should print:
//The square root of 25 is: 5
<!DOCTYPE html>
<html>
<head>
<title>Lesson 12: JavaScript Objects - Math Object</title>
<script type="text/javascript" src="lesson12_tryout2.js"></script>
</head>
<body>
<h1>Lesson 12: Square root calculator</h1>
<p>Enter a number: <input type="text" id="txtNumber" /></p>
<p><input type="button" id="btnSubmit" value="Calculate square root" /></p>
<p id="result"></p>
</body>
</html>
//write the function to initialize the script
function init()
{
//Bind function that processes the result to
//the onclick event of the button
var myButton = document.getElementById("btnSubmit");
myButton.onclick = displaySquare;
}
/**************************************************/
//Bind the init() function to the onload event
onload = init;
/**************************************************/
//Here we call the function that performs
//the square root calculation, then we format and
//display the result
function displaySquare()
{
//we store the value from the inputbox into a var.
//Notice how we concatenate several methods
//in one statement (be careful with those brackets).
//If you find it a bit confusing, store a reference to the inputbox
//in its own var and then use it to extract its value property
//and finally pass it as argument of parseInt(), like so:
//var inputBox = document.getElementById("txtNumber");
//var inputVal = parseInt(inputBox.value);
var inputVal = parseInt(document.getElementById("txtNumber").value);
//we store a reference to the paragraph
//where the result will be displayed
var result = document.getElementById("result");
//we create the var that stores the result message
var resultMessage = "";
//we ensure the input value is a number:
//if the user did not enter a number, we send an alert
if (isNaN(inputVal))
{
alert("Please, enter a number");
}
else
{
//If the input is in correct format, we call
//the function that performs the calculation
var squareVal = calculateSquare(inputVal);
//this is a nested if statement: it's inside another
//if statement to perform further checks:
//if squareVal stores a value (if the calculation was successful) -
//- this is short for: if (squareVal == true)
if (squareVal)
{
//we build this message to the user:
resultMessage = "Square root of " + inputVal + " is " + squareVal;
}
//else, that is, if the calculation was not successful
else
{
//we build a different message to the user:
resultMessage = "Sorry, an error occurred";
}
}
//finally, we display the message using innerHTML
result.innerHTML = resultMessage;
}
/**************************************************/
//This function calculates the square root:
//it takes in the number entered by the user
//and returns the result of the calculation
function calculateSquare(input)
{
var squareVal = Math.sqrt(input);
return squareVal;
}