JavaScript Where To

by GokiSoft.Com - 10:00 20/05/2020 3,093 Lượt Xem

Thẻ <script>

Trong HTML, JavaScript code được đưa vào giữa thẻ <script> và </script>.

ví dụ

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>

Tip: Các ví dụ JavaScript cũ có thể dùng loại thuộc tính: <script type="text/javascript">.

Thuộc tính loại không bắt buộc. JavaScript là ngôn ngữ kịch bản mặc định trong HTML.

JavaScript Functions (hàm) và Events (sự kiện)

Một JavaScript `function(hàm)` là một khối lệnh(code) JavaScript, có thể được thực thi khi được "gọi"

đến.

Ví dụ, một hàm có thể được gọi khi một sự kiện xảy ra, như khi người dùng bấm vào một nút.

Tip: Bạn sẽ học hỏi nhiều hơn nữa về hàm và sự kiện trong chương sau.

JavaScript trong <head> hoặc <body>

Bạn có thể đặt bất kì số lượng tập lệnh(scripts) trong một tài liệu HTML.

Các tập lệnh(scripts) có thể đặt trong phần <body>, hoặc phần <head> của trang HTML,

hoặc trong cả hai.

JavaScript trong <head>

Trong ví dụ này, một function(hàm) JavaScript được đặt trong phần <head> của trang HTML.

Hàm được gọi khi nút được bấm:

ví dụ

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

JavaScript trong <body>

Trong ví dụ này, function(hàm) JavaScript được đặt trong phần <body>của trang HTML.

Hàm được gọi khi nút được bấm:

ví dụ

<!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Tip: Đặt các tập lệnh(scripts) ở dưới cùng của thẻ <body> sẽ cải thiện tốc độ hiển thị, vì tập lệnh khi biên dịch sẽ làm chậm quá trình hiển thị.

External(bên ngoài) JavaScript

Các tập lệnh(scripts) có thể đặt trong những file bên ngoài:

External file: myScript.js

function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Các tập lệnh(scripts) ở bên ngoài hữu dụng khi một dòng code được sử dụng trong nhiều trang web khác nhau.

JavaScript files có phần mở rộng là .js

Để dùng một tập lệnh(scripts) bên ngoài, cho tên của file chứa các tập lệnh(scripts) vào trong thuộc tính src (nguồn) của thẻ <script>:

<script src="myScript.js"></script>

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

Bạn có thể đặt các tập lệnh(scripts) bên ngoài trong <head>hoặc <body> theo cách của bạn.

Các tập lệnh(scripts) sẽ được xử lý như thể nó được đặt chính xác nơi đặt thẻ <script>.

Tip: Các scripts ở bên ngoài không thể chứa thẻ <script>.

Các lợi ích của External JavaScript

Đặt các tập lệnh(scripts) ở các tệp bên ngoài có một số lợi ích:

- Nó chia cắt HTML và code

- Nó làm cho HTML và JavaScript dễ dàng hơn để đọc và duy trì

- Bộ đệm(cached) của các tệp JavaScript có thể làm tăng tốc độ tải trang.

Để thêm vào một vài cách tập lệnh tới một trang - dùng một số thẻ script sau:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

External References(tham chiếu)

Các tập lệnh(scripts) mở rộng có thể được tham chiếu bằng một URL tuyệt đối hoặc với một đường dẫn liên quan tới trang web hiện tại.

Đây là một ví dụ dùng một đường dẫn URL tuyệt đối để liên kết tới một tập lệnh(scripts).

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

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called "myScript.js")</p>

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

</body>
</html>

Đây là một ví dụ dùng một tập lệnh được đặt vị trí trong một thư mục cụ thể trên trang web hiện tại:

ví dụ

<script src="/js/myScript1.js"></script>

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called "myScript.js")</p>

<script src="/js/myScript.js"></script>

</body>
</html>

Đây là một ví dụ liên kết tới một tập lệnh(scripts) được đặt trong cùng thư mục với trang hiện tại:

ví dụ

<script src="myScript1.js"></script>

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

Ứng Dụng Học

Theo dõi cập nhật nội dung học trên Youtube & Facebook

Thông Tin Liên Hệ

Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.

Website: https://gozic.vn

SĐT: 096 - 70 25 996

Email: ziczacgroup@gmail.com

Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website

Tags:

javascript khoa hoc javascript khóa học javascript tài liệu javascript

Bình luận

Tôi muốn xem code từ thành viên khác

Tài Liệu Tham Khảo

Ứng Dụng Tiện Ích

MD5 Chuyển Đổi Chữ Hoa - UpperCase JSON Editor Coding Online Database Diagram Fake API Base64

Tài Liệu Học

Khai báo biến & hàm mặc định trong Javascript

Mệnh đề điều kiện

Vòng lặp for, while, do..while

Array & Function & Object

Xử lý sự kiện & thao tác thẻ HTML

Lưu trữ Javascript

Examination & Ôn Tập Tổng Quát