Trần Ngọc Minh Notes

Khoảng trắng

Khoảng trắng là để tách các chuỗi kí tự. Trong một chuỗi kí tự, có những khoảng trắng không thể bị xoá và có những khoảng trắng có thể bị xoá. Ví dụ:

var ob = this;

khoảng trắng giữa var và ob không thể bị xoá, trong khi các khoảng trắng khác có thể bị xoá. Lệnh trên sẽ tương đương:

var ob=this;

Nhưng nếu viết như sau sẽ bị lỗi:

varob = this;

Chú thích (comment)

Chú thích (comment) là nội dung không được thực thi nhằm giải thích các đoạn mã JavaScript giúp người khác có thể đọc code dễ dàng hơn hoặc có thể giúp ích trong quá trình sửa lỗi chương trình.

Chú thích có hai dạng là chú thích trên một hàng bắt đầu bằng dấu // hay chú thích trên nhiều hàng (block) thì bắt đầu bằng /* và kết thúc bằng */.

Ví dụ chú thích trên một hàng:

// thay đổi tiêu đề
document.getElementById("myH").innerHTML = "My First Page";

Ví dụ chú thích trên nhiều hàng:

/*
Đoạn code sẽ thay đổi
tiêu đề với id = "myH"
và đoạn văn bản với id = "myP"
trong trang web của tôi
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

Chú ý: chú thích trong JavaScript nên sử dụng dấu //, hạn chế dùng /**/ vì /* có thể được dùng trong regular expressions. Ví dụ đoạn mã sau sẽ phát sinh lỗi:

/*
var rm_a = /a*/.match(s);
*/

Định danh (Identifier)

Định danh là các định danh như tên biến, tên hằng, tên hàm,…Các định danh bắt đầu bằng một kí tự hay dấu _ hay dấu $. Các định danh không được trùng tên các từ khoá (key words) sau:

abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with undefined NaN Infinity

Số (Number)

Không giống nhiều ngôn ngữ lập trình khác, JavaScript chỉ có một kiểu số và số trong JavaScript luôn được lưu trữ  ở dạng dấu chấm động 64 bit (64 bit floating point), như kiểu double trong Java. Việc không phân chia nhiều kiểu dữ liệu như integer, long, short,…là một thuận lợi, nó giúp người lập trình JavaScript tránh được nhiều lỗi liên quan tới xử lí số như lỗi tràn (overflow) chẳng hạn. Hai lệnh sau là như nhau:

var x = 34.00;
var y = 34;

Đối với các số rất lớn hoặc rất nhỏ, có thể được biểu diễn bằng kí hiệu khoa học, tức dùng kí hiệu e. Xem ví dụ sau:

var x = 123e5; // 12300000
var y = 123e-5; // 0.00123

Số âm được biểu diễn có dấu -, ví dụ:

var y = -34;

Số thập lục phân (cơ số 16) được biểu diễn có 0x ở trước, ví dụ:

var x =0xFF; // x sẽ là 255

JavaScript cung cấp phương thức toString() để chuyển các số sang cơ số 2, 8, 16. Xem ví dụ:

var myNumber = 128;
myNumber.toString(16);// trả về 80
myNumber.toString(8);// trả về 200
myNumber.toString(2);// trả về 10000000

Từ khoá NaN (Not a Number) dùng để chỉ ra một số không hợp lệ. Lỗi phổ biến phát sinh NaN là thực hiện các phép toán số học giữa một số và một chuỗi kí tự không phải dạng số, ví dụ:

var x = 100 / "Apple";// x sẽ là NaN (Not a Number)

Tuy nhiên ví dụ sau là hợp lệ và không phát sinh NaN:

var x = 100 /"10";// x = 10

JavaScript cung cấp hàm isNaN() để phát hiện NaN. Hàm này trả về true nếu phát hiện NaN, ngược lại trả về false. Xem ví dụ:

var x = 100 / "Apple";
isNaN(x); // trả về true vì x là NaN (Not a Number)

NaN là một số. Có thể kiểm tra điều này bằng toán tử typeof như sau:

typeof NaN; // trả về "number"

Giá trị Infinity sẽ được trả về nếu giá trị số vượt quá giới hạn cho phép (khoảng 1.79769313486231570e+308) hay thực hiện phép chia với giá trị 0.

Infinity là một số (có thể dùng typeof để kiểm tra).

JavaScript cung cấp nhiều phương thức cho số (sẽ tìm hiểu ở các phần sau). Trong JavaScript có đối tượng Math chứa một tập các phương thức thao tác với số, như phương thức Math.floor (number) dùng để chuyển một số sang số nguyên (integer).

Chuỗi (String)

Một string là một chuỗi kí tự được chứa trong dấu nháy đơn hay nháy kép. String có thể chứa không hoặc nhiều kí tự. Kí tự \ gọi là kí tự thoát (escape character). Các kí tự trong JavaScript có độ dài 16 bit. JavaScript không có kiểu kí tự. Kí tự trong JavaScript là string chứa một kí tự.

Các kí tự đặc biệt hay các kí tự thoát (escape sequences) gồm dấu \ và một kí tự (xem bảng dưới) có thể được chèn vào một string mà bình thường nó không được phép. Bảng các kí tự đặt biệt:

Các kí tự thoát	Chức năng
\’	Single quote
\”	Double quote
\\	Slashback
\n	New line
\r	Carriage return
\t	Tab
\b	Backspace
\f	Form feed
\u + 4 hex digits	Convert a number (hex) to a character

Một vài ví dụ về chèn các kí tự đặc biệt vào chuỗi:

var x = 'It\'s alright';
var y = "We are the so-called \"Vikings\" from the north.";
var z ='\u0041BC'; // trả về ABC

String có thuộc tính length trả về chiều dài của chuỗi. Ví dụ:

var txt = "minh";
var txtlen = txt.length; // trả về 4

Strings là immutable, nghĩa là không thay đổi khi tạo ra.

Có thể kết hợp các chuỗi thành chuỗi mới bằng toán tử +. Ví dụ:

"a" + "b" === "ab" sẽ trả về true

JavaScript cung cấp một tập hợp các phương thức để xử lí chuỗi, ví dụ: "minh".toUpperCase() === "MINH"

Các lệnh (statements)

Các lệnh (statements) là các chỉ dẫn được thực thi bởi trình duyệt web. Mỗi lệnh trong JavaScript kết thúc bằng dấu ;. Ví dụ lệnh yêu cầu trình duyệt web hiển thị dòng  Xin chào bạn Minh trong vùng có id= "Vi_du"

document.getElementById("Vi_du").innerHTML = "Xin chào bạn Minh";

Chương trình JavaScript có nhiều lệnh. Các lệnh sẽ được thực thi tuần tự từ lệnh đầu tiên (ở trên cùng) xuống lệnh cuối cùng (top – bottom). Ví dụ các lệnh sau được thực thi tuần tự theo thứ tự 1 – 2  – 3 – 4:

var x = 5; // 1
var y = 6; // 2
var z = x + y; // 3
document.getElementById("demo").innerHTML = z; // 4

Nếu lệnh quá dài (quá 80 kí tự), JavaScript cho phép ngắt lệnh xuống hàng mới. Ví dụ lệnh sau là hợp lệ trong JavaScript:

document.getElementById("demo").innerHTML = "Hello Dolly.";

Nhiều lệnh liên quan tập hợp trong một khối lệnh (block). Khối lệnh (block) bắt đầu bằng { và kết thúc bằng }.

Biến (variable)

Các biến là không gian chứa các giá trị (số, chuỗi, đối tượng,…). Lệnh khai báo biến bắt đầu bằng từ khoá var. Ví dụ lệnh khai báo biến x chứa giá trị là số 5 như sau:

var x = 5;

Các biến có thể dùng trong biểu thức (expression). Ví dụ lệnh tính tổng các giá trị từ các biến price1 và price2 như sau:

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

Tên biến là duy nhất. Khi đặt tên biến phải tuân theo các quy ước sau:

• Tên biến chứa kí tự, kí số, $ và _.
• Bắt đầu bằng kí tự, dấu $ hay dấu _.
• Tên biến phân biệt hoa thường (case sensitive) tức là x khác X.
• Tên biến không trùng các từ khoá (key words).

Khai báo biến bắt đầu bằng từ khoá var và có thể chứa giá trị hoặc không chứa giá trị. Giá trị được lưu trữ trong biến thông qua toán tử gán kí hiệu là = (khác toán tử quan hệ bằng kí hiệu ==). Ví dụ:

var pi = 3.14;
var width;

Khác với hầu hết các ngôn ngữ lập trình khác, các biến trong JavaScript khai báo không cần kiểu dữ liệu (data type). Kiểu dữ liệu của biến chính là kiểu dữ liệu của giá trị mà nó lưu trữ. Ví dụ:

var x = 5; // kiểu dữ liệu là số nguyên
x = "hello"; // kiểu dữ liệu là chuỗi

Có thể khai báo nhiều biến cùng lúc. Các biến cách nhau bởi dấu ,. Ví dụ:

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

Biến được khai báo trong các hàm (functions) chỉ có tác dụng trong phạm vi hàm gọi là biến địa phương (local variables) hay cục bộ, các biến khai báo ngoài các hàm gọi là biến toàn cục (glolal variables) có thể được dùng trong phạm vi toàn trang web.

Ví dụ biến toàn cục và biến cục bộ:

var carName =" Volvo";// biến toàn cục
function myFunction() {
   var x = 5; // biến cục bộ, chỉ tác dụng trong phạm vi hàm 
              // myFunction()
}

Các toán tử (operators)

Cũng như hầu hết các ngôn ngữ lập trình, JavaScript cũng hỗ trợ các toán tử gồm:

• Toán tử số học: +, -, *, /, ++, —
• Toán tử gán: =, +=, -=, *=, /=, %=
• Toán tử chuỗi: nối hai hay nhiều chuỗi bằng +
• Toán tử quan hệ: ==, ===, !=, !==, >, <, >=, <=, ?
• Toán tử luận lý: && (And), || (Or), ! (Not)
• Toán tử kiểu: typeof (trả về kiểu dữ liệu của biến), instanceof (trả về true nếu một object là một instance của một kiểu object).

Lệnh ngắt

Là các lệnh dừng chương trình tại một vị trí nào đó và thoát hay chuyển đến thực hiện tại một vị trí khác.

• Lệnh break: dùng để thoát khỏi vòng lặp hay lệnh switch hay một khối lệnh nào đó.
• Lệnh continue: bỏ qua lệnh lặp hiện tại và nhảy đến lần lặp kế tiếp hoặc sẽ trở lại tại đỉnh của khối lệnh (nếu dùng nhãn (label)).
• Lệnh return: ngừng thực thi chương trình và trả về kết quả nào đó.
• Lệnh throw: cho phép tạo ra các thông báo lỗi tuỳ ý.

Lệnh if

Khi viết code, chúng ta hay gặp những tình huống phải đưa ra những hành động khác nhau trong những điều kiện khác nhau. Để làm điều này, chúng ta sử dụng các lệnh điều kiện (conditional statements). Lệnh điều kiện trong JavaScript gồm lệnh if và switch. Lệnh if có các phiên bản sau:
Lệnh if:

if (điều kiện) {
    khốí lệnh sẽ thực thi nếu điều kiện là đúng (hay true)
}

Ví dụ:

if(tuoi < 18) {
  thongbao = "Ban chua du tuoi";
}

Lệnh if…else:

if (điều kiện) {
   khốí lệnh sẽ thực thi nếu điều kiện là đúng (hay true)
} else {
   khốí lệnh sẽ thực thi nếu điều kiện là sai (hay false)
}

Ví dụ:

if(tuoi < 18) {
    thongbao = "Ban chua du tuoi";
} else {
    thongbao = "Chao mung ban den voi website chung toi!";
}

Lệnh if…else if…else:

if (điều kiện 1) {
   khốí lệnh sẽ thực thi nếu điều kiện 1 là đúng (hay true)
} else if (điều kiện 2) {
   khốí lệnh sẽ thực thi nếu điều kiện 1 là sai (hay false)và điều kiện 2 là đúng (hay true)
} else {
   khốí lệnh sẽ thực thi nếu điều kiện 1 là sai (hay false) và điều kiện 2 là sai (hay false)
}

Ví dụ:

if(time < 10) {
     greeting = "Good morning";
} else if(time < 20){
     greeting = "Good day";
}else {
     greeting = "Good evening";
}

Lệnh switch

Cũng là lệnh điều kiện giống if dùng để đưa ra những hành động khác nhau trong những điều kiện khác nhau.
Cú pháp:

switch(bieu_thuc) {
   case n:
      khối lệnh
      break;
   case m:
      khối lệnh
      break;
   default:
      khối lệnh mặc định
}

Cách làm việc:
Giá trị của bieu_thuc sẽ được so sánh với từng trường hợp trong case. Nếu nó khớp với trường hợp (case) nào thì sẽ thực hiện khối lệnh tại case đó và thoát khỏi switch nhờ lệnh break mà không cần kiểm tra các case còn lại. Nếu bieu_thuc không khớp với mọi case thì khối lệnh trong default sẽ thực thi.
Vi dụ: hàm getDay()sẽ trả về ngày thứ mấy trong tuần dưới dạng số từ 0..6 (Sunday=0, Monday = 1, Tuesday = 2,…). Đoạn mã sau sẽ dựa vào số 0..6 để trả về tên ngày như Sunday, Monday,….

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

Có một vài trường hợp chúng ta muốn nhiều case khác nhau thực hiện cùng một lệnh hay khối lệnh. Chúng ta làm điều này bằng cách đặt các khối lệnh chung và lệnh break phù hợp. Xét ví dụ sau:

switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}

Lệnh try

Trong lập trình, một trong những vấn đề quan trọng nhất là kiểm tra, phát hiện và sửa lỗi chương trình (debugging). Khi viết code trong JavaScript, chúng ta nên dùng lệnh try để việc phát hiện và xử lí lỗi thêm dễ dàng.

Cú pháp lệnh try:

try {
    khối lệnh để kiểmtra
}
catch(err) {
    Khối lệnh sẽ thực thi khi phát hiện lỗi từ try
}
finally {
    Khối lệnh sẽ thực thi mà không quan tâm kết quả từ try/catch
}

Lệnh try cho phép định nghĩa các khối lệnh sẽ được kiểm tra lỗi khi thực thi. Lệnh catch thực thi khối lệnh sẽ thực thi khi phát hiện lỗi từ try, lỗi phát hiện sẽ được lưu trữ trong biến err. Lệnh finally thực thi khối lệnh trong nó mà không cần quan tâm kết quả từ try/catch.

Xem ví dụ sau kiểm tra một biến x, ứng với mỗi trường hợp vi phạm điều kiện mà lệnh try phát hiện ra, một thông báo sẽ được “ném ra” nhờ lệnh throw và thông báo này sẽ được gán vào biến err của catch:

var x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try{
   if(x == "")throw "rong";
   if(isNaN(x))throw "khong phai la so";
   x = Number(x);
   if(x > 10)throw "qua cao";
   if(x < 5)throw "qua thap";
}
catch(err){
   message.innerHTML = "Loi: " + err + ".";
}
finally{
   document.getElementById("demo").value = "";
}

Các lệnh lặp

Trong lập trình, có những lệnh hay khối lệnh được lặp lại nhiều lần. Thay vì viết các lệnh hay khối lệnh này nhiều lần, chúng ta có thể dùng các lệnh lặp.

Trong JavaScript có các lệnh lặp là for, for/in, while và do/while.

Lệnh for

Dùng để lặp theo một số lần xác định cho trước. Ví dụ thực hiện lệnh xuất dòng chữ Hello 5 lần. Cú pháp lệnh for:

for ( statement 1;statement 2;statement 3) {
   Đoạn mã được lặp (1)
}

statement 1: là lệnh được thực thi trước khi (1) được thực thi.

statement 2: điều kiện lặp

statement 3: là lệnh được thực thi mỗi lần sau khi (1) thực thi

Ví dụ: lệnh hiển thị dòng Hello 5 hàng

for(i = 0; i < 5; i++) {
   text +=  "Hello" + "";
}

Cách thực thi:

Trước khi lặp: biến i được gán bằng 0 (statement 1)

Điều kiện lặp: chỉ thực hiện lặp nếu i < 5 (statement 2)

Sau mỗi lần lặp: biến i sẽ tăng 1 đơn vị (statement 3)

Lệnh for/in

Dùng để lặp qua các thuộc tính của đối tượng (object). Ví dụ:

var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
   text += person[x];
}

Đối tượng person có các thuộc tính là fname, lname và age. Mỗi thuộc tính sẽ có những giá trị tương ứng là John, Doe và 25. Biến x sẽ lưu từng giá trị từ mỗi thuộc tính của đối tượng person.

Lệnh while

Khác với for, lệnh while sẽ lặp theo một điều kiện nào đó. Chừng nào điều kiện còn đúng thì lệnh lặp sẽ vẫn thực thi. Cú pháp:

while (dieu_kien) {
 Đoạn mã được lặp (1)
}

Ví dụ: lệnh lặp sau sẽ còn thực thi chừng nào điều kiện i < 10 còn đúng, biến i sẽ tăng 1 đơn vị sau mỗi lần lặp:

i = 0;
while (i < 10) {
   text += "The number is " + i;
   i++;
}

Lệnh do/while:

Cũng giống lệnh while là lặp theo điều kiện, nhưng do/while thực thi lệnh ít nhất một lần trước khi kiểm tra điều kiện. Cú pháp:

 do{
     Đoạn mã được lặp (1)
} while (dieu_kien)

Xét ví dụ sau để phân biệt while và do/while:

Đoạn mã sau sẽ không thực thi vì i = 11 >10

i = 11;
while (i < 10) {
   text += "The number is " + i;
   i++;
}

Đoạn mã sau sẽ thực thi và kết quả là The number is 11

i = 11;
do {
text += "The number is " + i;
i++;
} while (i < 10)

< JavaScript cơ bản