Trường Đại Hoc BK Tp.HCM DHMTL & LẬP TRÌNH WEB CHẠY Ở CLIENT CHƯƠNG pot
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (428.59 KB, 17 trang )
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:
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;
}
}
Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 21
LẬP TRÌNH WEB Ở CLIENT
z Kiểmtrathơngtin địachỉ 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 address.")
document.forms[0].elements[1].focus();
return false;
}
if (document.forms[0].elements[1].value.indexOf ('@',0) == -1 ||
document.forms[0].elements[1].value.indexOf ('.',0) == -1) {
alert ("\n The E-Mail field requires a \"@\" and a \".\""+
"be used. \n\nPlease re-enter your E-Mail address.")
document.forms[0].elements[1].select();
document.forms[0].elements[1].focus();
return false;
}
return true;
}
Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 22
DHTML
z DHTML (Dynamic HTML) là trang HTML có chứa
các đoạn mã JavaScript tạocáchiệu ứng, thay đổi
các phầntử trong trang HTML.
z DHTML kếthợpgiữa HTML, Javascript và
Cascading Style Sheets(CSS).
z CSS là sự kếthợpgiữa các tags HTML và style.
z Style có thể chứanhiềuthuộctính.
Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 23
DHTML
z Mọi tags HTML đều có style. Javascript có thể dựa
trên các biếncốđểthay đổicácthuộctínhcủa style.
z Mỗiphầntử trong trang HTML đềucóthểđượcgán
ID (khác với name) và có các thuộc tính style.
z Có thể dùng tag <div id=“”>…</div>
z Mỗi web browser có thể thựcthimộtsố lệnh khác
nhau.
Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 24
DHTML
z Phát hiệnloại web browser
– Dùng các thuộc tính appName và appVersion của đối
tượng navigator
var browser_name= navigator.appName;
var browser_version = navigator.appName;
alert(“You use browser “+browser_name+” version “+
browser_version);
– Phân biệthailoại chính
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);
}
Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 25
DHTML
<HTML>
<HEAD>
<TITLE>Javascipt example about timer</TITLE>
<SCRIPT language="JavaScript">
<!
var second_counter=0, counter=0;
function my_timer(){
D = new Date();
seconds= D.getSeconds();
if(seconds!=second_counter) counter++;
second_counter=seconds;
if(counter>=1000) counter=0;
document.images[0].src= get_images(counter/100);
document.images[1].src= get_images((counter%100)/10);
document.images[2].src= get_images(counter%10);
SecondText.innerText=counter;
setTimeout('my_timer()',1000);
}
Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 26
DHTML
<HTML>
<HEAD>
<TITLE>Javascipt example about timer</TITLE>
<SCRIPT language="JavaScript">
<!
var second_counter=0, counter=0;
function my_timer(){
D = new Date();
seconds= D.getSeconds();
if(seconds!=second_counter) counter++;
second_counter=seconds;
if(counter>=1000) counter=0;
document.images[0].src= get_images(counter/100);
document.images[1].src= get_images((counter%100)/10);
document.images[2].src= get_images(counter%10);
SecondText.innerText=counter;
setTimeout('my_timer()',1000);
}
Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 27
DHTML
function get_images(number){
var newNum= Math.floor(number);
return " /images/"+newNum+".jpg";
}
>
</SCRIPT>
</HEAD>
<BODY onload='my_timer()'>
<P><FONT face=System>Timer :
<IMG alt="" src=" /images/0.jpg" width="13" height="23">
<IMG alt="" src=" /images/0.jpg" width="13" height="23">
<IMG alt="" src=" /images/0.jpg" width="13" height="23">
<FONT face="Arial Black" ID="SecondText">000</FONT>
seconds</FONT></P>
</BODY>
</HTML>
Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 28
LẬP TRÌNH WEB CHẠY Ở CLIENT
z Java Applet
– Là một ứng dụng đượcviếtbằng Java, nhúng trong trang
HTML.
– Khi trang HTML có chứa tag applet đượcgọi, class applet
đượctảivề máy client và thực thi trên máy client.
– Một ứng dụng applet phảithừakế class java.applet.Applet
– Có thể thựchiện các thao tác như mộtchương trình Java,
tuy nhiên bị hạnchế mộtsố chứcnăng vì tính bảomậtcho
má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 29
LẬP TRÌNH WEB CHẠY Ở CLIENT
z Hoạt động củamộtApplet
– Được web browser tải mã(byte code) về máy client.
– Method init() sẽđượcgọi để khởi động các thơng số.
– Method start() đượcgọi để thựcthi.
– Method stop() đượcgọi khi người dùng thốt khỏi applet
– Method destroy() đượcthực thi khi applet kết thúc.
z ActiveX Control
– Tương tự như Java Applet, đượcviếtbởi các cơng nghệ
củaMircosoft.
Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 30
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() {
text = getParameter("text");
try { x = Integer.parseInt(getParameter("x"));
y = Integer.parseInt(getParameter("y"));
}catch(NumberFormatException ex){ }
}
public void paint(Graphics g) {
g.setFont(new Font("TimesRoman",Font.BOLD+
Font.ITALIC,36));
g.drawString(text,x,y);
}
}
Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 31
LẬP TRÌNH WEB CHẠY Ở CLIENT
<HTML> <HEAD> <TITLE>Using the Applet Tag
</TITLE> </HEAD>
<BODY>
<H1>An Applet that Displays Text at a Designated
Location</H1>
<APPLET CODE="SampleApplet.class" HEIGHT=300
WIDTH=300>
<PARAM NAME="text" VALUE="Applets are fun!">
<PARAM NAME="x" VALUE="50">
<PARAM NAME="y" VALUE="50">
Text displayed by browsers that are not Java-
enabled.
</APPLET>
</BODY>
</HTML>
Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 32
TÀI LIỆU THAM KHẢO THÊM
z HTML Homepage on W3C
– />z HTML ver 4.0
– />z HTML Form
– />z Dave Raggett’s Introduction to HTML
– />– />– />z Javascript & DHTML
– />– />Trường Đại Học Bách Khoa Tp.HCM
Bản quyền ®2005- Khoa Công Nghệ Thông Tin
Trang 33
TỔNG KẾT
z Giớithiệuhệ thống Web
z Giớithiệulập trình Web
z Lập trình Web phía Client
– Javascript
– DHTML
