Chương 5: CĂN BẢN VỀ JAVASCRIPT ppsx

VBscript do Microsoft phát triển, VBscript là một tập con của ngôn ngữ lập trình Visual Basic, các script viết bằng VBscript thích hợp cho môi trườngWindows, phía client nó chỉ chạy tron

Chương 5

CĂN BẢN VỀ JAVASCRIPT

I GIỚI THIỆU

Script hay kịch bản, theo thuật ngữ lập trình, là chương trình chạy với chế

độ thông dịch trên máy khách (client) hay máy chủ (server) nhằm tạo ra các ứngdụng web (web base application) Xét trên phương diện:

- client-side : các script bổ sung vào trang web cho phép tạo ra các trangweb tương tác, có những hiệu ứng động dựa vào mô hình đối tượng trình duyệt(BOM: browser object model)

- server-side: sử dụng các đối tượng liên quan để chạy các script trên server.Các ngôn ngữ kịch bản cho phép phát triển nhanh và dễ dàng các chươngtrình đơn giản hơn là các ngôn ngữ lập trình dạng biên dịch như C, C++

Hai ngôn ngữ kịch bản thông dụng hiện nay là :

JavaScript do hãng Netscape phát triển từ năm 1995 với tên ban đầu là

LiveScript, chú ý rằng JavaScript không có liên quan gì đến ngôn ngữ lập trìnhJava của hãng Sun, nó có tên như vậy là vì mục đích tiếp thị của hãng Netscape dựavào sự nổi tiếng của ngôn ngữ lập trình Java Phiên bản hiện nay là JavaScript 2.0,chạy trên nhiều trình duyệt nên rất được ưa chuộng để viết các script cho các trangweb Trước sự phát triển và ảnh hưởng của JavaScript, hãng Microsoft đã đưa raJScript

VBscript do Microsoft phát triển, VBscript là một tập con của ngôn ngữ lập

trình Visual Basic, các script viết bằng VBscript thích hợp cho môi trườngWindows, phía client nó chỉ chạy trong môi trường IE nên không được ưa chuộng,phía server nó thích hợp với hệ điều hành Windows NT, Windows 2000 Server đểxây dựng các trang ASP

Năm 1996, Netscape đã đệ trình JavaScript cho ECMA (European Computer Manufacturers Association, một tổ chức phi lợi nhuận có sự tham gia

của các công ty phần mềm, máy tính lớn trên thế giới như IBM, Microsoft, NEC,Sun , được thành lập năm 1991, có chức năng chuẩn hóa WWW) để chuẩn hóa,ECMA chỉ tập trung chuẩn hóa phần lõi của JavaScript, còn khác phần khác như

mô hình đối tượng tư liệu (DOM) dành cho các nhà phát triển, do vậy vấn đề lớnnhất còn tồn tại sự khác nhau giữa các trình duyệt là DOM

Hiện nay, JavaScript là ngôn ngữ kịch bản chủ yếu để xây dựng các ứngdụng web chạy phía client, tuy nhiên cần phải chú ý hai đặc điểm quan trọng:

 JavaScript có thể làm được gì ?

- DHTML là tập hợp các công cụ cho phép tạo ra các trang web tương tác, có thểthay đổi nội dung và thể hiện

- Điều khiển trình duyệt.

- Xử lý dữ liệu trong các ứng dụng cilent-side, kiểm tra tính hợp lệ dữ liệu trongcác form

- Lưu các trạng thái trong cookies

 JavaScript không thể làm được gì ?

- Không đọc / ghi file

- Không hỗ trợ mạng

- Không tạo ra các đối tượng đồ họa

II CĂN BẢN VỀ JAVASCRIPT

II.1 Bộ chữ viết Từ khóa Tên

 Bộ chữ viết :Một ngôn ngữ viết bất kỳ được xây dựng trên một bộ ký tự, sau đó tập hợp các từ có nghĩa được gọi là từ vựng, và phải có quy tắc để viết các

từ thành câu để diễn tả hành vi, tức là phải tuân theo cú pháp (syntax) và ngữ pháp(grammar) của ngôn ngữ đó JavaScript sử dụng bộ ký tự sau :

- 26 chữ cái latinh (gồm 26 chữ cái lớn A,B,C, và 26 chữ cái nhỏ a,b,c )

- Ký tự gạch nối _

- 10 chữ số thập phân 0,1,2,3,4,5,6,7,8,9

- Các ký hiệu toán học thông dụng +,-,*,/,=,>,<,()

- Các ký hiệu đặc biệt như các dấu câu và các ký hiệu khác: ; [] ? % $ @ # Chú ý rằng JavaScript sử dụng bộ ký tự thuộc bảng mã Unicode, có nghĩarằng một ký tự được lưu giữ trong 16 bit; khác với bộ mã ký tự ASCII, mỗi ký tựđược lưu giữa trong 8 bit

 Dấu cách (space) dùng để ngăn cách các từ.

 Ghi chú (comment): JavaScript dùng ký hiệu // để xác định một dòng ghi

chú và cặp ký hiệu /* và */ để xác định một khối các dòng ghi chú

 Dấu chấm phẩy (;) đùng để kết thúc một câu lệnh Ví dụ :

 Định danh (identifier) là tên của biến, hằng, hàm được đặt theo quy tắc :

định danh phải được bắt đầu bằng một chữ cái, ký tự gạch dưới _ hay ký tự $; các

ký tự tiếp theo có thể là chữ cái, chữ số, ký tự gạch dưới _ hay ký tự $ Việc xác

định các định danh phải đảm bảo không trùng với các từ dành riêng của JavaScript.Sau đây là một số từ dành riêng của JavaScript:

break for throw case function true catch if try continue in typeof default instanceof var delete new void

do null while else return with false switch

finally this

Trong JavaScrip các định danh phân biệt chữ hoa và chữ thường Theo

phong cách chung của JavaScript thì các định danh bắt đầu bằng một chữ cái inthường, chữ cái của các từ tiếp theo được viết in hoa

Ví dụ : borderLeftColor, getDate() v.v

II.2 Kiểu dữ liệu

So với các ngôn ngữ lập trình khác, JavaScript sử dụng ít kiểu dữ liệu, haikiểu dữ liệu được chấp nhận :

 Kiểu dữ liệu cơ sở chỉ chứa một giá trị đơn như số, chuổi ký tự và giá trị

logic

Kiểu số như số nguyên, JavaScript chấp nhận miền giá trị kiểu nguyên trong

khoảng giữa -253 và 253 ; số dấu chấm động (floating-point numbers)được viết dướidạng thông thường như 3.14 hay dưới dạng khoa học như 0.5e10

Kiểu boolean gồm hai giá trị true và false

Kiểu chuổi ký tự là một chuổi có thể không có ký tự nào hay nhiều ký tự

được bao trong cặp dấu nháy kép hay cặp dấu nháy đơn

Kiểu Null chỉ có một giá trị là null, có nghĩa là không có dữ liệu, chú ý rằngzero và chuổi rỗng không phải null

Kiểu Indefined chỉ có một giá trị indefined, có nghĩa biến đã khai báo nhưngchưa xác định kiểu

Infinity là từ khóa chỉ một giá trị vượt quá giới hạn xử lý của JavaScript NaN là một từ khóa chỉ một biểu thức không thể trả về kiểu số, ví dụ : 7*"abc";

 Kiểu dữ liệu phức (composite data type) gồm các kiểu đối tượng (object),

mãng (array) Chúng ta sẽ nghiên cứu kỹ hai kiểu dữ liệu này trong phần sau củachương này

 Chuyển kiểu dữ liệu : JavaScript là một kiểu ngôn ngữ động, cho phép ta

không cần chỉ rõ kiểu dữ liệu của một biến khi khai báo nó, kiểu dữ liệu của mộtbiến được tự động chuyển sang kiểu phù hợp trong quá trình thi hành script

Ví dụ :

var result;

 Hằng được giới thiệu từ JavaScript 1.5, được chấp nhận từ NN 6.0 và FF

1.0 còn IE không chấp nhận, do vậy sử dụng hằng trong các script phải hết sức cẩnthận

Khai báo hằng :

const sopi = 3.1416;

const tencoquan="DaNang Education College";

const ok = true;

 Biến : là một vùng bộ nhớ lưu trữ dữ liệu được truy xuất qua một tên gọi,

giá trị của biến có thể bị thay đổi khi kịch bản được thi hành

- Khai báo biến bằng cách dùng từ khóa var hoặc bằng cách gán giá trị chobiến, khác với việc khai báo biến một cách chặt chẻ như trong Pascal, JavaScriptchỉ yêu cầu khai báo biến trước khi sử dụng nó

Ví dụ:

var new_amount;

var answer = null;

result = 'Unknown result';

result = 10;

- Phạm vi của biến phụ thuộc vào vị trí khai báo biến trong script Nếu biến được khai báo ngoài hàm (function), nó được xem là biến toàn cục và có thể được

sử dụng tại mọi nơi trong script, ngược lại nếu biến được khai báo trong một hàm,

nó được xem là biến cục bộ và chỉ được sử dụng trong hàm đó mà thôi.

Ví dụ :

<script language = "JavaScript">

var sum = 0; // biến toàn cục

function tinhTong(){

var a = prompt("Nhap a:"); // biến cục bộvar b = prompt("Nhap b:"); // biến cục bộsum = a+b;

alert("Ket qua la:"&sum);

}

</script>

- Lưu ý : Khi một biến được sử dụng mà chưa gán giá trị thì nó sẽ có kiểu

undefined Một biến có thể được sử dụng để chứa giá trị với nhiều kiểu dữ liệukhác nhau

- Khi sử dụng chuổi ký tự, ta sử dụng các ký tự đặc biệt cho những tác vụ

đặc biệt nào đó

Ký tự Ý nghĩa

\r carriage return, đưa con trỏ về đầu dòng

\t đưa con trỏ đến vị trí tab-stop

\" in ra dấu nháy đôi

\\ in ra dấu gạch chéo ngược ( \ )

hoten=prompt("Cho biet quy danh: ");

alert("Kinh chao:"+hoten+"\n"+"Chuc ban may man!");

</script>

II.4 Các toán tử

JavaScript cung cấp một số toán tử để thực hiện các chức năng toán học vàcác chức năng khác Toán tử sử dụng một hay nhiều biến, hằng để tạo ra một giá trịmới, ta sử dụng các tóan tử để tạo ra các biểu thức phức tạp Trong phần này ta sẽgiới thiệu sơ lược những toán tử tương tự như trong các ngôn ngữ lập trình Pascal,

C và tập trung mô tả kỷ về các toán tử đặc trưng của JavaScript

phương pháp thực hiện toán tử gán :

- X = 10; // giá trị 10 được gán cho biến X

- total = mathematics + physics + chemistry // gán một biểu thức cho biến

- a+ = 3 // dạng viết rút gọn, tương tự như a = a+3; dạng rút gọn này có thể ápdụng cho các toán tử số học và các toán tử & (and) , ^ (xor), | (or)

 Các Toán tử số học: +, , *, /, %, ++, , các toán tử một ngôi +,

-Chú ý :

++x sẽ trả lại giá trị của x sau khi tăng x thêm 1

x++ sẽ trả lại giá trị của x trước khi tăng x thêm 1

Ví dụ :

<script language="javascript">

 Các toán tử logic : && (and), || (or) , ! (not)

 Toán tử string +, dùng để nối hai chuổi ký tự Ví dụ:

- "Da Nang"+" "+"City" trả về kết quả "Da Nang City"

- 41+" Le Duan" trả về kết quả "41 Le Duan" (chuyển kiểu dữ liệu trước khighép chuổi)

- Lưu ý : 2 - '1' = 1 (chuyển kiểu dữ liệu trước khi thực hiện phép trừ)

 Toán tử Bit xử lý các toán hạng như là một tập hợp 32 bit, kết quả trả về kiểu

số chuẩn của JavaScript

& Mỗi vị trí bit trả về 1 khi cả hai tóan hạng là 1

| Mỗi vị trí bit trả về 1 khi một trong hai tóan hạng là 1

~ Đảo ngược các bít của tóan hạng

^ Mỗi vị trí bit trả về 1 khi chỉ có 1 trong hai tóan hạng là 1

15 << 3, có nghĩa dịch sang trái 3 bit của dãy 1111, kết quả là 1111000 (120)

15 >> 3, có nghĩa dịch sang phải 3 bit của dãy 1111, kết quả là 1

25>>>3, có nghĩa dịch sang phải 3 bit của dãy 11001 và điền 0 vào vị trí các bittrống, kết quả là

 Một số toán tử đặc biệt:

- Toán tử điều kiện có cú pháp: condition ? expr1 : expr2

condition là một biểu thức logic, nếu true thì toán tử trả về giá trị expr1, ngượclại trả về giá trị expr2

Ví dụ : status = (age>=18; "aldult" : "minor")

- Toán tử , (comma) lượng giá cả hai toán hạng và trả về tóan hạng thứ hai.

Ví dụ : x = (a++,c)*(b++,d) // tương đương với x = c*d

- Toán tử typeof trả về một chuổi ký tự xác định kiểu dữ liệu của toán hạng, kiểu

dữ liệu của toán hạng có thể là : số, chuổi, logic, đối tượng (object, array, null), function và undefined.

- Toán tử new được dùng để tạo ra một thể hiện (instance) của một kiểu đối tượng

có hàm khởi dựng Kiểu đối tượng này có thể là do người sử dụng định nghĩa, đối

tượng dựng sẵn hay đối tượng mãng Cú pháp :

objectName = new objectType (param1 [,param2] [,paramN]);

Trong đó :

objectName : tên của thể hiện đối tượng

objectType : là một hàm xác định kiểu của đối tượng

parami : là các giá trị của các thuộc tính của đối tượng

- Toán tử this được dùng như một từ khóa tham chiếu đến một thuộc tính của đối

tượng được gọi

var nhanVienMoi = new nhanvien("Le Van", "001","Quan ly")

document.write("Ho va ten :" + nhanVienMoi.hoten+"<br>");

// Date() là đối tượng dựng sẵn của JavaScript

var homNay = new Date();

var ngay = homNay.getDate();

var thang = homNay.getMonth();

var nam = homNay.getYear();

// getDate(), getMonth, getYear() là các phương thức của Date()document.write("Hom nay,ngay :" + ngay+"/"+thang+"/"+nam);

</SCRIPT>

</BODY>

</HTML>

- Toán tử delete được dùng để xóa đi một đối tượng, thuộc tính của đối tượng hoặc

II.5 Các biểu thức quy tắc (Regular Expressions)

Biểu thức quy tắc là các khuôn mẫu (pattern) dùng để so khớp với các chuổicon trong một chuổi ký tự Trong các môi trường Unix, Perl biểu thức quy tắc làcông cụ mạnh để tìm kiếm và thay thế JavaScript sử dụng biểu thức quy tắc từphiên bản 1.4, nó là một đối tượng

Một biểu thức quy tắc được cấu tạo từ một số thành phần, xét ví dụ sau:

Tham số g (global) chỉ rằng biểu thức quy tắc là toàn cục, cho phépJavaScript xử lý tất cả các thể hiện chuổi không chỉ một lần trong cùng thời điểm.Tham số i (is not case sensitive) chỉ rằng việc so khớp phân biệt chữ hoa và chữthường

 Tạo biểu thức quy tắc : có hai phương pháp

- Sử dụng ký hiệu trực kiện : re = /Da Nang/

- Sử dụng phương thức khởi tạo (hàm dựng) : re = new RegExp("Da Nang")

Ví dụ :

<HTML><BODY>

<SCRIPT language="javascript">

var re = new RegExp("Da "+"Nang")

var str=re.exec("Trung tam phat trien phan mem Dai hoc Da Nang-SDC");alert(str);

/* phương thức exec so khớp chuổi "Da Nang" với chuổi "Trung tam ",

* nếu tìm thấy, trả về giá trị "Da Nang", ngược lại trả về giá trị null */

</SCRIPT>

</BODY></HTML>

Một khuôn mẫu của biểu thức quy tắc bao gồm:

 Khuôn mẫu đơn : được cấu tạo bằng các ký tự mà ta muốn so sánh trực

tiếp như trong ví dụ trên

 Tổ hợp khuôn mẫu đơn và các ký tự đặc biệt : giống như việc sử dụng toán

tử LIKE của ngôn ngữ SQL, JavaScript cung cấp cho người sử dụng các ký tự đặcbiệt để xây dựng khuôn mẫu phức tạp hơn Ví dụ với khuôn mẫu /43*2100/ ta thựchiện so khớp với chuổi "ABCD43LD-2100EFG" ta được "43LD-2100"

JavaScript cung cấp các ký tự đặt biệt sau đây để xây dựng khuôn mẫu:

\ Khai báo một ký tự đặc biệt có ý nghĩa sử dụng theo quy ước ở các phần

đưới

\b (delimits a word Boundary) Xác định ranh giới của một từ

\B Xác định một vị trí không có ranh giới của từ

\d Thay cho một chữ số từ 0-9 Ví dụ /2\d\d\d/ so khớp với 2000

\D Thay cho một chữ số hay chữ cái

\w Thay cho một từ (word character)

\W Thay cho một nhóm ký tự không phải là từ, như dấu cách, dấu câu

\s Thay cho dấu cách, tab và ký tự xuống hàng

\S Thay cho một khoảng cách

^ So khớp với phần đầu một dòng hoặc dữ liệu nhập.

/^A/ so khớp với "Anh bộ đội" nhưng không khớp với "Sống như Anh"

$ So khớp với phần cuối một dòng hoặc dữ liệu nhập.

* So khớp với một ký tự có trước, có thể 0 hoặc nhiều lần Ví dụ /t*ch/ so

khới với "thu hoach", với "chung ta"

+ So khớp với một ký tự có trước, có thể 1 hoặc nhiều lần Ví dụ /r+/ so

khớp với "read", hay "arrange"

? So khớp với một ký tự có trước, có thể 0 hoặc một lần Ví dụ /e?le?/ so

khớp với "el" trong "angel" hay "le" trong "title"

. So khớp với mọi ký tự đơn, ngoại trừ ký tự newline Ví dụ : /n./ so khớp

với "no" trong "nothing", /.n/ so khớp với "in" trong "nothing"

(x) So khớp với x và nhớ sự so khớp này Ví dụ /(boo)/ so khớp với "green

bamboo" Khi được nhớ, chuổi con có thể được gọi lại cho sử dụng khác.x|y So khớp với x hoặc y Ví dụ /ca|chim/ so khớp với "chim bay ve to"{n} n∈N, so khớp đúng n lần ký tự đứng trước Ví dụ /h{3}/ so khớp với

"hhh" trong chuổi "a hhhha !"

{n,} n∈N, so khớp ít nhất n lần ký tự đứng trước.

{n,m} m, n∈N; so khớp ít nhất n lầnvà nhiều nhất m lần ký tự đứng trước.

[xyz] So khớp với bất kỳ một trong các ký tự bên trong cặp ngoặc vuông Có

thể sử dụng dấu gạch nối (-) để xác định phạm vi Ví dụ /[^a-z]a/ so khớp

với "Ma" trong chuổi "Mary has a little lamp"

[\b] So khớp với ký tự xóa lui (backspace)

\b So khớp với biên của từ

Biểu thức quy tắc được dùng với các phương thức biểu thức quy tắc: exec, test

và các phương thức của đối tượng String: match, search, replace, split.

Method Mô tả

exec Tìm so khớp trong một chuổi, trả về chuổi con tìm được hay null

test Tìm so khớp trong một chuổi, trả về true hay false

match Phương thức String dò tìm một chuổi con Ví dụ

<script language="javascript">

var str =new String;

str="Ta di ta nho que nha";

alert(str.match(/ta/)); // trả về chuổi "ta"

</script>

search Phương thức String dò tìm một chuổi con, trả lại vị trí tìm được trong

chuổi dò tìm, nếu không tìm thấy trả về -1

replace Phương thức String dò tìm một chuổi con và thay thế chuổi con được sử

dụng so khớp bằng một chuổi con khác

split Phương thức String sử dụng biểu thức quy tắc hoặc chuổi cố định để tách

một chuổi vào một mãng các chuổi con

// biểu thức quy tắc định nghĩa 5 chữ số

if (document.myform.myinput.value.search(re5digit)==-1) // nếu so khớp sai

alert("Xin vui lòng nhập 5 chữ số vào form")

}

</SCRIPT>

<FORM name="myform">

<INPUT type="text" name="myinput" size=15>

<INPUT type="button" onClick="checkPostal()" value="check">

count++; // thực hiện toán tử increment

xInt = Math.round(y); // gọi hàm round của đối tượng Math và gán giá

trị cho biến xIntwindow.alert("Kinh chao"); // gọi hàm alert của đối tượng window

 Câu lệnh có cấu trúc gồm có : khối lệnh và các câu lệnh điều khiển

(control statements), lệnh with (dùng cho kiểu Object)

Khối lệnh được bao bởi cặp ký hiệu { và } Ví dụ:

{

x1 = (b + Math.sqrt(delta))/2*a;

x1 = (b - Math.sqrt(delta))/2*a;

window.document.write("Nghiệm là:" + x1 +"," + x2);

}

Các câu lệnh điều khiển : câu lệnh lựa chọn, câu lệnh lặp

III.2 Câu lệnh điều kiện

Trong JavaScript có hai câu lệnh điều kiện: câu lệnh if cho phép chươngtrình chọn một trong hai lựa chọn và câu lệnh swich cho phép chương trình chọnmột trong nhiều lựa chọn

III.2.1 Câu lệnh if

 Cú pháp : câu lệnh if được viết theo một trong bốn dạng sau:

o if (biểu thức logic) câu lệnh ;

if (biểu thức logic 1) { khối lệnh 1; }

else {

if (biểu thức logic 2) {khối lệnh 21;}

else {khối lệnh 22;}

}

if (biểu thức logic 1) { khối lệnh 1;}

else if (biểu thức logic 2;) {

khối lệnh 21; } else {khối lệnh 22; }

Ví dụ : Giải phương trình bậc nhất một ẩn ax + b = 0

<HTML><BODY>

<SCRIPT language="JavaScript">

var x;

var a = window.prompt("Nhap a:");

} }

else window.alert("Phuong trinh co vo so nghiem);

III.2.1 Câu lệnh switch

Câu lệnh switch có vai trò giống như câu lệnh if-else, câu lệnh switch lượnggiá của một biểu thức và so sánh giá trị này với một trong nhiều giá trị trong mệnh

đề case để thực hiện lệnh và thóat khỏi câu lệnh switch với câu lệnh break Cúpháp:

<SCRIPT language="JavaScript">

var bc = window.prompt("Nhap ma tinh/thanh pho: ");

// Lưu ý: hàm prompt trả về giá trị kiểu chuổi.

JavaScript có các câu lệnh lặp: câu lệnh while, câu lệnh do while,câu lệnh

for và câu lệnh for in

Để thoát ra khỏi một vòng lặp ta sử dụng lệnh break, để tiếp tục thực hiệnvòng lặp dùng lệnh continue

III.3.1 Câu lệnh while

Cú pháp : while( biểu thức logic) {

}while (i<=6);

III.3.3 Câu lệnh for

Cú pháp :

for(khởi tạo; biểu thức điều kiện;thay đổi giá trị) {câu lệnh;}

Phần khởi tạo dùng để khai báo các biến và gán giá trị khởi đầu.Phần biểu

thức điều kiện để lượng giá trước mỗi lần lặp Phần thay đổi giá trị chứa mã lệnh

sẽ được thực hiện sau mỗi lần lặp.

Các thành phần của lệnh for là tùy chọn, lệnh sau đây thực hiện vòng lặp vô tận : for( ; ; ){ // không thực hiện gì }

Ví dụ: Tính tổng từ 1 đếm 100 Ta có thể thực hiện bằng các script như sau.

• Câu lệnh for đầy đủ các khai báo

• Câu lệnh for sử dụng với lệnh continue

In ra màn hình các số trong phạm vi từ 1 đến 100 chia hết cho 17

for(var i=1; i<=100; i++){

if (i % 17 !=0) continue;

document.write(i+"<br>");

}

III.3.3 Câu lệnh for in

Cú pháp : for (biến in đối tượng) { lệnh ; }

Đây là câu lệnh thường được dùng để truy xuất các thuộc tính của một đốitượng mà chúng ta sẽ nghiên cứu ở chương sau

Ví dụ

var sinhVien={

Hoten: "Nguyen Van Long",