Trang 161
PHẦN C: NGÔN NGỮ KỊCH BẢN - JAVASCRIPT
Chương 7: CẤU TRÚC CƠ BẢN CỦA NGÔN NGỮ
Chương này giới thiệu đến sinh viên những vấn đề: Khái niệm và đặc tính của ngôn ngữ
Javascript, cách khai báo và sử dụng javascript trong trang HTML, cú pháp câu lệnh, các kiểu
dữ liệu của ngôn ngữ, các đối tượng được sử dụng để tương tác với người sử dụng.
Học xong chương này, sinh viên có thể lập trình hướng đối tượng với ngôn ngữ javascript và
vận dụng kiến thức lập trình và kiến thức về ngôn ngữ HTML, CSS để lập trình tương tác với
người sử dụng thông qua các điều khiển của form.
7.1. GIỚI THIỆU
Javascript là ngôn ngữ thông dịch được nhúng vào trang HTML. Tức là, toàn bộ trang web sẽ
được tải xuống cho trình duyệt và mã kịch bản (javascript) sẽ được thực thi khi một sự kiện được
bẫy. Tại một thời điểm, một dòng lệnh sẽ được thông dịch khi chương trình được gọi thực thi.
Đặc tính của javaScript:
- Đơn giản.
- Động(Dynamic). Cùng với CSS, HTML, javascript tạo ra trang web động (DHTML). Cho
phép tương tác với người sử dụng ở client-side.
- Hướng đối tượng (Object Oriented).
- Netscape Navigator cung cấp các đối tượng cho phép JavaScript tương tác với file HTML,
các đối tượng này cho phép chúng ta điều khiển việc hiển thị thông tin và đáp ứng các sự
kiện của người sử dụng.
Tuy nhiên, javascript hoạt động trên các trình duyệt khác nhau, phiên bản khác nhau cho kết
quả và yêu cầu khác nhau. Do đó, khi viết kịch bản javascript phải xác định được phạm vi hoạt động
và mức độ tác động của kịch bản.
Javascript không đảm bảo cho việc bảo mật dữ liệu.
7.2. CHÈN JAVASCRIPT VÀO TRANG HTML
7.2.1. Sử dụng thẻ <script>
Vị trí của thẻ <script> trong tài liệu HTML thường là trong phần <head> hoặc bất kì vị trí nào
trong phần <body>. Tuy nhiên, để có thể tải trang được nhanh thì phần kịch bản của javascript
thường đặt cuối tài liệu HTML, ngay trước thẻ đóng <body>.
<script language=”javascript”>
<!—
(các câu lệnh javascript)
//
</script>
Hoặc khai báo thẻ
<script type="text/javascript">
// các câu lệnh javascript
</script>
Trang 162
7.2.2. Chèn trực tiếp qua biến cố
Có thể đưa một lệnh đơn vào 1 thẻ HTML thông qua biến cố.
<html_tag attibute=”option” onEvent=”câu lệnh javascript”>
</html_tag>
Ví dụ 7.1: Khung có chứa hình nền, khi trỏ chuột vào khung hình thì thay bằng hình ảnh khác.
<html>
<head>
<title>Vi du ve script anh</title>
</head>
<body background="../images/LEAVES1.jpg">
<h1 align=center>DANH SÁCH FILE ẢNH</h1>
<table width=80%>
<tr><td align=top>Danh sách file</td><td>Preview</td></tr>
<tr><td align=top><ol>
<li onmouseover="pre.src='../images/19.jpg'"
onclick="body.background='../images/19.jpg'">Hình 1</li><br>
<li onmouseover="pre.src='../images/23.jpg'"
onclick="body.background='../images/23.jpg'">Hình 1</li>
</ol></td>
<td><img name="pre" src="../images/PAWBKND3.jpg" width=200 height=200 alt="Click
here to preview the image"></td>
</tr>
</table>
<img src="../images/PAWBKND3.jpg" width=200 height=200 alt="Click here to preview the
image" onclick="src='../images/23.jpg'" onmouseout="src='../images/19.jpg'">
</html>
7.2.3. Sử dụng tập tin JavaScript bên ngoài
<script language=”javascript” src=”http://www.hcmuns.edu.vn/scroll.js”>
<!- -
JavaScript Program
- - >
</script>
Có thể đặt thẻ khai báo kịch bản ở cuối phần nội dung; ngay trước thẻ </body>, dạng như sau:
<! DOCTYPE html>
<html>
<head>
<title>tieu de trang</title>
</head>
<body>
//Thẻ đánh dấu HTML
<script language=”javascript” src=file.js>
</script>
</body>
</html>
Cách này làm cho việc tải trang được thực hiện nhanh hơn vì nó đảm bảo nội dung trang được
tải và cho phép người sử dụng nhập dữ liệu trong khi chờ tải phần javascript.
Trang 163
7.3. CÚ PHÁP VÀ CÁC QUY DỊNH
Câu lệnh trong javascript:
- Mỗi câu lệnh được viết trên một hàng. Nếu có nhiều câu lệnh trên cùng hàng thì dấu ; được
sử dụng như kết thúc câu lệnh và để phân cách các câu lệnh. Tuy nhiên, mỗi câu lệnh nên
viết trên một hàng và kết thúc bằng dấu (;)
- JavaScript là ngôn ngữ có tính case sensitive (phân biệt chữ hoa, chữ thường).
- Tương tự HTML, javaScript bỏ qua các khoảng trắng, tabs, xuống dòng mới.
Chẳng hạn: var x=0; tương tự var x = 0;
- Dấu xổ ngược (\) được sử dụng để hiển thị các ký tự không thể nhập trực tiếp từ bàn phím.
- Dấu móc mở và đóng
Tất cả các dấu móc mở phải có dấu móc đóng.
[]: được dùng cho giá trị theo chỉ số mảng.
(): được dùng cho hàm và các đối số.
{}: được dùng để gom các câu lệnh javaScript thành một khối lệnh.
Ví dụ 7.2: Ví dụ:
if (x[0]==10){
x[0]=0;
x[1]=0;
}
- Chú thích:
Người lập trình có thể chư thích trên một dòng hoặc nhiều dòng liền nhau trên một khối theo
cú pháp sau:
Dấu chú thích dòng: //
Dấu chú thích khối: /* khối chú thích */
- Biến và tên hàm: phải tuân thủ các quy tắc sau:
Biến được sử dụng để lưu trữ giá trị cho đối tượng.
Biến có thể không cần khai báo trước, khi gán giá trị cho biến thì mặc định biến đã được
khai báo. Tuy nhiên, để dễ dàng kiểm soát các biến đã khai báo và sử dụng thì biến nên
được khai báo trước.
Ký tự đầu phải là: chữ cái (hoa, thường), dấu gạch dưới (_), dấu $ (không nên dùng vì
javaScript 1.1 không hỗ trợ).
Ký tự đầu không được là ký số.
Trang 164
Không chứa ký tự trắng.
Không được trùng với các từ khóa của javaScript.
7.4. XUẤT DỮ LIỆU RA CỬA SỔ TRÌNH DUYỆT
7.4.1. Phương thức write()
document.write()
document.writeln()
Ví dụ 7.3: Đưa dữ liệu ra document
document.write(“Test”);
document.writeln(“Test”);
7.4.2. Làm việc với dialog boxes
a. Sử dụng phương thức alert() để hiển thị thông báo.
Ví dụ 7.4: Thông báo với alert
<html>
<head> <title>example 2.5 </title></head>
<body><script language="javascript">
<!- -
document.write("<img src='../images/7up.gif'>");
- ->
</script>
<input type=button onclick="alert('welcome to my site')">
<img src='../images/7up.gif'></body></html>
Hình 7-1. Danh sách từ khóa của Javascript
Trang 165
b. Sử dụng phướng thức promt() để tương tác với người sử dụng.
Ví dụ 7.5: Lấy thông tin người sử dụng với promt
<html>
<head><title>listing 2.6</title></head>
<body><script language="javascript">
document.write("your favorite color is:");
document.writeln(prompt("enter your favorite color:","blue"));
</script>
</body></html>
7.5. CÁC KIỂU DỮ LIỆU TRONG JAVASCRIPT
7.5.1. Dữ liệu kiểu số
- Số nguyên ví dụ: 720
- Số ở hệ Octal ví dụ : 056
- Số ở hệ Hexa ví dụ: 0x5F
- Số thập phân ví dụ: 7.24 , -34.2 ,2E3
Kiểm tra dữ liệu kiểu số: hàm isNaN()
- Nếu đối số là chuỗi số thì kết quả là số.
- Nếu đối số là chuỗi rỗng hoặc null thì kết quả là 0.
- Nếu đối số là chuỗi thì kết quả là NaN.
Chuyển chuỗi số thành số:
- Hàm Number()
- Hàm parseInt()
- Hàm parseFloat()
7.5.2. Dữ liệu kiểu chuỗi
Chuỗi bao gồm không hoặc nhiều kí tự. Tập kí tự có thể là chữ, số, kí hiệu và khoảng trắng.
Chuỗi đặt trong cặp dấu nháy “ “ kép hoặc nháy đơn’ ‘.
Ví dụ 7.6: Chuỗi dữ liệu
” Hello” hoặc ’245’ hoặc “ “
Ghép chuỗi với toán tử +
var lang =
“
Java
”
;
lang = lang +
“
Script
”
;
- Một số ký tự đặc biệt trong chuỗi (đi liền sau dấu \) và ý nghĩa:
Bảng 7-1. Các kí tự chuỗi đặc biệt
\b
Backspace
\f
Form feed (đẩy trang)
\n
New line (xuống dòng mới)
\r
Carriage return (trở về đầu dòng)
\t
Tab
\”
Dấu nháy kép “
\’
Dấu nháy đơn ‘