What is Javascript?
JavaScript (abbreviated as JS) is a popular and powerful client-side programming language widely used in web development. With the ability to interact with HTML and CSS, JavaScript allows us to create dynamic web pages, web applications, and many other attractive features.
Basic syntax of JavaScript
Before diving into details, let's take a look at the basic syntax of 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
Above are some basic syntax in JavaScript. We can declare variables using the keyword 'var', use control statements like 'if...else' and loops like 'for', as well as create functions to perform specific tasks.
Interacting with HTML and CSS
JavaScript has the ability to interact with HTML and CSS, allowing us to change the content and style of web pages. Here is a simple example:
<!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>
In the example above, we have a <h1> heading and a <button> button. When the button is clicked, the changeText() function is called and it changes the content of the heading to "Hello!" and adds the CSS class "highlight" to make it stand out.
Manipulating events
JavaScript allows us to manipulate events on web pages. We can capture and handle events such as button clicks, drag and drop, input, and much more. Here is an example of handling key press events:
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
console.log("Bạn đã nhấn phím Enter");
}
});
In the example above, we use the addEventListener() method to listen for the "keydown" event. In the event handler, we check if the pressed key is "Enter" and display the corresponding message.
Communicating with the server
JavaScript also supports technologies like Fetch API to interact with the server and retrieve data from APIs. Here is an example using Fetch API to retrieve data from an 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);
});
In the example above, we use the Fetch API to send a GET request to the URL "https://www.googleapis.com/books/v1/volumes?q=frontend". Then, we convert the response to JSON and print the data in the console. If an error occurs, we handle it in the .catch() section.
First Step
After the introduction above, you must have noticed the unique features of Javascript, and to help you learn more in depth, let's start with the following sections:
