Trong thời đại công nghệ và kỹ thuật hiện nay, mảng lập trình đang có tiềm năng phát triển rất lớn. Trong số đó, lập trình Frontend, đặc biệt là Frontend web, đã trở thành một lĩnh vực phát triển sôi động nhờ vào tiềm năng thu nhập cao mà công việc này mang lại. Điều này đã khiến cho rất nhiều người, từ mọi tầng lớp và gia đình, đổ xô học lập trình Frontend web tại các trung tâm đào tạo.
Tuy nhiên, đối với những người mới học, việc “hấp thu” kiến thức JavaScript có thể gặp khó khăn và dễ chán nản. Nhưng đừng lo, trong series bài viết về JavaScript này, tôi sẽ giúp bạn hiểu và nắm vững kiến thức này. Chúng ta hãy bắt đầu ngay!
1. Giới thiệu về JavaScript.
Vậy chính xác JavaScript là gì?
JavaScript là một ngôn ngữ lập trình chủ yếu được sử dụng để tạo và phát triển các trang web, nhờ vào khả năng nhúng trực tiếp vào các tệp HTML, giúp làm cho trang web trở nên sống động và hấp dẫn hơn. JavaScript không chỉ giới hạn trong việc tương tác với HTML mà còn có khả năng thay đổi động CSS.
Một trong những ứng dụng thực tế phổ biến của JavaScript là tạo ra các hiệu ứng đồ họa, các hộp thoại pop-up quảng cáo, và tính năng tự động hoàn thành khi tìm kiếm. Tất cả những điều này đều có thể được thực hiện một cách mạch lạc với JavaScript.
JavaScript không chỉ dừng lại ở việc lập trình phía client trên nền tảng web, mà nó còn được sử dụng rộng rãi trong việc phát triển ứng dụng di động. Điều này làm cho JavaScript trở thành một ngôn ngữ đa nền tảng, có thể sử dụng để xây dựng ứng dụng không chỉ trên trình duyệt mà còn trên server và trên nhiều thiết bị khác nhau, nhờ vào các chương trình đặc biệt được gọi là JavaScript engine.
- AngularJS
- ReactJS và React Native
- VueJS
- NuxtJS
- NextJS
- Jquery
- NodeJS
…
Một số các trang web nổi tiếng được xây dựng từ các library và framework trên như:
- ReactJS: Facebook, Instagram, Twitter, netflix, …
- VueJS: Trang chủ của VueJS, Behance, Font Awesome, upwork, …
- AngularJS: JetBlue, samsung, freelancer, …
(Để biết được một trang web có được xây dựng bằng library hay framework kể trên bạn chỉ cần cài các extension hỗ trợ trên trình duyệt chrome để detect nhé, ví dụ: React và NextJS thì có React Developer Tools, VueJS và NuxtJS thì có Vue.js devtools, AngularJS có Angular Devtools).
2. Hướng dẫn setup môi trường JavaScript.
Giới thiệu như vậy là đủ rồi, chúng ta cùng bắt tay vào setup môi trường để có thể bắt đầu tìm hiểu sâu hơn về JavaScript nào.
Đầu tiên trong series này, tôi khuyến khích các bạn nên dùng trình duyệt chrome để chạy các demo code của mình. Bởi vì chrome có rất nhiều tiện ích mở rộng (extension), giúp các bạn rất nhiều trong việc code cũng như debug sau này. Nếu các bạn chưa cài thì có thể vào đây để tải và cài đặt nè.
Để viết code tôi dùng Visual studio code, đây là một trình soạn thảo code khá nổi tiếng đến từ ông lớn Microsoft được cộng đồng dev trên toàn thế giới dùng. Nó có một kho extension đồ sộ, support rất tốt cho quá trình code của chúng ta được nhanh và gọn hơn rất nhiều. Nếu các bạn chưa cài thì có thể vào đây để tải và cài đặt nhé.
Sau khi cài đặt xong ta có giao diện Visual studio code như hình:
Để chạy mã nguồn, tôi sử dụng tiện ích mở rộng Live Server. Tiện ích này tạo một máy chủ cục bộ ngay trên máy tính của tôi, giúp chạy mã nguồn trực tiếp cho cả các trang web tĩnh và động. Đồng thời, khi tôi thay đổi mã nguồn, nó tự động làm mới trang trình duyệt mà không cần nhấn F5 như trước đây. Rất thuận tiện, đúng không?
Để cài đặt bạn làm theo như hình là được:
(Khi cài đặt Visual studio code thì nó không có background glass như hình đâu nhé, nếu bạn thích UI như của mình thì có thể tải extension Vibrancy nhé.)
Sau khi cài đặt xong hết rồi thì chúng ta cùng thử một ví dụ nhỏ nào.
Tạo một thư mục tên first-project và mở nó bằng Visual studio code
Tạo tiếp file index.html và thêm code HTML vào như hình:
Để thêm code HTML nhanh thì bạn hãy cài extension HTML CSS Support, sau đó gõ dấu ! sau đó nhấn tổ hợp phím ctrl + space → enter sẽ ra nhé.
Thêm đoạn code HTML như hình sau đó click vào chữ Go live như hình:
Nó sẽ tự mở trình duyệt mặc định của máy và hiển thị web, ta được output như hình:
Nhấn vào button Click me và ta được kết quả:
Thành công rồi đấy, đơn giản đúng không nào?
3. Tổng kết
Qua bài viết này, hy vọng bạn sẽ hiểu hơn về JavaScript, những chuyện bên lề của nó cũng như setup môi trường cho việc học JavaScript. Bài viết tiếp theo mình sẽ hướng dẫn các bạn về các câu lệnh console và thực hiện trên công cụ devtool nhé.
