Giáo Trình Javascript Part 2

JavaScript Giáo trình JavaScript *** chơng Lời nói đầu Chơng Nhập môn JavaScript Chơng Biến JavaScript 15 Xây dựng biểu thức JavaScript 18 định nghĩa phân loạI biểu thức 18 Các toán tử (operator) 18 Bài tập 21 Các lệnh 23 Câu lệnh điều kiện 23 Câu lệnh lặp 24 Các câu lệnh thao tác đối tợng 27 Các hàm (Functions) 32 Các hàm có sẵn 39 Mảng (Array) 42 Sự kiện 44 Bài tập 48 Các đối tợng JavaScript 53 Đối tợng navigator 57 Đối tợng window 58 Đối tợng location 61 Đối tợng frame 61 Đối tợng document 65 Đối tợng anchors 66 Đối tợng forms 66 Đối tợng history 67 Đối tợng links 68 Đối tợng Math 69 Đối tợng Date 70 Đối tợng String 71 Các phần tử đối tợng Form .73 Mô hình đối tợng (Object Model) .94 Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript Đối tợng thuộc tính 94 Tạo đối tợng 95 Bảng tổng kết từ khoá .102 Tổng kết 103 Khoa Toan tin, Đại học Quốc gia Hà Nội 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 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 LiveScript để thực chức Sau ngôn ngữ đợc đổi tên thành 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 JavaScript, nhng chúng hai ngôn ngữ riêng biệt JavaScript 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 thành mã dễ biên dịch, trình duyệt đọc JavaScript dới dạng mã nguồn Chính bạn dễ dàng học JavaScript qua ví dụ bạn thấy cách sử dụng JavaScript trang Web JavaScript ngôn ngữ dựa đối tợng, có nghĩa 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 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ả cho phép JavaScript trở thành ngôn ngữ script động Giống với HTML Java, JavaScript đợc thiết kế độc lập với hệ điều hành Nó chạy hệ điều hành có trình duyệt hỗ trợ JavaScript Ngoài JavaScript giống Java khía cạnh an ninh: JavaScript đọc viết vào file ngời dùng Các trình duyệt web nh Nescape Navigator 2.0 trở hiển thị câu lệnh JavaScript đợc nhúng vào trang HTML Khi trình duyệt yêu cầu trang, server gửi đầy đủ nội dung trang đó, bao gồm HTML 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 xử lý câu lệnh JavaScript 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 chuột, nhập vào form điều hớng trang Ví dụ bạn kiểm tra giá trị thông tin mà ngời sử dụng đa vào mà không cần đến trình truyền mạng Trang HTML với Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript JavaScript đợc nhúng kiểm tra giá trị đợc đa vào thông báo với ngời sử dụng giá trị đa vào không hợp lệ Mục đích phần giới thiệu ngôn ngữ lập trình JavaScript để bạn viết script vào 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 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 Sử dụng biểu thức JavaScript làm giá trị thuộc tính HTML Sử dụng thẻ kiện (event handlers) thẻ HTML Trong đó, sử dụng cặp thẻ nhúng file nguồn JavaScript đợc sử dụng nhiều 2.1.1.Sử dụng thẻ SCRIPT Script đợc đa vào file HTML cách sử dụng cặp thẻ Các thẻ xuất phần hay file HTML Nếu đặt phần , đợc tải sẵn sàng trớc phần lại văn đợc tải Chú ý: Ghi không đợc đặt cặp thẻ nh ghi file HTML Cú pháp JavaScript tơng tự cú pháp C nên sử dụng // Thuộc tính đợc định nghĩa thời cho thẻ LANGUAGE= dùng để xác định ngôn ngữ script đợc sử dụng Có hai giá trị đợc định nghĩa "JavaScript" "VBScript" Với chơng trình viết JavaScript bạn sử dụng cú pháp sau : // 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 đọc đợc nh ví dụ sau đây: Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript JavaScript code hidden // INSERT ALL JavaScript HERE // This is where the hidden ends > Dòng cuối script cần có dấu // để trình duyệt không diễn 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 2.1.2 Sử dụng file nguồn JavaScript Thuộc tính SRC thẻ cho phép bạn rõ file nguồn JavaScript đợc sử dụng (dùng phơng pháp hay nhúng trực tiếp đoạn lệnh JavaScript vào trang HTML) Cú pháp: Thuộc tính rấy hữu dụng cho việc chia sẻ hàm dùng chung cho nhiều trang khác Các câu lệnh JavaScript nằm cặp thẻ có chứa thuộc tinh SRC trừ có lỗi Ví dụ bạn muốn đa dòng lệnh sau vào cặp thẻ : document.write("Không tìm thấy file JS đa vào!"); 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 không đợc chứa thẻ HTML Chúng đợc chứa câu lệnh JavaScript định nghĩa hàm 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 cho phép script nhận xâu ký tự Tên file hàm JavaScript bên cần có đuôi js, server phải ánh xạ đuôi js tới kiểu MIME application/x-javascript Đó mà server gửi trở lại phần Header file HTML Để ánh xạ đuôi vào kiểu MIME, ta thêm dòng sau vào file mime.types đờng dẫn cấu hình server, sau khởi động lại server: Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript type=application/x-javascript Nếu server không ánh xạ đợc đuôi js tới kiểu MIME application/xjavascript , Navigator tải file JavaScript đợc thuộc tính SRC không cách Trong ví dụ sau, hàm 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ẻ Cặp thẻ 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ẻ bị lờ đi, đoạn mã nằm cặp thẻ đợc Navigator hiển thị Ngợc lại, trình duyệt có hỗ trợ JavaScript đoạn mã cặp thẻ đợc bỏ qua Tuy nhiên, điều xảy ngời sử dụng không sử dụng JavaScript trình duyệt cách tắt hộp Preferences/Advanced Ví dụ: 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 đợc dòng chữ bật Preferences/Advanced/JavaScript lên Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 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 Toan tin, Đạ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(): JavaScript 10 document.writeln("Two,"); document.write("Three "); document.write(" "); // STOP HIDING FROM OTHER BROWSERS > Khi duyệt đợc 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 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"); Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 89 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/ rộng Mở Kiểu Mô tả blur() cách thức Mô tả việc dịch chuyển JavaScript trỏ từ phần tử form.action cách thức Xâu chứa giá trị thuộc JavaScript tính ACTION thẻ FORM form.elemrn thuộc tính mảng chứa danh sách ts JavaScript phần tử form (nh checkbox, trờng text, danh sách lựa chọn) form.encodi ng thuộc tính xâu chứa kiểu MIME sử JavaScript 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 JavaScript tính NAME thẻ FORM form.target thuộc tính Xâu chứa tên cửa sổ đích JavaScript form submition form.submit cách thức Mô tả việc JavaScript form HTML Khoa Toan tin, Đại học Quốc gia Hà Nội submit JavaScript 90 type thuộc tính ánh xạ kiểu phần JavaScript tử form thành xâu onSubmit Thẻ kiện button thuộc HTML tính Thuộc tính kiểu cho nút bấm HTML () checkbox thuộc HTML tính Thuộc tính kiểu cho checkbox HTML () pasword thuộc HTML tính Thuộc tính kiểu cho dòng pasword HTML() radio thuộc HTML tính Thuộc tính kiểu cho nút radio HTML () reset thuộc HTML tính 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(Opti on 1Option 2) submit thuộc HTML tính Thuộc tính kiểu nút submit () text thuộc HTML tính Thuộc tính kiểu trờng form () TEXTAREA Thẻ HTML Khoa Toan tin, Đại học Quốc gia Hà Nội thẻ kiện cho việc submit Hộp thẻ cho nhiều dòng text ( defautl JavaScript 91 text ) name thuộc tính Xâu chứa tên phần tử HTML JavaScript (button, checkbox, password ) value thuộc tính Xâu chứa giá trị hiên thời JavaScript phần tử HTML(button, checkbox, password ) click() cách thức Mô tả việc kích vào JavaScript phần tử form (button, checkbox,password) onClick thuộc tính Thẻ kiện cho kiện kích JavaScript (button, checkbox, radio button, reset, selection list, submit) checked thuộc tính Giá trị kiểu Boolean mô tả JavaScript lựa chọn check(checkbox, radio button) defaultChe cked thuộc tính Xâu chứa giá trị mặc định JavaScript phần tử HTML (password, text, textarea) focus() cách thức Mô tả việc trỏ tới JavaScript phần tử (password, text, textarea) blur() cách thức Mô tả việc trỏ rời khỏi JavaScript phần tử (password, text, textarea) select() cách thức Mô tả việc lựa chọn dòng JavaScript text trờng (password, text, textarea) onFocus() Thẻ kiện Khoa Toan tin, Đại học Quốc gia Hà Nội Thẻ kiện cho kiện focus(password, selection list, text, textarea) JavaScript 92 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 tính Là số nguyên mô tả JavaScript lựa chọn thời nhóm lựa chọn (radio button) length thuộc tính Số nguyên mô tả tổng số JavaScript lựa chọn nhóm lựa chọn (radio button) dafautlSele thuộc tính Giá trị Boolean mô tả cted JavaScript có lựa chọn đợc đặt mặc định (seledtion list) options thuộc tính Mảng lựa chọn JavaScript danh sách lựa chọn text thuộc tính Dòng text hiển thị cho JavaScript 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 Khoa Toan tin, Đại học Quốc gia Hà Nội tính Là thuộc tính thẻ TD JavaScript 93 HTML mô tả ô bảng có nhiều cột ROWSPAN thuộc HTML tính Là thuộc tính thẻ TD mô tả ô bảng có nhiều hàng BODER thuộc HTML tính Là thuộc tính thẻ TABLE mô tả độ rộng đờng viền bảng document.fo thuộc tính mảng đối tợng rms[] JavaScript form với danh sách form document string.subst ring() cách thức Trả lại xâu JavaScript xâu string từ tham số vị trí ký tự đầu đến vị trí ký tự cuối Math.floor() cách thức Trả lại giá trị nguyên JavaScript nhỏ giá trị tham số đa vào string.lengt thuộc tính Giá trị nguyên số thứ h JavaScript tự ký tự cuối xâu string Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 94 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 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 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 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 Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 95 } Khi gọi hàm show_props(myCar,myCar) lên: myCar.make = Ford myCar.model = Mustang myCar.year = 69; 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ử Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 96 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 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ố 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] Lion, fish[2] Surgeon, fish[2] cha đợc định nghĩa Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 5.1.2 97 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 viế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 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 } Và sau ta tạo hai ngời mới: rank = new person(Rank McKinnon,33,M) ken = new person(Ken John,39,M) Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 98 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 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 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ự 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] Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 99 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 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 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: 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) } Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 100 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 thuộc tính form, từ khoá 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 Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 101 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 Toan tin, Đại học Quốc gia Hà Nội JavaScript 102 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 case finally new this catch float null throw char for package throws class function parseFloa transient const goto parseInt true continue if private try default implemen protected var import public void double in return while else instanceo short with ts f Khoa Toan tin, Đại học Quốc gia Hà Nội t synchriniz ed JavaScript 103 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, 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 [...]... x=x|y x|=y Bài tập 2. 1.7 Câu hỏi Hãy đánh giá các biểu thức sau: 1 a 7 + 5 Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 22 b "7" + "5" c 7 == 7 d 7 >= 5 e 7 = 5) && (5 > 5) h (7 >= 5) || (5 > 5) 2. 1.8 Trả lời Các biểu thức đợc đánh giá nh sau: 1 a 12 b "75" c true d true e true 2 f 5 g false h true Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 3 23 Các lệnh Có thể... this.sex=sex; } person1= new person("Thuy", "Dau Bich", "23 ", "Female"); person2= new person("Chung", "Nguyen Bao", "24 ", "Male"); person3= new person("Binh", "Nguyen Nhat", "24 ", "Male"); person4= new person("Hoàn", "Đỗ Văn", "24 ", "Male"); document.write ("1 "+person1.last_name+" " + person1.first_name + "" ); document.write( "2 "+person2.last_name +" "+ person2.first_name + ""); document.write("3 "+... Quốc gia Hà Nội JavaScript Khoa Toan tin, Đại học Quốc gia Hà Nội 12 JavaScript 13 Khi duyệt có kết quả: Hình2.1: Hiển thị cửa sổ nhập tên Ví dụ này hiển thị dấu nhắc nhập vào tên với phơng thức window.prompt Giá trị đạt đợc sẽ đợc ghi trong biến có tên là name Biến name đợc kết hợp với các chuỗi khác và đợc hiển thị trong cửa sổ của trình duyệt nhờ phơng thức document.write Hình 2. 2: Hiển thị lời... hợp hai chuỗi, ví dụ: "abc" + "xyz" đợc "abcxyz" 2. 1.5 Logic JavaScript hỗ trợ các toán tử logic sau đây: expr1 && expr2 Là toán tử logic AND, trả lại giá trị đúng nếu cả expr1 và expr2 cùng đúng expr1 || expr2 Là toán tử logic OR, trả lại giá trị đúng nếu ít nhất một trong hai expr1 và expr2 đúng ! expr Là toán tử logic NOT phủ định giá trị của expr 2. 1.6 Bitwise Với các toán tử thao tác trên bit,... person("Thuy", "Dau Bich", "23 ", "Female"); person2= new person("Chung", "Nguyen Bao", "24 ", "Male"); person3= new person("Binh", "Nguyen Nhat", "24 ", "Male"); person4= new person("Hoan", "Do Van", "23 ", "Male"); person1.printStats(); person2.printStats(); person3.printStats(); person4.printStats(); Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 34 1.1.1.1.1... " + numfruit + " " + "."; document.write(temp); Các trình duyệt hỗ trợ JavaScript sẽ xử lý chính xác ví dụ trên và đa ra kết quả dới đây: Trình diễn dịch JavaScript sẽ xem biến numfruit có kiểu nguyên khi cộng với 20 và có kiểu chuỗi khi kết hợp với biển temp Trong JavaScript, có bốn kiểu dữ liệu sau đây: kiểu số nguyên, kiểu dấu phẩy động, kiểu logic và kiểu... trong JavaScript có thể đợc nhóm thành các loại sau đây: gán, so sánh, số học, chuỗi, logic và logic bitwise 2. 1.1 Gán Toán tử gán là dấu bằng (=) nhằm thực hiện việc gán giá trị của toán hạng bên phải cho toán hạng bên trái Bên cạnh đó JavaScript còn hỗ trợ một số kiểu toán tử gán rút gọn Kiểu gán thông thờng x=x+y Khoa Toan tin, Đại học Quốc gia Hà Nội Kiểu gán rút gọn x+=y JavaScript 19 2. 1 .2 x=x-y... Định rõ ngôn ngữ script đợc sử dụng (JavaScript hoặc VBScript) // Ghi chú trong JavaScript Đánh dấu ghi chú một dòng trong đoạn script /* */ Ghi chú trong JavaScript Đánh dấu ghi chú một khối trong đoạn script document.writ e() cách thức JavaScript Xuất ra một xâu trên cửa sổ hiện thời một cách tuần tự theo file HTML có đoạn script đó document.writ eln() Cách thức JavaScript Tơng tự cách thức document.write()... xong tự xuống dòng alert() Cách thức của JavaScript Hiển thị một dòng thông báo trên hộp hội thoại promt() Cách thức JavaScript Hiển thị một dòng thông báo trong hộp hội thoại đồng thời cung cấp một trờng nhập dữ liệu để ngời sử dụng nhập vào Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 15 Chơng 3 Biến trong JavaScript 3.1 Biến và phân loạI biến Tên biến trong JavaScript phải bắt đầu bằng chữ hay... cập trong phạm vi chơng trình mà nó khai báo Biến cục bộ đợc khai báo trong một hàm với từ khoá var nh sau: var x = 0; Biến toàn cục có thể sử dụng từ khoá var, tuy nhiên điều này không thực sự cần thiết 3 .2 Biểu diễn từ tố trong JavaScript Từ tố là các giá trị trong chơng trình không thay đổi Sau đây là các ví dụ về từ tố: 8 The dog ate my shoe true Chú ý Khác với C, trong JavaScript không có kiểu ... hành có trình duyệt hỗ trợ JavaScript Ngoài JavaScript giống Java khía cạnh an ninh: JavaScript đọc viết vào file ngời dùng Các trình duyệt web nh Nescape Navigator 2.0 trở hiển thị câu lệnh JavaScript. .. chơng trình viết JavaScript bạn sử dụng cú pháp sau : // INSERT ALL JavaScript HERE Điểm khác cú pháp viết ghi HTML JavaScript cho phép bạn ẩn mã JavaScript. .. 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