, August 01, 2021

0 kết quả được tìm thấy

Javascript: Giới thiệu và hướng dẫn setup môi trường


  •   6 min reads
Javascript: Giới thiệu và hướng dẫn setup môi trường

Hiện nay, với sự phát triển của công nghệ và kỹ thuật dẫn đến tiềm năng phát triển trong mảng lập trình rất cao. Trong những năm gần đây, Mảng lập trình Frontend đặt biệt là Frontend web vô cùng phát triển nhờ vào mức thu nhập của công việc mang lại, khiến cho người người, nhà nhà đổ xô đi học lập trình Frontend web tại các trung tâm.

Tuy nhiên, nhiều bạn mới học sẽ gặp khó khăn để có thể “hấp thu” được kiến thức JavaScript trong quá trình học dẫn đến dễ chán nản. Nhưng đừng lo, trong series về JavaScript này, tôi sẽ giúp bạn hiểu và nắm rõ về nó. Chúng ta bắt đầu thôi!

1. Giới thiệu về JavaScript.

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 dành cho việc tạo và phát triển web. Nó được nhúng vào trong file HTML giúp cho website trở nên sống động và đẹp hơn. JavaScript có thể cập nhật và thay đổi cả HTMLCSS.

Một ứng dụng thực tế mà ta dễ thấy nhất của JavaScript đó là các animation, pop-up quảng cáo, autocomplete khi search,… tất cả đều một tay JavaScript thực hiện.

JavaScript còn là một ngôn ngữ lập trình đa nền tảng, ngoài dành cho việc lập trình frontend trên nền tảng web ra thì nó còn được sử dụng cho việc lập trình và phát triển ứng dụng trên nền tảng mobile.

Ngày nay, JavaScript có thể thực thi không chỉ trong trình duyệt mà còn trên server hoặc bất kỳ thiết bị nào có chương trình đặc biệt gọi là JavaScript engine.

Với những ưu điểm của mình mà JavaScript được các ông lớn như Google, Facebook,… hỗ trợ trong việc phát triển để cho ra đời các library hay framework JavaScript nổi tiếng hiện nay như:

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).

ReactJS: Tìm hiểu thông qua ví dụ
ReactJS là gì? Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về ReactJS thông qua một vài ví dụ đơn giản, giúp bạn dễ nắm bắt và hiểu hơn về cách hoạt động của ReactJS.

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:

Hướng dẫn setup môi trường

Để run code, tôi dùng extension Live Server, extension này tạo một local host ngay dưới máy mình giúp run code một cách trực tiếp cho cả các trang web tĩnh hay web động, đồng thời khi ta thay đổi code thì nó cũng tự động reload trang của chúng ta trên trình duyệt mà không cần phải nhấn F5 như trước đây. Quá tiện lợi phải không nào?

Để cài đặt bạn làm theo như hình là được:

Hướng dẫn setup môi trường

(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

Hướng dẫn setup môi trường

Tạo tiếp file index.html và thêm code HTML vào như hình:

Hướng dẫn setup môi trường

Để 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:

Hướng dẫn setup môi trường

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:

Hướng dẫn setup môi trường

Nhấn vào button Click me và ta được kết quả:

result output

Thành công rồi đấy, đơn giản đúng không nào?

JavaScript ES2021: Những điều có thể bạn chưa biết?
JavaScript ES2021 hay ES12 cuối cùng cũng được ra mắt, theo đó là các thông số kỹ thuật mới cũng được trình làng. Vậy trong phiên bản lần này có những thay đổi gì mới? Có những tính năng mới đáng giá 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é.

Bài viết cùng seri

Bài viết liên quan

Tìm hiểu về HOF và Currying trong JavaScript

Ở bài trước, chúng ta đã cùng nhau tìm hiểu về function trong JavaScript là như thế nào rồi. Đó...

Tìm hiểu về HOF và Currying trong JavaScript
Function trong JavaScript

Chắc hẳn nhiều bạn từng học qua các ngôn ngữ lập trình khác cũng đã biết về khái niệm function...

Function trong JavaScript
Vòng lặp trong JavaScript

Nhắc đến vòng lặp thì hầu hết các ngôn ngữ lập trình nào cũng có và JavaScript thì cũng không...

Vòng lặp trong JavaScript
Khai báo biến, scope và hoisting trong JavaScript

Ở bài trước, chúng ta đã cùng nhau tìm hiểu về các kiểu dữ liệu trong JavaScript cũng như biết...

Khai báo biến, scope và hoisting trong JavaScript
Các câu trúc lệnh điều khiển trong Javascript

Chúng ta cùng nhau tìm hiểu cấu trúc lệnh điều khiển hay if...else và switch...case trong JavaScript sẽ như thế nào nhé....

Các câu trúc lệnh điều khiển trong Javascript
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.