Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

79 693 4
Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

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 chưa 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ữ đổ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, chúng hai ngôn ngữ riêng biệt JavaScript ngơn ngữ dạng script gắn với file HTML Nó khơng biên dịch mà 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ạ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 tốn học Tuy JavaScript khơng ngơn ngữ hướng đối tượng C++ hay Java không hỗ trợ lớp hay tính thừa kế JavaScript đáp ứng kiện 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 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 Ngồi JavaScript giống Java khía cạnh an ninh: JavaScript khơng thể đọc viết vào file người dùng Các trình duyệt web Nescape Navigator 2.0 trở hiển thị câu lệnh JavaScript 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 nhúng trang HTML trả lời cho kiện người sử dụng 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 q trình truyền mạng Trang HTML với JavaScript nhúng kiểm tra giá trị đư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 sử dụng nhiều 2.1.1.Sử dụng thẻ SCRIPT Script đư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 , tải sẵn sàng trước phần lại văn tải Thuộc tính định nghĩa thời cho thẻ “LANGUAGE =“ dùng để xác định ngơn ngữ script sử dụng Có hai giá trị định nghĩa "JavaScript" "VBScript" Với chương trình viết JavaScript bạn sử dụng cú pháp sau : Chú ý: Ghi không đặt cặp thẻ ghi file HTML Cú pháp JavaScript tương tự cú pháp C nên sử // 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 ví dụ sau đây: Dòng cuối script cần có dấu // để trình duyệt khơng diễn dịch dịng dạng mã JavaScript Các ví dụ chương khơng chứa đặc điểm ẩn JavaScript để mã dễ hiểu Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 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 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 định rõ địa URL, liên kết đường dẫn tuyệt đối, ví dụ: Các file JavaScript bên ngồi khơng chứa thẻ HTML Chúng chứa câu lệnh JavaScript định nghĩa hàm Chú ý Khi b ạn mu ốn ch ỉ m ột xâu trích d ẫn m ột 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 Tên file hàm JavaScript bên ngồi cần có js, server phải ánh xạ js tới kiểu MIME application/x-javascript Đó mà server gửi trở lại phần Header file HTML Để ánh xạ 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: type=application/x-javascript Nếu server khơng ánh xạ đuôi js tới kiểu MIME application/x-javascript , Navigator tải file JavaScript 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Ẻ VÀ 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ẻ Navigator hiển thị Ngược lại, trình duyệt có hỗ trợ JavaScript đoạn mã cặp thẻ 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 hp Preferences/Advanced Khoa Toan tin, Đại học Quốc gia Hµ Néi JavaScript 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 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ố cịn hiển thị trường TEXT TEXTAREA form Trong phần này, ta học cách thức write() writeln() i tng document Khoa Toan tin, Đại học Quốc gia Hµ Néi JavaScript Đố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ịn 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 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 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 cịn 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 ”); Khi duyệt có kết quả: 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 Khoa Toan tin, Đại học Quốc gia Hà Nội HỡnhHỡnh2.1: Hin th cửa người nhập 2.2: Hiển thị lời chào sổ nhập tên JavaScript 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ữ 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 dng nhp vo Khoa Toan tin, Đại học Quốc gia Hµ Néi JavaScript 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 3.3 KIỂU DỮ LIỆU Chú ý Khác v ới C, JavaScript khơng có ki ểu h ằng s ố CONST để bi ểu di ễn m ột giá tr ị 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 kt qu di õy: Khoa Toan tin, Đại học Qc 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ó bốn 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 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ạ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ạ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 (.) ã Phn d ã Phn m Khoa Toan tin, Đại häc Quèc gia Hµ Néi JavaScript 65 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 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 JavaScript tính Xâu chứa giá trị thuộc tính NAME thẻ FORM form.target thuộc tính Xâu chứa tên cửa sổ đích Khoa Toan tin, Đại học Quốc gia Hà Nội Mụ t JavaScript 66 JavaScript form submition 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 ) click() cách thức JavaScript Mô tả việc kích vào phần tử form (button, checkbox,password) onClick thuc Khoa Toan tin, Đại học Quốc gia Hà Néi tính ánh xạ kiểu phần tử form thành xâu text text tính Thẻ kiện cho kiện kích (button, JavaScript 67 JavaScript checkbox, radio button, selection list, submit) reset, 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ố ngun 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) options thuộc JavaScript tính Mảng lựa chọn danh sách lựa chọn text thuộc tính Dòng text hiển thị cho thành Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 68 JavaScript phn 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 Khoa Toan tin, Đại học Quốc gia Hà Nội tớnh Giá trị nguyên số thứ tự ký tự cuối xâu string JavaScript 69 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 JavaScript 70 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 tố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 Ngoà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 JavaScript 71 Bn 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 5.1.2 SỬ DỤNG MỘT 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 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 Khoa Toan tin, Đại häc Quèc gia Hµ Néi JavaScript 72 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 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 l myform Khoa Toan tin, Đại học Quốc gia Hà Néi JavaScript 73 bạn gọi tới form document.form[1] document.form[“myForm”] document.myForm 5.1.4 ĐỊ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 JavaScript 74 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 XOÁ ĐỐI TƯỢNG Trong JavaScript cho Navigator 2.0, bạn khơng thể xố đố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 JavaScript 75 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 JavaScript 76 TỔNG KẾT Như vậy, tài liệu giới thiêu sơ qua JavaScript, mà cịn 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ịn 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 ... dạng mã JavaScript Các ví dụ chương khơng chứa đặc điểm ẩn JavaScript để mã dễ hiểu Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 2.1.2 Sử dụng file nguồn JavaScript Thuộc tính SRC thẻ ... 1.5; Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 36 } c num = 0; while (num

Ngày đăng: 18/08/2012, 11:29

Hình ảnh liên quan

Hình 2.3: Minh hoạ thẻ NOSCRIPT - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 2.3.

Minh hoạ thẻ NOSCRIPT Xem tại trang 4 của tài liệu.
Cách thức write() xuất ra màn hình xâu Text nhưng không xuống dòng, còn cách thức writeln() sau khi viết xong dòng Text tự động xuống dòng - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

ch.

thức write() xuất ra màn hình xâu Text nhưng không xuống dòng, còn cách thức writeln() sau khi viết xong dòng Text tự động xuống dòng Xem tại trang 5 của tài liệu.
Hình 2.5: Sự khác nhau của write() và writeln() - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 2.5.

Sự khác nhau của write() và writeln() Xem tại trang 6 của tài liệu.
Hình2.1: Hiển thịc ửa sổ nhập tên - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 2.1.

Hiển thịc ửa sổ nhập tên Xem tại trang 7 của tài liệu.
Hình 2.2: Hiển thị lời cho ngà ười nhập - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 2.2.

Hiển thị lời cho ngà ười nhập Xem tại trang 7 của tài liệu.
Hình 3.1: Kết quả của xử lý dữ liệu - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 3.1.

Kết quả của xử lý dữ liệu Xem tại trang 10 của tài liệu.
Hình 5.1: Kết quả của lệnh for...loop - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 5.1.

Kết quả của lệnh for...loop Xem tại trang 18 của tài liệu.
Hình 5.2: Kết quả của lệnh for...in - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 5.2.

Kết quả của lệnh for...in Xem tại trang 20 của tài liệu.
Hình 5.3: Kết quả của ví dụ lệnh New - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 5.3.

Kết quả của ví dụ lệnh New Xem tại trang 21 của tài liệu.
Hình 5.4: Kết quả của ví dụ lệnh with - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 5.4.

Kết quả của ví dụ lệnh with Xem tại trang 22 của tài liệu.
1.1.1.1.1. Hình 8: Ví dụ về h mà - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

1.1.1.1.1..

Hình 8: Ví dụ về h mà Xem tại trang 24 của tài liệu.
Hình 5.6 Ví dụ hm Eva là - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 5.6.

Ví dụ hm Eva là Xem tại trang 25 của tài liệu.
Hình 5.7: Ví dụ parInt - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 5.7.

Ví dụ parInt Xem tại trang 26 của tài liệu.
Hình 5. 8: Kết quả của ví dụ parseFloat - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 5..

8: Kết quả của ví dụ parseFloat Xem tại trang 27 của tài liệu.
Hình 5.9: Ví dụ mảng - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 5.9.

Ví dụ mảng Xem tại trang 28 của tài liệu.
Sau đây là bảng các chương trình xử lý sự kiện có sẵn của một số đối tượng. Các đối tượng này sẽ được trình bày kỹ hơn trong phần sau. - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

au.

đây là bảng các chương trình xử lý sự kiện có sẵn của một số đối tượng. Các đối tượng này sẽ được trình bày kỹ hơn trong phần sau Xem tại trang 29 của tài liệu.
Hình 5.10: Minh hoạ cho ví dụ Event Handler - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 5.10.

Minh hoạ cho ví dụ Event Handler Xem tại trang 32 của tài liệu.
Hình 6.1: Sơ đồ 1- Phân cấp đối tượng Navigator - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 6.1.

Sơ đồ 1- Phân cấp đối tượng Navigator Xem tại trang 38 của tài liệu.
Hình 6.2: Minh hoạ cho đối tượng Navigator - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 6.2.

Minh hoạ cho đối tượng Navigator Xem tại trang 40 của tài liệu.
Hình 6.3: Minh hoạ cho đối tượng cửa sổ - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 6.3.

Minh hoạ cho đối tượng cửa sổ Xem tại trang 42 của tài liệu.
Hình 6.4: Kết quả việc tạo frame trong - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

Hình 6.4.

Kết quả việc tạo frame trong Xem tại trang 44 của tài liệu.
Bảng? .Các thuộc tính và cách thức của đối tượng radio. Thuộc tính và cách  - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

ng.

? .Các thuộc tính và cách thức của đối tượng radio. Thuộc tính và cách Xem tại trang 57 của tài liệu.
TR thẻ HTML Hộp thẻ cho các hàng của một bảng HTML - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

th.

ẻ HTML Hộp thẻ cho các hàng của một bảng HTML Xem tại trang 68 của tài liệu.
TABLE thẻ HTML Hộp thẻ cho các bảng HTML - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

th.

ẻ HTML Hộp thẻ cho các bảng HTML Xem tại trang 68 của tài liệu.
6. BẢNG TỔNG KẾT CÁC TỪ KHOÁ - Nhập môn Java Script Khoa toán tin ĐH Quốc Gia

6..

BẢNG TỔNG KẾT CÁC TỪ KHOÁ Xem tại trang 75 của tài liệu.

Từ khóa liên quan

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

  • Đang cập nhật ...

Tài liệu liên quan