JavaScript trong HTML - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

JavaScript trong HTML

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

JavaScript có thể thêm khả năng tương tác cho trang web của bạn. Ví dụ:

<h1>My First JavaScript</h1>

<button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = Date()”>
Click me to display Date and Time.</button>

<p id=”demo”></p>

Thẻ <script> trong HTML

Thẻ <script> được sử dụng để xác định một kịch bản client-side (JavaScript). Phần tử <script> có chứa các câu lệnh script, hoặc nó chỉ đến một tệp kịch bản bên ngoài thông qua thuộc tính src.

Các ứng dụng phổ biến cho JavaScript là thao tác với hình ảnh, xác nhận mẫu và thay đổi nội dung động.

Để chọn một phần tử HTML, JavaScript rất thường sử dụng phương thức document.getElementById (id). Ví dụ JavaScript này viết “Hello JavaScript!” thành một phần tử HTML với id = “demo”:

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

Trải nghiệm JavaScript

Dưới đây là một số ví dụ về những gì JavaScript có thể được ứng dụng:

JavaScript thay đổi nội dung HTML

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

JavaScript thay đổi định dạng HTML

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

JavaScript thay đổi thuộc tính trong HTML

document.getElementById(“image”).src = “picture.gif”;

Thẻ <noscript> trong HTML

Thẻ <noscript> được sử dụng để cung cấp nội dung thay thế cho người dùng đã tắt tập lệnh trong trình duyệt của họ hoặc có trình duyệt không hỗ trợ tập lệnh client-side:

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

<noscript>Sorry, your browser does not support JavaScript!</noscript>

Thẻ Script trong HTML

Thẻ Mô tả
<script> xác định một kịch bản client-side
<noscript> xác định một nội dung thay thế cho người dùng không hỗ trợ tập lệnh client-side

 

Tham khảo thêm 2 khóa học hữu ích do giảng viên quốc tế trường FPT Arena giảng dạy: