Bài viết này bao gồm một số ví dụ về việc JavaScript có thể làm được những gì. Bạn chắc chắn sẽ ngạc nhiên đấy, có khi còn hơn tôi.
JavaScript Có thể thay đổi nội dung của trang HTML
Sử dụng một trong nhiều phương thức của JavaScript HTML là getElementById().
Ví dụ này sử dụng phương thức để “tìm kiếm” phần tử HTML có id = “demo” và thực hiện thay đổi nội dung phần tử (sử dụng innerHTML) thành “Chào em – chào JavaScript”
Code mẫu:
<span id="demo">JavaScript có thể thay đổi nội dung trang HTML.</span>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Chào em - chào JavaScript'">Bấm Tớ Này!</button>JavaScript có thể thay đổi các thuộc tính của HTML
Trong ví dụ này, JavaScript sẽ thay đổi ảnh bằng cách thay đổi thuộc tính src (nguồn) của thẻ <img>.
Code mẫu:
<button onclick="document.getElementById('myImage').src='bat_den.gif'">Bật đèn</button>
<img id="myImage" src="tat_den.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='tat_den.gif'">Tắt đèn</button>Khi nút “Bật đèn” được nhấn, nguồn ảnh (thuộc tính src quyết định) sẽ được thay đổi. Bạn vẫn dùng getElementById
JavaScript có thể thay đổi Style (CSS)
Thay đổi style của phần tử HTML, một biến thể của kiểu thay đổi thuộc tính HTML.
Code mẫu:
<p id="demo">JavaScript có thể thay đổi style của phần tử HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='40px'">Nhấn thử xem!</button>Khi bạn nhần nút, font-size của văn bản sẽ tăng lên 40px.
JavaScript có thể ẩn phần tử HTML
Ẩn một phần tử HTML hoàn toàn thực hiện được bằng cách thay đổi thuộc tính display.
Code mẫu:
<p id="demo">JavaScript có thể ẩn các phần tử HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Nhấn thử xem!</button>Khi bạn nhấn nút, văn bản sẽ bị ẩn đi.
- getElementById(‘demo’): nghĩa là tác động đến phần tử HTML có id là demo
- style: nghĩa là tác động đến CSS
- display: là một thuộc tính của thẻ <p>
- none: là giá trị của thuộc tính display
JavaScript cso thể hiện các phần tử HTML
Nếu ẩn được, thì bạn cũng hiện được phần tử HTML, cách làm chỉ là ngược lại.
Code mẫu:
<p id="demo" style="display:none">Chào JavaScript nhé!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Nhấn tôi xem!</button>Khi bạn nhấn nút, thì văn bản “Chào JavaScript nhé!” sẽ hiện ra.
Ngoài ra JavaScript còn làm gì được nữa không?
Thật khó để trả lời trọn vẹn JavaScript làm được những gì?
Các ví dụ trên chỉ là một vài pha biểu diễn của JavaScript thôi, nội công của nó còn thâm hậu hơn nhiều!