Liên hệ
Ủng hộ, đăng ký theo dõi kênh

Giới thiệu về JavaScript và đoạn mã JavaScript đầu tiên

Tìm hiểu khái niệm cơ bản về JavaScript để viết các Script trong tài liệu HTML

JavaScript là gì

JavaScript là một ngôn ngữ lập trình được sử dụng để tương tác với các trang web, xử lý dữ liệu và tạo ra một số ứng dụng (trên điện thoại, tạo game ...).

Viết mã JavaScript đầu tiên

Cách đầu tiên là mã JavaScript được viết nhúng trong văn bản HTML bằng cách sử dụng thẻ <script>

<script>
    //.. mã JavaScript ở đây
</script>

Thẻ <script> này bạn có thể đặt bên trong thẻ <head> hoặc <body> của văn bản HTML

<html>
    <head>    
    </head>
    
    <body>
        <script>
        
        </script>
    </body>
</html>

Chương trình Hello world! JavaScript

Chương trình sau sẽ viết dòng chữ Hello World! ở cửa sổ trình duyệt.

<html>
   <head> </head>
   <body>
     <script>
       document.write("Hello World!");
     </script>
   </body>
</html> 

Hàm document.write() để viết một chuỗi ra văn bản HTML. Hàm này có thể sử dụng để xuất văn bản, mã HTML hoặc cả hai. Ví dụ định dạng văn bản viết ra bằng thẻ HTML

<html>
   <head> </head>
   <body>
     <script>
       document.write("<h1>Hello World!</h1>");
     </script>
   </body>
</html>

Ngoài cách nhúng mã JavaScript bằng cách đặt thẻ <script> trong <body> như ví dụ trên, còn có thể đặt trong thẻ <head>, ví dụ như:

<html>
   <head>
     <script>
        //...Mã script
     </script>
   </head>
   <body>
   </body>
</html> 

Ý tưởng đặt thẻ <script> trong thẻ <body> và đặt ở cuối (gần thẻ đóng body) là rất tốt vì nó cải thiện tốc độ hiện thị trang.

Hàm alert

Bạn có thể sử dụng hàm alert() để hiện thị một hộp thoại (popup) thông báo.

<script type="text/javascript">
    alert("Đây là một thông báo!");
</script>

Trong ví dụ trên thẻ <script> có thuộc tính type="text/javascript", đây là theo chuẩn cũ, từ HTML5 trở đi thì không cần dùng đến.

Tải mã JavaScript từ file ngoài

Mã JavaScript có thể không cần viết trực tiếp cùng với file văn bản HTML. Các mã này được viết trong một file, thường file này có đặt tên với phần mở rộng là .js

Ví dụ mã JavaScript viết trong file demo.js sau đó file đó được nhúng vào HTML bằng thẻ <script> và vị trí file chỉ ra trong thuộc tính src

Bạn dùng trình soạn thảo code (notepad++)tạo file demo.js có nội dung như sau:

alert("Đây là hộp thoại!");

Chú ý ở file ngoài demo.js không có thẻ script

Sau đó bạn có thể nhúng file đó vào HTML bằng mã:

<html>
   <head>
     <title> </title>
     <script src="demo.js"></script>
   </head>
   <body>
   </body>
</html>

Mã tải file ngoài trên bạn có thể đặt trong head hoặc body, bạn đặt ở vị trí nào mà mã JavaScript được chạy.

Sử dụng cách load JavaScript từ file ngoài có một số lợi ích

  • Phân chia độc lập giữa mã HTML và JavaScript để dễ đọc hơn
  • Giúp cho mã HTML và JavaSript dễ bảo trì hơn
  • Giúp trình duyệt cached file JavaScript để tăng tốc trang.

Chú thích trong JavaScript

Chú thích trong JavaScript (các chữ, mã không không được thi hành). Bạn có thể viết một dòng chú thích sau ký hiệu // hoặc nhiều dòng chú thích nằm giữa /* chú thích ... */

<script>
   // Đây là một chú thích
   
   alert("Hộp thoại!");
   
      /* Đây là các
   dòng chú thích
   trong JavaScript */
   
</script>

Vui lòng đăng ký ủng hộ kênh