Skip to main content

Bài 3: Vị trí đặt Javascript trong HTML

Javascript rất linh hoạt để thêm vào một file HTML, tuy nhiên dưới đây là một số cách thường hay được sử dụng để chèn, thêm Javascript vào:

  • Đặt trong cặp thẻ <head> ... </head>
  • Đặt trong cặp thẻ <body> ... </body>
  • Đặt trong cặp thẻ <head> ... </head> và <body> ... </body>
  • Viết javascript trong một file .js bên ngoài và chèn vào cặp thẻ <head> ... </head>
Bài 3: Vị trí đặt Javascript trong HTML
Bài 3: Vị trí đặt Javascript trong HTML

Javascript trong cặp thẻ <head> ... </head>:

<html>
   <head>  
      <script type="text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>    
   </head>  
   <body>
      <input type="button" onclick="sayHello()" value="Say Hello" />
   </body>  
</html>

Javascript trong cặp thẻ <body> ... </body>:

Trong trường hợp bạn cần tạo ra nội dung hiển thị ngay trên trang thì sẽ đặt script vào cặp thẻ
Viết đoạn code sau đây và thử chạy để xem kết quả:
<body> ... </body>
<html>
   <head>
   </head>
   <body>
      <script type="text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
     
      <p>This is web page body </p>
   </body>
</html>

Javascript trong cặp thẻ <head> và <body>:

Bạn có thể đặt Javascript vào cặp thẻ <head> và <body> như sau: 
<html>
   <head>
      <script type="text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   <body>
      <script type="text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      <input type="button" onclick="sayHello()" value="Say Hello" />
   </body>
</html>

Javascript từ một file bên ngoài:

Khi bạn có một lượng code Javascript lớn thì việc chèn trực tiếp vào file HTML có thể làm cho file HTML nhiều lên gây rối rắm và khó quản lý được. Vì vậy có một cơ chế cho phép việc lưu trữ Code từ một file bên ngoài và được thêm vào file HTML một cách dễ dàng là sử dụng thẻ <script...>.

Dưới đây là một ví dụ cho các bạn cách để thêm một file Javascript từ bên ngoài vào file HTML:
<html>
   <head>
      <script type="text/javascript" src="filename.js" ></script>
   </head>
   <body>
      .......
   </body>
</html>
Trong đó filename.js là file javascript được tạo và lưu trữ ở bên ngoài.
Lưu ý khi viết code javascript vào file .js thì bạn không cần sử dụng cặp thẻ <script type="text/javascript> ... </script>

Trên đây là bài viết hướng dẫn cách đặt Javascript trong file HTML. Bất cứ thắc mắc về bài hướng sẽ được giải đáp bằng cách comment vướng mắc của bạn ở phía dưới.

Comments

Popular posts from this blog

Bài 4: Biến trong Javascript

Các kiểu dữ liệu của Javascript: Một trong những đặc điểm cơ bản nhất của một ngôn ngữ lập trình là các kiểu dữ liệu. Những kiểu dữ liệu này là loại những giá trị có thể được biểu diễn và áp dụng trong ngôn ngữ lập trình. Javascript cho phép bạn làm việc với 3 kiểu dữ liệu nguyên thủy, đó là: Numbers: Đại diện cho dữ liệu kiểu số Strings: Đại điện cho dữ liệu kiểu chuổi văn bản. Boolean: Có hai giá trị là True và False. Javascript cũng định nghĩa ha kiểu dữ liệu nữa đó là null và undefined  , chúng có một giá trị đơn. JavaScript hỗ trợ một kiểu dữ liệu tổng hợp được gọi là đối tượng. Chúng ta sẽ đề cập chi tiết các đối tượng trong một bài khác. Lưu ý: Javascript không tạo ra khoảng cách giữa những giá trị integer và những giá trị floating-point. Tất cả số trong Javascript được coi như là dữ liệu floating-point (ví dụ: 123,132.4).

Bài 2: Bật Tắt Javascript trên các trình duyệt

Để Javascript có thể hoạt động trên trình duyệt thì yêu cầu đặt ra đó là trình duyệt đó phải hỗ trợ Javascript. Đa số các trình duyệt hiện đại hiện nay đều làm được việc đó. Trong bài này mình sẽ trình bày cho các bạn cách để bật tắt trình hỗ trợ chạy Javascript trên trình duyệt Chrome, Firefox, Internet Explore.

Algorithms: Tower of Hanoi

Có 3 chiếc cọc được đánh dấu lần lượt là A, B, C và n chiếc đĩa. Các đĩa này có kích thước khác nhau và mỗi đĩa đều có một lỗ ở giữa để cắm vào cọc. Ban đầu, các đĩa đều nằm ở cọc A, trong đó, đĩa nhỏ luôn nằm trên đĩa lớn hơn. Solution: