Bài giảng javascript

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! Khoa Công nghệ, Đại häc Quèc gia Hµ Néi JavaScript HÃy kích chuột vào để 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ữ 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ở hiển thị hình dòng text Trong JavaScript, ngời lập trình điều khiển việc xuất hình client dòng text file HTML JavaScript xác định điểm mà xuất file HTML dòng text kết đợc dịch nh dòng HTML khác hiển thị trang 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 Ngoài ra, dòng text số hiển thị trờng TEXT TEXTAREA form Trong phần này, ta học cách thức write() 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 hình client: write() 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 vào dòng tham số, ví dụ: document.write("Test"); document.writeln('Test'); Khoa Công nghệ, Đại học Quốc gia Hà Nội JavaScript Cách thức write() xuất 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 cho phép xuất thẻ HTML Ví dụ: Cách thức write() xuất thẻ HTML Ouputting Text This text is plain. Ví dụ: Sự khác write() writeln(): Khoa Công nghệ, Đại học Qc gia Hµ Néi JavaScript Khi dut sÏ đợc kết quả: Hình 2.5: Sự khác 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 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 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 dòng text nh sử dụng document.write() document.writeln() phần trớc Ví dụ: alert("Nhấn vào OK để tiếp tục"); Khi file chờ ngời sử dụng nhấn vào nút OK tiếp tục thực Thông thờng, cách thức alert() đợc sử dụng trờng hợp: ã Thông tin đa 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 sàng để 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 chø ch−a thùc sù giao tiÕp víi ng−êi sư dơng JavaScript cung cÊp mét çch thức khác để giao tiếp với ngời sử dụng promt() Tơng tự nh alert(), prompt() tạo hộp hội thoại với dòng thông báo Khoa Công nghệ, Đại học Quốc gia Hà Nội JavaScript bạn đa vào, nhng cung cấp trờng để nhập liệu vào Ngời sử dụng nhập vào trờng kích vào OK Khi ®ã, ta cã thĨ xư lý d÷ 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 liệu, nút OK nút Cancel Chơng trình hỏi tên ngời dùng sau hiển thị thông báo ngắn sử dụng tên đa vào Ví dụ đợc lu vào file Hello.html JavaScript Exemple var name=window.prompt(“Hello! What’s your name ?”,””); document.write(“Hello ” + name + “ ! I hope you like JavaScript ”); Khi duyệt có kết quả: Hình2.1: Hiển thị cửa sổ nhập tên Ví dụ 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 đợc ghi biến có tên name Biến name đợc kết hợp với chuỗi khác đợc hiển thị cửa sổ trình duyệt nhờ phơng thức document.write Khoa Công nghệ, Đại học Quốc gia Hà Nội JavaScript Hình 2.2: Hiển thị lời chào 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ữ 2.5 Điểm lại lệnh 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 File 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 JavaScript Hiển thị dòng thông báo hộp hội thoại promt() Cách thức Hiển thị dòng thông báo hộp hội thoại Khoa Công nghệ, Đại học Quốc gia Hà Nội JavaScript JavaScript đồng thời cung cấp trờng nhập liệu để ngời sử dụng nhập vào Chơng Biến JavaScript 3.1 Biến phân loạI biến Tên biến JavaScript phải bắt đầu chữ hay dấu gạch dới Các chữ số không đợc sử dụng để mở đầu tên biến nhng sử dụng sau ký tự Phạm vi biến hai kiểu sau: ã Biến toàn cục: Có thể đợc truy cập từ đâu ứng dụng đợc khai báo nh sau : x = 0; ã Biến cục bộ: Chỉ đợc truy cập phạm vi chơng trình mà khai báo Biến cục đợc khai báo 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, nhiên điều không thực sù cÇn thiÕt 3.2 BiĨu diƠn tõ tè JavaScript Từ tố giá trị chơng trình không thay ®ỉi Sau vÝ dơ vỊ tõ tè: “The dog ate my shoe true Chú ý Khác với C, JavaScript kiểu số CONST để biểu diễn giá trị không đổi 3.3 Kiểu liệu Khác với C++ hay Java, JavaScript ngôn ngữ có tính định kiểu thấp Điều có nghĩa kiểu liệu khai báo biến Kiểu liệu đợc tự động chuyển thành kiểu phù hợp 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); Çc trình duyệt hỗ trợ JavaScript xử lý xác ví dụ đa kết dới đây: Khoa Công nghệ, Đại học Quốc gia Hà Nội JavaScript 10 Trình diễn dịch JavaScript xem biến numfruit có kiểu nguyên cộng với 20 có kiểu chuỗi kÕt hỵp víi biĨn temp Trong JavaScript, cã kiểu liệu sau đây: kiểu số nguyên, kiểu dấu phẩy động, kiểu logic kiểu chuỗi 1.1.1 KIểu nguyên (Interger) Số nguyên đợc biểu diễn theo ba cách: ã Hệ số 10 (hệ thập phân) - biểu diễn số nguyên theo số 10, ý chữ số phải khác ã Hệ số (hệ bát phân) - số nguyên biểu diễn dới dạng bát phân với chữ số số ã Hệ số 16 (hệ thập lục phân) - số nguyên biểu diễn dới dạng thập lục phân với hai chữ số 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ó thành phần sau: Hình 3.1: Kết xử lý liệu ã Phần nguyên thập phân ã 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ó chữ số theo sau dÊu chÊm hay E VÝ dơ: 9.87 Khoa C«ng nghệ, Đại học Quốc gia Hà Nội JavaScript 58 example.selectedIndex = example.options[0].defaultSelected = true example.options[1].selected = true Sưa ç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 giá trị cho thuộc tính text cđa çc thùc thĨ danh s¸ch VÝ dơ, ví dụ trớc, bạn đÃ tạo danh s¸ch lùa chän nh− sau: 1 2 3 Có thể thay đổi đợc dòng text hiển thị nút thứ hai thành "two" băng: example.options[1].text = "two"; Có thể thêm lựa chọn vào danh sách 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() với dòng text đợc trớc, defaultSelected selected nh đÃ định giá trị kiểu Boolean Đối tợng đợc liên kết vào danh sách lựa chọn đợc thực index Các lựa chọn bị xoá danh sách lựa chọn 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 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 Khoa Công nghệ, Đại học Quốc gia Hà Nội JavaScript 59 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 (çch thøc) Mét chó ý 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 text Example Khoa Công nghệ, Đại học Quốc gia Hà Néi NAME="first" JavaScript 60 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Ï xt hiƯn 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[] 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, Khoa Công nghệ, Đại học Quốc gia Hà Nội JavaScript 61 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ị form forms[] Example Mặt khác, bạn truy nhập đến form tên form đợc đặt thẻ FORM: Khi bạn gọi document.forms["name"] document.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 Khoa Công nghệ, Đại học Quốc gia Hà Nội JavaScript 62 form.submit ç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 nót bÊm cña HTML () checkbox thuéc tÝnh HTML Thuéc tÝnh kiĨu cho ç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 nót radio cđa HTML () reset thc tÝnh HTML Thc tÝnh kiĨu cho ç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 Thc 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 Mô tả việc kích vào phần tử form (button, checkbox,password) onClick thc 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 Khoa Công nghệ, Đại học Quốc gia Hà Nội Mô tả việc submit form HTML text text JavaScript 63 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 select() cách thức JavaScript Mô tả việc lựa chọn dòng text trờng (password, text, textarea) 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 tÝnh JavaScript 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 tÝnh JavaScript Số nguyên mô tả tổng số lựa chọn mét nhãm ç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 Khoa Công nghệ, Đại học Quốc gia Hà Nội Mô tả việc trỏ rời khỏi phần tử (password, text, textarea) JavaScript 64 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 form mét document string.substring() çch thøc JavaScript 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 thức JavaScript Trả lại giá trị nguyên nhỏ giá trị tham số đa vào string.length thuộc tính JavaScript Giá trị nguyªn cđa sè thø tù ký tù ci cïng xâu string Khoa Công nghệ, Đại học Quốc gia Hà Nội JavaScript 65 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 mét thuéc tÝnh b»ng çch g¸n cho nã mét 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Ị ç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 thc tÝnh cđa đố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 + “.”+ i+ “=” + obj[i] + “\n” return result } Khi gọi hàm show_props(myCar,myCar) lên: myCar.make = Ford myCar.model = Mustang myCar.year = 69; Khoa C«ng nghƯ, Đại học Quốc gia Hà Nội JavaScript 66 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 thc tính engine đối tợng với thuộc 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ố 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 Khoa Công nghệ, Đại học Quốc gia Hà Nội JavaScript 67 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] lµ 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ị mycar.model Talon TSi, mycar.year số nguyên 1993 Cø nh− vËy b¹n cã thĨ t¹o nhiỊu ®èi t−ỵng kiĨu car Mét ®èi t−ỵng cịng cã thĨ 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 } 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 Khoa C«ng nghƯ, Đại học Quốc gia Hà Nội JavaScript 68 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 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 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 document có thuộc tính NAME 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 b»ng çch sư dơng thc tÝnh property Thc 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 thêm thuộc 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: Khoa Công nghệ, Đại học Quèc gia Hµ Néi JavaScript 69 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() 5.1.6 Sử dụng cho tham chiếu đối tợng (Object References) 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 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ẻ kiện onClick cđa nót bÊm sư dơng this.form ®Ĩ gäi tíi form cha myForm Khoa Công nghệ, Đại học Quốc gia Hµ Néi JavaScript 70 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ầ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 Công nghệ, Đại học Quốc gia Hà Nội JavaScript 71 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 Công nghệ, Đại học Qc gia Hµ Néi JavaScript 72 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 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 Công nghệ, Đại häc Quèc gia Hµ Néi .. .JavaScript Chơng Nhập môn JavaScript 2.1.Nhúng JavaScript vào file HTML Bạn nhúng JavaScript vào file HTML theo cách sau đây: ã Sử dụng câu lệnh hàm cặp thẻ ã Sử dụng file nguồn JavaScript. .. LANGUAGE=? ?JavaScript? ??> // INSERT ALL JavaScript HERE §iĨm khác cú pháp viết ghi HTML JavaScript cho phép bạn ẩn mÃ JavaScript ghi file HTML, để trình duyệt cũ không hỗ trợ cho JavaScript. .. dịch dòng dới dạng mÃ JavaScript Các ví dụ chơng không chứa đặc điểm ẩn JavaScript để mÃ dễ hiểu Khoa Công nghệ, Đại học Qc gia Hµ Néi JavaScript 2.1.2 Sư dơng mét file ngn JavaScript Thc tÝnh

Định dạng
Số trang	72
Dung lượng	583,16 KB