Giới thiệu về Javascript

08/05/2019

Bài sau »

Javascript là ngôn ngữ lập trình cho HTML và website.

JavaScript được phát minh bởi Brendan Eich năm 1995, và trở thành chuẩn ECMA năm 1997. ECMAScript là tên chính thức của ngôn ngữ.

Chú ý: JavaScript và Java là 2 ngôn ngữ hoàn toàn khác nhau, cả về khái niệm lẫn thiết kế.

Javascript có thể thay đổi HTML content

- Một trong các phương thức javascript HTML là getElementById() dùng để lấy phần tử HTML theo ID.

- Để thay đổi HTML content thì javascript dùng phương thức innerHTML. Xem ví dụ bên dưới :

document.getElementById("demo").innerHTML = "Hello JavaScript";

Chú ý: Trong javaScript dùng nháy đơn ( ' ) hay nháy đôi ( " ) đều được.

Javascript có thể thay đổi HTML attribute

- Ví dụ bên dưới cho ta thấy javascript thay đổi thuộc tính src của image.

Giới thiệu về javascript

<img id="myImage" src="//theme.hstatic.net/1000006434/1000468887/14/pic_bulboff.gif" style="width: 100px;" /> <button onclick="document.getElementById('myImage').src='//theme.hstatic.net/1000006434/1000468887/14/pic_bulbon.gif'">Mở đèn</button> <button onclick="document.getElementById('myImage').src='//theme.hstatic.net/1000006434/1000468887/14/pic_bulboff.gif'">Tắt đèn</button>

- Ở ví dụ trên, thực chất là ta có 2 tấm hình giống nhau (cùng kích thước) nhưng chỉ khác trạng thái (Mở và tắt). Khi click vào button thì ta dùng javascript đổi giá trị của thuộc tính src là done.

Javascript có thể thay đổi HTML style (CSS)

Thay đổi style của phần tử HTML. Là 1 phiên bản khác của thay đổi HTML attribute. Ví dụ đổi font size của id="demo" thành 35px :

document.getElementById("demo").style.fontSize = "35px";

Javascript có thể ẩn và hiện phần tử HTML

Để ẩn và hiện phần tử HTML ta dùng thuộc tính display - Code ẩn phần tử HTML có id="demo" :

document.getElementById("demo").style.display = "none";

- Code hiện phần tử HTML có id="demo" :

document.getElementById("demo").style.display = "block";

- Ở bài viết này ở mức giới thiệu tổng quan về javascript. Về các khái niệm hay chức năng sâu hơn sẽ được học ở các bài sau.

Bài sau »
Back to top