JavaScript Variables - Các biến JavaScript

by GokiSoft.Com - 09:54 20/05/2020 3,339 Lượt Xem

Các biến trong JavaScript là các hộp đựng để lưu trữ các giá trị dữ liệu.

Trong ví dụ này, x, y, và z, là các biến:

ví dụ

var x = 5;
var y = 6;
var z = x + y;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>In this example, x, y, and z are variables.</p>

<p id="demo"></p>

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>

Trong ví dụ trên, bạn có thể hiểu:

- x lưu giá trị 5

- y lưu giá trị 6

- z lưu giá trị 11

Giống trong toán học

Trong ví dụ này , price1, price2, và total, là các biến:

ví dụ

var price1 = 5;
var price2 = 6;
var total = price1 + price2;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p id="demo"></p>

<script>
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>

</body>
</html>

Trong lập trình, giống như trong toán học, chúng ta dùng các biến(như price1) để giữ các giá trị.

Trong lập trình, giống như trong số học, chúng ta dùng các biến trong các biểu thức (total = price1 + price2).

Trong ví dụ trên, bạn có thể tính tổng được 11.

Tip: Các biến JavaScript là các hộp để lưu trữ các giá trị dữ liệu.

Các định danh trong JavaScript(JavaScript Identifiers)

Tất cả các biến JavaScript phải được định danh với một cái tên duy nhất.

Các cái tên duy nhất đó được gọi là các định danh.

Các định danh có thể là tên viết tắt (như x và y) hoặc là một cái tên có tính mô tả (age, sum,totalVolume).

Quy luật chung cho việc xây dựng các cái tên cho các biến (định danh duy nhất) là:

- Các cái tên có thể chứa các chữ cái, các kí tự, các dấu gạch dưới, và các dấu đô la.

- Các cái tên phải bắt đầu bằng chữ cái

- Các cái tên có thể cũng được bắt đầu bằng $ và _ (nhưng chúng ta sẽ không dùng trong hướng dẫn này)

- Các cái tên là phân biệt hoa thường (y và Y là các biến khác nhau)

- Các từ dành riêng (như các từ khóa JavaScript) không thể dùng như các cái tên.

Tip: Các định danh JavaScript là phân biệt hoa thường.

Toán tử gán(The Assignment Operator)

Trong JavaScript, dấu bằng (=) là một toán tử "gán", không phải toán tử "tương đương với".

Đây là sự khác biệt trong số học. Những điều sau không có ý nghĩa trong số học:

x = x + 5

Trong JavaScript, tuy nhiên, nó lại có ý nghĩa hoàn hảo: nó gán giá trị của x + 5 vào x.

(Nó tính giá trị của x + 5 và đưa kết quả vào trong x. Giá trị của x được tăng lên 5.)

Tip: "tương đương với" toán tử được viết là == trong javascript.

Các kiểu dữ liệu JavaScript(JavaScript Data Types)

Các biến JavaScript có thể giữ các chữ số như 100 và các văn bản có các giá trị như "John Doe".

Trong lập trình, các giá trị văn bản được gọi là các chuỗi văn bản.

JavaScript có thể xử rất nhiều loại dữ liệu, nhưng hiện tại, hãy nghĩ đến các số và các chuỗi.

Các chuỗi được viết ở bên các dấu nháy đôi hoặc đơn.Các chữ số được viết không có các dấu nháy.

Nếu bạn bỏ một chữ số vào trong nháy, nó sẽ được xem là một chuỗi văn bản.

ví dụ

var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>

<p id="demo"></p>

<script>
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>

</body>
</html>

Khai báo biến trong JavaScript(Declaring JavaScript Variables)

Tạo một biến trong JavaScript được gọi là "khai báo" một biến.

Bạn khai báo một biến JavaScript với từ khóa var :

var carName;

Sau khi khai báo,biến này không có giá trị(về mặt kĩ thuật nó có giá trị là undefined).

Để gán giá trị vào biến, dùng dấu bằng:

carName = "Volvo";

Bạn cũng có thể gán giá trị vào trong biến khi khai báo nó:

var carName = "Volvo";

Trong ví dụ bên dưới, chúng ta tạo ra một biến gọi là carName và gán giá trị "Volvo" cho nó.

Sau đó chúng ta "đẩy ra" giá trị bên trong đoạn HTML với id="demo".

<p id="demo"></p>

<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Create a variable, assign a value to it, and display it:</p>

<p id="demo"></p>

<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Tip: Cách tốt để luyện lập trình là khai báo toàn bộ các biến ở đầu của một lệnh.

Một câu lệnh, nhiều biến(One Statement, Many Variables)

Bạn có thể khai báo nhiều biến trên một dòng lệnh.

Bắt đầu câu lệnh bằng từ var và chia cắt chúng bởi dấu phẩy:

var person = "John Doe", carName = "Volvo", price = 200;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>You can declare many variables in one statement.</p>

<p id="demo"></p>

<script>
var person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Sự khai báo có thể dãn ra thành nhiều dòng:

var person = "John Doe",
carName = "Volvo",
price = 200;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>You can declare many variables in one statement.</p>

<p id="demo"></p>

<script>
var person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Giá trị = không xác định(Value = undefined)

Trong các phần mềm máy tính, các biến thường được khai báo không có giá trị. Giá trị có thể đôi khi phải được tính, hoặc một cái gì đó sẽ được cung cấp sau này, như người dùng nhập vào.

Một biến được khai báo không có giá trị sẽ có giá trị là undefined.

Biến carName sẽ có giá trị undefined sau khi thực thi câu lệnh này:

ví dụ

var carName;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>A variable declared without a value will have the value undefined.</p>

<p id="demo"></p>

<script>
var carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Khai báo lại các biến JavaScript(Re-Declaring JavaScript Variables)

Nếu bạn khai báo lại một biến JavaScript, nó sẽ không mất giá trị.

Biến carName sẽ vẫn có giá trị "Volvo" sau khi thực thi các câu lênh:

ví dụ

var carName = "Volvo";
var carName;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>If you re-declare a JavaScript variable, it will not lose its value.</p>

<p id="demo"></p>

<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Số học trong JavaScript(JavaScript Arithmetic)

Với số học, bạn có thể làm toán với các biến JavaScript, sử dụng các toán tử như = và +:

ví dụ

var x = 5 + 2 + 3;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>The result of adding 5 + 2 + 3:</p>

<p id="demo"></p>

<script>
var x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Bạn cũng có thể thêm các chuỗi, nhưng chỗi sẽ bị nối tiếp:

ví dụ

var x = "John" + " " + "Doe";

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>The result of adding "John" + " " + "Doe":</p>

<p id="demo"></p>

<script>
var x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Và hãy thử:

ví dụ

var x = "5" + 2 + 3;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>The result of adding "5" + 2 + 3:</p>

<p id="demo"></p>

<script>
x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Tip: Nếu bạn cho một số vào giữa các dấu nháy, số đó được xem là chuỗi, và được nối vào.

Bây giờ hãy thử:

var x = 2 + 3 + "5";

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>The result of adding 2 + 3 + "5":</p>

<p id="demo"></p>

<script>
var x = 2 + 3 + "5"
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Dấu đô la trong JavaScript(JavaScript Dollar Sign $)

Hãy nhớ rằng các định danh JavaScript (các tên) phải được bắt đầu với:

- Một chữ (A-Z hoặc a-z)

- Một dấu đô la ($)

- Hoặc là một dấu gạch dưới(_)

Từ khi JavaScript coi một dấu đô là là một chữ cái, các định danh chứa $ là các tên biến hợp lệ:

ví dụ

var $$$ = "Hello World";
var $ = 2;
var $myMoney = 5;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript $</h2>

<p>The dollar sign is treated as a letter in JavaScript names.</p>

<p id="demo"></p>

<script>
var $ = 2;
var $myMoney = 5;
document.getElementById("demo").innerHTML = $ + $myMoney;
</script>

</body>
</html>

Dùng dấu đô la không phổ biến trong JavaScript, nhưng các chuyên gia lập trình thường dùng nó như một biệt danh cho hàm chính trong một thư viện JavaScript.

Trong JQuery(thư viện JavaScript ), ví dụ, chức năng chính $ thường được dùng để chọn các thành phần HTML. Trong JQuery $("p"); nghĩa là "chọn toàn bộ các thẻ p".

Dấu gạch dưới trong JavaScript(JavaScript Underscore _)

Từ khi JavaScript coi dấu gạch dưới như là một chữ cái, các định đanh bao gồm _ là các tên biến hợp lệ:

ví dụ

var _lastName = "Johnson";
var _x = 2;
var _100 = 5;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript $</h2>

<p>The underscore is treated as a letter in JavaScript names.</p>

<p id="demo"></p>

<script>
var _x = 2;
var _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>

</body>
</html>

Sử dụng dấu gạch dưới thường không được phổ biến trong JavaScript, nhưng một quy ước ở giữa các chuyên gia lập trình là dùng nó như một biệt danh cho "riêng tư (ẩn)" các biến.

Ứng Dụng Học