, October 26, 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

Hướng dẫn clone instagram với React JS và Firebase phần 2.

Trong phần 1 của series này, chúng ta tiến hành setup một project ReactJS bằng câu lệnh create-react-app,đăng ký và tạo app trên firebase để có thể sử dụng và lưu trữ data. Trong phần 2 này, chúng ta sẽ tạo header cho nó và tạo component post để hiển thị bài đăng nhé 😉. Nào bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 2.
Hướng dẫn clone instagram với React JS và Firebase phần 1.

Trong bài viết này, chúng ta sẽ cùng nhau clone một trang mạng xã hội nỗi tiếng, là nơi chia sẽ hình ảnh và video của hàng trăm triệu người trên toàn thế giới, đó chính là Instagram. Chúng ta bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 1.
Number, string, array và object trong JavaScript

Chúng ta đã cùng nhau tìm hiểu các kiểu dữ liệu có trong JavaScript ở bài trước, tuy nhiên chúng ta vẫn chưa biết cách thao tác với chúng như thế nào trong JavaScript, nó có hổ trợ các phương thức nào hay không? Vấn đề đó, chúng ta sẽ cùng nhau tìm hiểu trong bài này nhé 😉....

Number, string, array và object trong JavaScript
Tìm hiểu thêm về Window Object trong Javascript

Nếu các bạn đã xem các bài trước thuộc series JavasScript cơ bản của mình hoặc đã xem các tài liệu khác thì chắc hẵn đã từng thấy trong bài viết có đề cập đến ông thần window object rồi nhỉ 😉. Vậy trong bài này, chúng ta sẽ cùng nhau tìm hiểu về nó để xem window object là loại object như thế nào nhé...

Tìm hiểu thêm về Window Object trong Javascript
Tìm hiểu về "this" trong JavaScript.

Chắc hẵn bạn đã từng nhìn thấy từ this trong một ngôn ngữ lập trình nào trước đó hoặc là trong một vài đoạn code nào đó của JavaScript. Bạn thắc mắc nó có tác dụng gì hoặc là bạn đang mơ hồ về this trong JavaScript. Yên tâm, trong bài này chúng ta sẽ cùng nhau tìm hiểu this có ý nghĩa gì nhé....

Tìm hiểu về "this" 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.