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ệmJs 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 webTa 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
SheetKhá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-elseIf-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")
}
|
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…
|
DOMDOM (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 CollectionHTML 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()
|
|
