Chơi cùng JavaScript

Khi học JavaScript bạn thử nghiệm các đoạn code nhỏ bằng các cách nào ?

Thử xem bạn đã dùng cách nào trong các cách sau nhé! 

Cách 1: Chạy chương trình với browser

Tạo file index.html để chứa code của trang web. 

Bạn có thể mở trực tiếp file hoặc “Go Live” với extension “Live Server” trên VSCode. 

Cách 1.1: Viết nội dung JS trong thẻ <script></script>

File index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Central Music</title>
  </head>
  <script>
    console.log('Hello');
  </script>
  <body>
  </body>
</html>

Cách 1.2: Viết nội dung JS file main.js

Viết một file main.js rồi sử dụng làm source, và dùng thuộc tính src của thẻ script truyền đường dẫn đến file main.js để sử dụng

<script src="./main.js"></script>

Cách này thì khá cồng kềnh khi muốn thử nghiệm nhanh một đoạn logic nhỏ. 

Tuy nhiên sẽ cần thiết nếu bạn thực hành liên quan đến DOM, styles.

Cách này không chia sẻ code online được.

Cách 2: Chạy chương trình với nodejs

Cài nodejs trên máy (thường sẽ có sẵn vì dev thường sử dụng npm)

Chạy lệnh “node <filename>.js” ở command line để thực thi

Cách này sẽ tiện hơn nếu muốn chạy một chương trình JS nhỏ không liên quan đến DOM. 

Một tip được bạn hung.dev chia sẻ là có thể sử dụng gói nodemon để tự động load lại khi mình có chỉnh sửa trên file. Cám ơn nha bạn Hưng ^^

Chạy câu lệnh: “npx nodemon example.js” để vừa cài gói nodemon vừa thực thi code.

Bạn sẽ thấy dòng “Hello nodemon” bên dưới là code thực thi sau khi code trong file example.js của mình thay đối.

Cách 3: Sử dụng tab "Console" trên trình duyệt Chrome

Sử dụng browser Chrome, mở Console tab và thử nghiệm trực tiếp trên đó. 

Cách này sẽ rất tiện khi mình muốn kiểm tra nhanh hay demo nhanh các đoạn code hay cú pháp của JS, vì trình duyệt có tích hợp sẵn để dùng. 

Đặc biệt bạn có thể chơi với Web APIs như DOM, … 

Cách 4: Sử dụng snippets

Nhờ một comment trên Viblo post, nhắc mình mới nhớ đến bạn này. 

Snippets dành cho JavaScript trên Chrome là một công cụ mạnh mẽ giúp bạn lưu một đoạn code JS và chạy trên bất cứ trang nào mà không bị mất code khi reload như khi mình viết ở Console.

snippets-js

Bạn có thể tạo một snippets bằng cách vào Sources > Snippets và chọn “+ New snippet”. Để chạy chương trình, bấm Cmd + Enter hoặc nút Run như trên hình.

Đọc thêm document Snippets ở đây.

Cách 5: Sử dụng editor trên trang w3schools.com

Tương tự cách 1 tuy nhiên có thể thực hiện trên w3schools.com vì trên đây có một editor có sẵn để thử nghiệm. 

Dù công cụ này không được hiện đại lắm nhưng việc ôn nhanh kiến thức cơ bản và thử nghiệm ngay tức thì trên trang này cũng rất hữu ích.

Cách 6: Sử dụng javascript.makeup

javascript.markup cũng là một cách để có thể chơi với JS và kết quả cũng khá dễ nhìn.

Cách 7: Các công cụ online giúp viết và chia sẻ chương trình

Một số công cụ online như: JSBin, JSFiddle, Replit 

Các công cụ này thường yêu cầu tài khoản để lưu và chia sẻ chương trình.

JSBin

JSField

Replit

Playcode.io

Trên đây là một số cách mình biết và hay sử dụng.

Còn bạn thì sao, bạn hay thử nghiệm JS như thế nào? 

Cùng chia sẻ với mình bên dưới comment nhé!

Nếu bạn nghĩ những nội dung này là hữu ích, bạn có thể khích lệ mình bằng cách:

Mời mình ☕️ cafe qua Ko-fi hay Momo

Theo dõi 👀 để nhận các bài viết mới trên: Careerly, fanpage, linkedin

Subscribe channel Youtube BeautyOnCode giúp mình với! 

Subscribe channel Youtube BeautyOnCode giúp mình với! 

🤘 Nhắn mình nhé 🤘

Hẹn gặp mọi người một ngày nào đó!

One thought on “Chơi cùng JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

RELATED POST

Cặp đôi hủy diệt code xấu: DRY và Orthogonality

Bạn có nghĩ giai đoạn bảo trì (maintenance) là sau khi chương trình được phát hành (release)? Và trong giai…

Nguyên tắc SOLID trong lập trình hướng đối tượng (OOP) – thực hành cùng ngôn ngữ Python

SOLID là gì? SOLID là 5 nguyên tắc nền tảng trong lập trình hướng đối tượng OOP (Object Oriented Programming),&nbsp;giúp…

Bốn bước để học và viết trong thời gian dài

Bài blog này mình muốn gửi đến 4 bước mình đã làm để có thể duy trì việc học và rèn luyện…

BeautyOnCode đạt top 1 trên Careerly

Time flies! Nhanh thật, vậy là mình đã đồng hành cùng các đọc giả trên Careerly được hơn 6 tháng,…

%d bloggers like this: