NTM Solutions

Thứ Ba, 7 tháng 9, 2021

TỰ HỌC JAVASCRIPT- BÀI 01: GIỚI THIỆU

Mục lục học JavaScript

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:


  1. HTML →xác định nội dung của trang web.

  2. CSS →xác định bố cục giao diện trang web.

  3. 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:



By #drM

Nguồn w3schools

Mục lục học JavaScript

Không có nhận xét nào:

Đăng nhận xét

Facebook Youtube RSS