<script>

  // Khai báo biến var, let, const
  declare_var();
  function declare_var() {
    // không báo lỗi , var biến toàn cục
    if (1 == 1) { var text1 = "t1"; }
    console.log("text1 :" + text1);

    // báo lỗi not defined, let biến cục bộ, chỉ có tác dụng cho hàm if
    if (1 == 1) { let text2 = "t2"; }
    //console.log("text2 :"+text2);

    // const, chỉ được gán giá trị khi khai báo, ko gán tiếp được nữa lỗi constant variable
    const text3 = "t3";
    //text3 = "t4";
    console.log("text3 :" + text3);

    //vòng lặp for, ... nên chạy biến let    
  }
</script>


1. Các cách khai báo biến trong javascript

Chúng ta có ba cách khai báo biến. Thứ nhất là dùng từ khóa var, thứ hai là dùng từ khóa const, và cuối cùng là từ khóa let. Tùy vào từng trường hợp mà chọn cách khai báo cho phù hợp.

Khai báo biến trong JS bằng từ khóa var

Để khai báo một biến ta sử dụng từ khóa var tenbien.

1
var username;

Khai báo biến trong JS bằng từ khóa let

Sử dụng từ khóa let tenbien.

1
let username;

Biến loại này chỉ có phạm vi trong khối khai báo mà thôi. Vì vậy nó sẽ tối ưu trong trường hợp bạn cần khai báo một biến chỉ sử dụng tạm thời trong một phạm vi nhất định. Phạm vi nay ta hay gọi là block scope.

Ví dụ: Biến không tồn tại do từ khóa let nằm ngoài phạm vi block sope mà biến đang nằm.

Như trong ví dụ này thì biến domain chỉ có phạm vi trong lệnh if mà thôi.

1
2
3
4
5
6
if (true){
    let domain = "abc";
}
 
// Lỗi vì biến domain không tồn tại
console.log(domain);

Tuy nhiên, nếu bạn thay bằng từ khóa var thì được nhé.

1
2
3
4
5
6
if (true){
    var  domain = "freetuts.net";
}
 
// chạy bình thường
console.log(domain);

Khai báo biến trong JS bằng từ khóa const

Sử dụng từ khóa const tenbien.

1
const username = 'giá trị';

Const là một hằng số, vì vậy khi khai báo biến const thì bạn phải gán giá trị cho nó luôn, sau này cũng không thể thay đổi giá trị cho biến.


 Cách đặt tên cho biến trong Javascript

Khi đặt tên cho biến thì bạn phải tuân thủ theo những quy tắc dưới đây:

  • Tên biến phải là các chữ không dấu viết hoa hoặc viết thường, các chữ số từ 0-9 và dấu gạch dưới (_).
  • Tên biến bắt đầu phải là chữ hoặc dấu gạch dưới (_), nếu bắt đầu bằng số là sai
  • Tên biến có thể đặt dài hay ngắn tùy vào lập trình viên.
Ví dụ các cách khai báo biến
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Đúng
var username;
 
// Đúng
var _username;
 
// Đúng
var __username;
 
// Đúng
var username90;
 
// SAI
var 90thehalfheart;

Ngoài cách khai báo từng biến đơn lẻ như trên thì bạn có thể gộp nó vào một dòng duy nhất như sau:

Ví dụ khai báo nhiều biến
1
var username, _username, __username, username90;

3. Cách gán giá trị cho biến trong javascript

Để gán giá trị cho biến ta dùng dấu bằng (=) để gán vế phải vào vế trái.

Ví dụ. gán giá trị thehalfheart vào biến username thì ta viết là username = 'thehalfheart'.

Có hai cách gán thông dụng đó là vừa khai báo biến vừa gán giá trị và khai báo rồi mới gán giá trị:

Vừa khai báo vừa gán giá trị
1
var username = 'thehalfheart';
Khai báo xong mới gán giá trị
1
2
var username;
username = 'thehalfheart';

4. Kiểu giá trị của biến trong Javascript

Trong Javascript rất hạn chế về kiểu dữ liệu nhưng bù lại cơ chế xử lý kiểu dữ liệu của nó rất linh hoạt, giúp lập trình viên có thể chuyển đổi một cách dễ dàng. Đó là vì mọi kiểu dữ liệu đều có thể quy về đối tượng và mỗi đối tượng ta có thể bổ sung các phương thức xử lý riêng.

Giống như php, để xác định biến có kiểu dữ liệu là gì thì ta dựa vào giá trị mà nó đang có. Có nghĩa khi bạn gán một con số không có dấu chấm động thì nó sẽ là kiểu INT, nếu gán một chuỗi thì là kiểu String.

Gán kiểu giá trị cho biến
1
2
3
4
5
6
7
8
// Biến website đag kiểu String
var website = 'thehalfehart';
 
// Biến website chuyển sang kiểu INT
website = 12;
 
// Biến website chuyển sang kiểu float
website = 12.5;

Trong Javascript sẽ có các kiểu dữ liệu thông dụng như kiểu chuỗi (String), số (Number), mảng (Array), đối tượng (Object). Chi tiết từng kiểu dữ liệu chúng ta sẽ được học trong các bài tiếp theo.



5. In giá trị của biến JS ra trình duyệt

Để in giá trị của biến hoặc một chuỗi nào đó ra trình duyệt thì ta sử dụng hàm document.write(value).

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <title></title>
    </head>
    <body>
        <script language="javascript">
            var website = 'freetuts.net';
            document.write(website);
        </script>
    </body>
</html>

6. Các phép toán thường dùng trên biến trong Javascript

Khi bạn học Javascript thì minh nghĩ là bạn đã từng học một ngôn ngữ khác rồi, nên trong bài này mình sẽ nói đơn giản lại.

Khi làm việc với biến thì chúng ta thường sử dụng các phép toán như:

  • Gán giá trị.
  • Cộng trừ nhân chia các số.
  • Nối chuỗi.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Phép gán
var domain = "freetuts.net";
 
// Phép nối chuỗi
var subdomain = "code." + domain;
 
// Phép cộng
var number = 20 + 10;
 
// Phép trừ
var number = 20 - 10;
 
// Phép nhân
var number = 20 * 10;
 
// Phép chia
var number = 20 / 10;



BÀI TẬP
1. 1 file html , có script js gồm
   + khai báo các biến 
        num_x = 3
        num_y = 7
        string_name="ABC"

   + In ra câu thông báo ("x  = " + num_x )
   + In ra câu thông báo ("y  = " + num_y )
   + In ra câu thông báo ("x + y = " + num_x + num_y)
   + In ra câu thông báo ("name + x = " + string_name + num_x)
   + In ra câu thông báo ("name + x + y = " + string_name + num_x + num_y )







Các toán tử gán 

Toán tử gán được dùng để gán giá trị ở bên phải toán tử vào biến ở bên trái toán tử. Có các toán tử gán sau:

Toán tửVí dụÝ nghĩa
=x = ygán y vào x
+=x += yx = x + y
-=x -= yx = x - y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y


Các toán tử số học

Toán tửMô tảVí dụ
+phép cộng25 + 5 = 30
-phép trừ10 - 5 = 5
*phép nhân2*3 = 6
/phép chia20 / 2 = 10
%lấy phần dư của phép chia56 / 3 = 2
++Tăng thêm 1var a = 10; a ++; //giá trị a là 11
--giảm đi 1var a = 10; a --; //giá trị a là 9


Toán tử so sánh

Toán tử so sánh sử dụng trong các biểu thức về logic để so sánh bằng nhau, khác nhau. Nó trả về giá trị true false

Toán tửDiễn tảVí dụ
==so sánh bằng5 == 10 false
===giống nhau (cùng giá trị và kiểu dữ liệu)5 === 10 false
!=khác giá trị5 != 10 true
!==Khác giá trị và kiểu10 !== 10 false
>lớn hơn10 > 5 true
>=lớn hơn hoặc bằng10 >= 5 true
<nhỏ hơn10 < 5 false
<=nhỏ hơn10 <= 5 false

Khi sử dụng các toán tử này, hãy chắc chắn các số hạng có cùng kiểu; số so sánh với số; chuỗi so sánh với chuỗi ...


Toán tử logic

Bảng toán tử logic gồm các phép toán : và - hoặc - phủ định

Toán tửDiễn tả
&&phép và trả về true nếu 2 số hạng là true: a && b
||phép hoặc trả về true nếu 1 trong 2 số hạng là true : a || b
!phủ định; trả về giá trị ngược với biểu thức !a




Toán tử điều kiện

    variable = (condition) ? value1: value2;

Nhận giá trị value1 nếu điều kiện là true, nhận value2 nếu điều kiện false

var isAdult = (age < 18) ? "Too young": "Old enough";
//isAdult là Too young nếu age nhỏ hơn 18
//isAdult là Old enough nếu age lớn hơn hoặc bằng 18

Toán tử với chuỗi

Toán tử với chuỗi sử dụng nhiều là nối hai chuỗi lại với nhau, sử dụng toán tử + để nối. Lưu ý toán tử này có thể nối số vào chuỗi.

var mystring1 = "Học viết mã ";
var mystring2 = "JavaScript.";
document.write(mystring1 + mystring2);

//sẽ viết ra: Học viết mã JavaScript.

Xuất biến ra chuỗi với kỹ thuật Template Literal

Bạn có thể đưa vào chuỗi nằm giữa dấu `` (không phải '' hay ""), trong chuỗi đó có thể chèn biểu thức với ký hiệu ${biểu-thức}

    let tb = `Hai nhân hai là ${2*2}`;
    let name = "XuanThuLab";
    let msg  = `Xin chao ${name}`;
    console.log(tb);
    console.log(msg);

Toán tử typeof

Toán tử typeof trả về kiểu dữ liệu cần kiểm tra của một biến, một giá trị.

var a = 1;
var b = "Hi";
var c = true;
var d = null;
var e;

console.log(typeof(a)); // trả về number
console.log(typeof(b)); // trả về string
console.log(typeof(c)); // trả về boolean
console.log(typeof(d)); // trả về object
console.log(typeof(e)); // trả về undefined
console.log(typeof(f)); // trả về undefined