Javascript tuyển tập - Phần 1

Trong phần 1, mình sẽ giới thiệu về JavaScript, một ngôn ngữ lập trình rất phổ biến đã phát triển thành công nghệ nền tảng cho web và nhiều nền tảng khác. Tìm hiểu về đặc điểm quan trọng của JavaScript như ngôn ngữ thông dịch, định kiểu yếu và hướng sự kiện. Khám phá phương pháp học hiệu quả thông qua xây dựng nền tảng vững chắc, thực hành liên tục và tạo dự án thực tế. Cuối cùng, tìm hiểu ba cách tích hợp JavaScript vào trang web: internal, external và inline, cùng xu hướng hiện đại sử dụng ES modules.

1. Giới thiệu tổng quan về Javascript. Tầm quan trọng của Javascript

Javascript được tạo ra bởi Brendan Eich vào năm 1995 tại Netscape, ban đầu với tên “LiveScript” và sau đó được đổi tên để tận dụng sự phổ biến của Java. Đây là một ngôn ngữ lập trình động, đa mô hình hỗ trợ lập trình hướng đối tượng, hàm và sự kiện.

Đặc điểm nổi bật của Javascript:

• Interpreted language: Được thông dịch thay vì biên dịch
• Weakly typed: Không yêu cầu khai báo kiểu dữ liệu
• Single-threaded: Thực thi trên một luồng duy nhất
• Event-driven: Phản ứng với các sự kiện do người dùng hoặc hệ thống tạo ra
• First-class functions: Hàm được xem như đối tượng và có thể truyền như tham số

Tầm quan trọng của Javascript hiện nay:

• Không thể thiếu cho frontend development: Hiện tại, không có ngôn ngữ nào có thể thay thế Javascript trong việc tạo tương tác trên trình duyệt
• Full-stack development: Với Node.js, Javascript có thể chạy ở server-side, cho phép lập trình viên sử dụng một ngôn ngữ xuyên suốt stack
• Cộng đồng khổng lồ: Hàng triệu developer, thư viện và framework (React, Angular, Vue, Next.js…)
• Linh hoạt cao: Có thể áp dụng trong nhiều lĩnh vực từ web, mobile (React Native), desktop (Electron), đến IoT và ML

Sự phát triển của Javascript:

• ES6/ES2015: Giới thiệu các tính năng quan trọng như let/const, arrow functions, classes, modules, promises…
• ES2016-2023: Bổ sung các tính năng như async/await, optional chaining, nullish coalescing, private fields…
• TypeScript: Siêu tập hợp của Javascript cung cấp kiểu dữ liệu tĩnh và các tính năng OOP(Trong Javascript không có OOP nha!!!)

2. Phương pháp học lập trình Javascript hiệu quả

Xây dựng nền tảng vững chắc

• Nắm vững kiến thức cơ bản: Biến, kiểu dữ liệu, toán tử, cấu trúc điều khiển, hàm, phạm vi biến (scope)
• Hiểu rõ cơ chế hoạt động: Event loop, call stack, closure, prototype, this keyword
• Tài liệu tham khảo chất lượng:
  • Duonguyen Blogs - Tổng hợp nhiều blog và kiến thức về lập trình cho người mới.
  • MDN Web Docs - nguồn tài liệu chính thức và đáng tin cậy
  • “You Don’t Know JS” của Kyle Simpson
  • “Eloquent JavaScript” của Marijn Haverbeke
  • Javascript.info - hướng dẫn hiện đại, từ cơ bản đến nâng cao

Phương pháp thực hành hiệu quả

• Code mỗi ngày: Tạo thói quen viết code Javascript ít nhất 30 phút mỗi ngày
• Chia nhỏ vấn đề: Giải quyết từng phần nhỏ của bài toán lớn
• Refactor code thường xuyên: Sau khi code hoạt động, tìm cách cải thiện, tối ưu
• Implement lại các thư viện: Thử tự xây dựng phiên bản đơn giản của các thư viện phổ biến để hiểu cách chúng hoạt động
• Sử dụng các nền tảng luyện tập: CodeWars, LeetCode, HackerRank để rèn kỹ năng giải quyết vấn đề

Học tập nâng cao

• Đọc source code của các dự án mở: Học cách các developer chuyên nghiệp tổ chức code
• Áp dụng design patterns: Hiểu và áp dụng các mẫu thiết kế như Singleton, Observer, Factory, Module
• Tìm hiểu về performance optimization: Event delegation, memoization, virtualization
• Không chỉ biết “làm thế nào” mà còn “tại sao”: Tìm hiểu nguyên lý hoạt động đằng sau các tính năng

Xây dựng dự án thực tế

• Bắt đầu với mini-projects: Todo app, calculator, weather app
• Mở rộng sang ứng dụng phức tạp hơn: Ecommerce, social media, trò chơi đơn giản
• Tham gia các dự án open-source: Giải quyết các issues, tạo pull requests
• Học từ feedback: Chia sẻ code với đồng nghiệp hoặc cộng đồng để nhận phản hồi

3. Các cách tích hợp Javascript vào trang web

Có một số lưu ý tránh hiểu nhầm về thẻ script như sau:

• Thẻ script được đặt trong head sẽ được tải và chạy trước khi DOM được mount
• Thẻ script được đặt trong body sẽ được tải và chạy sau khi DOM load tới

Vì vậy, thường nên để ở cuối body để script chạy sau cùng khi DOM được tải!

Cách 1: Internal Javascript

Đặt code Javascript trực tiếp trong tài liệu HTML bằng thẻ <script>:

<button id="btn">Run code</button>
<!-- Đặt script ở cuối body để đảm bảo DOM đã tải -->
<script>
	// Code ở đây sẽ chạy sau khi DOM đã tải
	console.log('Script at end of body is running');

	const btn = document.getElementById('btn');
	btn.addEventListener('click', () => {
		alert('Xin chào từ script cuối body!');
	});
</script>

Ưu điểm:

• Không cần tạo file riêng
• Dễ dàng xem HTML và JS cùng lúc
• Không cần thêm HTTP request

Nhược điểm:

• Khó bảo trì khi code phức tạp
• Không tận dụng được cache của trình duyệt
• Trộn lẫn logic và cấu trúc

Cách 2: External Javascript

Tạo file JS riêng và liên kết vào HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>External Javascript</title>
		<!-- Cách tốt nhất là đặt script ở cuối body -->
		<!-- Hoặc sử dụng defer để tải không đồng bộ nhưng thực thi sau khi DOM sẵn sàng -->
		<script src="./script.js" defer></script>
	</head>
	<body>
		<button id="btn">Run code</button>
	</body>
</html>

// script.js
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
	alert('Xin chào!');
});

// Có thể tổ chức thành các modules
import { showMessage } from './utils.js';

// dblclick có nghĩa là Double Click
btn.addEventListener('dblclick', () => {
	showMessage('Double click detected!');
});

Ưu điểm:

• Tách biệt quan tâm: HTML cho cấu trúc, JS cho hành vi
• Caching: Trình duyệt có thể cache file JS
• Tái sử dụng: Có thể sử dụng cùng một file JS cho nhiều trang
• Dễ bảo trì: Code được tổ chức trong các file riêng biệt

Thuộc tính nâng cao:

• async: Tải không đồng bộ, thực thi ngay khi tải xong (có thể trước khi DOM sẵn sàng)
• defer: Tải không đồng bộ, thực thi sau khi DOM sẵn sàng
• type="module": Cho phép sử dụng ES modules (import/export)

<!-- Tải không đồng bộ, thực thi ngay khi tải xong -->
<script src="analytics.js" async></script>

<!-- Tải không đồng bộ, thực thi sau khi DOM sẵn sàng -->
<script src="main.js" defer></script>

<!-- Sử dụng ES modules -->
<script src="app.js" type="module"></script>

Cách 3: Inline Javascript

Gắn code trực tiếp vào các thuộc tính HTML:

<button onclick="alert('Xin chào!');">Say Hello!</button>

Ưu điểm:

• Đơn giản, nhanh chóng cho các tương tác đơn giản
• Không cần chọn element bằng selectors

Nhược điểm:

• Không tuân theo nguyên tắc tách biệt quan tâm
• Khó bảo trì khi ứng dụng lớn lên
• Giới hạn về độ phức tạp của code
• Không thể tái sử dụng logic

Cách 4: Sử dụng Javascript modules (ES6+)

Thực ra chúng vẫn là external thôi, nhưng mình tách ra vì nó thêm phần module ấy mà…

<script type="module" src="main.js"></script>

// utils.js
export const formatDate = (date) => {
	return new Intl.DateTimeFormat('vi-VN').format(date);
};

export const showNotification = (message) => {
	// Implementation
};

// main.js
import { formatDate, showNotification } from './utils.js';

document.getElementById('currentDate').textContent = formatDate(new Date());

document.getElementById('notifyBtn').addEventListener('click', () => {
	showNotification('Thông báo mới!');
});

Ưu điểm:

• Tổ chức code theo modules, tăng tính tái sử dụng
• Phạm vi cô lập, tránh xung đột tên biến
• Quản lý phụ thuộc rõ ràng
• Lazy loading khi cần

Tóm cái váy lại!

Javascript là ngôn ngữ lập trình không thể thiếu trong phát triển web hiện đại, với khả năng chạy ở cả client và server-side. Học Javascript hiệu quả đòi hỏi sự kết hợp giữa nắm vững kiến thức nền tảng và thực hành thường xuyên. Việc tích hợp Javascript vào trang web có thể thực hiện qua nhiều cách, mỗi cách có ưu và nhược điểm riêng, nhưng xu hướng hiện đại là tổ chức code thành các module riêng biệt và sử dụng external Javascript để dễ bảo trì.Í