Bài 2. Sử dụng Javscript như thế nào?

bởi | Th6 12, 2022 | Chưa phân loại

Sử dụng thẻ <script>

Trong HTML, mã JavaScript được chèn vào giữa các thẻ <script>và </script>

<!DOCTYPE html>
<html>
<body>
<h2>Mã JavaScript trong body</h2>
<script>
document.write("Xin chào Javascript. Tôi là Wecode");
</script>
</body>
</html>

Các bạn lưu ý ở các phiên bản JavaScript cũ các bạn có thể nhìn thấy thuộc tính type: <script type = “text / javascript”> được sử dụng. Tuy nhiên thuộc tính type làvkhông bắt buộc vì JavaScript là ngôn ngữ kịch bản mặc định trong HTML.

Thẻ <script> được đặt ở đâu?

Chúng ta có ba cách đặt thường được sử dụng sau đây:

Internal – Đặt trong file html hiện tại

Thông thường chúng ta sẽ viết những đoạn mã javascript trên phần head, tuy nhiên đó không phải là điều kiện bắt buộc, nghĩa là bạn có thể đặt ở đâu tùy thích miễn là những đoạn mã đó phải được bao lại bằng thẻ script.

JavaScript trong <head>

Trong ví dụ này, chúng ta in ra 1 câu “Xin chào Javascript. Tôi là Wecode”.

<html>
    <head>
        <title></title>
        <script>
            document.write("Xin chào Javascript. Tôi là Wecode");
        </script>
    </head>
    <body>
    </body>
</html>

Còn ví dụ dưới đây là một hàm – function javascript được đặt trong phần head của file HTML và được gọi khi nút lệnh được bấm chuột.

<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Nội dung đã được thay đổi.";
}
</script>
</head>
<body>
<h2>Ví dụ Javascript đặt trong thẻ head</h2>
<p id="demo">Xin chào tôi là Javascript.</p>
<button type="button" onclick="myFunction()">Bấm để thay đổi!</button>
</body>
</html>

JavaScript trong <body>

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

Hàm được gọi khi một nút lệnh được bấm chuột

<html>
<head>
</head>
<body>
<h2>Ví dụ Javascript đặt trong thẻ head</h2>
<p id="demo">Xin chào tôi là Javascript.</p>
<button type="button" onclick="myFunction()">Bấm để thay đổi!</button>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Nội dung đã được thay đổi.";
}
</script>
</body>
</html>

JavaScript bên ngoài

Các tập lệnh Javascript cũng có thể được đặt ở các tệp tin bên ngoài:

Giả sử chúng ta có file myScript.js được đặt ở bên ngoài

function myFunction() {
  document.getElementById("demo").innerHTML = "Nội dung đã được thay đổi.";
}

Trong thực thế việc sử dụng các tập tin Javascript là rất thường xuyên vì chúng ta có thể sử dụng cùng một mã lệnh cho nhiều trang web khác nhau.

Các tệp JavaScript có phần mở rộng tệp .js

Để sử dụng tập lệnh Javascript bên ngoài, hãy đặt tên của tệp tập lệnh trong thuộc tính src của thẻ <script>:

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

Hãy thử ví dụ sau:

<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">Xin chào tôi là Javascript.</p>
<button type="button" onclick="myFunction()">Bấm để thay đổi!</button>
<p>Ví dụ này liên kết tới file "myScript.js".</p>
<p>(myFunction được viết trong file "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>

Bạn có thể đặt tham chiếu tập lệnh Javascript bên ngoài tại thẻ <head> hoặc <body> tùy ý. Tập lệnh này sẽ hoạt động như thể nó được đặt chính xác ở vị trí của thẻ <script> trong file HTML.

Ưu điểm của JavaScript bên ngoài

Sử dụng Javascript trong các tệp tin bên ngoài có một số lợi thế:

  • Nó phân tách HTML và mã Javascript
  • Nó làm cho HTML và JavaScript dễ đọc và dễ bảo trì hơn
  • Các tệp tin JavaScript được lưu trong bộ nhớ cache có thể tăng tốc độ tải trang

Để thêm một số tệp tập lệnh vào một trang – hãy sử dụng một số thẻ tập lệnh:

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

Output của Javascript

JavaScript có thể xuất dữ liệu theo những cách khác nhau:

  • Viết vào một phần tử HTML, sử dụng innerHTML.
  • Xuất dữ liệu HTML bằng cách sử dụng document.write()
  • Xuất dữ liệu HTML bằng một cửa sổ thông báo, sử dụng window.alert().
  • Ghi vào bảng điều khiển của trình duyệt bằng cách sử dụng console.log().

Sử dụng innerHTML

Để truy cập một phần tử HTML, JavaScript có thể sử dụng phương thức document.getElementById(id)

Thuộc tính id xác định phần tử HTML. Thuộc tính innerHTML xác định nội dung HTML:

Hãy thử ví dụ sau đây:

<!DOCTYPE html>
<html>
<body>
<h1>Đây là trang web của tôi</h1>
<p>Tính tổng 2 số nguyên cho trước</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Thay đổi thuộc tính innerHTML của một phần tử HTML là một cách phổ biến để hiển thị dữ liệu Javascript trong HTML.

Sử dụng document.write ()

Đối với mục đích thử nghiệm các dòng code Javascript thì document.write() là phương thức thuận tiện nhất:

<!DOCTYPE html>
<html>
<body>
<h1>Đây là trang web của tôi</h1>
<p>Tính tổng 2 số nguyên cho trước</p>
<p id="demo"></p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Lưu ý: Khi sử dụng phương thức document.write() tất cả dữ liệu HTML sẽ bị xóa ngay sau khi phương thức này được kích hoạt bằng 1 nút lệnh

Hãy thử ví dụ sau:

<!DOCTYPE html>
<html>
<body>
<h1>Đây là trang web của tôi</h1>
<p>Tính tổng 2 số nguyên cho trước</p>
<p id="demo"></p>
<button type="button" onclick="document.write(5 + 6)">Bấm để xem kết quả</button>
</body>
</html>

Phương thức document.write () chỉ nên được sử dụng để thử nghiệm các mã lệnh Javascript

Sử dụng window.alert ()

Bạn có thể sử dụng hộp thông báo để hiển thị dữ liệu:

<!DOCTYPE html>
<html>
<body>
<h1>Đây là trang web của tôi</h1>
<p>Tính tổng 2 số nguyên cho trước</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

Bạn có thể bỏ qua từ khóa window

Trong JavaScript, đối tượng cửa sổ (window) là đối tượng phạm vi toàn cục, có nghĩa là các biến, thuộc tính và phương thức theo mặc định thuộc về đối tượng cửa sổ. Vì vậy việc sử dụng từ khóa Window trong trường hợp này là không bắt buộc

Hãy thử lại ví dụ trên bằng cách bỏ từ khóa window.

Sử dụng console.log ()

Đối với mục đích gỡ lỗi, bạn có thể gọi phương thức console.log() trong trình duyệt để hiển thị dữ liệu.

<!DOCTYPE html>
<html>
<body>
<h1>Đây là trang web của tôi</h1>
<p>Tính tổng 2 số nguyên cho trước</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

In ấn trong JavaScript

JavaScript không có bất kỳ đối tượng in hoặc phương thức in nào.

Bạn không thể truy cập các thiết bị in từ JavaScript. Trừ trường hợp bạn có thể gọi phương thức window.print() trong trình duyệt để in nội dung của cửa sổ hiện tại.

<!DOCTYPE html>
<html>
<body>
<h2>Sử dụng phương thưc window.print() của trình duyệt</h2>
<p>Bấm vào nút IN TRANG WEB NÀY để in nội dung của trang web hiện tại.</p>
<button onclick="window.print()">IN TRANG WEB NÀY</button>
</body>
</html>

Trên đây là những kiến thức cơ bản đầu tiên cho những người ban đầu làm quen với Javascript, hy vọng nó sẽ giúp bạn thấy hứng thú với ngôn ngữ lập trình Javascript này. Chúc bạn thành công!