Ngôn ngữ lập trình JavarScript và hướng dẫn tự học : Phần 2

Tài liệu tự học ngôn ngữ lập trình JavarScript: Phần 2 trình bày cách xây dựng các Website được bật trong JavarScript như tạo các script làm việc trong mọi trình duyệt, xử lý các web form, xử lý các sự kiện trình duyệt, giao tiếp giữa các khung trình duyệt và các nội dung khác.

Trang 1

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

Tọo cóc script làm việc trong mọi trình duụệt

T ro n g c h ư ơ n g n à y b ạ n s ẽ h ọ c n h ữ n g đ iể m c h ín h sa u đây:

B Tìm hiển các điểm khác biệt của trình dĩiyệt

K Phát hiện loại trình dĩiyệt nào mà người dừng đanq chạy

B Tnty 1 ’ấn mồ hình Ỳài liêi/

B Tuân theo các chuẩn web

M Viết m ã nhiều trình duyệt

Trong những ngày đầu p h á t triể n Jav aS crip t, việc xử lý những sự b ấ t thường giữa những n h à sản xuất trìn h duyệt và các

phiên bản khác nhau đã là m ột công việc khó khăn Sau cùng,

m ột số trìn h duyệt đã không hỗ trợ Jav aS crip t gì cả (như N etscape 1.0)

T hậm chí nếu b ạn có m ột trìn h duyệt hỗ trợ Jav aS crip t, mô h ìn h tà i liệu

(DOM) n ền tả n g là khác nhau giữa các trìn h duyệt khác nhau, nghĩa là

các lỗi Ja v a S c rip t r ấ t phổ biến

Sự khó k h ă n này của việc p h á t triế n m ã Jav a S c rip t vôn đã làm việc

chính xác tro n g mọi trìn h duyệt đã xảy ra chủ yếu do m ột sô" yếu tố:

K Các phiên bản trình duỵệt mới cách vài tháng

* Một cuộc cạnh tranh đang diễn ra giữa các công ty trình duyệt để

thêm các tính năng mới

Trang 2

M Thiếu một cktiẩn HTML h(,át JavaScript

M ất m ột số thời gian, nhưng cuối cùng các vân đề b ắ t đầu biến m ất khi Ja v a S c rip t ổn định Và khi người dùng b ắt đầu dần dần nâng cấp lên các trìn h duyệt phiên bản 4.0 trở lên, các nh à p h át triể n Jav aS crip t

có thời gian dễ dàng để p h á t triển mã tương thích nhiều trìn h duyệt

T h ật không may, m ột số thay đối sắp tới đối với Jav a S c rip t sẽ buộc các iilià p h á t triều v/eb p h ả ’ t ắ t đầu vLế'., 1-iã lại cho các điểm khác biệt của trìn h duyệt Các lý do cho thời điểm không ổn định mới này có th ể bao gồm:

M Sự hỗ trợ không nhất quán cho JavaScript 2.0

R Các phiên bản trình duyệt mới cácr? ìibau J’ải tháng (cụ thể từ Mozilla)

m Sự hỗ trợ trôn JavaScript không nhất qỉián cho nhũng công nghệ mới, chẳng ban nhítXML và c ss

Chỉ có thời gian mới cho biết những yếu tố này sẽ k h iến cho các nh à

p h á t triể n web phâi đau đầu như th ế nào

Tìm h iểu các điểm kh ác b iệt cua trìn h duyệt

Theo m ột C U Ộ I , khảo sát gầii (iây, Microsoft In te rn e t Sxploie) (IE) được sử dụng bởi khoảng 94% những người lướt web N etscape và Mozilla

có m ột mức sử dụng khoáng 2% 4% còn lại được ph ân chia giữa những

công ty khác chẳng h ạ n như O pera hoặc bị m ất do làm tròn

Nl-ững cor số nAy có vhổ vh;iy đổi trong cấc tháag- và n:\rn ¡’ắp tớK

N hà cuug cấp dịch vn in te rn e t (ISF) lớn n h ất r Mỹ gần đây đã thông báo nó sẽ b ắ t đầu sử dung N etscape làm trìn h duyêt mặc định cùa nó

và có th ể có tác động lơn đối với nhừng con số này

ĩ*Th'in kỹ h t r n ệ t chút £ố liôu th o o f kê V‘1 tín h th c n g d ụ n f trìnb duyệt gần đây như trong bang 7.1, chung ta có th ể th ầ v ră n g m ột nửa những người lướt \veđ đã chưa nâng cấp lên các phiên bản gần đây của các trin h đuyội- web jfu tiên họ

54% những người lướt web sử đụnEí các trìn h duyệt không phải là phiên bản mới n h ấ t "';ừ Microsoft hoặc Netscape Do đó hãy cẩn thận

khi tạo các chương trìn h JavaS cript phụ thuộc quá nhiều vào các tín h năng độc quyền hoặc các tín h năng mới được bổ sung Sử dụng các tín h năng m à không áp dụng những biện pháp phòng ngừa toàn bộ có th ể gây ra các lỗi cho m ột phần khán giả đáng kể th ậm chí nếu ứng dụng hoạt động tố t trong trìn h duyệt được cài đặt trê n PC

C ác loại lỗi có thể xảy ra?

Khi th iế t k ế b ất kỳ chương trìn h máy tính, điều quan trọng là phải ghi nhớ rằ n g các lỗi có th ể xảy ra b ất kể nh à lập trìn h cô" gắng h ế t m ình

để trá n h chúng Điều này đặc biệt đúng đối với các chương trìn h JavaScriptChương 7: Tạo các script làm việc trong mọi trình duyệt 169

Trang 3

170 Chương 7: Tạo các script làm việc trong mọi trình duyệtđược sử dụng qua nhiều trìn h duyệt và hệ điều h à n h khác nhau Khi

p h á t triể n m ã Jav aS crip t, bạn có th ể tìm th ấ y các nguồn lỗi sau đây:

B Nhĩing điểm khác biệt trong D ocum ent Object M odel của mỗi p h iên bản trình duyệt

R Các m áy tính client chạy các trình duyệt cũ (chẳng h ạ n n h ư Netscape 3.0) không hỗ trợ chức năng JavaScript nh ấ t đ ịn k

B Các m á y tính client có những công nghệ n h ấ t đ ịn b được tắt, chẳng

h ạ n n h ư cookie hoặc Java

B Các công nghệ được bật web mới, chẳng h ạ n n h ư các thiết bị xách tay, thiết bị di động, hoặc thậm chí các thiết bị gia dụng, chẳng hạn rưrntủ lạnh

Chương này sẽ xem x ét m ột sô" kỹ th u ậ t chung để tr á n h những loại lỗi này

Bảng 7.1 Thông sỗ' kỹ thuật sử dụng trình duyệt web gần đây

Phái hiện ỉoại trinh duyệt nào mà ngưừi dũng đang chạy

Chạy m ột chương trìn h Jav aS crip t h iện đại hoặc phức tạ p trong

m ột trìn h duyệt cũ hơn có th ể gây ra vô số sự số Có lẽ cách dễ n h ấ t để trá n h những loại lỗi này là p h á t hiện loại trìn h duyệt nào m à người dùng đang chạy và sau đó tắ t (disable) m ột số tín h n ă n g chương trìn h hoặc cung cấp m ã th ay th ế vốn thực h iệ n cùng m ột tác vụ b ằn g một cách hơi khác

C ¡& c Ệ a »

ẩánli hơi ỈPÌnh duqệt (Lpowsep sniffinq) Giốnq nkỉểu như mội con chó

ptiát liiện và tp<3 về nliữnq chi tiết dui) nliđt c ủ a phđn mềm trìn k dui^ệt.

Để p h á t h iện n h à sản xuất trìn h duyệt và m ột sô" p h iê n b ản , chúng

ta sẽ phụ thuộc vào đối tượng navigator DOM Đối tượng navigator có

m ột số phương thức và thuộc tín h , nhưng b a phương thức v à thuộc tín h

Trang 4

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

m ả chúng ta quan tầ m vào lúc riàv là appN am e, ap p V ersio n , và userA gent

var browserString = navigator.appName;

var browserVersion = navigator.appVersion;

var browserAgent = navigator.userAgent;

cá c script chạy trong các trình duyệt vốn không hỗ trợ số phiên bản JavaScript được xác định Để tạo một script mà sẽ chỉ chạy trong các trình duyệt h5 trợ Ja v iS c r pl 1 2, bạn sẽ sử dụng mã sau đây:

<f cripí lanc-uíige =".¡avarcr;p11

Điều tương tự có thể được thực hiện trong tất cả phiên bản của JavaScript lên phiên bản 1.5 (Một danh sách các số phiên bản JavaScript và chúng liên quan với trình duyệt như thế nào sẽ được tìm thấy trong chương 1).

Thật khcny n a y , rết r nhè phỉit triển wob biết rằng d!ều rà y có thổ được thực hiện và ít nhà phat triển hon (/ẫn thực su sử dụng kỹ thuật này khi tạo các script nhiểu trình duyệt Ngoài ra phương pháp này không giúp các

I nnà phát triển giai quyêt nhưng đièm knác Diệt liên quan đến DOlvl giừa các trinh duyệt khác nhau.

Do đó m ác du kỹ thuật này vẫn có sẵn, nhưng nó knông thể dươc Un cậy

để giải quyết các vấn đề viết script nhiểu trinh duyệt.

Đối với các trìn h duyệt web Netscape (bao gồm trìn h duyệt web Mozilla nguồn mở), thuộc tín h navigator.appN am e luôn t r ả về cùng m ột giá trị

b ất kể phiên bản hoặc hệ điều hành

Netscape

Đối với M icrosoft In te rn e t Explorer, thuộc tín h navigator.appN am e cũng t r ả về m ột giá trị có th ể dự đoán trước b ấ t k ể phiên bản

Trang 5

Do đó nếu tra n g web cần hiển th ị tex t khác nhau phụ thuộc vào trìn h duyệt m à m ột khách th am quan đang chạy, bạn chỉ việc tru y vấn thuộc tín h navigator.appN am e như sau:

var browserString = navigator.appName;

if (browserString == ' Netscape’ ) t

// Do something for Netscape/Mozilla here document.write (“ Long live the lizard.");

} else if (browserString == “Microsoft Internet Explorer") I

// Do something for Microsoft here document.write (“You will be assimilated.’’);

Tuy nhiên, navigator.appN am e cực kỳ giới h ạ n tro n g lượng thông tin m à nó cung cấp Những thuộc tín h navigator khác cung cấp thông tin hữu dụng hơn v í dụ, thuộc tín h navigator.appV ersicn c jn g cấp thòng tin phiên bản cụ th ể hơn Dôi với các ti'ình duyệt N eiseap, chuoi được tr ả về từ thuộc tín h đó hoàn toàn đơn giản

} else {

// The browser is not one of the major two document.write (“Why must you always be so different?”);

C U E D

Trang 6

Chương 7: Tạo các script làm việc trong moi trinh duyệt 173Tương tự, M icrosoft I n te r n e t E x p lo re r t r a về th ô n g tin p h iê n

b ả n của nó tro n g chuỗi n a v ig a to r.appV ersiơn, n h ư chúng ta có th ể

th ấ v từ ả n h chụp m àn hình sau đáv được lấy từ M icrosoft In te r n e t

E x p lo re r 6.0

Các phiên b ản gần đây của trìn h duyệt web M icrosoft luôn báo cáo

số p h iên ban là tương thích 4.0 Tuy nhien, số phiên bán thực sự được

n h úng sau đó tro n g cùng m ột chuỗi (trong trường hợp này là M SIE 6.0).Các trìn h duyệt Mozilla l.x, N etscape 6.Ü và N etscape 7.0 đểu dựa vào cùng m ột m ă nguồn, do đổ cách hoạt động của chúng r ấ t tương tự Nếu bạn đã từng n h ận đươc chính xác tén trìn h đuyột và m ột sô phiên bán tì; r hứng cr\nn 'luyệt này, bạn co th í t : u / vấn ohdệc án h userAgí.-n* của đòi tượpg navigator Như ban có f.h4’ th ấy từ hình m inh họa dưới đây, nó chứa m ột số thông tin phiên bản rấ t cụ th ể ngay đến ngày th án g chír.h xác m à trin h duyệt đã được biên dịch

Sử dụng' ba thuộc tín h nàv, chúng ta có th ể tạo m ột hàm Jav aS crip t

r n à Sií p h á t h i ệ n l o ạ i t T ì n h đ u y ẹ t e h ú i h X i í c m à n g ư ơ i d u n g l a n g c h ạ v

function getBrowserlntoO (

// Define variables »C contain the results var browserName - navigator.appName;

vai browserVersionNum = parseFloatinavigator.appVersion)

var browserAgent = navigator.userAgent;

// Boolean (true or false) variables to detect browser type var is J E = (browserAgent.indexOffMSIE") != -1);

var is_NN = (browserName.indexOffNetscape”) != -1):

// Based on browser type, retrieve version number

if (is_NN) {

if (browserVersionNum >= 5.0) { var tempStart = browserAgent.indexOf(“Metscape/”);

Trang 7

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

if (tempStart == *1) { // “ Netscape/” not found; must be Mozilla tempStart = browserAgent.indexOffrv:”);

tempStart += 3;

browserName = “Mozilla"

var tempEnd = browserAgent.indexOfO” , tempStart);

} else { // “ Netscape/” found; must be Netscape Gecko tempStart += 9;

var tempEnd - browserAgent.length;

}var browserVersion = browserAgent.substring(tempStart, tempEnd);

} else { // version < 5.0; must be old Netscape var browserVersion = browserVersionNum;

}} else if ( is J E ) { var lempStart = 0rowserAgent.indexOf(“M SIE’ );

tempStart += 5;

var tempEnd = browserApent.indexOff“ ;”, tempStart^;

Vqr jruwjeiVfcrsior =browserAgent.substring(tempStart, tempEnd);

}

// Create new property of navigator object based on real

// version number navigator.appRealVersion = browserVersion;

return;

}

getBrowserlnfo();

document.write (“<h1>You appear to be running:<brxbr>”);

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

Trang 8

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

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

n aviq atop đ ế 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 S C P Ì pt ( J q ì htlp://t>cl a p q co m /xb p p o ịects-cio c s M D O M )

c k o pkép byn sù d^nqi một ttfp l»ợp đối ỉưr;n q D O M c k u íín cho tố l cđ

fpìnli duL|ệt.

H ình m in h họa sau đây cho thấy hàm nhỏ chạy tro n g N etscape 2.0

và N etscape 7.0 như chế nào

[y?i Netscape - (JàvdScnpt sample code] Ö 0 E 3

■ m m ïûik* ûpfor» ßiwci low ;-!#

Trang 9

1 $ $ JavaSciipt «ample code - Neticdpe ■ H H T T n T T I

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

đơn g iản b ằn g cách sử dụng phương thức indexOfO của đôi tượng Jav a S c rip t String

Truy vấn mô hình đôì tượng (document mode!)

Vấn đề với việc phụ thuôc 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/ậ: 'd io ả 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 n h ãn hiệu khác chẳng h ạ n như O pera hoặc K onqueror 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 đ án g tin cậy nếu chúng chỉ được v iế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 th ay đổ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 lay er sẽ được thảo luận

th êm tro n g p h ầ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ả tro n g 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 Docum ent O bject 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

Trang 10

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 tr a xom 4rìn h duyệt h iệ r tại cổ bỗ trợ phương thức getElem entB yldO trước khi sứ dụng nó hay không, bạn chỉ việc tru y vấn đối tượng tài liệu để xem nó có m ột th à n h viên có tên đó trước k h i gọi nó hay không:

Dí n h iê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 đó:

đế đ ạ t được vẹn ca đôi đường

T rung th à n h vói những ch u ẩn Web

Trong nhữ ng ngày đầu p h á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 íc h 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 để te st

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

h ai phiên b ản full đằng sau phiên bản hiện hàn h

Dĩ nhiên, điều n ày đã dẫn đến hai chuẩn HTML th ay vì m ột chuẩn

đã làm cho công việc của n h à p h á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ả M icrosoft và N etscape quyết địnhChương 7: Tạo các script làm việc trong mọi trình duyệt _177

Trang 11

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 tr i hoãn thực th i các tín h năng HTM L và Ja v a S c rip t mới cho đến khi chúng được chấp th u ậ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 p hầ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 h o ạ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ó tuân 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 http://validator.w3.org 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ỳ

IE

IE, Netscape

iE, Netscape Netscape Netscape

IE, Netscape

IE, Netscape Netscape

IE, Netscape

IE, Netscape Netscape Netscape Netscape NetscapeVièt m ã n h iẽu trìn h duyệt

Ở p h ần trước tro n g chương

Jav aS crip t có th ể được sử dụng

chúng ta đã làm việc với một s ố m ã

để p h á t hiện tê n v à số p h iên bản ch ín h

Trang 12

Chương 7: Tạo các script làm việc trong moi trình duyêt 179xác cúa trìn h duyệt Client Trong phần này, chúng ta sẽ dặt m ã tương

tự để sử dụng với dynamic HTML.

Dynam ic HTM L (hoặc viết tắ t là DHTML) là m ột p hần mở rộng của chuẩn HTML cho phép các chương trìn h Ja v a S c rip t th ay đổi và chỉnh sửa một tra n g web sau khi nó được tả i tro n g trìn h duyệt m à không cần

p h ải quay trở về web server cho một tra n g mới P h ầ n lớn Jav aS crip t hoàr t ’.ián’i đitt-u nầy thônị, CUÍ \I ệ j xử 1} các phuơiig thức \ à thuôc tính

tro n g DOM của trìn h duyệt

Dynamic HTM L được sử dụng đều đặn bởi các site In te rn e t để cung cấp các m enu xổ xuống, hình ảnh và tex t vốn th ay đổi khi bạn di chuyển

cu rso r chuột lên trê n chúng và các shopping car (giỏ m ua sắm ) e- commerce tín h to á n iại tỏng chi phi của m ột đơn đ ặ t h àn g mỗi lần một hộp kiểm được chọn (được chọn hoặc được húy chọn) T rong những

th á n g gần đày, các nhà quảng cáo đã b ắt được lỗi DHTML và tạo ra quảng cáo động đi qua tra n g web (và không th ể được tắ t hoặc được trá n h '

Tuy nhiên, DHTM L nhiều ';rình duyệt khó viết m ã vì m ã Jav aS crip t được yêu cầu cho các trìn h duyệt N etscape và M icrosoft hoàn toàn khác nhau T rong Khi Việc chuẩn hóa làrn cho việc ỉập trin h HTML và Jav a S c rip t cơ b ả n trở nên dễ dàng hơn nhiều, so với chỉ cách đây một 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 tro n g những lĩn h vực rắc rối còn lại sau cùng

H inn 7.1 m in h họa mụt ví dụ về m òt tra n g web sử dụng DHTML Càv

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

hằng' m ột rú n h ắp chuôt đ('n grản Các mục m e n ổưc/c hiểi thị v ì 1u'Jc

ẩn m ột cách động m à khòng cần phải yêu cầu HTML mới từ web server I.o.ii m ỉr u DHTM L này '-ạ) ra rr.ột hiệ 1 fng ĨỊp m ắt cho nhữ nặ khách tham quan đến tra n g web cùa bạn

Một trong những tín h nâng đầu tiên mà bạn có th ể gặp phải là Netscape

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

m ột tài liệu web vori có th ể được áp dụng m ột style

<b>A gray square</b>

Trang 13

180 Chương 7: Tạo các script làm việc trong mọi trinh duyệt

th ay đổi các m àu nền của hai layer, và di chuyển m ột tro n g chúng sao cho chúng không phủ chồng hoàn toàn Hiệu ứng có th ể được th ấ y trong

h ìn h 7 2

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 của IE hoặc tro n g các trìn h duyệt N etscape 6 mới hơn C húng ta sẽ phải chỉnh sửa m ã m ột chút để p h á t h iện loại trìn h duyệt đ an g chạy va thực hiện các tác vụ khác nhau dựa vào m ă đó

Đầu tiê n chúng ta cần th ay đổi các layer để làm việc tro n g tấ t cả irìnli duyệt M ã sau đâ> khòng phù hợp với các chuẩn HTM L (vì thẻ

<layer> không phải là m ột phần của chuẩn), như ng nó sẽ làm việc trong cả TE và N etscape

Tree view ũem o

J ] This frame

4 -4 j Other Icons

Hình 7.1 Một menu cây có thể mở rộng sử dụng DHTML

Trang 14

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

<l¿yer id=’mylayer’>

<font color="white’'><b>A black squaie</bx/font>

</div>

</iayer>

:l2‘/er ¡ris'THayế*

<điv id=’mydiv2' style='position:absolyte’>

<b>A gray square</b>

Hình 7.2 Tạo các layer trong Netscape 4

Lưu ý cách chúng ta sử dụng thẻ HTML chuẩn <div> được xếp lồng bên trong th ẻ <)avẹr> không chuẩn Các trình đuvệt, không hỗ trợ <layer>

sẽ bỏ qua nó, vì các trìn h duyệt không hỗ trợ <div> sẽ bỏ qua th ẻ đó.Tiếp theo chúng ta cần chỉnh sửa script để p h á t h iện loại trìn h duyệt đang chạỵ

Chúng ta có th ể sử dụng script getBrowserlnfo trước đó tro n g chương, nhưng nhữ ng nhu cầu của chúng ta đơn giản hơn t h ế nhiềụ T ấ t cả những gì chúng ta cần làm là phát hiện sự khác b iệt giữa N etscape 4,

N etscape 6 và IẸ Để làm điều đó, sử dụng mã Ja v a S c rip t sau đây:

var ua = navigator.userAgent.toLowerCase();

var ie4 = uạindexOf(“msie”) != -1;

Trang 15

if (document.layers) { // Netscape 4 code goes here } else if (document.getElementByld && ie4) { // IE code goes here

) else if (document.getElementByld) { // Netscape 6 code goes here}

</script>

Mã này làm việc m ột cách k h á đơn giản N etscape 4 là trìn h duyệt 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 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à

N etscape 4 C húng ta có th ể làm thủ th u ậ t này sử dụng phương thức getE lem entB yld của đối tượng tài liệu ngoại trừ chúng ta vẫn cần p h ân biệt giửa IE 4 và N etscape 6 Thuộc tín h N avigator.user A gent cho phép chúng ta làm điều đó

Sau cùng chúng ta th êm m ã DHTML riên g b iệt theo trìn h duyệt để

xử lý hai th ẻ <layer> hoặc <div> trê n m àn h ìn h để tạo m ột hiệu ứng

<font color="white”><b>A black square</bx/font>

</div>

</layer>

<t»A gray square</b>

Trang 16

Chương 7: Các Struct, Enum và thuộc tính 183Mộ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 của các p h ần tử trong một m ảng s tr in g Ví dụ, bạn có th ể lưu trữ tên Color trong một m ảng như sau:

string[] colorNames = Enum.GetNames(c.GetTypeO);

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 lặp lại

Nhửng phương thức này được m inh họa trong ví dụ sau đây

Ví dụ 7.5•

// Example 7-5.cs

/.' Using System.Enum methods

using System;

// Declare tỉie Color enurn:

enum Color { Red = 1, Green, Blue }

class MyClass

(

static void Main(){

// Declare a blue color object:

Color myCc'or = Cc'l0f.B!ue:

// Display the color name using IcStnny:

Cjn.:ol3AVr.ie[jn3('M/ tolur !s: (0!” , myColtr), H B,je

// Declare 3 coior object' Color yourColor = new Color();

h Display the color wnose value IS 2 by using the GetName method: Console.WriteLinefYour color is: {0)”,

Enum.GetName(yourColor.GetType()f 2)); // Green // Display all the color names using the GetNames method:

Console WriteLine(“Your colors are:");

// Declare a string array for colors:

string[] colorNames = Enum.GetNames(yourColor.GetTypeO);

foreach (string s in colorNames) Console.WriteLine(“{0} s);

} }

Trang 17

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

HŨE

Cross-Browser Style Sheets Exaniple

“ " “ "A gray square

T rong chương tiếp theo chúng ta sẽ xem m ột tro n g những n hiệm

vụ chính của Ja v a S c rip t trê n In te rn e t - giúp người dùng điền vào các form B an sẽ học cach tạo m ọt form Dằng HTML, học vể t ấ t cả điều

k h iẽn (C ontrol) có th ể đi vào m ột form và xem Ja v a S c rip t có th ể được sử dụng để hiệu lực hóa dữ liệu được n h ậ p trước k h i nó được gởi đến serv er để xử lý.

Trang 18

Chương 8: x ử lý các web form 185

T ro n g ch ư ơ n g n ày bạn sẽ h ọ c n h ữ n g đ iểm c h ín h sa u đây:

J í Yêu cầu dữ liệu nbập của người iHing síỉ cìụnq một form HTML

R í n y 'hn rà XÍ'C 'ập cárgừí tri diều ừhìển form

7 _B Xứ lý nbiäu J e m Ị

Trong càc chương sử dụng như th ế nào để cung cấp các tran g web động chứa các ưưởc cnúng ta đã tn áy JavaScrip co the ũưực

menu hoạf bình hoặc bơi khác nhau phụ thuộc vào trìn h duyệt

web đang sử dụng hoặc thời gian trong ngày Khi thời gian trôi qua, các n h à p h át triể n sẽ thấy việc đưa những thủ th u ậ t Jav aS crip t đặc

biệt này vào các tran g chu cá n h ân riêng của họ trồ nên dễ dàng hơn

bao giờ hết

Điều đã khiến cho JavaScript không th ể thiếu được như là một công

cụ p h á t triển cho hầu hết các nhà p h át triển web chuyên nghiệp là khả

năng nó xử lý dữ liệu nhập người dùng Jav aS crip t làm cho việc thu

thập và xử lý thông tin người dùng trở nên dễ dàng hơn - cho cả người

dùng và n h à p h á t triển web JavaS cript có th ể hỗ trợ bằng nhiều cách:

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

(được gọi là các cookie).

R Kiểm chứng rằng tất cả tn(ờngform bắt buộc đã được cang cấp

Trang 19

186 Chương 8: xử lý các web form

R Hiệu lite hóa định dạng thích hợp của dữ ìiệu do ngifrii dùng nhập vào

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 đến web server

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 vài dòng mã B ằng việc giải quyết nhiều vấn đề hơn nó gây ra, JavaS cript

n h an h chóng trở th à n h một công cụ không th ể thiếu được cho các nhà

p h át triể n web nghiêm túc

Tìm h iểu c á c íorm HTML

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 dùng là bằng cáo form HTML Một form trong lập trìn h web là m ột loạt 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

dữ liệu n h ập người dùng Một điều k h iển người dùng (user control) thường là m ột hộp text, một hộp danh sách (list box) hoặc m ột nút (button) thuộc một loại nào đó cho phép người dùng cung cấp thông tin cho trìn h duyệt web Thực tế các web form được mô phỏng theo các 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 hoặc m ột cuộc khảo sát

Có 13 điều khiển người dùng trong HTML:

B P a ssivo rd box Cho phép một dòng dữ liệĩi nhập text chíỢt bảo vệ bằng các dấu sao.

* Text area Cho phép một hoặc nhiều dòng dữ liệu nhập.

R H idden Cờ thế chứa một dồng text đtỉợc ổn khỏ' rgườ1 dùng

B List box Người dũng có thể chọn từ một hoặc nhiều lựa chọn ấn định sẵn.

Ễt Radio button Người dũng có tbể cbọn một trong nhiềĩi lựa chọn ấn định sẩn.

B Check box Người dùng có thể chọn bất kỳ số trong nhiều lựa cbọn

ấn định sẵn.

R File Người dùng có thể upload một file từ máy cục bộ lên web sewer.

P ush button Làm cho một hànb động do chương trình ấn định xảy ra.

* Submit button Khiến cho form đìỉợc đệ trình.

B Im age button Tạo một nút submit đồ họa.

B R ese t button Làm cho form được xóa sạch.

Trang 20

n ú t radio th a y vào đó sẽ chiếm nhiều không gian hơn và có th ể khiến cho phần còn lại của form cuộn ra khỏi đáy m àn hình.

Yêu cầu dữ liệu nhập người dùng sử dụng một form H TM L

Để thây m ột form HTML điển h ìn h trông giống như th ế nào, hãy

k iểm tr a tr a n g w eb tro n g hình 8-1 U n ited S ta te s P o sta l Servive (www.usps.gov) cung cấp form trực tuyến này để đăng ký các th ay đổi

đ ịa chỉ của các gia đình hoặc cơ sở kinh doanh chuyển n h à và muốn thư clươc chuyển riếp đến VỊ trí mới của họ

Olh'íí ierwces

“ M A !: r f V O' I R A f O f i F S s O N l I N P Fill out tho change of address form

N a m e

PieftxTiHe tHtio)

First Name (of waft |

Ạ

Hình 8.1 Thay đểi form địa chỉ trẽn web site U.SLIDE Postal Service.

Trường form đầu tiên trên màn hình được ghi n h ãn là "Prefix Title" cho phép người dùng chọn từ một số tiền tố tên (chẳng hạn như "Dr.,"

"M arker.," và "Mrs.") Nếu họ không sử dụng một tiền tố trước tên của

họ, họ có th ể chọn "N/A" thay cho not applicable (không th ể áp dụng) Điều khiển này được gọi là một list box (hộp danh sách) vì bằng cách

Trang 21

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 à

họ có th ể chọn

¿ I MoveitGuiđe • Youf Complete Moving Solution • MiciDtoO Inteinel Ettptofet

O* £d¡t y»** Ffvorfof Jooh

ế " SI " 5

ìà c k Fr.y*ã -i ‘-Ọ i ß a I 'ã ' £ ị & \ &

F lr$IN *m e(orrể«) iHtip*, Middle Name (or ntnl) m<ir) Last Name (Ht'p-J

Suffix Titie: fHtio'i

c a á

OR HON xx?€

KtẳS

hfí

MRS MS SA

Trường form được ghi n h ãn là "F irst Name" là m ột tex t box cho phép người dùng n hập m ột hoặc nhiều ký tự sử dụng bàn phím Đôi khi các nh à lập trìn h đ ặt các giới hạn trê n trường này sử dụng Jav aS crip t, nhưng người dùng thường có th ể nhập b ất kỳ tổ hợp m ẫu tự, số hoặc Symbol đặc biệt Các nh à lập trìn h có th ể sứ dụng m ột HTML để xác định m ột chỉều dài tối đa nho tníờng nàv

Khi ngươi dùng đã n h ập xong dữ liệu cá n h ân , nọ được đé nghị nhâp vào m ột nút subm it HTML N út subm it làm cho dữ liệu từ web form được gởi đến m ột chương trìn h đang đợi trê n web serv er để xử lý Sử dụng JavaS cript, các n h à p h á t triể n web có th ể hiệu lực hóa dữ liệu trước khi cho phép việc đệ trìn h đến web server tiế n h ành

Xử lý dữ liệu nhập Form bằng JavaScript phía Client

Một khi form đã được điền vào và được đệ trìn h , nó thường được gởi đến m ột web server để xử lý Điều quan trọ n g là phải chú ý rằ n g nó không n h ấ t th iế t phải được gởi đến m ột web serv er - đôi khi các web form có th ể được xử lý hoàn toàn trê n Client sử dụng Jav aS crip t Bạn

sẽ cần th ấy những form phía Client này dưới dạng các chương trìn h tín h toán trực tuyến và những công cụ tương tự ở đó Jav a S c rip t đủ thông m inh để tín h toán k ế t quả mong muốn và thực hiện h à n h động được yêu cầu m à không cần sự trợ giúp từ m ột web server

Trang 22

Chương 7: Các Struct, Enum và thuôc tinh 189Kêi quả:

Chương trìn h này sẽ tạc ra hộp thông báo được m inh họa trong hỉnh 7.1

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

!ih j pu;s nầm trong hư viện ns/crt.đll

7 íi.S Mó ị^hỏr.g c«{ li jr Kọ'|j

Có th ể sử dụnjí các ỉhuộc tính đế mn phóng các lién hơp (union) trong C r+ nhơ dược t.rmh bay trong Vì du sau đ â \:

[type: StructL ayout(L3youtKinrJ Explicit)]

public siruf't UiitonStiucf

Hình 7 1 Hộp thông báo

Thực hành 7.5

Trang 23

190 Chương 8: Xử lý các web form

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ữ (chẳng hạn nhìỉC).

Một khi những chương trìn h này chấp n h ận dữ liệu được đệ trìn h 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à sau đó p h ản hồi lại trìn h duyệt bằng m ột tra n g HTML khác Tiến trìn h giao tiếp giữa client và server được m inh họa trong h ìn h 8-3 Nó

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 một trong các web site bộ máy tìm kiếm lớn Web server chấp nhận các từ khóa sử dụng một form HTML, kiểm tra cơ sở dữ liệu của nó để tìm các tra n g web liên quan và trả về một tra n g web HTML mới có kết quả

Chèn một form HTML vào một trang web

Các form được thêm vào các tra n g web giống như cách các ảnh, text

và những p h ần tử khác của trang, với m arkup HTML Các n h à p h át triể n có th ể định nghĩa tấ t cả p hần của một form bao gồm các điều khiển (control) m à nó chứa và chúng được sắp xếp như th ế nào sử dụng các thẻ HTML chuẩn

Sử dụng thể <form>

Trong HTML, các form được định nghĩa sử dụng th ẻ <form> Thẻ

<form> cho phép bạn định nghĩa loại form m à bạn muốn tạo bao gồm URL của chương trìn h đợi chấp n h ận dữ liệu n hập của người dùng (nếu có) Những form này được xác định sử dụng các thuộc tính của phần tử

<form> Một thuộc tín h (attribute) là th am sô được đ ặt tên của một phần

tử và đữ liêu đi kèm Cán thiiôc tín h đươc xác đinh bãng cách sau đâv:• • • • o

2 Web server checks its database.

ềỂ Ể B ủ • database

Webserver

P h ần tử <form> có những thuộc tín h sau đây:

ẫ! id Chuỗi phải duy nhất qua toàn bộ trang web

Trang 24

B class Danh säen các class c ss được két hợo

n style Các ỉệììb style css nội dồng (ĩnHne)

B title Tiêỉi dề tư vẩn

ẫf d ir Hướng của rext ú ừ phái sang trái hoặc trí trái sang phải)

R action ƯRI của chương tnno vốn sẽ x ù ly áữ liệu form

B m ethod Các dứ liệu sẽ được chuyển đến sewer (GET hoặc POST)

u enctype Kiểií mã hóa M1.MF,

R accept Dank sách các kiểu MJME dươc chắp nhận để upload file

B accept-charseí Danh sách các charset được hồ trợ

Ngoài tấ t cả thuộc tín h đó, phần tử <form> cũng có th ể chứa một số

phương thức xử lý sự kiện (event handler) Các event là những h àn h động thường được khởi tạo bưi người dùng chẳng h ạ n như di chuyển chuôt hoặc các thao tác n k ấn phim r.hất định Các event h i r d l e r là ra#,

va hàm Ja v a S c rip t được th iế t k ế ồể tác động khi các sự kiện n h ấ t định xảy ra Chương 9 so irìah bày chi ù é t non cac pnuơng thức xủ lý áự

kiện HTML ấ n định sẵn

B i U U Y Ề r

Gửi mai) i.ộ; tíui.g cCa một fư in iến jạn

Thuôc tính action oủa *hẻ <-form> cho nhép ban xác định UR! weh ser /e'' cho chương trinh mà Stì xử lý form Chương trmh này thường ià một ỉrang

A S P , Java serviet hoặc môt script Perl chạy trên một web server đích.

Bạn cĩíng có thể ra lệnh trinh duyệt gở; e-nai! cho bạn nội dung của form thay vào đó Đtều này được thưc hiện báng cách cung cấp một địa chỉ e- mail sử dụng giao thức mailto: cho thuộc tinh action Để tạo một URI sử dụng giao thức mailto, ban chỉ việc thém đia chì e-rriail tnật sự váo chuỗi mailto: như sau:

Trang 25

192 Chương 8: x ử lý các web formBây giờ chúng ta chỉ quan tâm đến hai sự kiện có th ể xảy ra với một web form :

H onsubmit Mã JavaScript vốn có thể được chạy tniớc khi form đìỉợc

Loai form cơ bản n h ấ t như sau:

</form>

Mã HTML này tạo một form rỗng không chứa b ấ t kỳ điều khiển Các form chẳng h ạ n như form này dĩ n h iên hoàn toàn vô dụng bởi vì chúng không có mục đích Các phần tử HTML <form> th ì ẩn vì chúng không

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à text box) là những th à n h p hần trực quan của các form Các form cũng

có th ể chứa text, các bảng (table) và những p h ần tử HTM L khác

• • • • • • •

Thủ thuật

Dấu pound (#) thường được sử dụng làm giá trị cúa thuộc tính action của thẻ

<form> khi không cần gì cả, vì thuộc tính action bắt buộc và không thê được bỏ 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 hũ\j trên client mà sẽ không bao giờ cần được đệ trình đến server Dấu pound

(#) là môt trong các UPL hợo lệ ngắn nhất

Thêm các điều kliiển form

Như bạn đã th ây các form khá vô dụng nếu không có các điều khiển (control) Các control forra cho phép các tra n g web n h ập dữ liệu người dùng Một số control cho phép người dùng tự n h ập te x t và m ột số control cung cấp cho người dùng một số tùy chọn định n g h ĩa sẵ n để chọn lựa Các control form được thêm vào các phần tử <form> b ằn g HTML riêng của chúng B ảng 8-1 liệt kê các control nhập liệu th ô n g thường cùng với HTML được yêu cầu để thêm chúng vào một tra n g web

Chấp nhận dữ liệu nhập Text với m ột Text Box

Có lẽ loại control form thông thường n h ấ t là te x t box Thực t ế control text box là loại mặc định của phần tử <input> M ã HTM L sau đây sẽ tạo một web form với một tex t box bên trong

Trang 26

Chương 8: xử lý các web form 193

<inpu;>

</form>

Bảng 8.1 Một danh sách các control form HTML.

Text bcx <input type="texi” >

r,ars\vord bcx chp'ft 3-="pis< 'v/orf4” >

Text area <textarea > </textarea>

List box <select > </sslect>

Radio button <inpưt tvpR=”radio” >

type-Push button <input type^’'button" >

Sibtnit bjtton <input type="submit” >

Reset button <input type=,,reset” >

Object control <object > </object>

D: r.h;'ên f-ạo một f()"m như vậy có một số khuyết điểm Đầu tiên bất

kỳ ngưrti nào đà ÉỊặụ ubái íorrn đó Iron^ là n h ouvệr web sẽ không biết phải làm g; với nó control không' được ghi nhãn No chỉ là một text box

>-,ằwi -r.Hi ír;.r.0r

Thú' hai các n h à phá t.rièn web xem mã dó có th ế th ấy nó hơi gâv

001 rói /1 concruì <nn\»a.'' ró IỊUÍ luipụ fr.:*n» Tót hơn h ã \ xác Lập loai control ưiội cách tư ờ n g rninh

Mội V'' c’u h a y h ơ r V'5 1 \Ộ( 'veb lbrTi cỏ Ihc là n h ư sau:

dorm act!0n='#%

Ple.dSíỉ entỉr yojr ags <cr>

</form>

Loại web form này úễ sừ dụng hơn cho cả nhà p h á t triề n web lẫn khách th am quan tra n g web

Control text box có một số thuộc tính cho các n h à p h át triể n thêm

kh ả năng điều k h iển đối với diện mạo và hành vi của control:

t f id Chuỗipbcú cổ tính duy nhất qua toàn bộ trang web

B class Danh sách CCIC class css di kèm

Trang 27

194 Chương 8: x ử lý các web form

M style Các lệnh style css nội dòng 0inline)

t t title Tiên đề tư vấn

B d ir Hướng của text (từphải sang trái hoặc từ trái sang p h ả i)

tu value Giá trị mặc định

R size Kích cỡ của control trên mein hình tính bằng các ký < ‘ự

R m axlength số ký tự tối đa có thể được nhập

R readonly Khóa control tao cho giá trị của nó !ĩb5ĩ.g th ể đĩ(ỢC cLỉnh sửa bởi người dùng

B accesskey Xác lập phím tắt

B tab in d ex Xác lập ký tự các control nhận tiên điểm trên một form

B disabled Khóa control sao cho nó không thể nhận tiêu điểm hoặc được chỉnh sửa bởi người dùng.

Ngoài các thuộc tín h trước, control n h ập liệu cũng cò th ể b ắ t giữ

m ột sô' sự kiện Chúng ta sẽ xem xét t ấ t cả phương thức xử lý sự kiện (event h an d ler) HTML định nghĩa sẵn m ột cách chi tiế t hơn trong chương 9 Bây giờ chúng ta chỉ cần quan tâm đến các sự kiện HTML sau đây

R onfocus Mã JavaScript mà sẽ chạy khi một control nhận được tiêu điềm.

B onblur Mã JavaScript mà sẽ được chạy khi một control mất tiên điểm

B onchange Mã JavaScript mà sẽ được chạy khi một control mất tiên điểm và giá trị nội dung của nó đã được thay đổi.

Bằng cách sử dụng một số thuộc tín h này trê n te x t box, chúng ta có

th ể cải th iện diện mạo và h àn h vi của control:

Please enter your <u>a</u>ge: <br>

Trang 28

ónpuì type-’ text" narr’ ếage’ Size=”õ" maxlength=”3'' vaiue="'' accesskey="A”>

</form>

Chúng ta đã giảm chiều dài nằm ngang của control th à n h rộng 5 ký

tự bằng việc sử dụng thuộc tính size="5" trê n control<input> Bằng cách xác định rnaxlength="3" chúng ta sẽ giới h ạ n dữ liệu nhập chỉ ti-ong chiều dài b i ký tự Ti ciùnjj ta la n k đòi hỏi m ột độ tuổi, giả định

b a chữ số là đủ th ì hợp lý

Thuộc tín h value="" xác định nội dung mặc định của trường sang

m ột chuỗi rỗng Tham số accesskey được xác lập sang ”A" trong ví dụ cho phép người dùng nhảy đến control bằng việc sử dụng tổ hợp phím ALT-A trong hầu h ế t các phiên bản của W indows hoặc tổ hợp phím CONTROL -A cho hầu hết các hệ thống Mac

Té? Lợ p phím cỉưọc ự£u cáu ctể kick hogt một phím tpui) cộp phg líiu ộ c

VC o :đ l o j i '’r ì i h dui^ệt và liệ điều lià n h , do đó h ãi) tham klido tà i liệu tpình d iiijệ t nếu bqn không th ế làm cho nổ hogt đ ộnq.

A Typical 1 ext Box Control

Please inter yv»ư

Cung cấp m ột control List Box

Một list box (hộp danh sách) là một control tiện lợi để sử dụng khi bạn cần người đùng chọn một trong nhiều lựa chọn Trong HTML, các list box được tạo sử dụng phần tử <select> và các mục trong danh sách được định n g h ĩa sử dụng phần tử <option> Có h ai loại list box m à bạn

Trang 29

196 Chương 8: x ử lý các web form

có th ể sử dụng bên trong các web form trê n web: drop-down list box (hộp danh sách xổ xuống) và list box cuộn

List box xổ xuống xuất hiện dưới dạng một tex t box có m ột nút mũi tên nhỏ k ế bên nó Việc nhấp mũi tên sẽ làm cho control tạo ra một cửa sổ pop-up có th ể cuộn mà trong đó người dùng có th ể chọn một trong nhiều lựa chọn như bạn có th ể th ấy ở đây.

Điểu bạn cần biết

B ảo m ật và In tern et

Các form HTML thường được sử dụng để cho phép các khách tham quan đăng nhập vào một web site NgJoi ciùr.g thường cung uấp một user iD vẻ password hợp lệ cho serve, tiu'ó'c khi Ổ Ư Ọ C cho phép đl vào các vùng hạn chế của site.

Từ quan điểm của một nhà phát triển, một text box nên được sử aụng để yêu cầu user ỈD từ người dùng Để tăng thêm tốc độ an ninh, một control password box nên được sử dụng để yêu cầu password của một người dùng Password box thay thế các ký tự được gõ nhập bằng các dấu sao sao cho password trỏ thành ******** Điều này được thực hiện sao cho những cá nhân khác xem cùng một monitor máy tính (ví dụ, trên vai của người dùng) sẽ không thể đọc password.

Tuy nhiên, bạn nên biết rằng đây là một loại an ninh rất kém Trừ phi dữ liệu form được mã hóa sử dụng Secure Sockets Layer (S S L ), thường sử dụng giao thức H TTP S, nếu không password sẽ được gởi lẽn trên Internet dưới dạng text thuần túy có thể dễ dàng được đọc bởi bất kỳ người nào hoặc người truy cập các nhật ký hoạt động của web server.

Ngưòi dùng khung thể gõ nnập text riêng cua m inh vao tex t box - họ phải chọn m ột trong các mục ấn định sắn Loại control này được sử dụng tốt n h ấ t khi có

tối thiểu ba tùy chọn

hộp kiểm (check box)

tố t hơn cho việc yêu

Trang 30

Chưdng 8' x ử 'ý céc 'vcb íorrr 197List box cuộn xuất hiện dưới dạng một tổ hơp của một text box nhiều dồng gắn vào một thanh cuộn thẳng đứng như bạn có th ể thấy ở đây.

~l

A Scrolled List Box Control

How ĩũàí-.y hours a week do you watch teievjSK fj?

Ngươi đùng' có t b ể chọn nhiều t r y cbọn *ừ rrột l?sr bo:: >.'uòn nêV r h ì

p h á t triể n đã xác đinh tlu ộ e tính multiple Một người dùng có th ể chọn nhiều tùy chọn bằng việc nhấn giữ phím CTRL (PC) hoặc COMMAND (Mac) trê n oàn phím khi chọn các mục từ d an h sách

HTML s;ui đny S‘~ì ‘ạ"' một ”17' với mộ' Ks* box xổ xuống bêr trcn f

B ằng cách xác lập thuộc tín h size, chúng ta có th ể chỉnh sửa list box

xổ xuống để trở th à n h m ột list box cuộn Vì thuộc tín h size chĩ cho

Trang 31

198 Chướng 8: x ử lý các web formphép ba mục hiển th ị cùng m ột lúc, người dùng sẽ có th ể th ấy h ai mục còn lại bằng việc sử dụng th a n h cuộn (scroll bar).

cíorm action=”#”>

What would you like for dinner?<br>

coption value=’T selected>Chicken</option>

t t id Chuỗi phải duy nhất qiưi toàn bộ trang web

B class Danh sách các class c ss đi kèm

B style Các lệnh style c ss nội dòng

R title Tiêu đề tư vấn

R lang Ală ngôn ngữ ISO

Ểf nam e Tên của control

B m ultỉpe Cho phép control chấp nhận nhiều lựa chọn

R tab index Xác lập kỷ tự các control nhận tiêu điểm trẽn một form

R disable Khóa control sao cho nó không thể nhận tiêu điểm hoặc được chình sửa bời người dùng

Bên cạnh các thuộc tín h trước, control list box cũng có th ể đón b ắt một số sự kiện Chúng ta sẽ xem xét các phương thức xử lý sự kiện HTML ấn định sẵn một cách chi tiế t hơn trong chương 9 L ist box có

th ể đón b ắ t ba sự kiện sau đây:

R onfocus Mã JavaScript mà sẽ chạy khi một control nhận tiêu điểm

B onblur Mã JavaScnp mà sẽ chạy khỉ một control mất tiêu điểm

B onchange Mã JavaScript mà sẽ chạy khi một control mất tiêu điềm

và giá trị nội dung của nó đã được thay đổi.

Trang 32

Chương 8: xử 'ý oác web ‘crm 199

P h è n tử HTML <option> có môt, số thuộc tín h riêng của nó:

B id Chuỗi phải duy nhỡt qua (oan ờộ irang web

B class Danh sách cức class css di kèm

R title Tiêu đề tư vấn

M lang Mã ngôn ngữ ISO

tẫ d ir Hướng của tex! (!ừphải sanq trải boặc từ trái sang phải)

B selected Định nghĩa một danh sách này là mặc định

Êf disable Khóa control rao chc ró không thể nhận tiêu điểm hoặc được chỉnh sứa bởi người đùng

ẵf label Định nĩịtiici một nhả 0 cho mục danh sácừ

Mí value Chuôi đttỢc trả vẻ sen er kbi một ngiiờỉ dùng chọn mục

Phần i;ử <option> cũng có 1;hể Iihận một số sự kiện Chương 9 sẽ xem

xéx, ch: t.ế t hơn 'Ẩx, cả phương thức xú' lý sụ kiện HTML ấn định sẵn.

Chấp nhận dữ liệu nhập text với một vùng Text

Một biến th ể của text box là text area (vùng text) Control te x t area :hấp nhận nhiều dòng nhập liệu và dược định nghĩa sử dụng phần tử HTM I c te x ta r ea> Một khuyết điểm của control tex t area ]à bạn không

tn ề giớ) bạn di- dàng lượng oữ lieu m à một người Gùng thêm váo contro l đó

Những tnuộc tín h pnố bièn n a â t cho phần tủ < textaiea> la rows, cols (columns) và name Như bạn thường mong đợi bạn quyết định

chiêu cao cua control sư đụ.ig t.H.ộc t.n.1 row.i và C,ii4u rộng cua ccn troi sử dụng thuộc tín h cols Ví dụ, vùng text, sau đây p h ải chứa 5 h àn g

rộng 60 ký tự

This is my example text area.

</textarea>

</form>

T ext mặc định được chén giữa các thẻ <textarea> và </textarea>

Thêm m ột Control Push Button vào một Form

K hông giống như các control khác, các push button (hoặc chỉ các button) thường không được sử dụng để cung cấp dữ liệu n h ập người dùng Mục đích của chúng là làm cho trìn h duyệt thực th i một số mã Jav a S c rip t th ô n g qua phương thức xử lý sự kiện onclick của nút Có

Trang 33

200 Chương 8: x ử lý các web formmột loại control push button đặc biệt được gọi là subm it button có th ể được sử dụng để cung cấp dữ liệu nhập người dùng P h ầ n tiếp theo sẽ xem xét các nút submit.

Trong HTML có hai cách để tạo một nút push đơn giản: bằng p hần

tử <input> và bằng phần tử <button> P h ần tử <input> được sử dụng để tạo loại nút push cơ bản n h ấ t như sau:

</form>

N út push được định rg h ĩa trong form này sõ gọi m ột hàm J a v iS c rip t

được gçi là dothisO khi được nhấn Truy cập value định xighĩa chú thích (caption) của nút hoặc n h ãn text trê n nút

P h ần tử <button> cho phép các nh à p h á t triể n tạo m ột loại nút push phức tạp hơn P h ần tử <button> chấp n h ận dữ liệu n h ậ p HTML phức tạp (bao gồm text và h ìn h ảnh) là chú thích của nó Ví dụ, n ú t push h iển thị một ản h dấu kiểm k ế bên từ OK bằng chữ in đậm Nó cũng sẽ gọi hàm Jav aS crip t dothisO khi nhấp

1 ' 3 Foini Controls - Micmsoll Intftinftt f RpkiMit

|l ] rte E<* \p fiv » * « '

\\ * ■ 3

" ' “

m - ' ' ' ^ v o r i i ö - ' 1

The H TM L <button> C ontrol in A ction

[ * O K

® D o n tf • * V4.* f UfMyCoffiputoi 7 “¿ 1

Trang 34

Chưtína 8: Cáo qiao diên 2018.6 Sử d ụ n g a s đ ể Test các kiểu

Toán tử as được sử dụng đế chuyền đổi m ột biểu thức th à n h một kiểu tham chiếu xác định No được sứ dụng theo dạng:

expression as type

trong đó:

t y p e là m ột kiểu tham chiếu.

expression là m ột dối tượng cần được chuyển đổi.

Nếu việc chuyển đổi th àn h công, nó trả về giá trị của biểu thức Nếu không, tr ả về giá trị null

Biểu thức này tương đương việc gán biểu thức có kiểu ngoại trừ nó không đưa ra một ngoại lệ nếu việc chuyển đổi th ấ t bại Biếu thức tương đương n n ư biểu thức có điẻu kiện sau đây:

expression is type 9 (type) expression ■ {type) null;

Troag, ' Í du s a j 5ốy phương thức T e s tT y p e được sử dụng để test

các đối tượnp có các kiểu khác n h a’1 Chú ý rằng chỉ r.ắc đôi tượng kiểu

th am chiếu mới được chuyển đổi

else if to as string != null) Console.WriteLine (“The object \”{0}\” is a string.” , 0);

else Console.WriteLine (“The object \”{0)\” is not a reference

type.”, 0);

}static void MainQ

Ỉ

Trang 35

202 Chướng 8: xử lý các web form

function checkname() { a!ert(“Yoiir name is “ + document.forms[0].fullname.value);

What is vour name? <br>

<inpưt type=”text" nam3=”fu!lname”>

cinput type=”submit" value=”Submit Form”>

</íorm>

Trong m ã HTML trước chúng ta đã xác định m ột hàm Jav a S c rip t

mà sẽ được gọi vào lúc form được đệ trìn h đến web server sử dụng thuộc tín h xử lý sự kiện onsubm it của phần tử <form> H àm sẽ được gọi là checknameO m à chúng ta đã định nghĩa ngay ở trê n form Một khi hàm checknam eO h o à n tấ t, dữ liệu form sẽ được gỏi đ ến U R L h ttp ://

vm w m yserver.com /form handler để xử lý

ở đây bạn có th ể th ấy form HTML được tạo

The onsubmit Event H andler

v /h a t It your nam e?

jscott

N út được ghi n h ã n là "Submit Form" th ậ t ra là nút subm it, n ú t này

sẽ làm cho form được gởi đến web server Tuy nhiên, trước khi nó được

đệ trìn h , hàm checknameO được gọi H àm đó đơn giản truy tìm nội

Trang 36

dung của tex t box và hiển thi nó trong một hộp báo động JavaScript Một khi hộp báo động được chấp nhận t)ỏ'i người dùng, form gởi dữ liệu của nó đến web server để xử lý.

</script>

Hàm Ja v a S c rip t trư^c khi dược gọi bẻi ei’nfĩ Tĩôt f(Tm HTML sẽ không đệ trìn h đến A’ob server nếu ngưoì dung không gõ nhập Scott vào trường nam e

Đón bắt các sự kiện trên các control Form

N hư th ẻ HTML <form>, các control form cũng có th ể có các sự kiện

có th ể lập trìn h Một chương trình có th ể định nghĩa m ột hàm hoặc mã Jav aS crip t mà sẽ được thực thi khi một sự kiện n h ấ t định xảy ra Ví

dụ, Jav a S c rip t có th ể p h át hiện khi nào cursor chuột di chuyển lên trên một control, khi nào no có được hoặc m ất tiêu điểm hoặc khi nào giá trị của nó đã th ay đổi

Ví dụ, m ã sau đây minh họa một số sự kiện của control tex t box có

th ể được đón b ắ t như th ế nào

<html>

<head>

<title>Capture Form Control Events</title>

Trang 37

<!— // Begin function modifylayer(changetext) f var lefield = document.getElementByldf'lastevent”);

lefield.innerHTML = changetext + “<br><br> ";

)// End — >

</script>

</head>

<body>

<h1>Capture Form Control Events</h1>

Move the mouse in and out of this field,

or change its contents.<br>

ctextarea name="samplefield” rows="10" cols="30"

Last event captured:

<d.y id= ’lastfcvent style=”background-color:#CCCCCC; font-weight:bold”>

<textarea> cũng định nghĩa một số phương thức xử lý sự kiện T rình duyệt web sẽ gọi một hàm Jav aS crip t có tên là modify lay er() nếu b ất

kỳ sự kiện sau đây xảy ra cho control này:

Trang 38

Chương 8: Các giao diện 205

public, class MyClp.ss AcmeClais;

v ấ n đề đã được giải quyết

Hoậc bạn có th ể sử dụng modifier o v e r r id e nêu bạn dự định ghi đè MyMethod trong class CƯ bờ.

T ro n g ví dụ dưới đ â y class M v D e riv e d C la ss th ừ a kể c la ss

M yBaseClass Mỗi class chứa ưiộl class thành viên được gọi là MyClass

Để làm ẩn M vClass trong class cơ sứ, modifier n e w dược sử dụng trong phần khai, báo đ a ss Theo cách này có th ể truy cập các th à n h viên trong cá iiai cl&st \ à sử dụng cac thành viên của chúng

public lili my I'll -1 t.'i

public virtual My Method (;

Ỉ

return “Hello trorrt the base class!

}(}

public class MyDerivedClass: MyEJaseClass

I

// The following nested class hides the base class member:

new public class MyClass // notice the new modifier {

public int mylnt = 321;

Trang 39

206 Chương 8: x ở lý các web form

y.<:Ẹạik' 1 r f cnvr f f Stop RefieiH RefieiH Hơne '1 Seòích pAv«i»e5 Me«ia Hơne T Search pAv«i»e5 Me«ia Hrcloty Hid04y Mai

B lủ một thuộc tính của mảng fo n n

B là nhữnc g !á ir chính trorq 'nảnĩị rỉem srt

ẵẵ Sử dụng một trong ba phương thức khác nhau của đối tượng tài liệu

Truy cập các giá trị Form sử dụng mảng form

M ột kỹ th u ậ t sẽ có tá c dụng tro n g t ấ t cả trìn h duyệt được b ậ t Jav aS crip t là truy cập các control form sử dụng m ảng form

M ảng form là một thuộc tín h của đối tượng tà i liệu DOM; nó chứa một danh sách được tạo index gồm tấ t cả form trê n m ột tra n g web Các index trong Jav aS crip t b ắ t đầu tại zero

Trang 40

Chương 8: Xử lý các web form 207Ohúne ta bắx đểu bang V1ỘC tạo mội biôn tham chiẽu đên chính form

var myform = dGcumeaỉ.ícriTìs r0];

Sau đó chúng ta co thổ truy cập bất; kỳ con troi trê n form theo tên

Ví dụ, mã sau đây chc phép bạn truy cập nội dung của m ột tex t box có tên là fullname:

V 'ar íuilname = myfo’-m fuiirpme.vaii’e;

N hư trong p h ần trước ’'Chấp nhận dữ liệu n hập tex t với một Text Box" tro n g chương này, giá trị là một thuộc tín h của control tex t box

Mã trước đã đ ặ t nội dung của text box trong m ột biến m à chúng ta gọi là fullname

Sử dụng kỹ th u ậ t này sẽ cho phép chúng ta truy cập b ấ t kỳ control trê n form m iễn là nó được đặt tên Mã sau đây m inh họa m ột form chứa các te x t box, m ột list box và một nhóm nút radio Trước khi form được đệ trìn h , một h àm có ten là checkforrn() kiểm chứng rằng người đùng đã nhập te x t hoặc đã chọn một tùy chọn trong từng trường

// Accessing text boxes is easy

I'd flilli ane = 7 1 'fc rr fu'lnirre ai ie, var emailaddr = myform.emaii.value;

V Which drop down item is selected7 var ageldx = royform.age.selectedlndex,

V3' age = m/fcrn:.3je.opticns[a(;el<1x].valii(3;

// Which radio button is selected?

var hearObj = myform.hear;

var hear for (var i = 0; i < hearObj.length; i++) {

-if (hearObjfi],checked) { hear = hearObj[i].value;

Định dạng
Số trang	178
Dung lượng	5,36 MB