Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở điVà kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này
Chương 11 Nền tảng JavaScript Mục tiêu: Kết thúc chương này, bạn có thể: Hiểu rõ JavaScript Nắm vững kiến thức cú pháp JavaScript Giới thiệu JavaScript ngôn ngữ script dùng để tạo script máy client máy server Các script máy client thực thi trình duyệt script máy server lại thực server Chương học giới thiệu cho viên giới Javascript cách chèn script vào tài liệu HTML 13.1 Giới thiệu Javascript HTML lúc đầu phát triển định dạng tài liệu dùng để chuyển liệu Internet Tuy nhiên, không lâu sau đó, trọng tâm HTML nặng tính hàn lâm khoa học dần chuyển hướng vào người dùng thường nhật ngày người dùng xem Internet nguồn thông tin giải trí Các trang Web ngày mang tính sáng tạo đẹp mắt nhằm thu hút nhiều người dùng Nhưng thực chất kiểu nội dung bên cố định Và người dùng điều khiển trang Web hiển thị Javascript phát triển giải pháp cho vấn đề nêu Javascript ngôn ngữ script thật quan trọng Sun Microsystems Netscape phát triển Nó dùng để tạo trang Web động tương tác Internet Đối với người phát triển HTML, Javascript hữu ích việc xây dựng hệ thống HTML tương tác với người dùng 13.1.1 JavaScript gì? Sun Microsystems phát minh thành ngôn ngữ phức tạp mạnh mẽ mà biết ngôn ngữ Java Mặc dù Java có tính khả dụng cao lại phù hợp nhà lập trình có kinh nghiệm cho công việc phức tạp Netscape Communications thấy nhu cầu ngôn ngữ ‘nửa nửa kia’ - ngôn ngữ cho phép cá nhân thiết kế trang Web có khả tương tác với người dùng với Java applets đòi hỏi phải có kinh nghiệm lập trình tối thiểu LiveScript ngôn ngữ phát thảo thực tế, lại khiến cho người ta tin ‘bắt cầu’ cho ý tưởng tốt LiveScript thiết kế theo tinh thần nhiều ngôn ngữ script đơn giản lại có tính khả dụng cao thiết kế đặc biệt để xây dựng trang Web (chẳng hạn HTML form tương tác) Để giúp ‘bán chạy’ ngôn ngữ này, Netscape hợp tác với Sun cho đời ngôn ngữ Javascript Trên thực tế, Microsoft người tiên phong thực thi phiên Javascript (còn có tên Jscript), họ chưa tham chiếu đến đặc tả thức Javascript Mục tiêu JavaScript nhằm cung cấp cho nhà phát triển trang Web số khả điều khiển chức trang Web Mã Javascript có khả nhúng tài liệu HTML để điều khiển nội dung trang Web xác nhận tính hợp lý liệu mà người dùng { PAGE } nhập vào Khi trang hiển thị trình duyệt, câu lệnh trình duyệt thông dịch thực thi Định nghĩa JavaScript ngôn ngữ script dựa đối tượng nhằm phát triển ứng dụng Internet dựa client server Các ứng dụng client chạy trình duyệt Netscape Navigator Internet Explorer, ứng dụng server chạy Web server Microsoft’s Internet Information Server Netscape Enterprise Server 13.1.2 Hiệu ứng quy tắc JavaScript JavaScript ngôn ngữ lập trình có khả nhúng trang HTML Làm thật hữu ích JavaScript nâng cao tính động khả tương tác web-site cách sử dụng hiệu ứng việc cho phép thực phép tính, kiểm tra form, viết trò chơi, bổ sung hiệu ứng đặc biệt, tuỳ biến chọn lựa đồ hoạ, tạo mật bảo mật Chúng ta sử dụng JavaScript để: Cung cấp tương tác với người dùng Chúng ta viết mã nhằm đáp trả kiện Các phát sinh người dùng - - nhấp chuột làm phát sinh từ hệ thống - - định lại kích thước trang v.v Thay đổi nội dung động Mã JavaScript dùng để thay đổi nội dung vị trí phần tử cách động trang nhằm đáp trả tương tác với người dùng Kiểm tra tính hợp lệ liệu Chúng ta viết mã nhằm kiểm tra tính hợp lệ liệu người dùng nhập vào trước đệ trình (submit) lên Web server để xử lý Giống ngôn ngữ khác, JavaScript tuân thủ số quy tắc ngữ pháp Việc nắm vững quy tắc ngữ pháp giúp ta đọc script tự viết script không bị lỗi Một số luật bao gồm: Dùng Caps JavaScript phân biệt kiểu chữ (nghĩa là, chữ hoa chữ thường khác Javascript) Dùng Pairs Trong JavaScript, luôn có cặp ký hiệu mở đóng Lỗi xuất bỏ sót đặt sai hai ký hiệu Dùng Spaces (các ký tự trắng) Như HTML, JavaScript thường bỏ qua ký tự trắng Trong script JavaScript, ta thêm vào ký tự trắng tab khiến cho ta dễ dàng đọc sửa file văn script Dùng Chú thích (Comments) Các dòng thích đặt cho ta dễ dàng ghi việc mà script thực thời gian mà script tạo tạo Mặc dù client-side JavaScript server-side JavaScript có ngôn ngữ nhau, chúng có thêm tính phụ để thích ứng với môi trường Nghĩa là, client-side JavaScript bao gồm đối tượng xác định trước sử dụng trình duyệt mà thôi, Server-side JavaScript bao gồm đối tượng chức xác định trước sử dùng ứng dụng phía server (server-side applications) 13.1.3 Các công cụ JavaScript IDE, môi trường thực thi { PAGE } Các công cụ sinh mã JavaScript IDE giúp tạo mã JavaScript hữu hiệu Trong phạm vi từ hộp thoại (dialog-box) đến menu (trình đơn bật lên phân cấp) remote Các công cụ giúp ta nhanh chóng phát triển website Một vài công cụ JavaScript IDE đề cập đây: Dialog Box Công cụ tự động tạo mã mà cần thêm vào hộp thoại tuỳ biến trình duyệt (alert, confirm, prompt, v.v.) cho website ta nhìn cho mang vẻ chuyên nghiệp Pop-up Menu builder Vào tuỳ chọn công cụ tự động tạo menu bật lên trực tiếp trình duyệt Remotes Tự động phát sinh mã mà cần mở cửa sổ bật-lên remote cách sử dụng JavaScript Như thảo luận, JavaScript dùng client-side serverside Khi thực script cho client-side, JavaScript thực thi client-side trình duyệt người dùng thực mở trang Web Trong trường hợp viết script cho server-side, thực thi server JavaScript Web Server Chúng ta nhúng lệnh JavaScript vào tài liệu HTML thực thi server Quá trình tạo ứng dụng server-side trình hai giai đọan Các trang HTML có chứa câu lệnh JavaScript client-side server-side tạo với file JavaScript Tất file biên dịch thành định dạng thực thi mã byte Khi trình duyệt client đòi hỏi tính thực thi, chế thực thi (run-time engine) thi hành câu lệnh JavaScript server-side trả trang HTML cho trình duyệt Một số công dụng script server-side bao gồm: Kết nối vào sở liệu Chia sẻ thông tin cho người dùng ứng dụng Truy cập vào hệ thống file server 13.1.4 Nhúng JavaScript vào trang Web Chúng ta có thẻ chèn lệnh JavaScritp vào tài liệu HTML theo cách sau đây: Nhúng câu lệnh trực tiếp vào tài liệu cách sử dụng thẻ Liên kết file nguồn JavaScript với tài liệu HTML Dùng biểu thức JavaScript giá trị thuộc tính thẻ HTML Dùng trình xử lý kiện số thẻ HTML khác Chúng ta có xem chi tiết số ví dụ sau đây: Dùng thẻ SCRIPT Mã JavaScript cụ thể nhúng vào tài liệu HTML có dùng thẻ SCRIPT Chúng ta nhúng nhiều script vào tài liệu miễn script nằm thẻ SCRIPT Khi trình duyệt gặp phải thẻ đọc dòng nội dung kết thúc thẻ đóng Tiếp đến kiểm tra lỗi lệnh JavaScript Nếu gặp phải lỗi, cho hiển lỗi chuỗi hộp cảnh báo (alert boxes) lên hình Nếu trường hợp lỗi, câu lệnh biên dịch cho máy tính hiểu lệnh { PAGE } Cấu trúc đoạn JavaScript: Ngôn ngữ script ngôn ngữ mà trình duyệt cần sử dụng để hiểu script Khi xác định ngôn ngữ script, cần phải xác định rõ phiên JavaScript sử dụng Ví dụ: thẻ thích Những thẻ dùng để báo cho trình duyệt bỏ qua câu lệnh chứa thẻ < ! cho biết thẻ thích mở //- > ám thẻ thích đóng Đây thẻ tuỳ chọn thực tiễn nên có chúng script Chỉ có Netscape 2.0 phiên trình duyệt hỗ trợ JavaScript Các thẻ thích thường dùng để đảm bảo phiên trước trình duyệt trình duyệt không hỗ trợ JavaScript bỏ qua câu lệnh nhúng tài liệu HTML Trong ví dụ sau đây, ngôn ngữ script thiết lập JavaScript Các thẻ thích dùng để phiên cũ trình duyệt bỏ qua script nằm thẻ thích Các phiên trình duyệt thực thi câu lệnh JavaScript Các câu lệnh JavaScript phải kết thúc dấu chấm phẩy ( ;) Ví dụ 1: document.write("Welcome to the world of JavaScript"); // Script hiding ends here > Enjoy the learning experience!!! Kết quả: { PAGE } Hình 13.1: Dùng JavaScript Trên lý thuyết câu lệnh JavaScript đặt nơi tài liệu HTML Tuy nhiên, để lập trình tốt nên đặt câu lệnh script phần Điều đảm bảo tất mã đọc giải mã trước gọi từ phần BODY Dùng file Thường câu lệnh JavaScript nhúng tài liệu HTML Tuy nhiên, tạo file có chứa mã JavaScript File liên kết với tài liệu HTML Khi thuộc tính SRC (source) thẻ SCRIPT dùng kèm theo theo file Khi xác định file nguồn, ta dùng tên đường dẫn tương đối tuyệt đối thuộc tính SRC File file văn có chứa mã JavaScript tên file mã kết thúc đuôi ".js" File mã chứa câu lệnh JavaScript định nghĩa hàm Chúng ta bổ sung thẻ HTML vào file JavaScript Trong ví dụ sau đây, có hai file tạo File thứ - “test.htm” file tài liệu HTML File thứ hai - “test.js” file văn có thứa mã JavaScript File liên kết với file tài liệu HTML Ví dụ 2: File HTML: (test.htm) Enjoy the learning experience!!! File nguồn JavaScript: (test.js) document.write("Hi! How are you?") Kết quả: { PAGE } Hình 13.2: Dùng JavaScript – File Chú ý: Lưu lại file test.htm test.js thư mục Đây ví dụ đơn giản để mô tả tính liên kết file Tuy nhiên, việc thực chức liên kết file thực tế thu ta muốn chia sẻ hàm cho nhiều tài liệu HTML Trong trường hợp này, tạo file js với hàm thông thường File liên kết với tài liệu yêu cầu Nếu ta muốn điều chỉnh thêm vào hàm cần phải thực số thay đổi cần thiết file mà thay số tài liệu HTML Đuôi js phải server ánh xạ đến kiểu MINE application/x-javascript Server lúc gởi lại phần đầu giao thức HTTP Hậu tố ánh xạ đến kiểu MIME cách cộng dòng mine.type file cấu hình server Chúng ta khởi động lại server type=application/x-javascript exts=js Nếu server không ánh xạ đuôi (hậu tố) js đến application/x-javascript MIME trình duyệt không tải file JavaScript xác định thuộc tính SRC Dùng biểu thức JavaScript phạm vi giá trị thuộc tính thẻ HTML Chúng ta có thẻ dùng biểu thức JavaScript làm giá trị thuộc tính HTML Các giá trị đánh giá động tài liệu tạo trình duyệt Cú pháp thực thể JavaScript là: & {biểu thức}; Biểu thức biểu thức JavaScript định giá trị: Chẳng hạn ta định nghĩa biến độ rộng dòng Chúng ta dùng biến để xác định độ rộng đường ngang trang Web Trong ví dụ sau đây, giá trị độ rộng dòng 10: Ví dụ 3: var linewidth = 10; Using entities { PAGE } Khi mã thực thi, phần tử HR dùng giá trị cuả biến linewidth minh họa hình 13.3 Hình 13.3: Dùng thực thể JavaScript Một biểu thức JavaScript sử dụng bên phía phải cặp tên/giá trị (name/value pair) Chẳng hạn dùng HR WIDTH=”&{linewidth};%” câu lệnh dịch là: Nếu sử dụng &{myTitle};, chuỗi &myTitle; hiển thị thay giá trị biến myTitle Dùng JavaScript trình xử lý kiện Chúng ta tạo trình xử lý kiện cho thẻ HTML dùng mã JavaScript Một kiện hoạt động hỗ trợ đối tượng Một trình xử lý kiện mã script đuợc thực thi nhằm đáp trả sư kiện Cú pháp là: TAG thẻ HTML Event handler tên trình xử lý kiện, mã loạt câu lệnh JavaScript thực thi kiện kích hoạt Trong ví dụ sau đây, kiện onClick đựơc kích hoạt người dùng nhấp vào phần tử BUTTON Trình xử lý kiện gọi để đáp trả kiện Trình xử lý kiện có chứa mã JavaScript thực thi trình duyệt Ví dụ 4: function greeting () { alert ("Hi There !!"); } { PAGE } Kết quả: Hình 13.4: Dùng JavaScript - Alert 13.1.5 Ví dụ đơn giản sử dụng hộp thông báo phương thức write Trong ví dụ minh họa đây, hướng dẫn cách sử dụng confirm, alert phương thức write Ví dụ 5: confirm ("Are you Sure?"); alert("OK"); document.write(" Thank You !"); Kết quả: { PAGE } Hình 13.5: Dùng JavaScript – Confirm, Alert Write 13.2 Các biến (Variables) Biến giá trị chứa tham chiếu đến vị trí nhớ Nó dùng để chứa giá trị thay đổi script thực thi Chúng ta phải gán tên cho biến Chẳng hạn ta tạo biến có tên First Đối với thực thể mới, biến chứa giá trị Khi muốn xem giá trị biến thay đổi giá trị biến cần dùng tên biến Các biến thường có quy ước đặt tên sau: Tên biến phải bắt đầu chữ ký tự gạch ("_") Tên biến chứa chữ số JavaScript phân biệt rõ chữ hoa chữ thường, chữ bao gồm ký tự từ "A" đến "Z" (chữ hoa) ký tự từ "a" đến "z" (chữ thường) Khai báo biến Sử dụng từ khóa ‘var’ để khai báo biến Biến hình thành lần sử dụng Chúng ta khởi tạo biến khai báo sau script var A = 10; Chúng ta khai báo biến cách gán giá trị cho A = 10 Chúng ta khai báo nhiều biến dòng cách tách tên biến dấu phẩy Đây số ví dụ biến: var new_amount var answer = null var old_cost = 12.50 var result = ‘Unknown result’ result = true Phạm vi biến Biến có phạm vị xác định nơi mà chúng khai báo script Nếu khai báo biến bên hàm, xem biến global (toàn cục) truy cập nơi đâu script Nếu ta khai báo biến hàm, xem biến local (cục { PAGE } bộ) sử dụng hàm mà Những hàm khác script truy xuất vào biến Hình 13.6 minh họa phạm vi biến script The Script Có thể truy cập Function1, Function2, and Function3 Global variable Function1 Local variable a Function3 Local variable c Function2 Local variable b Hình 13.6: Phạm vi biến (variables) Các biến toàn cục không cần thiết phải khai báo có sử dụng var Tuy nhiên, biến cục luôn khai báo có sử dụng var Literals Theo cách gọi tên, literals giá trị cố định mà ta dùng script Giá trị literal không thay đổi trình thực script 13.3 Các kiểu liệu JavaScript có tập hợp kiểu liệu sau: Kiểu liệu Numbers Logical Boolean Strings Null Mô tả Các số nguyên số thực Ví dụ: 487 25.95 True False “Hello World” Keyword đặc biệt giá trị không JavaScript phân biệt chữ hoa chữ thường; null không giống Null NULL Dữ liệu luôn thuộc kiểu Các biến thường tiếp nhận kiểu liệu chứa chúng thay đổi kiểu kiểu liệu chúng thay đổi Khi khai báo biến kiểu liệu biến không xác định Các kiểu liệu tự động biến đổi cần thiết suốt trình thực thi script Ví dụ: var x = 10 Sau đó, gán trị chuỗi vào biến x script: X = “Are you having fun?” Ví dụ 6: var x = 10; document.write(x); { PAGE } Figure 13.17: JavaScript: Sắp xếp mảng (Sorting Arrays) Các mảng nhiều chiều Một mảng có nhiều chiều Ví dụ, ta tạo mảng hai chiều để lưu trữ mã nhân viên tên nhân viên Second Dimension Employee First Dimension Array Index Ryan Dias Mike Donne Joe Dean Robert Matey Code 001 002 003 004 005 Hình 13.18: Adding dimension Đoạn mã tạo mảng hai chiều cho hiển thị giá trị phần tử mảng Ví dụ 17: Kết quả: Figure 13.19: Mảng hai chiều (Two dimensional Array) 13.7 Các câu lệnh điều kiện Câu lệnh điều kiện dùng để kiểm tra điều kiện Kết xác định câu lệnh khối lệnh thực thi Trong JavaScript câu lệnh sau dùng kiểm tra điều kiện: { PAGE } Câu lệnh if else Câu lệnh dùng để thực thi điều kiện dựa đánh giá biểu thức Nếu điệu kiện true khối lệnh thực thi if (condition) { statements; } Ta xác định khối lệnh cần thực thi điều kiện đánh giá false sử dụng mệnh đề else if (condition) { statements; } else { statements2; } Nếu điều kiện có giá trị tính false khối lệnh sau mệnh đề else thực thi Lệnh switch Nếu ta có nhiều tuỳ chọn If else tốt nên sử dụng lệnh switch Lệnh xem lệnh case, lệnh switch thực thi khối lệnh tuỳ thuộc vào giá trị biểu thức Nếu không kết hợp lệnh khối mặc định thực thi Lệnh break; dùng để ngăn trường hợp bên tương ứng lệnh thực thi switch (expression){ case label : statement; break; case label : statement; break; default : statement; } Ví dụ, switch (dayofweek){ case : statements; break; case : statements; break; case : statements; break; { PAGE } case : statements; break; case : statements; break; default : statements; } 13.8 Các lệnh vòng lặp Các cấu trúc điều khiển lặp lại chương trình gọi vòng lặp Có nhiều loại vòng lặp: - vòng lặp dùng để lặp lại lệnh điều kiện False vòng lặp dùng để lặp lại lệnh điều kiện True vòng lặp dùng để lặp lại số lần cụ thể lệnh Vòng lặp “for” Lệnh for lệnh mạnh phức tạp tất cấu trúc điều khiển luồng JavaScript Vòng lặp for thực lại khối lệnh điều kiện false Cụ thể số lần vòng lặp lặp lại tuỳ thuộc vào biến đếm lệnh for bao gồm ba thamsố, phân biệt dấu chấm phẩy (;) Tất ba tham số tuỳ chọn chúng điều khiển thực vòng lặp for (initial-statement; condition; increment) { statements; } Lệnh khởi tạo thực thi lần dùng để khởi tạo biến đếm Lệnh điều kiện tập điều kiện ràng buộc vòng lặp Lệnh tăng cập nhật biến đếm vòng lặp Trong ví dụ trên, người dùng nhấp chuột nút, kiện onclick kích Hàn “doloop()’ gọi kiện onclick Hàm gán thẻ với thuộc tính “align = center” width Phương thức open dùng để mở tài liệu Lệnh lặp “for” khởi tạo kích cỡ biến gán giá trị khởi tạo Mỗi vòng lặp thực hiện, giá trị tăng lên đơn vị giá trị 100 Trong vòng lặp, biểu thức tính toán vẽ đường ngang với độ rộng (width) xác định viết kết trang HTML Biểu thức vẽ sau Ví dụ 18: function doloop() { var String1 = '[...]... “false” re = /Time/ str = re.test ("Time and Tide wait for none"); window.alert(str); < /HTML> Kết quả: Hình 13.14: JavaScript: Biểu thức Ví dụ 14: Đoạn mã sau đây tìm kiếm sự xuất hiện của ký tự x, y hoặc z re = /[xyz]/ str = re.exec("It is very coooooold"); window.alert(str); < /HTML> ... được dùng xác nhận tham số xem đối số không phải là số (NaN-Not a Number) isNaN(testValue) Tạo hàm do người dùng định nghĩa Môt hàm JavaScript khá giống với "procedure" hoặc chương trình con "subroutine" trong ngôn ngữ lập trình Một hàm là một tập các câu lệnh, mà nó thực hiện các tác vụ xác định Chúng ta có thể truyền các giá trị (tham số)0 vào một hàm Một hàm cũng có thể trả về một giá trị Các thành... khi chúng ta gọi hàm, chúng ta phải định nghĩa nó trong chương trình Định nghĩa một hàm là một tiến trình khai báo tên của hàm và định ra các thủ tục cần thiết tiến hành khi hàm được gọi Gọi một hàm To execute a function, we have to “call” it To call a function we have to specify the name followed by a list of arguments, if any: Ví dụ 20: =3 && seconds Welcome to Aptech Limited < /html> Kết quả: b_color + Figure 13.12: JavaScript:... < /html> Kết quả: b_color + Figure 13.12: JavaScript: Toán tử Logic typeof Toán tử typeof trả về chuỗi cho biết kiểu toán hạng Ví dụ 12: { PAGE } < /html> Toán tử typeof sẽ trả về: số Kết quả: Figure 13.13: JavaScript: Toán tử typeof 13.4.6 Mức ưu tiên của các toán tử Khi có nhiều toán tử... Tuy nhiên, chúng ta không thể biến một chuỗi thành một số Nếu chúng ta cộng một số thực 7.5 với một chuỗi là "12" thì kết quả sẽ là 127.5 Ví dụ 7: var A = "12" + 7.5; document.write(A); < /HTML> Kết quả: { PAGE } Figure 13.8: JavaScript: variables (1) Trong JavaScript có hàm parseInt() và parseFloat() có chức năng chuyển đổi các chuỗi... đoạn mã tạo ra một một mảng và gán giá trị vào các phần tử của mảng Ví dụ 15: { PAGE } < /html> Kết quả: Hình 13.16: JavaScript: Mảng Truy cập các phần tử mảng Có hai... của mảng Phương thức sắp xếp Phương thức emp.sort () sắp xếp mảng Ví dụ 16: < /html> Kết quả: { PAGE } Figure 13.17: JavaScript: Sắp xếp các mảng (Sorting... hiện, giá trị tăng lên 5 đơn vị cho đến giá trị 100 Trong vòng lặp, biểu thức được tính toán và vẽ một đường ngang với độ rộng (width) xác định và viết kết quả ra trang HTML Biểu thức vẽ như sau Ví dụ 18: function doloop() { var String1 = '