Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 17 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
17
Dung lượng
428,59 KB
Nội dung
Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 1 Trường Đại Học Bách Khoa Tp.HCM CHƯƠNG IV DHMTL & LẬP TRÌNH WEB CHẠY Ở CLIENT Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 2 GIỚI THIỆU HỆ THỐNG WEB • Mơ hình hoạt động: Web browser/Web server Web client Web server HTTP Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 3 GIỚI THIỆU HỆ THỐNG WEB z Web server: chương trình quảnlýmộtcâythứ bậc các trang Web và phụcvụ u cầutruyxuất chúng từ các client từ xa. z Web Browser: chương trình giao tiếpvớingười dùng, nhận u cầutừ user rồitruyxuất trang Web ở server tương ứng để phân giảivàhiểnthị nội dung lên màn hình. z Trang Web: đơnvị gởinhậngiữa Web server và Web client, nó là 1 file vănbản đượcviếtbằng ngơn ngữ HTML z Web browser và web server sẽ tạo1 cầunốiTCP để trao đổi thơng tin, server lắng nghe ở port 80 (port mặc định) và dùng giao thức HTTP (HyperText Transfer Protocol). Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 4 CẤU TRÚC MỘT GIAO DỊCH HTTP 1.0 z Bước 1: HTTP client mở kếtnối đến HTTP server z Bước 2: HTTP client gửi request message đến HTTP server z Bước3: HTTP server trả response mesage về cho HTTP client, chứa resource mà HTTP client u cầu z Bước4: HTTP server đóng kếtnối z Ví dụ Client: GET /path/file.html HTTP/1.0 From: someuser@jmarshall.com User-Agent: HTTPTool/1.0 [blank line here] Server: HTTP/1.0 200 OK Date: Fri, 31 Dec 1999 23:59:59 GMT Content-Type: text/html Content-Length: 1354 [blank line here] <html> … </html> Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 5 GIỚI THIỆU VỀ LẬP TRÌNH WEB z Các đặc điểmcủa ứng dụng web – Khơng phảilàmột ứng dụng độclập, là ứng dụng chạy trên nền web-server. – Ngườilậptrìnhcóthể thựchiện các thao tác trên ứng dụng web như vớimột ứng dụng độclập. – Có thể lấy thơng tin từ user. Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 6 HTML – HyperText Markup Language z Là một ngơn ngữđánh dấu siêu vănbản. z Sử dụng các thẻ (tag) để định dạng: vănbản, đoạn văn, hình ảnh, file âm thanh, Java applet, đốitượng như file Word, Excel, JavaBean… z Chophépchèncácđoạnmãscript như JavaScript thựcthitại trình duyệt (browser). z Là định dạng chuẩnchotrangweb. – Mở rộng: XML, WSDL/SOAP… Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 7 CÁC CƠNG CỤ TẠO TRANG WEB z Microsoft Visual InterDev 6 – HTML, ASP… z Microsoft Visual Studio.NET 2003 – HTML, ASP.NET, ASP.NET Webservice, C#, C++… z Microsoft Frontpage – HTML… z Jbuilder – HTML, JSP, Java Servlet, Java EJB… z Macromedia Dreamweawer MX 2004 – HTML, ASP, JSP, ASP.NET… z EditPlus z Notepad/Wordpad/Unix VIM Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 8 HTML – HyperText Markup Language Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 9 HTML – HyperText Markup Language Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 10 HTML – HyperText Markup Language z FORMs – Cấutrúccơ bảncủamột form <FORM ACTION=“file" METHOD={GET|POST}> [<INPUT TYPE=“” NAME=“” VALUE="">]+ </FORM> – Các loại (type) INPUT z TEXT: là textbox dùng để nhậpdữ liệu. – Cú pháp: <INPUT [TYPE=TEXT] NAME="text-id" [SIZE=nn] [MAXLENGTH=nn] [VALUE="default text"]> Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 11 HTML – HyperText Markup Language z FORMs(tt) – Các loại (type) INPUT z SUBMIT: truyềndữ liệuform đến ứng dụng web – Cú pháp: <INPUT TYPE=SUBMIT [NAME="button-id"] [VALUE="text"] > z RESET:đưanội dung củaform trở về giá trị ban đầu – Cú pháp: <INPUT TYPE=RESET [VALUE=“text"]> z BUTTON: nút nhấnbấtkỳ – Cú pháp: <INPUT TYPE=BUTTON [NAME="button-id"] [VALUE="text"] > Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 12 HTML – HyperText Markup Language z FORMs(tt) – Các loại (type) INPUT z RATIO: chọnlựamột trong nhiều – Cú pháp: <INPUT TYPE=RADIO NAME="radio-set-id" VALUE="choice-id" [checked] > <input type="radio" value="V1" checked name="R1">Option 1 <br><input type="radio" value="V2" name="R1">Option 2 <br><input type="radio" value="V3" name="R1">Option 3 Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 13 HTML – HyperText Markup Language z FORMs(tt) – Các loại (type) INPUT z CHECKBOX: lựachọnmộthoặc nhiều – Cú pháp: <INPUT TYPE=CHECKBOX NAME="id" VALUE="choice-id" [CHECKED] > – Ví dụ: <input type="checkbox" name="C1“ value="ON">Check 1 <br> <input type="checkbox" name="C1" value="ON" checked>Check 2 Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 14 HTML – HyperText Markup Language z FORMs(tt) – Các loại (type) INPUT z HIDDEN: dữ liệu khơng hiểnthị – Cú pháp: <INPUT TYPE=HIDDEN NAME="id" VALUE="data" > – Nhập vùng vănbản: TEXTAREA z <TEXTAREA NAME="id" [COLS=nn] [ROWS=nn]>default text</TEXTAREA> Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 15 HTML – HyperText Markup Language z FORMs(tt) z FORMs(tt) – Lựachọn listbox: SELECT z <SELECT NAME="id" [SIZE=nn] [MULTIPLE]> [<OPTION [VALUE=“value"] [SELECTED]>text ]+ </SELECT> <select size="1" name="D1"> <option value="501097">Mạng máy tính</option> <option value="501016">Lậptrìnhmạng</option> </select> Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 16 LẬP TRÌNH WEB Ở CLIENT z Các trang HTML có thểđượclậptrìnhđể thựchiện các thao tác thực thi trên web client. z Các phương pháp phổ biến để lậptrìnhhiệnnay: – Script (Javascript, Vbscript) – Java Applet – ActiveX Control Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 17 LẬP TRÌNH WEB Ở CLIENT z Cú pháp cho một đoạn code Javascript <script language=“JavaScript”> //các khai báo biến [var variable;]* //các lệnh gọi hàm và các hàm function function-name([agrv]*){ //các câu lệnh khai báo và thựcthi [return [value];] } </script> z Sử dụng file Javascript (*.js) đãcó <script language="JavaScript" src="*.js"></script> Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 18 LẬP TRÌNH WEB Ở CLIENT z Các đốitượng đượcxâydựng sẵn trong JavaScript – window: chứa các thuộc tính liên quan đếncửasổ hiệnthời – document: chứa các thuộc tính trong trang web – location: các thuộc tính vềđịachỉ trang web – history: các thuộctínhvề vị trí mà web browser đã đến z Mỗiphầntử trong trang HTML đềucóthể coi là một đối tượng, có thể khai báo sự kiện để gọi hàm Javascript. – Cú pháp <tags-name [properties]* [event-name=“procedure call”]*> Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 19 LẬP TRÌNH WEB Ở CLIENT – Các sự kiệncóthể dùng z onClick: click chuộtvàođốitượng. z onFocus: focus vào đốitượng trong form. z onMouseOver: di chuyểnchuột vào trên đốitượng. z onMouseOut: di chuyểnchuộtrakhỏi đốitượng. z onChange: thay đổigiátrị của các đốitượng chứavănbản. z onBlur: chuyển focus khỏi đốitượng trong form. z onSelect: chọnphầntử trong listbox. z onLoad: xảyrakhimộtdocument được load. Trường Đại Học Bách Khoa Tp.HCM Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 20 LẬP TRÌNH WEB Ở CLIENT z Kiểmtraphầntử SELECT var select_value; function dropDownMenu() { var myindex=document.forms[0].menu.selectedIndex; if (myindex==0) { alert("\nYou must make a selection from the drop-down menu."); document.forms[0].menu.focus(); } else { select_value =document.forms[0].menu.options[myindex].value; return true; } } [...]... – – http://javascript.internet.com/ http://www.dynamicdrive.com/ Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 32 Trường Đại Học Bách Khoa Tp.HCM TỔNG KẾT Giới thiệu hệ thống Web Giới thiệu lập trình Web Lập trình Web phía Client – – Javascript DHTML Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 33 ... quyền ®2005- Khoa Công Nghệ Thông Tin Trang 31 Trường Đại Học Bách Khoa Tp.HCM TÀI LIỆU THAM KHẢO THÊM HTML Homepage on W3C – http://www.w3.org/MarkUp/ HTML ver 4. 0 – http://www.w3.org/TR/REC-html40/ HTML Form – http://www.w3.org/TR/REC-html40/interact/forms.html Dave Raggett’s Introduction to HTML – – – http://www.w3.org/MarkUp/Guide/Overview.html http://www.w3.org/MarkUp/Guide/Advanced http://www.w3.org/MarkUp/Guide/Style.html... Trang 27 Trường Đại Học Bách Khoa Tp.HCM LẬP TRÌNH WEB CHẠY Ở CLIENT Java Applet – – – – Là một ứng dụng được viết bằng Java, nhúng trong trang HTML Khi trang HTML có chứa tag applet được gọi, class applet được tải về máy client và thực thi trên máy client Một ứng dụng applet phải thừa kế class java.applet.Applet Có thể thực hiện các thao tác như một chương trình Java, tuy nhiên bị hạn chế một số chức... thực thi khi applet kết thúc ActiveX Control – Tương tự như Java Applet, được viết bởi các cơng nghệ của Mircosoft Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 29 Trường Đại Học Bách Khoa Tp.HCM LẬP TRÌNH WEB CHẠY Ở CLIENT //file SampleApplet.java import java.applet.*; import java.awt.*; public class SampleApplet extends Applet { String text = "error"; int x = 0; int y = 20; public void init() {... public void paint(Graphics g) { g.setFont(new Font("TimesRoman",Font.BOLD+ Font.ITALIC,36)); g.drawString(text,x,y); } } Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 30 Trường Đại Học Bách Khoa Tp.HCM LẬP TRÌNH WEB CHẠY Ở CLIENT Using the Applet Tag An Applet that Displays Text at a Designated Location ...Trường Đại Học Bách Khoa Tp.HCM LẬP TRÌNH WEB Ở CLIENT Kiểm tra thơng tin địa chỉ E-mail nhập vào function isEmail() { if (document.forms[0].elements[1].value == '') { alert ("\n The E-Mail field is blank \n\n “+ “Please enter your E-Mail... thực hiện các thao tác như một chương trình Java, tuy nhiên bị hạn chế một số chức năng vì tính bảo mật cho máy client Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 28 Trường Đại Học Bách Khoa Tp.HCM LẬP TRÌNH WEB CHẠY Ở CLIENT Hoạt động của một Applet – – – – – Được web browser tải mã(byte code) về máy client Method init() sẽ được gọi để khởi động các thơng số Method start() được gọi để thực thi Method... if(document.all){ //IE the_div=eval(“window.document.all.”+div_name+”.style”); }else if(document.layers){//Netscape the_div=eval(“window.document.all.”+div_name); } Bản quyền ®2005- Khoa Công Nghệ Thông Tin Trang 24 Trường Đại Học Bách Khoa Tp.HCM DHTML Javascipt example about timer . Nghệ Thông Tin Trang 16 LẬP TRÌNH WEB Ở CLIENT z Các trang HTML có thểđượclậptrìnhđể thựchiện các thao tác thực thi trên web client. z Các phương pháp phổ biến để lậptrìnhhiệnnay: – Script (Javascript,. web – Khơng phảilàmột ứng dụng độclập, là ứng dụng chạy trên nền web-server. – Ngườilậptrìnhcóthể thựchiện các thao tác trên ứng dụng web như vớimột ứng dụng độclập. – Có thể lấy thơng tin từ user. Trường. name="D1"> <option value="501097"> ;Mạng máy tính</option> <option value="501016">Lậptrìnhmạng</option> </select> Trường Đại Học Bách Khoa