Bạn xem video học JavaScript được vài tiếng, thấy ai cũng viết code mượt mà. Nhưng khi mở một file trống, đầu óc lại trắng xoá. Đội ngũ bên mình gặp chuyện này rất nhiều lần với các bạn mới bắt đầu. Vấn đề hiếm khi nằm ở trí nhớ kém. Phần lớn đến từ cách học: chỉ xem mà không gõ, nhảy quá sớm sang khái niệm khó, hoặc chưa biết mình cần nắm đến đâu. Bài này sẽ đi qua học javascript cơ bản theo thứ tự dễ đi nhất, kèm những chỗ hay vấp và cách bên mình thường gợi ý để vượt qua.
JavaScript cơ bản là gì và vì sao nên bắt đầu từ đây
Nói ngắn gọn, JavaScript là ngôn ngữ giúp trang web biết phản ứng. Nút bấm đổi trạng thái. Form kiểm tra dữ liệu trước khi gửi. Nội dung thay đổi khi người dùng cuộn hay gõ phím. Tất cả đều nhờ JavaScript.
Ngôn ngữ này chạy trực tiếp trên trình duyệt. Nhờ Node.js, nó còn chạy được trên máy chủ, nên một người học JS có thể đi theo cả hai hướng.
Học JS cơ bản nghĩa là nắm chắc năm nhóm kiến thức: biến, kiểu dữ liệu, hàm, điều kiện, vòng lặp. Cộng thêm DOM, tức cách JavaScript đọc và chỉnh sửa trang web. Khi đã nắm năm phần này, bạn có thể tự viết những chương trình nhỏ nhưng có ích thật, như bộ đếm, máy tính đơn giản hay danh sách việc cần làm.
Nhiều trung tâm đào tạo chọn JavaScript làm ngôn ngữ nhập môn vì kết quả hiện ra rất nhanh. Chỉ vài dòng code, một nút bấm đã đổi màu. Cảm giác có thành quả đó giữ người học đi tiếp, và đây là lợi thế lớn nhất khi mới bắt đầu.
Những chỗ người mới hay vấp và cách tránh
Đội ngũ thường thấy ba tình huống lặp đi lặp lại. Tình huống đầu tiên là xem video rất nhiều nhưng không tự viết lại được. Giống như đọc công thức nấu ăn mà chưa bao giờ đứng vào bếp. Cách xử lý đơn giản: tắt video, gõ lại từng ví dụ bằng tay, rồi mới mở video ra đối chiếu. Gõ lại giúp bạn nhận ra chỗ mình chưa hiểu thật.
Tình huống thứ hai là nhầm lẫn giữa var, let và const. Lời khuyên bên mình hay dùng: mặc định dùng const, chỉ đổi sang let khi giá trị thật sự cần thay đổi, và gần như không dùng var trong code mới. Hai từ khoá sau giới hạn phạm vi biến rõ ràng hơn, nhờ đó bạn tránh được những lỗi khó tìm.
Tình huống thứ ba khó hơn. Bạn gọi một API rồi thấy dữ liệu hiện undefined, dù nhìn code có vẻ đúng. Thủ phạm thường là bất đồng bộ, tức đoạn code chạy trước khi dữ liệu kịp về. Lúc này chưa cần hiểu sâu. Chỉ cần biết đây là chủ đề riêng, sẽ học sau khi phần cơ bản đã vững.
Biến, kiểu dữ liệu và câu lệnh điều kiện
Có thể hình dung biến như một chiếc hộp có nhãn để cất một giá trị. Các kiểu dữ liệu nguyên thủy thường gặp gồm number (số), string (chuỗi), boolean (đúng hoặc sai), null và undefined.
Hai kiểu cuối rất hay bị nhầm. null nghĩa là bạn cố tình để trống. undefined nghĩa là chưa ai gán giá trị. Nhớ được khác biệt này sẽ giúp bạn đọc lỗi nhanh hơn nhiều.
Câu lệnh if/else cho phép chương trình rẽ nhánh. Ví dụ: nếu điểm từ 5 trở lên thì báo đạt, ngược lại báo chưa đạt. Khi có nhiều trường hợp cùng so sánh một giá trị, switch sẽ gọn hơn.
Khi mới học, bạn nên viết điều kiện thật ngắn và dễ đọc. Cố lồng quá ba tầng thường khiến chính người viết cũng khó theo dõi sau vài ngày.
Vòng lặp và cách dùng for…of
Vòng lặp giúp lặp lại một việc nhiều lần mà không phải copy code. Vòng for phù hợp khi bạn biết trước số lần lặp. while dùng khi điều kiện dừng phụ thuộc vào quá trình chạy.
Với mảng, for…of là cú pháp gọn nhất, vì nó lấy trực tiếp từng phần tử, không cần tự quản lý chỉ số. Ví dụ duyệt danh sách tên sinh viên chỉ cần một dòng khai báo và một khối lệnh.
Có một lưu ý nhỏ nhưng nên nhớ: luôn kiểm tra điều kiện dừng của while. Vòng lặp không bao giờ kết thúc sẽ làm trình duyệt treo. Bên mình từng thấy người mới mất cả buổi chiều chỉ để tìm ra đúng lỗi này.
Hàm, tham số và arrow function
Hàm là một khối code có tên, nhận đầu vào qua tham số và có thể trả về kết quả. Bạn có thể nghĩ hàm như một cái máy: đưa nguyên liệu vào, lấy thành phẩm ra.
Viết hàm giúp code không lặp lại. Sửa một chỗ là đủ, không phải sửa mười chỗ rải rác khắp file.
Arrow function là cách viết ngắn hơn, ví dụ (a, b) => a + b. Cú pháp này rất phổ biến trong code hiện đại. Tuy vậy, khi mới học, bạn nên viết kiểu khai báo thường trước để hiểu rõ cách hàm hoạt động. Khi đã quen, hãy chuyển sang arrow function.
Mảng, đối tượng và xử lý dữ liệu
Hãy thử tưởng tượng bạn cần quản lý danh sách sinh viên và điểm số của một lớp. Mảng là nơi chứa danh sách. Đối tượng mô tả từng sinh viên với các thuộc tính như tên, mã số và điểm.
Khi kết hợp hai thứ này, bạn đã có một mô hình dữ liệu khá giống thực tế. Đây cũng là cách nhiều dự án nhỏ được tổ chức.
Với mảng, ba phương thức đáng học nhất là:
- map để biến đổi từng phần tử.
- filter để lọc theo điều kiện.
- reduce để gộp thành một giá trị, chẳng hạn tổng điểm.
Ban đầu bạn vẫn có thể dùng vòng lặp để làm cùng việc. Dần dần sẽ thấy các phương thức này viết ngắn hơn và thể hiện ý rõ hơn. Muốn luyện sâu hơn, bạn có thể đọc thêm cách khai thác mảng trong JavaScript.
Đối tượng có thể dùng destructuring để lấy nhanh thuộc tính, ví dụ const {ten, diem} = sinhVien. Cú pháp này làm code gọn. Đừng lạm dụng khi đối tượng quá lớn, vì người đọc sau này sẽ khó theo dõi.
Làm việc với DOM và sự kiện trên trình duyệt
DOM là cấu trúc trình duyệt dựng lên từ file HTML. JavaScript dùng nó để đọc và thay đổi trang. Muốn đổi nội dung một thẻ, bạn phải chọn được thẻ đó trước.
Hàm querySelector cho phép chọn phần tử bằng cú pháp giống CSS, rất tiện nếu bạn đã quen CSS.
Sự kiện là những thao tác người dùng thực hiện, như click, gõ phím hay gửi form. Bạn gắn một hàm lắng nghe vào sự kiện, khi sự kiện xảy ra thì hàm đó được gọi. Với form, nhớ chặn hành vi tải lại trang mặc định nếu muốn xử lý dữ liệu bằng JavaScript, nếu không dữ liệu sẽ mất ngay.
Một bài tập nhỏ nên làm là bộ đếm: có nút tăng, nút giảm và một ô hiển thị con số. Chỉ với vài dòng, bạn sẽ nắm được cách chọn phần tử, lắng nghe sự kiện và cập nhật giao diện. Sau đó thử thêm danh sách việc cần làm, bạn sẽ gặp đúng những lỗi thực tế mà lập trình viên đi làm vẫn gặp.
So sánh các cách học: video, tài liệu và thực hành
Video cho bạn thấy người khác gõ code và nghe họ giải thích, rất hợp để làm quen. Điểm yếu là dễ tạo cảm giác “hiểu rồi” trong khi chưa tự viết được gì.
Tài liệu viết kỹ hơn và dễ tra cứu lại. Nhưng đọc liền một mạch dài thì dễ chán nếu không có việc để làm. Thực hành là cách ghi nhớ bền nhất. Tuy nhiên, nếu không có ai chỉ dẫn, bạn có thể kẹt cả tiếng ở một lỗi nhỏ.
Vì vậy bên mình thường gợi ý kết hợp cả ba: xem khoảng 15 đến 20 phút lý thuyết, rồi làm bài tập ngay. Tài liệu của MDN Web Docs là nơi tra cứu đáng tin cậy, nên làm quen từ sớm.
Lộ trình gợi ý theo từng mốc thời gian
Không có con số nào đúng cho tất cả mọi người, vì thời gian phụ thuộc vào nền tảng và số giờ bạn dành mỗi ngày. Dưới đây là lộ trình tham khảo mà đội ngũ bên mình thường chia sẻ với người mới.
Tuần một đến tuần hai tập trung vào biến, kiểu dữ liệu, điều kiện và vòng lặp. Mục tiêu là viết được chương trình tính điểm trung bình.
Tuần ba đến tuần bốn học hàm, mảng và đối tượng, rồi làm bài quản lý danh sách sinh viên đơn giản. Tuần năm đến tuần sáu làm quen DOM, sự kiện và form, và hoàn thành bộ đếm hoặc danh sách việc cần làm.
Điều quan trọng là mỗi mốc phải có một sản phẩm cụ thể. Nếu tuần nào cũng chỉ xem mà không có thứ gì chạy được, bạn sẽ thấy mình đứng yên dù đã học rất nhiều.
Lỗi thường gặp và cách tự gỡ
Khi code báo lỗi, đừng hoảng. Mở console của trình duyệt, đọc dòng thông báo đầu tiên và xem nó chỉ vào đâu. Phần lớn lỗi nhỏ nằm đúng ở chỗ được chỉ ra, như gõ sai tên biến hay thiếu một dấu ngoặc. Đọc kỹ thông báo lỗi là kỹ năng quan trọng hơn bạn nghĩ.
Nếu vẫn chưa rõ, dùng console.log để in giá trị các biến qua từng bước. Cách này đơn giản nhưng hiệu quả, vì bạn thấy chương trình thực sự đang làm gì thay vì đoán. Đừng xoá console.log vội, cứ giữ đến khi tìm ra lỗi.
Cuối cùng, tránh sao chép code mà không hiểu. Code chạy được sau khi dán vào khiến bạn tưởng mình đã học, nhưng gặp bài khác là đứng im. Hãy tự hỏi từng dòng làm gì, rồi thử đổi một chỗ để xem kết quả thay đổi thế nào.
Bước tiếp theo sau JavaScript cơ bản
Khi đã vững phần cơ bản, bạn nên học tiếp ES6 trở lên, bất đồng bộ với Promise và async/await. Đây là phần giúp xử lý dữ liệu từ máy chủ mà không bị rối.
Sau đó chọn một hướng rõ ràng: frontend để làm giao diện web, backend với Node.js để xây máy chủ, hoặc lập trình di động nếu bạn quan tâm đến ứng dụng điện thoại. Nếu muốn hướng đi tổng thể hơn, bạn có thể tham khảo lộ trình học lập trình cho người mới.
Đừng cố học tất cả cùng lúc. Chọn một hướng, làm một dự án nhỏ liên quan đến hướng đó, rồi mới mở rộng. Một dự án hoàn chỉnh có giá trị hơn nhiều so với chứng chỉ trên giấy khi bạn bắt đầu tìm việc.
Câu hỏi thường gặp
Học JavaScript cơ bản mất bao lâu?
Nếu mỗi ngày bạn dành khoảng hai đến ba tiếng và làm bài tập đều đặn, phần cơ bản thường mất khoảng năm đến bảy tuần. Nếu chỉ học rải rác vài buổi một tuần, thời gian sẽ kéo dài hơn. Điều quan trọng là bạn viết code thật mỗi ngày, không chỉ xem.
Người chưa biết lập trình có học JavaScript được không?
Được. JavaScript là một trong những ngôn ngữ dễ bắt đầu nhất vì chạy ngay trên trình duyệt, không cần cài đặt phức tạp. Bạn chỉ cần kiên nhẫn với các khái niệm trừu tượng như biến và hàm trong vài tuần đầu.
Nên học JavaScript trước hay Python?
Nếu bạn muốn làm web và thấy kết quả trực quan nhanh, JavaScript là lựa chọn hợp lý. Nếu quan tâm đến dữ liệu hoặc trí tuệ nhân tạo, Python có thể phù hợp hơn. Không có lựa chọn nào sai, quan trọng là chọn một hướng và học nghiêm túc.
Học JavaScript cơ bản xong có đi làm được không?
Phần cơ bản chưa đủ để đi làm ngay, nhưng là nền tảng bắt buộc. Bạn cần học thêm framework, Git và cách làm việc với API, rồi làm vài dự án cá nhân để có thứ đưa cho nhà tuyển dụng xem.
Cần cài đặt công cụ gì để bắt đầu?
Bạn chỉ cần một trình duyệt hiện đại và một trình soạn thảo như VS Code. Nhấn F12 để mở console của trình duyệt là đã chạy được JavaScript ngay. Node.js là công cụ bổ sung khi bạn muốn chạy code ngoài trình duyệt, và có thể cài sau khi đã quen.
Nếu muốn đối chiếu thêm với tài liệu chính thức, bạn có thể xem tài liệu JavaScript của MDN.