Javascript là gì?
JavaScript (viết tắt là JS) là một ngôn ngữ lập trình phía client phổ biến và mạnh mẽ được sử dụng rộng rãi trong lĩnh vực phát triển web. Với khả năng tương tác với HTML và CSS, JavaScript cho phép chúng ta tạo ra các trang web động, ứng dụng web và nhiều tính năng hấp dẫn khác.
Cú pháp cơ bản của JavaScript
Trước khi đi vào chi tiết, hãy xem cú pháp cơ bản của JavaScript:
// Comment trong JavaScript
var x = 5; // Khai báo biến x với giá trị là 5
// In ra console
console.log(x);
// Cấu trúc điều khiển if...else
if (x > 0) {
console.log("x là số dương");
} else {
console.log("x là số âm hoặc bằng 0");
}
// Vòng lặp for
for (var i = 0; i < 5; i++) {
console.log(i);
}
// Hàm trong JavaScript
function add(a, b) {
return a + b;
}
console.log(add(3, 4)); // Kết quả: 7
Trên đây là một số cú pháp cơ bản trong JavaScript. Chúng ta có thể khai báo biến bằng từ khoá var, sử dụng các câu lệnh điều khiển như if...else và vòng lặp for, cũng như tạo ra các hàm để thực hiện các tác vụ cụ thể.
Tương tác với HTML và CSS
JavaScript có khả năng tương tác với HTML và CSS, cho phép chúng ta thay đổi nội dung và kiểu dáng của trang web. Dưới đây là một ví dụ đơn giản:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="myHeading">Hello World!</h1>
<button onclick="changeText()">Đổi nội dung</button>
<script>
function changeText() {
var heading = document.getElementById("myHeading");
heading.innerHTML = "Xin chào!";
heading.classList.add("highlight");
}
</script>
</body>
</html>
Trong ví dụ trên, chúng ta có một tiêu đề <h1> và một nút <button>. Khi nhấn vào nút, hàm changeText() được gọi và thay đổi nội dung của tiêu đề thành “Xin chào!” và thêm lớp CSS “highlight” để làm nổi bật.
Thao tác với sự kiện
JavaScript cho phép chúng ta thao tác với các sự kiện trên trang web. Chúng ta có thể bắt và xử lý các sự kiện như nhấn nút, kéo thả, nhập liệu và nhiều hơn nữa. Dưới đây là ví dụ về xử lý sự kiện nhấn phím:
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
console.log("Bạn đã nhấn phím Enter");
}
});
Trong ví dụ trên, chúng ta sử dụng phương thức addEventListener() để bắt sự kiện “keydown” (nhấn phím xuống). Trong hàm xử lý, chúng ta kiểm tra xem phím được nhấn có phải là “Enter” hay không và in ra thông báo tương ứng.
Giao tiếp với server
JavaScript còn hỗ trợ công nghệ như Fetch API để tương tác với server và lấy dữ liệu từ các API. Đây là một ví dụ sử dụng Fetch API để lấy dữ liệu từ một API:
fetch('https://www.googleapis.com/books/v1/volumes?q=frontend')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.log("Đã xảy ra lỗi: " + error);
});
Trong ví dụ trên, chúng ta sử dụng Fetch API để gửi yêu cầu GET đến URL “https://www.googleapis.com/books/v1/volumes?q=frontend“. Sau đó, chúng ta chuyển đổi response thành JSON và in ra dữ liệu trong console. Nếu có lỗi xảy ra, chúng ta xử lý nó trong phần .catch().
First Step
Sau phần giới thiệu trên, chắc hẳn bạn cũng đã biệt được các tính năng độc đáo của Javascript, và để giúp bạn tìm hiểu chuyên sâu hơn, bạn hãy bắt đầu thông qua các mục sau đây :
