DHTML (Dynamic HTML)

III.1. Khái niệm

DHTML là từ viết tắt của Dynamic Hyper Text Markup Languge, HTML động, là một thuật ngữ marketing của Microsoft khi phát hành phiên bản IE 4.0 và thuật ngữ này chưa được W3C chính thức chấp nhận, tuy nhiên trước sự hấp dẫn của nó mang lại, nhiều nhà phát triển web đã tận dụng kỹ

thuật này. DHTML được định nghĩa bằng một công thức ngắn gọn : DHTML = HTML + CSS + JavaScript

Tuy nhiên, DOM mới chính là cơ sở của DHTML, nó cung cấp giao diện cho các script và các component truy cập vào các đối tượng của tư liệu HTML đểđọc và thiết lập các giá trị của các thuộc tính, tạo nên một trang web "động" (animated, cần chú ý khái niệm này hoàn toàn khác với khái niệm dynamic web page mà ta sẽ nghiên cứu ở các chương 7,8 của giáo trình này).

IE và NN đều hỗ trợ DHTML, tuy nhiên chính hai trình duyệt này dựa trên hai mô hình đối tượng tư liệu khác nhau, người thiết kế web phải xây dựng một trang web trung tính để thỏa mãn nhiều người sử dụng khác nhau.

III.2. Các phương pháp truy cập đến một đối tượng trên tư liệu HTML

DOM cung cấp một giao diện lập trình ứng dụng phía client, theo đó ta có thể truy cập đến một đối tượng trên tư liệu HTML bằng một trong những phương pháp sau :

- Sử dụng phương thức của đối tượng document: getElementById(), getElementsByName() và getElementsByTagName()

- Sử dụng thuộc tính childNodes của một đối tượng.

- Sử dụng các collection : elements (của form), anchors, images v.v.

Trong các phương pháp trên, hai phương pháp đầu tỏ ra khá hiệu quả và thường được ưa thích

để truy cập đến một đối tượng riêng biệt trên trang web.

III.3 Các đặc điểm của DHTML

DHTML có 3 đặc điểm quan trọng hay sự kết hợp giữa HTML, CSS và JavaScript cho chúng ta có thể thay đổi nội dung, thể hiện, vị trí của một đối tượng trên trang web thông qua các sự kiện mà không cần phải nạp lại trang web.

III.3.1. Nội dung động

DHTML cho phép thiết kế trang web có thể thay đổi nội dung sau khi được nạp, trong đó IE cung cấp nhiều khả năng hơn NN.

Ví dụ :

<HTML><HEAD><TITLE>Dynamic Content </TITLE> <SCRIPT language="JavaScript">

function change(){

var oH =document.getElementById("iH3");

oH.innerHTML="Tam biet"; // thỏa mãn IE và NN

/* có thể thay câu lệnh trên bằng một trong hai câu lệnh dưới * oH.childNodes[0].nodeValue="Tam biet";

* oC[0].nodeValue="Tam biet"; */

}

</SCRIPT></HEAD>

<H3 id="iH3"> Chao mung cao ban !</H3> <P> Click chuot de xem su thay doi </P> </BODY></HTML>

IE còn cung cấp các thuộc tính innerText (xác định văn bản bên trong cặp thẻ HTML), outerHTML (giống như innerText và thêm các thẻ HTML), phương thức document.body.insertAdjacentHTML để chèn một đọan văn bản vào cuối trang web đã nạp. Giải pháp của NN 4.0 là dùng thẻ LAYER, tiếc thay thẻ này không còn được dùng trong các phiên bản sau của NN.

III.3.2. Kiểu động (dynamic style)

Các vấn đề về Style ta đã nghiên cứu trong Chương 4 giáo trình này, trong mô hình đối tượng tư liệu DOM cho ta phương thức truy cập và thiết lập kiểu của một đối tượng theo cú pháp :

đối_tượng. style.thuộc_tính [= giá_trị] ;

Một vấn đề cần chú ý tên thuộc_tính của đối tượng style không như tên thuộc tính trong

định nghĩa kiểu . Ví dụ :

CSS : thuộc tính background-color

BOM : thuộc tính backgroundColor, viết liền, phân biệt chữ hoa với chữ thường

Để xác định các thuộc tính của style cho một đối tượng thỏa cho một trình duyệt ta sử dụng

đọan script sau:

var the =document.getElementById("idThe"); / /idThe là id của một thẻ HTML

var th= the.style; // trả về một Object

for(var pr in th){document.write(pr+": "+th[pr]+"<br>");}

Ví dụ 1 : Thay đổi màu nền, màu chữ và nhãn của một nút lệnh tương ứng với hai sự kiện onMouseOver và onMouseOut.

var oldfColor; // màu chữ ban đầu var oldbColor; // màu nền ban đầu var oldText ; // nhãn ban đầu function mOver(the,bColor, fColor, newText){

// the là tham số sẽ đón nhận tham số thật sự là this. bColor: màu nền, // fColor: màu chữ, newText: nhãn mới

oldfColor=this.style.color; oldbColor= this.style.backgroundColor; oldText=this.value; // lưu lại các giá trị the.style.backgroundColor=bClor; the.style.color=fClor; the.value=newText; }

function mOut(the,oldbColor, oldfColor, oldText){ the.style.backgroundColor=oldbClor;

the.style.color=oldfClor; the.value=oldText;

}

</SCRIPT>

Ví dụ 2: Sử dụng thuộc tính display để thiết kế menu co giãn được (như menu điều hướng của website VietNamNet ,VNExpress, Dân trí v.v...)

<HTML>

a:link, a:visited, a:focus{color:white;text-decoration:none; font-family:Tahoma; font-size:10pt} a:hover{color:yellow;text-decoration:underline; font-family:Tahoma; font-size:10pt} </STYLE> <SCRIPT language="JavaScript"> var curbgColor; function ItemMinimize(Name) { var MItem=document.getElementById(Name); if (MItem.style.display==''){MItem.style.display='none';} else {MItem.style.display='';} } function active(obj,color) { curbgColor=obj.bgColor; obj.bgColor=color; obj.style.fontWeight="normal";} function deactive(obj) { obj.bgColor=curbgColor; obj.style.fontWeight="normal";} </SCRIPT>

<!- một dòng trống ->

<TR><TD width="100%" onclick="ItemMinimize('01')"

onmouseover="active(this, 'navy')"

onmouseout="deactive(this)" bgColor="#004199"> <B><A href="#">TỔNG QUAN </A></B>

</TD></TR>

<LI><A href="m1.htm" style="color:navy">Giới thiệu</A> <LI><A href="m2.htm" style="color:navy">Sơ đồ tổ chức</A>

<LI><A href="m3.htm" style="color:navy">Hệ thống đào tạo</A> </UL> </DIV> </TD></TR> <TR><TD width="100%" onclick="ItemMinimize('02')" onmouseover="active(this, 'navy')" onmouseout="deactive(this)" bgColor="#003399" > <B><A href="#">CƠ QUAN ĐẠI HỌC ĐÀ NẴNG </A></B> </TD></TR>

<LI><A href="h1.htm" style="color:navy">Ban Giám đôc</A><BR> <LI><A href="h2.htm" style="color:navy">Văn phòng</A><BR>

<LI><A href="h3.htm" style="color:navy">Các ban</A><BR> </UL> </DIV> </TD></TR> <!-- Các đọan sau cũng như vậy-> </TABLE> </BODY></HTML> Nhận xét :

- Trang web trên chạy được trên IE lẫn NN mà không dùng đến applet (công nghệ của Sun) hay đối tượng ActiveX (công nghệ của Microsoft).

- Qua ví dụ trên ta thấy công dụng to lớn của thẻ DIV trong việc thiết lập kiểu động. Kiểu động được áp dụng trong việc thiết kế các menu điều hướng trong các trang web. Cần phân biệt hai thuộc tính display nhận giá trị " " và "none") và visibility (nhận giá trị

visible và hidden).

display="" tương đương visibility=visible

display='none' tương đương visibility=hidden , nhưng đối tượng bị hidden chiếm không gian trên trang web còn 'none' thì không, lợi dụng tính chất của thuộc tính display để xây dựng menu co giãn được.

III.3.3. Định vị động

Định vịđộng là xác định vị trí của một phần tử trên trang web tại thời điểm trang web đang mở dựa trên hai tọa độ x,y. Có 2 phương pháp định vị : định vị tuyệt đối (position:absolute) và định vị

tương đối (position:relative).

Ví dụ : thiết kế một banner quảng cáo di chuyển trên cửa sổ trình duyệt khi mở một trang web (không dùng phương thức window.open dễ bị ngăn chặn)

<HTML> <HEAD> <TITLE>Quang cao</TITLE> <SCRIPT language="JavaScript"> var top=0; var max=200; var step=2; var count=0; var alpha=100; var time=5; function quangCao() { ad=document.getElementById("advs"); if(top+ad.clientHeight<0) { ad.style.visibility="hidden";} else { if(top>=max) {

if(count>time) { ad.style.filter="alpha(opacity="+(alpha- =5)+")"; } else count++; } else { top+=step+=2; ad.style.top=top;} } } time=time*2; setInterval("quangCao()",100); </SCRIPT> <STYLE type="text/css">

H1{position:relative;width:200px; height:200px; top:150px} </STYLE>

</HEAD>

<BODY onload="quangCao();"> <DIV id="advs"

style=" position: absolute; width: 50%; border: 3px solid olive;

padding: 8px;

background: lime none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-inline-policy: initial; -moz-background-origin: initial;"> <H3><FONT color="#330099"> <P align="center">Chào mừng bạn đến với TVAd, VTV3! <BR> (powered by JavaScript)</P> </FONT></H3> </DIV>

<!- noi dung chinh cua trang web -> </BODY>

</HTML>

IV. TỔNG KẾT CHƯƠNG

Mô hình đối tượng trình duyệt BOM là một giao diện lập trình phía client. Có các mô hình cho các trình duyệt khác nhau. Do vậy, đểđảm bảo trang web chạy được trên nhiều trình duyệt cần phải nghiên cứu sâu các mô hình này để xây dựng một trang web trung tính hoặc trang web xuyên nền (cross platform), nhất là nhiều người sử dụng đang quan tâm đến một trình duyệt mới của Mozilla là FireFox có tính bảo mật tốt hơn Internet Explorer ./.

1. Trong DHTML, tất cả các phần tử HTML và các thẻđều được xem như là những đối tượng có thể truy cập và xử lý độc lập? Giải thích.

2. Nội dung động (dynamic content) là một đặc điểm theo đó ta có thể thay đổi nội dung văn bản của trang web sau khi trang web được nạp xong.

3. Đối tượng event chỉ có thểđược sử dụng trong phạm vi của trình xử lý sự kiện (event handler). Giải thích?

4. Kết thúc một hành động tương đương với kết thúc sự nổi bọt sự kiện ?

5. Một trình xử lý sự kiện là tập các câu lệnh được thi hành đểđáp ứng một sự kiện? Phân biệt thuật ngữ

event, event handler

6. Lập bảng so sánh style trong CSS và DOM HTML ?

7. Không dùng giả lớp (pseudo class) mà chỉ dùng JavaScript để thay đổi trạng thái các liên kết.

8. Sử dụng các thẻ <MAP>, <DIV> và các kỹ thuật DHTML để xây dựng một bản đồ hướng dẫn du lịch

Đà Nẵng

9. Sử dụng Xara Web style 5.0 để xây dựng menu pulldown. Kiểm tra mã nguồn được phát sinh để kết luận menu này có chạy được trong IE lẫn NN không?

1. http://www.w3schools.com

Chương 7

CĂN BẢN VỀ PHP

I. GIỚI THIỆU

PHP viết tắt của chữ Personal Home Page ra đời năm 1994 do phát minh của Rasmus Lerdorf, và nó tiếp tục được phát triển bởi nhiều cá nhân và tập thể khác, do đó PHP được xem như một sản phẩm của mã nguồn mở.

PHP là kịch bản trình chủ (server script) chạy trên phía server (server side) như cách server script khác (asp, jsp, cold fusion).

PHP là kịch bản cho phép chúng ta xây dựng ứng dụng web trên mạng internet hay intranet tương tác với mọi cơ sở dữ liệu như mySQL, PostgreSQL, Oracle, SQL Server và Access.

Lưu ý rằng, từ phiên bản 4.0 trở về sau mới hỗ trợ session, ngoài ra PHP cũng như Perl là kịch bảng xử

lý chuỗi rất mạnh chính vì vậy bạn có thể sử dụng PHP trong những có yêu cầu về xử lý chuỗi.

II. CĂN BẢN PHP

II.1 Yêu cầu

PHP dựa trên cú pháp của ngôn ngữ lập trình C, chính vì vậy khi làm việc với PHP bạn phải là người có kiến thức về ngôn ngữ C, C++, Visual C. Nếu bạn xây dựng ứng dụng PHP có kết nối cơ sở dữ liệu thì kiến thức về cơ sở dữ liệu MySQL, SQL Server hay Oracle là điều cần thiết.

PHP là kịch bản trình chủ (Server Script) được chạy trên nền PHP Engine, cùng với ứng dụng Web Server để quản lý chúng. Web Server thường sử dụng là IIS, Apache Web Server, ...

II.2

II.2 Thông dịch trang PHP

Khi người sử dụng gọi trang PHP, Web Server triệu gọi PHP Engine để thông dịch (tương tự như ASP 3.0 chỉ thông dịch chứ không phải biên dịch) dịch trang PHP và trả về kết quả cho người sử dụng như hình 1-9.

II.3 Kịch bản (script)

Nội dung của PHP có thể khai báo lẫn lộn với HTML, chính vì vậy bạn sử dụng cặp dấu giá <?=trị/biểu thức/biến?> để khai báo mã PHP. Chẳng hạn, chúng ta khai báo:

<br>

1-Giá trị biến Str: <?=$groupid?> 2-Giá trị biến i: <?=$i?>

3-Giá trị cũ thể: <?=10?>

Chẳng hạn bạn khai báo trang hello.php với nội dung như ví dụ 7-1 sau:

Ví dụ 7-1: Trang hello.php <HTML> <HEAD> <TITLE>::Welcome to PHP</TITLE> </HEAD> <BODY> Greeting: <?="Hello PHP"?> </BODY> </HTML>

Kết quả trả về như hình 7-2 khi triệu gọi trang này trên trình duyệt.

Hình 7-2: Kết quả trang hello.php

Trong trường hợp có nhiều khai báo, bạn sử dụng Scriptlet, đều này có nghĩa là sử dụng cặp dấu trên như

<?php Khai báo ?> với các khai báo PHP với cú pháp của C như sau:

<?php $sotrang=$pagenumber; $record=$rownumber; $totalRows = 0; $paging=""; ?>

-Khai báo trên là Scriptlet Giá trị của paging: <br> <?= $paging ?>

-Khai báo này là Script

II.4 Ghi chú trong PHP

Ghi chú trong kịch bản PHP tương tự ngôn ngữ lập trình C, để ghi chú một dòng thì bạn sử dụng cặp dấu /. Chẳng hạn khai báo sau là ghi chú:

<?php

// Khai báo biến để paging $sotrang=$pagenumber; $record=$rownumber; $totalRows = 0; $paging=""; ?>

Trong trường hợp có nhiều dòng cần ghi chú bạn sử dụng cặp dấu /* và */, ví dụ khai báo ghi chú như sau:

Khai báo biến để đọc dữ liệu trong đó totalRows là biến trả về tổng số mẩu tin

$result = mysql_query($stSQL, $link); $totalRows=mysql_num_rows($result);

Ngoài ra, bạn cũng có thể sử dụng dấu # để khai báo ghi chú cho từng dòng, ví dụ khai báo sau là ghi chú:

<?php

# Khai báo biến để paging $sotrang=$pagenumber; $record=$rownumber; $totalRows = 0; $paging=""; ?>

II.5 In kết quả trên trang PHP

Để sử dụng cú pháp của PHP khi in ra giá trị từ biến, biểu thức, hàm, giá trị cụ thể thì sử dụng khai báo echo như sau:

<?php

$stSQLs=”select * from Customers”; echo $stSQLs;

Chẳng hạn, khai báo echo như ví dụ 7-3.

Ví dụ 7-3: Trang echo.php <HTML> <HEAD> <TITLE>::Welcome to PHP</TITLE> </HEAD> <BODY> <?php $sotrang=$pagenumber; $record=$rownumber; $totalRows = 0; $paging="Go to 1 2 3 4 5 Next"; /*dùng phát biểu echo */

echo “Giá trị của paging: “; echo $paging;

?> </BODY> </HTML>

Kết quả trả về như hình 7-3 khi triệu gọi trang này trên trình duyệt.

Hình 7-3: Kết quả trang hello.php

NHỮNG LỜI KHUYÊN CỦA W3C

CÁC CÂU LỆNH CỦA JAVASCRIPT