You appear to be running:”);
document.write (“<b>” + navigator.appName + “</b> <i>version</i> “);
document.write (“<b>” + navigator.appRealVersion + “</bx/h1>”);

Như bạn có th ể th ấy chúng ta phải viết m ã nhiều để b iết sô' phiên
bản thực sự của các loại khác nhau của trìn h duyệt N etscape. Đối với


175

Chương 7. Tạo các script làm việc trong mọi trình duyệt

N etscape 4 trở vể trước, thuộc tính navigator.appV ersion trả về đúng
g iá t r ị . Vì N e ts c a p e 6 vá 7 và M o id lla đ ề u t r ả vê 5 .0 lá
navigator.appV ersioR . chúng ta phải b ắ t đầu tìm kiếm thuộc tín h
navigator.userA gent để tìm giá trị thích hợp.
Q êx c

U

-----------------------------------------------------------------------------

M ã lr*íỏ(
rì

.óc inực đíck C IỈJ \ í cJ^ ià^

VJ

J o 3ó

khơnq bao hâm tố i cđ các loqi hoỢc p k iê n bdn t r ìn ii duL)ệt. Đ ể xem
m ột ví dự hồn híỉo về mộf scpipt phát hiện tpìnli d u y ệ t, bọn nên fkam
Itkđ o p p a c ỉic a l Bpovvsep S n iííin q S c p ip ỉ c d a B o b C l a p i j tq i h ttp :/ /
bclapij.com /xbppojects-n aviqatop đ ế q u y ế t định loqi vđ p k ỉé n L đ n ỉr ìn t i d u q ệ t. W e t) site đó
cũ n g ch ứ a một

SCPÌ

pt

(Jq ì

htlp://t>cl a p q .co m /xbp p o ịects-cio c s M D O M )

cko pkép byn sù d^nqi một ttfp l»ợp đối ỉưr;nq D O M

c k u íín cho tố l cđ

fpìnli duL|ệt.

H ình m inh họa sau đây cho thấy hàm nhỏ chạy trong N etscape 2.0
và N etscape 7.0 như chế nào.

X'bÇtf.

1-

ÍQ è
V'

rằ*w i
'

WM*.

m

/Vi*vf

0 đ
Fe***rfợH hoô*.;'- 'sVMtoM

ệ 0E3
low;-!#

mi

[y?i Netscape - (JvdScnpt sample code]
ïûik* ûpfor» ßiwci
■mm

É ÿ S fg
s

-■-

Év^::

Y o u a p p e a r to be ru n n in g :
N etscape version 2

v-.3?i£i ' (PuùjmajL'Pw. 'Vï/y

.! T.;■

yaffil;Qàl


176

Chương 7: Tạo các script làm việc trong mọi trình duyệt
■ H H T T n T T I

1 $ $ JavaSciipt «ample code - Neticdpe
-

ỵier» £ o Ễodanỏíkí lo o k Window yete

¿i

JaviStiipt compiocoòe

1

□

Y ou a p p e a r to be ru n n in g :
N etscape version 7.0

â ! OoturwV: Donô 0.39 ằ csl

Microsoft In te rn e t Explorer đã luôn cung cấp số p h iên bản của nó
bằng chính xác cùng một cách. Nó tự báo cáo là tương thích N etscape 4.0
trong thuộc tín h navigator.appVersion và để số p h iên b ản phần mềm
thực sự được nhúng ở nơi khác trong cùng m ột chuỗi. Tìm nó tương đối
đơn giản b ằn g cách sử dụng phương thức indexOfO của đôi tượng
Jav aS crip t String.
Truy vấn mô hình đơì tượng (document mode!)

Vấn đề với việc phụ thc vào mã kiểm tra tìm các trìn h duyệt theo
tơn \ à phiơn bản 'à nó khơng rõ ’’ànk. H ên L/ậ: 'dio ản g 9C9? l h jfr.g
người lướt web sử dụng m ột trong hai trìn h duyệt chính - N etscape hoặc
IE. Nhưng cịn về 4% kia - những người lướt web chọn những nhãn hiệu
khác chẳng h ạn như Opera hoặc Konqueror thì sao? Các trìn h duyệt mới
đang được p h át triể n và các web site sẽ không làm việc đáng tin cậy nếu
chúng chỉ được viết m ã để hoạt động với hai n h ã n hiệu h àn g đầu.
Vấn đề khác là khi các phiên bản mới của IE và N etscape được tung
ra, sự hỗ trợ cho các tín h năng khác nhau thay đổi. Ví dụ, N etscape 4 hỗ
trợ m ột phương pháp layout được gọi là các layer, nhưng sau đó sự hỗ trợ
đã bị loại bỏ khi N etscape 6 xuất hiện. (Các layer sẽ được thảo luận
thêm trong phần "Viết m ã nhiều trìn h duyệt").
Cách dễ dàng n h ấ t để khắc phục vấn đề của các trìn h duyệt khác
nhau có sẵn (cả trong hiện tại và tương lai) là v iết m ã và kiểm tra xem

có m ột phương thức đơn trước khi cố sử dụng nó hay khơng.
P hiên bản chính thức đầu tiên của Document Object Model (được
gọi là DOM 1) định nghĩa m ột phương thức của đối tượng tà i liệu được


Chương 7: Tạo các script làm việc trong mọi trình duyệt_____________________177

gọi ià getElem entB^IđG . Các trình duyệt gần đây (chẳng hạn như IE 5
và N etscape 6) hỗ trợ nó, nhưng các trìn h duyệt cũ hơn thì khơng.
Việc đơn giản gọi phương thức getElement.ByldO trong m ột trìn h
duyệt khơng hỗ trợ nó sẽ gây ra một lỗi:
var obịptr = docurrent.getElPmentByld(”carname') •

Do đó nếu b ạn rr.uốn kiểm tra xom 4rìn h duyệt h iệ r tại cổ bỗ trợ
phương thức getElem entByldO trước khi sứ dụng nó hay không, bạn chỉ
việc truy vấn đối tượng tài liệu để xem nó có m ột th à n h viên có tên đó
trước khi gọi nó hay khơng:
if (document.getElementByld) {
var objptr = document.getEiementByldC carname’’);

Ị

Mã trê n sẽ làm việc trong bất kỳ trìn h duyệt vì các trìn h duyệt mà
khơng hỗ trợ phương thức đó sẽ khơng thực thi mã bên trong câu lệnh if.
Dí nhiên, trong các trìn h duyệt đó. biến obịptr sẽ khơng được xác lập, do
đó tốt r h .it háy để mả chay thê xử lý những’ tìn h huống đó:
if (C0Cjn.er.t.ije1EI';nrertBylõ) ;
var objptr = document.getElementByldfcarname");
} else {
alert (“Sorry, this web page will not work in your browser ”):

}
Dĩ nhiên, nếu bạn phải bao boc mỗi và mọi lệnh goi đến một phương
thức DOM bằng câu iệnh if riêng cua nó, chương trìn h sẽ dài và kém
hiơu q. Do đó phương pháp tốt nhâr có th ể là k ế t hợp phương pháp
brow ser sn iñ in g (đánh ho'' Lvinh duyệt) vơi phương thức p n át niện DOM
đế đ ạt được vẹn ca đôi đường.

T rung th àn h vói những chuẩn Web
Trong những ngày đầu phát triển web, hai n h à sản xuất trìn h duyệt
lớn n h ấ t cạnh tra n h dữ dội để đạt được thị phần. Một trong những chiến
lược m à họ ưa th ích n h ất là cố vượt trội nhau về các tín h năng. Những
người tiêu dùng download và cài đặt phiên bản mới n h ấ t của trìn h
duyệt ưa th ích của họ và trong vòng vài ngày phiên bản k ế tiếp sẽ có
sẵn để download. Các cơng ty lớn đơi khi địi hỏi nhiều th án g để test
và phê chuẩn p h ần mềm mới để sử dụng tự n h ận th ấy m ình có lên đến
hai phiên bản full đằng sau phiên bản hiện hành.
Dĩ nhiên, điều này đã dẫn đến hai chuẩn HTML thay vì m ột chuẩn
đã làm cho công việc của nhà phát triển web phức tạp hơn mức cần
th iết. T h ật m ay thay, cuối cùng cả Microsoft và N etscape quyết định


178

Chường 7: Tạo các script làm việc trong mọi trình duyệt

rằn g họ nên tri hỗn thực thi các tín h năng HTML và Jav aS crip t mới
cho đến khi chúng được chấp thuận bởi m ột cộng đồng tiêu chuẩn.
Tuy nhiên, có m ột số thói quen viết m ã không chuẩn n ên được trá n h
để đạt được k hả năng tương thích nhiều nền. B ảng 7.2 trìn h bày một

danh sách các phần tử không phải là m ột phần của chuẩn HTML 4.
Những th ẻ m arkup độc quyền này nên được trá n h nếu bạn muôn tạo
các tra n g web hoạt động m ột cách n h ấ t quán tro n g b ấ t kỳ trìn h duyệt.
• ••••••

Thủ thuật
•

Nếu bạn muôYi kiểm tra trang web để xem nó có tn theo các chuẩn chính
thức hay khơng, web site VV3C cung cấp một dịch vụ hiệu lực hóa HTM L tại
. Công cụ Iiày là cách d l nhất để xem trang web của
bạn đi lệch ra khỏi các chuẩn chính thức bao xa. Thậm chí nó nhận dạng bâ't kỳ
mã HTM L chứa các lỗi.
Bảng 7.2 Các thẻ markup độc quyền, khống phải là một phẩn của chuẩn HTML chính
thức.

M arkup độc quyền

Hỗ trỢ trìn h d u y ệ t

<layer>

Netscape 4 (only)

<marquee>

IE

<bgsound>

IE

<embed>

IE, Netscape

<noembed>

iE, Netscape

<multicol>

Netscape

<spa^er>

Netscape

<nobr>

IE, Netscape

<wbr>

IE, Netscape

<blink>

Netscape

<xmp>

IE, Netscape

<listing>

IE, Netscape

<br /><br />IE, Netscape<br /><br />&lt;keygen&gt;<br /><br />Netscape<br /><br />&lt;layer&gt;, &lt;ilayer&gt;<br /><br />Netscape<br /><br />&lt;nolayer&gt;<br /><br />Netscape<br /><br />&lt;server&gt;<br /><br />Netscape<br /><br />1 /ệ<br />Vièt mã nhiẽu<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />trìn h duyệt<br /><br />Ở p h ần trước trong chương chúng ta đã làm việc với một s ố m ã<br />Jav aS cript có th ể được sử dụng để p h á t hiện tê n và số phiên bản chính<br /><br /> <br />Chương 7: Tạo các script làm việc trong moi trình duyêt<br /><br />179<br /><br />xác cúa trìn h duyệt Client Trong phần này, chúng ta sẽ dặt mã tương<br />tự để sử dụng với dynamic HTML.<br />Dynamic HTM L (hoặc viết tắt là DHTML) là m ột phần mở rộng của<br />chuẩn HTML cho phép các chương trìn h Jav aS crip t thay đổi và chỉnh<br />sửa một tra n g web sau khi nó được tải trong trìn h duyệt m à khơng cần<br />p h ải quay trở về web server cho một tran g mới. P h ần lớn JavaS cript<br />hoàr. t ’.ián’i đitt-u nầy thơnị, C. \I ệ j xử 1} các phuơiig thức \ à thc tính<br />tro n g DOM của trìn h duyệt.<br />Dynamic HTM L được sử dụng đều đặn bởi các site In te rn e t để cung<br />cấp các m enu xổ xuống, hình ảnh và text vốn thay đổi khi bạn di chuyển<br />cursor chuột lên trê n chúng và các shopping car (giỏ m ua sắm ) ecommerce tín h to án iại tỏng chi phi của m ột đơn đ ặt hàng mỗi lần một<br />hộp kiểm được chọn (được chọn hoặc được húy chọn). Trong những<br />th á n g gần đày, các nhà quảng cáo đã bắt được lỗi DHTML và tạo ra<br />quảng cáo động đi qua tran g web (và không th ể được tắ t hoặc được<br />trá n h '.<br />Tuy nhiên, DHTML nhiều ';rình duyệt khó viết m ã vì m ã JavaS cript<br />được yêu cầu cho các trìn h duyệt Netscape và M icrosoft hồn tồn khác<br />nhau. Trong Khi Việc chuẩn hóa làrn cho việc ỉập trin h HTML và<br />Jav aS crip t cơ b ản trở nên dễ dàng hơn nhiều, so với chỉ cách đây một<br />vài nàm việc thực th i các DOM khác nhau giữa các trìn h duyệt là một<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />trong những lĩn h vực rắc rối còn lại sau cùng.<br />H inn 7.1 m inh họa mụt ví dụ về mịt tran g web sử dụng DHTML. Càv<br />phân cấp ở p h ía bên trái m àn hình co thế được mở rộng và được thu gọn<br />hằng' m ột rú nh ắp chuôt đ('n grản. Các mục m e n ổưc/c hiểi. thị v ì 1u'Jc<br />ẩn một cách động m à khịng cần phải yêu cầu HTML mới từ web server.<br />I.o.ii m ỉru DHTML này '-ạ) ra rr.ột hiệ 1 .fng ĨỊp m ắt cho nhữnặ khách<br />tham quan đến tra n g web cùa bạn<br />Một trong những tín h nâng đầu tiên mà bạn có th ể gặp phải là Netscape<br />4 sứ dụng m ột phương thức được gọi là layer dể định nghĩa các vùng của<br />m ột tài liệu web vori có th ể được áp dụng m ột style.<br />&lt;htmi&gt;<br /><br />&lt;headxtitle&gt;Layers sample&lt;/titlex/head&gt;<br />&lt;body&gt;<br /><h1>Netscape Layers Example</h1><br />clayer id=”mylayer”><br />&lt;font color=&quot;white&rdquo;xb&gt;A black square&lt;/bx/font&gt;<br />&lt;/layer&gt;<br />&lt;layer id=&rdquo; mylayer2&quot;&gt;<br />&lt;b&gt;A gray square&lt;/b&gt;<br /><br /> <br />180<br /><br />Chương 7: Tạo các script làm việc trong mọi trinh duyệt<br /><br />&lt;Jlayer&gt;<br />&lt;script language=&rdquo;JavaScript&quot; type=&quot;text/javascript&rsquo;&rsquo;&gt;<br />document.layersCmylayer^.bgColor = “black";<br />document.layers[“mylayer2"].bgColor = ‘'#CCCCCC";<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />document.layersỊ“mylaỵer2"Ị.moveBy (60, 10);<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br /><br />Mã HTML này được th iế t k ế để h oạt động trong chỉ các trìn h duyệt<br />web N etscape 4 . X . Mã của chúng ta đinh nghĩa m ột layer N etscape có<br />tên là m ylayer sử dụng thẻ HTM L&lt;layer&gt;. Chúng ta định nghĩa một<br />layer thứ hai có tên là mylayer2. Sử dụng JavaS cript, chúng ta có thể<br />thay đổi các m àu nền của hai layer, và di chuyển m ột tro n g chúng sao<br />cho chúng khơng phủ chồng hồn tồn. Hiệu ứng có th ể được th ấy trong<br />hình 7 2.<br />T h ật khơng may, m ã trước không làm việc tro n g b ấ t kỳ phiên bản<br />của IE hoặc trong các trìn h duyệt N etscape 6 mới hơn. C húng ta sẽ phải<br />chỉnh sửa m ã m ột chút để p h át hiện loại trìn h duyệt đang chạy va thực<br />hiện các tác vụ khác nhau dựa vào m ă đó.<br />Đầu tiên chúng ta cần thay đổi các layer để làm việc trong tấ t cả<br />irìnli duyệt. M ã sau đâ> khòng phù hợp với các chuẩn HTM L (vì thẻ<br />&lt;layer&gt; khơng phải là m ột phần của chuẩn), nhưng nó sẽ làm việc<br />trong cả TE và Netscape.<br /><br />Tree view ũem o<br />9 '_ J Application example<br />3 Types of folders<br />'<br /><br />Targets<br />JO RĨqhịlrạniặ<br />•jj] New window<br />'¿¡I Whole window<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />J ] This frame<br /><br />4 -4j Other Icons<br /><br />Hình 7.1 Một menu cây có thể mở rộng sử dụng DHTML<br /><br /> <br />Chương 7: Tạo các script làm việc trong mọi trình duyệt<br /><br />181<br /><br />&lt;l&iquest;yer id=&rsquo;mylayer&rsquo;&gt;<br />&lt;div id=&rsquo;mydiv' styie=&rsquo;posiiion:aDsolute&rsquo;&gt;<br /><br />&lt;font color=&quot;white&rsquo;'&gt;&lt;b&gt;A black squaie&lt;/bx/font&gt;<br />&lt;/div&gt;<br />&lt;/iayer&gt;<br />:l 2‘/ er ¡ris'THaye^'*<br />&lt;điv id=&rsquo;mydiv2' style='position:absolyte&rsquo;&gt;<br /><br />&lt;b&gt;A gray square&lt;/b&gt;<br />&lt;/div&gt;<br />&lt;^lavef&gt;<br /><br />ĩã s<br /><br />L f ty e tt i M i p l e - N c l t c a p ô<br />F a<br /><br />Viâw<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br /><br /><br /><br />Bddc<br /><br />-<br /><br />&o<br /><br />-i*<br /><br /> o m n riỏ c a to f<br /><br />M«ỉp<br /><br />3<br /><br />^<br /><br />^dc^d<br /><br />H-yne<br /><br />s*»ch<br /><br />iầí<br /><br />-><br /><br />Netscape<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br /><br />PiH<br /><br />-1<br />S e rư íy<br /><br />Sh o p<br /><br />‘U<br /><br />wyn<br />«M<br /><br />Netscape Lavers Example<br />A black<br /><br />*A g ra y square<br /><br />Hình 7.2 Tạo các layer trong Netscape 4<br /><br />Lưu ý cách chúng ta sử dụng thẻ HTML chuẩn &lt;div&gt; được xếp lồng<br />bên trong th ẻ &lt;)ave.r&gt; không chuẩn. Các trình đuvệt, khơng hỗ trợ &lt;layer&gt;<br />sẽ bỏ qua nó, vì các trìn h duyệt khơng hỗ trợ &lt;div&gt; sẽ bỏ qua thẻ đó.<br />Tiếp theo chúng ta cần chỉnh sửa script để p h át hiện loại trìn h duyệt<br />đang chạy.<br />Chúng ta có th ể<br />nhưng những nhu<br />những gì chúng ta<br />N etscape 6 và IE.<br /><br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />sử dụng script getBrowserlnfo trước đó trong chương,<br />cầu của chúng ta đơn giản hơn th ế nhiều. T ất cả<br />cần làm là phát hiện sự khác b iệt giữa N etscape 4,<br />Để làm điều đó, sử dụng mã Jav aS crip t sau đây:<br /><br />&lt;script language=&rsquo;&rsquo;JavaScript&rdquo; type=&rdquo;texưjavascript&rdquo;&gt;<br />var ua = navigator.userAgent.toLowerCase();<br />var ie4 = ua.indexOf(“msie”) != -1;<br /><br /> <br />182<br /><br />Chương 7: Tạo các script làm việc trong mọi trình duyệt<br />if (document.layers) {<br />// Netscape 4 code goes here<br />} else if (document.getElementByld && ie4) {<br />// IE code goes here<br />) else if (document.getElementByld) {<br />// Netscape 6 code goes here<br /><br />}<br />&lt;/script&gt;<br /><br />Mã này làm việc m ột cách khá đơn giản. N etscape 4 là trìn h duyệt<br />duy n h â t có đối tượng tài iiệu có m ột thuộc tín h layers, do đó kiểm tra<br />tìm sự hiện hữu của thuộc tín h đó sẽ xác n h ận rằn g loại trìn h duyệt là<br />Netscape 4. Chúng ta có th ể làm thủ th u ật này sử dụng phương thức<br />getE lem entB yld của đối tượng tài liệu ngoại trừ chúng ta vẫn cần ph ân<br />biệt giửa IE 4 và N etscape 6. Thuộc tín h N avigator.user Agent cho phép<br />chúng ta làm điều đó.<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />Sau cùng chúng ta thêm m ã DHTML riêng b iệt theo trìn h duyệt để<br />xử lý hai th ẻ &lt;layer&gt; hoặc &lt;div&gt; trê n m àn h ìn h để tạo m ột hiệu ứng<br />h ìn h ảnh.<br />&lt;html&gt;<br />&lt;headxtitle&gt;Layers sample&lt;/titlex/head&gt;<br />&lt;body&gt;<br /><h1>Cross-Browser style Sheets Example</h1><br />clayer id=’my!ayer,><br />&lt;div id=&rsquo;myd&igrave;v&rsquo; style=&rsquo;position:absolute&rsquo;&gt;<br />&lt;font color=&quot;white&rdquo;&gt;&lt;b&gt;A black square&lt;/bx/font&gt;<br />&lt;/div&gt;<br />&lt;/layer&gt;<br />&lt;layer id=&rsquo;mylayer2'&gt;<br />&lt;div id=&rsquo;mydiv2' style=&rsquo;position:absolute&rsquo;&gt;<br /><t»A gray square&lt;/b&gt;<br />&lt;/div&gt;<br />&lt;/layer&gt;<br />&lt;script language=&rdquo;JavaScript&rdquo; type=&rdquo;text/javascript&quot;&gt;<br />var ua = navigator.userAgent.toLowerCase();<br />var ie4 = ua.indexOf(“msie”) != -1;<br />if (document.layers) {<br />// Netscape 4 code goes here<br /><br /> <br />Chương 7: Các Struct, Enum và thuộc tính<br /><br />183<br /><br />Một phương thức hữu dụng khác là G e tN a m e s. Nó liệt kê các tên<br />của các phần tử trong một mảng s trin g . Ví dụ, bạn có thể lưu trữ tên<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />Color trong một m ảng như sau:<br />string[] colorNames = Enum.GetNames(c.GetTypeO);<br /><br />San đó bạn có th ể hiển thị m ảng này bằng việc sử dụng một vòng lặp<br />lặp lại.<br />Nhửng phương thức này được m inh họa trong ví dụ sau đây.<br />Ví dụ 7.5<br />•<br /><br />// Example 7-5.cs<br />/.' Using System.Enum methods<br />using System;<br />// Declare tỉie Color enurn:<br />enum Color { Red = 1, Green, Blue }<br />class MyClass<br /><br />(<br />static void Main()<br /><br />{<br />// Declare a blue color object:<br />Color myCc'or = Cc'l0f.B!ue:<br />// Display the color name using IcStnny:<br />Cjn.:ol3AVr.ie[jn3('M/ tolur !s: (0!”, myColtr), H B,je<br /><br />// Declare 3 coior object'<br />Color yourColor = new Color();<br /><br />h Display the color wnose value IS 2 by using the GetName method:<br />Console.WriteLinefYour color is: {0)”,<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />Enum.GetName(yourColor.GetType()f 2)); // Green<br />// Display all the color names using the GetNames method:<br />Console WriteLine(“Your colors are:");<br />// Declare a string array for colors:<br />string[] colorNames = Enum.GetNames(yourColor.GetTypeO);<br />foreach (string s in colorNames)<br />Console.WriteLine(“{0}<br /><br />}<br />}<br /><br />s);<br /><br /> <br />184<br /><br />Chưdng 7: Tạo các script làm việc trong mọi trình duyệt<br /><br />HŨE<br /><br />&)1<1VCIS sam ó lo ■ N c ttC A u e<br /><br />„ £ie £ *<br /><br />ỵm *<br /><br />fìo gooỉưnaik« loofc ttndow üefc<br /><br />tayon Mffipte<br /><br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />Ị<br /><br />[3<br /><br />Cross-Browser Style Sheets Exaniple<br />“ " “ "A gray square<br /><br />*29 V J<br /><br />bocumenc oõõe (0.17 Mct]<br /><br />fSf’<br /><br />Hlnh 7.4 Mặc dù Netscape 7.0 đòi hỏi Java Script hơi khác nhau nhưng cùng một hiệu<br />ứng được tạo.<br /><br />Đây là m ột ví dụ hay về những khó k h ăn mà các nhà lập trìn h<br />JavaScript đơi khi gặp phải khi p hát triể n m ã làm việc trong b ấ t k5'<br />trìn h duvệt.<br />Trong chương tiếp theo chúng ta sẽ xem m ột trong những nhiệm<br />vụ chính của Jav aS crip t trê n In te rn e t - giúp người dùng điền vào các<br />form. B an sẽ học cach tạo m ọt form Dằng HTML, học vể tấ t cả điều<br />khiẽn (Control) có th ể đi vào m ột form và xem Jav a S c rip t có th ể<br />được sử dụng để hiệu lực hóa dữ liệu được n h ập trước k hi nó được gởi<br />đến server để xử lý.<br /><br /> <br />Chương 8: x ử lý các web form<br /><br />185<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br /><br />T ron g ch ư ơ n g này bạn sẽ h ọ c n hữ ng đ iểm ch ín h sau đây:<br />J í Yêu cầu dữ liệu nbập của người iHing síỉ cìụnq một form HTML<br /><br />R í n y 'hn rà XÍ'C 'ập cárgừí tri diều ừhìển form<br />B Chỉ lẳn oi dư liệu form Jé cié irìub đén Sí n er<br />Ị<br />7<br />_____ B Xứ lý nbiäu J e m __________________________________________ Ị<br />rong càc chương ưưởc cnúng ta đã tnáy JavaScrip co the ũưực<br />sử dụng như th ế nào để cung cấp các trang web động chứa các<br />menu hoạf bình hoặc bơi khác nhau phụ thuộc vào trìn h duyệt<br />web đang sử dụng hoặc thời gian trong ngày. Khi thời gian trôi qua,<br />các n h à p h át triển sẽ thấy việc đưa những thủ th u ậ t JavaS cript đặc<br />biệt này vào các tran g chu cá nhân riêng của họ trồ nên dễ dàng hơn<br />bao giờ hết.<br /><br />T<br /><br />Điều đã khiến cho JavaScript không thể thiếu được như là một công<br />cụ p h át triển cho hầu hết các nhà phát triển web chuyên nghiệp là khả<br />năng nó xử lý dữ liệu nhập người dùng. JavaS cript làm cho việc thu<br />thập và xử lý thông tin người dùng trở nên dễ dàng hơn - cho cả người<br />dùng và n hà p h á t triển web. JavaScript có th ể hỗ trợ bằng nhiều cách:<br /><br />M Lưu trữ và truy tìm các mẫu thơng tin trên máy tính của người dùng<br />(được gọi là các cookie).<br />R Kiểm chứng rằng tất cả tn(ờngform bắt buộc đã được cang cấp<br /><br /> <br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />186<br /><br />Chương 8: xử lý các web form<br /><br />R Hiệu lite hóa định dạng thích hợp của dữ ìiệu do ngifrii dùng nhập<br />vào<br />B Cĩing cấp sự phản bồi tức thì cbo người dùng mà không cần phải di<br />đến web server<br />Và trê n hết, làm tấ t cả điều này thường rấ t dễ dàng - chỉ cần một<br />vài dòng mã. Bằng việc giải quyết nhiều vấn đề hơn nó gây ra, JavaScript<br />nhanh chóng trở th à n h một cơng cụ khơng th ể thiếu được cho các nhà<br />ph át triển web nghiêm túc.<br /><br />Tìm hiểu cá c íorm HTML<br />Cách tố t n h ấ f. và linh hoạt n h ất để đề nghị dữ liệu n h ập của người<br />dùng là bằng cáo form HTML. Một form trong lập trìn h web là một loạt<br />gồm một hoặc nhiều điều khiển người dùng được th iế t k ế để th u thập<br />dữ liệu nhập người dùng. Một điều khiển người dùng (user control)<br />thường là một hộp text, một hộp danh sách (list box) hoặc một nút<br />(button) thuộc một loại nào đó cho phép người dùng cung cấp thơng tin<br />cho trìn h duyệt web. Thực tế các web form được mô phỏng theo các<br />mẫu giấy như những mẫu giấy mà bạn điền vào cho m ột đơn xin việc<br />hoặc một cuộc khảo sát.<br />Có 13 điều khiển người dùng trong HTML:<br /><br />* Text box Cho phép một dòng dữ liệti nbập text.<br />B P assivord box Cho phép một dịng dữ liệĩi nhập text chíỢt bảo vệ<br />bằng các dấu sao.<br />* Text area Cho phép một hoặc nhiều dòng dữ liệu nhập.<br />R H idden Cờ thế chứa một dồng text đtỉợc ổn khỏ' rgườ1dùng<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />B List box Người dũng có thể chọn từ một hoặc nhiều lựa chọn ấn<br />định sẵn.<br />Ễt Radio button Người dũng có tbể cbọn một trong nhiềĩi lựa chọn ấn<br />định sẩn.<br />B Check box Người dùng có thể chọn bất kỳ số trong nhiều lựa cbọn<br />ấn định sẵn.<br />R File Người dùng có thể upload mộtfile từ máy cục bộ lên web sewer.<br />Push button Làm cho một hànb động do chương trình ấn định xảy<br />ra.<br />* Submit button Khiến cho form đìỉợc đệ trình.<br />B Image button Tạo một nút submit đồ họa.<br />B R eset button Làm cho form được xóa sạch.<br /><br /> <br />187<br /><br />Chcícng 8: x ử lý các web form<br /><br />M Object Tạo tuột điềtt kũiổn nhạt) ỉịộn đục biệt (do người dùng định<br />nghĩa)<br />Từng điều khiển này thực hiện một chức n à n g đặc biệt trong việc<br />yêu cầu dữ liệu nhập người dùng. Điều khiển nào bạn sử dụng phụ<br />thuộc nhiều vào các trường hợp riêng lẻ. Ví dụ, khi bạn cần người dùng<br />chon ir.ột trong 50 lựa chọn (như chọn tiểu bang nào mà họ đang sống)<br />bfin thư ^rg chọn m et điồu k h ilr I’st box F)iồu khiổn nàv cho phép bạn<br />cung cấp h àn g chục tùy chọn trong rấ t ít khơng gian. Chọn hiển thị 5Ơ<br />n ú t radio th ay vào đó sẽ chiếm nhiều khơng gian hơn và có th ể khiến<br />cho phần còn lại của form cuộn ra khỏi đáy m àn hình.<br />Yêu cầu dữ liệu nhập người dùng sử dụng một form H TM L<br /><br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />Để thây m ột form HTML điển hình trơng giống như th ế nào, hãy<br />k iểm tra tra n g web tro n g hình 8-1. U nited S ta te s P o stal Servive<br />(www.usps.gov) cung cấp form trực tuyến này để đăng ký các thay đổi<br />địa chỉ của các gia đình hoặc cơ sở kinh doanh chuyển nhà và muốn thư<br />clươc chuyển riếp đến VỊ trí mới của họ.<br />IHnvMiRtiiH* ' VA*n<br /><br />Mnvtrwj SnluliMt • ‘Mir.ioxflftFvplrfci<br /><br />□ 3x]<br /><br />U N IT E D S T A T E S<br />PO STA L<br /><br />séiĩvtcẽs<br /><br />MoversGuide<br /><br />“ MA !: r f V O' I R A f O f i F S s O N l I N P<br /><br />Cltamjcyuur ¿tídiess<br />Movinij services<br /><br />Fill out tho change of address form<br /><br />ful >1)IS<br /><br />Communitymío<br />Olh'íí ierwces<br /><br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />N am e<br /><br />PieftxTiHe tHtio)<br /><br />FirstName(ofwaft<br /><br />|<br /><br />Middle Name ,cx nbaf; (Hup)<br /><br />|<br /><br />last Name<br />SijTot<br /><br />|<br />jn/A<br /><br />Ạ<br />Hình 8.1 Thay đểi form địa chỉ trẽn web site U.SLIDE. Postal Service.<br /><br />Trường form đầu tiên trên màn hình được ghi nhãn là "Prefix Title"<br />cho phép người dùng chọn từ một số tiền tố tên (chẳng hạn như "Dr.,"<br />"M arker.," và "Mrs."). Nếu họ không sử dụng một tiền tố trước tên của<br />họ, họ có th ể chọn "N/A" thay cho not applicable (không th ể áp dụng).<br />Điều khiển này được gọi là một list box (hộp danh sách) vì bằng cách<br /><br /> <br />188<br /><br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />Chương 8: xử lý các web form<br /><br />n h ấn nút mũi tên hướng xuống người dùng sẽ thấy một số tùy chọn mà<br />họ có th ể chọn.<br />¿ I MoveitGuiđe • Youf Complete Moving Solution • MiciDtoO Inteinel Ettptofet<br /><br />O* £d¡t y»** Ffvorfof Jooh<br />.....Fr.y*ó -i Stop<br />"a5<br />- "<br />iSI<br />ò<br />ỡ ck<br />Rteth Home<br />ô<br /><br />f<br /><br />I 'ó<br />'Ê <br />I Search Favorite«<br /><br />Mcdạ<br /><br />-3<br />& Ịiơ'<br />\ & ¡Maỉ<br /><br />Hưỉoty [<br /><br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />U M T E D STATES<br />P O S TAL S E R V IC E «<br /><br />,<br /><br />:/<br /><br />-;i;V<br /><br />M o v e r s G u id e<br /><br />-<br /><br />*■'<br /><br />C H A ', c t<br /><br />V 0 u K A D D fl £ $ s<br /><br />0 H L 1 N «:<br /><br />rtiMigpymir MfcfrftKS<br /><br />Mcvttig Sdrvti e s<br /><br />F ill o ư t t h * c h a r g e o f a d d r e s s *orrn<br /><br />Heílífiíltos<br />Community into<br /><br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />Name<br /><br />Crti»Cĩ services<br /><br />Prefix Tine ĩHtia)<br /><br />WA<br /><br />Flr$IN *m e(orrể«) iHtip*,<br /><br />cấ<br />OR<br /><br />Middle Name (or ntnl) m<ir)<br />Last Name (Ht'p-J<br />Suffix Titie: fHtio'i<br /><br />Lli<br />sgfo«*<br /><br />r<br /><br />HON<br />xx?€<br />KtẳS<br />hfí<br /><br />MRS<br />MS<br />SA<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br /><br />r r ;l3 Í70Irteme*<br /><br />Trường form được ghi nh ãn là "First Name" là m ột tex t box cho<br />phép người dùng nhập m ột hoặc nhiều ký tự sử dụng bàn phím. Đơi khi<br />các nhà lập trìn h đặt các giới hạn trên trường này sử dụng JavaS cript,<br />nhưng người dùng thường có th ể nhập bất kỳ tổ hợp mẫu tự, số hoặc<br />Symbol đặc biệt. Các nhà lập trìn h có th ể sứ dụng m ột HTML để xác<br />định m ột chỉều dài tối đa nho tníờng nàv.<br />Khi ngươi dùng đã nhập xong dữ liệu cá nhân, nọ được đé nghị nhâp<br />vào một nút subm it HTML. Nút subm it làm cho dữ liệu từ web form được<br />gởi đến m ột chương trìn h đang đợi trên web server để xử lý. Sử dụng<br />JavaScript, các nh à p h át triển web có th ể hiệu lực hóa dữ liệu trước<br />khi cho phép việc đệ trìn h đến web server tiến hành.<br />Xử lý dữ liệu nhập Form bằng JavaScript phía Client<br /><br />Một khi form đã được điền vào và được đệ trìn h , nó thường được gởi<br />đến một web server để xử lý. Điều quan trọng là phải chú ý rằng nó<br />khơng n h ấ t th iế t phải được gởi đến một web server - đôi khi các web<br />form có th ể được xử lý hồn toàn trê n Client sử dụng JavaScript. Bạn<br />sẽ cần thấy những form phía Client này dưới dạng các chương trìn h<br />tín h tốn trực tuyến và những cơng cụ tương tự ở đó JavaS cript đủ<br />thơng m inh để tín h toán k ết quả mong muốn và thực hiện h àn h động<br />được yêu cầu m à không cần sự trợ giúp từ m ột web server.<br /><br /> <br />Chương 7: Các Struct, Enum và thc tinh<br /><br />189<br /><br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />Kêi quả:<br />Chương trìn h này sẽ tạc ra hộp thông báo được m inh họa trong<br />hỉnh 7.1.<br /><br />OK<br /><br />L<br />Hình 7 1 Hộp thơng báo<br /><br />Thực hành 7.5<br />Viếl một chương tririh để C )Ọ ! rrột tron-3 các: hàn riêng của C-T+ chẳng han<br />!ih j pu;s nầm trong .hư viện ns/crt.đll<br /><br />7.íi.S Mó ị^hỏr.g c«{ li jr. Kọ'|j<br />Có th ể sử dụnjí các ỉhuộc tính đế mn phóng các<br />trong Cr+ nhơ dược t.rmh bay trong Vì du sau đ â\:<br />[type: StructL ayout(L3youtKinrJ Explicit)]<br /><br />public siruf't UiitonStiucf.<br />(<br />[field: Field0ffset(0;j /I offset #(J<br />public int i;<br />[field: FieldOffset(O)] // offset #0<br />public double d;<br /><br />Ỉ<br />Trong ví dụ này hai thuộc tính được sử dụng:<br />[type: StructLayout(LayoutKind.Explicit)]<br />[field: FieldOffset(O)]<br /><br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />lién hơp (union)<br /><br /> <br />190<br /><br />Chương 8: Xử lý các web form<br /><br />B Một binary dược biên dịch đítợc tiết bằng hầíi như bất kỳ ngơn nqữ<br />(chẳng hạn nhìỉC).<br />Một khi những chương trìn h này chấp nhận dữ liệu được đệ trình<br />bởi web form, chúng thường thực hiện b ất kỳ việc xử lý được yêu cầu và<br />sau đó phản hồi lại trìn h duyệt bằng một tra n g HTML khác. Tiến<br />trìn h giao tiếp giữa client và server được m inh họa trong hình 8-3. Nó<br />m inh họa một ví dụ về một người dùng thực hiện một cuộc tìm kiếm tại<br />một trong các web site bộ máy tìm kiếm lớn. Web server chấp nhận<br />các từ khóa sử dụng một form HTML, kiểm tra cơ sở dữ liệu của nó để<br />tìm các tra n g web liên quan và trả về một tran g web HTML mới có kết<br />quả.<br />Chèn một form HTML vào một trang web<br /><br />Các form được thêm vào các tran g web giống như cách các ảnh, text<br />và những phần tử khác của trang, với m arkup HTML. Các nhà p hát<br />triển có th ể định nghĩa tấ t cả phần của một form bao gồm các điều khiển<br />(control) mà nó chứa và chúng được sắp xếp như th ế nào sử dụng các thẻ<br />HTML chuẩn.<br /><br />Sử dụng thể &lt;form&gt;<br />Trong HTML, các form được định nghĩa sử dụng thẻ &lt;form&gt;. Thẻ<br />&lt;form&gt; cho phép bạn định nghĩa loại form mà bạn muốn tạo bao gồm<br />URL của chương trìn h đợi chấp nhận dữ liệu nhập của người dùng (nếu<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />có). Những form này được xác định sử dụng các thuộc tính của phần tử<br />&lt;form&gt;. Một thuộc tín h (attribute) là tham sơ được đặt tên của một phần<br />tử và đữ liêu đi kèm Cán thiiôc. tín h đươc xác đinh bãng cách sau đâv:<br />•<br /><br />•<br /><br />•<br /><br />•<br /><br />o<br /><br />&lt;element attribute1=&quot;valuer attnbute2=&quot;value2&quot; ... attribute3=&rdquo;value3*&gt;<br /><br />Googlc.com<br /><br />n<br />1. I w n submitted<br />10 web server.<br /><br />2. Web server<br />. checks its database.<br /><br />w eb browser<br /><br />Googh<br /><br />3. New web page<br />returned to tuer.<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br /><br />ềỂ Ể B ủ<br />*srass=z<br /><br />• database<br /><br />Webserver<br /><br />Hình 8.3 Giao tiếp giữa Client và server khi một form HTML được đệ trình.<br /><br />P h ần tử &lt;form&gt; có những thuộc tín h sau đây:<br />ẫ! id Chuỗi phải duy nhất qua toàn bộ trang web<br /><br /> <br />Chương 8: x ử lý các web form<br /><br />191<br /><br />B class Danh säen các class css được két hợo<br />n style Các ỉệììb style css nội dồng (ĩnHne)<br />B title Tiêỉi dề tư vẩn<br />R lang Mã ngôn ngứ ISO<br />ẫf d ir Hướng của rext ú ừ phái sang trái hoặc trí trái sang phải)<br /><br />R action ƯRI của chương tnno vốn sẽ x ù ly áữ liệu form<br />B m ethod Các dứ liệu sẽ được chuyển đến sewer (GET hoặc POST)<br />u enctype Kiểií mã hóa M1.MF,<br />R accept Dank sách các kiểu MJME dươc chắp nhận để upload file<br />B accept-charseí Danh sách các charset được hồ trợ<br />Ngồi tấ t cả thuộc tín h đó, phần tử &lt;form&gt; cũng có thể chứa một số<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />phương thức xử lý sự kiện (event handler). Các event là những hành<br />động thường được khởi tạo bưi người dùng chẳng h ạn như di chuyển<br />chuôt hoặc các thao tác nk ấn phim r.hất định. Các event h i r d l e r là ra#,<br />va hàm Jav aS crip t được th iế t kế ồể tác động khi các sự kiện n h ấ t định<br />xảy ra. Chương 9 so irìah bày chi ù é t non cac pnuơng thức xủ lý áự<br />kiện HTML ấn định sẵn.<br /><br />Bi U U Y Ề r<br />Gửi mai) i . ộ; tíui.g cCa một fưin iến jạn<br />Thc tính action oủa *hẻ &lt;-form&gt; cho nhép ban xác định UR! weh ser /e''<br />cho chương trinh mà Stì xử lý form. Chương trmh này thường ià một ỉrang<br />A S P , Java serviet hoặc môt script Perl chạy trên một web server đích.<br />Bạn cĩíng có thể ra lệnh trinh duyệt gở; e-nai! cho bạn nội dung của form<br />thay vào đó. Đtều này được thưc hiện báng cách cung cấp một địa chỉ email sử dụng giao thức mailto: cho thuộc tinh action. Để tạo một URI sử<br />dụng giao thức mailto, ban chỉ việc thém đia chì e-rriail tnật sự váo chuỗi<br />mailto: như sau:<br />mailto : <br />Nếu bạn đã sử dụng chuỗi trước làm URI chc thuộc tính action, nội dung<br />của web form sẽ được gởi mail đến tổng thống của nước Mỹ.<br />Tuy nhiên, kỹ thuật này khơng được bảo đảm vì nó sử dụng chương trình<br />mail được cài đặt trên máy tính của người dùng. Chương trình có thể khơng<br />được xác lập chính xác để gởi e-mail hoặc người dùng có thể hủy gỏi email.<br /><br /> <br />192<br /><br />Chương 8: x ử lý các web form<br /><br />Bây giờ chúng ta chỉ quan tâm đến hai sự kiện có th ể xảy ra với một<br />web form :<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br /><br />H onsubmit Mã JavaScript vốn có thể được chạy tniớc khi form đìỉợc<br />đệ trình<br />R o n reset Mã JavaScript vốn sẽ được chạy tnỉớc khi dữ liệu của form<br />bị xóa.<br />Một số phần tử HTML có những thuộc tính b ấ t buộc nghĩa là các<br />thuộc tín h phải ln hiện diện. P hần tử &lt;form&gt; là một trong số đó, vì<br />thuộc tín h action phải luôn được xác định để HTML được hợp lệ.<br />Loai form cơ bản n h ấ t như sau:<br />&lt;form action-T&gt;<br />&lt;/form&gt;<br />Mã HTML này tạo một form rỗng không chứa b ấ t kỳ điều khiển. Các<br />form chẳng h ạn như form này dĩ nhiên hồn tồn vơ dụng bởi vì chúng<br />khơng có mục đích. Các phần tử HTML &lt;form&gt; th ì ẩn vì chúng khơng<br />có một th àn h phần trực quan. Các điều khiển form (ví dụ các nút và<br />text box) là những th àn h phần trực quan của các form. Các form cũng<br />có th ể chứa text, các bảng (table) và những phần tử HTML khác.<br />• ••••••<br /><br />Thủ thuật<br />Dấu pound (#) thường được sử dụng làm giá trị cúa thuộc tính action của thẻ<br />&lt;form&gt; khi khơng cần gì cả, vì thuộc tính action bắt buộc và khơng thê được bỏ<br />qua. Bạn có thể sử dụng thuộc tính này cho các form được thiết kế để chỉ hiện<br />hũ\j trên client mà sẽ khơng bao giờ cần được đệ trình đến server. Dấu pound<br />(#) là môt trong các UPL hợo lệ ngắn nhất<br /><br />Thêm các điều kliiển form<br />Như bạn đã thây các form khá vơ dụng nếu khơng có các điều khiển<br />(control). Các control forra cho phép các tran g web nhập dữ liệu người<br />dùng. Một số control cho phép người dùng tự nhập te x t và m ột số control<br /><div style="text-align: center;margin-top: 10px; height: 280px;"><ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><br />cung cấp cho người dùng một số tùy chọn định nghĩa sẵn để chọn lựa.<br />Các control form được thêm vào các phần tử &lt;form&gt; bằng HTML riêng<br />của chúng. Bảng 8-1 liệt kê các control nhập liệu thông thường cùng với<br />HTML được yêu cầu để thêm chúng vào một tra n g web.<br />Chấp nhận dữ liệu nhập Text với một Text Box<br />Có lẽ loại control form thông thường n h ấ t là te x t box. Thực tế control<br />text box là loại mặc định của phần tử &lt;input&gt;. M ã HTML sau đây sẽ tạo<br />một web form với một text box bên trong.<br />&lt;form action=&rdquo;#&rdquo;&gt;<br /><br /> <br /> </p><!-- <p class="text-xl pb-40 overlay-read-more absolute bottom-0 left-0 w-full text-center bg-gradient-to-t from-white to-transparent">--><!----><!-- </p>--><!-- </div>--><!-- <a href="javascript:" class="bg-secondary px-6 py-2 rounded text-white absolute bottom-0 left-1/2 mb-4 transform -translate-x-1/2" id="showmore">Xem Thêm</a>--> </div> <div style="position: relative;" class="col-span-3 hidden md:block px-1 text-center"> <div style="position: sticky;top: 10px;width: 300px; height: 600px;"> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-2979760623205174" data-ad-slot="8377321249"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> </div> <div class="vf_link_relate px-2 my-2"> <h2 class="vf_doc_relate text-2xl font-bold my-4">Tài liệu liên quan</h2> <ul class="grid grid-cols-12 gap-2"> <li class="col-span-6 md:col-span-2"> <div class="card-doc " onclick="actionDocRelated(this)"> <a class="card-doc-img" href="https://text.123docz.com/document/952893-tim-hieu-ngon-ngu-lap-trinh-maple-va-ung-dung-giai-mot-so-bai-toan-hinh-hoc-giai-tich.htm" title="TÌM HIỂU NGÔN NGỮ lập TRÌNH MAPLE và ỨNG DỤNG GIẢI một số bài TOÁN HÌNH học GIẢI TÍCH "> <i class="icon i_type_doc i_type_doc2"></i> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media.store123doc.com/images/document/14/nu/ir/medium_E3E5l4RO3s.jpg" width="124" height="179" alt="TÌM HIỂU NGÔN NGỮ lập TRÌNH MAPLE và ỨNG DỤNG GIẢI một số bài TOÁN HÌNH học GIẢI TÍCH " onerror="this.src='https://media.store123doc.com/images/default/doc_normal.png'"/> </a> <a class="card-doc-title" title="TÌM HIỂU NGÔN NGỮ lập TRÌNH MAPLE và ỨNG DỤNG GIẢI một số bài TOÁN HÌNH học GIẢI TÍCH " href="https://text.123docz.com/document/952893-tim-hieu-ngon-ngu-lap-trinh-maple-va-ung-dung-giai-mot-so-bai-toan-hinh-hoc-giai-tich.htm" target="_blank">TÌM HIỂU NGÔN NGỮ lập TRÌNH MAPLE và ỨNG DỤNG GIẢI một số bài TOÁN HÌNH học GIẢI TÍCH </a> <ul class="doc_tk_cnt"> <li> <i class="icon_doc"></i>13 </li> <li> <i class="icon_view"></i>983 </li> <li> <i class="icon_down"></i>0 </li> </ul> </div> </li> <li class="col-span-6 md:col-span-2"> <div class="card-doc " onclick="actionDocRelated(this)"> <a class="card-doc-img" href="https://text.123docz.com/document/954346-xay-dung-he-thong-quan-ly-de-tai-khoa-hoc-cap-bo-ngon-ngu-lap-trinh-php-va-co-so-du-lieu-mysql.htm" title="XÂY DỰNG HỆ THỐNG QUẢN LÝ ĐỀ TÀI KHOA HỌC CẤP BỘ - NGÔN NGỮ lập TRÌNH PHP và cơ sở dữ LIỆU MYSQL "> <i class="icon i_type_doc i_type_doc1"></i> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media.store123doc.com/images/document/14/nu/ld/medium_XbJQgLw5nE.jpg" width="124" height="179" alt="XÂY DỰNG HỆ THỐNG QUẢN LÝ ĐỀ TÀI KHOA HỌC CẤP BỘ - NGÔN NGỮ lập TRÌNH PHP và cơ sở dữ LIỆU MYSQL " onerror="this.src='https://media.store123doc.com/images/default/doc_normal.png'"/> </a> <a class="card-doc-title" title="XÂY DỰNG HỆ THỐNG QUẢN LÝ ĐỀ TÀI KHOA HỌC CẤP BỘ - NGÔN NGỮ lập TRÌNH PHP và cơ sở dữ LIỆU MYSQL " href="https://text.123docz.com/document/954346-xay-dung-he-thong-quan-ly-de-tai-khoa-hoc-cap-bo-ngon-ngu-lap-trinh-php-va-co-so-du-lieu-mysql.htm" target="_blank">XÂY DỰNG HỆ THỐNG QUẢN LÝ ĐỀ TÀI KHOA HỌC CẤP BỘ - NGÔN NGỮ lập TRÌNH PHP và cơ sở dữ LIỆU MYSQL </a> <ul class="doc_tk_cnt"> <li> <i class="icon_doc"></i>20 </li> <li> <i class="icon_view"></i>793 </li> <li> <i class="icon_down"></i>2 </li> </ul> </div> </li> <li class="col-span-6 md:col-span-2"> <div class="card-doc " onclick="actionDocRelated(this)"> <a class="card-doc-img" href="https://text.123docz.com/document/1216056-ngon-ngu-lap-trinh-c-va-cau-truc-du-lieu-pptx.htm" title="Ngôn ngữ lập trình C++ và cấu trúc dữ liệu pptx"> <i class="icon i_type_doc i_type_doc2"></i> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media.store123doc.com/images/document/14/rc/tg/medium_tgv1395527145.jpg" width="124" height="179" alt="Ngôn ngữ lập trình C++ và cấu trúc dữ liệu pptx" onerror="this.src='https://media.store123doc.com/images/default/doc_normal.png'"/> </a> <a class="card-doc-title" title="Ngôn ngữ lập trình C++ và cấu trúc dữ liệu pptx" href="https://text.123docz.com/document/1216056-ngon-ngu-lap-trinh-c-va-cau-truc-du-lieu-pptx.htm" target="_blank">Ngôn ngữ lập trình C++ và cấu trúc dữ liệu pptx</a> <ul class="doc_tk_cnt"> <li> <i class="icon_doc"></i>261 </li> <li> <i class="icon_view"></i>885 </li> <li> <i class="icon_down"></i>24 </li> </ul> </div> </li> <li class="col-span-6 md:col-span-2"> <div class="card-doc " onclick="actionDocRelated(this)"> <a class="card-doc-img" href="https://text.123docz.com/document/1929611-ngon-ngu-lap-trinh-fortran-va-ung-dung-trong-khi-tuong-thuy-van-part-10-pdf.htm" title="NGÔN NGỮ LẬP TRÌNH FORTRAN VÀ ỨNG DỤNG TRONG KHÍ TƯỢNG THỦY VĂN part 10 pdf"> <i class="icon i_type_doc i_type_doc2"></i> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media.store123doc.com/images/document/2014_07/23/medium_jau1406121734.jpg" width="124" height="179" alt="NGÔN NGỮ LẬP TRÌNH FORTRAN VÀ ỨNG DỤNG TRONG KHÍ TƯỢNG THỦY VĂN part 10 pdf" onerror="this.src='https://media.store123doc.com/images/default/doc_normal.png'"/> </a> <a class="card-doc-title" title="NGÔN NGỮ LẬP TRÌNH FORTRAN VÀ ỨNG DỤNG TRONG KHÍ TƯỢNG THỦY VĂN part 10 pdf" href="https://text.123docz.com/document/1929611-ngon-ngu-lap-trinh-fortran-va-ung-dung-trong-khi-tuong-thuy-van-part-10-pdf.htm" target="_blank">NGÔN NGỮ LẬP TRÌNH FORTRAN VÀ ỨNG DỤNG TRONG KHÍ TƯỢNG THỦY VĂN part 10 pdf</a> <ul class="doc_tk_cnt"> <li> <i class="icon_doc"></i>4 </li> <li> <i class="icon_view"></i>576 </li> <li> <i class="icon_down"></i>0 </li> </ul> </div> </li> <li class="col-span-6 md:col-span-2"> <div class="card-doc " onclick="actionDocRelated(this)"> <a class="card-doc-img" href="https://text.123docz.com/document/2034778-tim-hieu-ngon-ngu-lap-trinh-php-va-ung-dung-xay-dung-mot-website-ban-cac-style-va-transition-cho-proshow-ppt.htm" title="TÌM HIỂU NGÔN NGỮ LẬP TRÌNH PHP VÀ ỨNG DỤNG XÂY DỰNG MỘT WEBSITE BÁN CÁC STYLE VÀ TRANSITION CHO PROSHOW ppt"> <i class="icon i_type_doc i_type_doc4"></i> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media.store123doc.com/images/document/2014_08/01/medium_gqd1406823621.jpg" width="124" height="179" alt="TÌM HIỂU NGÔN NGỮ LẬP TRÌNH PHP VÀ ỨNG DỤNG XÂY DỰNG MỘT WEBSITE BÁN CÁC STYLE VÀ TRANSITION CHO PROSHOW ppt" onerror="this.src='https://media.store123doc.com/images/default/doc_normal.png'"/> </a> <a class="card-doc-title" title="TÌM HIỂU NGÔN NGỮ LẬP TRÌNH PHP VÀ ỨNG DỤNG XÂY DỰNG MỘT WEBSITE BÁN CÁC STYLE VÀ TRANSITION CHO PROSHOW ppt" href="https://text.123docz.com/document/2034778-tim-hieu-ngon-ngu-lap-trinh-php-va-ung-dung-xay-dung-mot-website-ban-cac-style-va-transition-cho-proshow-ppt.htm" target="_blank">TÌM HIỂU NGÔN NGỮ LẬP TRÌNH PHP VÀ ỨNG DỤNG XÂY DỰNG MỘT WEBSITE BÁN CÁC STYLE VÀ TRANSITION CHO PROSHOW ppt</a> <ul class="doc_tk_cnt"> <li> <i class="icon_doc"></i>29 </li> <li> <i class="icon_view"></i>815 </li> <li> <i class="icon_down"></i>4 </li> </ul> </div> </li> <li class="col-span-6 md:col-span-2"> <div class="card-doc " onclick="actionDocRelated(this)"> <a class="card-doc-img" href="https://123docz.com/document/2341164-con-tro-va-so-hoc-dia-chi-tren-ngon-ngu-lap-trinh-c-va-c.htm" title="Con trỏ và số học địa chỉ trên ngôn ngữ lập trình c và c++"> <i class="icon i_type_doc i_type_doc4"></i> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media.store123doc.com/images/document/2014_10/22/medium_xgz1413980361.jpg" width="124" height="179" alt="Con trỏ và số học địa chỉ trên ngôn ngữ lập trình c và c++" onerror="this.src='https://media.store123doc.com/images/default/doc_normal.png'"/> </a> <a class="card-doc-title" title="Con trỏ và số học địa chỉ trên ngôn ngữ lập trình c và c++" href="https://123docz.com/document/2341164-con-tro-va-so-hoc-dia-chi-tren-ngon-ngu-lap-trinh-c-va-c.htm" target="_blank">Con trỏ và số học địa chỉ trên ngôn ngữ lập trình c và c++</a> <ul class="doc_tk_cnt"> <li> <i class="icon_doc"></i>28 </li> <li> <i class="icon_view"></i>370 </li> <li> <i class="icon_down"></i>0 </li> </ul> </div> </li> <li class="col-span-6 md:col-span-2"> <div class="card-doc " onclick="actionDocRelated(this)"> <a class="card-doc-img" href="https://123docz.com/document/2341167-kieu-du-lieu-don-gian-cua-ngon-ngu-lap-trinh-c-va-c.htm" title="Kiểu dữ liệu đơn giản của ngôn ngữ lập trình c và c++"> <i class="icon i_type_doc i_type_doc4"></i> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media.store123doc.com/images/document/2014_10/22/medium_tht1413980373.jpg" width="124" height="179" alt="Kiểu dữ liệu đơn giản của ngôn ngữ lập trình c và c++" onerror="this.src='https://media.store123doc.com/images/default/doc_normal.png'"/> </a> <a class="card-doc-title" title="Kiểu dữ liệu đơn giản của ngôn ngữ lập trình c và c++" href="https://123docz.com/document/2341167-kieu-du-lieu-don-gian-cua-ngon-ngu-lap-trinh-c-va-c.htm" target="_blank">Kiểu dữ liệu đơn giản của ngôn ngữ lập trình c và c++</a> <ul class="doc_tk_cnt"> <li> <i class="icon_doc"></i>43 </li> <li> <i class="icon_view"></i>424 </li> <li> <i class="icon_down"></i>0 </li> </ul> </div> </li> <li class="col-span-6 md:col-span-2"> <div class="card-doc " onclick="actionDocRelated(this)"> <a class="card-doc-img" href="https://123docz.com/document/3211806-bai-giang-ngon-ngu-lap-trinh-c-chuong-13-toan-tu-tren-lop.htm" title="Bài giảng ngôn ngữ lập trình c chương 13 toán tử trên lớp"> <i class="icon i_type_doc i_type_doc2"></i> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media.store123doc.com/images/document/2015_12/03/medium_nym1449143821.jpg" width="124" height="179" alt="Bài giảng ngôn ngữ lập trình c chương 13 toán tử trên lớp" onerror="this.src='https://media.store123doc.com/images/default/doc_normal.png'"/> </a> <a class="card-doc-title" title="Bài giảng ngôn ngữ lập trình c chương 13 toán tử trên lớp" href="https://123docz.com/document/3211806-bai-giang-ngon-ngu-lap-trinh-c-chuong-13-toan-tu-tren-lop.htm" target="_blank">Bài giảng ngôn ngữ lập trình c chương 13 toán tử trên lớp</a> <ul class="doc_tk_cnt"> <li> <i class="icon_doc"></i>12 </li> <li> <i class="icon_view"></i>324 </li> <li> <i class="icon_down"></i>0 </li> </ul> </div> </li> <li class="col-span-6 md:col-span-2"> <div class="card-doc " onclick="actionDocRelated(this)"> <a class="card-doc-img" href="https://123docz.com/document/3503950-bai-giang-ky-thuat-lap-trinh-nang-cao-chuong-1-kien-thuc-co-ban-ve-ngon-ngu-lap-trinh-c-va-c.htm" title="Bài giảng kỹ thuật lập trình nâng cao chương 1 kiến thức cơ bản về ngôn ngữ lập trình c và c++"> <i class="icon i_type_doc i_type_doc2"></i> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media.store123doc.com/images/document/2016_04/22/medium_ftKE26QCwM.jpg" width="124" height="179" alt="Bài giảng kỹ thuật lập trình nâng cao chương 1 kiến thức cơ bản về ngôn ngữ lập trình c và c++" onerror="this.src='https://media.store123doc.com/images/default/doc_normal.png'"/> </a> <a class="card-doc-title" title="Bài giảng kỹ thuật lập trình nâng cao chương 1 kiến thức cơ bản về ngôn ngữ lập trình c và c++" href="https://123docz.com/document/3503950-bai-giang-ky-thuat-lap-trinh-nang-cao-chuong-1-kien-thuc-co-ban-ve-ngon-ngu-lap-trinh-c-va-c.htm" target="_blank">Bài giảng kỹ thuật lập trình nâng cao chương 1 kiến thức cơ bản về ngôn ngữ lập trình c và c++</a> <ul class="doc_tk_cnt"> <li> <i class="icon_doc"></i>52 </li> <li> <i class="icon_view"></i>520 </li> <li> <i class="icon_down"></i>0 </li> </ul> </div> </li> <li class="col-span-6 md:col-span-2"> <div class="card-doc " onclick="actionDocRelated(this)"> <a class="card-doc-img" href="https://123docz.com/document/3725533-ngon-ngu-lap-trinh-c-va-c.htm" title="Ngôn ngữ lập trình C và C+"> <i class="icon i_type_doc i_type_doc2"></i> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media.store123doc.com/images/document/2016_07/21/medium_HfbEcnjBFG.jpg" width="124" height="179" alt="Ngôn ngữ lập trình C và C+" onerror="this.src='https://media.store123doc.com/images/default/doc_normal.png'"/> </a> <a class="card-doc-title" title="Ngôn ngữ lập trình C và C+" href="https://123docz.com/document/3725533-ngon-ngu-lap-trinh-c-va-c.htm" target="_blank">Ngôn ngữ lập trình C và C+</a> <ul class="doc_tk_cnt"> <li> <i class="icon_doc"></i>287 </li> <li> <i class="icon_view"></i>361 </li> <li> <i class="icon_down"></i>0 </li> </ul> </div> </li> </ul> </div> <div class="ads_center text-center"> <ins class="adsbygoogle" style="display:block; height: 300px;" data-ad-client="ca-pub-2979760623205174" data-ad-slot="7919569241" data-ad-format="auto"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div></div><div id="to_top" class="w-10 h-10 fixed z-10 right-0 bottom-0 mr-4 mb-16 bg-white rounded-full cursor-pointer" onclick="scrollToTop()"> <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="text-secondary w-10 h-10 rounded-full opacity-75 hover:opacity-100"> <circle cx="12" cy="12" r="10"></circle><polyline points="16 12 12 8 8 12"></polyline> <line x1="12" y1="16" x2="12" y2="8"></line> </svg></div><div class="background-transparent hidden bg-gray-300 opacity-50 fixed top-0 left-0 w-full h-full"></div><div class="popupText bg-white" gtm-element="GTM_Click_popup_text_redirect_document" gtm-label="GTM_Click_popup_text_redirect_document" onclick="window.open('https://123docz.com/document/8299524-ngon-ngu-lap-trinh-javarscript-va-huong-dan-tu-hoc-phan-2.htm', '_blank');hide_popup()"> <div class="relative px-8 py-6"> <p><img class="mx-auto" src="https://media.store123doc.com/images/email/icon_123doc.png"></p> <div class="popupText_body mt-4"> <h3 class=" mb-4 font-bold">Tài liệu bạn tìm kiếm đã sẵn sàng tải về</h3> <div class="bg-gray-300 py-2 px-4 rounded text-sm"> <a class=" "> <i class="icon i_type_doc i_type_doc2"></i> <label>(5.36 MB - 178 trang) - Ngôn ngữ lập trình JavarScript và hướng dẫn tự học : Phần 2</label> </a> </div> <a class="bg-secondary px-4 py-2 rounded block mt-6 text-white text-center">Tải bản đầy đủ ngay <i class="icon_download"></i></a> </div> <a class="absolute top-0 right-0 px-4 py-2 text-3xl">×</a> </div></div><div id="footer"> <footer class=""> <h3 class="doc_logo_footer text-center py-8"><a href="javascript:;"></a></h3> <div class="bg-main-background text-xs p-4 text-center text-text-default"> <div> <p>Copyright © 2020 123Doc. Design by 123DOC</p> </div> </div> </footer></div><div class="overlay fixed bg-gray-300 opacity-50 w-full h-full z-10 top-0 hidden"></div> <script type="text/javascript"> window.lazyLoadInstances = []; window.lazyLoadOptions = {}; window.addEventListener( "LazyLoad::Initialized", function (event) { window.lazyLoadInstance = event.detail.instance; }, false ); $(document).ready(function () { $("body").bind("ajaxComplete", function () { lazyLoadInstance.update(); }); }); </script> <script async type="text/javascript" src="https://static.store123doc.com/static_v2/web_v2//common/js/lazyload.min.js"></script> <script defer type="text/javascript"> let iconMenuLeft = document.querySelector(".icon_menu_left") , overLay = document.querySelector(".overlay") , body = document.querySelector("body") , toggleSearchIcon = document.querySelector("#search-toggle-icon") , searchIcon = document.querySelector("#GTM_Search_Search") , searchBox = document.querySelector("#search-box") , txtSearch = document.querySelector("#txtSearch"); iconMenuLeft.addEventListener("click", () => { let headerRight = document.querySelector(".headerRight") , overLay = document.querySelector(".overlay"); if (headerRight.classList.contains("hidden")) { headerRight.classList.remove("hidden"); overLay.classList.remove("hidden"); body.classList.add("overflow-hidden"); } else { headerRight.classList.add("hidden"); overLay.classList.add("hidden"); body.classList.remove("overflow-hidden"); } }); toggleSearchIcon.addEventListener("click", () => { if (searchBox.classList.contains("hidden")) { overLay.classList.remove("hidden"); searchBox.classList.remove("hidden"); body.classList.add("overflow-hidden"); txtSearch.focus(); } else { overLay.classList.add("hidden"); searchBox.classList.add("hidden"); body.classList.remove("overflow-hidden"); } }); function genKeyword(str) { q = str; var arrStr = str.split(' '); if (arrStr.length > 0) { q = ''; for (i = 0; i < arrStr.length; i++) { q += arrStr[i] + '+'; } q = q.substr(0, q.length - 1); } return q; } function searchEnter() { var q = genKeyword(txtSearch.value); var link = ''; link = '/doc/s/' + q; window.location.href = "http://123docz.net/" + link; } txtSearch.addEventListener("keydown", function (event) { if (event.which == 13) { searchEnter(); } });</script><script> const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); } };</script><script> var loadDeferredStyles = function () { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); var addStyle = addStylesNode.textContent; replacement.innerHTML = addStyle; document.body.appendChild(replacement); addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(function () { window.setTimeout(loadDeferredStyles, 0); }); else window.addEventListener('load', loadDeferredStyles);</script><script defer type="text/javascript"> (function (d, s, id) { var z = d.createElement(s); z.type = "text/javascript"; z.id = id; z.async = true; z.src = "//static.zotabox.com/0/1/01b41693609707a8d872dcf63564173f/widgets.js"; var sz = d.getElementsByTagName(s)[0]; sz.parentNode.insertBefore(z, sz) }(document, "script", "zb-embed-code"));</script> <!-- JS load sau các JS ngoài không cần thiết --> <script src="https://static.store123doc.com/static_v2/web_v2//common/js/jquery-3.5.1.min.js"></script> <script> var is_load = 0; function loadjs() { if (is_load == 0) { is_load = 1; $.getScript("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", function() { $('ins').each(function() { (adsbygoogle = window.adsbygoogle || []).push({}) }) }); } } $(window).scroll(function() { loadjs(); }); $(window).mousemove(function() { loadjs(); }); </script></body><script defer> var showPopup = 1;</script><script defer type="text/javascript" src="https://static.store123doc.com/static_v2/common/js/jquery-1.10.2.min.js"></script> <script defer type="text/javascript" src="https://static.store123doc.com/static_v2/text/js/popup_2.min.js?v=164"></script> </html>