Hãy làm quen với Javascript bằng các ví dụ đơn giản dưới đây.

Quan trọng, bạn cần phải tự gõ các ví dụ này trên trình soạn thảo, lưu lại và chạy thử chúng trên trình duyệt, quan sát kết quả và thay đổi những nội dung bạn muốn và chạy lại cho tới khi bạn hiểu ví dụ và các câu lệnh trong đó.

Javascript có thể làm được những gì?

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

Trong ví dụ dưới đây chúng tôi sẽ sử dụng hàm getElementById()

Phương thức getElementById() sẽ trả về phần tử có thuộc tính ID được cung cấp. Phương thức này là một trong số những phương thức phổ biến nhất của HTML DOM, nó được sử dụng rất thường xuyên để thao tác hoặc lấy thông tin của form hoặc một phần tử bất kỳ. Cú pháp document.getElementById(elementID)

Ví dụ dưới đây sẽ thay đổi nội dung của phần tử (id=”demo”) khi nó được tìm thấy, thành “Xin chào Javascript. Tôi là Wecode”

<html>
<body>
<h2>Javascript có thể làm gì?</h2>
<p id="demo">JavaScript có thể thay đổi nội dung HTML.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Xin chào JavaScript. Tôi là Wecode!"'>Bấm vào đây để Xem!</button>
</body>
</html>

Lưu ý: Đối với 1 chuỗi ký tự JavaScript chấp nhận cả dấu ngoặc kép và dấu nháy đơn

<html>
<body>
<h2>Javascript có thể làm gì?</h2>
<p id='demo'>JavaScript có thể thay đổi nội dung HTML.</p>
<button type="button" onclick="document.getElementById("demo").innerHTML = 'Xin chào JavaScript. Tôi là Wecode!'">Bấm vào đây để Xem!</button>
</body>
</html>

JavaScript có thể thay đổi giá trị thuộc tính HTML

Trong ví dụ này, JavaScript thay đổi giá trị của thuộc tính src của thẻ <img>:

<html>
<body>
<h2>JavaScript có thể làm nhưng gì?</h2>
<p>JavaScript có thể thay đổi giá trị thuốc tính HTML.</p>
<p>Trong ví dụ này JavaScript đã thay đổi giá trị của thuộc tính src của thẻ img.</p>
<button onclick="document.getElementById('myImage').src='https://hourofcode.vn/wp-content/uploads/2022/05/Den-sang.gif'">Bấm tôi để bật đèn</button>
<img id="myImage" src='C:\Users\admin\Pictures\Đèn tắt.gif' style="width:200px">
<button onclick="document.getElementById('myImage').src='https://hourofcode.vn/wp-content/uploads/2022/05/Den-tat.gif'">Bấm tôi để tắt đèn</button>
</body>
</html>

Các bạn có thể download hình ảnh đèn sáng tại đâyđèn tắt tại đây

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

Thay đổi kiểu của một phần tử HTML, là một biến thể của việc thay đổi một thuộc tính HTML:

<!DOCTYPE html>
<html>
<body>
<h2>Javascript có thể làm gì?</h2>
<p id="demo">JavaScript có thể thay đổi kiểu HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='50px'">Bấm để thay đổi!</button>
</body>
</html> 

JavaScript có thể ẩn các phần tử HTML

Việc ẩn các phần tử HTML có thể được thực hiện bằng cách thay đổi giá trị thuộc tính display

<html>
<body>
<h2>Javascript có thể làm gì?</h2>
<p id="demo">JavaScript có thể ẩn phần tử HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Bấm tôi để ẩn!</button>
</body>
</html> 

JavaScript có thể hiển thị các phần tử HTML

Việc hiển thị các phần tử HTML ẩn cũng có thể được thực hiện bằng cách thay đổi giá trị của display

<!DOCTYPE html>
<html>
<body>
<h2>Javascript có thể làm gì?</h2>
<p>JavaScript có thể hiển thị các phần tử HTML ẩn.</p>
<p id="demo" style="display:none">Xin chào Javascript. Tôi là Wecode!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Bấm tôi để hiện!</button>
</body>
</html> 

Trên đây là những ví dụ đầu tiên, giúp bạn có thể hiểu thêm về những thứ cơ bản mà Javascript có thể làm được, hy vọng nó sẽ làm cho bạn cảm thấy hứng thú hơn với Javascript. Chúc bạn thành công!