giáo trình thiết kế website với javascript bản chuẩn phần 1

Trang 1/108 Giáo trình JavaScript *** CHƯƠNG LỜI NĨI ĐẦU CHƯƠNG NHẬP MÔN JAVASCRIPT 2.1.Nhúng JavaScript vào file HTML 2.3 Thẻ 2.3 Hiển thị dòng text 2.4 Giao tiếp với người sử dụng 10 2.5 Điểm lại lệnh mở rộng 13 CHƯƠNG BIẾN TRONG JAVASCRIPT 14 3.1 Biến phân loạI biến .14 3.2 Biểu diễn từ tố JavaScript 14 3.3 Kiểu liệu .14 1.1.1 KIểu nguyên (Interger) .16 1.1.2 Kiểu dấu phẩy động (Floating Point) 16 1.1.3 Kiểu logic (Boolean) 16 1.1.4 Kiểu chuỗi (String) .16 XÂY DỰNG CÁC BIỂU THỨC TRONG JAVASCRIPT 17 ĐỊNH NGHĨA VÀ PHÂN LOẠI BIỂU THỨC .17 CÁC TOÁN TỬ (OPERATOR) 17 2.1.1 Gán 17 2.1.2 So sánh 17 2.1.3 Số học 18 2.1.4 Chuỗi 18 2.1.5 Logic 19 2.1.6 Bitwise 19 BÀI TẬP 19 2.1.7 Câu hỏi .19 2.1.8 Trả lời .20 CÁC LỆNH 21 CÂU LỆNH ĐIỀU KIỆN 21 CÂU LỆNH LẶP 21 3.1.1 Vòng lặp for 22 3.1.2 while 23 3.1.3 Break 23 3.1.4 continue .23 CÁC CÂU LỆNH THAO TÁC TRÊN ĐỐI TƯỢNG .23 3.1.5 for in .24 3.1.6 new 25 3.1.7 this 26 3.1.8 with 26 Trang 2/108 CÁC HÀM (FUNCTIONS) 27 CÁC HÀM CÓ SẴN 27 3.1.9 eval 28 3.1.10 parseInt 29 3.1.11 parseFloat 29 MẢNG (ARRAY) 30 SỰ KIỆN .31 BÀI TẬP 34 3.1.12 Câu hỏi .34 3.1.13 Trả lời .35 CÁC ĐỐI TƯỢNG TRONG JAVASCRIPT 37 ĐỐI TƯỢNG NAVIGATOR 38 ĐỐI TƯỢNG WINDOW 39 4.1.1 Các thuộc tính .40 4.1.2 Các Phương thức 40 4.1.3 Các Chương trình xử lý kiện 41 ĐỐI TƯỢNG LOCATION 41 ĐỐI TƯỢNG FRAME 41 4.1.4 Các thuộc tính .41 4.1.5 Các Phương thức 41 4.1.6 Sử dụng Frame 41 ĐỐI TƯỢNG DOCUMENT 45 4.1.7 Các thuộc tính .45 4.1.8 Các Phương thức 45 ĐỐI TƯỢNG ANCHORS 45 ĐỐI TƯỢNG FORMS 46 4.1.9 Các thuộc tính .46 4.1.10 Các Phương thức 46 4.1.11 Các Chương trình xử lý kiện 46 ĐỐI TƯỢNG HISTORY 46 4.1.12 Các thuộc tính .46 4.1.13 Các Phương thức 46 ĐỐI TƯỢNG LINKS 47 4.1.14 Các thuộc tính .47 4.1.15 Các Chương trình xử lý kiện 47 ĐỐI TƯỢNG MATH 47 4.1.16 Các thuộc tính .47 4.1.17 Các Phương thức 47 ĐỐI TƯỢNG DATE 48 4.1.18 Các Phương thức 48 ĐỐI TƯỢNG STRING .49 4.1.19 Các Phương thức 49 CÁC PHẦN TỬ CỦA ĐỐI TƯỢNG FORM 49 4.1.20 Thuộc tính type 50 Trang 3/108 4.1.21 4.1.22 4.1.23 4.1.24 4.1.25 4.1.26 4.1.27 4.1.28 Phần tử button 50 Phần tử checkbox .51 Phần tử File Upload 52 Phần tử hidden 52 Phần tử Password .53 Phần tử radio 53 Phần tử reset 54 Phần tử select 55 MƠ HÌNH ĐỐI TƯỢNG (OBJECT MODEL) 56 ĐỐI TƯỢNG VÀ THUỘC TÍNH 56 TẠO CÁC ĐỐI TƯỢNG MỚI 56 5.1.1 Sử dụng khởi tạo đối Tượng 56 5.1.2 Sử dụng hàm xây dựng(Constructor Function) 56 5.1.3 Lập mục lục cho thuộc tính đối tượng 56 5.1.4 Định nghĩa thêm thuộc tính cho kiểu đối tượng 56 5.1.5 Định nghĩa cách thức 56 5.1.6 Sử dụng cho tham chiếu đối tượng (Object References) 56 5.1.7 Xoá đối tượng .56 BẢNG TỔNG KẾT CÁC TỪ KHOÁ 56 TỔNG KẾT .56 Trang 4/108 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ữ đổ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 Trang 5/108 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 Chú ý: Ghi khôn g đặt cặp thẻ 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 : // 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 2.1.2 Sử dụng file nguồn JavaScript Trang 6/108 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 Tên file hàm JavaScript bên 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ạ đ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 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 hộp Preferences/Advanced Ví dụ: Trang 7/108 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 cịn 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 tượng document Trang 8/108 Đố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. Trang 9/108 Ví dụ: Sự khác write() writeln(): Khi duyệt kết quả: Trang 10/108 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 nh sử dụng document.write() document.writeln() phần trước Ví dụ: alert("Nhấn vào OK để tiếp tục"); Khi file chờ người sử dụng nhấn vào nút OK tiếp tục thực Thông thờng, cách thức alert() 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ụ cha sẵn sàng để truy nhập liệu Trang 94/108 Trong kỹ thuật lập trình lập trình viên thường sử dụng hàm để thực đoạn chương trình thể cho module để thực cơng việc Trong Javascript có hàm xây dựng sẵn để giúp bạn thực chức ví dụ hàm alert(), document.write(), parseInt() bạn định nghĩa hàm khác để thực cơng việc bạn, để định nghĩa hàm bạn theo cú pháp sau: function function_name(parameters, arguments) { command block } Truyền tham số: function printName(name) { document.write(“Your Name is ”); document.write(name); document.write(“”); } Ví dụ: Gọi hàm printName()với lệnh sau printName(“Bob”); Khi hàm printName()được thi hành giá trị name "Bob" gọi hàm printName()với đối số biến var user = “John”; printName(user); Khi name “John” Nếu bạn muốn thay đổi giá trị name bạn làm sau : name = “Mr “ + name; Phạm vi biến: Biến toàn cục (Global variable) Biến cục (Local variable) Trả giá trị: Ví dụ: Dùng return để trả giá trị biến cube MTWRFSS function cube(number) { var cube = number * number * number; return cube; } JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 11 Ví dụ: MTWRFSS Trang 95/108 Example 4.1 Vi du: Trang 100/108 12) ? myhours 12 : myhours; ampm = (myhours >= 12) ? 'Buổ i Chiề u ' : ' Buổ i Sá ng '; mytime = mydate.getMinutes(); myminutes = ((mytime Trong phần body bạn xuất dạng sau: document.write("" + ampmhour + "" + myminutes + ampm) document.write(" - " + day + " ngà y " + myweekday +" "); document.write( month + " , nă m " + year + ""); Kent(HCE) JAVASCRIPT Toàn tập (bài 5) Bài 5: SỰ KIỆN TRONG JAVASCRIPT Các kiện cung cấp tương tác với cửa sổ trình duyệt tài liệu hành load trang web, hành động user nhập liệu vào form click vào button form Khi sử dụng quản lý kiện bạn viết hàm để biểu diễn cho hành động dựa vào kiện đựoc chọn Bảng kiện Javascript JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 16 Tên kiện Mô tả blur Xãy điểm tập trungcủa ngõ vào di chuyển khỏi thành phần Form (Khi user click trường) click Khi user Click vào link thành phần Form change Xãy giá trị Form Field bị thay đổi user focus Xãy ngõ vào tập trung vào thành phần Form load Xãy trang Load vào duyệt mouseover Xãy User di chuyển mouse qua Hyperlink select Xãy User chọn trường thành phần Form submit Xãy User xác nhận nhập xong liệu Trang 101/108 unload Xãy User rời khỏi trang Web Bộ quản lý kiện (Event Handler) Để quản lý kiện javascript ta dùng quản lý kiện Cú pháp quản lý kiện: Ví dụ: Ví dụ: Vòng lặp while : Cú pháp: While ( điều kiện) { lệnh JavaScript ; } Ví dụ: var num=1; Trang 104/108 while(num