I. Cách nhúng javascript vào HTML
Có ba cách chính để nhúng JavaScript vào một trang HTML:
1. Nhúng trực tiếp trong thẻ <script>
Bạn có thể viết mã JavaScript trực tiếp trong thẻ <script> trong phần <head> hoặc <body> của tài liệu HTML.
<!DOCTYPE html>
<html>
<head>
<title>Nhúng JavaScript trực tiếp</title>
<script>
// Mã JavaScript ở đây
console.log('Xin chào từ JavaScript nhúng trực tiếp!');
</script>
</head>
<body>
<h1>Chào mừng đến với trang của tôi!</h1>
</body>
</html>2. Nhúng qua file JavaScript ngoài
Bạn có thể tách riêng mã JavaScript thành một file .js và nhúng nó vào trang HTML của bạn bằng thuộc tính src trong thẻ <script>. Phương pháp này giúp mã sạch hơn và dễ bảo trì hơn.
File script.js:
console.log('Xin chào từ file JavaScript ngoài!');File index.html:
<!DOCTYPE html>
<html>
<head>
<title>Nhúng JavaScript từ file ngoài</title>
<script src="script.js"></script>
</head>
<body>
<h1>Chào mừng đến với trang của tôi!</h1>
</body>
</html>3. Nhúng trong phần tử HTML thông qua các thuộc tính sự kiện (Inline JavaScript)
Bạn có thể sử dụng các thuộc tính sự kiện của HTML như onclick, onmouseover, onchange, v.v., để nhúng mã JavaScript ngắn gọn trực tiếp vào phần tử HTML.
<!DOCTYPE html>
<html>
<head>
<title>Nhúng JavaScript trong thuộc tính sự kiện</title>
</head>
<body>
<h1>Chào mừng đến với trang của tôi!</h1>
<button onclick="alert('Bạn đã nhấn nút!')">Nhấn vào tôi</button>
</body>
</html>
Kết luận
Mỗi phương pháp có ưu và nhược điểm riêng:
- Nhúng trực tiếp trong thẻ <script>: Dễ sử dụng cho các mã ngắn, nhưng có thể làm rối trang HTML nếu mã quá dài.
- Nhúng qua file JavaScript ngoài: Giúp mã sạch và dễ bảo trì, khuyến khích sử dụng cho các dự án lớn.
- Nhúng trong phần tử HTML (Inline JavaScript): Thích hợp cho các sự kiện đơn giản, nhưng không khuyến khích sử dụng cho mã phức tạp vì khó bảo trì và làm giảm tính rõ ràng của mã.
II. Các lệnh cơ bản
Dưới đây là các lệnh cơ bản trong JavaScript mà bạn cần biết để bắt đầu:
1. Lệnh khai báo biến
JavaScript sử dụng các từ khóa var, let, và const để khai báo biến.
- var: Khai báo biến có phạm vi toàn cục hoặc phạm vi hàm.
- let: Khai báo biến có phạm vi khối (block scope).
- const: Khai báo hằng số, giá trị không thay đổi sau khi được gán.
var name = "John"; // Khai báo biến với var
let age = 25; // Khai báo biến với let
const pi = 3.14; // Khai báo hằng số với const
2. Lệnh in ra màn hình (Output)
JavaScript có nhiều cách để in thông tin ra màn hình:
- console.log(): In thông tin ra cửa sổ console (thường dùng để debug).
- alert(): Hiển thị một hộp thoại thông báo với thông điệp.
- document.write(): Ghi nội dung trực tiếp vào tài liệu HTML.
console.log("Hello, world!"); // In ra console
alert("Xin chào!"); // Hiển thị thông báo
document.write("Chào mừng đến với trang web!"); // Ghi nội dung vào HTML
3. Lệnh điều kiện (Conditional Statements)
JavaScript sử dụng if, else if, else, và switch để thực hiện các lệnh điều kiện.
- if: Kiểm tra điều kiện và thực hiện mã nếu điều kiện là đúng.
- else if: Kiểm tra điều kiện khác nếu điều kiện đầu tiên sai.
- else: Thực hiện mã nếu tất cả các điều kiện trên sai.
- switch: Kiểm tra một giá trị với nhiều trường hợp (cases).
let score = 85;
if (score >= 90) {
console.log("Hạng A");
} else if (score >= 80) {
console.log("Hạng B");
} else {
console.log("Hạng C");
}
// Sử dụng switch
let day = 2;
switch (day) {
case 1:
console.log("Thứ hai");
break;
case 2:
console.log("Thứ ba");
break;
default:
console.log("Không xác định");
}
4. Lệnh lặp (Loops)
JavaScript hỗ trợ các vòng lặp như for, while, và do...while để lặp lại một khối mã nhiều lần.
- for: Vòng lặp cơ bản nhất, sử dụng khi biết trước số lần lặp.
- while: Lặp lại khối mã khi điều kiện là đúng.
- do...while: Lặp lại ít nhất một lần và tiếp tục nếu điều kiện là đúng.
// Sử dụng for loop
for (let i = 0; i < 5; i++) {
console.log(i);
}
// Sử dụng while loop
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
// Sử dụng do...while loop
let number = 0;
do {
console.log(number);
number++;
} while (number < 5);5. Lệnh hàm (Functions)
Hàm là khối mã có thể được định nghĩa và tái sử dụng. Có thể khai báo hàm bằng từ khóa function.
- Hàm có tên: Được định nghĩa bằng từ khóa function.
- Hàm ẩn danh (anonymous function): Hàm không có tên, thường được sử dụng làm tham số cho các hàm khác.
- Hàm mũi tên (arrow function): Cú pháp ngắn gọn hơn cho các hàm ẩn danh.
// Hàm có tên
function greet(name) {
return "Xin chào, " + name + "!";
}
console.log(greet("John"));
// Hàm ẩn danh
let sum = function (a, b) {
return a + b;
};
console.log(sum(5, 3));
// Hàm mũi tên
let multiply = (x, y) => x * y;
console.log(multiply(4, 5));6. Lệnh làm việc với mảng (Arrays)
Mảng là danh sách các phần tử. Bạn có thể sử dụng các phương thức khác nhau để làm việc với mảng như push, pop, shift, unshift, forEach, map, filter, v.v.
let fruits = ["Apple", "Banana", "Orange"];
// Thêm phần tử vào cuối mảng
fruits.push("Mango");
// Xóa phần tử cuối cùng
fruits.pop();
// Lặp qua mảng
fruits.forEach(function(fruit) {
console.log(fruit);
});
7. Lệnh làm việc với đối tượng (Objects)
Đối tượng là một cấu trúc dữ liệu trong JavaScript giúp lưu trữ các cặp key-value. Bạn có thể tạo đối tượng bằng cách sử dụng dấu ngoặc nhọn {}.
let person = {
firstName: "John",
lastName: "Doe",
age: 30,
greet: function () {
return "Hello, " + this.firstName + "!";
}
};
console.log(person.firstName); // Truy cập thuộc tính
console.log(person.greet()); // Gọi phương thức8. Lệnh xử lý lỗi (Error Handling)
JavaScript cung cấp các lệnh try, catch, finally, và throw để xử lý lỗi.
try {
let result = 10 / 0; // Ví dụ gây lỗi
console.log(result);
} catch (error) {
console.error("Đã xảy ra lỗi: " + error.message);
} finally {
console.log("Lệnh này luôn luôn được thực hiện.");
}Bài viết liên quan
Làm quen với VueJS
Nếu bạn mới bắt đầu học lập trình front-end, thì Vue.js là một gợi ý không thể bỏ qua vì cách tiếp cận và sử dụng rất dễ dàng.
Lý thuyết về Cookie & Session & Localstorage
Cookie thích hợp cho việc lưu trữ thông tin nhỏ và ngắn hạn, Session là lựa chọn tốt để lưu trữ thông tin bảo mật như phiên làm việc
Xử lý bất đồng bộ với callback, promise, và async/await trong JavaScript
Bất đồng bộ là một khái niệm quan trọng trong lập trình, đặc biệt là trong các ứng dụng web và xử lý tác vụ như tải dữ liệu từ máy chủ, đọc file từ hệ thống
Các phần nâng cao trong DOM
Khi bạn đã thành thạo các phần cơ bản của DOM Manipulation, bạn có thể khám phá các khía cạnh nâng cao để tạo ra các ứng dụng web mạnh mẽ và tối ưu hơn.
Quản lý nội bộ, quản lý khách hàng, GYM-YOGA-AEROBIC, Spa, Quản Lý Bán Hàng…
Thiết kế website chuyên nghiệp, chuẩn SEO
Ứng Dụng Đa Nền Tảng Kết Nối Mọi Thiết Bị
Xây dựng chiến lược marketing online phù hợp với nhu cầu doanh nghiệp
