Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Viết Hello World Bằng Javascript

Viết Hello World Bằng Javascript


Ngày 2 Tháng 1 Năm 2021

Hôm nay bạn hãy cùng mình sẽ đi tìm hiểu cách sử dụng ngôn ngữ lập trình Javascript để có thể viết được Hello World trong trang web nhé.

Viết Hello World Bằng Javascript

Để thêm một javascript vào một trang HTML thì ta sẽ có hai cách như sau:

  • Bạn có thể chèn trực tiếp vào trong trang HTML.
  • Bạn có thể liên kết với một file JS ở bên ngoài.

Bây giờ ta sẽ đi vào hai cách trên nhé:

Cách Viết Hello World Javascript Trong HTML

Khi đi vào ví dụ thì mình muốn bạn hiểu cú pháp chính của nó ở bên dưới đây đã nhé:

 <script>
   Đoạn mã Javascript bạn muốn thêm
</script>

Ở đây để khi viết Hello World thì mình có 3 hàm với hiển thị ở những vị trí khác nhau tùy vào cách bạn sử dụng nhé:

  • document.write("Hello World"): Hiển thị trên trang web.
  • console.log("Hello World"): Hiển thị bên trong developer tool(trong phần console sau khi bạn nhấn F12 trên trình duyệt).
  • alert("Hello World"): Hiển thị một thông báo trên trình duyệt với dòng chữ Hello World.

Ở đây mình sử dụng hàm console.log("Hello World"), để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

<!DOCTYPE HTML>
<html>
<body>
  <script>
    console.log("Hello world");
  </script>
</body>
</html>

Và kết quả bên dưới nhé:

Ví Dụ Viết Hello World trong console

Và dưới đây là ví dụ mình viết hai hàm còn lại và để xem kết quả bạn nhớ nhấn Result để xem kết quả nhé.

Cách Viết Hello World Javascript Bằng Thuộc Tính src

Trước khi đi vào ví dụ cụ thể thì bạn tạo một cấu trúc thư mục dưới đây nhé.

Cấu trúc thư mục chương trình Hello World Javascript

Tại sao chúng ta lại sử dụng liên kết file javascript bên ngoài?
Trong thực tế, khi viết một trang web đòi hỏi bạn phải có những chức năng chính cho trang web của mình do đó việc có nhiều dòng code Javascript là không thể tránh khỏi. Vì thế chúng ta cần phải chia thành các file nhỏ để dễ quản lý hơn. Còn trong việc học tập thì chúng ta có thể chèn nó trực tiếp vào trong file HTML để tiết kiệm thời gian với việc tạo các file liên kết. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Index.html

<!DOCTYPE HTML>
 <html>
   <body>
     <script src="helloWorld.js"></script>
   </body>
</html>

helloWorld.js

console.log("Hello World")

Kết quả sẽ y chang ở trên nhé. Mình có lưu ý nhỏ là khi bạn dùng các mã nguồn javascript cũ thì sẽ thường thấy thuộc tính dưới đây:

  • Thuộc tính type: <script type=...>: Đối với tiêu chuẩn trong HTML4 cũ thì nó phải yêu cầu có thuộc tính type và hay được sử dụng với giá trị type="text/javascript" nhưng bây giờ thì bạn không cần phải khai báo nữa. Với tiêu chuẩn HTML hiện tại thì ý nghĩa của nó cũng được thay đổi hoàn toàn. Phần nay khi đến mình sẽ nói rõ hơn cho các bạn nhé.
  • Thuộc tính language: <script language=...>: Thuộc tính này giúp hiển thị ngôn ngữ của đoạn script. Nếu bạn sử dụng javascript, thì hiện tại không cần phải khai bao nữa vì nó đã là mặc định.

Nếu thuộc tính src được thiết lập thì đoạn mã trong script sẽ không được thực thi nhé.

Để hiểu rõ hơn mình sẽ có hai đoạn mã sau đây:

Đoạn mã javascript sẽ không hoạt động:

<script src="helloWorld.js">
  console.log(2);
</script>

Nếu bạn muốn hoạt động thì có thể chia thành hai đoạn script như sau:

 <script src="helloWorld.js"></script>
<script>
  alert(2);
</script>

Các JavaScript Syntax Cơ Bản

Tất cả mọi thứ trong Javascript gồm biến, tên hàm, tên class.. thì đều là case-sensitive. Để dễ hiểu hơn mình sẽ ví dụ như sau nếu bạn có hai biến là helloHello thì hai biến này hoàn toàn khác nhau. Và khi bạn đặt tên biến, tên hàm... thì bạn phải đảm bảo yếu tố sau đây:

  • Từ đầu tiên trong tên biến thì phải là chữ (a-z, hoặc A-Z), dấu $ hay dấu gạch dưới (_).
  • Từ các từ tiếp theo trở đi thì có thể là chữ (a-z, A-Z), số (0,9), dấu gạch dưới(_)...

Tiếp theo mình xin nói về một vấn đề nhỏ là trong thực tế làm việc bạn cần phải viết code chung với nhiều người thì lúc đó có thể sử dụng comment để làm rõ hơn các điểm cần chú ý trong đoạn code đó. Nào hãy cùng mình xem ví dụ sau đây nhé:

// Comment dùng cho một dòng
/*
Comment sử dụng cho
nhiều dòng
*/

Vấn đề tiếp theo mà bạn nên lưu ý là javascript không yêu cấu kết thúc lệnh bằng dấu ; nhưng đa số lập trình viên thì đề nghị chúng ta phải luôn luôn sử dụng dấu ; để kết thúc câu lệnh. Vậy tại sao lại cần dấu ; ?
Vì nó sẽ giúp code của bạn dễ đọc hơn và tránh phát sinh những hay vấn đề không đang có trong khi chúng ta lập trình.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn cảm thấy hứng thú khi viết chương trình Hello World, cũng như cú pháp trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!