ADVERTISEMENT
  • Trang chủ
  • Tin Tức
  • Liên hệ
Thứ Hai, Tháng Sáu 5, 2023
Tin Tức Giáo Dục Học Tập Tiny
No Result
View All Result
  • Giáo Án
  • Học Tập
    • Lớp 1
    • Lớp 2
    • Lớp 3
    • Lớp 4
    • Lớp 5
    • Lớp 6
    • Lớp 7
    • Lớp 8
    • Lớp 9
    • Lớp 10
    • Lớp 11
    • Lớp 12
  • Sách Tham Khảo
    • Sách Tham Khảo Lớp 1
    • Sách Tham Khảo Lớp 2
    • Sách Tham Khảo Lớp 3
    • Sách Tham Khảo Lớp 4
    • Sách Tham Khảo Lớp 5
    • Sách Tham Khảo Lớp 6
    • Sách Tham Khảo Lớp 7
    • Sách Tham Khảo Lớp 8
    • Sách Tham Khảo Lớp 9
    • Sách Tham Khảo Lớp 10
    • Sách Tham Khảo Lớp 11
    • Sách Tham Khảo Lớp 12
  • Ôn Thi
    • Thi THPT Quốc Gia
    • Địa Lý
    • Giáo Dục Công Dân
    • Hóa Học
    • Lịch Sử
    • Ngoại Ngữ
    • Ngữ Văn
    • Sinh Học
    • Vật Lý
    • Toán Học
  • Sách Kinh Tế
  • Sách Ngoại Ngữ
    • Tiếng Nhật
    • Tiếng Pháp
    • Tiếng Trung
  • Biểu mẫu
    • Giáo dục – Đào tạo
  • Sách Văn Học
  • Sách Y Học
  • Tài Liệu
    • Thủ tục hành chính
    • Việc làm – Nhân sự
    • Y học
    • Bộ đội – Quốc phòng – Thương binh
    • Doanh nghiệp
    • Giáo dục – Đào tạo
    • Giao thông vận tải
    • Hôn nhân – Gia đình
    • Quyền Dân sự
    • Tin Tức
  • Tâm Lý & Kỹ Năng
  • Giáo Án
  • Học Tập
    • Lớp 1
    • Lớp 2
    • Lớp 3
    • Lớp 4
    • Lớp 5
    • Lớp 6
    • Lớp 7
    • Lớp 8
    • Lớp 9
    • Lớp 10
    • Lớp 11
    • Lớp 12
  • Sách Tham Khảo
    • Sách Tham Khảo Lớp 1
    • Sách Tham Khảo Lớp 2
    • Sách Tham Khảo Lớp 3
    • Sách Tham Khảo Lớp 4
    • Sách Tham Khảo Lớp 5
    • Sách Tham Khảo Lớp 6
    • Sách Tham Khảo Lớp 7
    • Sách Tham Khảo Lớp 8
    • Sách Tham Khảo Lớp 9
    • Sách Tham Khảo Lớp 10
    • Sách Tham Khảo Lớp 11
    • Sách Tham Khảo Lớp 12
  • Ôn Thi
    • Thi THPT Quốc Gia
    • Địa Lý
    • Giáo Dục Công Dân
    • Hóa Học
    • Lịch Sử
    • Ngoại Ngữ
    • Ngữ Văn
    • Sinh Học
    • Vật Lý
    • Toán Học
  • Sách Kinh Tế
  • Sách Ngoại Ngữ
    • Tiếng Nhật
    • Tiếng Pháp
    • Tiếng Trung
  • Biểu mẫu
    • Giáo dục – Đào tạo
  • Sách Văn Học
  • Sách Y Học
  • Tài Liệu
    • Thủ tục hành chính
    • Việc làm – Nhân sự
    • Y học
    • Bộ đội – Quốc phòng – Thương binh
    • Doanh nghiệp
    • Giáo dục – Đào tạo
    • Giao thông vận tải
    • Hôn nhân – Gia đình
    • Quyền Dân sự
    • Tin Tức
  • Tâm Lý & Kỹ Năng
No Result
View All Result
Tin Tức Giáo Dục Học Tập Tiny
No Result
View All Result
ADVERTISEMENT

Trang chủ » Blog » Hướng dẫn nhúng javascript vào html

Hướng dẫn nhúng javascript vào html

Sam Van by Sam Van
27 Tháng Mười, 2022
in Blog
0
Hướng dẫn nhúng javascript vào html
ADVERTISEMENT
ADVERTISEMENT
Cách tính đơn giá tiền lương theo doanh thu

Home » Web Development » Học JavaScript Cơ Bản

Có thể bạn quan tâm
  • Hướng dẫn excel convert text to html – excel chuyển đổi văn bản sang html
  • Tình hình kinh tế – xã hội nghệ an
  • 5 isoamyl tốt nhất, đừng bỏ qua
  • 4 1 tuần có bao nhiêu ngày hay nhất
  • 4 ý nghĩa của việc đứng dậy sau vấp ngã hot nhất

07/11/2021 29404 lượt xem

Bạn Đang Xem: Hướng dẫn nhúng javascript vào html

Hướng dẫn nhúng javascript vào html

Nhúng (chèn) JavaScript vào HTML – ảnh minh họa

Tương tự như với CSS, dưới đây mình sẽ lần lượt hướng dẫn bạn 03 cách để nhúng (chèn) JavaScript vào HTML. Tùy trường hợp mà bạn sẽ vận dụng cách tương ứng.

MỤC LỤC NỘI DUNG

  • 1 Cách nhúng (chèn) JavaScript vào HTML
    • 1.1 Cách một, nhúng JavaScript kiểu Internal
    • 1.2 Cách hai, nhúng JavaScript kiểu inline
    • 1.3 Cách ba, nhúng JavaScript kiểu External
    • 1.4 Nhúng kiểu External References
    • 1.5 Nhúng nhiều file kiểu
      External
    • 1.6 Bài học trước tiếp theo

Xem Tắt

Cách nhúng (chèn) JavaScript vào HTML

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> .

Xem Thêm : Tham Khảo 7 mướp đắng bao nhiêu calo tốt nhất, đừng bỏ lỡ

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>
  • 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>

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>

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>

Xem Thêm : Cách tính đơn giá tiền lương theo doanh thu

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 !");

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>

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>

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>

Đố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

About The Author

Tịnh Nguyễn

Học Bạn.vn là blog chia sẻ kinh nghiệm, thủ thuật về WordPress  và Web
Development
hướng đến người làm web không chuyên | Chủ yếu là giúp mọi người giải quyết các vấn đề nhỏ khi làm web với WordPress | Tịnh Nguyễn cảm ơn anh chị em đã ỦNG HỘ giúp Hocban.vn có thêm nguồn lực để phát triển.

Nguồn: https://quatangtiny.com
Danh mục: Blog

Liên Quan:

Cách qua môn triết học mác – lêninCách qua môn triết học mác – lênin Tác giả cuốn văn học sử phổ thông bằng chữ quốc ngữTác giả cuốn văn học sử phổ thông bằng chữ quốc ngữ Chúng ta đáng yêu như The ReviewChúng ta đáng yêu như The Review Kế hoạch dạy học môn Thể dục 9 năm 2022 – 2023Kế hoạch dạy học môn Thể dục 9 năm 2022 – 2023
Tags: Hướng dẫn nhúng javascript vào html
ADVERTISEMENT
Previous Post

Top 10 phim hàn học đường năm 2022

Next Post

Văn mẫu lớp 9: Nghị luận xã hội về hiện tượng thần tượng của giới trẻ

Related Posts

Danh sách 4 cách đăng ký 4g viettel 1 ngày 3k tốt nhất, bạn nên biết
Blog

Danh sách 4 cách đăng ký 4g viettel 1 ngày 3k tốt nhất, bạn nên biết

5 Tháng Sáu, 2023
4 cách thay đầu tông đơ hot nhất, bạn nên biết
Blog

4 cách thay đầu tông đơ hot nhất, bạn nên biết

5 Tháng Sáu, 2023
6 lệnh cheat ark hay nhất, bạn nên biết
Blog

6 lệnh cheat ark hay nhất, bạn nên biết

5 Tháng Sáu, 2023
4 khái niệm muối hay nhất, đừng bỏ lỡ
Blog

4 khái niệm muối hay nhất, đừng bỏ lỡ

5 Tháng Sáu, 2023
Danh sách 4 cách để chế độ công khai trên facebook tốt nhất, đừng bỏ lỡ
Blog

Danh sách 4 cách để chế độ công khai trên facebook tốt nhất, đừng bỏ lỡ

5 Tháng Sáu, 2023
7 động lượng là đại lượng vectơ hay nhất
Blog

7 động lượng là đại lượng vectơ hay nhất

5 Tháng Sáu, 2023
Next Post
Văn mẫu lớp 9: Nghị luận xã hội về hiện tượng thần tượng của giới trẻ

Văn mẫu lớp 9: Nghị luận xã hội về hiện tượng thần tượng của giới trẻ

Bài Viết Mới

Danh sách 4 cách đăng ký 4g viettel 1 ngày 3k tốt nhất, bạn nên biết
Blog

Danh sách 4 cách đăng ký 4g viettel 1 ngày 3k tốt nhất, bạn nên biết

by Tiny Edu
5 Tháng Sáu, 2023
0

Trong bài viết này chúng tôi sẽ giúp các bạn tìm hiểu thông tin và kiến thức về cách đăng...

Read more
4 cách thay đầu tông đơ hot nhất, bạn nên biết

4 cách thay đầu tông đơ hot nhất, bạn nên biết

5 Tháng Sáu, 2023
6 lệnh cheat ark hay nhất, bạn nên biết

6 lệnh cheat ark hay nhất, bạn nên biết

5 Tháng Sáu, 2023
4 quả trứng có trước hay con gà có trước hay nhất, đừng bỏ lỡ

4 quả trứng có trước hay con gà có trước hay nhất, đừng bỏ lỡ

5 Tháng Sáu, 2023
4 khái niệm muối hay nhất, đừng bỏ lỡ

4 khái niệm muối hay nhất, đừng bỏ lỡ

5 Tháng Sáu, 2023
5 fabulous là gì tốt nhất

5 fabulous là gì tốt nhất

5 Tháng Sáu, 2023
Danh sách 6 cấu trúc với it was not until hay nhất hiện nay

Danh sách 6 cấu trúc với it was not until hay nhất hiện nay

5 Tháng Sáu, 2023
Tổng hợp 4 trị voi một ngà dựng cờ mở nước tốt nhất, bạn nên biết

Tổng hợp 4 trị voi một ngà dựng cờ mở nước tốt nhất, bạn nên biết

5 Tháng Sáu, 2023
5 bảng hóa trị lớp 8 trang 43 hot nhất, đừng bỏ qua

5 bảng hóa trị lớp 8 trang 43 hot nhất, đừng bỏ qua

5 Tháng Sáu, 2023
Danh sách 4 cách để chế độ công khai trên facebook tốt nhất, đừng bỏ lỡ

Danh sách 4 cách để chế độ công khai trên facebook tốt nhất, đừng bỏ lỡ

5 Tháng Sáu, 2023

Phản hồi gần đây

  • Tả cây cam mà em yêu thích (Dàn ý + 7 mẫu) - Tài Liệu Miễn Phí trong Tả một loại cây ăn quả mà em thích (Dàn ý + 70 Mẫu)
  • Mẫu vở luyện viết chữ đẹp - Tài Liệu Miễn Phí trong Mẫu giấy 4 ô ly
  • Bộ đề thi thử vào lớp 10 môn tiếng Anh năm 2018 - 2019 - Tài Liệu Miễn Phí trong Bộ đề thi thử vào lớp 10 môn Toán năm 2018 – 2019
  • Đề thi thử THPT Quốc gia năm 2017 môn Địa lý trường THPT Đoàn Thượng, Hải Dương (Lần 1) - Tài Liệu Miễn Phí trong Đề thi thử THPT Quốc gia năm 2017 môn Địa lý trường THPT Lý Thái Tổ, Bắc Ninh (Lần 1)
  • Đoạn văn tiếng Anh về môn thể thao yêu thích (8 mẫu) - Tài Liệu Miễn Phí trong Đoạn văn tiếng Anh về ngày Tết
ADVERTISEMENT
  • Trang chủ
  • Tin Tức
  • Liên hệ
HOME - TRANG CHU

© 2021 Copyright - Quà Tặng Tiny

No Result
View All Result
  • Giáo Án
  • Học Tập
    • Lớp 1
    • Lớp 2
    • Lớp 3
    • Lớp 4
    • Lớp 5
    • Lớp 6
    • Lớp 7
    • Lớp 8
    • Lớp 9
    • Lớp 10
    • Lớp 11
    • Lớp 12
  • Sách Tham Khảo
    • Sách Tham Khảo Lớp 1
    • Sách Tham Khảo Lớp 2
    • Sách Tham Khảo Lớp 3
    • Sách Tham Khảo Lớp 4
    • Sách Tham Khảo Lớp 5
    • Sách Tham Khảo Lớp 6
    • Sách Tham Khảo Lớp 7
    • Sách Tham Khảo Lớp 8
    • Sách Tham Khảo Lớp 9
    • Sách Tham Khảo Lớp 10
    • Sách Tham Khảo Lớp 11
    • Sách Tham Khảo Lớp 12
  • Ôn Thi
    • Thi THPT Quốc Gia
    • Địa Lý
    • Giáo Dục Công Dân
    • Hóa Học
    • Lịch Sử
    • Ngoại Ngữ
    • Ngữ Văn
    • Sinh Học
    • Vật Lý
    • Toán Học
  • Sách Kinh Tế
  • Sách Ngoại Ngữ
    • Tiếng Nhật
    • Tiếng Pháp
    • Tiếng Trung
  • Biểu mẫu
    • Giáo dục – Đào tạo
  • Sách Văn Học
  • Sách Y Học
  • Tài Liệu
    • Thủ tục hành chính
    • Việc làm – Nhân sự
    • Y học
    • Bộ đội – Quốc phòng – Thương binh
    • Doanh nghiệp
    • Giáo dục – Đào tạo
    • Giao thông vận tải
    • Hôn nhân – Gia đình
    • Quyền Dân sự
    • Tin Tức
  • Tâm Lý & Kỹ Năng

© 2021 Copyright - Quà Tặng Tiny