Tài liệu NHẬP MÔN JAVASCRIPT pdf

JavaScript chơng Lời nói đầu Với HTML and Microsoft FrontPage bạn đà biết cách tạo trang Web - nhiên mức biểu diễn thông tin cha phải l trang Web động có khả đáp ứng kiện từ phía ngời dùng HÃng Netscape đà đa ngôn ngữ script có tên l LiveScript để thực chức ny Sau ngôn ngữ ny đợc đổi tên thnh JavaScript để tận dụng tính đại chúng ngôn ngữ lập trình Java Mặc dù có điểm tơng đồng Java v JavaScript, nhng chúng l hai ngôn ngữ riêng biệt JavaScript l ngôn ngữ dới dạng script gắn với 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 thnh mà dễ biên dịch, trình duyệt đọc JavaScript dới dạng mà nguồn Chính bạn có thĨ dƠ dμng häc JavaScript qua vÝ dơ bëi v× bạn thấy cách sử dụng JavaScript trang Web JavaScript l ngôn ngữ dựa đố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 chức toán học Tuy JavaScript không l ngôn ngữ hớng đối tợng nh C++ hay Java không hỗ trợ lớp hay tính thừa kế JavaScript đáp ứng kiện nh tải hay loại bỏ form Khả ny cho phép JavaScript trở thnh 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ã chạy hệ điều hnh no có trình duyệt hỗ trợ JavaScript Ngoi JavaScript giống Java khía cạnh an ninh: JavaScript đọc v viết vo file ngời dùng Các trình duyệt web nh− Nescape Navigator 2.0 trë ®i cã thĨ hiĨn thị câu lệnh JavaScript đợc nhúng vo trang HTML Khi trình duyệt yêu cầu trang, server gửi đầy đủ nội dung trang đó, bao gồm HTML v câu lệnh JavaScript qua mạng tới client Client đọc trang từ đầu đến cuối, hiển thị kết HTML v xử lý câu lệnh JavaScript no chúng xuất Các câu lệnh JavaScript đợc nhúng trang HTML trả lời cho kiện ngời sử dụng nh− kÝch cht, nhËp vμo mét form vμ ®iỊu h−íng trang Ví dụ bạn kiểm tra giá trị thông tin m ngời sử dụng đa vo m không cần đến trình truyền mạng no Trang HTML với JavaScript đợc nhúng kiểm tra giá trị đợc đa vo v thông báo với ngời sử dụng giá trị đa vo l không hợp lệ Mục đích phần ny l giới thiệu ngôn ngữ lập trình JavaScript để bạn viết script vo file HTML Khoa Toan tin, Đại học Quốc gia H Nội JavaScript Chơng Nhập môn JavaScript 2.1.Nhúng JavaScript vo file HTML B¹n cã thĨ nhóng JavaScript vμo mét file HTML theo cách sau đây: ã Sử dụng câu lệnh v hm cặp thẻ • Sư dơng c¸c file ngn JavaScript • Sư dơng biểu thức JavaScript lm giá trị thuộc tính HTML ã Sử dụng thẻ kiện (event handlers) thẻ HTML no Trong đó, sử dụng cặp thẻ v nhúng file nguồn JavaScript l đợc sử dụng nhiều 2.1.1.Sử dụng thẻ SCRIPT Script đợc đa vo file HTML cách sử dụng cặp thẻ v Các thẻ có thĨ xt hiƯn phÇn hay cđa file HTML Nếu đặt phần , đợc tải v sẵn sng trớc phần lại văn đợc tải Thuộc tính đợc định nghĩa thời cho thẻ l LANGUAGE= dùng để xác định ngôn ngữ script đợc sử dụng Có hai giá trị đợc định nghĩa l "JavaScript" v "VBScript" Với chơng trình viết JavaScript bạn sử dụng cú pháp sau : Chú ý: Ghi không đợc đặt cặp thỴ nh− ghi chó file HTML Cú pháp JavaScript tơng tự cú pháp C nªn cã thĨ sư dơng // hay /* */ // INSERT ALL JavaScript HERE Điểm khác cú pháp viết ghi HTML v JavaScript l cho phép bạn ẩn mà JavaScript ghi file HTML, để trình duyệt cũ không hỗ trợ cho JavaScript đọc đợc nh ví dụ sau đây: Dßng ci cïng cđa script cần có dấu // để trình duyệt không diễn dịch dòng ny dới dạng mà JavaScript Các ví dụ chơng ny không chứa đặc điểm ẩn JavaScript để mà dễ hiểu Khoa Toan tin, Đại häc Qc gia Hμ Néi JavaScript 2.1.2 Sư dơng mét file ngn JavaScript Thc tÝnh SRC cđa thỴ cho phép bạn rõ file nguồn JavaScript đợc sử dụng (dùng phơng pháp ny hay nhúng trực tiếp đoạn lệnh JavaScript vo trang HTML) Cú pháp: Thc tÝnh nμy rÊy h÷u dơng cho viƯc chia sẻ hm dùng chung cho nhiều trang khác Các câu lệnh JavaScript nằm cặp thẻ vμ cã chøa thuéc tinh SRC trõ nã có lỗi Ví dụ bạn muốn đa dòng lệnh sau vo cặp thẻ v : document.write("Không tìm thấy file JS đa vo!"); Thuộc tính SRC đợc định rõ địa URL, liên kết đờng dẫn tuyệt đối, ví dụ: Các file JavaScript bên ngoi không đợc chứa thẻ HTML no Chúng đợc chứa câu lệnh JavaScript v định nghĩa hm Chú ý Khi bạn muốn xâu trích dẫn xâu khác cần sử dụng dấu nháy đơn ( ' ) để phân định xâu Điều ny cho phép script nhận xâu ký tự Tên file hm JavaScript bên ngoi cần có đuôi js, v server phải ánh xạ đuôi js tới kiểu MIME application/x-javascript Đó l m server gửi trở lại phần Header file HTML Để ánh xạ đuôi ny vo kiểu MIME, ta thêm dòng sau vo file mime.types đờng dẫn cấu hình 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 tải file JavaScript đợc thuộc tính SRC không cách Trong ví dụ sau, hm bar có chứa xâu "left" nằm cặp dấu nh¸y kÐp: function bar(widthPct){ document.write(" ") } 2.3 Thẻ v Cặp thẻ ny 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 không hiểu thẻ v bị lờ đi, đoạn mà nằm cặp thẻ ny đợc Navigator hiển thị Ngợc lại, Khoa Toan tin, Đại học Qc gia Hμ Néi JavaScript nÕu tr×nh dut cã hỗ trợ JavaScript đoạn mà cặp thẻ đợc bỏ qua Tuy nhiên, điều ny xảy ngời sử dụng không sử dụng JavaScript trình duyệt cách tắt ®i 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! HÃy kích chuột vo để tải phiên Netscape Nếu bạn đà sử dụng trình duyệt Netscape từ 2.0 trở m đọc đợc dòng chữ ny hÃy bật Preferences/Advanced/JavaScript lên Hình 2.3: Minh hoạ thẻ NOSCRIPT 2.3 Hiển thị dòng text Trong hầu hết ngôn ngữ lập trình, khả sở l hiển thị mn hình dòng text Trong JavaScript, ngời lập trình điều khiển việc xuất mn hình client dòng text file HTML JavaScript xác định điểm m sÏ xuÊt file HTML vμ dßng text kÕt đợc dịch nh dòng HTML khác v hiển thị trang Khoa Toan tin, Đại học Quốc gia H Nội JavaScript Hơn nữa, JavaScript cho phép ngời lập trình sinh hộp thông báo xác nhận gồm hai nút Ngoi ra, dòng text v số hiển thÞ tr−êng TEXT vμ TEXTAREA cđa mét form Trong phần ny, ta học cách thức write() v writeln() đối tợng document Đối tợng document JavaScript đợc thiết kế sẵn hai cách thức để xuất dòng text mn hình client: write() v writeln() Cách gọi cách thức đối tợng nh sau: object_name.property_name Dữ liệu m cách thức dùng để thực công việc đợc đa vo dòng tham số, ví dụ: document.write("Test"); document.writeln('Test'); Cách thức write() xuất mn hình xâu Text nhng không xuống dòng, cách thức writeln() sau viết xong dòng Text tự động xuống dòng Hai cách thức ny cho phép xuất thẻ HTML Ví dụ: Cách thức write() xuất thẻ HTML Ouputting Text This text is plain. Khoa Toan tin, Đại học Quốc gia Hμ Néi JavaScript VÝ dơ: Sù kh¸c cđa write() vμ writeln(): Khi duyÖt đợc kết quả: Khoa Toan tin, Đại học Quốc gia H Nội JavaScript Hình 2.5: Sự khác cđa write() vμ writeln() 2.4 Giao tiÕp víi ng−êi sử dụng JavaScript hỗ trợ khả cho phép ngời lập trình tạo hộp hội thoại Nội dung cđa hép héi tho¹i phơ thc vμo trang HTML cã chứa đoạn script m không lm ảnh hởng đến việc xuất nội dung trang Cách đơn giản để lm việc l sử dụng cách thức alert() Để sử dụng đợc cách thức ny, bạn phải đa vo dòng text nh− sư dơng document.write() vμ document.writeln() phÇn tr−íc VÝ dơ: alert("NhÊn vμo OK ®Ĩ tiÕp tơc"); Khi ®ã file sÏ chê cho ®Õn 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 trờng hợp: ã Thông tin đa v form không hợp lệ ã Kết sau tính toán không hợp lệ ã Khi dịch vụ cha sẵn sng để truy nhập liệu Tuy nhiên cách thức alert() cho phép thông báo với ngời sử dụng cha thùc sù giao tiÕp víi ng−êi sư dơng JavaScript cung cấp 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 hộp hội thoại với dòng thông báo bạn đa vo, nhng ngoi cung cấp trờng để nhập liệu vo 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 JavaScript kích vo OK Khi đó, ta xử lý liƯu ng−êi sư dơng võa ®−a vμo VÝ dơ: Hộp hội thoại gồm dòng thông báo, trờng nhËp d÷ liƯu, mét nót OK vμ mét nót Cancel Chơng trình ny hỏi tên ngời dùng v sau hiển thị thông báo ngắn sử dụng tên đa vo Ví dụ đợc lu vo file Hello.html JavaScript Exemple var name=window.prompt( Hello! What s 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ụ ny hiển thị dấu nhắc nhập vo tên với phơng thức window.prompt Giá trị đạt đợc đợc ghi biến có tên l name Biến name đợc kết hợp với chuỗi khác v đợc hiển thị cửa sổ trình duyệt nhờ phơng thức document.write Khoa Toan tin, Đại học Quốc gia H Nội JavaScript Hình 2.2: Hiển thị lời cho ngời nhập Bây bạn đà có ý tởng chức đạt đợc qua JavaScript, hÃy tiếp tục tìm hiểu thêm ngôn ngữ ny 2.5 Điểm lại lệnh v mở rộng Lệnh/Mở rộng Kiểu Mô tả SCRIPT thẻ HTML Hộp chứa lệnh JavaScript SRC Thuộc tính thẻ SCRIPT Giữ địa file JavaScript bên ngoi File ny phải có phần đuôi js LANGUAGE thuộc tính thẻ SCRIPT Định rõ ngôn ngữ script đợc sử dụng (JavaScript VBScript) // Ghi JavaScript Đánh dấu ghi dòng đoạn script /* */ Ghi JavaScript Đánh dấu ghi khối đoạn script document.write() cách thức JavaScript Xuất xâu cửa sổ thời cách theo file HTML có đoạn script document.writeln() Cách thức JavaScript Tơng tự cách thức document.write() nhng viết xong tự xuống dòng alert() Cách thức Hiển thị dòng thông báo hộp hội thoại Khoa Toan tin, Đại học Quốc gia H Nội JavaScript 10 JavaScript promt() Cách thức JavaScript Khoa Toan tin, Đại học Quốc gia H Nội Hiển thị dòng thông báo hộp hội thoại đồng thời cung cấp trờng nhập liệu để ngời sử dụng nhập vo JavaScript 66 Chó ý c¸c sù kiƯn nμy chØ thực trỏ đà đợc kích ngoi trờng text Bảng sau mô tả thuộc tính v cách thức đối tợng text Bảng Các thuộc tính v cách thức đối tợng text Cách thức v thuộc Mô tả tính defaultValue Chỉ giá trị mặc định phần tử đợc thẻ INPUT (thuộc tính) name Tên đối tợng đợc thẻ INPUT (thuộc tính) value Giá trị thời phần tử (thuộc tính) focus() Mô tả việc trỏ tới trờng text (cách thức) blur() Mô tả việc trỏ rời trờng text (cách thức) select() Mô tả việc lựa chọn dòng text trờng text (cách thức) Mét chó ý quan träng lμ cã thĨ g¸n gi¸ trị cho trờng text cách liên kết giá trị với thuộc tính value Trong ví dụ sau đây, dòng text đợc đa vo trờng đợc lặp lại trờng text thứ hai, v dòng text đợc đa vo trờng text thứ hai lại đợc lặp lại trờng texxt thứ Khả ny áp dụng để tự động cập nhật thay đổi liệu Ví dụ Tự động cập nhËt c¸c tr−êng text text Example NAME="first" NAME="second" 1.3 PhÇn tư Textarea ThỴ TEXTAREA cung cÊp mét hép cho phÐp nhËp sè dòng text ngời thiết kế định trớc Ví dụ: Default Text Here vÝ dô ny tạo trờng text cho phép đa vo 10 hng ,mỗi hng 25 ký tự Dòng "Defautl Text Here"sẽ xuất trờng ny vo lần hiển thị Cũng nh phần tử text , JavaScript cung cấp cho bạn thuộc tính defaultValue, name, v value, cách thức focus(), select(), v blur(), thẻ kiện onBlur, onForcus, onChange, onSelect Mảng elements[] Các đối tợng form đợc gọi tới mảng elements[] VÝ dơ b¹n t¹o mét form sau: b¹n cã thĨ gäi tíi document.elements[0], Khoa Toan tin, Đại học Quốc gia H Nội ba thnh phần ny nh sau: document.elements[1], JavaScript 68 document.elements[2], cã document.testform.one, document.testform.two, thÓ gäi document.testform.three Thuéc tÝnh nμy th−êng đợc sử dụng mối quan hệ phần tử l dùng tên chúng Mảng form[] Các thẻ kiện đợc thiết kế để lm việc với form riêng biệt trờng thời điểm, hữu dụng phép gọi tới form có liên quan trang Mảng form[] đề cập đến có nhiều xác định nhân 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 gọi tên form Trong script ny, bạn có hai trờng text để nhập v nằm hai form độc lập với Sử dụng mảng form bạn tơng tác giá trị c¸c tr−êng hai form cïng mét lóc ng−êi sử dụng thay đổi giá trị form forms[] Example Mặt khác, bạn truy nhập đến form tên form đợc đặt thẻ FORM: Khoa Toan tin, Đại học Quốc gia H Nội JavaScript 69 Khi bạn gọi l document.forms["name"] document.name Xem lại lệnh vμ më réng LƯnh/ Më réng KiĨu blur() c¸ch JavaScript thức Mô tả việc dịch chuyển trỏ từ phần tử form.action cách JavaScript thức Xâu chứa giá trị cđa thc tÝnh ACTION thỴ FORM form.elemrnts thc JavaScript tính mảng chứa danh sách phần tử form (nh− checkbox, tr−êng text, danh s¸ch lùa chän) form.encoding thuéc JavaScript tÝnh x©u chøa kiĨu MIME sư dơng chun th«ng tin tõ form tíi server form,name thc JavaScript tÝnh Xâu chứa giá trị thuộc tính NAME thẻ FORM form.target thuộc JavaScript tính Xâu chứa tên cửa sổ đích form submition form.submit cách JavaScript thức Mô tả viƯc submit mét form HTML type thc JavaScript tÝnh ¸nh xạ kiểu phần tử form thnh xâu onSubmit ThỴ sù kiƯn thỴ sù kiƯn cho viƯc submit button thc tÝnh HTML Thc 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 dòng pasword cđa HTML() radio thc tÝnh HTML Thc tÝnh kiĨu cho c¸c nót radio cđa HTML () reset thc tÝnh HTML Thc tÝnh kiĨu cho c¸c nót reset cđa HTML () SELECT thẻ HTML Hộp thẻ cho danh sách lựa chọn OPTION thẻ HTML c¸c lùa chän danh s¸ch lùa chän(Optio n 1Option 2) submit thc tÝnh HTML Thc 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 form () TEXTAREA ThỴ HTML Hộp thẻ cho nhiều dòng text ( defautl text ) name thuộc JavaScript tính Xâu chứa tên phần tử HTML (button, checkbox, password ) value thuéc JavaScript tÝnh X©u chøa giá trị hiên thời phần tử HTML(button, checkbox, password ) click() cách JavaScript thức Mô tả việc kích vo phần tử form (button, checkbox,password) onClick thuộc JavaScript tÝnh ThỴ sù kiƯn cho sù kiƯn kÝch (button, checkbox, radio button, reset, selection list, submit) checked thuéc JavaScript tính Giá trị kiểu Boolean mô tả lựa chọn check(checkbox, radio button) defaultChecked thuộc JavaScript tính Xâu chứa giá trị mặc định phần tử HTML (password, text, textarea) focus() cách JavaScript thức Mô tả việc trỏ tới phần tử (password, text, textarea) blur() cách JavaScript thức Mô tả việc trỏ rời khỏi phần tử (password, text, textarea) select() cách JavaScript thức Mô tả viƯc lùa chän dßng text mét tr−êng (password, text, textarea) Khoa Toan tin, Đại học Quốc gia H Nội 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 kiện giá trị trờng thay đổi (password, selection list, text, textarea) onSelect ThỴ sù kiƯn ThỴ sù kiƯn ng−êi sư dơng chän dßng text mét tr−êng (password, text, textarea) index thuéc JavaScript tÝnh Lμ số nguyên mô tả lựa chọn thời mét nhãm lùa chän (radio button) length thuéc JavaScript tÝnh Số nguyên mô tả tổng số lựa chọn mét nhãm c¸c lùa chän (radio button) dafautlSelected thuéc JavaScript tính Giá trị Boolean mô tả có lựa chọn đợc đặt l mặc định (seledtion list) options thuộc JavaScript tính Mảng lựa chọn danh sách lựa chọn text thuộc JavaScript tính Dòng text hiển thị cho thnh phần menu danh sách lựa chọn TABLE thẻ HTML Hộp thẻ cho bảng HTML TR thẻ HTML Hộp thẻ cho hng bảng HTML TD thẻ HTML Hộp thẻ cho ô mét hμng mét b¶ng HTML COLSPAN thuéc tÝnh HTML L thuộc tính thẻ TD mô tả « cđa b¶ng cã nhiỊu cét ROWSPAN thc tÝnh HTML L thuộc tính thẻ TD mô tả ô bảng có nhiều hng Khoa Toan tin, Đại häc Quèc gia Hμ Néi JavaScript 72 BODER thuéc tÝnh HTML document.forms [] thuộc JavaScript tính mảng đối tợng form với danh sách form document string.substring( cách ) JavaScript thức Trả lại xâu xâu string từ tham số vị trí ký tự đầu đến vị trí ký tự cuối Math.floor() cách JavaScript thức Trả lại giá trị nguyên nhỏ giá trị tham số đa vo string.length thuộc JavaScript tính Giá trị nguyên số thứ tự ký tù cuèi cïng x©u string Khoa Toan tin, §¹i häc Qc gia Hμ Néi Lμ thc tÝnh cđa thẻ TABLE mô tả độ rộng đờng viền bảng JavaScript 73 Mô hình đối tợng (Object Model) Đối tợng v thuộc tính Nh đà biết, đối tợng JavaScript có thuộc tính kèm với Bạn truy nhập đến thuộc tính cách gọi : objectName.propertyName Cả tên đối tợng v tên thuộc tính 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ó đối tợng tên l myCar (trong trờng hợp ny giả sử đối tợng ny đà tồn sẵn sng) Bạn lấy thuộc tính có tên make, model v year nã nh− sau: myCar.make = “Ford“ myCar.model = “Mustang“ myCar.year = 69; Có mảng lu trữ tập hợp giá trị tham chiếu tới biến Thuộc tính v m¶ng JavaScript cã quan hƯ mËt thiÕt víi nhau, thùc chóng chØ kh¸c vỊ c¸ch giao tiÕp víi cïng mét cÊu tróc d÷ liƯu VÝ dơ cịng truy nhập tới thuộc tính đối tợng myCar mảng nh sau: myCar[make] = “Ford“ myCar[model] = “Mustang“ myCar[year] = 69; KiĨu m¶ng nμy đợc hiểu nh mảng có khả liên kết phần tử liên kết đến giá trị xâu no Để minh hoạ việc my đợc thực nh no, hm sau hiển thị thuộc tính đối tợng thông qua tham số 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 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 + “.”+ i+ “=” + JavaScript 74 T¹o đối tợng Cả JavaScript client-side v server-side có số đối tợng đợc định nghĩa trớc Tuy nhiên, bạn tạo đối tợng riêng bạn Trong JavaScript 1.2, bạn muốn tạo đối tợng kiểu đối tợng, bạn tạo cách sử dụng khởi tạo đối tợng Hoặc bạn muốn tạo nhiều cá thể kiểu đối tợng, bạn tạo hm xây dựng trớc, sau tạo đối tợng có kiểu hm toán tử new 5.1.1 Sử dụng khởi tạo đối tợng Trong phiên trớc Navigator, bạn tạo đối tợng cách sử dụng hm xây dựng chúng sử dụng hm đợc cung cấp vi đối tợng khác để đạt đợc mục đích Tuy nhiên, Navigator 4.0, bạn tạo đối tợng cách sử dụng khởi tạo đối tợng.Bạn sử dụng cách ny bạn muốn tạo cá thể đơn lẻ nhiều cá thể đối tợng Cú pháp để tạo đối tợng cách khởi tạo đối tợng (Object Initializers): objectName={property1: value1, property2: value2, , propertyN: valueN} Trong objectName l tên đối tợng mới, propertyI l xác minh (có thể l tên, số xâu ký tự) v valueI l biểu thức m giá trị đợc gán cho propertyI Có thể lựa chọn khởi tạo tên đối tợng khai báo Nếu nh bạn không cần dùng đến đối tợng chỗ, bạn không cần phải gán cho biến Nếu đối tợng đợc tạo cách khởi tạo đối tợng mức cao nhất, lần đối tợng xuất biểu thức, JavaScript đánh giá lại lần Ngoμi ra, nÕu sư dơng viƯc khëi t¹o nμy hm lần gọi hm, đối tợng đợc khởi tạo 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 tạo đối tợng v gắn vo biến x biểu thức condition đợc đánh giá l Còn ví dụ sau tạo đối t−ỵng myHonda víi thc tÝnh: myHonda={color:”red”,wheels:4,engine:{cylinder:4,size:2.2}} Chó ý r»ng thuộc tính engine l đối tợng với thc tÝnh cđa nã Trong Navigator 4.0, b¹n cịng cã thể sử dụng khởi tạo để tạo mảng Cú pháp để tạo mảng cách ny khác với tạo đối tợng: arrayName=[element0, element1, ,elementN] Trong đó, arrayName l tên mảng mới, v elementI l giá trị phần tử vị trí mảng Khi bạn tạo mảng cách sử dụng phơng Khoa Toan tin, Đại học Quốc gia H Nội JavaScript 75 pháp khởi tạo, coi giá trị l phần tử mảng, v chiều di mảng l số tham số Bạn không cần phải định rõ tất phần tử mảng Nếu bạn đặt hai dấu phẩy vo hng, mảng đợc tạo với chốn trống cho phần tử cha đợc định nghĩa nh ví dụ dới đây: Nếu mảng đợc tạo cách khởi tạo(initializer) mức cao nhất, lần mảng xuất biểu thức, JavaScript đánh giá lại nã mét lÇn Ngoμi ra, nÕu sư dơng viƯc khëi tạo ny hm lần gọi hm, mảng đợc khởi tạo lần Ví dụ1: Tạo mảng coffees với phần tử v độ di cđa m¶ng lμ 3: coffees = [“French Roast”,”Columbian”,”Kona”] VÝ dơ 2: Tạo mảng với phần tử đợc khởi đầu v 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] cha đợc định nghĩa 5.1.2 Sử dụng hm xây dựng(Constructor Function) Bạn tạo đối tợng riêng với hai bớc sau: Định nghĩa kiểu đối tợng cách viết hm xây dựng Tạo cá thể đối tợng toán tử new Để định nghĩa kiểu đối tợng, ta phải tạo hm để định rõ tên, thuộc tính v cách thức kiểu đối tợng Ví dụ giả sử bạn muốn tạo kiểu đối tợng ô tô với tên l car, 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 thuộc tính đối tợng phải thông qua tham số hm Ví dụ, bạn tạo đối tợng kiĨu car nh− sau: mycar = new car(“Eagle”,”Talon TSi”,1993) C©u lệnh ny tạo đối tợng mycar v liên kết giá trị đợc đa vo với thuộc tính Khi giá trị mycar.make l Eagle , giá trị mycar.model l Talon TSi , v mycar.year l số nguyên 1993 Cứ nh bạn tạo nhiều đối tợng kiểu car Một đối tợng có thuộc tính m thân l đối tợng Ví dụ bạn định nghĩa thêm đố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 JavaScript 76 this.age=age this.sex=sex } V sau ta tạo hai ngời mới: rank = new person(“Rank McKinnon”,33,”M”) ken = new person(“Ken John”,39,”M”) B©y bạn định nghĩa lại hm 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− bạn 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 phải qua xâu ký tự hay giá trị số tạo đối tợng, ta cần đa hai đối tợng đà đợc tạo câu lệnh vo dòng tham số đối tợng tạo Ta lấy đợc thuộc tính đối tợng owner câu lênh sau: car2.owner.name Chú ý r»ng b¹n cịng cã thĨ t¹o mét thc tÝnh cho đối tợng trớc định nghĩa nó, ví dụ: car1.color=black Nh vậy, thuộc tính color đối tợng car1 đợc gán l black Tuy nhiên, không gây tác động tới đối tợng kiểu car no khác Nếu muốn thêm thuộc tính cho tất đối tợng phải định nghĩa lại hm xây dựng đối tợng 5.1.3 Lập mục lục cho thuộc tính đối tợng Trong Navigator 2.0, bạn gọi thuộc tính đối tợng tên thuộc tính số thứ tự Tuy nhiên từ Navigator 3.0 trở đi, ban đầu bạn định nghĩa thuộc tính tên nó, bạn luôn phải gọi tên, v bạn định nghĩa thuộc tính số bạn luôn phải gọi tới số Điều ny ứng dụng bạn tạo đối tợng với thuộc tính chúng hm xây dựng (nh ví dụ kiểu đối tợng car phần trớc) v bạn định nghĩa thuộc tính riêng đối tợng (nh mycar.color=red) Vì bạn định nghĩa thuộc tính đối tợng từ đầu số nh mycar[5]=25 mpg, bạn lần lợt gọi tới thuộc tính khác nh mycar[5] Khoa Toan tin, Đại học Quốc gia H Nội JavaScript 77 Tuy nhiên điều ny l đối tợng tơng ứng HTML nh mảng form Bạn gọi tới đối tợng mảng số thứ tự tên chúng VÝ dơ thỴ thø hai mét document cã thuộc tính NAME l myform bạn gọi tới form document.form[1] document.form[myForm] document.myForm 5.1.4 Định nghĩa thêm thuộc tính cho kiểu đối tợng Bạn thêm thuộc tính cho kiểu đối tợng đà đợc định nghĩa trớc cách sử dụng thuộc tính property Thuộc tính đợc định nghĩa ny tác dụng đối tợng m có tác dụng tất đối tợng khác kiểu.Ví dụ sau thực thêm thuộc tính color cho tất đối tợng kiểu car, sau gắn giá trị mu cho thuộc tính color đối tợng car1: car.prototype.color=null car1.color=red 5.1.5 Định nghĩa cách thức Một cách thức l hm đợc liên kết với đối tợng Bạn định nghĩa cách thức có nghĩa l bạn định nghĩa hm chuẩn Bạn sử dụng cú pháp sau để gắn hm cho đối tợng tồn tại: object.methodname = function_name Trong object l đối tợng tồn tại, methodname l tên cách thức v function_name l tên hm Bạn gọi cách thức ny từ đối tợng nh sau: object.methodname() Bạn định nghĩa cách thức cho kiểu đối tợng cách đa cách thức vo hm xây dựng đối tợng Ví dụ bạn định nghĩa hm định dạng v hiển thị thuộc tính đố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 thêm cách thức ny vo cho đối tợng car cách thêm dòng lệnh sau vo hm định nghĩa đối tợng this.displayCar= displayCar; Nh đị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 JavaScript 78 this.owner = owner this.displayCar= displayCar } Sau đó, bạn gọi cách thức displayCar đối tợng: car1.displayCar() car2.displayCar() 5.1.6 Sử dụng References) cho tham chiếu đối tợng (Object JavaScript có từ khoá đặc biệt l this m bạn sử dụng với cách thức để gọi tới đối tợng thời Ví dụ, giả sử bạn có hm validate dùng để xác nhận giá trị thuộc tính đối tợng nằm khoảng no ®ã: function validate(obj, lowval, hival){ if ( (obj.valuehival) ) alert(“Invalid value!) } Sau bạn gọi hm validate từ thẻ kiện onChange: Khi liªn kÕt víi mét thc 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 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ẻ kiện onClick 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 xoá đối tợng-chúng tồn bạn đà rời khái trang ®ã Trong JavaScript cho Navigator 3.0 cho phép bạn xoá đối tợng cách đặt cho trỏ tới giá trị Null (nếu nh l lần cuối gọi tới đối tợng) JavaScript đóng đối tợng thông qua biểu thức gán Khoa Toan tin, Đại học Quốc gia H Nội JavaScript 79 Bảng tổng kết từ khoá Sau l từ đựoc định nghĩa l phần ngôn ngữ JavaScript v không đợc sử dơng lμ tªn biÕn: abstract eval int static boolean extends interface super break false long switch byte final native synchrinized case finally new this catch float null throw char for package throws class function parseFloat transient const goto parseInt true continue if private try default implements protected var import public void double in return while else instanceof short with Khoa Toan tin, Đại học Quốc gia H Nội JavaScript 80 Tổng kết Nh vậy, ti liệu đà giới thiêu sơ qua JavaScript, m l sách tham khảo hữu ích để phát triển ứng dụng bạn Bạn tham khảo toμn diƯn JavaScript qun Teach Yourself JavaScript in 14 Days, JavaScript Guide Do JavaScript l ngôn ngữ v có thay đổi nhanh chóng, bạn nên ®Õn víi trang Web cđa h·ng Netscape ( http://www.netscape.com ) để có thông tin ngôn ngữ ny Khoa Toan tin, Đại học Quốc gia H Nội .. .JavaScript Chơng Nhập môn JavaScript 2.1.Nhúng JavaScript vo file HTML B¹n cã thĨ nhóng JavaScript vμo mét file HTML theo cách sau đây: ã Sử... C¸ch thøc JavaScript Khoa Toan tin, Đại học Quốc gia H Nội Hiển thị dòng thông báo hộp hội thoại đồng thời cung cấp trờng nhập liệu để ngời sử dụng nhập vμo JavaScript 11 Ch−¬ng BiÕn JavaScript. .. LANGUAGE=? ?JavaScript? ??> // INSERT ALL JavaScript HERE §iĨm khác cú pháp viết ghi HTML v JavaScript l cho phép bạn ẩn mà JavaScript ghi file HTML, để trình duyệt cũ không hỗ trợ cho JavaScript