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

Chia sẻ: Le Van Vu | Ngày: | Loại File: DOC | Số trang:28

0
177
lượt xem
96
download

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

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

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 ứng dụ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 trang web 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)

Chủ đề:
Lưu

Nội dung Text: Chương 5: CĂN BẢN VỀ JAVASCRIPT

  1. 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 ứng dụ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 trang web 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ương trì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ình Java 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ựa và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 trang web. Trước sự phát triển và ảnh hưởng của JavaScript, hãng Microsoft đã đưa ra JScript. 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ường Windows, 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ớn nhấ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 ứng dụ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. 66
  2. - Đ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 trong cá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 +,-,*,/,=,>,
  3. 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 in thườ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, hai kiể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ưới dạ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ằng zero 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ưng chư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ủa chươ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ột biến được tự động chuyển sang kiểu phù hợp trong quá trình thi hành script. Ví dụ : var result; 68
  4. x=1000; st="lan cam on Ban"; result=x+st; document.write(result); Kết quả ta được trên màn hình : 1000 lan cam on Ban! II.3. Hằng và Biến.  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ẩn thậ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ị cho biến, khác với việc khai báo biến một cách chặt chẻ như trong Pascal, JavaScript chỉ 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ụ : 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); } - 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ệu khá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 đó. 69
  5. Ký tự Ý nghĩa \b backspace \f form feed \n new line, xuống dòng \r carriage return, đưa con trỏ về đầu dòng \t đưa con trỏ đến vị trí tab-stop \v vertical tab \' in ra dấu nháy đơn \" in ra dấu nháy đôi \\ in ra dấu gạch chéo ngược ( \ ) Ví dụ : var st = "Shakespeare written \"To be or not to be \" "; document.write(st); Kết quả sẽ in ra trên màn hình là: Shakespeare written "To be or not to be"; hoten=prompt("Cho biet quy danh: "); alert("Kinh chao:"+hoten+"\n"+"Chuc ban may man!"); 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.  Toán tử gán (=) dùng để gán một giá trị cho một biến. JavaScript có nhiều 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ể áp dụ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ụ : 70
  6. var x=1; prior = x++; follow = x; st= "Gia tri ban dau cua x =1 \n"+"x++ ="+prior+"\n"+"Sau khi tang x, x="+ follow; alert(thongbao);  Các toán tử so sánh : = =, !=, >, =, Dịch sang phải >>> Dịch sang phải và điền đầy các bit trống bằng 0 Các ví dụ : 10 & 15 trả về 10 ( 1010 & 1111 -> 1010) 10 | 15 trả về 15 ( 1010 | 1111 -> 1111) 10 ^ 15 trả về 5 (1010 ^ 1111 -> 0101) 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 bit trố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ược lạ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 71
  7. - 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. Ví dụ 1: // đối tượng do người sử dụng định nghĩa function nhanVien(hoten, maso, chucdanh){ this.hoten = hoten; this.maso = maso; this.chucdanh = chucdanh; } var nhanVienMoi = new nhanvien("Le Van", "001","Quan ly") document.write("Ho va ten :" + nhanVienMoi.hoten+""); document.write("Ma so :" + nhanVienMoi.maso+""); document.write("Chuc danh :" + nhanVienMoi.chucdanh); Ví dụ 2: // 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); 72
  8. - 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 một phần tử của mãng. Cú pháp: delete objectName delete objectName.property delete objectName[index] 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ổi con 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ép JavaScript 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ụ : 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 */ 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ự đặc biệt để xây dựng khuôn mẫu phức tạp hơn. Ví dụ với khuôn mẫu / 73
  9. 43*2100/ ta thực hiệ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: Ký tự Ý nghĩa và ví dụ \ 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ả 74
  10. 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ụ var str =new String; str="Ta di ta nho que nha"; alert(str.match(/ta/)); // trả về chuổi "ta" 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 Ví dụ 1: function checkPostal(){ // kiểm tra hợp lệ dữ liệu của form var re5digit=/^\d{5}$/ // 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") } III. CÁC CÂU LỆNH CỦA JAVASCRIPT III.1. Câu lệnh Các câu lệnh trong JavaScript cách nhau bằng dấu chấm phẩy (;), câu lệnh được chia ra hai loại: câu lệnh đơn giản và câu lệnh có cấu trúc.  Câu lệnh đơn giản gồm có : phép gán, lời gọi hàm. Ví dụ: x = 7; // phép gán 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 xInt window.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) 75
  11. 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ương trì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ọn mộ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 ; o if (biểu thức logic) câu lệnh ; o if (biểu thức logic) { khối lệnh } o if (biểu thức logic) { khối lệnh } Ví dụ : if isNaN(x){ window.alert(x+" khong phai la mot so"); } ( Hàm isNaN kiểm tra một giá trị và trả về true nếu đó là một số, ngược lại trả về false nếu không phải là một số)  Mệnh đề else : dùng trong trường hợp có hai sự lựa chọn tùy theo giá trị của biểu thức logic. Dạng câu lệnh này được gọi là câu lệnh if-else. Cú pháp: if (biểu thức logic) { khối lệnh 1; } else {khối lệnh 2;}  Cấu trúc else if: ta thường gọi các câu lệnh if lồng nhau, dùng để chọn một lựa chọn trong nhiều lựa chon. Có bốn cách viết câu lệnh if lồng nhau, ta thường sử dụng hai cách viết sau: if (biểu thức logic 1) { khối lệnh 1; } if (biểu thức logic 1) { khối lệnh 1;} else { else if (biểu thức logic 2;) { if (biểu thức logic 2) {khối lệnh 21;} khối lệnh 21; } else {khối lệnh 22;} else {khối lệnh 22; } } Ví dụ : Giải phương trình bậc nhất một ẩn ax + b = 0 76
  12. var x; var a = window.prompt("Nhap a:"); var b = window.prompt("Nhap b:"); if (a!=0){ x=(-b/a); window.alert("Nghiem la "+x); } else { if (b!=0){ window.alert("Phuong trinh vo nghiem"); } else { window.alert("Phuong trinh co vo so nghiem); } } Đọan script trên có thể thay bằng đọan mã sau, đơn giản và trong sáng hơn: if (a!=0){ x=(-b/a); window.alert("Nghiem la "+x); } else if (b!=0) window.alert("Phuong trinh vo nghiem"); 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ượng giá 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: switch(biểu thức) { case gtrị1 : nhóm lệnh 1; break; ... case gtrịN : nhóm lệnh N; break; default : nhóm lệnh N+1; } Từ khóa case là một nhãn, nó đánh dấu một điểm trong mã script để thực hiện một lệnh. 77
  13. Ví dụ : Nhập vào một mã số tỉnh / thành phố và in ra tên của tỉnh / thành phố đó. var bc = window.prompt("Nhap ma tinh/thanh pho: "); // Lưu ý: hàm prompt trả về giá trị kiểu chuổi. switch (bc){ case "04": alert("Ha Noi"); break; case "08": alert("Tp Ho Chi Minh"); break; case "0511": alert("Da Nanng"); break; default: alert("Chua xac dinh duoc"); } III.3. Lệnh lặp 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ện vò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) { các lệnh; } Ví dụ : Tính tổng các số nguyên nhập từ bàn phím, nhập 0 để kết thúc. var sum = 0; while (true){ i= parseInt(prompt("Nhap mot so nguyen, nhap 0 de ket thuc",0)); if (i==0) break; sum+=i; } alert("Ket qua: "+sum); III.3.2. Câu lệnh do ... while Cú pháp :do { các lệnh; } while (biểu thức logic); Ví dụ 1 : In ra màn hình các dòng tiêu đề từ 1 đến 6 (H1-H6) 78
  14. var i =1; do { document.write(""+"Tieu de thu "+i+""); i++; }while (i
  15. Đây là câu lệnh thường được dùng để truy xuất các thuộc tính của một đối tượng mà chúng ta sẽ nghiên cứu ở chương sau. Ví dụ var sinhVien={ Hoten: "Nguyen Van Long", Lop: "03CTT01", DiChi: "Da Nang" }; // định nghĩa một đối tượng; for(var i in sinhVien){ document.write(sinhVien[i]+"");} III.3.4. Câu with Câu lệnh with chi phép ta truy xuất các thuộc tính và các phương thức một đối tượng mà không cần xác định tên đối tượng trong các dòng lệnh. Cú pháp : with(tên đối tượng) { lệnh;} Ví dụ var sinhVien={ Hoten: "Nguyen Van Long", Lop: "03CTT01", DiChi: "Da Nang" }; // định nghĩa một đối tượng; with(sinhVien){ document.write(Hoten+""); document.write(Lop+""); document.write(DiaChi); } III.4. Câu lệnh try-catch Câu lệnh try-catch dùng để cho phép script xử lý lỗi thay vì trình duyệt. Nó thường được dùng để thông báo một câu lệnh có xác suất lỗi cao. Cú pháp: try{ khối lệnh;} catch{ khối lệnh xử lý lỗi;} Ví dụ: đọan mã sau đây cố gắng in ra giá trị của một biến chưa được khai báo và gán giá trị, không thành công sẽ thông báo lỗi. try {document.write(unknownVariable);} catch(e){alert(e.message);} finally{document.write("This is the finally message.");} // đọan mã này chỉ phù hợp với JavaScript 1.4 trở lên 80
  16. III.5. Câu lệnh throw Câu lệnh throw cho phép một script khai báo một lỗi và có thể chặn bắt bằng cách dùng câu lệnh try-catch. Ví dụ: try { var i = 0; if(i != 1) { throw "Loi nang"; } } catch(error) { if(error == "Loi nang") document.write("This is a thrown error message:"+ " i is not one."; } finally { document.write("This is the finally message.");} IV. CĂN BẢN VỀ HÀM TRONG JAVASCRIPT IV.1. Định nghĩa hàm Hàm là một khối lệnh và được gán bởi một tên. Các hàm được định nghĩa bằng từ khóa function. Cú pháp như sau: function tênHàm( danh sách các tham số){ khối lệnh; return [giá trị trả về của hàm]; } - Các tham số cách nhau bởi dấu phẩy (,), một hàm có thể không có tham số nào. Một hàm có thể định nghĩa mà không có tham số nào nhưng các dấu ngoặc đơn là bắt buộc. - Trong khối lệnh, hàm có thể gọi một hàm khác và có thể gọi lại chính nó , ta gọi hàm được định nghĩa đệ quy. - Câu lệnh return có hai mục đích là : nó buộc thoát ra khỏi một hàm và truyền lại một giá trị cho dòng lệnh đã gọi hàm.Nếu hàm trả về một giá trị thì nó có thể tham gia trong các biểu thức. Ví dụ: Định nghĩa hàm sum trả về tổng hai số. function tong(a,b){ return a+b; } 81
  17. Có những hàm không trả về giá trị, chúng chỉ thực hiện một lọat các lệnh như các Procedure của Pascal. Hàm sau đây in ra màn hình ngày tháng của hệ thống. function inNgay(){ var homNay = new Date(); var ngay = homNay.getDate(); var thang = homNay.getMonth(); var nam =homNay.getYear(); document.write("Hom nay ngay: "+ngay+"-"+thang+"-"+nam); return; } Trong trường hợp này hàm trả về giá trị undefined. IV.2. Lời gọi hàm Gọi hàm là thi hành các mã lệnh được chỉ định và các tham số được chỉ ra. Nếu hàm không trả về giá trị, ta có lời gọi : tênHàm(danh sách tham số); Ví dụ hàm inNgay ở trên có lời gọi hàm: inNgay(); Nếu hàm trả về giá trị ta có thể sử dụng như một thành phần của biểu thức, được sử dụng trong các hàm khác như một giá trị, hay một giá trị trong phép gán cho biến. Ví dụ hàm sum(a,b) ở trên : var x = tong(5,6); var i = 4; var j+=i; var ketqua = 8+tong(i,j); JavaScript truyền tham số (nếu tham số không phải là một đối tượng, chúng ta sẽ nghiên cứu ở chương sau) theo giá trị, có nghĩa một hàm không làm thay đổi giá trị của một biến toàn cục làm tham số của hàm. Ví dụ : var a = 10; var b = 20; function lamGi(bien){ bien++; b*=2; document.write("Gia tri moi cua tham so "+bien"+"); } lamGi(a); // lời gọi hàm document.write("Gia tri moi bien toan cuc a "+a); document.write("Gia tri moi bien toan cuc b "+b); Sau khi thực hiện script chỉ có giá trị của biến b thay đổi, còn a giữ nguyên. 82
  18. IV.3. Những tính chất của hàm IV.3.1. Function Constructor Function Constructor (trong thuật ngữ Tiếng Việt không có từ nào dịch rõ nghĩa) trong JavaScript cho phép ta tạo ra một biến và gán nó cho biến như là một giá trị. Ví dụ: var q = new Function('a','b', 'return a*b;'); Một hàm được định nghĩa theo cách này kéo theo bởi biến được gán, có nghĩa là q bây giờ có thể họat động như một hàm với hai tham số a, b và trả về giá trị a+b. var x = q(2,3); // kết quả trả về là một giá trị kiểu số Hàm được xây dựng như vậy được gọi là hàm ẩn danh, bởi ta không thể tham chiếu đến tên hàm. Ta có thể sử dụng lại hàm ẩn danh này theo một ngữ cảnh khác mà không cần xây dựng lại hàm. var str = q("Dai hoc ","Su phạm"); //kết quả trả về là một giá trị kiểu chuổi IV.3.2. Tính đệ quy của hàm JavaScript cho phép một hàm có thể định nghĩa đệ quy, xét ví dụ sau đây: Ví dụ 1: Tính giai thừa của n, n∈N function giaiThua(n){ if((n= =0)||(n= =1)) return 1 else { var gt = (n*giaiThua(n-1)); return gt; } } IV.3.3. Đối tượng Arguments Tất cả hàm của JavaScript dều có thuộc tính gọi là đối tượng Arguments, chứa danh sách các tham số được thực sự truyền cho hàm, ta dùng thuộc tính Argumnets. lenght chỉ số tham số đã truyền cho hàm để kiểm tra tính đầy đủ của các tham số. Ví dụ : function strangeEquation(x, y, q) { if (arguments.length != 3) { return "Invalid number of arguments"; } var z = x * y; var p = q - 7; return (z * x % (y + 1)) / p; } Trong phần trên ta nghiên cứu về các hàm do người dùng định nghĩa, chương sau ta sẽ nghiên cứu về các đặc điểm mạnh nhất của JavaScript :các đối 83
  19. tượng (của JavaScrip và của BOM- mô hình đối tượng trình duyệt) và các hàm dựng sẵn (mà bản chất là các phương thức của các đối tượng). V. CÁC ĐỐI TƯỢNG JAVASCRIPT V.1. Các đối tượng của người sử dụng định nghĩa V.1.1. Định nghĩa đối tượng JavaScript cho phép định nghĩa một đối tượng bằng các phương pháp :  Dùng hằng chữ đối tượng (Object literals), cú pháp: var objectName = {property1:value1, ..., propertyN:valueN};  Dùng hàm khởi dựng (constractor function) với toán tử this, cú pháp: function functionName(parameter1,...,parameterM){ this.property1 = parameter1; .... this.propertyM = parameterM; this.propertyN = expression; } và một thể hiện của đối tượng này được tạo bằng toán tử new, cú pháp: var objectName = new functionName(value1,...,valueM); JavaScript 2.0 cho phép người sử dụng tạo ra các đối tượng (class) với khá đầy đủ các tính chất của một ngôn ngữ lập trình hướng đối tượng.. V.1.2. Định nghĩa phương thức của đối tượng JavaScript 1.5 cho phép ta tạo ra một đối tượng và một phương thức (method) liên kết với đối tượng đó, cú pháp: function objectName(parameters) { //khối lệnh;} Để bổ sung thuộc tính, phương thức cho một đối tượng ta dùng thuộc tính prototype. Cú pháp: objectName.prototype.member 1 = value1; V.1.4. Truy xuất các thuộc tính, phương thức của một đối tượng - Dùng toán tử chấm (.) để truy xuất thuộc tính : objectName.property - Gọi phương thức của đối tượng: objectName.method(); Ví dụ : //dùng object literals nhanVien1={hoten:'Nguyen Van Hung',diachi:'Da Nang', tuoi:22}; // tạo phương thức cho đối tượng nv được tạo ra ở dưới. function display(){ var str = this.hoten+" "+this.diachi+" "+this.tuoi; document.write(str); 84
  20. } // dùng constructor function function nv(ht, dc, t){ this.hoten = ht; this.diachi = dc; this.tuoi = t; this.hienthi= display; } nhanVien2 = new nv('Nguyen Van Hung', 'Da Nang', 22); // Truy xuất các thuộc tính và gọi phương thức của đối tượng document.write(nhanVien1.hoten); nhanVien2.hienthi(); V.2. Các đối tượng dựng sẵn trong JavaScript Trong các phần trên ta đã nghiên cứu một số đối tượng của JavaScript: Function, RegExp, sau đây ta sẽ nghiên cứu các đối tượng quan trọng khác của JavaScript 1.5: Date, Math, Number, String. JavaScript 2.0 ra đời năm 2003 với nhiều tham vọng hơn : lập trình cho server-side, là một ngôn ngữ lập trình hướng đối tượng, ta không nghiên cứu trong giáo trình này vì chưa có nhiều nhà phát triển ứng dụng web chấp nhận. Ta có thể tạo ra một thể hiện của đối tượng từ các đối tượng có sẵn để sử dụng, lưu ý những vấn đề sau đây: o Tạo đối tượng bằng toán tử new : var tênĐốiTượng = new tênĐối tượng; o Truy xuất các thuộc tính, phương thức public của đối tượng bằng toán tử chấm (.) (khi biết rõ tên thuộc tính, tên phương thức của đối tượng) hoặc bằng toán tử [ ] (khi không quan tâm đến tên của các thuộc tính của đối tượng) Ví dụ 1: var arr = new Array(5); document.write(arr.length); // truy xuất thuộc tính length của đối tượng arr. var toDay = new Date(); ngay = toDay.geteDate(); // truy xuất phương thức getDate() của toDay Ví dụ 2: document là một đối tượng của mô hình đối tượng tư liệu (DOM), ta thử liệt kê tên các phần tử của đối tượng này phù hợp với một trình duyệt cụ thể: for(var prop in document) document.write("document."+prop+" = "+document[prop]+""); // biến prop chứa giá trị là tên của thuộc tính của đối tượng document // document[prop] chứa giá trị của thuộc tính có tên được chứa trong biến prop. V.2.1. Đối tượng String Để tạo ra một đối tượng String, ta sử dụng một trong 3 cú pháp: - Sử dụng lệnh var và gán giá trị cho biến : var str = "Thành phố Đà Nẵng"; - Sử dụng toán tử gán : str = "Thành phố Hội An"; - Sử dụng toán tử new : var str = new String(); 85
Đồng bộ tài khoản