- Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
- Trang fan page: https://www.facebook.com/lophocvitinhcom
- Trang web: http://lophocvitinh.com
JavaScript là 01 trong 03 ngôn ngữ lập trình “buộc phải học” của tất cả các lập trình viên web:
HTML →xác định nội dung của trang web.
CSS →xác định bố cục giao diện trang web.
JavaScript →lập trình các hành vi của trang web.
Sau đây là những gì JavaScript có thể làm được:
1.Thay đổi nội dung HTML
Dùng phương thức document.getElementById() và thay đổi nội dung phần innerHTML
Ví dụ: thay đổi nội dung thẻ có id="demo" khi bấm chuột vào nút
<html>
<head>
<title>Tự học JavaScript</title>
</head>
<body>
<h1 id="demo">Nội dung ban đầu</h1>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Xin chào JavaScript!"'>Bấm vào đây!</button>
</body>
</html>
Ghi chú: nháy đơn hay nháy đôi JavaScript cũng chấp nhận hết (bạn nên tự gõ code vào chứ đừng copy dán ra vì có thể gây lỗi văn bản).
2.Thay đổi thuộc tính HTML
Ví dụ: ta có thể thay đổi thuộc tính src của thẻ image khi bấm vào nút tương ứng
<!DOCTYPE html>
<html>
<head>
<title>Tự học JavaScript</title>
</head>
<body>
<button onclick="document.getElementById('myImage').src='hun cai coi.jpg'">Hun cái coi</button>
<img id="myImage" src="sand glass.jpg" style="width:100px">
<button onclick="document.getElementById('myImage').src='sand glass.jpg'">Đồng hồ cát</button>
</body>
</html>
Ghi chú: các bạn tự kiếm 02 tấm hình tương ứng nhé.
3.Thay đổi giá trị thuộc tính CSS của HTML Styles
Trong ví dụ sau JavaScript sẽ thay đổi thuộc tính fontSize của phần tử “demo” lên thành 35px khi bấm vào nút.
<!DOCTYPE html>
<html>
<head>
<title>Tự học JavaScript</title>
</head>
<body>
<p id="demo">JavaScript có thể thay đổi thuộc tính style của phần tử HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Bấm vào đây!</button>
</body>
</html>
4.Ẩn hoặc Hiện phần tử HTML
Ví dụ 1: ẩn 01 phần tử HTML bằng cách thiết lập thuộc tính display='none'
<!DOCTYPE html>
<html>
<head>
<title>Tự học JavaScript</title>
</head>
<body>
<h1 id="demo">JavaScript có thể ẩn nội dung này</h1>
<button type="button" onclick="document.getElementById('demo').style.display='none'">ẨN!</button>
</body>
</html>
Ví dụ 2: hiện 01 phần tử HTML bằng cách thiết lập thuộc tính display='block' (trước đó phần tử phải được ẩn đi bằng thuộc tính display:none)
<!DOCTYPE html>
<html>
<head>
<title>Tự học JavaScript</title>
</head>
<body>
<h1>JavaScript có thể hiện nội dung này</h1>
<p id="demo" style="display:none">Kho báu đã hiện ra!!!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">HIỆN RA!</button>
</body>
</html>
Nếu vẫn chưa rõ các bạn xem thêm video clip sau:
- Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
- Trang fan page: https://www.facebook.com/lophocvitinhcom
- Trang web: http://lophocvitinh.com
By #drM
Nguồn w3schools
Không có nhận xét nào:
Đăng nhận xét