Đang tải... (xem toàn văn)
Tài liệu Java SCRIPT
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ë ®i cã thĨ 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 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ị thc tÝnh HTML Sư dơng thỴ sù 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ẻ có thĨ xt hiƯn phÇn hay cđa 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 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 : 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 cã thĨ sư dơng // hay /* */ // 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: JavaScriptJavaScript>> 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à có thĨ dƠ hiĨu h¬n 2.1.2 Sư dơng mét file ngn 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: Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 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õ nã 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 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: 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ự type=application/x-javascript Nếu server không ánh xạ đợc đuôi js tới kiểu MIME application/x-javascript , 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 nÕu 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 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! 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 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'); 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. Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript VÝ dơ: Sù kh¸c cđa write() vµ writeln(): Khi duyÖt sÏ đợc kết quả: Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 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 råi míi tiÕp tơc thùc hiƯn 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 cha thực giao tiÕp víi ngêi sư dơng JavaScript cung cÊp mét cá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 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 Khoa Toan tin, Đại học Qc gia Hµ Néi JavaScript 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 JavaScript”JavaScript”>> var name=window.prompt(“JavaScript”>Hello! What’s your name ?”,””);s your name ?”JavaScript”>,”JavaScript”>”JavaScript”>); document.write(“JavaScript”>Hello ”JavaScript”> + name + “JavaScript”> ! I hope you like JavaScript ”JavaScript”>); Khi dut 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 Toan tin, Đạ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 vµ më réng LƯnh/Më réng SCRIPT SRC LANGUAGE // /* */ document.write() document.writeln() alert() promt() KiĨu thỴ HTML Thc tÝnh cđa thỴ SCRIPT thc tÝnh cđa thỴ SCRIPT Ghi chó JavaScript Ghi chó JavaScript c¸ch thøc JavaScript C¸ch thøc JavaScript C¸ch thøc cđa JavaScript C¸ch thøc JavaScript Khoa Toan tin, Đại học Quốc gia Hà Nội Mô tả Hộp chứa lệnh JavaScript Giữ địa file JavaScript bên File phải có phần đuôi js Định rõ ngôn ngữ script đợc sử dụng (JavaScript VBScript) Đánh dấu ghi dòng đoạn script Đánh dấu ghi khối đoạn script Xuất xâu cửa sổ thời cách theo file HTML có đoạn script Tơng tự cách thức document.write() nhng viết xong tự xuống dòng Hiển thị dòng thông báo hộp hội thoại 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 JavaScript 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 cã thĨ lµ mét 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 sử dụng từ khoá var, nhiên điều không thực 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 c¸c 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ác trình duyệt hỗ trợ JavaScript xử lý xác ví dụ đa kết dới đây: Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 10 Trình diễn dịch JavaScript sÏ 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 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) - cã thĨ 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Ư c¬ 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.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: Phần nguyên thập phân Dấu chấm thập phân (.) Phần d Hình 3.1: Kết xử lý liệu Phần mũ Để phân biệt kiểu dấu phẩy động với kiểu số nguyên, phải có nhÊt mét ch÷ sè theo sau dÊu chÊm hay E Ví dụ: 9.87 -0.85E4 9.87E14 98E-3 Khoa Toan tin, Đại häc Quèc gia Hµ Néi ... LANGUAGE= “JavaScript”>JavaScript”JavaScript”>> var name=window.prompt(“JavaScript”>Hello! What’s your name ?”,””);s your name ?”JavaScript”>,”JavaScript”>”JavaScript”>); document.write(“JavaScript”>Hello... HTML Thc tÝnh cđa thỴ SCRIPT thc tÝnh cđa thỴ SCRIPT Ghi chó JavaScript Ghi chó JavaScript c¸ch thøc JavaScript C¸ch thøc JavaScript C¸ch thøc cđa JavaScript C¸ch thøc JavaScript Khoa Toan tin,... 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: JavaScript”JavaScript”>>
