- Các loại chú thích và câu lệnh trong JavaScript
- Biến cơ bản trong JavaScript
- Các kiểu biến dữ liệu trong JavaScript
- Cách sử dụng biến và chuỗi trong JavaScript
- Thay đổi nội dung HTML và khả năng hiển thị của JavaScript
- Toán tử trong JavaScript
- Sử dụng hàm trong JavaScript
- Tạo ứng dụng Quiz bằng JavaScript
- Tạo ứng dụng bảng tính bằng JavaScript
- Tìm hiểu về mảng và vòng lặp trong JavaScript
- Sử dụng vòng lặp While trong JavaScript
- Câu lệnh điều kiện IF trong JavaScript
Chào các bạn, hôm nay mình sẽ giới thiệu đến các bạn về các chúng ta có thể thay đổi nội dung HTML với JavaScript nhé
THAY ĐỔI NỘI DUNG TRONG HTML
Một trong những phương thức ta dùng ở đây là getElementById(). Chúng ta hãy xem ví dụ sau: Ta dùng phương thức getElementById để tìm một phần tử trong HTML có id là demo và thay đổi nội dung phần tử dùng innerHTML từ aa thành hello
<html>
<head>
</head>
<body>
<p id="demo">aa</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML = "hello";
</script>
</body>
</html>Bạn có thể áp dụng cho những trường hợp khác, ví dụ như là thêm vào button
<html>
<head>
</head>
<body>
<p id="demo">aa</p>
<button type="button" onclick='document.getElementById("demo").innerHTML= "Hello"'> Click</button>
</body>
</html>THAY ĐỔI NỘI DUNG TRONG CSS
<html>
<head>
</head>
<body>
<p id="demo">aa</p>
<button type="button" onclick='document.getElementById("demo").style.fontSize= "35px"'> Click</button>
</body>
</html>JAVASCRIPT CÓ THỂ HIỂN THỊ CÁC PHẦN TỬ HTML
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>
KHẢ NĂNG HIỂN THỊ CỦA JAVASCRIPT
Javascript có thể hiển thị dữ liệu theo nhiều các khác nhau:
- Ghi vào thành phần HTML, bằng cách sử dụng lệnh
innerHTML. - Ghi vào đầu ra HTML bằng cách sử dụng lệnh
document.write(). - Writing into an alert box, using
window.alert(). - Ghi ra bảng console của trình duyệt, bằng cách sử dụng lệnh
console.log().
SỬ DỤNG THUỘC TÍNH INNERHTML
Để truy cập vào một phần tử HTML, JavaScript sử dụng phương thức document.getElementById(id).
Thuộc tính id định nghĩa phần tử HTML. Thuộc tính innerHTML định nghĩa nội dung HTML:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>SỬ DỤNG LỆNH DOCUMENT.WRITE()
Trong quá trình kiểm thử chương trình ta sử dụng lệnh document.write() rất thuận tiện
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
SỬ DỤNG LỆNH WINDOW.ALERT()
Chúng ta có thể sử dụng hộp cảnh báo để hiển thị dữ liệu bằng cách sử dụng lệnh window.alert()
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>SỬ DỤNG LỆNH 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>
<script>
console.log(5 + 6);
</script>
</body>
</html>CHỨC NĂNG IN TRONG JAVASCRIPT
JavaScript không có bất kỳ đối tượng in hoặc phương thức in. Bạn không thể truy cập các thiết bị đầu ra từ JavaScript.
Ngoại lệ duy nhất là 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>The window.print() Method</h2>
<p>Click the button to print the current page.</p>
<button onclick="window.print()">Print this page</button>
</body>
</html>
Xem thêm: Serial bài học Javascript từ cơ bản đến nâng cao