[Học JavaScript] Bài 03: Nhúng JavaScript vào HTML

Tương tự như với CSS, để nhúng JavaScript vào HTML chúng ta có 03 cách dưới đây. Tùy trường hợp mà chúng ta sẽ sử dụng cách tương ứng.

Cách một, nhúng JavaScript kiểu Internal

Nhúng Internal có thể hiểu là chúng ta chèn code JavaScript vào một cụm nào đó trong tập tin HTML. Thông thường thì anh em hay nhóm nó vào trong cặp thẻ <head> và <body> .

Các bạn thử 02 ví dụ nhúng HTML kiểu Internal dưới đây. Các bạn có thể dán code dưới đây vào một file định dạng .html bằng note pad và mở nó bằng trình duyệt để xem.

Nhúng trong cặp thẻ <head>:

<html>
    <head>
        <title>Tiêu đề website</title>
         <script language="javascript">
            alert("Chào mừng bạn đến với Hocban.vn");
        </script>
    </head>
    <body> 
         Nội dung website       
    </body>
</html>

<html>

<head>

<title>Tiêu đề website</title>

alert("Chào mừng bạn đến với Hocban.vn");

</script>

</head>

<body>

Nội dung website

</body>

</html>

Nhúng trong cặp thẻ <body>:

<html>
    <head>
        <title>Tiêu đề website</title>
    </head>
    <body> 
         <script language="javascript">
            alert("Chào mừng bạn đến với Hocban.vn");
        </script>
      Nội dung website       
    </body>
</html>

<html>

<head>

<title>Tiêu đề website</title>

</head>

<body>

alert("Chào mừng bạn đến với Hocban.vn");

</script>

Nội dung website

</body>

</html>

Cách hai, nhúng JavaScript kiểu inline

Đối với cách nhúng inline chúng ta có thể chèn ngay vị trí bất kỳ của một dòng code HTML.Trong ví dụ dưới đây mình sẽ tạo 03 vùng chọn tương ứng với 03 thẻ <div>, trong đó mình chọn thẻ <div> ở giữa là class .vung-chon-tuy-y , và đặt vào nó một đoạn JavaScript cho nó làm việc.

<html>
    <head>
        <style type="text/css">
            .vung-chon-tuy-y{
            background: #fffaca;
            padding: 20px;
            }
        </style>
    </head>
    <body>
        <div> Vùng chọn số 1 </div>
        <div class="vung-chon-tuy-y">
            <h2>Chèn JavaScript kiểu Inline, ví dụ hiển thị thời gian hiện tại</h2>
            <button type="button"
                onclick="document.getElementById('hien-thi-thoi-gian-ra').innerHTML = Date()"> Nhấn vào để xem thời gian</button>
            <p id="hien-thi-thoi-gian-ra"></p>
        </div>
        <div> Vùng chọn số 1 </div>
    </body>
</html>

<html>

<head>

.vung-chon-tuy-y{

background: #fffaca;

padding: 20px;

}

</style>

</head>

<body>

<h2>Chèn JavaScript kiểu Inline, ví dụ hiển thị thời gian hiện tại</h2>

<button type="button"

onclick="document.getElementById('hien-thi-thoi-gian-ra').innerHTML = Date()"> Nhấn vào để xem thời gian</button>

</div>

</body>

</html>

Các bạn dán code vào file html đã tạo và mở trong trình duyệt web để xem nhé ! Ví dụ này nó sẽ hơi dài so với các ví dụ trên mạng mà mọi người thấy khá nhiều. Tuy nhiên nó sẽ thể hiện được rất rõ việc chèn JavaScript kiểu Inline là như thế nào.

Bạn nào đã theo mình nghịch thử trong 02 serie HTML và CSS tại Hocban.vn thì cái này cũng dễ hình dung thôi. Phần nội dung code các bạn không cần quan tâm, chúng ta sẽ tìm hiểu ý nghĩa của chúng trong các bài sau.

Cách ba, nhúng JavaScript kiểu External

Nếu cách một và cách 02 chúng ta nhúng file JavaScript vào trong văn bản HTML thì cách nhúng External sẽ khác một chút, để nhúng kiểu này đầu tiên các bạn dán code JavaScript vào một file txt và lưu lại với định dạng .JS

Tiếp theo trong thẻ <script> , để viết JavaScript thì chúng ta viết đường dẫn đến file JavaScript đã lưu sử dụng cú pháp bên dưới. Bạn có thể tạo một thư mục và copy 02 cái file HTML và JS vào trong đó.

<script language="javascript" src="ten_tap_tin_javascript.js"></script>

1	<script language="javascript" src="ten_tap_tin_javascript.js"></script>

Ví dụ ở đây mình tạo một file JavaScript và dán vào nó đoạn code hiển thị lời chào như sau, tiếp theo đặt tên cho nó là ten-file-javascript, để lưu được file định dạng JS các bạn có thể sử dụng phần mềm Sublime Text.

alert("Chào mừng bạn đến với Hocban.vn !");

1	alert("Chào mừng bạn đến với Hocban.vn !");

Bây giờ nhúng đường dẫn vào trong tập tin HTML với cấu trúc đã đưa ra ở trên, các bạn có thể dán nó vào trong cặp thẻ <head> hay <body> đều được hết nhé !

<html>
    <head>
        <title>Tiêu đề website</title>
    </head>
    <body>
        <script language="javascript" src="ten-file-javascript.js"></script>
        Nội dung website       
    </body>
</html>

<html>

<head>

<title>Tiêu đề website</title>

</head>

<body>

Nội dung website

</body>

</html>

Các bạn làm được không nhỉ ? Vì làm việc với JavaScript có một số hạn chế với Codepen nên mình không khuyến khích dùng nó cho những bài mở đầu này. Các bạn nên dùng Sublime Text để soạn thảo code và chạy trên trình duyệt web như Chrome.

Nhúng kiểu External References

Nhúng từ một file JavaScript có đường dẫn bất kỳ trên Internet, cách này có tên gọi là: External References. Cú pháp của nó có dạng như sau:

<script src="https://www.w3schools.com/js/myScript1.js"></script>

1	<script src="https://www.w3schools.com/js/myScript1.js"></script>

Với cách này bạn có thể upload file JS của mình lên host, copy đường dẫn và thay thế đường dẫn của w3schools trong mẫu ở trên.

Nhúng nhiều file kiểu External

Cái này bạn sử dụng trong trường hợp có nhiều file JS khác nhau, để nhúng vào HTML thì chúng ta sử dụng cấu trúc có dạng như sau:

<script src="ten-file-01.js"></script>
<script src="ten-file-02.js"></script>

1 2	<script src="ten-file-01.js"></script> <script src="ten-file-02.js"></script>

Đối với cách nhúng External thì chúng ta có thêm 02 kiểu bổ sung là nhúng nhiều file JS và nhúng file JS đã upload lên host như trên.

Oke’, như vậy là bài này chúng ta đã tìm hiểu xong một số cách nhúng JavaScript vào HTML rồi đấy, cũng khá là dễ đúng không nào. Bạn nào xem qua, nếu có điều gì thắc mắc hoặc góp ý, hãy để lại bình luận bên dưới nhé !

Bài học trước tiếp theo

Bài 02: JavaScript là gì và ứng dụng của JavaScript
Bài 04: Biến và khai báo biến trong Javascript

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Hocban.vn

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên mà khi người ta đối diện với bạn ấy chỉ có thể thốt lên rằng "Ối dồi ôi, đẹp ZAI quá ! " 😂

08/11/2018 6100 lượt xem 8 bình luận

8 bình luận

Đạt Nguyễn ( 141 bình luận )

Lúc 9:15 AM ngày 07/07/2018

Tìm đc trên google bác, web bác domain quốc gia, tuổi thọ lâu nên index và thứ hạng từ khóa cũng tạm đấy chứ.
Đang làm cái themes : s1.truyenhot.vn
Toàn đi cóp nhặt từng đoạn code trên mạng, đi rip themes, rồi chuyển cấu trúc themes cũ qua. Nhìn lại vẫn mớ hỗn độn nhưng mang đc cái cấu trúc truyện – chương qua cho phù hợp với database truyenhot.vn cũng thành công bước đầu rồi

Trả lời
- Hocban.vn ( 2091 bình luận )
  
  Lúc 9:53 AM ngày 07/07/2018
  
  Bài này nó rùa rùa lên tóp chứ e cũng không có show ra trang chủ, tên miền e mua từ tháng 9/2016 tính ra cũng không lâu lắm, chủ yếu là ăn hên với bài không có cóp bi nên không bị phạt :v
  
  Về phần web thì sao bác vẫn chuyên tâm về làm web truyện đến thế sao ? Bác cũng nên xây dựng cho mình một kênh blog cá nhân đi chứ. Khi nào rảnh viết bài tiếp trên Hocban.vn em bày cho một số trò để cho bài viết nó ngon hơn, để mai mốt bác làm blog cá nhân nó quen tay.
- Đạt Nguyễn ( 141 bình luận )
  
  Lúc 4:09 PM ngày 07/07/2018
  
  Chủ yếu làm thêm cái themes đổi mới chào mừng 1 năm làm web . Cũng bận nên mỗi ngày có tầm 45-1h làm web, toàn ngồi đọc tài liệu rồi thêm vô từng tí…
- Hocban.vn ( 2091 bình luận )
  
  Lúc 4:25 PM ngày 07/07/2018
  
  Ờ, thế thì nốt phát này bác hể :v | Em nghi cái mùi bác lại tiếp tục quẩy VPS với web truyện quá :v
- Đạt Nguyễn ( 141 bình luận )
  
  Lúc 6:44 PM ngày 07/07/2018
  
  Nói về vụ copy- em có hơn 25k bài với 5 triệu chương truyện tính ra là hơn 5 triệu bài toàn đi copy nguyên văn . Học theo thèn Báo Mới đi copy bài thay đổi thẻ class, h1 h2 và định dạng bài theo kiểu khác nên vẫn lên top ầm ầm, có bài đứng trên bài của web đi copy.
  Thời gian ngồi máy tính hiện giờ hơi hạn hẹp nên cũng khó nhìu cái bác ợ
- Hocban.vn ( 2091 bình luận )
  
  Lúc 5:12 AM ngày 08/07/2018
  
  À, nói đến báo mới e nghĩ họ có một thỏa thuận gì đó với các báo kia hết rồi, chứ tiền họ thuê viết bài đã rồi bị copy thì làm sao được.
  
  Còn về truyện/phim như của bác thì hoàn toàn xảy ra, vấn đề là bao giờ vấn đề bản quyền được áp dụng mạnh mẽ sẽ rất khó trụ.
Đạt Nguyễn ( 141 bình luận )

Lúc 2:15 PM ngày 05/07/2018

Cảm ơn bác Tịnh nha, đang làm cái themes mà toàn nhúng script trực tiếp vào php, đang gom hết vô 1 file để load , rồi làm load không đồng bộ cho nhẹ nữa 😀

Trả lời
- Hocban.vn ( 2091 bình luận )
  
  Lúc 9:11 AM ngày 07/07/2018
  
  Bác ở đâu mà chui vào được bài viết này thế ? Bác tìm theo chuyên mục trên Hocban.vn hay bác tìm trên Google ?

[Học JavaScript] Bài 03: Nhúng JavaScript vào HTML

Cách một, nhúng JavaScript kiểu Internal

Cách hai, nhúng JavaScript kiểu inline

Cách ba, nhúng JavaScript kiểu External

Nhúng kiểu External References

Nhúng nhiều file kiểu External

Bài học trước tiếp theo

Hocban.vn

8 bình luận

Viết bình luận theo mẫu (hoặc click vào đây để hủy bình luận)

Viết bình luận theo mẫu