Giáo trình JavaScript - Đại học Quốc gia Hà Nội

Nội dung text: Giáo trình JavaScript - Đại học Quốc gia Hà Nội

1. JavaScript 1 ch−ơng 1 Lời nói đầu Với HTML and Microsoft FrontPage bạn đã biết cách tạo ra trang Web - tuy nhiên chỉ mới ở mức biểu diễn thông tin chứ ch−a phải lμ các trang Web động có khả năng đáp ứng các sự kiện từ phía ng−ời dùng. Hãng Netscape đã đ−a ra ngôn ngữ script có tên lμ LiveScript để thực hiện chức năng nμy. Sau đó ngôn ngữ nμy đ−ợc đổi tên thμnh JavaScript để tận dụng tính đại chúng của ngôn ngữ lập trình Java. Mặc dù có những điểm t−ơng đồng giữa Java vμ JavaScript, nh−ng chúng vẫn lμ hai ngôn ngữ riêng biệt. JavaScript lμ ngôn ngữ d−ới dạng script có thể gắn với các file HTML. Nó không đ−ợc biên dịch mμ đ−ợc trình duyệt diễn dịch. Không giống Java phải chuyển thμnh các mã dễ biên dịch, trình duyệt đọc JavaScript d−ới dạng mã nguồn. Chính vì vậy bạn có thể dễ dμng học JavaScript qua ví dụ bởi vì bạn có thể thấy cách sử dụng JavaScript trên các trang Web. JavaScript lμ ngôn ngữ dựa trên đối t−ợng, có nghĩa lμ bao gồm nhiều kiểu đối t−ợng, ví dụ đối t−ợng Math với tất cả các chức năng toán học. Tuy vậy JavaScript không lμ ngôn ngữ h−ớng đối t−ợng nh− C++ hay Java do không hỗ trợ các lớp hay tính thừa kế. JavaScript có thể đáp ứng các sự kiện nh− tải hay loại bỏ các form. Khả năng nμy cho phép JavaScript trở thμnh một ngôn ngữ script động. Giống với HTML vμ Java, JavaScript đ−ợc thiết kế độc lập với hệ điều hμnh. Nó có thể chạy trên bất kỳ hệ điều hμnh nμo có trình duyệt hỗ trợ JavaScript. Ngoμi ra JavaScript giống Java ở khía cạnh an ninh: JavaScript không thể đọc vμ viết vμo file của ng−ời dùng. Các trình duyệt web nh− Nescape Navigator 2.0 trở đi có thể hiển thị những câu lệnh JavaScript đ−ợc nhúng vμo trang HTML. Khi trình duyệt yêu cầu một trang, server sẽ gửi đầy đủ nội dung của trang đó, bao gồm cả HTML vμ các câu lệnh JavaScript qua mạng tới client. Client sẽ đọc trang đó từ đầu đến cuối, hiển thị các kết quả của HTML vμ xử lý các câu lệnh JavaScript khi nμo chúng xuất hiện. Các câu lệnh JavaScript đ−ợc nhúng trong một trang HTML có thể trả lời cho các sự kiện của ng−ời sử dụng nh− kích chuột, nhập vμo một form vμ điều h−ớng trang. Ví dụ bạn có thể kiểm tra các giá trị thông tin mμ ng−ời sử dụng đ−a vμo mμ không cần đến bất cứ một quá trình truyền trên mạng nμo. Trang HTML với JavaScript đ−ợc nhúng sẽ kiểm tra các giá trị đ−ợc đ−a vμo vμ sẽ thông báo với ng−ời sử dụng khi giá trị đ−a vμo lμ không hợp lệ. Mục đích của phần nμy lμ giới thiệu về ngôn ngữ lập trình JavaScript để bạn có thể viết các script vμo file HTML của mình. Khoa Toan tin, Đại học Quốc gia Hμ Nội
2. JavaScript 2 Ch−ơng 2 Nhập môn JavaScript 2.1.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ẻ • Sử dụng các file nguồn JavaScript • 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ẻ vμ nhúng một file nguồn JavaScript lμ đ−ợc sử dụng nhiều hơn cả. 2.1.1.Sử dụng thẻ SCRIPT Script đ−ợc đ−a vμo file HTML bằng cách sử dụng cặp thẻ Chú ý: vμ . Các thẻ có thể Ghi chú không đ−ợc xuất hiện trong phần hay của file đặt trong cặp thẻ HTML. Nếu đặt trong phần , nó sẽ đ−ợc tải vμ nh− ghi sẵn sμng tr−ớc khi phần còn lại của văn bản đ−ợc tải. chú trong file HTML. Cú pháp của Thuộc tính duy nhất đ−ợc định nghĩa hiện thời cho thẻ JavaScript t−ơng tự cú pháp của C lμ LANGUAGE= dùng để xác định ngôn nên có thể sử dụng ngữ script đ−ợc sử dụng. Có hai giá trị đ−ợc định nghĩa lμ // hay /* */. "JavaScript" vμ "VBScript". Với ch−ơng trình viết bằng JavaScript bạn sử dụng cú pháp sau : // INSERT ALL JavaScript HERE Điểm khác nhau giữa cú pháp viết các ghi chú giữa HTML vμ JavaScript lμ cho phép bạn ẩn các mã JavaScript trong các ghi chú của file HTML, để các trình duyệt cũ không hỗ trợ cho JavaScript có thể đọc đ−ợc nó nh− trong ví dụ sau đây: Dòng cuối cùng của script cần có dấu // để trình duyệt không diễn dịch dòng nμy d−ới dạng mã JavaScript. Các ví dụ trong ch−ơng nμy không chứa đặc điểm ẩn của JavaScript để mã có thể dễ hiểu hơn. Khoa Toan tin, Đại học Quốc gia Hμ Nội
3. JavaScript 3 2.1.2. Sử dụng một file nguồn JavaScript Thuộc tính SRC của thẻ 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: Thuộc tính nμy rấy hữu dụng cho việc chia sẻ các hμm dùng chung cho nhiều trang khác nhau. Các câu lệnh JavaScript nằm trong cặp thẻ vμ có chứa thuộc tinh SRC trừ khi nó có lỗi. Ví dụ bạn muốn đ−a dòng lệnh sau vμo giữa cặp thẻ vμ : document.write("Không tìm thấy file JS đ−a vμo!"); 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ụ: Các file JavaScript bên ngoμi không đ−ợc chứa bất Chú ý kỳ thẻ HTML nμo. Chúng chỉ đ−ợc chứa các câu lệnh JavaScript vμ định nghĩa hμm. Khi bạn muốn chỉ ra một xâu trích dẫn trong Tên file của các hμm JavaScript bên ngoμi cần có một xâu khác cần sử dụng dấu nháy đơn ( ' ) đuôi .js, vμ server sẽ phải ánh xạ đuôi .js đó tới kiểu để phân định xâu đó. MIME application/x-javascript. Đó lμ Điều nμy cho phép script nhận ra xâu ký những gì mμ server gửi trở lại phần Header của file tự đó. HTML. Để ánh xạ đuôi nμy vμo kiểu MIME, ta thêm dòng sau vμo file mime.types trong đ−ờng dẫn cấu hình của server, sau đó khởi động lại server: type=application/x-javascript Nếu server không ánh xạ đ−ợc đuôi .js tới kiểu MIME application/x-javascript , Navigator sẽ tải file JavaScript đ−ợc chỉ ra trong thuộc tính SRC về không đúng cách. Trong ví dụ sau, hμm bar có chứa xâu "left" nằm trong một cặp dấu nháy kép: function bar(widthPct){ document.write(" ") } 2.3. Thẻ vμ 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ẻ 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, Khoa Toan tin, Đại học Quốc gia Hμ Nội
4. JavaScript 4 nếu trình duyệt có hỗ trợ JavaScript thì đoạn mã trong cặp thẻ 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. Ví dụ: Trang nμy có sử dụng JavaScript. Do đó bạn cần sử dụng trình duyệt Netscape Navigator từ version 2.0 trở đi! Nếu bạn đã sử dụng trình duyệt Netscape từ 2.0 trở đi mμ vẫn đọc đ−ợc dòng chữ nμy thì hãy bật Preferences/Advanced/JavaScript lên Hình 2.3: Minh hoạ thẻ NOSCRIPT 2.3. Hiển thị một dòng text Trong hầu hết các ngôn ngữ lập trình, một trong những khả năng cơ sở lμ hiển thị ra mμn hình một dòng text. Trong JavaScript, ng−ời lập trình cũng có thể điều khiển việc xuất ra mμn hình của client một dòng text tuần tự trong file HTML. JavaScript sẽ xác định điểm mμ nó sẽ xuất ra trong file HTML vμ dòng text kết quả sẽ đ−ợc dịch nh− các dòng HTML khác vμ hiển thị trên trang. Khoa Toan tin, Đại học Quốc gia Hμ Nội
5. JavaScript 5 Hơn nữa, JavaScript còn cho phép ng−ời lập trình sinh ra một hộp thông báo hoặc xác nhận gồm một hoặc hai nút. Ngoμi ra, dòng text vμ các con số còn có thể hiển thị trong tr−ờng TEXT vμ TEXTAREA của một form. Trong phần nμy, ta sẽ học cách thức write() vμ writeln() của đối t−ợng document. Đối t−ợng document trong JavaScript đ−ợc thiết kế sẵn hai cách thức để xuất một dòng text ra mμn hình client: write() vμ writeln(). Cách gọi một cách thức của một đối t−ợng nh− sau: object_name.property_name Dữ liệu mμ cách thức dùng để thực hiện công việc của nó đ−ợc đ−a vμo dòng tham số, ví dụ: document.write("Test"); document.writeln('Test'); Cách thức write() xuất ra mμn hình xâu Text nh−ng không xuống dòng, còn cách thức writeln() sau khi viết xong dòng Text tự động xuống dòng. Hai cách thức nμy đều cho phép xuất ra thẻ HTML. Ví dụ: Cách thức write() xuất ra thẻ HTML Ouputting Text This text is plain. "); // STOP HIDING FROM OTHER BROWSERS > Khoa Toan tin, Đại học Quốc gia Hμ Nội
6. JavaScript 6 Ví dụ: Sự khác nhau của write() vμ writeln(): Khi duyệt sẽ đ−ợc kết quả: Khoa Toan tin, Đại học Quốc gia Hμ Nội
7. JavaScript 7 Hình 2.5: Sự khác nhau của write() vμ writeln() 2.4. Giao tiếp với ng−ời sử dụng JavaScript hỗ trợ khả năng cho phép ng−ời lập trình tạo ra một hộp hội thoại. Nội dung của hộp hội thoại phụ thuộc vμo trang HTML có chứa đoạn script mμ không lμm ảnh h−ởng đến việc xuất nội dung trang. Cách đơn giản để lμm việc đó lμ sử dụng cách thức alert(). Để sử dụng đ−ợc cách thức nμy, bạn phải đ−a vμo một dòng text nh− khi sử dụng document.write() vμ document.writeln() trong phần tr−ớc. Ví dụ: alert("Nhấn vμo OK để tiếp tục"); Khi đó file sẽ chờ cho đến khi ng−ời sử dụng nhấn vμo nút OK rồi mới tiếp tục thực hiện Thông th−ờng, cách thức alert() đ−ợc sử dụng trong các tr−ờng hợp: • Thông tin đ−a vμ form không hợp lệ • Kết quả sau khi tính toán không hợp lệ • Khi dịch vụ ch−a sẵn sμng để truy nhập dữ liệu Tuy nhiên cách thức alert() mới chỉ cho phép thông báo với ng−ời sử dụng chứ ch−a thực sự giao tiếp với ng−ời sử dụng. JavaScript cung cấp một cách thức khác để giao tiếp với ng−ời sử dụng lμ promt(). T−ơng tự nh− alert(), prompt() tạo ra một hộp hội thoại với một dòng thông báo do bạn đ−a vμo, nh−ng ngoμi ra nó còn cung cấp một tr−ờng để nhập dữ liệu vμo. Ng−ời sử dụng có thể nhập vμo tr−ờng đó rồi Khoa Toan tin, Đại học Quốc gia Hμ Nội
8. JavaScript 8 kích vμo OK. Khi đó, ta có thể xử lý dữ liệu do ng−ời sử dụng vừa đ−a vμo. Ví dụ: Hộp hội thoại gồm một dòng thông báo, một tr−ờng nhập dữ liệu, một nút OK vμ một nút Cancel Ch−ơng trình nμy sẽ hỏi tên ng−ời dùng vμ sau đó sẽ hiển thị một thông báo ngắn sử dụng tên mới đ−a vμo. Ví dụ đ−ợc l−u vμo file Hello.html JavaScript Exemple var name=window.prompt(Hello! Whats your name ?,); document.write(Hello  + name +  ! I hope you like JavaScript ); Hình2.1: Hiển thị cửa sổ nhập tên Khi duyệt có kết quả: Ví dụ nμy hiển thị dấu nhắc nhập vμo tên với ph−ơng thức window.prompt. Giá trị đạt đ−ợc sẽ đ−ợc ghi trong biến có tên lμ name. Biến name đ−ợc kết hợp với các chuỗi khác vμ đ−ợc hiển thị trong cửa sổ của trình duyệt nhờ ph−ơng thức document.write. Khoa Toan tin, Đại học Quốc gia Hμ Nội
9. JavaScript 9 Hình 2.2: Hiển thị lời chμo ng−ời nhập Bây giờ bạn đã có ý t−ởng về các chức năng có thể đạt đ−ợc qua JavaScript, chúng ta hãy tiếp tục tìm hiểu thêm về chính ngôn ngữ nμy. 2.5. Điểm lại các lệnh vμ mở rộng Lệnh/Mở rộng Kiểu Mô tả SCRIPT thẻ HTML Hộp chứa các lệnh JavaScript SRC Thuộc tính Giữ địa chỉ của file JavaScript bên ngoμi. File nμy của thẻ phải có phần đuôi .js SCRIPT LANGUAGE thuộc tính Định rõ ngôn ngữ script đ−ợc sử dụng (JavaScript của thẻ hoặc VBScript) SCRIPT // Ghi chú trong Đánh dấu ghi chú một dòng trong đoạn script JavaScript /* */ Ghi chú trong Đánh dấu ghi chú một khối trong đoạn script JavaScript document.write() cách thức Xuất ra một xâu trên cửa sổ hiện thời một cách JavaScript tuần tự theo file HTML có đoạn script đó document.writeln() Cách thức T−ơng tự cách thức document.write() nh−ng viết JavaScript xong tự xuống dòng. alert() Cách thức Hiển thị một dòng thông báo trên hộp hội thoại của Khoa Toan tin, Đại học Quốc gia Hμ Nội
10. JavaScript 10 JavaScript promt() Cách thức Hiển thị một dòng thông báo trong hộp hội thoại JavaScript đồng thời cung cấp một tr−ờng nhập dữ liệu để ng−ời sử dụng nhập vμo. Khoa Toan tin, Đại học Quốc gia Hμ Nội
11. JavaScript 11 Ch−ơng 3 Biến trong JavaScript 3.1. Biến vμ phân loạI biến Tên biến trong JavaScript phải bắt đầu bằng chữ hay dấu gạch d−ới. Các chữ số không đ−ợc sử dụng để mở đầu tên một biến nh−ng có thể sử dụng sau ký tự đầu tiên. Phạm vi của biến có thể lμ một trong hai kiểu sau: • Biến toμn cục: Có thể đ−ợc truy cập từ bất kỳ đâu trong ứng dụng. đ−ợc khai báo nh− sau : x = 0; • Biến cục bộ: Chỉ đ−ợc truy cập trong phạm vi ch−ơng trình mμ nó khai báo. Biến cục bộ đ−ợc khai báo trong một hμm với từ khoá var nh− sau: var x = 0; Biến toμn cục có thể sử dụng từ khoá var, tuy nhiên điều nμy không thực sự cần thiết. 3.2. Biểu diễn từ tố trong JavaScript Từ tố lμ các giá trị trong ch−ơng trình không thay đổi. Chú ý Sau đây lμ các ví dụ về từ tố: Khác với C, 8 trong JavaScript không có kiểu “The dog ate my shoe” hằng số CONST để biểu diễn một true giá trị không đổi nμođấy 3.3. Kiểu dữ liệu Khác với C++ hay Java, JavaScript lμ ngôn ngữ có tính định kiểu thấp. Điều nμy có nghĩa lμ không phải chỉ ra kiểu dữ liệu khi khai báo biến. Kiểu dữ liệu đ−ợc tự động chuyển thμnh kiểu phù hợp khi cần thiết. Ví dụ file Variable.Html: Datatype Example var fruit='apples'; var numfruit=12; numfruit = numfruit + 20; var temp ="There are " + numfruit + " " + "."; document.write(temp); Khoa Toan tin, Đại học Quốc gia Hμ Nội
12. JavaScript 12 Các trình duyệt hỗ trợ JavaScript sẽ xử lý chính xác ví dụ trên vμ đ−a ra kết quả d−ới đây: Trình diễn dịch JavaScript sẽ xem biến numfruit có kiểu nguyên khi cộng với 20 vμ có kiểu chuỗi khi kết hợp với biển temp. Trong JavaScript, có bốn kiểu dữ liệu sau đây: kiểu số nguyên, kiểu dấu phẩy động, kiểu logic vμ kiểu chuỗi. 1.1.1. KIểu nguyên (Interger) Số nguyên có thể đ−ợc biểu diễn theo ba cách: • Hệ cơ số 10 (hệ thập phân) - có thể biểu diễn số nguyên theo cơ số 10, chú ý rằng chữ số đầu tiên phải khác 0. • Hệ cơ số 8 (hệ bát phân) - số nguyên có thể biểu diễn d−ới dạng bát phân với chữ số đầu tiên lμ số 0. • Hệ cơ số 16 (hệ thập lục phân) - số nguyên có thể biểu diễn d−ới dạng thập lục phân với hai chữ số đầu tiên lμ 0x. 1.1.2. Kiểu dấu phẩy động (Floating Point) Một literal có kiểu dấu phẩy động có 4 thμnh phần sau: Hình 3.1: Kết quả của xử lý dữ liệu • Phần nguyên thập phân. Khoa Toan tin, Đại học Quốc gia Hμ Nội
13. JavaScript 13 • Dấu chấm thập phân (.). • Phần d−. • Phần mũ. Để phân biệt kiểu dấu phẩy động với kiểu số nguyên, phải có ít nhất một chữ số theo sau dấu chấm hay E. Ví dụ: 9.87 -0.85E4 9.87E14 .98E-3 1.1.3. Kiểu logic (Boolean) Kiểu logic đ−ợc sử dụng để chỉ hai điều kiện : đúng hoặc sai. Miền giá trị của kiểu nμy chỉ có hai giá trị • true. • false. 1.1.4. Kiểu chuỗi (String) Một literal kiểu chuỗi đ−ợc biểu diễn bởi không hay nhiều ký tự đ−ợc đặt trong cặp dấu " " hay ' '. Ví dụ: The dog ran up the tree ‘The dog barked’ 100 Để biểu diễn dấu nháy kép ( " ), trong chuỗi sử dụng ( \" ), ví dụ: document.write( \This text inside quotes.\ ); Khoa Toan tin, Đại học Quốc gia Hμ Nội
14. JavaScript 14 2. Xây dựng các biểu thức trong JavaScript định nghĩa vμ phân loạI biểu thức Tập hợp các literal, biến vμ các toán tử nhằm đánh giá một giá trị nμo đó đ−ợc gọi lμ một biểu thức (expression). Về cơ bản có ba kiểu biểu thức trong JavaScript: • Số học: Nhằm để l−ợng giá giá trị số. Ví dụ (3+4)+(84.5/3) đ−ợc đánh giá bằng 197.1666666667. • Chuỗi: Nhằm để đánh giá chuỗi. Ví dụ "The dog barked" + barktone + "!" lμ The dog barked ferociously!. • Logic: Nhằm đánh giá giá trị logic. Ví dụ temp>32 có thể nhận giá trị sai. JavaScript cũng hỗ trợ biểu thức điều kiện, cú pháp nh− sau: (condition) ? valTrue : valFalse Nếu điều kiện condition đ−ợc đánh giá lμ đúng, biểu thức nhận giá trị valTrue, ng−ợc lại nhận giá trị valFalse. Ví dụ: state = (temp>32) ? "liquid" : "solid" Trong ví dụ nμy biến state đ−ợc gán giá trị "liquid" nếu giá trị của biến temp lớn hơn 32; trong tr−ờng hợp ng−ợc lại nó nhận giá trị "solid". Các toán tử (operator) Toán tử đ−ợc sử dụng để thực hiện một phép toán nμo đó trên dữ liệu. Một toán tử có thể trả lại một giá trị kiểu số, kiểu chuỗi hay kiểu logic. Các toán tử trong JavaScript có thể đ−ợc nhóm thμnh các loại sau đây: gán, so sánh, số học, chuỗi, logic vμ logic bitwise. 2.1.1. Gán Toán tử gán lμ dấu bằng (=) nhằm thực hiện việc gán giá trị của toán hạng bên phải cho toán hạng bên trái. Bên cạnh đó JavaScript còn hỗ trợ một số kiểu toán tử gán rút gọn. Kiểu gán thông th−ờng Kiểu gán rút gọn x = x + y x + = y x = x - y x - = y x = x * y x * = y x = x / y x / = y x = x % y x % = y Khoa Toan tin, Đại học Quốc gia Hμ Nội
15. JavaScript 15 2.1.2. So sánh Ng−ời ta sử dụng toán tử so sánh để so sánh hai toán hạng vμ trả lại giá trị đúng hay sai phụ thuộc vμo kết quả so sánh. Sau đây lμ một số toán tử so sánh trong JavaScript: == Trả lại giá trị đúng nếu toán hạng bên trái bằng toán hạng bên phải != Trả lại giá trị đúng nếu toán hạng bên trái khác toán hạng bên phải > Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn toán hạng bên phải >= Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn hoặc bằng toán hạng bên phải < Trả lại giá trị đúng nếu toán hạng bên trái nhỏ hơn toán hạng bên phải <= Trả lại giá trị đúng nếu toán hạng bên trái nhỏ hơn hoặc bằng toán hạng bên phải 2.1.3. Số học Bên cạnh các toán tử cộng (+), trừ (-), nhân (*), chia (/) thông th−ờng, JavaScript còn hỗ trợ các toán tử sau đây: var1% var2 Toán tử phần d−, trả lại phần d− khi chia var1 cho var2 - Toán tử phủ định, có giá trị phủ định toán hạng var++ Toán tử nμy tăng var lên 1 (có thể biểu diễn lμ ++var) var Toán tử nμy giảm var đi 1 (có thể biểu diễn lμ var) Chú ý Nếu bạn gán giá trị của toán tử ++ hay vμo một biến, nh− y= x++, có thể có các kết quả khác nhau phụ thuộc vμo vị trí xuất hiện tr−ớc hay sau của ++ hay với tên biến (lμ x trong tr−ờng hợp nμy). Nếu ++ đứng tr−ớc x, x sẽ đ−ợc tăng hoặc giảm tr−ớc khi giá trị x đ−ợc gán cho y. Nếu ++ hay đứng sau x, giá trị của x đ−ợc gán cho y tr−ớc khi nó đ−ợc tăng hay giảm. 2.1.4. Chuỗi Khi đ−ợc sử dụng với chuỗi, toán tử + đ−ợc coi lμ kết hợp hai chuỗi, ví dụ: Khoa Toan tin, Đại học Quốc gia Hμ Nội
16. JavaScript 16 "abc" + "xyz" đ−ợc "abcxyz" 2.1.5. Logic JavaScript hỗ trợ các toán tử logic sau đây: expr1 && expr2 Lμ toán tử logic AND, trả lại giá trị đúng nếu cả expr1 vμ expr2 cùng đúng. expr1 || expr2 Lμ toán tử logic OR, trả lại giá trị đúng nếu ít nhất một trong hai expr1 vμ expr2 đúng. ! expr Lμ toán tử logic NOT phủ định giá trị của expr. 2.1.6. Bitwise Với các toán tử thao tác trên bit, đầu tiên giá trị đ−ợc chuyển d−ới dạng số nguyên 32 bit, sau đó lần l−ợt thực hiện các phép toán trên từng bit. & Toán tử bitwise AND, trả lại giá trị 1 nếu cả hai bit cùng lμ 1. | Toán tử bitwise OR, trả lại giá trị 1 nếu một trong hai bit lμ 1. ^ Toán tử bitwise XOR, trả lại giá trị 1 nếu hai bit có giá trị khác nhau Ngoμi ra còn có một số toán tử dịch chuyển bitwise. Giá trị đ−ợc chuyển thμnh số nguyên 32 bit tr−ớc khi dịch chuyển. Sau khi dịch chuyển, giá trị lại đ−ợc chuyển thμnh kiểu của toán hạng bên trái. Sau đây lμ các toán tử dịch chuyển: > Toán tử dịch phải. Dịch chuyển toán hạng trái sang phải một số l−ợng bit bằng toán hạng phải. Các bit bị chuyển sang phải bị mất vμ dấu của toán hạng bên trái đ−ợc giữ nguyên. Ví dụ: 16>>2 trở thμnh 4 (số nhị phân 10000 trở thμnh số nhị phân 100) >>> Toán tử dịch phải có chèn 0. Dịch chuyển toán hạng trái sang phải một số l−ợng bit bằng toán hạng phải. Bit dấu đ−ợc dịch chuyển từ trái (giống >>). Những bit đ−ợc dịch sang phải bị xoá đi. Ví dụ: -8>>>2 trở thμnh 1073741822 (bởi các bit dấu đã trở thμnh một phần của số). Tất nhiên với số d−ơng kết quả của toán tử >> vμ >>> lμ giống nhau. Có một số toán tử dịch chuyển bitwise rút gọn: Kiểu bitwise thông th−ờng Kiểu bitwise rút gọn Khoa Toan tin, Đại học Quốc gia Hμ Nội
17. JavaScript 17 x = x > y x - >> y x = x >>> y x >>> = y x = x & y x & = y x = x ^ y x ^ = y x = x | y x | = y Bμi tập 2.1.7. Câu hỏi Hãy đánh giá các biểu thức sau: 1. a. 7 + 5 b. "7" + "5" c. 7 == 7 d. 7 >= 5 e. 7 = 5) && (5 > 5) h. (7 >= 5) || (5 > 5) 2.1.8. Trả lời Các biểu thức đ−ợc đánh giá nh− sau: 1. a. 12 b. "75" c. true d. true e. true 2. f. 5 g. false h. true Khoa Toan tin, Đại học Quốc gia Hμ Nội
18. JavaScript 18 3. Các lệnh Có thể chia các lệnh của JavaScript thμnh ba nhóm sau: • Lệnh điều kiện. • Lệnh lặp. • Lệnh tháo tác trên đối t−ợng. Câu lệnh điều kiện Câu lệnh điều kiện cho phép ch−ơng trình ra quyết định vμ thực hiện công việc nμo đấy dựa trên kết quả của quyết định. Trong JavaScript, câu lệnh điều kiện lμ if else if else Câu lệnh nμy cho phép bạn kiểm tra điều kiện vμ thực hiện một nhóm lệnh nμo đấy dựa trên kết quả của điều kiện vừa kiểm tra. Nhóm lệnh sau else không bắt buộc phải có, nó cho phép chỉ ra nhóm lệnh phải thực hiện nếu điều kiện lμ sai. Cú pháp if ( ) { //Các câu lệnh với điều kiện đúng } else { //Các câu lệnh với điều kiện sai } Ví dụ: if (x==10){ document.write(“x bằng 10, đặt lại x bằng 0.”); x = 0; } else document.write(“x không bằng 10.”); Chú ý Ký tự { vμ } đ−ợc sử dụng để tách các khối mã. Khoa Toan tin, Đại học Quốc gia Hμ Nội
19. JavaScript 19 Câu lệnh lặp Câu lệnh lặp thể hiện việc lặp đi lặp lại một đoạn mã cho đến khi biểu thức điều kiện đ−ợc đánh giá lμ đúng. JavaScipt cung cấp hai kiểu câu lệnh lặp: • for loop • while loop 3.1.1. Vòng lặp for Vòng lặp for thiết lập một biểu thức khởi đầu - initExpr, sau đó lặp một đoạn mã cho đến khi biểu thức đ−ợc đánh giá lμ đúng. Sau khi kết thúc mỗi vòng lặp, biểu thức incrExpr đ−ợc đánh giá lại. Cú pháp: for (initExpr; ; incrExpr){ //Các lệnh đ−ợc thực hiện trong khi lặp } Ví dụ: For loop Example for (x=1; x "); } Ví dụ nμy l−u vμo file for_loop.Html. Khoa Toan tin, Đại học Quốc gia Hμ Nội Hình 5.1: Kết quả của lệnh for loop
20. JavaScript 20 Vòng lặp nμy sẽ thực hiện khối mã lệnh cho đến khi x>10. 3.1.2. while Vòng lặp while lặp khối lệnh chừng nμo còn đ−ợc đánh giá lμ đúng Cú pháp: while ( ) { //Các câu lệnh thực hiện trong khi lặp } Ví dụ: x=1; while (x "); x++; } Kết quả của ví dụ nμy giống nh− ví dụ tr−ớc. 3.1.3. Break Câu lệnh break dùng để kết thúc việc thực hiện của vòng lặp for hay while. Ch−ơng trình đ−ợc tiếp tục thực hiện tại câu lệnh ngay sau chỗ kết thúc của vòng lặp. Cú pháp break; Đoạn mã sau lặp cho đến khi x lớn hơn hoặc bằng 100. Tuy nhiên nếu giá trị x đ−a vμo vòng lặp nhỏ hơn 50, vòng lặp sẽ kết thúc Ví dụ: while (x ; với for, lệnh continue điều khiển quay lại incrExpr. Cú pháp continue; Ví dụ: Khoa Toan tin, Đại học Quốc gia Hμ Nội
21. JavaScript 21 Đoạn mã sau tăng x từ 0 lên 5, nhảy lên 8 vμ tiếp tục tăng lên 10 x=0; while (x ”); if (x=5) { x=8; continue; } x++; } Các câu lệnh thao tác trên đối t−ợng JavaScript lμ một ngôn ngữ dựa trên đối t−ợng, do đó nó có một số câu lệnh lμm việc với các đối t−ợng. 3.1.5. for in Câu lệnh nμy đ−ợc sử dụng để lặp tất cả các thuộc tính (properties) của một đối t−ợng. Tên biến có thể lμ một giá trị bất kỳ, chỉ cần thiết khi bạn sử dụng các thuộc tính trong vòng lặp. Ví dụ sau sẽ minh hoạ điều nμy Cú pháp for ( in ) { //Các câu lệnh } Ví dụ Ví dụ sau sẽ lấy ra tất cả các thuộc tính của đối t−ợng Window vμ in ra tên của mỗi thuộc tính. Kết quả đ−ợc minh hoạ trên hình 5.2. For in Example document.write("The properties of the Window object are: "); for (var x in window) document.write(" "+ x + ", "); Khoa Toan tin, Đại học Quốc gia Hμ Nội
22. JavaScript 22 Hình 5.2: Kết quả của lệnh for in 3.1.6. new Biến new đ−ợc thực hiện để tạo ra một thể hiện mới của một đối t−ợng Cú pháp objectvar = new object_type ( param1 [,param2] [,paramN]) Ví dụ sau tạo đối t−ợng person có các thuộc tính firstname, lastname, age, sex. Chú ý rằng từ khoá this đ−ợc sử dụng để chỉ đối t−ợng trong hμm person. Sau đó ba thể hiện của đối t−ợng person đ−ợc tạo ra bằng lệnh new Khoa Toan tin, Đại học Quốc gia Hμ Nội
23. JavaScript 23 New Example function person(first_name, last_name, age, sex){ this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex; } person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new person("Hoμn", "Đỗ Văn", "24", "Male"); document.write ("1. "+person1.last_name+" " + person1.first_name + " " ); document.write("2. "+person2.last_name +" "+ person2.first_name + " "); document.write("3. "+ person3.last_name +" "+ person3.first_name + " "); document.write("4. "+ person4.last_name +" "+ person4.first_name+" "); Hình 5.3: Kết quả của ví dụ lệnh New Khoa Toan tin, Đại học Quốc gia Hμ Nội
24. JavaScript 24 3.1.7. this Từ khoá this đ−ợc sử dụng để chỉ đối t−ợng hiện thời. Đối t−ợng đ−ợc gọi th−ờng lμ đối t−ợng hiện thời trong ph−ơng thức hoặc trong hμm. Cú pháp this [.property] Có thể xem ví dụ của lệnh new. 3.1.8. with Lệnh nμy đ−ợc sử dụng để thiết lập đối t−ợng ngầm định cho một nhóm các lệnh, bạn có thể sử dụng các thuộc tính mμ không đề cập đến đối t−ợng. Cú pháp with (object) { // statement } Ví dụ: Ví dụ sau chỉ ra cách sử dụng lệnh with để thiết lập đối t−ợng ngầm định lμ document vμ có thể sử dụng ph−ơng thức write mμ không cần đề cập đến đối t−ợng document With Example with (document){ write(“This is an exemple of the things that can be done ”); write(“With the with statment. ”); write(“This can really save some typing”); } Khoa Toan tin, Đại học Quốc gia Hμ Nội
25. JavaScript 25 Hình 5.4: Kết quả của ví dụ lệnh with Các hμm (Functions) JavaScript cũg cho phép sử dụng các hμm. Mặc dù không nhất thiết phải có, song các hμm có thể có một hay nhiều tham số truyền vμo vμ một giá trị trả về. Bởi vì JavaScript lμ ngôn ngữ có tính định kiểu thấp nên không cần định nghĩa kiểu tham số vμ giá trị trả về của hμm. Hμm có thể lμ thuộc tính của một đối t−ợng, trong tr−ờng hợp nμy nó đ−ợc xem nh− lμ ph−ơng thức của đối t−ợng đó. Lệnh function đ−ợc sử dụng để tạo ra hμm trong JavaScript. Cú pháp function fnName([param1],[param2], ,[paramN]) { //function statement } Ví dụ: Ví dụ sau minh hoạ cách thức tạo ra vμ sử dụng hμm nh− lμ thμnh viên của một đối t−ợng. Hμm printStats đ−ợc tạo ra lμ ph−ơng thức của đối t−ợng person Function Example function person(first_name, last_name, age, sex) { this.first_name=first_name; Khoa Toan tin, Đại học Quốc gia Hμ Nội
26. JavaScript 26 this.last_name=last_name; this.age=age; this.sex=sex; this.printStats=printStats; } function printStats() { with (document) { write (" Name :" + this.last_name + " " + this.first_name + " " ); write("Age :"+this.age+" "); write("Sex :"+this.sex+" "); } } person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new person("Hoan", "Do Van", "23", "Male"); person1.printStats(); person2.printStats(); person3.printStats(); person4.printStats(); Khoa Toan tin, Đại học Quốc gia Hμ Nội
27. JavaScript 27 1.1.1.1.1. Hình 8: Ví dụ về hμm Hình 5.5: Kết quả việc sử dụng hμm Các hμm có sẵn JavaScript có một số hμm có sẵn, gắn trực tiếp vμo chính ngôn ngữ vμ không nằm trong một đối t−ợng nμo: • eval • parseInt • parseFloat 3.1.9. eval Hμm nμy đ−ợc sử dụng để đánh giá các biểu thức hay lệnh. Biểu thức, lệnh hay các đối t−ợng của thuộc tính đều có thể đ−ợc đánh giá. Đặc biệt hết sức hữu ích khi đánh giá các biểu thức do ng−ời dùng đ−a vμo (ng−ợc lại có thể đánh giá trực tiếp). Cú pháp: returnval=eval (bất kỳ biểu thức hay lệnh hợp lệ trong Java) Ví dụ: Khoa Toan tin, Đại học Quốc gia Hμ Nội
28. JavaScript 28 Eval Example var string=”10+ Math.sqrt(64)”; document.write(string+ “=”+ eval(string)); Hình 5.6 Ví dụ hμm Eval 3.1.10. parseInt Hμm nμy chuyển một chuỗi số thμnh số nguyên với cơ số lμ tham số thứ hai (tham số nμy không bắt buộc). Hμm nμy th−ờng đ−ợc sử dụng để chuyển các số nguyên sang cơ số 10 vμ đảm bảo rằng các dữ liệu đ−ọc nhập d−ới dạng ký tự đ−ợc chuyển thμnh số tr−ớc khi tính toán. Trong tr−ờng hợp dữ liệu vμo không hợp lệ, hμm parseInt sẽ đọc vμ chuyển dạng chuỗi đến vị trí nó tìm thấy ký tự không phải lμ số. Ngoμi ra hμm nμy còn cắt dấu phẩy động. Cú pháp parseInt (string, [, radix]) Ví dụ: Khoa Toan tin, Đại học Quốc gia Hμ Nội
29. JavaScript 29 perseInt Exemple document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + " "); document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) + " "); Hình 5.7: Ví dụ parInt 3.1.11. parseFloat Hμm nμy giống hμm parseInt nh−ng nó chuyển chuỗi thμnh số biểu diễn d−ới dạng dấu phẩy động. Cú pháp parseFloat (string) Ví dụ: Ví dụ sau minh hoạ cách thức xử lý của parseFloat với các kiểu chuỗi khác nhau. Hình 5.8 minh họa kết quả Khoa Toan tin, Đại học Quốc gia Hμ Nội
30. JavaScript 30 perseFload Exemple document.write("This script will show how diffrent strings are "); document.write("Converted using parseFloat "); document.write("137= " + parseFloat("137") + " "); document.write("137abc= " + parseFloat("137abc") + " "); document.write("abc137= " + parseFloat("abc137") + " "); document.write("1abc37= " + parseFloat("1abc37") + " "); Hình 5.8 : Kết quả của ví dụ parseFloat Mảng (Array) Mặc dù JavaScript không hỗ trợ cấu trúc dữ liệu mảng nh−ng Netscape tạo ra ph−ơng thức cho phép bạn tự tạo ra các hμm khởi tạo mảng nh− sau: function InitArray(NumElements){ this.length = numElements; for (var x=1; x<=numElements; x++){ this[x]=0 } return this; Khoa Toan tin, Đại học Quốc gia Hμ Nội
31. JavaScript 31 } Nó tạo ra một mảng với kích th−ớc xác định tr−ớc vμ điền các giá trị 0. Chú ý rằng thμnh phần đầu tiên trong mảng lμ độ dμi mảng vμ không đ−ợc sử dụng. Để tạo ra một mảng, khai báo nh− sau: myArray = new InitArray (10) Nó tạo ra các thμnh phần từ myArray[1] đến myArray[10] với giá trị lμ 0. Giá trị các thμnh phần trong mảng có thể đ−ợc thay đổi nh− sau: myArray[1] = "Nghệ An" myArray[2] = "Lμo" Sau đây lμ ví dụ đầy đủ: Array Exemple function InitArray(numElements) { this.length = numElements; for (var x=1; x "); document.write(myArray[2] + " "); Khoa Toan tin, Đại học Quốc gia Hμ Nội
32. JavaScript 32 Hình 5.9: Ví dụ mảng Sự kiện JavaScript lμ ngôn ngữ định h−ớng sự kiện, nghĩa lμ sẽ phản ứng tr−ớc các sự kiện xác định tr−ớc nh− kích chuột hay tải một văn bản. Một sự kiện có thể gây ra việc thực hiện một đoạn mã lệnh (gọi lμ các ch−ơng triình xử lý sự kiện) giúp cho ch−ơng trình có thể phản ứng một cách thích hợp. Ch−ơng trình xử lý sự kiện (Event handler): 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 gọi lμ ch−ơng trình xử lý 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: Ví dụ sau gọi hμm CheckAge() mỗi khi giá trị của tr−ờng văn bản thay đổi: Đoạn mã của ch−ơng trình xử lý sự kiện không lμ một hμm; nó lμ các lệnh của JavaScript cách nhau bằng dấu chấm phẩy. Tuy nhiên cho mục đích viết thμnh các module nên viết d−ới dạng các hμm. Một số ch−ơng trình xử lý sự kiện trong JavaScript: onBlur Xảy ra khi input focus bị xoá từ thμnh phần form 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. Khoa Toan tin, Đại học Quốc gia Hμ Nội
33. JavaScript 33 onChange Xảy ra khi giá trị của thμnh phần đ−ợc chọn thay đổi onFocus Xảy ra khi thμnh phần của form đ−ợc focus(lμm nổi lên). 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 Sau đây lμ bảng các ch−ơng trình xử lý sự kiện có sẵn của một số đối t−ợng. Các đối t−ợng nμy sẽ đ−ợc trình bμy kỹ hơn trong phần sau. Đối t−ợng Ch−ơng trình xử lý sự kiện có sẵn Selection list onBlur, onChange, onFocus Text onBlur, onChange, onFocus, onSelect Textarea onBlur, onChange, onFocus, onSelect Button onClick Checkbox onClick Radio button onClick Hypertext link onClick, onMouseOver, onMouseOut Clickable Imagemap area onMouseOver, onMouseOut Reset button onClick Submit button onClick Document onLoad, onUnload, onError Window onLoad, onUnload, onBlur, onFocus Framesets onBlur, onFocus Form onSubmit, onReset Image onLoad, onError, onAbort Ví dụ sau lμ một đoạn mã script đơn giản của ch−ơng trình xử lý sự kiện thẩm định giá trị đ−a vμo trong tr−ờng text. Tuổi của ng−ời sử dụng đ−ợc nhập vμo trong tr−ờng nμy vμ ch−ơng trình xử lý sự kiện sẽ thẩm định tính hợp lệ của dữ liệu đ−a vμo. Nếu không hợp lệ sẽ xuất hiện một thông báo yêu cầu nhập lại. Ch−ơng trình xử lý sự kiện đ−ợc gọi mỗi khi tr−ờng AGE bị thay đổi vμ focus chuyển sang tr−ờng khác. Hình 5.10 minh hoạ kết quả của ví dụ nμy Khoa Toan tin, Đại học Quốc gia Hμ Nội
34. JavaScript 34 An Event Handler Exemple function CheckAge(form) { if ( (form.AGE.value 120) ) { alert("Tuổi nhập vμo không hợp lệ! Mời bạn nhập lại"); form.AGE.value=0; } } Nhập vμo tên của bạn: Tên Đệm Họ Age Bạn thích mùa nμo nhất: Mùa xuân Mùa hạ Mùa thu Mùa đông Hãy chọn những hoạt động ngoμi trời mμ bạn yêu thích: Đi bộ Khoa Toan tin, Đại học Quốc gia Hμ Nội
35. JavaScript 35 Tr−ợt tuyết Thể thao d−ới n−ớc Đạp xe Hình 5.10: Minh hoạ cho ví dụ Event Handler Bμi tập 3.1.12. Câu hỏi 1. Viết một đoạn lệnh JavaScript sử dụng cách thức confirm() vμ câu lệnh if then để thực hiện: Khoa Toan tin, Đại học Quốc gia Hμ Nội
36. JavaScript 36 Hỏi ng−ời sử dụng có muốn nhận đ−ợc một lời chμo không Nếu có thì hiện ảnh wellcome.jpg vμ một lời chμo. Nếu không thì viết ra một lời thông báo 2. Viết một đoạn lệnh JavaScript để thực hiện: • Hỏi ng−ời sử dụng: "10+10 bằng bao nhiêu?" • Nếu đúng thì hỏi tiếp: Có muốn trả lời câu thứ hai không?" • Nếu muốn thì hỏi: "10*10 bằng bao nhiêu?" • Đánh giá kết quả bằng biểu thức logic sau đó viết ra mμn hình: Đúng: "CORRECT"; Sai: "INCORRECT" Gợi ý: Sử dụng biến toμn cục l−u kết quả đúng để so sánh với kết qủa đ−a vμo. 3. Câu lệnh nμo trong các câu sau đây sử dụng sai thẻ sự kiện a. b. c. d. e. f. 4. Điều gì xảy ra khi thực hiện script sau: Exercise 5.4 This is my page! Khoa Toan tin, Đại học Quốc gia Hμ Nội
37. JavaScript 37 5. Sử dụng vòng lặp while để mô phỏng các vòng lặp for sau: a. for (j = 4; j > 0; j ) { document.writeln(j + " "); } b. for (k = 1; k Execise 5.1 var conf=confirm("Click OK to see a wellcome message!") if (conf){ document.write(" "); document.write(" Wellcome you come to CSE's class"); } else document.write("What a pity! You have just click Cancel button"); 2. Thực hiện hỏi ng−ời sử dụng: Khoa Toan tin, Đại học Quốc gia Hμ Nội
38. JavaScript 38 Exercise 3.3 3. Các câu sai: a, c, e. Các câu đúng: b, d, f Khoa Toan tin, Đại học Quốc gia Hμ Nội
39. JavaScript 39 4. Khi ch−ơng trình đ−ợc chạy (load), hμm wellcome sẽ thực hiện hỏi tên ng−ời sử dụng, l−u tên đó vμo biến toμn cục name. Khi ng−ời sử dụng sang một địa chỉ URL khác, hμm farewell() sẽ thực hiện gửi một lời cảm ơn tới ng−ời sử dụng. 5. Sử dụng vòng lặp while nh− sau: a. j = 5; while ( j > 0) { document.writeln(j + " "); } b. k = 1; while (k <= 99) { k = k * 2 / 1.5; } c. num = 0; while (num <= 10) { if (num++ == 8) break; } Khoa Toan tin, Đại học Quốc gia Hμ Nội
40. JavaScript 40 4. Các đối t−ợng trong JavaScript Nh− đã nói JavaScript lμ ngôn ngữ lập trình dựa trên đối t−ợng, nh−ng không h−ớng đối t−ợng bởi vì nó không hỗ trợ các lớp cũng nh− tính thừa kế. Phần nμy nói về các đối t−ợng trong JavaScript vμ hình 6.1 chỉ ra sơ đồ phân cấp các đối t−ợng. Trong sơ đồ phân cấp các đối t−ợng của JavaScript, các đối t−ợng con thực sự lμ các thuộc tính của các đối t−ợng bố mẹ. Trong ví dụ về ch−ơng trình xử lý sự kiện tr−ớc đây form tên PHIEU_DIEU_TRAlμ thuộc tính của đối t−ợng document vμ tr−ờng text AGE lμ thuộc tính của form PHIEU_DIEU_TRA. Để tham chiếu đến giá trị của AGE, bạn phải sử dụng: document.PHIEU_DIEU_TRA.AGE.value Các đối t−ợng có thuộc tính (properties), ph−ơng thức (methods), vμ các ch−ơng trình xử lý sự kiện (event handlers) gắn với chúng. Ví dụ đối t−ợng document có thuộc tính title phản ánh nội dung của thẻ của document. Bên cạnh đó bạn thấy ph−ơng thức document.write đ−ợc sử dụng trong nhiều ví dụ để đ−a văn bản kết quả ra document. Đối t−ợng cũng có thể có các ch−ơng trình xử lý sự kiện. Ví dụ đối t−ợng link có hai ch−ơng trình xử lý sự kiện lμ onClick vμ onMouseOver. onClick đ−ợc gọi khi có đối t−ợng link đ−ợc kích, onMouseOver đ−ợc gọi khi con trỏ chuột di chuyển qua link. Khi bạn tải một document xuống Navigator, nó sẽ tạo ra một số đối t−ợng cùng với những giá trị các thuộc tính của chúng dựa trên file HTML của document đó vμ một vμi thông tin cần thiết khác. Những đối t−ợng nμy tồn tại một cách có cấp bậc vμ phản ánh chính cấu trúc của file HTML đó. Khoa Toan tin, Đại học Quốc gia Hμ Nội
41. JavaScript 41 Sơ đồ sau sẽ minh hoạ sự phân cấp của các đối t−ợng nμy Window Texturea navigator Text Plugin Layer FileUpload Frame Mime Type Link Password document Image Hidden Area Submit Location Anchor Reset Applet Radio History Plugin Checkbox Form Button Select Option Hình 6.1: Sơ đồ 1 - Phân cấp đối t−ợng Navigator Trong sơ đồ phân cấp nμy, các đối t−ợng con chính lμ các thuộc tính của một đối t−ợng cha. Ví dụ nh− một form tên lμ form1 chính lμ một đối t−ợng con của đối t−ợng document vμ đ−ợc gọi tới lμ document.form1 Tất cả các trang đều có các đối t−ợng sau đây: • navigator: có các thuộc tính tên vμ phiên bản của Navigator đang đ−ợc sử dụng, dùng cho MIME type đ−ợc hỗ trợ bởi client vμ plug-in đ−ợc cμi đặt trên client. • window: lμ đối t−ợng ở mức cao nhất, có các thuộc tính thực hiện áp dụng vμo toμn bộ cửa sổ. • document: chứa các thuộc tính dựa trên nội dung của document nh− tên, mμu nền, các kết nối vμ các forms. • location: có các thuộc tính dựa trên địa chỉ URL hiện thời Khoa Toan tin, Đại học Quốc gia Hμ Nội
42. JavaScript 42 • history: Chứa các thuộc tính về các URL mμ client yêu cầu tr−ớc đó. Sau đây sẽ mô tả các thuộc tính, ph−ơng thức cũng nh− các ch−ơng trình xử lý sự kiện cho từng đối t−ợng trong JavaScript. Đối t−ợng navigator Đối t−ợng nμy đ−ợc sử dụng để đạt đ−ợc các thông tin về trình duyệt nh− số phiên bản. Đối t−ợng nμy không có ph−ơng thức hay ch−ơng trình xử lý sự kiện. Các thuộc tính appCodeName Xác định tên mã nội tại của trình duyệt (Atlas). AppName Xác định tên trình duyệt. AppVersion Xác định thông tin về phiên bản của đối t−ợng navigator. userAgent Xác định header của user - agent. Ví dụ Ví dụ sau sẽ hiển thị các thuộc tính của đối t−ợng navigator Navigator Object Exemple document.write("appCodeName = "+navigator.appCodeName + " "); document.write("appName = "+navigator.appName + " "); document.write("appVersion = "+navigator.appVersion + " "); document.write("userAgent = "+navigator.userAgent + " "); Khoa Toan tin, Đại học Quốc gia Hμ Nội
43. JavaScript 43 Hình 6.2: Minh hoạ cho đối t−ợng Navigator Đối t−ợng window Đối t−ợng window nh− đã nói ở trên lμ đối t−ợng ở mức cao nhất. Các đối t−ợng document, frame, vị trí đều lμ thuộc tính của đối t−ợng window. 4.1.1. Các thuộc tính • defaultStatus - Thông báo ngầm định hiển thị lên trên thanh trạng thái của cửa sổ • Frames - Mảng xác định tất cả các frame trong cửa sổ. • Length - Số l−ợng các frame trong cửa sổ cha mẹ. • Name - Tên của cửa sổ hiện thời. • Parent - Đối t−ợng cửa sổ cha mẹ • Self - Cửa sổ hiện thời. • Status - Đ−ợc sử dụng cho thông báo tạm thời hiển thị lên trên thanh thạng thái cửa sổ. Đựơc sử dụng để lấy hay đặt lại thông báo trạng thái vμ ghi đè lên defaultStatus. • Top - Cửa sổ ở trên cùng. • Window - Cửa sổ hiện thời. Khoa Toan tin, Đại học Quốc gia Hμ Nội
44. JavaScript 44 4.1.2. Các ph−ơng thức • alert ("message") -Hiển thị hộp hội thoại với chuỗi "message" vμ nút OK. • clearTimeout(timeoutID) -Xóa timeout do SetTimeout đặt. SetTimeout trả lại timeoutID • windowReference.close -Đóng cửa sổ windowReference. • confirm("message") -Hiển thị hộp hội thoại với chuỗi "message", nút OK vμ nút Cancel. Trả lại giá trị True cho OK vμ False cho Cancel. • [windowVar = ][window]. open("URL", "windowName", [ "windowFeatures" ] ) - Mở cửa sổ mới. • prompt ("message" [,"defaultInput"]) - Mở một hộp hội thoại để nhận dữ liệu vμo tr−ờng text. • TimeoutID = setTimeout(expression,msec) - Đánh giá biểu thức expresion sau thời gian msec. Ví dụ: Sử dụng tên cửa sổ khi gọi tới nó nh− lμ đích của một form submit hoặc trong một Hipertext link (thuộc tính TARGET của thẻ FORM vμ A). Trong ví dụ tạo ra một tới cửa sổ thứ hai, nh− nút thứ nhất để mở một cửa sổ rỗng, sau đó một liên kết sẽ tải file doc2.html xuống cửa sổ mới đó rồi một nút khác dùng để đóng của sổ thứ hai lại, ví dụ nμy l−a vμo file window.html: Frame Example Khoa Toan tin, Đại học Quốc gia Hμ Nội
45. JavaScript 45 Hình 6.3: Minh hoạ cho đối t−ợng cửa sổ 4.1.3. Các ch−ơng trình xử lý sự kiện • onLoad - Xuất hiện khi cửa sổ kết thúc việc tải. • onUnLoad - Xuất hiện khi cửa sổ đ−ợc loại bỏ. Đối t−ợng location Các thuộc tính của đối t−ợng location duy trì các thông tin về URL của document hiện thời. Đối t−ợng nμy hoμn toμn không có các ph−ơng thức vμ ch−ơng trình xử lý sự kiện đi kèm. Ví dụ: http:// www.abc.com/ chap1/page2.html#topic3 Các thuộc tính • hash - Tên anchor của vị trí hiện thời (ví dụ topic3). • Host - Phần hostname:port của URL (ví dụ www.abc.com ). Chú ý rằng đây th−ờng lμ cổng ngầm định vμ ít khi đ−ợc chỉ ra. • Hostname - Tên của host vμ domain (ví dụ www.abc.com ). • href - Toμn bộ URL cho document hiện tại. • Pathname - Phần đ−ờng dẫn của URL (ví dụ /chap1/page2.html). • Port - Cổng truyền thông đ−ợc sử dụng cho máy tính host, th−ờng lμ cổng ngầm định. • Protocol - Giao thức đ−ợc sử dụng (cùng với dấu hai chấm) (ví dụ http:). Khoa Toan tin, Đại học Quốc gia Hμ Nội
46. JavaScript 46 • Search - Câu truy vấn tìm kiếm có thể ở cuối URL cho các script CGI. Đối t−ợng frame Một cửa số có thể có một vμi frame. Các frame có thể cuộn một cách độc lập với nhau vμ mỗi frame có URL riêng. frame không có các ch−ơng trình xử lý sự kiện. Sự kiện onLoad vμ onUnLoad lμ của đối t−ợng window. 4.1.4. Các thuộc tính • frames - Mảng tất cả các frame trong cửa sổ. • Name - Thuộc tính NAME của thẻ • Length - Số l−ợng các frame con trong một frame. • Parent - Cửa sổ hay frame chứa nhóm frame hiện thời. • self - frame hiện thời. • Window - frame hiện thời. 4.1.5. Các ph−ơng thức • clearTimeout (timeoutID) - Xoá timeout do setTimeout lập. SetTimeout trả lại timeoutID. • TimeoutID = setTimeout (expression,msec) - Đánh giá expression sau khi hết thời gian msec. 4.1.6. Sử dụng Frame 4.1.6.1. a) Tạo một frame (create) Để tạo một frame, ta sử dụng thẻ FRAMESET. Mục đích của thẻ nμy lμ định nghĩa một tập các frame trong một trang. Ví dụ1: tạo frame ( hình 17) Frame Example Sơ đồ sau hiển thị cấu trúc của các frame: Cả 3 frame đều trên cùng một cửa sổ cha, mặc dù 2 trong số các frame đó nằm trong một frameset khác. Khoa Toan tin, Đại học Quốc gia Hμ Nội
47. JavaScript 47 Top listFrame (category.html) contentFrame (titles.html) navigatorFrame (navigator.html) Bạn có thể gọi tới những frame tr−ớc đó bằng cách sử dụng thuộc tính frames nh− sau: listFrame chính lμ top.frames[0] contentFrame chính lμ top.frames[1] navigatorFrame chính lμ top.frames[2] Hình 6.4: Kết quả việc tạo frame trong Ví dụ 2: Cũng giống nh− một sự lựa chọn, bạn có thể tạo ra một cửa sổ giống nh− ví dụ tr−ớc nh−ng trong mỗi đỉnh của hai frame lại có một cửa sổ cha riêng từ navigateFrame. Mức frameset cao nhất có thể đ−ợc định nghĩa nh− sau: Frame Example Khoa Toan tin, Đại học Quốc gia Hμ Nội
48. JavaScript 48 Trong file muske13.html lại tiếp tục đặt một frameset: Frame Example Khi đó kết quả hiển thị của ví dụ 2 giống ví dụ 1 nh−ng sự phân cấp của các frames lại khác hẳn: Bạn có thể gọi tới các frame trên bằng cách sử dụng thuộc tính mảng frames nh− sau: top listFrame (category.html) upperFrame (muske13.html) contentFrame (titles.html) navigatorFrame (navigator.html) upperFrame chính lμ top.frames[0] navigatorFrame chính lμ top.frames[1] listFrame chính lμ upperFrame.frames[0] hoặc top.frames[0].frames[0] contentFrame chính lμ upperFrame.frames[1] hoặc top.frames[0].frames[1] 4.1.6.2. b) Cập nhật một frame (update) Bạn có thể cập nhật nội dung của một frame bằng cách sử dụng thuộc tính location để đặt địa chỉ URL vμ phải định chỉ rõ vị trí của frame trong cấu trúc. Trong ví dụ trên, nếu bạn thêm một dòng sau vμo navigatorFrame: Khoa Toan tin, Đại học Quốc gia Hμ Nội
49. JavaScript 49 thì khi nút Titles only đ−ợc nhấn, file artist.html sẽ đ−ợc tải vμo upperFrame, vμ hai frame listFrame, contentFrame sẽ bị đóng lại nh− chúng ch−a bao giờ tồn tại. Đối t−ợng document Đối t−ợng nμy chứa các thông tin về document hiện thời vμ cung cấp các ph−ơng thức để đ−a thông tin ra mμn hình. Đối t−ợng document đ−ợc tạo ra bằng cặp thẻ vμ . Một số các thuộc tính gắn với thẻ . Các đối t−ợng anchor, forms, history, links lμ thuộc tính của đối t−ợng document. Không có các ch−ơng trình xử lý sự kiện cho các frame. Sự kiện onLoad vμ onUnLoad lμ cho đối t−ợng window. 4.1.7. Các thuộc tính • alinkColor - Giống nh− thuộc tính ALINK. • anchor - Mảng tất cả các anchor trong document. • bgColor - Giống thuộc tính BGCOLOR. • cookie - Sử dụng để xác định cookie. • fgColor - Giống thuộc tính TEXT. • forms - Mảng tất cả các form trong document. • lastModified - Ngμy cuối cùng văn bản đ−ợc sửa. • linkColor - Giống thuộc tính LINK. • links - Mảng tất cả các link trong document. • location - URL đầy đủ của văn bản. • referrer - URL của văn bản gọi nó. • title - Nội dung của thẻ . • vlinkColor - Giống thuộc tính VLINK. 4.1.8. Các ph−ơng thức • document.clear - Xoá document hiện thời. • document.close - Đóng dòng dữ liệu vμo vμ đ−a toμn bộ dữ liệu trong bộ đệm ra mμn hình. • document.open (["mineType"]) - Mở một stream để thu thập dữ liệu vμo của các phwong thức write vμ writeln. • document.write(expression1 [,expression2] [,expressionN]) - Viết biểu thức HTML lên văn bản trông một cửa sổ xác định. • document.writeln (expression1 [,expression2] [,expressionN] ) - Giống ph−ơng thức trên nh−ng khi hết mỗi biểu thức lại xuống dòng. Khoa Toan tin, Đại học Quốc gia Hμ Nội
50. JavaScript 50 Đối t−ợng anchors anchor lμ một đoạn văn bản trong document có thể dùng lμm đích cho một siêu liên kết. Nó đ−ợc xác định bằng cặp thẻ . Đối t−ợng anchor không có thuộc tính, ph−ơng thức cũng nh− ch−ơng trình xử lý sự kiện. Mảng anchor tham chiếu đến mỗi anchor có tên trong document. Mỗi anchor đ−ợc tham chiếu bằng cách: document.anchors [index] Mảng anchor có một thuộc tính duy nhất lμ length xác định số l−ợng các anchor trong document, nó có thể đ−ợc xác định nh− sau: document.anchors.length. Đối t−ợng forms Các form đ−ợc tạo ra nhờ cặp thẻ vμ . Phần lớn các thuộc tính của đối t−ợng form phản ánh các thuộc tính của thẻ . Có một vμi phần tử (elements) lμ thuộc tính của đối t−ợng forms: button checkbox hidden password radio reset select submit text textarea Các phần tử nμy sẽ đ−ợc trình bμy sau. Nếu document chứa một vμi form, chúng có thể đ−ợc tham chiếu qua mảng forms. Số l−ợng các form có thể đ−ợc xác định nh− sau: document.forms.length. Mỗi một form có thể đ−ợc tham chiếu nh− sau: document.forms[index] 4.1.9. Các thuộc tính action thuộc tính ACTION của thẻ FORM. elements Mảng chứa tất cả các thμnh phần trong một form (nh− checkbox, tr−ờng text, danh sách lựa chọn encoding Xâu chứa kiểu MIME đ−ợc sử dụng để mã hoá nội dung của form gửi cho server. length Số l−ợng các thμnh phần trong một form. method Thuộc tính METHOD. Khoa Toan tin, Đại học Quốc gia Hμ Nội
51. JavaScript 51 target Xâu chứa tên của cửa sổ đích khi submit form 4.1.10. Các ph−ơng thức formName.submit () - Xuất dữ liệu của một form tên formName tới trang xử lý. Ph−ơng thức nμy mô phỏng một click vμo nút submit trên form. 4.1.11. Các ch−ơng trình xử lý sự kiện onSubmit - Ch−ơng trình xử lý sự kiện nμy đ−ợc gọi khi ng−ời sử dụng chuyển dữ liệu từ form đi. Đối t−ợng history Đối t−ợng nμy đ−ợc sử dụng để l−u giữ các thông tin về các URL tr−ớc đ−ợc ng−ời sử dụng sử dụng. Danh sách các URL đ−ợc l−u trữ theo thứ tự thời gian. Đối t−ợng nμy không có ch−ơng trình xử lý sự kiện. 4.1.12. Các thuộc tính length - Số l−ợng các URL trong đối t−ợng. 4.1.13. Các ph−ơng thức • history.back() - Đ−ợc sử dụng để tham chiếu tới URL mới đ−ợc thăm tr−ớc đây. • history.forward() - Đ−ợc sử dụng để tham chiếu tới URL kế tiếp trong danh sách. Nó sẽ không gây hiệu ứng gì nếu đã đến cuối của danh sách. • history.go (delta | "location") - Đ−ợc sử dụng để chuyển lên hay chuyển xuống delta bậc hay di chuển đến URL xác định bởi location trong danh sách. Nếu delta đ−ợc sử dụng thì việc dịch chuyển lên phía trên khi delta d−ơng vμ xuống phía d−ới khi delta âm. nếu sử dụng location, URL gần nhất có chứa location lμ chuỗi con sẽ đ−ợc tham chiếu. Đối t−ợng links Đối t−ợng link lμ một đoạn văn bản hay một ảnh đ−ợc xem lμ một siêu liên kết. Các thuộc tính của đối t−ợng link chủ yếu xử lý về URL của các siêu liên kết. Đối t−ợng link cũng không có ph−ơng thức nμo. Mảng link chứa danh sách tất cả các liên kết trong document. Có thể xác định số l−ợng các link qua document.links.length() Có thể tham chiếu tới một liên kết qủa document.links [index] Để xác định các thuộc tính của đối t−ợng link, có thể sử dụng URL t−ơng tự: Khoa Toan tin, Đại học Quốc gia Hμ Nội
52. JavaScript 52 4.1.14. Các thuộc tính • hash - Tên anchor của vị trí hiện thời (ví dụ topic3). • Host - Phần hostname:port của URL (ví dụ www.abc.com). Chú ý rằng đây th−ờng lμ cổng ngầm định vμ ít khi đ−ợc chỉ ra. • Hostname - Tên của host vμ domain (ví dụ ww.abc.com). • href - Toμn bộ URL cho document hiện tại. • Pathname - Phần đ−ờng dẫn của URL (ví dụ /chap1/page2.html). • port - Cổng truyền thông đ−ợc sử dụng cho máy tính host, th−ờng lμ cổng ngầm định. • Protocol - Giao thức đ−ợc sử dụng (cùng với dấu hai chấm) (ví dụ http:). • Search - Câu truy vấn tìm kiếm có thể ở cuối URL cho các script CGI. • Target - Giống thuộc tính TARGET của . 4.1.15. Các ch−ơng trình xử lý sự kiện • onClick - Xảy ra khi ng−ời sử dụng nhấn vμo link. • onMouseOver - Xảy ra khi con chuột di chuyển qua link. Đối t−ợng Math Đối t−ợng Math lμ đối t−ợng nội tại trong JavaScript. Các thuộc tính của đối t−ợng nμy chứa nhiều hằng số toán học, các hμm toán học, l−ợng giác phổ biến. Đối t−ợng Math không có ch−ơng trình xử lý sự kiện. Việc tham chiếu tới number trong các ph−ơng thức có thể lμ số hay các biểu thức đ−ợc đnáh giá lμ số hợp lệ. 4.1.16. Các thuộc tính • E - Hằng số Euler, khoảng 2,718. • LN2 - logarit tự nhiên của 2, khoảng 0,693. • LN10 - logarit tự nhiên của 10, khoảng 2,302. • LOG2E - logarit cơ số 2 của e, khoảng 1,442. • PI - Giá trị của π, khoảng 3,14159. • SQRT1_2 - Căn bậc 2 của 0,5, khoảng 0,707. • SQRT2 - Căn bậc 2 của 2, khoảng 1,414. 4.1.17. Các ph−ơng thức • Math.abs (number) - Trả lại giá trị tuyệt đối của number. Khoa Toan tin, Đại học Quốc gia Hμ Nội
53. JavaScript 53 • Math.acos (number) - Trả lại giá trị arc cosine (theo radian) của number. Giá trị của number phải nămg giữa -1 vμ 1. • Math.asin (number) - Trả lại giá trị arc sine (theo radian) của number. Giá trị của number phải nămg giữa -1 vμ 1. • Math.atan (number) - Trả lại giá trị arc tan (theo radian) của number. • Math.ceil (number) - Trả lại số nguyên nhỏ nhất lớn hơn hoặc bằng number. • Math.cos (number) - Trả lại giá trị cosine của number. • Math.exp (number) - Trả lại giá trị e^ number, với e lμ hằng số Euler. • Math.floor (number) - Trả lại số nguyên lớn nhất nhỏ hơn hoặc bằng number. • Math.log (number) - Trả lại logarit tự nhiên của number. • Math.max (num1,num2) - Trả lại giá trị lớn nhất giữa num1 vμ num2 • Math.min (num1,num2) - Trả lại giá trị nhỏ nhất giữa num1 vμ num2. • Math.pos (base,exponent) - Trả lại giá trị base luỹ thừa exponent. • Math.random (r) - Trả lại một số ngẫu nhiên giữa 0 vμ 1. Phwong thức nμy chỉ thực hiện đ−ợc trên nền tảng UNIX. • Math.round (number) - Trả lại giá trị của number lμm tròn tới số nguyên gần nhất. • Math.sin (number) - Trả lại sin của number. • Math.sqrt (number) - Trả lại căn bậc 2 của number. • Math.tan (number) - Trả lại tag của number. Đối t−ợng Date Đối t−ợng Date lμ đối t−ợng có sẵn trong JavaScript. Nó cung cấp nhiều ph−ơng thức có ích để xử lý về thời gian vμ ngμy tháng. Đối t−ợng Date không có thuộc tính vμ ch−ơng trình xử lý sự kiện. Phần lớn các ph−ơng thức date đều có một đối t−ợng Date đi cùng. Các ph−ơng thức giới thiệu trong phần nμy sử dụng đối t−ợng Date dateVar, ví dụ: dateVar = new Date ('August 16, 1996 20:45:04'); 4.1.18. Các ph−ơng thức • dateVar.getDate() - Trả lại ngμy trong tháng (1-31) cho dateVar. • dateVar.getDay() - Trả lại ngμy trong tuần (0=chủ nhật, 6=thứ bảy) cho dateVar. • dateVar.getHours() - Trả lại giờ (0-23) cho dateVar. Khoa Toan tin, Đại học Quốc gia Hμ Nội
54. JavaScript 54 • dateVar.getMinutes() - Trả lại phút (0-59) cho dateVar. • dateVar.getSeconds() - Trả lại giây (0-59) cho dateVar. • dateVar.getTime() - Trả lại số l−ợng các mili giây từ 00:00:00 ngμy 1/1/1970. • dateVar.getTimeZoneOffset() - Trả lại độ dịch chuyểnbằng phút của giờ địa ph−ơng hiện tại so với giờ quốc tế GMT. • dateVar.getYear()-Trả lại năm cho dateVar. • Date.parse (dateStr) - Phân tích chuỗi dateStr vμ trả lại số l−ợng các mili giây tính từ 00:00:00 ngμy 01/01/1970. • dateVar.setDay(day) - Đặt ngμy trong tháng lμ day cho dateVar. • dateVar.setHours(hours) - Đặt giờ lμ hours cho dateVar. • dateVar.setMinutes(minutes) - Đặt phút lμ minutes cho dateVar. • dateVar.setMonths(months) - Đặt tháng lμ months cho dateVar. • dateVar.setSeconds(seconds) - Đặt giây lμ seconds cho dateVar. • dateVar.setTime(value) - Đặt thời gian lμ value, trong đó value biểu diễn số l−ợng mili giây từ 00:00:00 ngμy 01/01/10970. • dateVar.setYear(years) - Đặt năm lμ years cho dateVar. • dateVar.toGMTString() - Trả lại chuỗi biểu diễn dateVar d−ới dạng GMT. • dateVar.toLocaleString()-Trả lại chuỗi biểu diễn dateVar theo khu vực thời gian hiện thời. • Date.UTC (year, month, day [,hours] [,minutes] [,seconds]) - Trả lại số l−ợng mili giây từ 00:00:00 01/01/1970 GMT. Đối t−ợng String Đối t−ợng String lμ đối t−ợng đ−ợc xây dựng nội tại trong JavaScript cung cấp nhiều ph−ơng thức thao tác trên chuỗi. Đối t−ợng nμy có thuộc tính duy nhất lμ độ dμi (length) vμ không có ch−ơng trình xử lý sự kiện. 4.1.19. Các ph−ơng thức • str.anchor (name) - Đ−ợc sử dụng để tạo ra thẻ (một cách động). Tham số name lμ thuộc tính NAME của thẻ . • str.big() - Kết quả giống nh− thẻ trên chuỗi str. • str.blink() - Kết quả giống nh− thẻ trên chuỗi str. • str.bold() - Kết quả giống nh− thẻ trên chuỗi str. • str.charAt(a) - Trả lại ký tự thứ a trong chuỗi str. • str.fixed() - Kết quả giống nh− thẻ trên chuỗi str. Khoa Toan tin, Đại học Quốc gia Hμ Nội
55. JavaScript 55 • str.fontcolor() - Kết quả giống nh− thẻ . • str.fontsize(size) - Kết quả giống nh− thẻ . • str.index0f(srchStr [,index]) - Trả lại vị trí trong chuỗi str vị trí xuất hiện đầu tiên của chuỗi srchStr. Chuỗi str đ−ợc tìm từ trái sang phải. Tham số index có thể đ−ợc sử dụng để xác định vị trí bắt đầu tìm kiếm trong chuỗi. • str.italics() - Kết quả giống nh− thẻ trên chuỗi str. • str.lastIndex0f(srchStr [,index]) - Trả lại vị trí trong chuỗi str vị trí xuất hiện cuối cùng của chuỗi srchStr. Chuỗi str đ−ợc tìm từ phải sang trái. Tham số index có thể đ−ợc sử dụng để xác định vị trí bắt đầu tìm kiếm trong chuỗi. • str.link(href) - Đ−ợc sử dụng để tạo ra một kết nối HTML động cho chhuỗi str. Tham số href lμ URL đích của liên kết. • str.small() - Kết quả giống nh− thẻ trên chuỗi str. • str.strike() - Kết quả giống nh− thẻ trên chuỗi str. • str.sub() - Tạo ra một subscript cho chuỗi str, giống thẻ . • str.substring(a,b) - Trả lại chuỗi con của str lμ các ký tự từ vị trí thứ a tới vị trí thứ b. Các ký tự đ−ợc đếm từ trái sang phải bắt đầu từ 0. • str.sup() - Tạo ra superscript cho chuỗi str, giống thẻ . • str.toLowerCase() - Đổi chuỗi str thμnh chữ th−ờng. • str.toUpperCase() - Đổi chuỗi str thμnh chữ hoa. Các phần tử của đối t−ợng Form Form đ−ợc tạo bởi các phần tử cho phép ng−ời sử dụng đ−a thông tin vμo. Khi đó, nội dung (hoặc giá trị) của các phần tử sẽ đ−ợc chuyển đến một ch−ơng trình trên server qua một giao diện đ−ợc gọi lμ Common Gateway Interface(Giao tiếp qua một cổng chung) gọi tắt lμ CGI Sử dụng JavaScript bạn có thể viết những đoạn scripts chèn vμo HTML của bạn để lμm việc với các phần tử của form vμ các giá trị của chúng. Bảng ?: Các phần tử của form Phần tử Mô tả Lμ một nút bấm hơn lμ nút submit hay nút reset button ( ) checkbox Một checkbox ( ) Lμ một phần tử tải file lên cho phép ng−ời sử dụng gửi lên một file FileUpload ( ) hidden Một tr−ờng ẩn ( ) Khoa Toan tin, Đại học Quốc gia Hμ Nội
56. JavaScript 56 Một tr−ờng text để nhập mật khẩu mμ tất cả các ký tự nhập vμo đều password hiển thị lμ dấu (*)( ) radio Một nút bấm ( ) reset Một nút reset( ) Một danh sách lựa chọn select ( option1 option2 ) submit Một nút submit ( ) text Một tr−ờng text ( ) Một tr−ờng text cho phép nhập vμp nhiều dòng textArea default text ) Mỗi phần tử có thể đ−ợc đặt tên để JavaScript truy nhập đến chúng qua tên 4.1.20. Thuộc tính type Trong mỗi phần tử của form đều có thuộc tính type, đó lμ một xâu chỉ định rõ kiểu của phần tử đ−ợc đ−a vμo nh− nút bấm, một tr−ờng text hay một checkbox Xâu đó có thể lμ một trong các giá trị sau: Text field: "text" Radio button: "radio" Checkbox: "checkbox" Hidden field: "hidden" Submit button: "submit" Reset button: "reset" Password field: "password" Button: "button" Select list: "select-one" Multiple select lists: "select-multiple" Textarea field: "textarea" 4.1.21. Phần tử button Trong một form HTML chuẩn, chỉ có hai nút bấm có sẵn lμ submit vμ reset bởi vị dữ liệu trong form phải đ−ợc gửi tới một vμi địa chỉ URL (th−ờng lμ CGI-BIN script) để xử lý vμ l−u trữ. Một phần tử button đ−ợc chỉ định rõ khi sử dụng thẻ INPUT: Khoa Toan tin, Đại học Quốc gia Hμ Nội
57. JavaScript 57 Trong thẻ INPUT, name lμ tên của button, thuộc tính VALUE có chứa nhãn của button sẽ đ−ợc hiển thị trên Navigator của browser. Chỉ có một thẻ sự kiện duy nhất đối với button lμ onClick. Kết hợp với nó lμ cách thức duy nhất click.Phần tử buttton có khả năng mở rộng cho phép ng−ời lập trình JavaScript có thể viết đ−ợc một đoạn mã lệnh JavaScript để thực thi việc thêm vμo một nút bấm trong một script. Trong ví dụ sau, thay vì sử dụng onChange, bạn có thể chỉnh sửa script để định giá biểu thức khi button đ−ợc bấm. Ví dụ: Định giá một form sử dụng phần tử button. button Example Enter a JavaScript mathematical expression: The result of this expression is: 4.1.22. Phần tử checkbox Các phần tử checkbox có khả năng bật tắt dùng để chọn hoặc không chọn một thông tin. Các checkbox có nhiều thuộc tính vμ cách thức hơn button. Bảng d−ới đây lμ danh sách các thuộc tính vμ các cách thức của phần tử checkbox. Bảng . Các thuộc tính vμ cách thức của phần tử checkbox. Cách thức vμ Mô tả thuộc tính Khoa Toan tin, Đại học Quốc gia Hμ Nội
58. JavaScript 58 checked Cho biết trạng thái hiện thời của checkbox (thuộc tính) defaultChecked Cho biết trạng thái mặc định của phần tử (thuộc tính) name Cho biết tên của phần tử đ−ợc chỉ định trong thẻ INPUT (thuộc tính) value Cho biết giá trị hiện thời của phần tử đ−ợc chỉ định trong thẻ INPUT (thuộc tính) click() Mô tả một click vμo checkbox (Cách thức) Phần tử checkbox chỉ có một thẻ sự kiện lμ onClick Ví dụ: Tạo hộp checkbox để nhập vμo một số rồi lựa chọn tính nhân đôi vμ bình ph−ơng: checkbox Example Khoa Toan tin, Đại học Quốc gia Hμ Nội
59. JavaScript 59 Value: Action (default double): Square Result: Trong script nμy, bạn đã thấy cách sử dụng thẻ sự kiện onClick cũng nh− thuộc tính checked lμ một giá trị kiểu Boolean có thể dùng lμm điều kiện trong câu lệnh if else Bạn có thể thêm một checkbox tên lμ square vμo form. Nếu hộp nμy đ−ợc check, ch−ơng trình sẽ lấy giá trị của nó, nếu không, một thực thi đ−ợc mặc định sẽ nhân đôi giá trị của nó. Thẻ sự kiện onClick trong checkbox đ−ợc định nghĩa: ( ) Khi đó nếu ng−ời dùng thay đổi một câu lệnh khác, form sẽ đ−ợc tính toán lại. Để tạo ra sự mở rộng cho checkbox. bạn có thể thay đổi hμm calculate() nh− sau: function calculate(form,callingField) { if (callingField == "result") { // if (1) if (form.square.checked) { // if (2) form.entry.value = Math.sqrt(form.result.value); } else { form.entry.value = form.result.value / 2; } //end if(2) } else { if (form.square.checked) { // if (3) form.result.value=form.entry.value*form.entry.value; } else { form.result.value = form.entry.value * 2; } // end if (3) } // end if (1) } Khoa Toan tin, Đại học Quốc gia Hμ Nội
60. JavaScript 60 4.1.23. Phần tử File Upload Phần tử nμy cung cấp cho form một cách để ng−ời sử dụng có thể chỉ rõ một file đ−a vμo form xử lý. Phần tử file Upload đ−ợc chỉ định rõ trong JavaScript bằng đối t−ợng FileUpload. Đối t−ợng chỉ có hai thuộc tính lμ name vμ value, cả hai đều lμ giá trị xâu nh− các đối t−ợng khác. Không có cách thức hay thẻ file cho đối t−ợng nμy. 4.1.24. Phần tử hidden Phần tử hidden lμ phần tử duy nhất trong số tất cả các phần tử của form không đ−ợc hiển thị trên Web browser. Tr−ờng hidden có thể sử dụng để l−u các giá trị cần thiết để gửi tới server song song với sự xuất ra từ form (form submission) nh−ng nó không đ−ợc hiển thị trên trang. Mọi ng−ời có thể sử dụng trong JavaScript để l−u các giá trị trong suốt một script vμ để tính toán không cần form. Đối t−ợng hidden chỉ có hai thuộc tính lμ name vμ value, đó cũng lμ những giá trị xâu giống các đối t−ợng khác. Không có cách thức hay thẻ sự kiện nμo cho đối t−ợng nμy. 4.1.25. Phần tử Password Đối t−ợng Password lμ đối t−ợng duy nhất trong các đối t−ợng của form mμ khi gõ bất kỳ ký tự nμo vμo cũng đều hiển thị dấu sao(*). Nó cho phép đ−a vμo những thông tin bí mật nh− đăng ký mật khẩu Đối t−ợng Password có 3 thuộc tính giống tr−ờng text lμ: defaultValue, name vμ value. Không giống với hai phần tử ở trên, tr−ờng Password có nhiều cách thức hơn(focus(), blur(), and select() ) vμ t−ơng ứng với các thẻ sự kiện: onFocus, onBlur, and onSelect. Phần nμy sẽ đ−ợc nói kỹ hơn trong đối t−ợng text. 4.1.26. Phần tử radio Đối t−ợng radio gần giống sự bật tắt checkbox khi có hai nút radio kết hợp thμnh một nhóm. Khi nhiều radio đ−ợc kết hợp thμnh một nhóm, chỉ có một nút đ−ợc chọn trong bất kỳ một thời điểm nμo. Ví dụ dòng lệnh sau tạo ra một nhóm radio có ba nút tên lμ test: 1 2 3 Nhóm các nút radio lại bằng cách đặt cho chúng có cùng một tên trong các thẻ INPUT. Có một vμi thuộc tính để kiểm tra trạng thái hiện thời của một nhóm nút radio. Bảng sau hiển thị các thuộc tính vμ cách thức của đối t−ợng radio. Bảng? . Các thuộc tính vμ cách thức của đối t−ợng radio. Thuộc tính vμ Mô tả cách thức Khoa Toan tin, Đại học Quốc gia Hμ Nội
61. JavaScript 61 checked Mô tả trạng thái hiện thời của phần tử radio (thuộc tính) defaultChecked Mô tả trạng thái mặc định của phần tử (thuộc tính) index Mô tả thứ tự của nút radio đ−ợc chọn hiện thời trong một nhóm length Mô tả tổng số nút radio trong một nhóm name Mô tả tên của phần tử đ−ợc chỉ định trong thẻ INPUT (thuộc tính) value Mô tả giá trị hiện thời của phần tử đ−ợc định ra trong thẻ INPUT (thuộc tính) click() Mô phỏng một click trên nút radio (cách thức) Cũng nh− checkbox, radio chỉ có một thẻ sự kiện lμ onClick. Không có bất kỳ một đối t−ợng form nμo có thuộc tính index vμ length. Do một nhóm radio gồm nhiều phần tử radio, nên chúng đ−ợc đặt trong một mảng các nút radio vμ đ−ợc đánh số từ 0. Trong ví dụ nhóm radio có tên test ở trên, nếu nhóm đó nằm trong một form có tên lμ "testform", bạn có thể gọi tới nút radio thứ hai bằng tên "testform.test[1]" vμ có thể kiểm tra giá trị của nó bằng "testform.test[1].checked" Để minh hoạ rõ cách dùng đối t−ợng radio, ta xem ví dụ sau: Ví dụ: radio button Example Khoa Toan tin, Đại học Quốc gia Hμ Nội
62. JavaScript 62 Value: Action: Double Square Result: Trong ví dụ nμy, sự thay đổi từ checkbox ở trên lμ rất khó nhận biết. Thay cho một checkbox trong ví dụ tr−ớc, ở đây ta sử dụng hai nút radio với hai giá trị khác nhau: double vμ square Nh− ta đã biết có thể truy nhập đến các nút radio qua một mảng, do đó hai nút nμy có thể truy nhập bằng action[0] vμ action[1]. Bằng cách nμy, bạn chỉ cần thay đổi tham chiếu đến hμm calculate() từ form.square.checked thμnh form.action[1].checked. 4.1.27. Phần tử reset Sử dụng đối t−ợng reset, bạn có thể tác động ng−ợc lại để click vμo nút Reset. Cũng giống đối t−ợng button, đối t−ợng reset có hai thuộc tính lμ name vμ value, vμ một cách thức click(), một thẻ sự kiện onClick. Hầu hết những ng−ời lập trình khong sử dụng thẻ sự kiện onClick của nút reset để kiểm tra giá trị của nút nμy, đối t−ợng reset th−ờng dùng để xoá form. Ví dụ sau minh hoạ cách sử dụng nút reset để xoá các giá trị của form. Ví dụ: reset Example <! HIDE FROM OTHER BROWSERS function clearForm(form) { form.value1.value = "Form"; Khoa Toan tin, Đại học Quốc gia Hμ Nội
63. JavaScript 63 form.value2.value = "Cleared"; } // STOP HIDING FROM OTHER BROWSERS > //SCRIPT> 4.1.28. Phần tử select Danh sách lựa chọn trong các form HTML xuất hiện menu drop-down hoặc danh sách cuộn đ−ợc của các đối t−ợng có thể đ−ợc lựa chọn. Các danh dách đ−ợc xây dựng bằng cách sử dụng hai thẻ SELECT vμ OPTION. Ví dụ: 1 2 3 tạo ra ba thμnh phần của menu thả drop-down với ba lựa chọn 1,2 vμ 3. Sử dụng thuộc tính SIZE bạn có thể tạo ta một danh sách cuộn với số phần tử hiển thị ở lần thứ nhất. Để bật menu drop-down trong một menu cuộn với hai thμnh phần hiển thị, bạn có thể sử dụng nh− sau: 1 2 3 Trong cả hai ví dụ trên, ng−ời sử dụng chỉ có thể có một lựa chọn. Nếu sử dụng thuộc tính MULTIPLE, bạn có thể cho phép ng−ời sử dụng lựa chọn nhiều hơn một giá trị trong danh sách lựa chọn: 1 2 3 Khoa Toan tin, Đại học Quốc gia Hμ Nội
64. JavaScript 64 Danh sách lựa chọn trong JavaScript lμ đối t−ợng select. Đối t−ợng nμy tạo ra một vμi thμnh phần t−ơng tự các button vμ radio. Với các thμnh phần lựa chọn, danh sách các lựa chọn đ−ợc chứa trong một mảng đ−ợc đánh số từ 0. Trong tr−ờng hợp nμy, mảng lμ một thuộc tính của đối t−ợng select gọi lμ options. Cả việc lựa chọn các option vμ từng phần tử option riêng biệt đều có những thuộc tính. Bổ sung thêm vμo mảng option, phần tử select có thuộc tính selectedIndex, có chứa số thứ tự của option đ−ợc lựa chọn hiện thời. Mỗi option trong danh sách lựa chọn đều có một vμi thuộc tính: • DEFAULTSELECTED: cho biết option có đ−ợc mặc định lμ lựa chọn trong thẻ OPTION hay không. • INDEX: chứa giá trị số thứ tự của option hịên thời trong mảng option. • SELECTED: cho biết trạng thái hiện thời của option • TEXT: có chứa giá trị của dòng text hiển thị trên menu cho mỗi option, vμ thuộc tính value mọi giá trị chỉ ra trong thẻ OPTION. Đối t−ợng select không có các cách thức đ−ợc định nghĩa sẵn. Tuy nhiên, đối t−ợng select có ba thẻ sự kiện, đó lμ onBlue, onFocus, onChange, chúng đều lμ những đối t−ợng text. Ví dụ bạn có danh sách lựa chọn sau: 1 2 3 Khi lần đầu tiên hiển thị bạn có thể truy nhập tới các thông tin sau: example.options[1].value = "The Second" example.options[2].text = "3" example.selectedIndex = 0 example.options[0].defaultSelected = true example.options[1].selected = false Nếu ng−ời sử dụng kích vμo menu vμ lựa chọn option thứ hai, thì thẻ onFocus sẽ thực hiện, vμ khi đó giá trị của thuộc tính sẽ lμ: example.options[1].value = "The Second" example.options[2].text = "3" example.selectedIndex = 1 example.options[0].defaultSelected = true example.options[1].selected = true Sửa các danh sách lựa chọn Navigator 3.0 cho phép thay đổi nội dung của danh sách lựa chọn từ JavaScript bằng cách liên kết các giá trị mới cho thuộc tính text của các thực thể trong danh sách. Khoa Toan tin, Đại học Quốc gia Hμ Nội
65. JavaScript 65 Ví dụ, trong ví dụ tr−ớc, bạn đã tạo ra một danh sách lựa chọn nh− sau: 1 2 3 Có thể thay đổi đ−ợc dòng text hiển thị trên nút thứ hai thμnh "two" băng: example.options[1].text = "two"; Có thể thêm các lựa chọn mới vμo danh sách bằng cách sử dụng đối t−ợng xây dựng Option() theo cú pháp: newOptionName = new Option(optionText, optionValue, defaultSelected, selected); selectListName.options[index] = newOptionName; Việc tạo đối t−ợng option() nμy với dòng text đ−ợc chỉ tr−ớc, defaultSelected vμ selected nh− trên đã định ra những giá trị kiểu Boolean. Đối t−ợng nμy đ−ợc liên kết vμo danh sách lựa chọn đ−ợc thực hiện bằng index. Các lựa chọn có thể bị xoá trong danh sách lựa chọn bằng cách gắn giá trị null cho đối t−ợng muốn xoá selectListName.options[index] = null; 1.1 Phần tử submit Nút Submit lμ một tr−ờng hợp đặc biệt của button, cũng nh− nút Reset. Nút nμy đ−a thông tin hiện tại từ các tr−ờng của form tới địa chỉ URL đ−ợc chỉ ra trong thuộc tính ACTION của thẻ form sử dụng cách thức METHOD chỉ ra trong thẻ FORM. Giống nh− đối t−ợng button vμ reset, đối t−ợng submit có sẵn thuộc tính name vμ value, cách thức click() vμ thẻ sự kiện onClick. 1.2 Phần tử Text Phần tử nμy nằm trong những phần tử hay đ−ợc sử dụng nhất trong các form HTML. T−ơng tự nh− tr−ờng Password, tr−ờng text cho phép nhập vμo một dòng đơn, nh−ng các ký tự của nó hiện ra bình th−ờng. đối t−ợng text có ba thuộc tính:defautValue, name vμ value. Ba cách thức mô phỏng sự kiện của ng−ời sử dụng: focus(), blur() vμ select(). Có 4 thẻ sự kiện lμ: obBlur, onFocus, onChange, onSelect. Khoa Toan tin, Đại học Quốc gia Hμ Nội
66. JavaScript 66 Chú ý các sự kiện nμy chỉ thực hiện khi con trỏ đã đ−ợc kích ra ngoμi tr−ờng text. Bảng sau mô tả các thuộc tính vμ cách thức của đối t−ợng text. Bảng .Các thuộc tính vμ cách thức của đối t−ợng text. Cách thức vμ thuộc Mô tả tính defaultValue Chỉ ra giá trị mặc định của phần tử đ−ợc chỉ ra trong thẻ INPUT (thuộc tính) name Tên của đối t−ợng đ−ợc chỉ ra trong thẻ INPUT (thuộc tính) value Giá trị hiện thời của phần tử (thuộc tính) focus() Mô tả việc con trỏ tới tr−ờng text (cách thức) blur() Mô tả việc con trỏ rời tr−ờng text (cách thức) select() Mô tả việc lựa chọn dòng text trong tr−ờng text (cách thức) Một chú ý quan trọng lμ có thể gán giá trị cho tr−ờng text bằng cách liên kết các giá trị với thuộc tính value. Trong ví dụ sau đây, dòng text đ−ợc đ−a vμo tr−ờng đầu tiên đ−ợc lặp lại trong tr−ờng text thứ hai, vμ mọi dòng text đ−ợc đ−a vμo tr−ờng text thứ hai lại đ−ợc lặp lại trong tr−ờng texxt thứ nhất. Khả năng nμy của nó có thể áp dụng để tự động cập nhật hoặc thay đổi dữ liệu. Ví dụ. Tự động cập nhật các tr−ờng text . text Example <! HIDE FROM OTHER BROWSERS function echo(form,currentField) { if (currentField == "first") form.second.value = form.first.value; else form.first.value = form.second.value; } Khoa Toan tin, Đại học Quốc gia Hμ Nội
67. JavaScript 67 // STOP HIDING FROM OTHER BROWSERS > 1.3 Phần tử Textarea Thẻ TEXTAREA cung cấp một hộp cho phép nhập số dòng text do ng−ời thiết kế định tr−ớc. Ví dụ: Default Text Here ví dụ nμy tạo ra một tr−ờng text cho phép đ−a vμo 10 hμng ,mỗi hμng 25 ký tự. Dòng "Defautl Text Here"sẽ xuất hiện trong tr−ờng nμy vμo lần hiển thị đầu tiên. Cũng nh− phần tử text , JavaScript cung cấp cho bạn các thuộc tính defaultValue, name, vμ value, các cách thức focus(), select(), vμ blur(), các thẻ sự kiện onBlur, onForcus, onChange, onSelect. 2. Mảng elements[] Các đối t−ợng của form có thể đ−ợc gọi tới bằng mảng elements[]. Ví dụ bạn tạo ra một form sau: bạn có thể gọi tới ba thμnh phần nμy nh− sau: document.elements[0], document.elements[1], Khoa Toan tin, Đại học Quốc gia Hμ Nội
68. JavaScript 68 document.elements[2], hơn nữa còn có thể gọi document.testform.one, document.testform.two, document.testform.three. Thuộc tính nμy th−ờng đ−ợc sử dụng trong các mối quan hệ tuần tự của các phần tử hơn lμ dùng tên của chúng. 3. Mảng form[] Các thẻ sự kiện đ−ợc thiết kế để lμm việc với các form riêng biệt hoặc các tr−ờng ở một thời điểm, nó rất hữu dụng để cho phép gọi tới các form có liên quan trong cùng một trang. Mảng form[] đề cập đến ở đây có thể có nhiều xác định các nhân của form trên cùng một trang vμ have information in a single field match in all three forms. Có thể gọi bằng document.forms[] thay vì gọi bằng tên form. Trong script nμy, bạn có hai tr−ờng text để nhập vμ nằm trên hai form độc lập với nhau. Sử dụng mảng form bạn có thể t−ơng tác trên các giá trị của các tr−ờng trong hai form cùng một lúc khi ng−ời sử dụng thay đổi giá trị trên một form. forms[] Example Mặt khác, bạn cũng có thể truy nhập đến form bằng tên form đ−ợc đặt trong thẻ FORM: Khoa Toan tin, Đại học Quốc gia Hμ Nội
69. JavaScript 69 Khi đó bạn có thể gọi lμ document.forms["name"] hoặc document.name 4. Xem lại các lệnh vμ mở rộng Lệnh/ Mở rộng Kiểu Mô tả blur() cách thức Mô tả việc dịch chuyển con trỏ từ JavaScript một phần tử form.action cách thức Xâu chứa giá trị của thuộc tính JavaScript ACTION trong thẻ FORM form.elemrnts thuộc tính mảng chứa danh sách các phần tử JavaScript trong form (nh− checkbox, tr−ờng text, danh sách lựa chọn) form.encoding thuộc tính xâu chứa kiểu MIME sử dụng khi JavaScript chuyển thông tin từ form tới server form,name thuộc tính Xâu chứa giá trị thuộc tính NAME JavaScript trong thẻ FORM form.target thuộc tính Xâu chứa tên cửa sổ đích bởi một JavaScript form submition form.submit cách thức Mô tả việc submit một form HTML JavaScript type thuộc tính ánh xạ kiểu của một phần tử form JavaScript thμnh một xâu. onSubmit Thẻ sự kiện thẻ sự kiện cho việc submit button thuộc tính HTML Thuộc tính kiểu cho các nút bấm của HTML ( ) checkbox thuộc tính HTML Thuộc tính kiểu cho các checkbox của HTML ( ) pasword thuộc tính HTML Thuộc tính kiểu cho các dòng pasword của HTML( ) radio thuộc tính HTML Thuộc tính kiểu cho các nút radio của HTML ( ) reset thuộc tính HTML Thuộc tính kiểu cho các nút reset của HTML (<INPUT Khoa Toan tin, Đại học Quốc gia Hμ Nội
70. JavaScript 70 TYPE=reset>) SELECT thẻ HTML Hộp thẻ cho danh sách lựa chọn OPTION thẻ HTML chỉ ra các lựa chọn trong danh sách lựa chọn( Optio n 1 Option 2 ) submit thuộc tính HTML Thuộc tính kiểu của nút submit ( ) text thuộc tính HTML Thuộc tính kiểu của tr−ờng trong form ( ) TEXTAREA Thẻ HTML Hộp thẻ cho nhiều dòng text ( defautl text ) name thuộc tính Xâu chứa tên phần tử HTML JavaScript (button, checkbox, password ) value thuộc tính Xâu chứa giá trị hiên thời của một JavaScript phần tử HTML(button, checkbox, password ) click() cách thức Mô tả việc kích vμo một phần tử JavaScript trên form (button, checkbox,password) onClick thuộc tính Thẻ sự kiện cho sự kiện kích JavaScript (button, checkbox, radio button, reset, selection list, submit) checked thuộc tính Giá trị kiểu Boolean mô tả một lựa JavaScript chọn check(checkbox, radio button) defaultChecked thuộc tính Xâu chứa giá trị mặc định của một JavaScript phần tử HTML (password, text, textarea) focus() cách thức Mô tả việc con trỏ tới một phần tử JavaScript (password, text, textarea) blur() cách thức Mô tả việc con trỏ rời khỏi một JavaScript phần tử (password, text, textarea) select() cách thức Mô tả việc lựa chọn dòng text trong JavaScript một tr−ờng (password, text, textarea) Khoa Toan tin, Đại học Quốc gia Hμ Nội
71. JavaScript 71 onFocus() Thẻ sự kiện Thẻ sự kiện cho sự kiện focus(password, selection list, text, textarea) onBlur Thẻ sự kiện Thẻ sự kiện cho sự kiện blur (password, selection list, text, textarea) onChange Thẻ sự kiện Thẻ sự kiện cho sự kiện khi giá trị của tr−ờng thay đổi (password, selection list, text, textarea) onSelect Thẻ sự kiện Thẻ sự kiện khi ng−ời sử dụng chọn dòng text trong một tr−ờng (password, text, textarea) index thuộc tính Lμ một số nguyên mô tả lựa chọn JavaScript hiện thời trong một nhóm lựa chọn (radio button) length thuộc tính Số nguyên mô tả tổng số các lựa JavaScript chọn trong một nhóm các lựa chọn (radio button) dafautlSelected thuộc tính Giá trị Boolean mô tả khi có một JavaScript lựa chọn đ−ợc đặt lμ mặc định (seledtion list) options thuộc tính Mảng các lựa chọn trong danh sách JavaScript lựa chọn text thuộc tính Dòng text hiển thị cho một thμnh JavaScript phần của menu trong danh sách lựa chọn TABLE thẻ HTML Hộp thẻ cho các bảng HTML TR thẻ HTML Hộp thẻ cho các hμng của một bảng HTML TD thẻ HTML Hộp thẻ cho các ô của một hμng trong một bảng HTML COLSPAN thuộc tính HTML Lμ thuộc tính của thẻ TD mô tả trong một ô của bảng có nhiều cột ROWSPAN thuộc tính HTML Lμ thuộc tính của thẻ TD mô tả trong một ô của bảng có nhiều hμng Khoa Toan tin, Đại học Quốc gia Hμ Nội
72. JavaScript 72 BODER thuộc tính HTML Lμ thuộc tính của thẻ TABLE mô tả độ rộng đ−ờng viền của bảng document.forms thuộc tính mảng của các đối t−ợng form với [] JavaScript một danh sách các form trong một document string.substring( cách thức Trả lại một xâu con của xâu string ) JavaScript từ tham số vị trí ký tự đầu đến vị trí ký tự cuối Math.floor() cách thức Trả lại một giá trị nguyên tiếp theo JavaScript nhỏ hơn giá trị của tham số đ−a vμo. string.length thuộc tính Giá trị nguyên của số thứ tự ký tự JavaScript cuối cùng trong xâu string Khoa Toan tin, Đại học Quốc gia Hμ Nội
73. JavaScript 73 5. Mô hình đối t−ợng (Object Model) Đối t−ợng vμ thuộc tính Nh− đã biết, một đối t−ợng trong JavaScript có các thuộc tính đi kèm với nó. Bạn có thể truy nhập đến các thuộc tính của nó bằng cách gọi : objectName.propertyName Cả tên đối t−ợng vμ tên thuộc tính đều nhạy cảm. Bạn định nghĩa một thuộc tính bằng cách gán cho nó một giá trị. Ví dụ, giả sử có một đối t−ợng tên lμ myCar (trong tr−ờng hợp nμy giả sử đối t−ợng nμy đã tồn tại sẵn sμng). Bạn có thể lấy các thuộc tính có tên make, model vμ year của nó nh− sau: myCar.make = “Ford“ myCar.model = “Mustang“ myCar.year = 69; Có một mảng l−u trữ tập hợp các giá trị tham chiếu tới từng biến. Thuộc tính vμ mảng trong JavaScript có quan hệ mật thiết với nhau, thực ra chúng chỉ khác nhau về cách giao tiếp với cùng một cấu trúc dữ liệu. Ví dụ cũng có thể truy nhập tới các thuộc tính của đối t−ợng myCar ở trên bằng mảng nh− sau: myCar[make] = “Ford“ myCar[model] = “Mustang“ myCar[year] = 69; Kiểu mảng nμy đ−ợc hiểu nh− một mảng có khả năng liên kết bởi mỗi một phần tử trong đó đều có thể liên kết đến một giá trị xâu nμo đó. Để minh hoạ việc mμy đ−ợc thực hiện nh− thế nμo, hμm sau đây sẽ hiển thị các thuộc tính của một đối t−ợng thông qua tham số về kiểu đối t−ợng đó vμ tên đối t−ợng. function show_props (obj, obj_name) { var result=”” for (i in obj) result=result+ obj_name + “.”+ i+ “=” + obj[i] + “\n” return result } Khi gọi hμm show_props(myCar,myCar) sẽ hiện lên: myCar.make = Ford myCar.model = Mustang myCar.year = 69; Khoa Toan tin, Đại học Quốc gia Hμ Nội
74. JavaScript 74 Tạo các đối t−ợng mới Cả JavaScript client-side vμ server-side đều có một số đối t−ợng đ−ợc định nghĩa tr−ớc. Tuy nhiên, bạn cũng có thể tạo ra những đối t−ợng của riêng bạn. Trong JavaScript 1.2, nếu bạn chỉ muốn tạo ra một đối t−ợng duy nhất của một kiểu đối t−ợng, bạn có thể tạo nó bằng cách sử dụng khởi tạo đối t−ợng. Hoặc nếu bạn muốn tạo ra nhiều cá thể của một kiểu đối t−ợng, bạn có thể tạo ra một hμm xây dựng tr−ớc, sau đó tạo ra các đối t−ợng có kiểu của hμm đó bằng toán tử new 5.1.1. Sử dụng khởi tạo đối t−ợng Trong những phiên bản tr−ớc của Navigator, bạn chỉ có thể tạo ra một đối t−ợng bằng cách sử dụng hμm xây dựng chúng hoặc sử dụng một hμm đ−ợc cung cấp bởi một vμi đối t−ợng khác để đạt đ−ợc mục đích. Tuy nhiên, trong Navigator 4.0, bạn có thể tạo ra một đối t−ợng bằng cách sử dụng một khởi tạo đối t−ợng.Bạn sử dụng cách nμy khi bạn chỉ muốn tạo ra một cá thể đơn lẻ chứ không phải nhiều cá thể của đối t−ợng. Cú pháp để tạo ra một đối t−ợng bằng cách khởi tạo đối t−ợng (Object Initializers): objectName={property1: value1, property2: value2, , propertyN: valueN} Trong đó objectName lμ tên của đối t−ợng mới, mỗi propertyI lμ một xác minh (có thể lμ một tên, một số hoặc một xâu ký tự) vμ mỗi valueI lμ một biểu thức mμ giá trị của nó đ−ợc gán cho propertyI. Có thể lựa chọn khởi tạo bằng tên đối t−ợng hoặc chỉ bằng các khai báo. Nếu nh− bạn không cần dùng đến đối t−ợng đó trong mọi chỗ, bạn không cần phải gán nó cho một biến. Nếu một đối t−ợng đ−ợc tạo bằng cách khởi tạo đối t−ợng ở mức cao nhất, mỗi lần đối t−ợng đó xuất hiện trong các biểu thức, JavaScript sẽ đánh giá lại nó một lần. Ngoμi ra, nếu sử dụng việc khởi tạo nμy trong một hμm thì mỗi lần gọi hμm, đối t−ợng sẽ đ−ợc khởi tạo một lần Giả sử bạn có câu lệnh sau: if (condition) x={hi: ”there.”} Trong tr−ờng hợp nμy, JavaScript sẽ tạo ra một đối t−ợng vμ gắn nó vμo biến x nếu biểu thức condition đ−ợc đánh giá lμ đúng Còn ví dụ sau tạo ra một đối t−ợng myHonda với 3 thuộc tính: myHonda={color:”red”,wheels:4,engine:{cylinder:4,size:2.2}} Chú ý rằng thuộc tính engine cũng lμ một đối t−ợng với các thuộc tính của nó Trong Navigator 4.0, bạn cũng có thể sử dụng một khởi tạo để tạo một mảng. Cú pháp để tạo mảng bằng cách nμy khác với tạo đối t−ợng: arrayName=[element0, element1, ,elementN] Trong đó, arrayName lμ tên của mảng mới, vμ mỗi elementI lμ giá trị của phần tử ở vị trí đó của mảng. Khi bạn tạo một mảng bằng cách sử dụng ph−ơng Khoa Toan tin, Đại học Quốc gia Hμ Nội
75. JavaScript 75 pháp khởi tạo, thì nó sẽ coi mỗi giá trị lμ một phần tử trên mảng, vμ chiều dμi của mảng chính lμ số các tham số. Bạn không cần phải chỉ định rõ tất cả các phần tử trên mảng mới. Nếu bạn đặt hai dấu phẩy vμo hμng, thì mảng sẽ đ−ợc tạo với những chốn trống cho những phần tử ch−a đ−ợc định nghĩa nh− ví dụ d−ới đây: Nếu một mảng đ−ợc tạo bằng cách khởi tạo(initializer) ở mức cao nhất, mỗi lần mảng đó xuất hiện trong các biểu thức, JavaScript sẽ đánh giá lại nó một lần. Ngoμi ra, nếu sử dụng việc khởi tạo nμy trong một hμm thì mỗi lần gọi hμm, mảng sẽ đ−ợc khởi tạo một lần Ví dụ1: Tạo một mảng coffees với 3 phần tử vμ độ dμi của mảng lμ 3: coffees = [“French Roast”,”Columbian”,”Kona”] Ví dụ 2: Tạo ra một mảng với 2 phần tử đ−ợc khởi đầu vμ một phần tử rỗng: fish = [“Lion”, ,” Surgeon”] Với biểu thức nμy, fish[0] lμ “Lion”, fish[2] lμ ” Surgeon, vμ fish[2] ch−a đ−ợc định nghĩa 5.1.2. Sử dụng một hμm xây dựng(Constructor Function) Bạn có thể tạo ra đối t−ợng của riêng mình với hai b−ớc sau: 1. Định nghĩa kiểu của đối t−ợng bằng cách viết một hμm xây dựng. 2. Tạo ra một cá thể của đối t−ợng đó bằng toán tử new Để định nghĩa một kiểu đối t−ợng, ta phải tạo ra một hμm để chỉ định rõ tên, các thuộc tính vμ các cách thức của kiểu đối t−ợng đó. Ví dụ giả sử bạn muốn tạo một kiểu đối t−ợng ô tô với tên lμ car, có các thuộc tính make, model, year vμ color, để thực hiện việc nμy có thể viết một hμm nh− sau: function car(make, model, year ){ this.make = make this.model = model this.year = year } Chú ý việc sử dụng toán tử this để gán giá trị cho các thuộc tính của đối t−ợng phải thông qua các tham số của hμm. Ví dụ, bạn có thể tạo một đối t−ợng mới kiểu car nh− sau: mycar = new car(“Eagle”,”Talon TSi”,1993) Câu lệnh nμy sẽ tạo ra đối t−ợng mycar vμ liên kết các giá trị đ−ợc đ−a vμo với các thuộc tính. Khi đó giá trị của mycar.make lμ Eagle, giá trị của mycar.model lμ Talon TSi, vμ mycar.year lμ một số nguyên 1993 Cứ nh− vậy bạn có thể tạo ra nhiều đối t−ợng kiểu car. Một đối t−ợng cũng có thể có những thuộc tính mμ bản thân nó cũng lμ một đối t−ợng. Ví dụ bạn định nghĩa thêm một đối t−ợng khác lμ person nh− sau: function person(name, age, sex){ this.name=name Khoa Toan tin, Đại học Quốc gia Hμ Nội
76. JavaScript 76 this.age=age this.sex=sex } Vμ sau đó ta tạo ra hai ng−ời mới: rank = new person(“Rank McKinnon”,33,”M”) ken = new person(“Ken John”,39,”M”) Bây giờ bạn định nghĩa lại hμm xây dựng car nh− sau: function car(make, model, year,owner ){ this.make = make this.model = model this.year = year this.owner = owner } Nh− vậy bạn có thể tạo đối t−ợng kiểu car mới: car1 = new car(“Eagle”,”Talon TSi”,1993,rank) car2 = new car(“Nissan”,”300ZX”,1992,ken) Nh− vậy, thay vì phải qua một xâu ký tự hay một giá trị số khi tạo đối t−ợng, ta chỉ cần đ−a hai đối t−ợng đã đ−ợc tạo ở câu lệnh trên vμo dòng tham số của đối t−ợng mới tạo. Ta cũng có thể lấy đ−ợc thuộc tính của đối t−ợng owner bằng câu lênh sau: car2.owner.name Chú ý rằng bạn cũng có thể tạo ra một thuộc tính mới cho đối t−ợng tr−ớc khi định nghĩa nó, ví dụ: car1.color=”black” Nh− vậy, thuộc tính color của đối t−ợng car1 đ−ợc gán lμ black. Tuy nhiên, nó sẽ không gây tác động tới bất kỳ một đối t−ợng kiểu car nμo khác. Nếu muốn thêm thuộc tính cho tất cả các đối t−ợng thì phải định nghĩa lại hμm xây dựng đối t−ợng. 5.1.3. Lập mục lục cho các thuộc tính của đối t−ợng Trong Navigator 2.0, bạn có thể gọi thuộc tính của một đối t−ợng bằng tên thuộc tính hoặc bằng số thứ tự của nó. Tuy nhiên từ Navigator 3.0 trở đi, nếu ban đầu bạn định nghĩa một thuộc tính bằng tên của nó, bạn sẽ luôn luôn phải gọi nó bằng tên, vμ nếu bạn định nghĩa một thuộc tính bằng chỉ số thì bạn cũng luôn luôn phải gọi tới nó bằng chỉ số. Điều nμy ứng dụng khi bạn tạo một đối t−ợng với những thuộc tính của chúng bằng hμm xây dựng (nh− ví dụ về kiểu đối t−ợng car ở phần tr−ớc) vμ khi bạn định nghĩa những thuộc tính của riêng một đối t−ợng (nh− mycar.color=”red”). Vì vậy nếu bạn định nghĩa các thuộc tính của đối t−ợng ngay từ đầu bằng chỉ số nh− mycar[5]=”25 mpg”, bạn có thể lần l−ợt gọi tới các thuộc tính khác nh− mycar[5]. Khoa Toan tin, Đại học Quốc gia Hμ Nội
77. JavaScript 77 Tuy nhiên điều nμy lμ không đúng đối với những đối t−ợng t−ơng ứng của HTML nh− mảng form. Bạn có thể gọi tới các đối t−ợng trong mảng bởi số thứ tự hoặc tên của chúng. Ví dụ thẻ thứ hai trong một document có thuộc tính NAME lμ myform thì bạn có thể gọi tới form đó bằng document.form[1] hoặc document.form[“myForm”] hoặc document.myForm 5.1.4. Định nghĩa thêm các thuộc tính cho một kiểu đối t−ợng Bạn có thể thêm thuộc tính cho một kiểu đối t−ợng đã đ−ợc định nghĩa tr−ớc bằng cách sử dụng thuộc tính property. Thuộc tính đ−ợc định nghĩa nμy không chỉ có tác dụng đối với một đối t−ợng mμ có tác dụng đối với tất cả các đối t−ợng khác cùng kiểu.Ví dụ sau thực hiện thêm thuộc tính color cho tất cả các đối t−ợng kiểu car, sau đó gắn một giá trị mμu cho thuộc tính color của đối t−ợng car1: car.prototype.color=null car1.color=”red” 5.1.5. Định nghĩa các cách thức Một cách thức lμ một hμm đ−ợc liên kết với một đối t−ợng. Bạn định nghĩa một cách thức cũng có nghĩa lμ bạn định nghĩa một hμm chuẩn. Bạn có thể sử dụng cú pháp sau để gắn một hμm cho một đối t−ợng đang tồn tại: object.methodname = function_name Trong đó object lμ đối t−ợng đang tồn tại, methodname lμ tên cách thức vμ function_name lμ tên hμm Bạn có thể gọi cách thức nμy từ đối t−ợng nh− sau: object.methodname( ) Bạn có thể định nghĩa cách thức cho một kiểu đối t−ợng bằng cách đ−a cách thức đó vμo trong hμm xây dựng đối t−ợng. Ví dụ bạn có thể định nghĩa một hμm có thể định dạng vμ hiển thị các thuộc tính của các đối t−ợng kiểu car đã xây dựng ở phần tr−ớc: function displayCar () { var result = “Abeautiful”+this.year+ “ ”+ this.make + “ ”+ this.model document.write(result) } Bạn có thể thêm cách thức nμy vμo cho đối t−ợng car bằng cách thêm dòng lệnh sau vμo hμm định nghĩa đối t−ợng this.displayCar= displayCar; Nh− vậy có thể định nghĩa lại đối t−ợng car nh− sau: function car(make, model, year,owner ){ this.make = make this.model = model this.year = year Khoa Toan tin, Đại học Quốc gia Hμ Nội
78. JavaScript 78 this.owner = owner this.displayCar= displayCar } Sau đó, bạn có thể gọi cách thức displayCar đối với mỗi đối t−ợng: car1.displayCar() car2.displayCar() 5.1.6. Sử dụng cho các tham chiếu đối t−ợng (Object References) JavaScript có một từ khoá đặc biệt lμ this mμ bạn có thể sử dụng nó cùng với một cách thức để gọi tới đối t−ợng hiện thời. Ví dụ, giả sử bạn có một hμm validate dùng để xác nhận giá trị thuộc tính của một đối t−ợng nằm trong một khoảng nμo đó: function validate(obj, lowval, hival){ if ( (obj.value hival) ) alert(“Invalid value!”) } Sau đó bạn có thể gọi hμm validate từ mỗi thẻ sự kiện onChange: Khi liên kết với một thuộc tính form, từ khoá this có thể gọi tới form cha của đối t−ợng hiện thời. Trong ví dụ sau, myForm có chứa đối t−ợng Text vμ một nút bấm. Khi ng−ời sử dụng kích vμo nút bấm, tr−ờng text sẽ hiển thị tên form. Thẻ sự kiện onClick của nút bấm sử dụng this.form để gọi tới form cha lμ myForm. Form name: 5.1.7. Xoá đối t−ợng Trong JavaScript cho Navigator 2.0, bạn không thể xoá các đối t−ợng-chúng vẫn tồn tại trong khi bạn đã rời khỏi trang đó. Trong khi JavaScript cho Navigator 3.0 cho phép bạn có thể xoá một đối t−ợng bằng cách đặt cho nó trỏ tới giá trị Null (nếu nh− đó lμ lần cuối cùng gọi tới đối t−ợng). JavaScript sẽ đóng đối t−ợng đó ngay lập tức thông qua biểu thức gán. Khoa Toan tin, Đại học Quốc gia Hμ Nội