Javascript là gì? Tại sao JS lại là ngôn ngữ của tương lai

JavaScript là ngôn ngữ động (Dynamically Typed Language)

Trong JavaScript, không cần khai báo kiểu dữ liệu khi khai báo biến. Một biến có thể chứa bất kỳ loại dữ liệu nào và có thể thay đổi kiểu dữ liệu trong quá trình thực thi.

Ví dụ:

let x = 10;     // x là số
x = "Hello";    // x trở thành chuỗi
console.log(x); // Kết quả: Hello

JavaScript là ngôn ngữ đơn luồng (Single-Threaded)

JavaScript hoạt động theo cơ chế đơn luồng, nghĩa là nó chỉ thực thi từng tác vụ một. Tuy nhiên, nó có thể xử lý các tác vụ không đồng bộ (Asynchronous) bằng Callbacks, Promises và Async/Await.

Ví dụ về xử lý không đồng bộ:

console.log("Bắt đầu");

setTimeout(() => {
    console.log("Đây là một tác vụ bất đồng bộ");
}, 2000);

console.log("Kết thúc");

JavaScript hỗ trợ lập trình hướng đối tượng (OOP - Object-Oriented Programming)

JavaScript hỗ trợ lập trình hướng đối tượng dựa trên prototype, cho phép tạo và sử dụng các đối tượng một cách linh hoạt.

Ví dụ về lập trình hướng đối tượng trong JavaScript:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Xin chào, tôi là ${this.name}, ${this.age} tuổi.`);
    }
}

let person1 = new Person("Kiên", 25);
person1.sayHello(); // Kết quả: Xin chào, tôi là Kiên, 25 tuổi.

Ứng dụng của JavaScript trong lập trình web

JavaScript đóng vai trò quan trọng trong phát triển web và được sử dụng rộng rãi ở cả front-end (giao diện) và back-end (máy chủ).

Ứng dụng trong Front-End

JavaScript giúp tạo ra các trang web tương tác, hiệu ứng động và thân thiện với người dùng.

Ví dụ về hiển thị thông báo khi người dùng nhấn nút:

<button onclick="showMessage()">Nhấn vào đây</button>

<script>
function showMessage() {
    alert("Bạn đã nhấn nút!");
}
</script>

Khi nhấn nút, một hộp thoại sẽ hiển thị thông báo.

Các thư viện và framework JavaScript phổ biến trên Front-End:

• ReactJS: Thư viện JavaScript phổ biến để xây dựng giao diện người dùng.
• VueJS: Một framework nhẹ giúp phát triển ứng dụng web nhanh chóng.
• AngularJS: Framework mạnh mẽ do Google phát triển để xây dựng ứng dụng web đơn trang (SPA).

Ứng dụng trong Back-End (Server-Side)

JavaScript không chỉ dùng cho giao diện, mà còn có thể chạy trên máy chủ với Node.js, giúp xử lý yêu cầu từ client, truy vấn cơ sở dữ liệu, và xây dựng API.

Ví dụ về một server đơn giản với Node.js:

const http = require("http");

const server = http.createServer((req, res) => {
    res.writeHead(200, { "Content-Type": "text/plain" });
    res.end("Hello from Node.js server!");
});

server.listen(3000, () => {
    console.log("Server đang chạy trên cổng 3000");
});

Khi chạy mã này với Node.js, một server sẽ khởi động trên cổng 3000.

Các framework Back-End phổ biến dùng JavaScript:

• Node.js: Môi trường chạy JavaScript trên server.
• Express.js: Framework nhẹ giúp xây dựng API nhanh chóng.
• NestJS: Framework mạnh mẽ dựa trên TypeScript, dùng để phát triển ứng dụng server-side.

Lịch sử phát triển của JavaScript

Sự ra đời và phát triển ban đầu

JavaScript được tạo ra vào năm 1995 bởi Brendan Eich, một lập trình viên của Netscape Communications Corporation. Ban đầu, nó được gọi là Mocha, sau đó đổi thành LiveScript, và cuối cùng được đặt tên là JavaScript để tận dụng sự phổ biến của ngôn ngữ Java vào thời điểm đó.

Ban đầu, JavaScript chỉ được sử dụng để tạo hiệu ứng động trên các trang web như:

• Kiểm tra dữ liệu nhập vào biểu mẫu.
• Thay đổi nội dung trang web mà không cần tải lại.
• Tạo hiệu ứng giao diện như menu động, popup.

Vào năm 1996, Microsoft phát triển một phiên bản JavaScript riêng gọi là JScript, tích hợp vào trình duyệt Internet Explorer. Điều này tạo ra sự không đồng nhất giữa các trình duyệt, làm cho JavaScript trở nên khó sử dụng trên nhiều nền tảng khác nhau.

Quá trình chuẩn hóa bởi ECMA

Để giải quyết vấn đề không đồng nhất giữa các trình duyệt, vào năm 1997, tổ chức ECMA (European Computer Manufacturers Association) đã chuẩn hóa JavaScript bằng cách phát hành ECMAScript (ES).

ECMAScript (ES) là tiêu chuẩn chính thức của JavaScript, giúp đảm bảo rằng JavaScript hoạt động đồng nhất trên tất cả các trình duyệt và nền tảng.

Các phiên bản ECMAScript (ES) quan trọng bao gồm:

• ES3 (1999): Giới thiệu cú pháp Try/Catch, cải thiện xử lý lỗi.
• ES5 (2009): Hỗ trợ JSON, phương thức mới cho mảng như map(), forEach(), filter().
• ES6 (2015): Một trong những bản cập nhật lớn nhất với let, const, arrow function, class, modules, promise.
• ES14 (2023): Phiên bản mới nhất với tối ưu hiệu suất và các tính năng mới.

Các phiên bản quan trọng của ECMAScript trong JavaScript

ECMAScript 5 (ES5) - 2009

ES5 là phiên bản quan trọng giúp JavaScript trở nên mạnh mẽ hơn. Một số tính năng nổi bật:

• Hỗ trợ JSON: Dữ liệu JSON được xử lý trực tiếp.
• Các phương thức mới cho mảng: forEach(), map(), filter(), reduce().
• Strict Mode: Giúp code an toàn hơn bằng cách ngăn chặn các lỗi phổ biến.

Ví dụ ES5 - Sử dụng forEach()

const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2)); // Kết quả: 2, 4, 6, 8

ECMAScript 6 (ES6) - 2015

ES6 là một bản nâng cấp lớn với nhiều tính năng hiện đại:

• Khai báo biến mới (let, const)
• Hàm mũi tên (Arrow Functions)
• Lập trình hướng đối tượng với class
• Template literals (Chuỗi nội suy)
• Modules (import/export)

Ví dụ ES6 - Sử dụng let, const, arrow function và template literals

const name = "JavaScript";
const greeting = `Chào mừng bạn đến với ${name}!`;
console.log(greeting); // Kết quả: Chào mừng bạn đến với JavaScript!

const add = (a, b) => a + b;
console.log(add(5, 3)); // Kết quả: 8

ECMAScript 14 (ES14 - 2023)

ES14 tiếp tục tối ưu hiệu suất và bổ sung các tính năng mới như:
Cải tiến về Array.prototype.toSorted(), Set methods
Hỗ trợ import.meta.resolve() cho module
Cập nhật về xử lý JSON nhanh hơn

Ví dụ ES14 - toSorted() giúp sắp xếp mảng không làm thay đổi mảng gốc

const numbers = [3, 1, 4, 2];
const sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // [1, 2, 3, 4]
console.log(numbers); // [3, 1, 4, 2] (Không thay đổi)

JavaScript trên Client-Side

Khái niệm và ứng dụng

JavaScript trên Client-Side (phía trình duyệt) là mã JavaScript được chạy trên trình duyệt của người dùng thay vì trên máy chủ. Nó giúp trang web trở nên tương tác, động, và thân thiện hơn với người dùng.

Ứng dụng của JavaScript trên Client-Side:

• Xử lý sự kiện (click chuột, nhập dữ liệu, cuộn trang)
• Hiệu ứng động (popup, menu ẩn/hiện, slider ảnh)
• Kiểm tra dữ liệu form trước khi gửi lên server
• Tải dữ liệu từ server không cần tải lại trang (AJAX, Fetch API)

Ví dụ về xử lý sự kiện với JavaScript

<button onclick="alert('Bạn vừa nhấn vào nút!')">Nhấn vào đây</button>

Lợi ích khi sử dụng JavaScript phía Client-Side

Giảm tải cho server

JavaScript giúp kiểm tra dữ liệu ngay trên trình duyệt trước khi gửi lên server, giảm số lần gửi yêu cầu, tiết kiệm tài nguyên server.

Ví dụ kiểm tra email hợp lệ trước khi gửi form

function validateEmail() {
    let email = document.getElementById("email").value;
    let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    if (!regex.test(email)) {
        alert("Email không hợp lệ!");
        return false;
    }
    return true;
}

Tăng trải nghiệm người dùng (UX/UI)

Hiển thị thông báo ngay lập tức khi nhập sai dữ liệu
Tạo hiệu ứng động giúp giao diện hấp dẫn hơn

Ví dụ tạo hiệu ứng đổi màu khi rê chuột vào nút

<button onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='blue'">Di chuột vào đây</button>

Các thư viện phổ biến trên Client-Side trong

Hiện nay, có nhiều thư viện giúp phát triển Front-End nhanh chóng và hiệu quả hơn:

ReactJS

• Được phát triển bởi Facebook, giúp xây dựng giao diện động, hiệu suất cao.
• Sử dụng Virtual DOM để tối ưu cập nhật giao diện.

Ví dụ component ReactJS đơn giản

function Welcome(props) {
    return <h1>Xin chào, {props.name}!</h1>;
}

VueJS

• Framework nhẹ, dễ học, dùng để tạo ứng dụng web tương tác.
• Hỗ trợ Two-way data binding giúp đồng bộ dữ liệu dễ dàng.

Ví dụ VueJS - Hiển thị dữ liệu từ input

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: "#app",
  data: { message: "Hello Vue!" }
});
</script>

AngularJS

• Framework mạnh mẽ do Google phát triển, phù hợp cho ứng dụng web lớn.
• Hỗ trợ TypeScript và Dependency Injection.

Ví dụ Angular component đơn giản

@Component({
  selector: 'app-root',
  template: '<h1>Xin chào Angular!</h1>'
})
export class AppComponent {}

JavaScript trên Server-Side

Giới thiệu về lập trình JavaScript phía Server

Ban đầu, JavaScript chỉ được sử dụng trên trình duyệt (Client-Side) để tạo các hiệu ứng động. Tuy nhiên, với sự phát triển của công nghệ, JavaScript đã được mở rộng để chạy trên Server-Side nhờ sự ra đời của Node.js.

JavaScript trên Server-Side giúp xử lý logic ứng dụng, quản lý cơ sở dữ liệu, xử lý yêu cầu HTTP, xây dựng API và nhiều tác vụ quan trọng khác.

Ứng dụng của JavaScript phía Server-Side:
Xây dựng web server để xử lý yêu cầu từ trình duyệt.
Kết nối và thao tác với cơ sở dữ liệu như MongoDB, MySQL, PostgreSQL.
Xây dựng API RESTful cho ứng dụng web và di động.
Xử lý file hệ thống, giao tiếp với các dịch vụ khác (microservices).

Node.js – Môi trường chạy JavaScript trên Server

Node.js là gì?

Node.js là một môi trường chạy JavaScript phía server được xây dựng trên công cụ V8 JavaScript Engine (cùng engine với Google Chrome). Nó giúp JavaScript có thể thực thi bên ngoài trình duyệt và xử lý các tác vụ như một ngôn ngữ lập trình backend.

const http = require('http');

const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Xin chào từ Node.js Server!');
});

server.listen(3000, () => {
    console.log('Server đang chạy trên cổng 3000');
});

Cách chạy file trên terminal:

node server.js