Diễn Đàn Tuổi Trẻ Việt Nam Uhm.VN

Chúng ta sẽ tiếp tục xây dựng đối tượng trong Javascript với đối tượng Math. Bạn đã được xem cách xử lý Math trong bài 7m sử dụng hàm ngẫu nhiên random() để tạo ra một số ngẫu nhiên giữa 0 và 1 và phương pháp floor() để làm tròn kết quả. Các đối tượng Math cho phép bạn viết kịch bản thực hiện nhiệm vụ toán học phức tạp trong chớp mắt. Trong bài học này, bạn sẽ sử dụng:

- Math.PI để tính chu vi của một vòng tròn;

- Math.sqrt() để tính toán một giá trị căn bậc hai.

Trong quá trình học javascript và học php cơ bản tại hà nội này, bạn sẽ tìm hiểu làm thế nào để sử dụng:

- parseInt()/parseFloat() để chuyển đổi các chuỗi số;

- isNaN() để kiểm tra xem một giá trị hay không là một con số;

1. Math.PI

Thuộc tính này lưu giữ giá trị của PI, một hằng số toán học mà số tiền khoảng 3,14159.Hãy nhanh chóng làm mới các phép toán học. Dưới đây là một số định nghĩa:

- Circle: là hình dáng mà tất cả các điểm có cùng khoảng cách với trung tâm
$[Image: %C4%90%E1%BB%91i-t%C6%B0%E1%BB%A3ng-Math-1.gif]$

+) bao quanh vòng quanh hình (màu xanh màu như trong hình trên), là chu vi vòng tròn;

+) đường cắt vòng tròn theo chiều ngang trong một nửa (màu đỏ trong hình trên) là đường kính vòng tròn;

+) mỗi một nửa đường kính đại diện cho một bán kính. PI là tỷ số giữa chu vi của một vòng tròn và đường kính. Nếu bạn cần giá trị này trong chương trình JavaScript của bạn, sử dụng Math.PI. Chỉ cần cố gắng này ra giữa bao

Code:
<script> của trang HTML:

//store and display the value of PI:

var pi = Math.PI;

document.write(pi);

Ví dụ: sử dụng Math.PI để tìm ra chu vi của một vòng tròn Trước tiên: chuẩn bị một tài liệu HTML như thế này:

Code:
<!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>

Bây giờ, tạo một tài liệu JavaScript và đặt tên cho nó lesson12_tryout1.js. Tập tin này sẽ chứa 3 chức năng:

- init() khởi tạo các kịch bản bằng cách liên kết các processAnswer() để sự kiện thích hợp của nó, có nghĩa là, các sự kiện onclick btnSubmit;

- processAnswer() kiểm tra các câu trả lời được gửi bởi người sử dụng, gọi hàm đó thực hiện các phép tính, và hiển thị kết quả;

- getCircumference(rad) được thông qua giá trị bán kính như là đối số, thực hiện các tính toán thực tế, và trả về chu vi.

Code:
//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;

}

>> Khóa học lap trinh android cơ bản nâng cao tại hà nội !
2. Math.sqrt()

Math.sqrt(number) có một số như là đối số và trả về căn bậc hai của số đó. Nếu một số âm được nhập như là đối số, ví dụ Math.sqrt(-5), hàm trả về NaN, đó là một giá trị mà JavaScript không đối xử như một con số. Căn bậc hai của 25, ví dụ, đó là con số đó nhân với chính nó mang lại kết quả là 25, đó là, 5. Công thức là: hình vuông của n = n * n. JavaScript thực hiện tính toán này tự động. Dưới đây là một bản demo nhanh: gõ đoạn mã sau giữa bao <script> của trang HTML:

Code:
var squareRoot = Math.sqrt(25);

document.write("The square root of 25 is: " + squareRoot);

//This should print:

//The square root of 25 is: 5

Ví dụ: Tính căn bậc hai Bạn sẽ xây dựng một máy tính căn bậc hai đơn giản. Dưới đây là những yêu cầu cho các ứng dụng nhỏ này: - người sử dụng sẽ có thể nhập vào một giá trị số vào một inputbox; - người sử dụng sẽ có thể bấm vào một nút cho phép tính căn bậc hai của số nhập vào inputbox; - kết quả sẽ được hiển thị trên trang web. Tạo một trang HTML tươi với một inputbox, 1 nút, và một đoạn văn mà kết quả sẽ được hiển thị. Những yếu tố HTML chứa các thuộc tính id mà sẽ cung cấp một cái móc tiện dụng cho các mã JavaScript của chúng tôi.

Code:
<!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>

Bây giờ tạo ra các tập tin lesson12_tryout2.js. Tập tin này sẽ chứa 3 chức năng: - init() khởi tạo các kịch bản bằng cách liên kết các displaySquare() để sự kiện thích hợp của nó, có nghĩa là, các sự kiện onclick btnSubmit; - displaySquare() kiểm tra các câu trả lời được gửi bởi người sử dụng, gọi hàm đó thực hiện các phép tính, và hiển thị kết quả; - calculateSquare(input) được thông qua các giá trị số được nhập vào bởi người sử dụng như là đối số, thực hiện các tính toán thực tế, và trả về căn bậc hai.

Code:
//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;

}

Lưu file và chạy ứng dụng trên trình duyệt.

Trung tâm đào tạo học lập trình android với đội ngũ giáo viên nhiệt tình, chuyên nghiệp và khóa học photoshop cơ bản nâng cao tại VietPro!

n_erudite