Hướng dẫn dùng myimage JavaScript

*Lưu ý: Tất cả nội dung đều được lấy từ Internet và dịch lại. Và tôi cố gắng dịch thuật để truyền đạt lại bằng tiếng Việt theo cách rõ ràng nhất. Nguồn bài viết có thể trích xuất từ W3Schools cho bạn nào muốn đọc tiếng Anh và có thể được bổ sung từ nhiều nguồn khác.

Tổng quát

JavaScript là ngôn ngữ lập trình hỗ trợ HTML và web – và cũng tương đối dễ nắm bắt.

Sau đây sẽ là loạt bài hướng dẫn về JavaScript thông qua các ví dụ cho dễ hiểu.

Tại sao lại là JavaScript?

JavaScript là 1 trong 3 ngôn ngữ mà một lập trình viên web cần phải biết:

1. HTML: chỉ định nội dung (content) trang web

2. CSS: định dạng giao diện trang

3. JavaScript: lập trình các hành động xử lý trên trang web

Mục tiêu

Hiểu về JavaScript, JavaScript reference, HTML DOM, browser objects

0.88%

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

Một trong các hàm phổ biến là getElementById()

Ví dụ sau đây sẽ dùng hàm getElementById() để tìm đến 1 thẻ (tag) HTML dựa vào định danh id của thẻ đó (vd: id “demo”) và thay đổi nội dung thẻ đó dùng hàm innerHTML

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

Link

JavaScript có thể thay đổi thuộc tính (Attribute) thẻ HTML

Với thẻ img có src là “pic_bulboff.gif”

Dùng JavaScript thay đổi src thành “pic_bulbon.gif”

function changeImage() {
 var image = document.getElementById('myImage');
 if (image.src.match("bulbon")) {
 image.src = "pic_bulboff.gif";
 } else {
 image.src = "pic_bulbon.gif";
 }
}

Link

JavaScript có thể thay đổi CSS thẻ HTML

Thay đổi kiểu (style) của HTML chính là một dạng biến thể thay đổi thuộc tính

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

Link

JavaScript có thể xác thực dữ liệu

JavaScript cũng thường được dùng để xác thực dữ liệu truyền vào form, hoặc đầu vào (input) của một trang web

Giả sử trang web có các components như sau:

Please input a number between 1 and 10:

Submit

Mã JavaScript để kiểm tra validate dữ liệu input như sau:

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  10) {
 text = "Input not valid";
 } else {
 text = "Input OK";
 }
 document.getElementById("demo").innerHTML = text;
}

Link

1.76%

Đặt JavaScript ở đâu?

JavaScript có thể đặt trong HTML (trong thẻ hoặc thẻ ), và file *.js từ bên ngoài mà tùy nhu cầu các file html có thể gọi tới.

Thẻ

Trong html, JavaScript phải được đặt trong cặp thẻ

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

JavaScript Functions (chức năng) and Events (sự kiện)

JavaScript function là một chuỗi các dòng mã JavaScript, mà nó sẽ thực thi xử lý tính toán một yêu cầu nào đó. Một function sẽ được gọi khi có một event xuất hiện (khi nhấn 1 button trên màn hình, khi click chuột)

JavaScript trong và

 <script>
 </script>

 <script>
 </script>

• Note: invoked = called

Nếu đặt script trong  thì nên đặt ở cuối nội dung , tùy biến này sẽ giúp việc hiển thị web page tốt hơn do không bị trở ngại bởi việc tải script sẽ diễn ra sau đó.

Tải script từ file JavaScript độc lập

Như đã nói ở trên, file JavaScript có tên dạng *.js, sẽ rất có lợi nếu một đoạn JavaScript code nào đó được sử dụng nhiều lần trên một hoặc nhiều page html thì việc tái sử dụng file JavaScript sẽ giúp giảm thiểu rất nhiều thời gian và công sức.

Để gọi một file JavaScript thì ta đặt trên của file đó trong thuộc tính src của thẻ