hướng dẫn tự học javascript cơ bản và nâng cao

Trang 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 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 dòng chữ 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 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 dịch 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 Ngồi ra, dòng text số hiển thị trường TEXT TEXTAREA form Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript Trong phần này, ta học cách thức write() writeln() đối tượng document Đối tượng document JavaScript 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 sau: object_name.property_name Dữ liệu mà cách thức dùng để thực cơng việc đưa vào dòng tham số, ví dụ: document.write("Test"); document.writeln('Test'); Cách thức write() xuất hình xâu Text 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. Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript Ví dụ: Sự khác write() writeln(): Khi duyệt kết quả: Hình 2.5: Sự khác write() 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 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ách thức này, bạn phải đưa vào dòng text sử dụng document.write() document.writeln() phần trước Ví dụ: alert("Nhấn vào OK để tiếp tục"); Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 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() sử dụng trường hợp: Thông tin đưa form không hợp lệ Kết sau tính tốn khơng hợp lệ Khi dịch vụ chưa 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ưa thực 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 promt() Tương tự alert(), prompt() tạo hộp hội thoại với dòng thơng báo bạn đưa vào, ngồi 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 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 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ụ lưu 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 ”); Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 ghi biến có tên name Biến name kết hợp với chuỗi khác hiển thị cửa sổ trình duyệt nhờ phương thức document.write 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 qua JavaScript, tiếp tục tìm hiểu thêm ngơn ngữ Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 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 lệnh JavaScript SRC Thuộc tính thẻ SCRIPT Giữ địa file JavaScript bên File phải có phần js LANGUAGE thuộc tính thẻ SCRIPT Định rõ ngôn ngữ script 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() 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 JavaScript 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 Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 10 CHƢƠNG BIẾN TRONG JAVASCRIPT 3.1 BIẾN VÀ PHÂN LOẠI BIẾN Tên biến JavaScript phải bắt đầu chữ hay dấu gạch Các chữ số không sử dụng để mở đầu tên biến sử dụng sau ký tự Phạm vi biến hai kiểu sau: Biến tồn cục: Có thể truy cập từ đâu ứng dụng khai báo sau : x = 0; Biến cục bộ: Chỉ truy cập phạm vi chương trình mà khai báo Biến cục khai báo hàm với từ khoá var sau: var x = 0; Biến tồn cục sử dụng từ khố var, nhiên điều khơng thực cần thiết 3.2 BIỂU DIỄN TỪ TỐ TRONG JAVASCRIPT Từ tố giá trị chương trình khơng thay đổi Sau ví dụ từ tố: “The dog ate my shoe” true Chú ý Khác với C, JavaScript khơng có kiểu số CONST để biểu diễn giá trị không đổi 3.3 KIỂU DỮ 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 khơng phải kiểu liệu khai báo biến Kiểu liệu 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ác trình duyệt hỗ trợ JavaScript xử lý xác ví dụ đưa kết đây: Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 65 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 trước, defaultSelected selected định giá trị kiểu Boolean Đối tượng liên kết vào danh sách lựa chọn 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, nút Reset Nút đưa thông tin từ trường form tới địa URL thuộc tính ACTION thẻ form sử dụng cách thức METHOD thẻ FORM Giống đố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 sử dụng form HTML Tương tự trường Password, trường text cho phép nhập vào dòng đơn, 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ỏ kích ngồi 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ử thẻ INPUT (thuộc tính) name Tên đối tượng thẻ INPUT (thuộc tính) value Giá trị thời phần tử (thuộc tính) Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 66 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 đưa vào trường lặp lại trường text thứ hai, dòng text đưa vào trường text thứ hai lại 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 NAME="first" NAME="second" Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 67 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 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 gọi tới mảng elements[] Ví dụ bạn tạo form sau: bạn gọi tới ba thành phần 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 sử dụng mối quan hệ phần tử dùng tên chúng Mảng form[] Các thẻ kiện 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 Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 68 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 đặ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 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 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 Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 69 JavaScript thẻ FORM tính Xâu chứa tên cửa sổ đích form submition form.target thuộc JavaScript form.submit cách thức JavaScript Mô tả việc submit form HTML type thuộc JavaScript onSubmit Thẻ kiện thẻ kiện cho việc submit button thuộc tính HTML Thuộc tính kiểu cho nút bấm HTML () checkbox thuộc tính HTML Thuộc tính kiểu cho checkbox HTML () pasword thuộc 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 nút radio HTML () reset thuộc tính HTML Thuộc tính kiểu cho nút reset 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 nút submit () text thuộc tính HTML Thuộc tính kiểu trường form () TEXTAREA Thẻ HTML Hộp thẻ cho nhiều dòng ( defautl ) 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 ) tính ánh xạ kiểu phần tử form thành xâu Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt text text JavaScript 70 click() cách thức JavaScript Mơ tả việc kích vào phần tử form (button, checkbox,password) onClick thuộc JavaScript tính Thẻ kiện cho 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 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 trường (password, text, textarea) onFocus() Thẻ kiện Thẻ kiện cho kiện focus(password, selection list, text, textarea) onBlur Thẻ kiện Thẻ kiện cho kiện blur (password, selection list, text, textarea) onChange Thẻ kiện Thẻ kiện cho kiện giá trị trường thay đổi (password, selection list, text, textarea) onSelect Thẻ kiện Thẻ kiện người sử dụng chọn dòng text trường (password, text, textarea) index thuộc JavaScript tính Là số nguyên mơ tả lựa chọn thời nhóm lựa chọn (radio button) length thuộc JavaScript tính Số ngun mơ tả tổng số lựa chọn nhóm lựa chọn (radio button) dafautlSelected thuộc JavaScript tính Giá trị Boolean mơ tả có lựa chọn đặt mặc định (seledtion list) Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 71 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 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 JavaScript tính mảng đối tượng form với danh sách form document string.substring() cá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 JavaScript tính 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 72 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 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 sau: myCar.make = “Ford“ myCar.model = “Mustang“ myCar.year = 69; Có mảng lưu 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 khác cách giao tiếp với cấu trúc liệu Ví dụ truy nhập tới thuộc tính đối tượng myCar mảng sau: myCar[make] = “Ford“ myCar[model] = “Mustang“ myCar[year] = 69; Kiểu mảng hiểu 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 thực 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 Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 73 TẠO CÁC ĐỐI TƢỢNG MỚI Cả JavaScript client-side server-side có số đối tượng đị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 cung cấp vài đối tượng khác để đạt 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ị gán cho propertyI Có thể lựa chọn khởi tạo tên đối tượng khai báo Nếu 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 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 Ngồi ra, sử dụng việc khởi tạo hàm lần gọi hàm, đối tượng 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 đánh giá Còn ví dụ sau tạo đối tượng myHonda với thuộc tính: myHonda={color:”red”,wheels:4,engine:{cylinder:4,size:2.2}} Chú ý thuộc tính engine đối tượng với thuộc tính Trong Navigator 4.0, bạn 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 tạo với chốn trống cho phần tử chưa định nghĩa ví dụ đây: Nếu mảng 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 Ngồi ra, sử dụng việc khởi tạo hàm lần gọi hàm, mảng 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ử khởi đầu phần tử rỗng: fish = [“Lion”, ,” Surgeon”] Với biểu thức này, fish[0] “Lion”, fish[2] ” Surgeon”, fish[2] chưa định nghĩa SỬ DỤNG MỘT HÀM XÂY DỰNG(CONSTRUCTOR FUNCTION) 5.1.2 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 tố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 viết hàm 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 sau: mycar = new car(“Eagle”,”Talon TSi”,1993) Câu lệnh tạo đối tượng mycar liên kết giá trị đư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ứ 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 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 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 tạo câu lệnh vào dòng tham số đối tượng tạo Ta lấy 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 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 CÁC THUỘC TÍNH CỦA ĐỐ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 ln ln phải gọi tên, bạn định nghĩa thuộc tính số bạn ln ln 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ố mycar[5]=”25 mpg”, bạn gọi tới thuộc tính khác mycar[5] Tuy nhiên điều đối tượng tương ứng HTML 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 Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 76 “myform” bạn gọi tới form document.form[“myForm”] document.myForm 5.1.4 document.form[1] ĐỊNH NGHĨA THÊM CÁC THUỘC TÍNH CHO MỘT KIỂU ĐỐI TƢỢNG Bạn thêm thuộc tính cho kiểu đối tượng định nghĩa trước cách sử dụng thuộc tính property Thuộc tính định nghĩa khơng có 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ÁC CÁCH THỨC Một cách thức hàm 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 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 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: Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 77 car1.displayCar() car2.displayCar() 5.1.6 SỬ DỤNG CHO CÁC THAM CHIẾU ĐỐI TƢỢNG (OBJECT REFERENCES) JavaScript có từ khố đặ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 thuộc tính form, từ khố this 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 nút bấm sử dụng this.form để gọi tới form cha myForm Form name:
5.1.7 XỐ ĐỐI TƢỢNG Trong JavaScript cho Navigator 2.0, bạn khơng thể 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 xố đối tượng cách đặt cho trỏ tới giá trị Null (nếu 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 78 BẢNG TỔNG KẾT CÁC TỪ KHOÁ Sau từ đựoc định nghĩa phần ngôn ngữ JavaScript không 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 Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 tồn diện JavaScript Teach Yourself JavaScript in 14 Days, 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt .. .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. .. dụng nhập vào Khoa Toan tin, Đại học Quốc gia Hà Nội CuuDuongThanCong.com https://fb.com/tailieudientucntt JavaScript 10 CHƢƠNG BIẾN TRONG JAVASCRIPT 3.1 BIẾN VÀ PHÂN LOẠI BIẾN Tên biế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

hướng dẫn tự học javascript cơ bản và nâng cao

Thông tin tài liệu

Từ khóa liên quan

Tài liệu cùng người dùng

Tài liệu liên quan