WebVN Cộng đồng web Việt Nam
Javascript làm cho trang HTML của bạn linh hoạt và dễ tương tác hơn.
Ví dụ về Javascript
Chèn script vào trang
Cách để thêm một script vào trang HTML
Sử dụng thẻ <noscript>
Cách xử lý khi trình duyệt không hỗ trợ script.
Thẻ <script> trong HTML
Thẻ <script> được sử dụng để tạo một đoạn mã ở chạy trên máy của người dùng, ví dụ như một đoạn JavaScript.
Thẻ <script> có thể chứa các đoạn mã được viết trực tiếp hoặc liên kết tới một đoạn mã được viết bên ngoài thông qua thuộc tính src.
JavaScript được sử dụng chủ yếu để xử lý ảnh, kiểm tra thông tin người dùng nhập vào hoặc thay đổi nội dung trong trang.
Đoạn mã dưới đây sẽ hiển thị chữ “Xin chào JavaScript!” trong một thẻ HTML có id=”demo”:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Xin chào JavaScript!"; </script> </body> </html> |
Thẻ <noscript> trong HTML
Thẻ <noscript> được sử dụng để hiển thị nội dung thay thế nếu người dùng tắt tính năng chạy script trên trình duyệt hoặc trình duyệt của họ không hỗ trợ chạy các đoạn script.
Thẻ <noscript> có thể chứa các thẻ HTML khác.
Nội dung trong thẻ <noscript> chỉ hiển thị nếu đoạn script không được trình duyệt hỗ trợ hoặc bị tắt bởi người dùng:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Xin chào JavaScript!"; </script> <noscript>Rất tiếc, trình duyệt của bạn không hỗ trợ JavaScript!</noscript> <p>Những trình duyệt không hỗ trợ JavaScript sẽ hiển thị nội dung trong thẻ noscript.</p> </body> </html> |
Trải nghiệm JavaScript
Dưới đây là một số ví dụ thú vị mà javascript có thể làm:
Sử dung javascript để thay đổi nội dung của một thành phần HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <h1>Ví dụ về JavaScript</h1> <p>JavaScript có thể thay đổi nội dung trong một thẻ HTML:</p> <button type="button" onclick="myFunction()">Nhấn vào đây!</button> <p id="demo">Nội dung sẽ bị thay thế.</p> <script> function myFunction() { document.getElementById("demo").innerHTML = "Xin chào JavaScript!"; } </script> </body> </html> |
Sử dung javascript để thay đổi cách hiển thị của một thành phần HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <h1>Ví dụ về JavaScript</h1> <p id="demo">JavaScript có thể thay đổi cách hiển thị của một thành phần HTML.</p> <script> function myFunction() { document.getElementById("demo").style.fontSize = "25px"; } </script> <button type="button" onclick="myFunction()">Nhấn vào đây!</button> </body> </html> |
Sử dung javascript để thay đổi thuộc tính của một thành phần HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <body> <script> function light(sw) { var pic; if (sw == 0) { pic = "https://webvn.com/wp-content/uploads/2015/08/pic_bulboff.gif" } else { pic = "https://webvn.com/wp-content/uploads/2015/08/pic_bulbon.gif" } document.getElementById('myImage').src = pic; } </script> <img id="myImage" src="https://webvn.com/wp-content/uploads/2015/08/pic_bulboff.gif" width="100" height="180"> <p> <button type="button" onclick="light(1)">Bật đèn</button> <button type="button" onclick="light(0)">Tắt đèn</button> </p> </body> </html> |
