TEDU
Trang chủ Học HTML căn bản HTML JavaScript
Học HTML căn bản 02/06/2019 2,878 lượt xem

HTML JavaScript

Nguyễn Văn Hợi
HTML JavaScript

JavaScript khiến trang HTML linh động và có tính tương tác cao hơn.

Ví dụ

<!DOCTYPE html>

<html>

<body>

 

<h1>My First JavaScript</h1>

<button type="button"

onclick="document.getElementById('demo').innerHTML = Date()">

Nhấp để hiển thị Ngày và Giờ.</button>

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

 

</body>

</html>

 

 

Thẻ <script> trong HTML

Thẻ <script> được sử dụng để xác định một đoạn script chạy trên máy khách.

Phần tử <script> chứa các câu lệnh script hoặc nó trỏ đến tệp script bên ngoài thông qua thuộc tính src.

JavaScript thường được sử dụng để thao tác với hình ảnh, xác thực biểu mẫu, và thay đổi nội dung một cách linh hoạt.

Để chọn một phần tử HTML, JavaScript thường sử dụng phương thức document.getElementById()

Ví dụ

Đoạn script này dùng để ghi dòng chữ “Hello JavaScript!” vào phần tử HTML có id là “demo”.

<script>
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

 

 

Cùng thử một chút JavaScript

Đây là một số ví dụ những thứ JavaScript có thể làm:

JavaScript có thể thay đổi nội dung HTML

Ví dụ

document.getElementById("demo").innerHTML = "Hello JavaScript!";

 

JavaScript có thể thay đổi HTML style (CSS)

Ví dụ

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

 

JavaScript có thể thay đổi thuộc tính HTML

Ví dụ

document.getElementById("image").src = "picture.gif";

 

Thẻ <noscript>

Thẻ <noscript> được sử dụng để cung cấp nội dung thay thế cho người dùng tắt script trên trình duyệt của họ, hoặc trình duyệt không hỗ trợ JavaScript

Ví dụ

<!DOCTYPE html>

<html>



<body>

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

  <script>

    document.getElementById("demo").innerHTML = "Hello JavaScript!";

  </script>

  <noscript>Xin lỗi! Trình duyệt của bạn không hỗ trợ JavaScript!</noscript>

  <p>Một trình duyệt không hỗ trợ JavaScript sẽ hiển thị nội dung bên trong thẻ noscript</p>

</body>



</html>

 

Bảng tham khảo

Thẻ

Mô tả

<script>

Xác định một đoạn script chạy trên máy khách

<noscript>

Xác định nội dung thay thế cho người dùng không hỗ trợ JavaScript

 

Trích nguồn từ: https://www.w3schools.com/html/html_scripts.asp

Tags:

#html #javascript #js #basic #tu-hoc-html #html-can-ban
Chia sẻ:

Bài viết liên quan

Quy ước và phong cách viết HTML5
08/07/2019 • Nguyễn Văn Hợi

Quy ước và phong cách viết HTML5

Hướng dẫn bạn tạo cho mình một phong cách viết mã phù hợp với các chuẩn HTML5. Giúp mã nguồn của bạn gọn gàng, sạch sẽ và đúng định dạng.

Đọc thêm