Trong phần trước, chúng ta tạo một webpage, trong đó có "nhúng" một đoạn code Javascript nằm giữa hai thẻ <script>... </script> .
Cú pháp đơn giản của JavaScript sẽ xuất hiện như sau:<script >
JavaScript code
</script>
Lưu ý: Các ví dụ JavaScript cũ có thể sử dụng thuộc tính loại: <script type="text/javascript">.Thuộc tính loại không bắt buộc. JavaScript là ngôn ngữ kịch bản mặc định trong HTML.
Một lần nữa chúng ta cần nhắc lại: JavaScript thường được nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file .js riêng. Chúng ta lấy lại ví dụ trong phần trước, thay vì "nhúng" vào trang HTML, chúng ta tách code Javascript riêng.
Chúng ta sẽ tiếp tục sử dụng JSFiddle. Người ta đặt sẵn tên file .js là pure.js, chúng ta cũng sẽ sử dụng tên file này.
Đây là code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đất Việt Lập Trình</title>
</head>
<body>
<script src="pure.js"></script>
<img id="Image" onclick="turnOnOff()" src= "https://live.staticflickr.com/65535/53833689329_eb9eebf96c_c.jpg">
<p>
Bấm chuột vào hình bóng đèn để BẬT hoặc TẮT
</p>
</body>
</html>
Còn đây là code file pure.js
function turnOnOff() {
let image = document.getElementById('Image');
if (image.src.match("53832436677_3be85bc968_c"))
image.src = "https://live.staticflickr.com/65535/53833689329_eb9eebf96c_c.jpg";
else
image.src = "https://live.staticflickr.com/65535/53832436677_3be85bc968_c.jpg";
}
Bấm Run để thực thi
Tới đây, chúng ta đã "lờ mờ" hiểu về Javascript. Đại khái là HTML như một bộ khung, nếu muốn có chút "nhan sắc" thì chúng ta cần sử dụng CSS để trang điểm cho HTML. Tuy nhiên sau khi có chút nhan sắc, webpage vẫn cần "học ăn học nói", tương tác với người sử dụng. Chúng ta có thể sử dụng nhiều "nền giáo dục" khác nhau, ví dụ PHP, Javascript...
JavaScript thường được nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file .js riêng. Các file .js bên ngoài rất hữu ích khi cùng một mã Javascript được sử dụng trong nhiều trang web khác nhau.
Các file JavaScript có phần mở rộng là .js.
Để sử dụng tập lệnh bên ngoài, chúng ta thêm tên file vào thuộc tính src (nguồn) của thẻ <script>. Ví dụ:
<script src="pure.js"></script>
Chúng ta có thể đặt tham chiếu đến file .js trong phần <head> hay <body> đều được. Trong ví dụ trên, chúng ta đặt tham chiếu trong phần <body>, nếu muốn chúng ta có thể "bưng" nó lên phần <head>.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đất Việt Lập Trình</title>
<script src="pure.js"></script>
</head>
<body>
<img id="Image" onclick="turnOnOff()" src= "https://live.staticflickr.com/65535/53833689329_eb9eebf96c_c.jpg">
<p>
Bấm chuột vào hình bóng đèn để BẬT hoặc TẮT
</p>
</body>
</html>
Chạy thử, mọi chuyện vẫn ổn:
Cũng như mọi ngôn ngữ lập trình, Javascript cũng cần "thể hiện quan điểm" bằng cách hiển thị dữ liệu ra bên ngoài.
JavaScript Display
JavaScript có thể "hiển thị" dữ liệu theo nhiều cách khác nhau:
- Viết vào một phần tử HTML, sử dụng innerHTML.
- Viết vào đầu ra HTML bằng document.write().
- Viết vào hộp cảnh báo, sử dụng window.alert().
- Viết vào bảng điều khiển trình duyệt, sử dụng console.log().
Chúng ta sẽ thử các cách trên.
Sử dụng innerHTML
Để truy cập một phần tử HTML, JavaScript có thể sử dụng phương thức document.getElementById(id).
Thuộc tính id xác định phần tử HTML. Thuộc tính innerHTML xác định nội dung HTML.
Đây là ví dụ:
<!DOCTYPE html>
<html>
<body>
<h2>Đất Việt Lập Trình</h2>
<p>Sử dụng innerHTML.</p>
<p id="Dat Viet"></p>
<script>
document.getElementById("Dat Viet").innerHTML = 5 + 8;
</script>
</body>
</html>
Bấm Run để thực thi
document.getElementById("Dat Viet").innerHTML = 5 + 8; được dịch ra như sau: Chỗ phần tử id="Dat Viet" => Sẽ "hiển thị" kết quả của phép tính 5+8 tức là 13. Nếu muốn, chúng ta có thể sửa lại thành document.getElementById("Dat Viet").innerHTML = "Hello";
Và đây là kết quả:
Sử dụng document.write()
Tương tự chúng ta sử dụng lệnh printf trong C để kiểm tra chương trình. Với Javascript, sử dụng document.write() là cách tốt để kiểm tra vận hành trang web. Tuy nhiên, cần lưu ý: Sử dụng document.write() sau khi tài liệu HTML được tải sẽ xóa tất cả HTML hiện có. Vì vậy chỉ nên sử dụng cách này để Test mà thôi. Đây là một ví dụ:
<!DOCTYPE html>
<html>
<body>
<h2>Đất Việt Lập Trình</h2>
<p>Sử dụng document.write().</p>
<button type="button" onclick="document.write('Bạn đã xóa mọi thứ!')">Xóa hết</button>
</body>
</html>
Khi chạy thử và bấm vào nút Xóa hết, mọi thứ sẽ bị xóa!
Sử dụng window.alert()
<!DOCTYPE html>
<html>
<body>
<h2>Đất Việt Lập Trình</h2>
<p>Sử dụng window.alert().</p>
<script>
window.alert("Đất Việt Lập Trình, Xin Chào!");
</script>
</body>
</html>
Thực thi, chúng ta sẽ nhận được một cửa sổ mới với dòng chữ Đất Việt Lập Trình, Xin Chào!
Sử dụng console.log()
Với mục đích gỡ lỗi, bạn có thể gọi phương thức console.log() trong trình duyệt để hiển thị dữ liệu. Chúng ta sẽ bàn sau.
Không có nhận xét nào:
Đăng nhận xét