Javascript Cheat Sheet

2021-05-06 • 5539 từ • 27 phút

Nội dung

Javascript (sau đây gọi là: Js) là một trong những ngôn ngữ phổ biến nhất hiện nay để phát triển website. Việc học và áp dụng thuần thục Js là một điều vô cùng có ích cho mọi người

Bookmark nào

Bạn có thể Bookmark lại trang này để có gì sau này tham khảo nha

Tìm hiểu chung về Js

Lịch sử và khái niệm

Js là ngôn ngữ lập trình thường được dùng nhiều nhất cho các nội dung động (dynamic) theo kịch bản (scripts) ở phía máy khách trên trang web. Nhưng nó cũng được dùng ở phía máy chủ sử dụng trình chạy là Node.js

Javascript không phải là Java. ĐÂy là hai ngôn ngữ khác nhau hoàn toàn từ cú pháp, cách dùng…
Js được dùng trên trình duyệt mở ra khả năng cho lập trình viên thao tác với nội dung trang web thông qua DOM (Document Object Model). Thao tác với dữ liệu thông qua AJAX và indexDB, vẽ biểu đồ với canvas, tương tác với thiết bị thông qua trình duyệt với nhiều loại API. Js là một trong những ngôn ngữ thông dụng nhất.
Js được phát triển bởi Brendan Eich khoảng thời gian tháng 9 năm 1995 khi làm cho công ty Netscape với cái tên đầu tiên là Mocha sau đó đổi tên thành LiveScript và cuối cùng thành JavaScript. Phiên bản mới nhất của Js là ECMAScript 7
Ta có thể ví Js là lớp bánh thứ 3 của tiêu chuẩn web và hai lớp kia là HTML và CSS. Trong đó
- HTML là ngôn ngữ đánh dấu văn bản dùng để bố cục và ghi ý nghĩa cho nội dung trang web ví dụ như xác định đoạn văn, tiêu đề, bảng biểu, hình ảnh
- CSS là ngôn của của phong cách dùng để trang trí cho nội dung trên HTML ví dụ như màu sắc chữ, màu nền…
- JS là ngôn ngữ kịch bản giúp ta tạo ra, cập nhật nội dung động, chuyển động hình ảnh…

Nhúng Js vào web

Ta có hai cách chủ yếu để chạy lệnh Js trên website

Nhúng trực tiếp dòng lệnh Js vào tập tin HTML trong phần head hoặc body. Nhưng thường thì gắn vào phần body để đảm bảo tốc độ tải trang và hạn chế lỗi. Cú pháp cho nhúng là <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>
Tham chiếu một tập tin có phần mở rộng .js vào trong tập tin HTML với cú pháp <script src="duong_dan_toi_file/ten_file.js" defer />

JS Cheat Sheet

Khái niệm chung

Tên	Giải thích & ví dụ
`Comment` ghi chú một dòng và nhiều dòng	Có hai loại ghi chú trong Js là: - Ghi chú một dòng với 2 ký tự gạch chéo ví dụ `// phía sau là ghi chú` - Ghi chú nhiều dòng với cú pháp `/* ghi chú nhiều dòng */`
`Variables` gọi là biến, là giá trị lưu dữ liệu lại để thực hiện các phép tính hoặc các thao tác khác	`var` - cách dùng cũ, gán lại được giá trị, sử dụng trong hàm và bị hoisting `const` - có từ ES6, không có hoisting, không được gán lại, dùng lưu giữ giá trị không đổi, phạm vi trong khối {//code} `let` - có từ ES6, không có hoisting, có thể được gán lại, phạm vi trong khối {//code}
`Data types` loại dữ liệu	Javascript có nhiều loại dữ liệu `Number` số, ví dụ `let doidev = 1` `String` chuỗi, ví dụ: `let tretrau = “Đời Dev”` `Boolean` đúng/sai, ví dụ `let chemgio = true` `Array` mảng, ví dụ `let doidev = ["bí kíp", "chém gió", "ăn vạ"]` `Undefined` không xác định, ví dụ `let doidev; typeof doidev` `Objects` đối tượng, ví dụ `let doidev = {tên:"Đời Dev",chức năng: "Chém Gió"}`

Arrays (Mảng)

Mảng là nhóm các loại dữ liệu vào với nhau và không bắt buộc các loại dữ liệu trong mảng phải cùng loại. Ví dụ ta có mảng ban đầu như sau: let doidev = ["bí kíp", "chém gió", "ăn vạ", true, "chuẩn", "chém gió" ]

Ta cùng tìm hiểu các phương thức của mảng theo bảng dưới

Phương thức	Mô tả & ví dụ	Kết quả
`array.concat(arr,str)`	Nối các mảng khác nhau thành một `let doidev2 = doidev.concat("cao cấp")`	`console.log(doidev2) = ["bí kíp","chém gió","ăn vạ",true,"chuẩn","chém gió","cao cấp"]`
`array.join(seperator)`	Nối các phần tử trong mảng thành chuỗi mặc định là dấy phẩy “," `let joinDoiDev = doidev.join()`	`console.log(joinDoiDev) = "bí kíp,chém gió,ăn vạ,true,chuẩn,chém gió"`
`array.indexof(item,start)`	Trả về thứ tự chỉ số của phần tử tìm được đầu tiên tìm thấy trong mảng bắt đầu từ start `let first_index = doidev.indexOf("ăn vạ")`	`console.log(first_index) = 2`
`array.lastindexof(item,start)`	Trả về thứ tự chỉ số của phần tử tìm được cuối cùng tìm thấy trong mảng, bắt đầu từ start `let last_index = doidev.lastIndexOf("chém gió")`	`console.log(last_index) = 5`
`array.sort(compareFunction)`	Sắp xêp theo thứ tự bảng chữ cái của các phần tử trong mảng nếu để trống tham số hoặc theo hàm so sánh là tham số truyền vào `let sort_doidev = doidev.sort()`	`console.log(sort_doidev) = ["bí kíp","chuẩn","chém gió","chém gió",true,"ăn vạ"]`
`array.reverse()`	Sắp xếp các phần tử theo thứ tự đảo ngược `let reverse_doidev = doidev2.reverse()`	`console.log(reverse_doidev) = ["cao cấp","chém gió","chuẩn",true,"ăn vạ","chém gió","bí kíp"]`
`array.valueof()`	Trả về đối tượng mảng `console.log(doidev.valueOf())`	`["bí kíp","chém gió","ăn vạ",true,"chuẩn","chém gió"]`
`array.slice(start, end)`	Trích xuất một phần của mảng và trả về mảng mới tính từ vị trí start tới end và không bao gồm end `let short_name = doidev.slice(0,2)`	`console.log(short_name) = ["bí kíp","chém gió"]`
`array.splice(i,remove_item,add_1,add_2...)`	Thay thế một hoặc một số phần tử vào mảng cũ tính từ vị trí I sẽ loại bỏ bao nhiêu remove_item và thay bằng add_1, add_2… `doidev.splice(2,0, "kéo bão", "gọi mưa") <br> let new_doidev = doidev.splice(2)`	`console.log(doidev) =["bí kíp","chém gió","kéo bão","gọi mưa","ăn vạ",true,"chuẩn","chém gió"]<br> console.log(doidev) = ["bí kíp","chém gió"] <br> console.log(new_doidev) = ["ăn vạ",true,"chuẩn","chém gió"]`
`array.unshift(item1,item2)`	Thêm phần tử mới vào vị trí đầu tiên của mảng `let unshift_doidev = doidev.unshift("Đầu tiên")`	`console.log(doidev) = ["Đầu tiên","bí kíp","chém gió","ăn vạ",true,"chuẩn","chém gió"]`
`array.shift()`	Loại bỏ phần tử đầu tiên của mảng `let shift_doidev = doidev.shift()`	`console.log(doidev) = ["chém gió","ăn vạ",true,"chuẩn","chém gió"]`
`array.pop()`	Loại bỏ phần tử cuối cùng của mảng `let pop_doidev = doidev.pop()`	`console.log(doidev) = ["bí kíp","chém gió","ăn vạ",true,"chuẩn"]`
`array.push(item1, item2)`	Thêm phần tử vào vị trí cuối cùng của mảng `let push_doidev = doidev.push("cuối cùng")`	`console.log(doidev) = ["bí kíp","chém gió","ăn vạ",true,"chuẩn","chém gió","cuối cùng"]`
`array.tostring()`	In ra giá trị chuỗi của các phần tử trong mảng cách nhau bởi dấy phẩy “," `console.log(doidev.toString())`	`"bí kíp,chém gió,ăn vạ,true,chuẩn,chém gió"`

Operators (Toán tử)

Toán tử	Giải thích
`Basic` cơ bản	Cộng (+) Trừ (-) Nhân () Chia lấy dư (%) ví dụ `8 % 3 dư 2` Tăng (++) Giảm (- -) Chia (/) Chạy trong dấu ngoặc trước (…) Số mũ (*) Phép gán (=)
`Logical` logic	Và `(&&)` Hoặc `( \| )` Không phải `(!)`
`Comparison` so sánh	Bằng về giá trị (==) Bằng về giá trị và kiểu dữ liệu (===) Không bằng về giá trị (!=) Lớn hơn (>) Nhỏ hơn (<) Lớn hơn hoặc bằng (>=) Không bằng về giá trị và kiểu dữ liệu (!==) Nhỏ hơn hoặc bằng (<=) Toán tử ba ngôi (?) `let abc = tuoi <15 ? "Cấm" :tuoi < 18 ? "Cũng cấm" : tuoi < 20 ? "OK Đi" : "OK Tuốt"`
`Bitwise` hoạt động trên một hay nhiều số nhị phân (bit)	`(&)` cả 2 bit là 1 thì trả về 1 còn lại trả về 0. Ví dụ `111 & 100 = 110` `( \| )` một trong 2 bit là 1 thì trả về 1, còn lại trả về 0. Ví dụ `1010 & 0100 = 1110` `(~)` - not - đảo ngược 1 thành 0, 0 thành 1. Ví dụ `~0101 => 1010` `(<<)` - dịch chuyển bit sang trái `(>>)` - dịch chuyển bit sang phải, ngoại trừ bit đầu tiên `(>>>)` - dịch chuyển tất cả các bit sang phải XOR `(^)` - trả về 1 nếu bit khác nhau. Ví dụ `1100 ^ 1111 = 0011`

Hàm mặc định

Phương thức	Mô tả & ví dụ	Kết quả
`alert()`	Hiện hộp thoại cảnh báo `alert("Hello, Đời Dev")`	`Hiện Hộp thoại`
`document.write()`	Ghi đầu giá trị đầu ra lên HTML `document.write("Hello")`	`Hiện lên html`
`console.log()`	Kiểm tra lỗi trên console trình duyệt `console.log("Hello")`	`Hiện lên console`
`prompt()`	Hiện hộp thoại cho gười dùng điền giá trị đầu vào `prompt("Thông báo", "Giá trị mặc định")`	`Hiện lên hộp thoại`
`confirm()`	Hiện hộp thoại xác nhận có/không trả về đúng/sai khi người dùng bấm vào `confirm("Thông báo")`	`Hiện lên hộp thoại`

Global Functions (hàm chung)

Toán tử	Giải thích
encodeURI()	Mã hóa URI qua UTF-8. Ví dụ `var uri = “doidev.com/posts”; var enc = encodeURI(uri);`
encodeURIComponent()	Mã hóa cho các thành phần URI. Ví dụ `var uri = “doidev.com/posts”; var enccomp = encodeURIComponent(uri);`
decodeURI()	Giải mã URI được tạo bởi mã hóa URI hoặc tương tự. Ví dụ `var dec = decodeURI(enc);`
decodeURIComponent()	Giải mã một thành phần của URI. Ví dụ `var decomp = decodeURIComponent(enccomp);`
parseInt()	Biến đổi đầu vào thành số nguyên. Ví dụ `var a = parseInt(“2003 monday”);`
parseFloat()	Biến đổi đầu vào thành số thập phân. Ví dụ `var b = parseFloat(“23.333”);`
eval()	Đánh giá mã lệnh Js được trình bày dưới dạng chuỗi. Ví dụ `var x = eval(“2 * 2”);`
Number()	Ép về kiểu dữ liệu số. Ví dụ `var y = new Date(); var z = Number(y);`
isNaN()	Xác định xem giá trị có phải là số hay không. Ví dụ `isNan(25);`
isFinite()	Xác định số truyền vào có phải số hữu hạn hay không?. Ví dụ `isFinite(-245)`

Loops (Vòng lặp)

Vòng lặp	Giải thích
for	Vòng lặp trong Js. Ví dụ `for (let i=0;i<5;i++){// code}`
while	Thực thi đoạn mã lệnh trong khi điều kiện còn đúng. Ví dụ `while (product.length > 5) {// code}`
do… while	Tương tự như while nhưng thực thi khối lệnh ít nhất một lần rồi vì điều kiện nằm phía sau khối lệnh. Ví dụ `do { // thực thi lệnh} while (điều kiện){}`
break	Dừng và thoát khỏi vòng lệnh dựa vào một số điều kiện. Ví dụ `if(1<10) break;`
continue	Tiếp tục thực hiện nếu thỏa mãn điều kiện. Ví dụ `if(j>10) continue;`

If-else

If-else dùng để thiết lập điều kiện để trả về kết quả khác nhau dựa vào điều kiện khác nhau.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


let diem = 6

if(diem > 9) {
  document.write(" Giỏi ")
} else if (diem >7) {
  document.write ("Khá")
} else if (diem >5) {
  document.write("Trung bình")
} else {
  document.write("Yếu")
}

Hiển thị kết quả nào

String (chuỗi)

Các phương thức của chuỗi. Ví dụ chuỗi là let doidev = "Chuyên chém gió về Web Dev & đời Dev"

Phương thức	Mô tả & ví dụ	Kết quả
`string.length`	Xác định độ dài của chuỗi `console.log(doidev.length)`	`36`
`string.indexof(str)`	Trả về chỉ số vị trí của lần xuất hiện đầu tiên của ký tự hoặc từ trong chuỗi `console.log(doidev.indexOf("y"))`	`3`
`string.lastindexof(tr)`	Trả về chỉ số vị trí của lần xuất hiện cuối cùng của ký tự, từ trong chuỗi `console.log(doidev.lastIndexOf("c"))`	`7`
`string.search(str)`	Tìm kiếm và trả về chỉ số vị trí của giá trị được tìm kiếm trong chuỗi `console.log(doidev.search("ê"))`	`4`
`string.slice(start, end)`	Tạo ra chuỗi mới tính từ start và có độ dài bằng hiệu end trừ start. Nếu start âm thì sẽ lấy chuỗi theo chiều ngược lại là đếm từ cuối lên `console.log(doidev.slice(9))`	`"ém gió về Web Dev & đời Dev"`
`string.substring(start, end)`	Tạo ra chuỗi tính từ start và có độ dài bằng hiệu end trừ start. Lưu ý tham số truyền vào hàm phải là số dương `console.log(doidev.substring(2,12))`	`"uyên chém "`
`string.substr(start, length)`	Tạo ra chuỗi tính từ start và chuỗi có độ dài bằng length. Nếu start âm thì nó tính từ cuối trở lên. Tham số end phải dương `console.log(doidev.substr(2,12))`	`"uyên chém gi"`
`string.toUpperCase(str)`	Biến đổi thành chữ hoa toàn bộ ký tự trong chuỗi `console.log(doidev.toUpperCase())`	`"CHUYÊN CHÉM GIÓ VỀ WEB DEV & ĐỜI DEV"`
`string.toLowerCase(str)`	Biến đổi thành chữ thường toàn bộ ký tự trong chuỗi `console.log(doidev.toLowerCase())`	`"chuyên chém gió về web dev & đời dev"`
`string.concat(str)`	Nối hai hay nhiều chuỗi vào chuỗi khác `console.log(doidev.concat(" & linh tinh"))`	`"Chuyên chém gió về Web Dev & đời Dev & linh tinh"`
`string.trim(str)`	Loại bỏ khoảng trống ở đầu và cuối chuỗi `console.log(doidev.trim())`	`"Chuyên chém gió về Web Dev & đời Dev"`
`string.charAt(index)`	Tìm ký tự tại một vị trí cho trước `console.log(doidev.charAt(27))`	`"&"`
`string.charCodeAt(index)`	Trả về mã unicode của ký tự tại vị trí cho trước `console.log(doidev.charCodeAt(27))`	`38`
`string.split(char)`	Chuyển đổi chuỗi thành mảng dựa chia cắt bởi ký tự đặc biệt `console.log(doidev.split(" "))`	`["Chuyên","chém","gió","về","Web","Dev","&","đời","Dev"]`
`string[seperator]`	Truy cập vào một ký tự của chuỗi sử dụng chỉ số vị trí `console.log(doidev[27])`	`"&"`

Escape character (Ký tự thoát)

Trong Js sử dụng dấu \ - gạch chéo ngược để làm ký tự thoát cho:

Ký tự	Giải thích
`\'`	Dấu nháy đơn
`\"`	Dấu nháy kép
`\\`	Dấu gạch chéo ngược
`\b`	Dấu lùi
`\f`	Nguồn cấp dữ liệu biểu mẫu
`\n`	Dòng mới
`\t`	Tab ngang
`\v`	Tab dọc
`\r`	Dấu xuống dòng

Regular Expression (Biểu thức chính quy)

Biểu thức chính quy là các mẫu dùng để tìm kiếm các bộ ký tự được kết hợp với nhau trong các chuỗi ký tự

Patter modifiers (công cụ sửa đổi mẫu)

Ký tự	Giải thích
`e`	Đánh giá sự thay thế
`i`	So sánh không phân biệt chữ hoa, thường
`g`	So sánh toàn bộ - tìm tất cả kết quả phù hơp
`m`	Kết hợp nhiều dòng
`s`	Coi chuỗi như một dòng
`x`	Cho phép nhận xét và khoảng trắng trong mẫu
`u`	mẫu vô duyên

Brackets (Dấu ngoặc)

Ký tự	Giải thích
`[abc]`	Tìm bất cứ ký tự nào trong dấu ngoặc
`[^abc]`	Tìm bất cứ ký tự nào không có trong dấu ngoặc
`[0-9]`	Dùng để tìm bất kỳ số nào từ 0 đến 9
`[A-z]`	Tìm bất kỳ chữ nào từ chữ Hoa đến chữ thường
`(a \| b \| c)`	Tìm bất kỳ lựa chọn thay thế nào được phân tách bằng gạch đứng

Metacharacters (Siêu ký tự)

Ký tự	Giải thích
`.`	Tìm một ký tự ngoại trừ dòng mới hoặc chấm dứt dòng
`\w`	Ký tự là từ
`\W`	Ký tự không phải là từ
`\d`	Một chữ số
`\D`	Không phải là một chữ số
`\s`	Ký tự khoảng trắng
`\S`	Ký tự không phải là khoảng trắng
`\b`	Tìm môt ký tự kết hợp ở đầu/cuối một từ
`\B`	Một kết quả không khớp đầu/cuối một từ
`\0`	Ký tự Null
`\n`	Ký tự dòng mới
`\f`	Ký tự nguồn cung cấp dữ liệu biểu mẫu
`\r`	Ký tự xuống dòng
`\t`	Ký tự Tab ngang
`\v`	Ký tự tab dọc
`\xxx`	Ký tự được chỉ định bởi một số bát phân
`\xdd`	Ký tự được chỉ định bởi một số thập lục phân
`\uxxxx`	Ký tự unicode được chỉ định bởi một số thập lục phân

Quantifiers (Định lượng)

Ký tự	Giải thích
`n+`	Khớp với chuỗi có chứa ít nhất một ’n'
`n*`	Bất kỳ chuỗi nào chứa 0 hoặc nhiều lần xuất hiện của n
`n?`	Một chuỗi không chứa hoặc chỉ một lần xuất hiện của n
`n`	Chuỗi mà chứa một chuỗi của X n’s
`n`	Chuỗi mà chứa một chuỗi từ X đến Y n’s
`n`	Khớp với chuỗi có có ít nhất X n’s
`n$`	Bất kỳ chuỗi nào chứa n ở cuối
`^n`	Chuỗi chứa n ở đầu
`?=n`	Bất kỳ chuỗi nào theo sau bởi chuỗi n
`?!n`	Chuỗi mà không theo sau bởi chuỗi n

Numbers (Số)

Properties (Thuộc tính)

Thuộc tính	Giải thích
`MAX_VALUE`	Giá trị số tối đa của Js
`MIN_VALUE`	Giá trị số dương nhỏ nhất trong Js
`NaN`	Not-a-Number (Không phải là số)
`NEGATIVE_INFINITY`	Giá trị âm vô cực
`POSITIVE_INFINITY`	Giá trị dương vô cực

Method (Phương thức)

Phương thức	Giải thích	Ví dụ
`toExponential(n)`	Trả về số có n số lẻ phần thập phân và được viết dưới dạng hàm mũ	var a = 3.1417; a.toExponential(2); // kết quả 3.14e+0
`toFixed(n)`	Trả về số có n số lẻ phần thập phân	var a = 3.1417; a.toFixed(2); // kết quả 3.14
`toPrecision(n)`	Chuyển sang số có chiều dài là n	var a = 3.46; a.to{Precision(2); // kết quả 3.5
`valueOf()`	Lấy giá trị của biến hoặc một giá trị nào đó	var x = 23; x.valueOf();

Math properties (Thuộc tính trong phép toán)

Thuộc tính	Giải thích
`E`	Số Euler (số e ~ 2.71828)
`LN2`	Logarit tự nhiên với cơ số 2
`LN10`	Logarit tự nhiên với cơ số 10
`LOG2E`	Logarit cơ số 2 của E
`LOG10E`	Logarit cơ số 10 của E
`PI`	Số Pi (3.14…)
`SQRT1_2`	Căn bậc hai của 1/2
`SQRT2`	Căn bậc hai của 2

Math method (Phương thức trong phép toán)

Phương thức	Giải thích
`abs(x)`	Trả về giá trị tuyệt đối dương của x
`acos(x)`	Hàm arccos của x
`asin(x)`	Hàm arcsine của x
`atan(x)`	Hàm arctangent của x (số)
`atan2(y,x)`	Hàm arctangent của thương số của các đối số của nó
`sin(x)`	Hàm sine của x
`cos(x)`	Hàm cosine của x
`tan(x)`	Hàm tangent của một góc
`exp(x)`	Giá trị của x
`ceil(x)`	Làm tròn x lên số nguyên lớn hơn gần nhất
`floor(x)`	Làm tròn x xuống số nguyên nhỏ hơn gần nhất
`log(x)`	Logarit tự nhiên (cơ số E) củax
`max(x,y,z,...,n)`	Trả về số có giá trị lớn nhất
`min(x,y,z,...,n)`	Trả về số có giá trị nhỏ nhất
`pow(x,y)`	x theo lũy thừa của y
`round(x)`	Làm tròn x theo giá trị phần thập phân
`sqrt(x)`	Căn bậc 2 của x
`random()`	Trả về số ngẫu nhiên có giá trị từ 0 đến 1

Dates (Ngày tháng)

Ví dụ let d = new Date(); thì các phương thức của date sẽ được mô tả như bên dưới

Phương thức	Giải thích
`Date()`	Dùng tạo một đối tượng ngày mới với ngày và giờ hiện tại
`Date(2019, 10, 21, 12, 24, 58, 13)`	Tạo một đối tượng ngày tùy chỉnh. Định dạng - (yyyy,mm,dd,hh,min,s,ms). Năm tháng là bắt buộc còn thông số khác thì tùy chọn
`Date("2019-10-21")`	Khai báo ngày dưới dạng một chuỗi
`d.getDate()`	Lấy ngày trong tháng dưới dạng số (1-31)
`d.getDay()`	Lấy ngày trong tuần dưới dạng số (0-6) trong đó 0 là ngày đầu tuần
`d.getFullYear()`	Năm dưới dạng 4 chữ số
`d.getHours()`	Lấy giờ dưới dạng (0-23)
`d.getMilliseconds()`	Lấy mili giây trong khoảng (0-999)
`d.getMinutes()`	Lấy phút trong khoảng (0-59)
`d.getMonth()`	Lấy tháng trong khoảng (0-11)
`d.getSeconds()`	Lấy giây trong khoảng (0-59)
`d.getTime()`	Lấy mili giấy từ 1/1/1970
`d.getUTCDate()`	Lấy ngày (thứ) của tháng trong ngày cụ thể theo giờ quốc tế (UTC) và cũng có sẵn cho ngày, tháng, năm, giờ, phút…
`d.setDate(20)`	Đặt ngày dưới dạng số
`d.setFullYear(2021)`	Đặt năm (tùy chọn ngày tháng)
`d.setHours(3)`	Đặt giờ (0-23)
`d.setMilliseconds(4)`	Đặt mili giây (0-999)
`d.setMinutes(40)`	Đặt phút (0-59)
`d.setMonth(10)`	Đặt tháng (0-11)
`d.setSeconds(4)`	Đặt giây (0-59)
`d.setTime(4)`	Đặt thời gian tính từ 1/1/1970
`d.setUTCDate(4)`	Đặt ngày (thứ) của tháng trong ngày cụ thể theo giờ quốc tế (UTC) và cũng có sẵn cho ngày, tháng, năm, giờ, phút…

DOM

DOM (Document Object Model) là code của cấu trúc trang. Phần tử trong HTML (có tên gọi khác là Nốt - Node) có thể dễ dàng bị biến đổi, bị thao tác qua Javascript.

NodeList & HTML Collection

HTML collection và NodeList khác nhau cơ bản là một cái động và một cái tĩnh. Cái động sẽ nhận ra khi có một phần tử mới được gắn vào DOM trong khi đó cái tĩnh thì không.

Phương thức trong HTML như getElementByClassName() và getElementByTagName() trả về tập hợp phần tử động chỉ có phần tử khớp (class name hoặc tag name) và không bao gồm text
NoteList querySelectorAll() trả về một NodeList tĩnh, nó trông giống mảng (array) nhưng không phải mảng

Node properties

Thuộc tính	Giải thích
`attributes`	Trả về tất cả thuộc tính của phần tử đó
`baseURI`	Trả về đường dẫn tuyệt đối URL của một phần tử
`nodeName`	Tên của một Node
`nodeType`	Loại của Node
`nodeValue`	Đặt hay nhận giá trị của một Node
`parentNode`	Node cha của một phần tử
`childNodes`	Tất cả Node con của một phần tử
`firstChild`	Node con đầu tiên của một phần tử
`lastChild`	Node con cuối cùng của một phần tử
`ownerDocument`	Cấp cao nhất của node hiện tại
`previousSibling`	Node ngay trước Node hiện tại
`nextSibling`	Node tiếp theo trong cùng một cấp độ trong cây
`textContent`	Đặt hoặc trả về nội dung văn bản của một node và các node con của nó

Node Method

Phương thức	Giải thích
`cloneNode()`	Sao chép một phần tử HTML
`compareDocumentPosition()`	So sánh vị trí tài liệu của hai phần tử
`isDefaultNamespace()`	Trả về true nếu tên URI là mặc định
`lookupNamespaceURI()`	Trả về URI liên kết với node đã cho
`getFeature()`	Trả về đối tượng triển khai các API của một tính năng được chỉ định
`isSupported()`	Trả về true nếu một tính năng cụ thể được hỗ trợ trên phần tử
`hasAttributes()`	Trả về true nếu một phần tử có bất kỳ thuộc tính nào
`insertBefore()`	Chèn một node con mới trước một node con hiện có, được chỉ định
`isEqualNode()`	Kiểm tra xem hai phần tử có bằng nhau không
`isSameNode()`	Kiểm tra xem hai phần tử có cùng một node không
`hasChildNodes()`	Trả về true nếu phần tử có node con
`lookupPrefix()`	Trả về chuỗi DOM có chứa tiền tố cho một URI nhất định, nếu có
`normalize()`	Nối vào node kế tiếp và xóa các node trống
`removeChild()`	Loại bỏ node con khỏi phần tử
`replaceChild()`	Thay thế node con trong phần tử
`appendChild()`	Thêm node con mới vào trong phần tử làm node con cuối cùng

Element Method

Phương thức	Giải thích
`getAttribute()`	Trả về giá trị thuộc tính được chỉ định của một phần tử
`getAttributeNS()`	Trả về chuỗi của thuộc tính với namespace và tên được chỉ định
`getAttributeNode()`	Lấy thuộc tính của node
`getAttributeNodeNS()`	Lấy thuộc tính của node với namespace
`getElementsByTagName()`	Cung cấp tập hợp phần tử con dựa vào tag name
`getElementsByTagNameNS()`	Trả về các phần tử có tên thẻ HML cụ thể với namespace
`hasAttribute()`	Trả về true nếu phần tử có bất kỳ thuộc tính nào
`hasAttributeNS()`	Cung cấp giá trị true/false cho biết liệu phần tử hiện tại trong namespace có thuộc tính được chỉ định hay không
`setAttribute()`	Đặt hoặc thay đổi thuộc tính được chỉ định thành giá trị được chỉ định
`setAttributeNS()`	Thêm thuộc tính mới hoặc thay đổi thuộc tính hiện tại với namespace và tên đã cho
`setAttributeNode()`	Đặt hoặc thay đổi thuộc tính của node được chỉ định
`setAttributeNodeNS()`	Thêm mới thuộc tính namespace của node vào phần tử
`removeAttribute()`	Loại bỏ thuộc tính được chỉ định trong phần tử
`removeAttributeNS()`	Loại bỏ và trả về thuộc tính được chỉ định của node trong namespace
`removeAttributeNode()`	Loại bỏ và trả về thuộc tính được chỉ định của node

Browser Actions(Trình duyệt)

Window properties

Thuộc tính	Giải thích
`closed`	Kiểm tra xem cửa sổ window đã được đóng chưa?
`defaultStatus`	Đặt hoặc lấy tiêu đề mặc định trong thanh trạng thái của cửa sổ hiện tại
`self`	Cửa sổ hiện tại
`top`	Cửa sổ trình duyệt trên cùng
`parent`	Cửa sổ cha của cửa sổ hiện tại
`document`	Trả về đối tượng document
`frames`	Trả về tất cả các phần tử `<iframe>` trong cửa sổ hiện tại
`history`	Đối tượng lịch sử của cửa sổ
`innerHeight`	Chiều cao bên trong của phần nội dung trong cửa sổ
`innerWidth`	Chiều dài bên trong của phần nội dung trong cửa sổ
`length`	Số lượng của `<iframe>` trong cửa sổ
`location`	Đối tượng location của cửa sổ
`name`	Đặt hoặc lấy tên cửa sổ
`navigator`	Trả về đối tượng Điều hướng (Navigator) cho cửa sổ
`opener`	Tham chiếu đến cửa sổ đã tạo cửa sổ hiện tại
`outerHeight`	Chiều cao bên ngoài cửa sổ bao gồm thanh công cụ/thanh cuộn
`outerWidth`	Chiều rông bên ngoài cửa sổ bao gồm thanh công cụ/thanh cuộn
`pageXOffset`	Số pixel mà tài liệu đã cuộn theo chiều ngang
`pageYOffset`	Số pixel mà tài liệu đã cuộn theo chiều dọc
`screen`	Trả về đối tượng Màn hình cho cửa sổ
`screenLeft`	Tọa độ ngang của cửa sổ
`screenTop`	Tọa độ dọc của cửa sổ
`screenX`	Tọa độ ngang của cửa sổ
`screenY`	Tọa độ dọc của cửa sổ
`status`	Đặt hoặc lấy tiêu đề trong thanh trạng thái của cửa sổ

Window Method

Phương thức	Giải thích
`alert()`	Hiện hộp thoại cảnh báo có nút OK
`blur()`	Loại bỏ tập trung vào cửa sổ hiện tại
`clearTimeout()`	Xóa bộ hẹn giờ bằng setTimeout()
`clearInterval()`	Xóa bộ hẹn giờ bằng setInterval()
`close()`	Đóng cửa sổ hiện tại
`open()`	Mở một cửa sổ mới
`stop()`	Dừng tải trang cửa sổ hiện tại
`confirm()`	Hiện hộp thoại có nút Ok và cancel
`focus()`	Đặt tập trung vào cửa sổ hiện tại
`moveBy()`	Di chuyển một cửa sổ so với vị trí hiện tại của nó
`moveTo()`	Di chuyển một cửa sổ so tới vị trí nhất định
`print()`	In nội dung của cửa sổ hiện tại
`prompt()`	Hiện hộp thoại cho người dùng điền vào và xác nhận
`resizeBy()`	Thay đổi kích cỡ cửa sổ theo số pixel đã cho
`resizeTo()`	Thay đổi kích cỡ cửa sổ theo chiều dài, rộng đã cho
`scrollBy()`	Cuộn trang tới vị trí pixel đã cho
`scrollTo()`	Cuộn trang tới tọa độ đã cho
`setInterval()`	Gọi hàm hoặc đánh giá một biểu thức trong các khoảng thời gian đã cho
`setTimeout()`	Gọi một hàm hoặc đánh giá một biểu thức trong một khoảng thời gian cụ thể

Screen properties

Phương thức	Giải thích
`availHeight`	Trả về chiều cao của màn hình (không bao gồm taskbar)
`availWidth`	Trả về chiều rộng của màn hình (không bao gồm taskbar)
`colorDepth`	Trả về độ sâu bit của bảng màu để hiển thị hình ảnh
`height`	Tổng chiều cao màn hình
`pixelDepth`	Độ phân giải của màn hình tính bằng bit trên pixel
`width`	Tổng chiều rộng màn hình

User Events (sự kiện)

1. Mouse (chuột)

Phương thức	Giải thích
`onclick`	Sự kiện xảy ra khi người dùng nhấp chuột vào một phần tử
`onmouseover`	Khi con trỏ chuột di chuyển qua một số phần tử hoặc phần tử con của nó
`onmouseout`	Người dùng di chuyển con trỏ chuột ra khỏi một phần tử hoặc một trong những phần tử con của nó
`onmouseup`	Khi người dùng thả nút nhấn chuột trên phần tử
`onmousedown`	Khi người dùng nhấn chuột trên một phần tử
`onmouseenter`	Con trỏ chuột di chuyển vào một phần tử
`onmouseleave`	Con trỏ chuột di chuyển ra khỏi một phần tử
`onmousemove`	Con trỏ chuột di chuyển khi đang ở trên một phần tử
`oncontextmenu`	Người dùng bấm chuột phải vào một phần tử để mở một cửa sổ menu ngữ cảnh
`ondblclick`	Người dùng nhấp đôi chuột vào một phần tử

2. Keyboard (Bàn phím)

Phương thức	Giải thích
`onkeydown`	Khi người dùng nhấn một phím xuống
`onkeypress`	Thời điểm người dùng bắt đầu nhấn một phím
`onkeyup`	Người dùng thả phím đang nhấn ra

3. Frame (Khung)

Phương thức	Giải thích
`onabort`	Quá trình tải của một phương tiện bị hủy
`onbeforeunload`	Sự kiện xảy ra trước khi một tài liệu bị dỡ bỏ
`onunload`	Sự kiện xảy ra khi một trang đã được tải xuống
`onerror`	Khi một lỗi xảy ra trong khi tải một tập tin ngoài
`onhashchange`	Có những thay đổi với phần neo của một URL
`onload`	Khi một đối tượng đã được tải
`onpagehide`	Khi người dùng điều hướng ra khỏi trang web
`onpageshow`	Người dùng điều hướng tới một trang web
`onresize`	Chế độ xem tài liệu bị thay đổi kích thước
`onscroll`	Thanh cuộn của một phần tử thì đang được cuộn

4. Form ( Bảng biểu mẫu)

Phương thức	Giải thích
`onblur`	Khi phần tử bị mất con trỏ chuột nhấp nháy
`onchange`	Khi nội dung của các phần tử trong bảng biểu như `<input>, <select> and <textarea>` thay đổi
`onfocus`	Khi phần tử nhận con trỏ chuột nhấp nháy
`onfocusin`	Khi phần từ sắp nhận con trỏ chuột nhấp nháy
`onfocusout`	Khi phần tử sắp bị mất con trỏ chuột
`oninput`	Người dùng điền vào phần đầu vào
`oninvalid`	Một phần tử không hợp lệ
`onreset`	Đặt lại biểu mẫu
`onsearch`	Người dùng điền vào phần đầu vào ô tìm kiếm
`onselect`	Người dùng chọn một số từ trong `(<input> and <textarea>)`
`onsubmit`	Sự kiện xảy ra khi nộp bảng biểu

5. Drag ( Kéo )

Phương thức	Giải thích
`ondrag`	Một phần tử được kéo
`ondrop`	Phần tử đang được kéo thì được thả vào mục tiêu thả
`ondragstart`	Người dùng bắt đầu kéo một phần tử
`ondragend`	Người dũng đã hoàn thành kéo một phần tử
`ondragenter`	Phần tử đang được kéo đi vào mục tiêu thả
`ondragleave`	Một phần tử đang được kéo rời khỏi mục tiêu thả
`ondragover`	Phần tử đang được kéo thì nằm bên trên mục tiêu thả

6. Clipboard

Phương thức	Giải thích
`oncut`	Sự kiện xảy ra khi người dùng cắt nội dung của một phần tử
`oncopy`	Sự kiện xảy ra khi người dùng sao chép nội dung của một phần tử
`onpaste`	Sự kiện xảy ra khi người dùng dán nội dung của một phần tử

7. Media

Phương thức	Giải thích
`onabort`	Quá trình tải phương tiện bị hủy bỏ
`onended`	Phương tiện kết thúc
`onerror`	Xảy ra khi một lỗi xuất hiện trong khi tải một tập tin bên ngoài
`oncanplay`	Trình duyệt có thể bắt đầu phát phương tiện
`oncanplaythrough`	Trình duyệt có thể phát phương tiện mà không phải dừng lại
`ondurationchange`	Thay đổi thời lượng của phương tiện
`onloadeddata`	Đã tải dữ liệu phương tiện
`onloadedmetadata`	Đã tải metadata (ví dụ: kích thước, thời lượng)
`onloadstart`	Trình duyệt bắt đầu tìm kiếm phương tiện đã cho
`onpause`	Phương tiện dừng phát bởi người dùng hoặc tự động
`onplay`	Phương tiện đã được phát và không còn bị tạm dừng
`onplaying`	Phương tiện được phát sau khi bị tạm dừng hoặc dừng để lưu vào bộ nhớ đệm
`onprogress`	Trình duyệt đang trong quá trình tải phương tiện
`onratechange`	Tốc độ phát của phương tiện thay đổi
`onseeked`	Người dùng đã hoàn tất di chuyển / chuyển qua một vị trí mới trong phương tiện
`onseeking`	Người dùng bắt đầu di chuyển/ chuyển sang
`onstalled`	Trình duyệt đang cố gắng tải phương tiện nhưng không khả dụng
`onwaiting`	Phương tiện bị tạm dừng nhưng dự kiến sẽ tiếp tục (giống như trường hợp bộ nhớ đệm)
`onsuspend`	Trình duyệt cố tình không tải phương tiện
`ontimeupdate`	Vị trí phát đã thay đổi (giống như trường hợp tour đi nhanh)
`onvolumechange`	Âm lượng của phương tiện đã được tăng hoặc giảm

8. Animation

Phương thức	Giải thích
`animationstart`	Hoạt ảnh CSS đã được phát
`animationend`	Kết thúc hoạt ảnh CSS
`animationiteration`	Hoạt ảnh CSS phát hết

9. Other

Phương thức	Giải thích
`transitionend`	Sự kiện được kích hoạt khi quá trình chuyển đổi CSS đã hoàn tất
`onmessage`	Nhận thông báo từ nguồn sự kiện
`ononline`	Trình duyệt bắt đầu hoạt động trực tuyến
`onoffline`	Trình duyệt bắt đầu hoạt động ngoại tuyến
`ontoggle`	Người dùng mở hoặc đóng chi tiết của phần tử
`onpopstate`	Khi lịch sử của cửa sổ thay đổi
`onshow`	Một phần tử được hiển thị như một menu ngữ cảnh
`onstorage`	Khu vực lưu trữ web được cập nhật
`onwheel`	Con lăn của con chuột cuộn lên hoặc xuống qua một phần tử
`ontouchstart`	Khi một ngón tay được đặt trên màn hình cảm ứng
`ontouchend`	Ngón tay của người dùng rời khỏi màn hình cảm ứng
`ontouchcancel`	Động tác chạm bị hủy
`ontouchmove`	Ngón tay người dùng được kéo trên màn hình

10. Errors

Phương thức	Giải thích
`try`	Khối mã lệnh được thực thi trong trường hợp không có lỗi
`catch`	Khối mã lệnh được thực thi trong trường hợp có lỗi
`throw`	Tạo thông báo lỗi tùy chỉnh thay vì lỗi tiêu chuẩn của Js
`finally`	Khối mã lệnh luôn được thực thị cho dù có lỗi trong quá trình thực thi hay không

Errors (Lỗi)

Mỗi lỗi là đối tượng và được định nghĩa với thuộc tính tên (name) và thông báo lỗi (message)
name: Đặt hoặc lấy tên lỗi
message: Đặt hoặc lấy thông tin lỗi chi tiết hơn

Lỗi	Giải thích
`EvalError`	Xảy ra lỗi trong hàm eval()
`RangeError`	Số ngoài phạm vi
`ReferenceError`	Xuất hiện tham chiếu không hợp lệ
`SyntaxError`	Lỗi cú pháp
`TypeError`	Lỗi gõ
`URIError`	Lỗi encodeURI()