NTM Solutions

Thứ Bảy, 11 tháng 9, 2021

TỰ HỌC JAVASCRIPT- BÀI 02: Mã JavaScript đặt ở đâu

Mục lục học JavaScript

1.Thẻ <script>

Trong tập tin HTML, đoạn mã JavaScript được chèn giữa cặp thẻ <script></script>

Trong các phiên bản cũ có thể khai báo thêm như sau: <script type="text/javascript">

Hiện nay thì JavaScript đã là mặc định trong HTML nên cũng không cần khai báo như vậy.


<!DOCTYPE html>

<html>

<head>

<title>Tự học JavaScript</title>

</head>

<body>

<h1>JavaScript trong phần body</h1>

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

<script>

document.getElementById("demo").innerHTML = "Chụt chụt chụt JavaScript!!!";

</script>

</body>

</html>



2.JavaScript trong HÀM và SỰ KIỆN

01 hàm JavaScript là 01 khối lệnh JavaScript được thực thi khi gọi đến.

Ví dụ 01 hàm có thể được gọi đến khi xảy ra sự kiện nhấp chuột lên nút A (sự kiện onclick).


3.JavaScript trong thẻ <head>

Trong ví dụ sau hàm myFunction() sẽ được gọi khi ta bấm chuột vào nút => chèn dòng chữ “Xin chào JavaScript!!!” vào thẻ có id="demo"


<!DOCTYPE html>

<html>

<head>

<title>Tự học JavaScript</title>

<script>

function myFunction(){

document.getElementById("demo").innerHTML = "Xin chào JavaScript!!!";

}

</script>

</head>

<body>

<h1>JavaScript trong phần head</h1>

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

<button type="button" onclick="myFunction()">Bấm vào đây!!!</button>

</body>

</html>


4.JavaScript trong thẻ <body>

Kết quả cũng tương tự nếu ta lấy lại ví dụ trên nhưng đưa đoạn code sau xuống dưới nút <button>

<script>

function myFunction(){

document.getElementById("demo").innerHTML = "Xin chào JavaScript!!!";

}

</script>


5.JavaScript đặt trong file riêng

+Tạo 01 tập tin tên myScript.js

+Gõ vào đoạn code sau:

function myFunction(){

document.getElementById("demo").innerHTML = "Xin chào JavaScript!!!";

}

+Đặt đoạn code sau trong cặp thẻ <head> hoặc <body>

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


+Đoạn code sẽ được chèn chính xác tại vị trí của cặp thẻ <script>

Chú ý: đoạn mã trong tập tin .js không được có cặp thẻ <script>


01 số ưu điểm khi đặt mã JavaScript riêng ra tập tin .js

  1. Tách biệt mã HTMLJavaScript.

  2. Dễ đọc lại mã và bảo trì hơn.

  3. Tăng tốc độ tải trang (do tập tin .js nếu đã tải xuống máy người dùng rồi sẽ không tải lại nữa)


Ta có thể chèn nhiều tập tin chứa mã JavaScript trong 01 tập tin HTML

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

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


Nếu vẫn chưa rõ các bạn xem thêm video clip sau:



By #drM

Nguồn w3schools

Mục lục học JavaScript

Không có nhận xét nào:

Đăng nhận xét

Facebook Youtube RSS