Tuần trước, một bạn học viên đã gửi tin nhắn cho mình có nội dung như sau:
Em đang tìm hiểu về JavaScript là gì. Em thấy ngôn ngữ lập trình này đang hot, tìm kiếm trên mạng thì thấy nhiều tài liệu tham khảo quá, nên em chưa biết bắt đầu từ đâu. Anh có tài liệu nào hay thì gửi qua cho em ké xíu nhé 😆
Sau khi đọc xong tin nhắn, mình lên Google để tìm kiếm các bài viết liên quan. Thật sự là có rất nhiều bài viết về ngôn ngữ lập trình JavaScript. Nhưng mình chưa thấy một bài viết nào tổng hợp đầy đủ cả.
Vì vậy mình đã quyết định chơi lớn viết một topic để cung cấp:
- Cái nhìn tổng thể về sự phát triển của JavaScript và tiềm năng của nó trong tương lai.
- Tại sao bạn nên học ngôn ngữ lập trình JavaScript.
- 3 cách tốt nhất để bắt đầu học JavaScript hiệu quả.
- Biết thêm về con đường sự nghiệp của lập trình viên JavaScript.
- …
Bạn hãy cùng mình tìm hiểu từng phần một nhé!
Nội dung
Chương 1: Tổng quan về JavaScript
Trong chương này, bạn sẽ biết được:
- JavaScript là gì?
- Lịch sử phát triển của JavaScript.
- Những tính năng nổi bật của JavaScript.
Khóa Học Lập Trình JavaScript Từ Con Số 0
Một cái nhìn tổng quan sẽ giúp bạn hiểu rõ hơn ngôn ngữ lập trình JavaScript có vai trò như thế nào trong sự phát triển tổng thể của nghề lập trình.
JavaScript là gì?
JavaScript là một ngôn ngữ lập trình thông dịch được phát minh ra với mục đích ban đầu là tương tác với các phần tử trong trang web (HTML và CSS).
Trong trình duyệt web, JavaScript gồm ba phần chính:
- ECMAScript: cung cấp các chức năng cốt lõi của JavaScript.
- Document Object Model (DOM): cung cấp các hàm để tương tác với các phần tử trong trang web (label, checkbox,…).
- Browser Object Model (BOM): cung cấp các hàm để tương tác với các chức năng của trình duyệt web (alert, confirm,…).
Ngoài ra, ngôn ngữ lập trình JavaScript thường được sử dụng cùng với HTML và CSS để cải thiện trải nghiệm người dùng.
Ví dụ:
- Tự động gợi ý kết quả phù hợp khi nhập giá trị.
- Các biểu đồ sinh động, có thể thao tác trực tiếp.
- Chức năng “Zoom” khi sử dụng Google Maps.
- Các Slideshow ảnh thường thấy trong các trang web.
- …
Bạn có thể hiểu ngôn ngữ lập trình JavaScript trong trình duyệt cơ bản hoạt động như sau:
Sau khi trình duyệt tải về một trang web, JavaScript Engine sẽ bắt đầu thực thi từng dòng lệnh JavaScript.
Tiếp theo, từng dòng lệnh này sẽ tiến hành sửa đổi HTML và CSS để cập nhật giao diện người dùng một cách tự động.
JavaScript Engine là một chương trình dùng để thực thi các đoạn lệnh JavaScript.
Front-End và Back-End trong JavaScript
Khi một trang web thực thi các dòng lệnh JavaScript, thì lúc này bạn có thể xem JavaScript là một ngôn ngữ lập trình Front-End.
Ngoài ra, JavaScript là ngôn ngữ lập trình có thể chạy trên cả máy chủ (Back-End).
Node.js là nền tảng phổ biến nhất hiện nay giúp thiết lập môi trường để JavaScript có thể hoạt động được trên máy chủ. Vì vậy, bạn có thể dùng JavaScript để truy cập database, file hệ thống,…
Lịch sử của JavaScript là gì
Brendan Eich là một lập trình viên của Netscape, ông đã tạo ra ngôn ngữ lập trình JavaScript vào năm 1995. JavaScript có tên gọi ban đầu là Mocha, sau đó Mocha đổi tên thành LiveScript.
Lợi dụng sự nổi tiếng của Java ở thời điểm đó, Netscape đã quyết định đổi tên LiveScript thành JavaScript.
Quyết định đổi tên này bắt đầu khi Netscape ra mắt trình duyệt web Netscape Navigator 2 và kèm theo đó là phiên bản JavaScript 1.0.
Sau một khoản thời gian, Netscape đã phát hành Netscape Navigation 3 và JavaScript 1.1.
Ngay trong thời điểm này, Microsoft đã giới thiệu một trình duyệt web có tên là Internet Explorer 3 (IE 3) nhằm cạnh tranh với Netscape.
Tuy nhiên, Microsoft đã tự tạo ra một ngôn ngữ lập trình JavaScript riêng cho IE có tên gọi là JScript. Microsoft phải sử dụng tên JScript để tránh vấn đề bản quyền với NetScape.
Do đó, thị trường có hai phiên bản JavaScript:
- JavaScript trong Netscape Navigation.
- JScript trong Internet Explorer.
Thời điểm này, ngôn ngữ lập trình JavaScript không có bất kỳ tiêu chuẩn cụ thể nào về cú pháp và chức năng. Vì vậy cộng đồng quốc tế đã quyết định thiết lập tiêu chuẩn chung cho JavaScript.
Năm 1997, Hiệp Hội Các Nhà Sản Xuất Máy Tính Châu Âu (European Computer Manufacturers Association – ECMA) đã nhận được đề xuất phiên bản JavaScript 1.1.
Sau đó, Hiệp Hội Các Nhà Sản Xuất Máy Tính Châu Âu đã thông qua TC39 (Technical Committee #39) để tiêu chuẩn hoá ngôn ngữ JavaScript.
Cuối cùng JavaScript đã trở thành trở thành một ngôn ngữ có mục đích chung, đa nền tảng và mang tính trung lập.
TC39 đã đưa ra ECMA-262, đây là một tiêu chuẩn dùng để định nghĩa một ngôn ngữ kịch bản mới có tên là ECMAScript (thường được phát âm là Ek-ma-script).
Hai tổ chức bao gồm International Organization for Standardization (ISO) và International Electrotechnical Commissions (IEC) đã chấp thuận ECMAScript (ISO/IEC-16262).
Trong chương tiếp theo, bạn sẽ biết được JavaScript thật sự hoạt động như thế nào, cùng mình tìm hiểu nhé!
Chương 2: Cách hoạt động của JavaScript
Làm thế nào máy tính có thể hiểu được ngôn ngữ JavaScript?
Trong chương này, mình sẽ giúp bạn có cái nhìn chi tiết hơn về cách thức hoạt động của JavaScript Engine để máy tính có thể hiểu được ngôn ngữ JavaScript.
Bắt đầu thôi nào!
Để hiểu JavaScript thì máy tính cần phải thông qua JavaScript Engine.
JavaScript Engine sẽ chuyển đổi các dòng lệnh JavaScript thành ngôn ngữ máy (nhị phân), vì vậy máy tính có thể hiểu được.
Mặc dù hiện nay trên thị trường có nhiều JavaScript Engine nhưng cơ chế hoạt động đều tương tự nhau.
JavaScript Engine phổ biến nhất là V8 Engine do Google phát triển. Trình duyệt Chrome và Node.js đang sử dụng Engine này.
Thông qua sơ đồ bên dưới, bạn sẽ có cái nhìn tổng quan hơn về cách thức hoạt động của JavaScript Engine:
Bây giờ hãy cùng đi qua từng giai đoạn nhé!
Trình phân tích (Parser)
Trình phân tích trong JS Engine sẽ tiếp nhận các dòng lệnh JavaScript đầu tiên.
Công việc của trình phân tích là kiểm tra lỗi cú pháp từng dòng một. Khi phát hiện lỗi, trình phân tích sẽ dừng lại và thông báo lỗi ở dòng tương ứng.
AST
Trình phân tích tạo ra cấu trúc dữ liệu tên là AST (Abstract Syntax Tree – Cây cú pháp trừu tượng) sau khi nó đảm bảo tất cả dòng lệnh không còn lỗi.
Bạn có thể dễ dàng hiểu AST là gì qua ví dụ bên dưới:
function fun(x) {
if (x > 15) {
var a = 4;
return a * x;
}
return x + 10;
}
Dựa vào đoạn lệnh trên, mình sẽ mô phỏng AST tương ứng như sau:
Chú ý: Hình ảnh trên không chính xác 100%, nó chỉ mô phỏng tượng trưng thôi.
Chuyển đổi thành mã máy
JavaScript Engine tiến hành chuyển đổi các dòng lệnh JavaScript thành mã máy (là ngôn ngữ máy tính có thể hiểu) sau khi Trình phân tích hoàn thành AST.
Thực thi
JavaScript Engine gửi mã máy đến hệ thống tương ứng để thực thi ở giai đoạn cuối cùng.
Kế tiếp, mình sẽ giới thiệu cho bạn các ứng dụng của JavaScript trong thực tế là gì.
Chương 3: Ứng dụng của JavaScript là gì?
Nhiều lập trình viên sử dụng JavaScript để phát triển các ứng dụng Front-End, Back-End hoặc thậm chí là Full-Stack.
Bạn sẽ biết rõ hơn thông qua các ví dụ chi tiết sau đây.
Phát triển web
JavaScript là linh hồn của một trang web. JavaScript cung cấp các chức năng giúp tăng tính tương tác cho trang web.
Ví dụ: mở file PDF, kiểm tra dữ liệu người dùng nhập, hiển thị thêm nội dung mà không cần tải lại cả một trang web,….
React, Angular và Vue.js là các framework JavaScript phổ biến nhất dùng để phát triển web.
Netflix và Paypal sử dụng Angular còn Facebook sử dụng React.
Ứng dụng máy chủ
Node.js giúp thiết lập môi trường để JavaScript có thể hoạt động trong máy chủ. Vì vậy, lập trình viên có thể truy vấn database, chỉnh sửa file, debug code bằng JavaScript.
Trong thực tế, công ty Opera Software AS sử dụng JavaScript để phát triển Opera Unite, một chức năng trình trong duyệt Opera.
Opera Unite là một ứng dụng máy chủ giúp người dùng chia sẻ file thông qua trình duyệt web.
Games
HTML5 và JavaScript là cặp đôi hoàn hảo để phát triển game cho trang web.
Từ khi HTML5 ra mắt, nó giúp lập trình viên truy cập đầy đủ các chức năng mà không cần dùng đến Flash.
Khi bạn phát triển game dựa trên combo JavaScript và HTML5 thì mọi thiết bị đều chạy được game thông qua trình duyệt web. Bạn không cần lập trình riêng cho mỗi thiết bị nữa!
Ứng dụng di động
React Native là một trong những framework cross-platform phổ biến nhất dùng để phát triển ứng dụng di động.
Facebook sử dụng React Native để xây dựng các ứng dụng di động của mình. Ví dụ: Facebook app, Messenger, Facebook Business,…
React Native dựa trên nền tảng React và nó hỗ trợ cả hai ngôn ngữ JavaScript và TypeScript.
React Native giúp việc phát triển di động tiết kiệm thời gian, độ ổn định cao và số lượng cộng đồng rất lớn hỗ trợ bên cạnh.
Chương 4: Tầm quan trọng của JavaScript trong thiết kế web
Hiện nay, bạn thấy rằng không còn sự khác biệt giữa web và ứng dụng di động. Bằng việc sử dụng JavaScript, một trang web có thể hoạt động hoàn toàn như một ứng dụng di động riêng biệt.
Bạn sẽ biết rõ hơn thông qua các ví dụ dưới đây:
Gợi ý khi tìm kiếm
Thanh tìm kiếm sẽ gợi ý kết quả phù hợp dựa vào những ký tự mà bạn đã nhập trước đó.
Ví dụ – Khi bạn nhập “Học lập trình” trên thanh tìm kiếm của Google Search, thì kết quả gợi ý có thể như sau:
- “Học lập trình online”
- “Học lập trình python”
- “Học lập trình game”
- “Học lập trình cơ bản”
- …
Tự động cập nhật dữ liệu
Dữ liệu trên web tự động cập nhật trong một khoản thời gian mà không cần tác động của người dùng.
Ví dụ – Các trang web hiển thị dữ liệu chứng khoán sẽ tự động cập nhật ngay khi có sự thay đổi.
Tải thêm dữ liệu chỉ khi người dùng tương tác
Để tránh việc dữ liệu hiển thị quá nhiều dẫn đến dư thừa, giảm tốc độ tải trang. Giờ đây, bạn có thể chủ động truy cập dữ liệu khi cần thiết.
Ví dụ – Trong mục bình luận của các trang báo điện tử sẽ không hiển thị toàn bộ các bình luận. Bạn cần bấm nút “Xem thêm bình luận” để tải thêm các bình luận còn lại.
Nâng cấp phần tử HTML
Bạn có thể dùng JavaScript để thêm chức năng cho các phần tử HTML cơ bản (textbox, combobox, checkbox,…).
Ví dụ – Mặc định combobox trong HTML chỉ cho phép bạn chọn giá trị từ danh sách có sẵn. Tuy nhiên, bạn có thể dùng JavaScript để người dùng có thể nhập giá trị tìm kiếm và combobox sẽ gợi ý danh sách giá trị phù hợp.
Tạo hiệu ứng
JavaScript còn có thể tạo hiệu ứng cho các phần tử trong trang web, giúp trang web trở nên sống động và cải thiện trải nghiệm người dùng tốt hơn.
Ví dụ – Bạn có thể dễ dàng bắt gặp các hiệu ứng pháo hoa khi dịp tết đến gần từ các trang thương mại điện tử như Tiki, Shopee,…
Ở trên, mình đã giới thiệu cho bạn 5 ví dụ tiêu biểu. Ngoài ra, bạn còn có thể bắt gặp rất nhiều ứng dụng khác của JavaScript trong thực tế.
Qua đó, bạn có thể thấy được vai trò của JavaScript trong thiết kế web quan trọng như thế nào!
Chương 5: Framework JavaScript là gì?
Sử dụng Framework JavaScript giúp tiết kiệm thời gian, chi phí phát triển và giảm thiểu tối đa lỗi do lập trình viên gây ra.
Vậy Framework JavaScript là gì? Tại sao bạn nên sử dụng Framework? Sau khi đọc chương này bạn sẽ hiểu rõ hơn.
Framework JavaScript là gì?
Bạn hãy hình dung rằng việc phát triển một trang web tương tự như xây một ngôi nhà. Bạn sẽ cần rất nhiều vật liệu như gỗ, xi măng, sắt, thép,…
Bạn có thể tự tạo ra các vật liệu đó, nhưng việc này gây lãng phí thời gian, bởi vì bạn có thể mua vật liệu ở các cơ sở sản xuất.
Trong lập trình cũng như vậy, bạn có thể tự xây mọi thứ từ đầu bằng JavaScript. Tuy nhiên, trong thực tế, đa số trang web đều sử dụng Framework.
Framework cung cấp các chức năng tiện ích có sẵn. Bạn chỉ cần lấy ra sử dụng hoặc tuỳ chỉnh theo mục đích riêng của bản thân.
Top 2 front-end framework của JavaScript nên học trước tiên
React
React là một sản phẩm của công ty Facebook.
React được cộng đồng đón nhận và sử dụng rộng rãi tuy mới ra mắt trong một thời gian ngắn.
Vị trí lập trình viên React đang có nhu cầu tuyển dụng cao nhất ở thị trường Việt Nam với mức lương dao động từ 500$ đến hơn 3000$.
Các lập trình viên dùng React để phát triển các trang web có giao diện phức tạp và lượng người dùng lớn.
Angular
Không tỏ ra thua kém hơn React, Angular là một trong những Framework JavaScript mã nguồn mở mạnh mẽ.
Google phát triển Angular nhằm mục đích xây dựng các Single Page Application (SPA).
SPA bản chất là trang web, nhưng nó hoạt động như một ứng dụng trên điện thoại hoặc trên máy tính. Mức lương của lập trình viên Angular ở thị trường Việt Nam dao động từ 500$ đến hơn 2000$ và nhu cầu tuyển dụng cũng khá cao.
Top 2 back-end framework của JavaScript nên học trước tiên
Express
Express là back-end framework phổ biến nhất hiện nay. Ứng dụng chính của Express là phát triển ứng dụng Web và REST API.
Dựa trên ý tưởng của Sinatra, TJ Holowaychunk đã phát minh ra Express.
Ưu điểm lớn nhất của Express là tốc độ xử lý rất nhanh và dễ dàng mở rộng. Vì vậy, nhiều framework khác sử dụng Express làm nền tảng phát triển.
Meteor
Meteor là một full-stack framework, nghĩa là nó cung cấp đầy đủ các chức năng để xây dựng trang web từ front-end đến back-end.
Ngoài ra bạn có thể dùng Meteor để phát triển ứng dụng cho di động và desktop.
Chương 6: Ưu điểm và nhược điểm của JavaScript là gì?
Như các ngôn ngữ lập trình khác, JavaScript cũng có ưu điểm và nhược điểm.
Biết được ưu điểm và nhược điểm của JavaScript là gì sẽ giúp ích cho bạn rất nhiều khi lựa chọn công nghệ phù hợp cho dự án.
Ưu điểm của JavaScript là…
- Tốc độ – JavaScript chạy rất nhanh trong trình duyệt. Bởi vì nó không cần thư viện bên ngoài để hoạt động. Bên cạnh đó, hầu hết trình duyệt đều hỗ trợ JIT (just in time), có nghĩa là trình duyệt không cần biên dịch toàn bộ code của JavaScript trước khi thực thi.
- Đơn giản – Khá dễ để học cú pháp của JavaScript nếu so sánh với vài ngôn ngữ phổ biến khác như C++.
- Phổ biến – Mọi trang web đều sử dụng JavaScript. Số lượng máy chủ sử dụng Node.js ngày càng tăng lên nhanh chóng. Có hàng ngàn tài nguyên học JavaScript miễn phí và có phí trên internet. Cả hai trang web StackOverflow và GitHub cho biết rằng, số lượng dự án sử dụng JavaScript ngày càng tăng và không có xu hướng dừng lại.
- Cộng đồng lớn mạnh – Cộng đồng JavaScript đã đóng góp hàng triệu thư viện. Vì vậy, bạn sẽ tiết kiệm rất nhiều thời gian xây dựng dự án.
- Đa năng – Ứng dụng của JavaScript là rất đa dạng. Bạn có thể dùng JavaScript như một ngôn ngữ máy chủ (Node.js), hệ quản trị cơ sở dữ liệu (MongoDB), ứng dụng di động (React Native), ứng dụng web (ReactJS, AngularJS), ứng dụng Desktop (Electronjs),…
Nhược điểm của JavaScript là…
Khi JavaScript hoạt động phía front-end, một vài kẻ xấu lợi dụng một số lỗi bảo mật để tấn công người dùng. Vì vậy, một số trang web đã không cho phép JavaScript hoạt động.
Chương 7: Tại sao nên học JavaScript
Nếu bạn muốn trở thành lập trình viên web, bắt buộc bạn phải học JavaScript.
Thậm chí khi mục tiêu nghề nghiệp của bạn là lĩnh vực khác, thì bạn cũng có thể tự làm một trang web hoàn chỉnh chỉ với kiến thức JavaScript cơ bản.
Dưới đây là 3 nguyên nhân chính tại sao bạn phải học JavaScript:
JavaScript là một ngôn ngữ đa năng
JavaScript là một ngôn ngữ lập trình cực kỳ đa năng. Nếu bạn nắm vững nó, bạn có thể lập trình front-end (ReactJS), back-end (Node.js), di động (React Native), desktop (ElectronJS) và thậm chí là machine learning.
Nhu cầu tuyển dụng và mức lương trung bình cao
JavaScript là ngôn ngữ lập trình phổ biến nhất thế giới hiện nay.
Theo báo cáo của Devskiller IT Skills and Hiring, 72% tin tuyển dụng là JavaScript.
Bạn cũng dễ dàng thấy mức lương của lập trình viên JavaScript dao động từ 500$ đến 3000$ khi tìm kiếm trên ITViệc.
Dễ học
Khi so sánh với các ngôn ngữ khác, JavaScript khá dễ học và phù hợp với bạn khi mới bắt đầu.
Và tuyệt vời hơn là tất cả trình duyệt đều hỗ trợ JavaScript, vì vậy bạn không cần phải cài đặt thêm bất kỳ phần mềm nào khác để chạy JavaScript.
JavaScript có đầy đủ các đặc trưng của một ngôn ngữ lập trình bậc cao (hướng đối tượng, class, functional,…). Do đó, khi nắm vững JavaScript, bạn sẽ dễ dàng học các ngôn ngữ khác như Java, PHP, Python,…
Khóa Học Lập Trình Cơ Bản
Nếu bạn đang làm trái ngành và có dự định chuyển sang ngành lập trình.
Đây là Khóa Học Lập Trình Cơ Bản từ con số 0 kéo dài trong vòng 1 tháng, rất phù hợp với những bạn muốn kiểm chứng xem mình có phù hợp với nghề lập trình hay không.
