Toán tử typeof

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

7.6. 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 8. Các biểu thức

- Tương tự như trong toán học, biểu thức trong JavaScript cũng là một tập hợp gồm các toán hạng và các toán tử.

8.1. Toán hạng

- Điểm khác nhau giữa toán hạng trong JavaScript và toán hạng trong tốn học chính là tốn hạng trong JavaScript thì khơng nhất thiết phải là một chữ số, nó có thể là một giá trị hoặc một biến.

- Ví dụ, ở kịch bản bên dưới, giá trị của biến b là một biểu thức(trong đó biến a là một tốn hạng).

var a = 50;

var b = a + 20; //Biến b sẽ có giá trị là 70 </script>

8.2. Toán tử

- Các toán tử trong JavaScript có chức năng giống với tốn tử trong tốn học. - Tuy nhiên, một vài tốn tử trong JavaScript có cách viết khác so với cách viết toán tử trong toán học.

- Bên dưới là danh sách những toán tử cơ bản nhất trong JavaScript:

Tốn tử Tên gọi Ví dụ Kết quả

+ Phép cộng 10 + 4 14

- Phép trừ 10 - 4 6

* Phép nhân 10 * 4 40

/ Phép chia 10 / 4 2.5

% Phép chia lấy phần số dư 10 % 4 2

- Phép cộng trong JavaScript tương đối khác so với phép cộng trong toán học. Trong JavaScript:

o Số có thể cộng số => cho ra số.

o Số có thể cộng chuỗi (hoặc chuỗi có thể cộng số) => cho ra chuỗi.

o Chuỗi có thể cộng chuỗi => cho ra chuỗi. Ví dụ:

<script>

var a = 5 + 7; //Biến a sẽ có giá trị là 12

var b = 1993 + "Thành Nhân"; //Biến b sẽ có giá trị là 1993Thành Nhân var c = "Thành Nhân" + 1993; //Biến c sẽ có giá trị là Thành Nhân1993

var d = "Nguyễn" + " Thành Nhân"; //Biến d sẽ có giá trị là Nguyễn Thành Nhân </script>

8.3. Độ ưu tiên của các toán tử

- Một biểu thức đơn giản sẽ bao gồm hai toán hạng và một tốn tử, ví dụ: 5 + 9 - Một biểu thức phức tạp sẽ có nhiều tốn hạng và nhiều tốn tử(điều đó đồng nghĩa với việc trong một biểu thức phức tạp sẽ bao gồm nhiều biểu thức đơn giản),

- Thông thường, trong một biểu thức phức tạp, các biểu thức đơn giản sẽ thực thi lần lượt theo thứ tự từ trái sang phải. Tuy nhiên, tùy vào độ ưu tiên của toán tử sẽ quyết đinh biểu thức nào được thực thi trước.

- Ví dụ, thứ tự thực thi của biểu thức 7 + 8 * (10 - 2) + 3 * 4 như sau:

o 7 + 8 *(10 - 2) + 3 * 4 => 7 + 8 * 8 + 3 * 4

o 7 +8 * 8 + 3 * 4 => 7 + 64 + 3 * 4

o 7 + 64 +3 * 4 => 7 + 64 + 12

o 7 + 64 + 12 => 71 + 12

o 71 + 12 => 83

- Dưới đây là bảng tổng hợp mức độ ưu tiên của một số toán tử cơ bản nhất trong JavaScript

Mức độ ưu tiên Toán tử

1 ( )

2 * / %

3 + -

8.4. Khoảng trắng giữa các toán hạng và toán tử

- Trong JavaScript, dấu khoảng trắng giữa các tốn hạng và tốn tử là khơng quan trọng(có cũng được, khơng có cũng khơng sao)

- Ví dụ, ba biểu thức bên dưới có cùng một kết quả:

o 7 + 8 - 3 * 4

o 7+8-3*4

o 7+ 8- 3 *4

9. Mảng

Mảng Array là một đối tượng định nghĩa sẵn trong JS, nó là đối tượng chứa danh sách các dữ liệu. Có hai cách tạo ra đối tượng mảng, sử dụng toán tửnew và khởi

tạo bằng ký hiệu

Cách 1:Tạo mảng vớinew Array(), ví dụ: var courses=newArray("HTML","CSS","JS");

Cách 2:Tạo mảng với khai báo dữ liệu trong[] var courses=["HTML","CSS","JS"];

Mỗi phần từ có một chỉ số trong mảng, phần tử thứ nhất chỉ số là0. Để truy cập tới phần tử mảng dùng ký hiệutên-mảng[chỉ-số-phần-tử]

var cacmonhoc=newArray("HTML","CSS","JS"); var monhoc= courses[0];// HTML

cacmonhoc[1]="C++";//đổi phần tử thứ 2 thành C++

Khi cố gắng truy cập phần tử mảng, mà phần tử đó khơng tồn tại thì nó trả về giá trị bằngundefined

var courses=newArray("HTML","CSS","JS"); document.write(courses[10]);

//Xuất ra "undefined" vì phần tử thứ 10 khơng có Tạo mảng bằng cách chỉ định số lượng phần tử

Ở cách tạo thứ 2 này, các phần tử không được gán giá trị ngay, mảng sẽ tạo ra số lượng phần tử yêu cầu sau đó giá trị từng phần tử được gán sau.

var courses=newArray(3); courses[0]="HTML"; courses[1]="CSS"; courses[2]="JS";

Một số thuộc tính và phương thức

Một số thuộc tính và phương thức định nghĩa sẵn cho các đối tượng mảng Số lượng phần tử trong mảng

Thuộc tínhlength cho biết số lượng phần tử trong mảng var courses=["HTML","CSS","JS"]; document.write(courses.length); //Outputs 3 Kết hợp 2 mảng Để kết hợp 2 mảng thành một mảng, dùng phương thứcconcat var c1=["HTML","CSS"]; var c2=["JS","C++"]; var courses= c1.concat(c2);

Ví dụ trên có được mảng courses bằng cách nối c2 vào c1. Vậycourses có bốn phần

tử: HTML, CSS, JS, C++. Nhớ làconcat khơng tác động gì trên mảng gốc, mà nó chỉ sử dụng các mảng gốc để tạo ra mảng kết hợp mới. Vậy mảng c1, c2 vẫn khơng có sự thay đổi nào

Duyệt qua các phần tử mảng bằng forEach courses.forEach(function(item, index, array){ console.log(item, index);

//HTML 0 //CSS 1 //JS 2

Thêm một phần tử vào cuối bằng push courses.push("GO");

Thêm một phần tử vào đầu bằng unshift courses.unshift("C++");

Xóa phần tử cuối của mảng bằng pop courses.pop();

Xóa phần tử đầu của mảng bằng shift courses.shift();

Xóa các phần tử theo chỉ số splice

//Xóa 2 phần từ bắt đầu phần tử ở vị trí index courses.splice(index,2);

Nhân bản một mảng với slice var courses2= courses.slice(); Mảng kết hợp

Nhiều ngôn ngữ lập trình có hỗ trợ đánh chỉ số khơng chỉ là bằng số mà có thể bằng text, đây là các mảng kết hợp. Rất tiếc là JavaScript không hỗ trợ loại mảng này. Tuy nhiên, bạn nhớ lại về đối tượng, truy cập thuộc tính đối tượng hoạt động khá giống với mảng kết hợp. var person=[];//mảng rỗng person["name"]="John"; person["age"]=46; document.write(person["age"]); //Outputs "46"

Bạn thấyperson hoạt động giống như một đối tượng. Các chỉ sốname, age không phải là chỉ số mảng mà là thuộc tính của đối tượngperson. Do đó nếu bạn lấy số phần tử mảng person.length sẽ trả về 0

Cách đơn giản để duyệt qua các phần tử mảng var index;

for(index=0; index< a.length;++index){ console.log(a[index]);

10. Các câu lệnh điều khiển

Câu lệnh điều kiện if, else if và các vòng lặp như vòng lặp for, vòng lặp while, vòng lặp do while, lệnh rẽ nhánh switch, break, continue

Khối lệnh trong Javascript

Nhiều câu lệnh Javascript có thể nhóm với nhau tạo ra khối lệnh, các khối lệnh được nhóm bằng cặp dấu ngoặc nhọn{}, các khối thường sử dụng trong các câu

lệnh điều khiển rẽ nhánh, vòng lặp ... {

//Các dòng lệnh trong khối }

Khối lệnh cũng có thể dán nhãn cho nó, để sau này từ vị trí khác, bạn có thể nhảy đến thi hành các lệnh trong khối (với lệnhcontinue,break)

labelexamp:{

//Các dòng lệnh trong khối có nhãn labelexamp }

Chú ý khai báo biến vớivar thì nó khơng bị giới hạn trong khối, khai báo biến vớilet thì phạm vị hiệu lực chỉ trong khối khai báo

var a=5; {

var a=2; }

console.log(a);

//Xuất ra là 2 => biến a trong và ngoài khối là 1 let b=10;

{

let b=20; }

//Xuất ra là 10 => biến b trong và ngoài khối là khác nhau alert(b);

Lệnh if, if ... else

Lệnh if : nếu điều kiện là đúng (true) thì thi hành các lệnh trong khối - nếu điều khiện saifalse thì khối lệnh sau nó bị bỏ qua, cú pháp là:

if(điều_kiện){

} Ví dụ: var myNum1=7; var myNum2=10; if(myNum1< myNum2){ alert("JavaScript rất dễ học."); }

Thi hành đoạn mã trên sẽ hiện thị hộp thoại thông báo: JavaScript rất dễ học. vì điều kiện làtrue nên lệnh alert thi hành

if ... else ...

Nếu biểu thức logic làtrue thi hành các lệnh trong khốiif, nếufalse thì thi hành khối lệnhelse

if(expression){

// thi hành các lênh ở đây (khối if) nếu true }

else{

// thi hành các lệnh (khối else) nếu điều kiện false } Ví dụ var myNum1=7; var myNum2=10; if(myNum1> myNum2){ alert("Đây là khối lệnh 1"); } else{ alert("Đây là khối lệnh 2"); }

Chạy code trên hiện thị thông báo:Đây là khối lệnh 2 vìmyNum1 > myNum2 làfalse

Khối lệnh else if

else if sẽ tạo ra câu lệnh điều kiệnif mới nếu điều kiện trước đófalse var course=1;

if(course==1){

}elseif(course==2){

document.write("CSS Tutorial"); }else{

document.write("JavaScript Tutorial"); }

Chạy code trên, trình duyệt sẽ hiện thịHTML Tutorial, nếu bạn gán biếncourse thì hiện thịCSS Tutorial, nếu gáncourse khác với 1 và 2 thì sẽ hiện thịJavaScript Tutorial

Lệnh switch

Trong trường hợp bạn có rẽ nhánh (nhiều điều kiện) khác nhau thay vì sử dụng nhiềuelse if hãy dùngswitch với cú pháp

switch(expression){ case n1:

//.. thi hành nếu expression bằng n1 break;

case n2:

//.. thi hành nếu expression bằng n2 break;

default:

//.. mặc định thi hành nếu expression khơng bằng giá trị nào ở trên } Ví dụ: var day=2; switch(day){ case1: document.write("Monday"); break; case2: document.write("Tuesday"); break; case3: document.write("Wednesday"); break; default: document.write("Another day");

}

// Outputs "Tuesday"

Lưu ý từ khóabreak; để điều hướng ra khỏi khối. Thường bạn cần cóbreak; ở cuối

mỗi khối của lệnhswitch, nếu thiếubreak thì sẽ khơng thốt lệnh mà sẽ thi hành khối tiếp theo. Ở ví dụ trên, nếu bỏ đibreak, thì script sẽ chạy từ điểm rẽ nhánhcase 2: cho đến cuối (xuất ra: Tuesday, Wednesday, Another day)

Từ khóadefault: định nghĩa khối mặc định, khối này thi hành nếu tất cả các điều kiện rẽ nhánh khơng thỏa mãn.

11. Các lệnh vịng lặpVòng lặp for Vòng lặp for

Cú pháp:

for(statement1; statement2; statement3){ Khối lệnh thi hành

}

• statement1 : lệnh thi hành trước khi vịng lặpfor bắt đầu

• statement2 : điều kiện kiểm tra trước mỗi lần thi hành khối lệnhfor (true thì khối lệnh sẽ thi hành,false sẽ khối for sẽ khơng thi hành - thốt lặp)

• statement3 : thi hành sau mỗi lần một vịng hồn thành Ví dụ:

for(i=1; i<=5; i++){

document.write(i+"<br >"); } //In ra 1 2 3 4 5

Có thể bỏ quastatement1 (vẫn giữ lại dấu;) var i=1;

for(; i<=5; i++){

document.write(i+"<br >"); }

//In ra 1

2 3 4 5

Tương tự bạn có thể bỏ quastatement3 vàstatement2 (vẫn giữ;), lưu ý bạn cũng có thể sử dụng lệnhbreak; để thốt vịng lặp. var i=0; for(;;i+=2){ if(i>10)break;//Thốt vịng lặp document.write(i+"<br >"); } for ... in

for ... in duyệt qua các key của đối tượng đếm được (không dùng cho mảng)

//Cú pháp

for(let yourvar in object){ }

//Ví dụ

let ob={key1:1, key2:2}; for(let k in ob){

console.log(k); }

//In ra: key1, key2

for ... of

Lệnhfor ... of duyệt qua các đối tượng.

//Cú pháp

for(let yourvar in objects){ } //Ví dụ let a=["A","B","C"]; for(let e in a){ console.log(e); } //In ra A,B,C Vòng lặp while

Thi hành khối lệnh khi mà điều kiện kiểm tra vẫn làtrue while(điều-kiện){

//Khối lệnh }

Đầu tiên nó kiểm tra điều kiện, nếutrue sẽ thi hành khối lệnh. Đến cuỗi khối lại kiểm tra điều kiện, nếu điều kiện vẫn làtrue thì lại tiếp tục thì hành vịng mới của khối lệnh. Ví dụ var i=0; while(i<=5){ document.write(i+"<br >"); i++; } //In ra 0 1 2 3 4 5

Lưu ý về việc sau một số vịng thì điều kiện phải làfalse nếu khơng vịng lặp sẽ lặp

lại vơ tận.

Vịng lặp do while

Giống với vịng lặpwhile nhưng khối lệnh thi hành ln mà không kiểm tra điều kiện trước, khi khối lệnh thi hành xong mới kiểm tra điều kiện để xem có lặp lại hay khơng Cú pháp do{ //Khối lệnh } while(condition); Ví dụ var i=20; do{ document.write(i+"<br >");

i++; } while(i<=25); //In ra 20 21 22 23 24 25

Vịng lặpdo ... while khối lệnh ln được thi hành ít nhất một lần Lệnh continue và break

Trong vịng lặp khi gặpcontinue; nó sẽ bỏ qua các lệnh cịn lại và khởi tạo vòng lặp

mới ln. Cịn nếu gặpbreak; thì bỏ qua các lệnh cịn lại đồng thời thốt khỏi vịng

lặp.

for(i=0; i<=70000; i++){ if(i==5){

continue;//Khởi tạo vịng lặp mới ln } document.write(i+"<br >"); if(i>=7){ break;//Thoát lặp nếu i >=7 } } //In ra các số: (bỏ qua 5) 0 1 2 3 4 6 7

Lệnhcontinue còn dùng để nhảy đến một khối lệnh có nhãn bằng cú pháp continue nhãn_khối_lệnh;

Lệnhbreak cịn dùng để hủy thi hành khối lệnh bên ngồi có nhãn, với cú pháp: break nhãn_khối_lệnh_ngồi;

Phần nói về các đối tượng có kiểu liệt kê được (ví dụ như mảng, danh sách ...), cịn có các lệnh duyệt qua từng phần tử liệt kê được đó với các lệnhfor ... in,for ... of.

12. Hàm(function)12.1. Hàm là gì? 12.1. Hàm là gì?

- Hàm là một tập hợp gồm nhiều câu lệnh, các câu lệnh này được sắp xếp theo một thứ tự xác định để xây dựng thành một chức năng cụ thể

- Mỗi hàm sẽ có một cái tên và hàm chỉ thực thi khi nó được gọi đến tên. Ví dụ:

o Trong kịch bản bên dưới, chúng ta có một hàm tên là GioiThieuBanThan.

o Hàm này gồm ba câu lệnh với chức năng là hiển thị một câu giới thiệu về bản thân.

<script>

function GioiThieuBanThan(){ var name = "Nhân";

var year = 1993;

document.write("Tôi là " + name + " sinh năm " + year); }

</script>

- Một hàm có thể được gọi nhiều lần(hay nói cách khác là khơng giới hạn số lần gọi hàm).

Ví dụ:

o Trong kịch bản bên dưới, hàm GioiThieuBanThan được gọi đến ba lần

<script>

function GioiThieuBanThan(){ var name = "Nhân";

var year = 1993;

document.write("Tôi là " + name + " sinh năm " + year); }

GioiThieuBanThan(); //Gọi lần thứ nhất document.write("<hr>");

GioiThieuBanThan(); //Gọi lần thứ hai document.write("<br>"); document.write("<br>"); GioiThieuBanThan(); //Gọi lần thứ ba </script> 12.2. Phân loại hàm

- Hàm được chia làm hai loại cơ bản: hàm khơng có tham số & hàm có tham số - Hàm khơng có tham số là hàm mà kết quả thực thi của nó ln ln khơng thay đổi.

Ví dụ:

o Hàm GioiThieuBanThan bên dưới là một hàm khơng có tham số

o Kết quả thực thi của nó ln là hiển thị dịng chữ"Tơi là Nhân sinh năm 1993"

<script>

function GioiThieuBanThan(){ var name = "Nhân";

var year = 1993;

document.write("Tôi là " + name + " sinh năm " + year); }

GioiThieuBanThan(); //Tôi là Nhân sinh năm 1993 GioiThieuBanThan(); //Tôi là Nhân sinh năm 1993 GioiThieuBanThan(); //Tôi là Nhân sinh năm 1993 </script>

- Hàm có tham số là loại hàm mà khi gọi hàm ta phải truyền giá trị vào cho nó. Tùy vào giá trị được truyền mà hàm sẽ thực thi và cho ra kết quả khác nhau.

Ví dụ:

- Hàm GioiThieuBanThan bên dưới có hai tham số là x & y - Về nội dung của hàm:

o Biến name được gán giá trị bằng với giá trị của tham số x

o Biến year được gán giá trị bằng với giá trị của tham số y -(1) Trong lần gọi hàm đầu tiên:

o Tham số x được truyền giá trị là Trình Giảo Kim ==> biến name có giá trị Trình Giảo Kim

o Tham số y được truyền giá trị là 1993 ==> biến year có giá trị 1993

==> Kết quả thực thi của hàm sẽ là hiển thị dịng chữTơi là Trình Giảo Kim sinh năm 1993

-(2) Trong lần gọi hàm thứ hai:

o Tham số x được truyền giá trị là La Thành ==> biến name có giá trị La Thành

o Tham số y được truyền giá trị là 1989 ==> biến year có giá trị 1989