Nhập môn JavaScript: Phần 2 - ĐH Quốc gia Hà Nội

Nhập môn JavaScript phần 2 sẽ nối tiếp nội dung phần 1 với 3 chương: Các đối tượng trong JavaScript, Mô hình đối tượng, Bảng tổng kết các từ khóa. Qua tài liệu này sẽ giúp học tập tốt môn lập trình cũng như có thể phát triển các ứng dụng của cá nhân.

JavaScript 40 Các đối tợng JavaScript Nh đà nói JavaScript ngôn ngữ lập trình dựa đối tợng, nhng không hớng đối tợng không hỗ trợ lớp nh tính thừa kế Phần nói đối tợng JavaScript hình 6.1 sơ đồ phân cấp đối tợng Trong sơ đồ phân cấp đối tợng JavaScript, đối tợng thực thuộc tính đối tợng bố mẹ Trong ví dụ chơng trình xử lý kiện trớc form tên PHIEU_DIEU_TRAlà thuộc tính đối tợng document trờng text AGE thuộc tính form PHIEU_DIEU_TRA Để tham chiếu đến giá trị 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), chơng trình xử lý 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 thẻ document Bên cạnh bạn thấy phơng thức document.write đợc sử dụng nhiều ví dụ để đa văn kết document Đối tợng có chơng trình xử lý kiện Ví dụ đối tợng link có hai chơng trình xử lý kiện onClick onMouseOver onClick đợc gọi có đối tợng link đợc kích, onMouseOver đợc gọi trỏ chuột di chuyển qua link Khi bạn tải document xuống Navigator, tạo số đối tợng với giá trị thuộc tính chúng dựa file HTML document vài thông tin cần thiết khác Những đối tợng tồn cách có cấp bậc phản ánh cấu trúc file HTML Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 41 Sơ đồ sau minh hoạ phân cấp đối tợng nµy Window Texturea navigator Text Plugin Layer Frame FileUpload Mime Type document Location Link Password Image Hidden Area Submit Anchor Reset Applet Radio Plugin Checkbox Form Button History Select Option Hình 6.1: Sơ đồ - Phân cấp đối tượng Navigator Trong sơ đồ phân cấp này, đối tợng thuộc tính đối tợng cha Ví dụ nh form tên form1 đối tợng đối tợng document đợc gọi tới document.form1 Tất trang có đối tợng sau đây: ã navigator: có thuộc tính tên phiên Navigator đợc sử dụng, dùng cho MIME type đợc hỗ trợ client plug-in đợc cài đặt client ã window: đối tợng mức cao nhất, có thuộc tính thực áp dụng vào toàn cửa sổ ã document: chứa thuộc tính dựa nội dung document nh tên, màu nền, kết nối forms ã location: có thuộc tính dựa địa URL thời ã history: Chứa thuộc tính URL mà client yêu cầu trớc Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 42 Sau mô tả thuộc tính, phơng thức nh chơng trình xử lý kiện cho đối tợng JavaScript Đối tợng navigator Đối tợng đợc sử dụng để đạt đợc thông tin trình duyệt nh số phiên Đối tợng phơng thức hay chơng trình xử lý kiện Các thuộc tính appCodeName Xác định tên mà nội trình duyệt (Atlas) AppName Xác định tên trình duyệt AppVersion Xác định thông tin phiên đối tợng navigator userAgent Xác định header user - agent VÝ dơ VÝ dơ sau sÏ hiĨn thÞ thuộc tính đố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 JavaScript 43 Hình 6.2: Minh hoạ cho đối tợng Navigator Đối tợng window Đối tợng window nh đà nói đối tợng mức cao Các đối tợng document, frame, vị trí thuộc tính đố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ạng thái cửa sổ ã Frames - Mảng xác định tất frame cửa sổ ã Length - Số lợng frame 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ổ thời ã Status - Đợc sử dụng cho thông báo tạm thời hiển thị lên 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 ghi đè lên defaultStatus ã Top - Cửa sổ • Window - Cưa sỉ hiƯn thêi Khoa Toan tin, Đại học Quốc gia Hà Nội 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" nút OK ã clearTimeout(timeoutID) -Xóa timeout 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 nút Cancel Trả lại giá trị True cho OK False cho Cancel ã [windowVar = ][window] open("URL", "windowName", [ "windowFeatures" ] ) - Më cưa sỉ míi • prompt ("message" [,"defaultInput"]) - Më hộp hội thoại để nhận 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ổ gọi tới nh đích mét form submit hc mét Hipertext link (thc tÝnh TARGET thẻ FORM A) Trong ví dụ tạo mét tíi cưa sỉ thø hai, nh nót thø để mở cửa sổ rỗng, sau liên kết tải file doc2.html xuống cửa sổ ®ã råi mét nót kh¸c dïng ®Ĩ ®ãng cđa sỉ thứ hai lại, ví dụ la vào file window.html: Frame Example

Load a file into window2

Khoa Toan tin, Đại học Quốc gia Hà Nội 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 - Xt hiƯn cưa sổ kết thúc việc tải ã onUnLoad - Xuất cửa sổ đợc loại bỏ Đối tợng location Các thuộc tính đối tợng location trì thông tin URL document thời Đối tợng hoàn toàn phơng thức 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 vị trí thời (ví dụ topic3) ã Host - PhÇn hostname:port cđa URL (vÝ dơ www.abc.com ) Chó ý thờng cổng ngầm định đợc ã Hostname - Tên host domain (ví dụ www.abc.com ) ã href - Toàn URL cho document ã 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 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 ë cuèi URL cho c¸c script CGI Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 46 Đối tợng frame Mét cưa sè cã thĨ cã mét vµi frame Các frame cuộn cách độc lập với frame có URL riêng frame chơng trình xử lý kiện Sự kiện onLoad onUnLoad đối tợng window 4.1.4 Các thuộc tính ã frames - Mảng tất frame cửa sổ ã Name - Thuộc tính NAME thẻ ã Length - Số lợng frame 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 thời 4.1.5 Các phơng thức • clearTimeout (timeoutID) - Xo¸ timeout setTimeout lËp SetTimeout trả lại timeoutID ã TimeoutID = setTimeout (expression,msec) - Đánh gi¸ expression sau hÕt thêi gian msec 4.1.6 Sư dụng Frame 4.1.6.1 a) Tạo frame (create) Để tạo frame, ta sử dụng thẻ FRAMESET Mục đích thẻ định nghĩa tập frame trang Ví dụ1: tạo frame ( hình 17) Frame Example Sơ đồ sau hiển thị cấu trúc frame: Cả frame cïng mét cưa sỉ cha, mỈc dï sè frame nằm frameset khác Top listFrame (category.html) contentFrame (titles.html) Khoa Toan tin, Đại học Quốc gia Hà Nội navigatorFrame (navigator.html) JavaScript 47 Bạn gọi tới frame trớc cách sử dụng thuộc tÝnh frames nh sau: listFrame chÝnh lµ top.frames[0] contentFrame chÝnh top.frames[1] navigatorFrame top.frames[2] Hình 6.4: Kết viƯc t¹o frame VÝ dơ 2: Cịng gièng nh mét sù lùa chän, b¹n cã thĨ t¹o mét cửa sổ giống nh ví dụ trớc nhng ®Ønh cđa hai frame l¹i cã mét cưa sỉ cha riêng từ navigateFrame Mức frameset cao đợc ®Þnh nghÜa nh sau: Frame Example Trong file muske13.html lại tiếp tục đặt mét frameset: Frame Example Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 48 Khi kết hiển thị ví dơ gièng vÝ dơ nhng sù ph©n cÊp frames lại khác hẳn: Bạn gọi tới frame 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 upperFrame.frames[0] top.frames[0].frames[0] contentFrame upperFrame.frames[1] hc 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 cách sử dụng thuộc tính location để đặt địa URL phải định rõ vị trí frame cấu trúc Trong ví dụ trên, bạn thêm dòng sau vào navigatorFrame: nút Titles only đợc nhấn, file artist.html đợc tải vào upperFrame, hai frame listFrame, contentFrame bị đóng lại nh chúng cha tồn Đối tợng document Đối tợng chứa thông tin document thời cung cấp phơng thức để đa thông tin hình Đối tợng document đợc tạo cặp thẻ Một số thuộc tính gắn với thẻ Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 49 Các đối tợng anchor, forms, history, links thuộc tính đối tợng document Không có chơng trình xử lý kiện cho frame Sự kiện onLoad onUnLoad 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 anchor document ã bgColor - Gièng thc tÝnh BGCOLOR • cookie - Sư dơng để xác định cookie ã fgColor - Giống thuộc tính TEXT ã forms - Mảng tất form document ã lastModified - Ngày cuối văn đợc sưa • linkColor - Gièng thc tÝnh LINK • links - Mảng tất link document ã location - URL đầy đủ văn ã referrer - URL văn gọi ã title - Nội dung thẻ ã vlinkColor - Giống thuộc tính VLINK 4.1.8 Các phơng thức ã document.clear - Xoá document thời ã document.close - Đóng dòng liệu vào đa toàn liệu đệm hình ã document.open (["mineType"]) - Mở stream để thu thập liệu vào phwong thức write writeln ã document.write(expression1 [,expression2] [,expressionN]) - Viết biểu thức HTML lên văn trông cửa sổ xác định • document.writeln (expression1 [,expression2] [,expressionN] ) Gièng ph¬ng thøc nhng hết biểu thức lại xuống dòng Đối tợng anchors anchor đoạn văn document dùng làm đích cho siêu liên kết Nó đợc xác định cặp thẻ Đối tợng anchor thuộc tính, phơng thức nh chơng trình xử lý kiện Mảng anchor tham chiếu đến anchor có tên document Mỗi anchor đợc tham chiếu cách: document.anchors [index] Mảng anchor có thuộc tính length xác định số lợng anchor document, đợc xác định nh sau: Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 65 selectListName.options[index] = null; 1.1 Phần tử submit Nút Submit trờng hợp đặc biệt button, nh nút Reset Nút đa thông tin từ trờng form tới địa URL đợc thuộc tính ACTION thẻ form sử dụng cách thức METHOD thẻ FORM Giống nh đối tợng button reset, đối tợng submit có sẵn thuộc tính name value, cách thức click() thẻ kiện onClick 1.2 Phần tử Text Phần tử nằm phần tử hay đợc sử dụng form HTML Tơng tự nh trêng Password, trêng text cho phÐp nhËp vµo mét dòng đơn, nhng ký tự bình thờng đối tợng text có ba thuộc tính:defautValue, name value Ba cách thức mô kiện ngời sử dụng: focus(), blur() select() Có thẻ kiện là: obBlur, onFocus, onChange, onSelect Chú ý kiện thực trỏ đà đợc kích trờng text Bảng sau mô tả thuộc tính cách thức đối tợng text Bảng Các thuộc tính cách thức đối tợng text Cách thức thuộc tính Mô tả 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 ý quan trọng 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 vào trờng đợc lặp lại trờng text thứ hai, dòng text đợc đa vào trờng text thứ hai lại đợc lặp lại trờng texxt thứ Khả áp dụng để tự động cập nhật thay đổi liệu Ví dụ Tự động cập nhật trờng text Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 66 text Example NAME="first" NAME="second" 1.3 Phần tử Textarea Thẻ TEXTAREA cung cấp 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ụ tạo 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 trờng vào 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, value, cách thức focus(), select(), blur(), thẻ kiện onBlur, onForcus, onChange, onSelect Mảng elements[] Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 67 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 ba thành phần nh sau: document.elements[0], document.elements[1], document.elements[2], gọi document.testform.one, document.testform.two, document.testform.three Thuộc tính thờng đợc sử dụng mối quan hệ phần tử dùng tên chúng Mảng form[] Các thẻ kiện đợc thiết kế để làm 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 trang have information in a single field match in all three forms Có thể gọi document.forms[] thay gọi tên form Trong script này, bạn có hai trờng text để nhập nằm hai form độc lập với Sử dụng mảng form bạn tơng tác giá trị trờng hai form lúc ngời sử dụng thay đổi giá trị trªn mét form forms[] Example Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 68 Mặt khác, bạn truy nhập đến form tên form đợc đặt thẻ FORM: Khi bạn có document.name thể gọi document.forms["name"] Xem lại lệnh mở rộng Lệnh/ Mở rộng Kiểu Mô tả blur() cách thức JavaScript Mô tả việc dịch chuyển trỏ từ phần tử form.action cách thức JavaScript Xâu chứa giá trị thuộc tính ACTION thẻ FORM form.elemrnts thuộc tính JavaScript 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 tính JavaScript xâu chứa kiĨu MIME sư dơng chun th«ng tin tõ form tới server form,name thuộc tính JavaScript Xâu chứa giá trị thc tÝnh NAME thỴ FORM form.target thc tÝnh JavaScript Xâu chứa tên cửa sổ đích form submition form.submit cách thức JavaScript type thuộc tính JavaScript ánh xạ kiểu phần tử form thành 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 thc tính HTML Thuộc tính kiểu cho dòng pasword HTML() radio thuéc tÝnh HTML Thuéc tÝnh kiÓu cho c¸c nót radio cđa HTML () Khoa Toan tin, Đại học Quốc gia Hà Nội Mô tả việc submit mét form HTML JavaScript 69 reset thuéc tÝnh HTML Thuéc 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 lựa chọn danh s¸ch lùa chän(Option 1Option 2) submit thuéc tÝnh HTML Thuéc tÝnh kiĨu cđa nót submit () text thc tÝnh HTML Thc tÝnh kiĨu cđa trêng form () TEXTAREA Thẻ HTML Hộp thẻ cho nhiều dòng ( defautl ) name thuộc tính JavaScript Xâu chứa tên phần tử HTML (button, checkbox, password ) value thuéc tÝnh JavaScript X©u chứa giá trị hiên thời phần tử HTML(button, checkbox, password ) click() c¸ch thøc JavaScript onClick thuéc tÝnh JavaScript ThỴ sù kiƯn cho sù kiƯn kÝch (button, checkbox, radio button, reset, selection list, submit) checked thuéc tÝnh JavaScript Giá trị kiểu Boolean mô tả lựa chọn check(checkbox, radio button) defaultChecked thuộc tính JavaScript Xâu chứa giá trị mặc định phần tử HTML (password, text, textarea) focus() cách thức JavaScript Mô tả việc trỏ tới phần tử (password, text, textarea) blur() cách thức JavaScript Mô tả việc trỏ rời khỏi phần tử (password, text, textarea) select() cách thức JavaScript Mô tả việc lùa chän dßng text mét trêng (password, text, textarea) onFocus() ThỴ sù kiƯn ThỴ sù kiƯn cho sù kiƯn focus(password, selection list, text, textarea) Khoa Toan tin, Đại học Quốc gia Hà Nội text text Mô tả việc kích vào phần tử form (button, checkbox,password) JavaScript 70 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ẻ 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 tính JavaScript Là số nguyên mô tả lựa chọn hiÖn thêi mét nhãm lùa chän (radio button) length thuộc tính JavaScript 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 tính JavaScript Giá trị Boolean mô tả có lựa chọn đợc đặt mặc định (seledtion list) options thuộc tính JavaScript Mảng lựa chọn danh sách lựa chọn text thuộc tính JavaScript Dòng text hiển thị cho thành 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 hàng bảng HTML TD thẻ HTML Hộp thẻ cho ô hàng bảng HTML COLSPAN thuộc tính HTML Là thuộc tính thẻ TD mô tả ô bảng có nhiều cột ROWSPAN thuộc tính HTML Là thuộc tính thẻ TD mô tả ô bảng có nhiều hàng BODER thuộc tính HTML Là thuộc tính thẻ TABLE mô tả độ rộng đờng viền bảng document.forms[] thuộc tính JavaScript mảng đối tợng form với danh s¸ch c¸c form mét document string.substring() c¸ch thøc JavaScript Khoa Toan tin, Đại học Quốc gia Hà Nội Trả lại xâu xâu string từ JavaScript 71 tham số vị trí ký tự đầu đến vị trí ký tù cuèi Math.floor() c¸ch thøc JavaScript string.length thuéc tÝnh JavaScript Giá trị nguyên số thứ tự ký tự cuối xâu string Khoa Toan tin, Đại học Quốc gia Hà Nội Trả lại giá trị nguyên nhỏ giá trị tham số đa vào JavaScript 72 Mô hình đối tợng (Object Model) Đối tợng 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 tên thuộc tính nhạy cảm Bạn định nghĩa thuộc tính cách gán cho giá trị Ví dụ, giả sử có đối tợng tên myCar (trong trờng hợp giả sử đối tợng đà tồn sẵn sàng) Bạn lấy thuộc tính có tên make, model year cña 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 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 cã thĨ truy nhËp tíi c¸c thc tÝnh đối tợng myCar mảng nh sau: myCar[make] = “Ford“ myCar[model] = “Mustang“ myCar[year] = 69; KiÓu mảng đợc hiểu nh mảng có khả liên kết phần tử liên kết đến giá trị xâu Để minh hoạ việc mày đợc thực nh nào, hàm sau hiển thị thuộc tính đối tợng thông qua tham số kiểu đối tợng 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 73 Tạo đối tợng Cả JavaScript client-side 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 hàm xây dựng trớc, sau tạo đối tợng có kiểu hàm 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 hàm xây dựng chúng sử dụng hàm đợc cung cấp vài đố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 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 tên đối tợng mới, propertyI xác minh (có thể tên, số xâu ký tự) valueI 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, sử dụng việc khởi tạo hàm lần gọi hàm, đố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 gắn vào biến x biểu thức condition đợc đánh giá 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 đố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 khác với tạo đối tợng: arrayName=[element0, element1, ,elementN] Trong đó, arrayName tên mảng mới, elementI giá trị phần tử vị trí mảng Khi bạn tạo mảng cách sử dụng phơng pháp khởi tạo, coi giá trị phần tử mảng, chiều dài mảng số tham số Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 74 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 vào hàng, 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 lần Ngoài ra, sử dụng việc khởi tạo hàm lần gọi hàm, mảng đợc khởi tạo lần Ví dụ1: Tạo mảng coffees với phần tử độ dài mảng 3: coffees = [French Roast,Columbian,Kona] Ví dụ 2: Tạo mảng với phần tử đợc khởi đầu phần tử rỗng: fish = [Lion, ,” Surgeon”] Víi biĨu thøc nµy, fish[0] lµ “Lion”, fish[2] Surgeon, fish[2] cha đợc định nghĩa 5.1.2 Sử dụng hàm 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 hàm 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 hàm để định rõ tên, thuộc tính 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 car, có thuộc tính make, model, year color, để thực việc 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ố hàm 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 tạo đối tợng mycar liên kết giá trị đợc đa vào với thuộc tính Khi giá trị mycar.make Eagle, giá trị cđa mycar.model lµ “Talon TSi”, vµ mycar.year lµ mét 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 đối tợng Ví dụ bạn định nghĩa thêm đối tợng khác person nh sau: function person(name, age, sex){ this.name=name this.age=age this.sex=sex } Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 75 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 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 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 vào 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ú ý bạn tạo thuộc 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 black Tuy nhiên, không gây tác động tới đối tợng kiểu car 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 hàm 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 b»ng sè thø tù cđa nã 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, bạn định nghĩa thuộc tính số bạn luôn phải gọi tới số Điều ứng dụng bạn tạo đối tợng với thuộc tính chúng hàm xây dựng (nh ví dụ kiểu đối tợng car phần trớc) 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] Tuy nhiên điều đố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 Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 76 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 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 hiƯn thªm thc tÝnh color cho tÊt đối tợng kiểu car, sau gắn giá trị màu 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 hàm đợc liên kết với đối tợng Bạn định nghĩa cách thức có nghĩa bạn định nghĩa hàm chuẩn Bạn sử dụng cú pháp sau để gắn hàm cho đối tợng tồn tại: object.methodname = function_name Trong object đối tợng tồn tại, methodname tên cách thức function_name tên hàm Bạn gọi cách thức 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 vào hàm xây dựng đối tợng Ví dụ bạn định nghĩa hàm định dạng 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 vào cho đối tợng car cách thêm dòng lệnh sau vào hàm đị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 this.owner = owner this.displayCar= displayCar } Sau đó, bạn gọi cách thức displayCar đối tợng: car1.displayCar() car2.displayCar() Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 77 5.1.6 Sử dụng References) cho tham chiếu đối tợng (Object JavaScript có từ khoá đặc biệt 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ó hàm validate dùng để xác nhận giá trị thuộc tính đối tợng nằm khoảng đó: function validate(obj, lowval, hival){ if ( (obj.valuehival) ) alert(“Invalid value!”) } Sau ®ã bạn gọi hàm 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 đối tợng 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 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 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 cã thĨ xoá đối tợng cách đặt cho trỏ tới giá trị Null (nếu nh 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 78 Bảng tổng kết từ khoá Sau từ đựoc định nghĩa phần ngôn ngữ JavaScript không đợc sử dụng 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 Qc gia Hµ Néi JavaScript 79 Tỉng kÕt Nh vậy, tài liệu đà giới thiêu sơ qua JavaScript, mà 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, hc JavaScript Guide Do JavaScript ngôn ngữ có thay đổi nhanh chóng, bạn nên đến với trang Web hÃng Netscape ( http://www.netscape.com ) để có thông tin ngôn ngữ Khoa Toan tin, Đại học Quốc gia Hà Nội ... Các thuộc tính ã E - Hằng số Euler, khoảng 2, 718 ã LN2 - logarit tự nhiên 2, khoảng 0,693 ã LN10 - logarit tự nhiên 10, khoảng 2, 3 02 ã LOG2E - logarit số e, khoảng 1,4 42 ã PI - Giá trị , khoảng... Math.log (number) - Trả lại logarit tự nhiên number ã Math.max (num1,num2) - Trả lại giá trị lớn num1 num2 ã Math.min (num1,num2) - Trả lại giá trị nhỏ num1 num2 ã Math.pos (base,exponent) - Trả lại... - Ngày cuối văn đợc sửa ã linkColor - Giống thuộc tính LINK ã links - Mảng tất link document ã location - URL đầy đủ văn ã referrer - URL văn gọi ã title - Nội dung thẻ ã vlinkColor -