Bài 1: Giới thiệu về JavaScript


JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới.

Trong bài này chúng ta có thể tìm hiểu một số ví dụ về những gì JavaScript có thể làm.

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

Một trong những phương pháp HTML là  getElementById().

Đây là ví dụ sử dụng phương pháp để “tìm”một phần tử trong HTML (với id=”demo”), và thay đổi nội dung phần tử (innerHTML) thành  “Hello JavaScript”.

Ví dụ:

<!DOCTYPE html>
<html>
<body><h1>What Can JavaScript Do?</h1><p id=”demo”>JavaScript can change HTML content.</p><button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript!'”>
Click Me!</button></body>
</html>

JavaScript có thể thay đổi thuộc tính của HTML

Đây là ví dụ thay đổi hình ảnh của HTML, bằng cách thay đổi thuộc tính src của thẻ <img>.

Kích vào bóng đèn để bật tắt ánh sáng.

Code dưới đây:

<!DOCTYPE html>
<html>
<body><h1>JavaScript có thể thay đổi ảnhs</h1><img id=”myImage” onclick=”changeImage()” src=”pic_bulboff.gif” width=”100″ height=”180″><p>Kích vào bóng đèn để bật tắt ánh sáng.</p><script>
function changeImage() {
var image = document.getElementById(‘myImage’);
if (image.src.match(“bulbon”)) {
image.src = “pic_bulboff.gif”;
} else {
image.src = “pic_bulbon.gif”;
}
}
</script></body>
</html>

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

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

Ví dụ:

<!DOCTYPE html>
<html>
<body><h1>What Can JavaScript Do?</h1><p id=”demo”>JavaScript can change the style of an HTML element.</p><script>
function myFunction() {
var x = document.getElementById(“demo”);
x.style.fontSize = “25px”;
x.style.color = “red”;
}
</script><button type=”button” onclick=”myFunction()”>Click Me!</button></body>
</html>

JavaScript có thể kiểm tra dữ liệu

JavaScript thường được sử dụng kiểm tra dữ liệu đầu vào:

Nhập giá trị trong khoảng từ 1 tới 10


Ví Dụ:

<!DOCTYPE html>
<html>
<body><h1>JavaScript có thể kiểm tra đầu vào</h1><p>Nhập vào giá trị từ 1 tới 10:</p><input id=”numb” type=”number”><button type=”button” onclick=”myFunction()”>Gửi</button><p id=”demo”></p><script>
function myFunction() {
var x, text;// Get the value of the input field with id=”numb”
x = document.getElementById(“numb”).value;// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = “Không nhập đúng yêu cầu”;
} else {
text = “Nhập đúng yêu cầu”;
}
document.getElementById(“demo”).innerHTML = text;
}
</script></body>
</html>

Bạn có biết?

Note JavaScript và Java là hai ngôn ngữ hoàn toàn khác nhau, cả về khái niệm và thiết kế.
JavaScript được phát minh bởi Brendan Eich vào năm 1995, và trở thành một tiêu chuẩn ECMA vào năm 1997.
ECMA-262 là tên chính thức. ECMAScript 6 (phát hành vào tháng 6 năm 2015) là phiên bả chính thức mới nhất của JavaScript.

 

Có thể bạn sẽ thích…

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0 Shares
Share via
Copy link
Powered by Social Snap