GIỚI THIỆU VỀ JAVASCRIPT
1. Mở đầu.
Như các bạn đã biết thì HTML chưa đủ để tạo lên được các website mang tính tương tác và thu hút được người xem. Và để làm được điều đó thì chúng ta cần có sự hỗ trợ của một ngôn ngữ lập trình nữa. Ngày hôm nay mình sẽ chia sẻ với các bạn những hiểu biết của bản thân về một ngôn ngữ lập trình có thể làm được điều đó. Đó là Javascript – một ngôn ngữ lập trình để tạo ra các ứng dụng và có thể nhúng vào các file HTML. Và nhờ nó mà chúng ta có thể phát triển được các website của mình một cách dễ dàng hơn.
Ví dụ: Trong hầu hết các website đều cần có page đăng kí tài khoản cá nhân. Hoặc khai báo thông tin cá nhân trước khi gửi một liên hệ tới người quản trị web. Điều này rất cần có sự hỗ trợ của Form. Tuy nhiên, rất nhiều trường hợp người dùng không điền đầy đủ thông tin cần thiết mà vẫn submit gửi thông tin đến server để xử lí. Vậy để khắc phục điều này, để đưa ra một cảnh báo tới người dùng. Giả Sử như hình sau:
Đó, JavaScript sẽ giúp bạn làm được điều này một cách đơn giản. JavaScript thực sự hữu ích và rất quan trọng phải không các bạn?
Javascript là ngôn ngữ kịch bản (script) không cần trình biên dịch khác với Java (ngôn ngữ cấp cao, để thiết kế các chương trình ứng dụng) mặc dù chúng có phần tương đồng về tên gọi.
Để lập trình được JavaScript bạn cần nắm vững kiến thức về HTML. Ngoài ra, nếu bạn đã có nền tảng kiến thức về các ngôn ngữ lập trình như pascal, C/C++, VB, … thì JavaScript sẽ trở nên rất đơn giản.
2. NHÚNG JAVASCRIPT VÀO FILE HTML:
Bạn có thể nhúng JavaScript vào một file HTML theo một trong các cách sau đây:
· Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT>
· Sử dụng các file nguồn JavaScript (.js)
· Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML
· Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đó.
Trong đó, sử dụng cặp thẻ <SCRIPT>...</SCRIPT> và nhúng một file nguồn JavaScript là được sử dụng nhiều hơn cả.
2.1 SỬ DỤNG THẺ SCRIPT:
Script được đưa vào file HTML bằng cách sử dụng cặp thẻ <SCRIPT> VÀ </SCRIPT>. Và cặp thẻ này có thể đặt trong phần <HEAD> hay <BODY> của file HTML. Nếu đặt trong phần <HEAD> thì nó sẽ được tải và sẵn sang trước khi phần còn lại của văn bản được tải. Tuy nhiên ta cần xác định thuộc tính cho thẻ <SCRIPT> này. Thuộc tính duy nhất được xác định là “LANGUAGE=” dùng để xác định ngôn ngữ của Script được sử dụng (JavaScript hay VBScipt). Do đó, Với cách viết JavaScript chúng ta có cách khai báo như sau:
<SCRIPT LANGUAGE=”JavaScript”>
//các câu lệnh JavaScript.
</SCRIPT>
2.2 Sử dụng một file nguồn JavaScript.
Thuộc tính SRC của thẻ <SCRIPT> cho phép bạn chỉ rõ file nguồn JavaScript
được sử dụng (dùng phương pháp này hay hơn nhúng trực tiếp một đoạn lệnh
JavaScript vào trang HTML).
Cú pháp:
<SCRIPT SRC="file_name.js">
....
</SCRIPT>
Chú ý:
- Thuộc tính SRC có thể được định rõ bằng địa chỉ URL, các liên kết hoặc các đường dẫn tuyệt đối, ví dụ: <SCRIPT SRC=" http://cse.com.vn ">
- Các file javascript bên ngoài thì không được chứa bất kì thẻ html nào và tên file cần có phần mở rộng .js.
2.3 THẺ <NOSCRIPT> VÀ </NOSCRIPT>
Cặp thẻ này dùng để định rõ nội dung thông báo cho người sử dụng biết trình
duyệt không hỗ trợ JavaScript. Khi đó trình duyệt sẽ không hiểu thẻ
<NOSCRIPT> và nó bị lờ đi, còn đoạn mã nằm trong cặp thẻ này sẽ được
Navigator hiển thị. Ngược lại, nếu trình duyệt có hỗ trợ JavaScript thì đoạn mã
trong cặp thẻ <NOSCRIPT> sẽ được bỏ qua. Tuy nhiên, điều này cũng có thể
xảy ra nếu người sử dụng không sử dụng JavaScript trong trình duyệt của mình bằng cách tắt nó đi trong hộp Preferences/Advanced.
3. Các chương trình xử lí sự kiện (event handler): là một đoạn mã hay một hàm
Chúng ta thường thấy trọng các website thường có sự giao tiếp, tương tác với người dùng. Đó là tính năng mà javascript có thể mang lại. Và để có thể làm được điều đó thì Javascript lại phải thông qua các chương trình xử lí sự kiện – một đoạn mã hay một hàm được thực hiện để phản ứng trước một sự kiện… Chương trình xử lí sự kiện được xác định là một thuộc tính của một thẻ HTML.
Ta có một số chương trình xử lý sự kiện trong JavaScript cơ bản như sau:
-
OnBlur: Xảy ra khi input focus bị xoá từ thành phần form. Nói một cách đơn giản. Sự kiện này sẽ xảy ra khi con trỏ chuột được dời khỏi vùng chọn.
-
OnClick: Xảy ra khi người dùng kích vào các thành phần hay liên kết của form.
-
OnChange: Xảy ra khi giá trị của thành phần được chọn thay đổi. Sự kiện này cũng tương tự như OnBlur(). Tuy nhiên, mỗi khi con trỏ dời khỏi vùng chọn mà giá trị value không thay đổi thì sự kiện không được kích hoạt.
-
OnFocus: Xảy ra khi thành phần của form được focus(làm nổi lên). Sự kiện này sẽ xảy ra khi thành phần của form được kích hoạt. chẳng hạn như khi ta đặt con trỏ vào đối tượng text điền họ tên người dùng vậy.
-
onLoad: Xảy ra trang Web được tải.
-
onMouseOver: Xảy ra khi di chuyển chuột qua kết nối hay anchor.
-
onSelect: Xảy ra khi người sử dụng lựa chọn một trường nhập dữ liệu trên form.
-
onSubmit Xảy ra khi người dùng đưa ra một form.
-
onUnLoad Xảy ra khi người dùng đóng một trang.
Ví dụ: Tạo mẫu phiếu điền thông tin (gồm first name và last name + 2 nút submit và review)
Yêu cầu:
- Khi nhấp chuột (onfocus) vào trường text nào thì trường đó chuyển sang màu vàng. Khi nhấp chuột vào vị trí khác thì chuyển về style cũ (background màu trắng).
- Onsubmit: hiện thông báo “WELCOME”;
- Khi nháy vào review thì hiển thị lại thông tin người dùng đã điền.
Hướng dẫn giải: sử dụng hàm alert() để hiển thị hộp thoại thông báo (hàm này sẽ được giới thiệu ở những phần sau); dùng hàm con function để gọi sự kiện onfocus hoặc onblur. Các phương thức style.background để đặt màu nền cho đối tượng.
<html>
<head>
<script>
function setStyle(x)
{ document.getElementById(x).style.background="yellow";}
function setStyle0(x)
{ document.getElementById(x).style.background="white"; }
</script>
</head>
<body>
First name: <input type="text" id="fname" onfocus="setStyle(this.id)" onblur="setStyle0(this.id)" />
<br />
Last name: <input type="text" id="lname" onfocus="setStyle(this.id)" /><br/>
<input id="submit" type="submit" value="submit" onclick ="alert('welcome')"/>
</body>
</html>
KẾT QUẢ:
Hình 1: Hình 2
Khi ta nhấp chuột vào vùng text first name: vùng text này chuyển sang màu vàng như trong hình 1.
Khi ta nhấp chuột sang last name đồng nghĩa với việc ta đã Onblur trường first name à background chuyển về màu trắng như ban đầu. Và trường last name thực hiện sự kiện onfocus() chuyển background sang màu vàng như hình 2.
Khi Nháy chọn review, bằng đoạn code bên trên, sẽ lấy value của các trường tương ứng để hiển thị lại trong box khi nháy review sử dụng sự kiện onClick()
Khi nháy vào submit, thì sự kiện submit sẽ được gọi ra. Kết quả như trong hình trên.
Tài liệu tham khảo: Tài liệu khoa toán tin – ĐHQGHN.
CD hướng dẫn thực hành javascript của nhóm PTPM HG