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… 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.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 7Brendan 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 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 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… 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… 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
| 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ụ 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")
}
0 - Ghi chú nhiều dòng với cú pháp 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")
}
1 - Ghi chú một dòng với 2 ký tự gạch chéo ví dụ 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") } 0 - Ghi chú nhiều dòng với cú pháp 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") } 1 |
| 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") } 2 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 | 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")
}
3 - cách dùng cũ, gán lại được giá trị, sử dụng trong hàm và bị hoistinglet 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")
}
4 - 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 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")
}
5 - có từ ES6, không có hoisting, có thể được gán lại, phạm vi trong khối {//code} 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") } 4 - 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 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") } 5 - có từ ES6, không có hoisting, có thể được gán lại, phạm vi trong khối {//code} |
| 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") } 6 loại dữ liệu | Javascript có nhiều loại dữ liệulet 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")
}
7 số, ví dụ 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")
}
8let 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")
}
9 chuỗi, ví dụ: Js0Js1 đúng/sai, ví dụ Js2Js3 mảng, ví dụ Js4Js5 không xác định, ví dụ Js6Js7 đối tượng, ví dụ Js8 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") } 7 số, ví dụ 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") } 8 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") } 9 chuỗi, ví dụ: Js0 Js1 đúng/sai, ví dụ Js2 Js3 mảng, ví dụ Js4 Js5 không xác định, ví dụ Js6 Js7 đối tượng, ví dụ Js8 |
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: Js9 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: Js9
Ta cùng tìm hiểu các phương thức của mảng theo bảng dưới
| head0 | Nối các mảng khác nhau thành một head1 head1 | head2 |
| head3 | Nối các phần tử trong mảng thành chuỗi mặc định là dấy phẩy “," head4 head4 | head5 |
| head6 | 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 head7 head7 | head8 |
| head9 | 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 body0 body0 | body1 |
| body2 | 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 body3 body3 | body4 |
| body5 | Sắp xếp các phần tử theo thứ tự đảo ngược body6 body6 | body7 |
| body8 | Trả về đối tượng mảng body9 body9 | body0 |
| body1 | 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 body2 body2 | body3 |
| body4 | 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… body5 body5 | body6 |
| body7 | Thêm phần tử mới vào vị trí đầu tiên của mảng body8 body8 | body9 |
| <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>0 | Loại bỏ phần tử đầu tiên của mảng <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>1 <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>1 | <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>2 |
| <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>3 | Loại bỏ phần tử cuối cùng của mảng <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>4 <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>4 | <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>5 |
| <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>6 | Thêm phần tử vào vị trí cuối cùng của mảng <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>7 <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>7 | <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>8 |
| <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>9 | 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 “," .js0 .js0 | .js1 |
Operators (Toán tử)
| .js2 cơ bản | Cộng (+)Trừ (-)Nhân (*)Chia lấy dư (%) ví dụ .js3Tăng (++)Giảm (- -)Chia (/)Chạy trong dấu ngoặc trước (…)Số mũ (**)Phép gán (=) Trừ (-) Nhân (*) Chia lấy dư (%) ví dụ .js3 Tăng (++) Giảm (- -) Chia (/) Chạy trong dấu ngoặc trước (…) Số mũ (**) Phép gán (=) |
| .js4 logic | Và .js5Hoặc .js6 Không phải .js7 Hoặc .js6 Không phải .js7 |
| .js8 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 (=)Không bằng về giá trị và kiểu dữ liệu (!==)Nhỏ hơn hoặc bằng ( 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 (=) Không bằng về giá trị và kiểu dữ liệu (!==) Nhỏ hơn hoặc bằng ( Chủ đề |