JavaScript Introduction - Giới thiệu JavaScript

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
17,142
Được Like
12,745
JavaScript Introduction - Giới thiệu JavaScript

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

JavaScript có thể thay đổi nội dung HTML
Một trong nhiều phương pháp HTML là getElementById().

Ví dụ này sử dụng phương pháp để "find" một phần tử HTML (với id = "demo"), và thay đổi nội dung (innerHTML) thành "Hello JavaScript":

Ví dụ:
Mã:
document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript có thể thay đổi thuộc tính HTML
Ví dụ này thay đổi một hình ảnh HTML, bằng cách thay đổi các thuộc tính src của thẻ <img>:
Mã:
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Can Change Images</h1>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</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 Introduction.png


JavaScript Introduction2.png

JavaScript có thể thay đổi Styles HTML (CSS)
Thay đổi style 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:
Ví dụ:
Mã:
document.getElementById("demo").style.fontSize = "25px";

Dùng thử:
Mã:
<!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 Introduction3.png


JavaScript Introduction4.png


JavaScript có thể xác nhận dữ liệu
JavaScript thường được sử dụng để xác nhận đầu vào:
Mã:
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Can Validate Input</h1>

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</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 = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

JavaScript Introduction5.png

Bạn có biết?
JavaScript và Java là 2 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 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ản chính thức mới nhất của JavaScript.

Chúc các bạn thành công.


Nguồn: w3schools.com​
 

Top Bottom