Đi tố ượng Navigator

Một phần của tài liệu Giới thiêu ngôn ngữ HTML - Dùng để thiết kế Web (Trang 57)

1 .T ng qua nổ

2.14.1 Đi tố ượng Navigator

Đ i tố ượng này đượ ử ục s d ng đ l y các thông tin v trình duy t nh s phiên b n.ể ấ ề ệ ư ố ả Đ i tố ượng này không có phương th c hay chứ ương trình x lý s ki n.ử ự ệ

Các thu c tínhộ

appCodeName Xác đ nh tên mã n i t i c a trình duy t (Atlas).ị ộ ạ ủ ệ

AppName Xác đ nh tên trình duy t.ị ệ

AppVersion Xác đ nh thông tin v phiên b n c a đ i tị ề ả ủ ố ượng navigator.

userAgent Xác đ nh header c a user - agent.ị ủ

Ví dụ

Ví d sau s hi n th các thu c tính c a đ i tụ ẽ ể ị ộ ủ ố ượng navigator

Window Texturea Text FileUpload Password Hidden Submit Reset Radio Checkbox Button Select Plugin Mime Type Frame document Location History Layer Link Image Area Anchor Applet Plugin Form navigator Option S đ ơ ồphân c p các đ i t ố ượng

<HTML> <HEAD>

<TITLE> Navigator Object Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript">

document.write("appCodeName = "+navigator.appCodeName + "<BR>"); document.write(sappName = "+navigator.appName + "<BR>"); document.write("appVersion = "+navigator.appVersion + "<BR>"); document.write("userAgent = "+navigator.userAgent + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> 2.14.2 Đ i tố ượng Windows Các thu c tínhộ

defaultStatus - Thông báo ng m đ nh hi n th lên trên thanh tr ng thái c a c a sầ ị ể ị ạ ủ ử ổ  Frames - M ng xác đ nh t t c các frame trong c a s .ả ị ấ ả ử ổ

 Length - S lố ượng các frame trong c a s cha m .ử ổ ẹ  Name - Tên c a c a s hi n th i.ủ ử ổ ệ ờ

Parent - Đ i tố ượng c a s cha m .ử ổ ẹ  Self - C a s hi n th i.ử ổ ệ ờ

Status - Đượ ử ục s d ng cho thông báo t m th i hi n th lên trên thanh th ng thái c a s .ạ ờ ể ị ạ ử ổ Đựơ ử ục s d ng đ l y hay đ t l i thông báo tr ng thái và ghi đè lên defaultStatus.ể ấ ặ ạ ạ  Top - C a s trên cùng.ử ổ ở

Window - C a s hi n th i.ử ổ ệ ờ

Các phương th cứ

alert ("message") -Hi n th h p h i tho i v i chu i "message" và nút OK.ể ị ộ ộ ạ ớ ỗ  windowReference.close -Đóng c a s windowReference.ử ổ

confirm("message") -Hi n th h p tho i v i chu i "message", nút OK và nútể ị ộ ạ ớ ỗ Cancel. Tr l i giá tr True cho OK và False cho Cancel.ả ạ ị

[windowVar = ][window]. open("URL", "windowName", [ "windowFeatures,...," ] ) - M c a s m i.ở ử ổ ớ

prompt ("message" [,"defaultInput"]) - M m t h p h i tho i đ nh n d li uở ộ ộ ộ ạ ể ậ ữ ệ vào trường text.

Ví dụ:

Trong ví d t o ra m t t i c a s th hai, nh nút th nh t đ m m t c a s r ng, sau đóụ ạ ộ ớ ử ổ ứ ư ứ ấ ể ở ộ ử ổ ỗ m t liên k t s t i file doc2.html xu ng c a s m i đó r i m t nút khác dùng đ đóng c a sộ ế ẽ ả ố ử ổ ớ ồ ộ ể ủ ổ th hai l i, xem ví d v i file ứ ạ ụ ớ window.html:

<HTML> <HEAD>

<TITLE>Frame Example </TITLE> </HEAD>

<BODY> <FORM>

<INPUT TYPE="button" VALUE="Open Second Window" onClick="msgWindow=window.open('','window2','r esizable=no,width=200,height=200')">

<P>

<A HREF="temp.html" TARGET="window2"> Load a file into window2 </A>

</P>

<INPUT TYPE="button" VALUE="Close Second Window" onClick="msgWindow.close()"> </FORM> </BODY> </HTML> Ví du: <HTML> <HEAD>

<TITLE>Frame Example </TITLE> </HEAD>

<BODY> <FORM>

<INPUT TYPE="button" VALUE="Open Second Window" onClick="msgWindow=window.open('D:/PhuocTai/Giaoan/Thiet KeWeb/BaiTap/JavaScript/temp.htm','window2','resizable=yes, width=200,height=200')">

<INPUT TYPE="button" VALUE="Close Second Window" onClick="msgWindow.close()">

</FORM> </BODY> </HTML>

2.14.3 Đ i tố ượng Location

Các thu c tính c a đ i tộ ủ ố ượng location duy trì các thông tin v URL c a document hi nề ủ ệ th i. Đ i tờ ố ượng này hoàn toàn không có các phương th c và chứ ương trình x lý s ki n điử ự ệ kèm.

Các thu c tínhộ

 Host - Ph n hostname:port c a URL (ví d ầ ủ ụ www.abc.com ). Chú ý r ng đâyằ thường là c ng ng m đ nh và ít khi đổ ầ ị ược ch ra.ỉ

 Hostname - Tên c a host và domain (ví d ủ ụ www.abc.com ).  href - Toàn b URL cho document hi n t i.ộ ệ ạ

 Pathname - Ph n đầ ường d n c a URL (ví d /chap1/page2.html).ẫ ủ ụ

 Port - C ng truy n thông đổ ề ược s d ng cho máy tính host, thử ụ ường là c ngổ ng m đ nh.ầ ị

 Protocol - Giao th c đứ ượ ử ục s d ng (cùng v i d u hai ch m) (ví d http:).ớ ấ ấ ụ

M t c a s có th có m t vài frame. ộ ử ố ể ộ Các frame có th cu n m t cách đ c l p v i nhauể ộ ộ ộ ậ ớ và m i frame có URL riêng, frame không có các chỗ ương trình x lý s ki n.ử ự ệ

Các thu c tínhộ

 frames - M ng t t c các frame trong c a s .ả ấ ả ử ổ  Name - Thu c tính NAME c a th <FRAME>ộ ủ ẻ  Length - S lố ượng các frame con trong m t frame.ộ  Parent - C a s hay frame ch a nhóm frame hi n th i.ử ổ ứ ệ ờ  self - frame hi n th i.ệ ờ

 Window - c a s frame hi n th i.ử ổ ệ ờ

Ví d : ụ Xem ví d ụframes.html

Mã ngu n:ồ

<meta http-equiv="ConHoTent-Language" conHoTent="en-us"> <meta http-equiv="ConHoTent-Type" conHoTent="text/html; charset=utf-8">

<link rel="stylesheet" href="../../Skin/skin.css"> <title>Design Simple Website</title>

</head> <body>

<table border="1" width="100%" id="table1" height="422" style="border-collapse: collapse" bordercolor="#FF915D">

<tr>

<td colspan="2" class="banner"></td> </tr>

<tr>

<td valign="top" width="26%">

<iframe name="ifm_menu" src="danhmuc.htm" width="193" height="209"></iframe></td>

<td valign="top" width="73%">

<iframe name="ifm_conHoTent" src="gioithieu.htm" width="553" height="337"></iframe></td> </tr> <tr> <td colspan="2" class="footer"></td> </tr> </table> 2.14.5 Đ i tố ượng Document

Đ i tố ượng này ch a các thông tin v document hi n th i và cung c p các phứ ề ệ ờ ấ ương th cứ đ đ a thông tin ra màn hình. ể ư Đ i tố ượng document đượ ạc t o ra b ng c p th <BODY> vàằ ặ ẻ </BODY>

Các thu c tínhộ

 alinkColor - Gi ng nh thu c tính ALINK.ố ư ộ  anchor - M ng t t c các anchor trong document.ả ấ ả  bgColor - Gi ng thu c tính BGCOLOR.ố ộ

 cookie - S d ng đ xác đ nh cookie.ử ụ ể ị  fgColor - Gi ng thu c tính TEXT.ố ộ

 forms - M ng t t c các form trong document.ả ấ ả  lastModified - Ngày cu i cùng văn b n đố ả ượ ửc s a.  linkColor - Gi ng thu c tính LINK.ố ộ

 links - M ng t t c các link trong document.ả ấ ả  location - URL đ y đ c a văn b n.ầ ủ ủ ả

 referrer - URL c a văn b n g i nó.ủ ả ọ  title - N i dung c a th <TITLE>.ộ ủ ẻ  vlinkColor - Gi ng thu c tính VLINK.ố ộ

Các phương th cứ

 document.clear - Xoá document hi n th i.ệ ờ

 document.close - Đóng dòng d li u vào và đ a toàn b d li u trong b đ m ra mànữ ệ ư ộ ữ ệ ộ ệ hình.

 document.open (["mineType"]) - M m t stream đ thu th p d li u vào c a cácở ộ ể ậ ữ ệ ủ phương th c write và writeln.ứ

 document.write(expression1 [,expression2]...[,expressionN]) - Vi t bi u th c HTML lênế ể ứ văn b n trông m t c a s xác đ nh.ả ộ ử ổ ị

 document.writeln (expression1 [,expression2] ... [,expressionN] ) - Gi ng phố ương th cứ trên nh ng khi h t m i bi u th c l i xu ng dòng.ư ế ỗ ể ứ ạ ố

2.14.6 Đ i tố ượng Form

Các form đượ ạc t o ra nh c p th <FORM> và </FORM>. Ph n l n các thu c tínhờ ặ ẻ ầ ớ ộ c a đ i tủ ố ượng form ph n ánh các thu c tính c a th <FORM>. Có m t vài ph n tả ộ ủ ẻ ộ ầ ử (elements) là thu c tính c a đ i tộ ủ ố ượng forms:

button checkbox hidden password radio reset select submit text textarea

N u document ch a m t vài form, chúng có th đế ứ ộ ể ược tham chi u qua m ng forms. S lế ả ố ượng các form có th để ược xác đ nh nh sau:ị ư

document.forms.length.

M i m t form có th đỗ ộ ể ược tham chi u nh sau:ế ư document.forms[index]

Các thu c tínhộ

action thu c tính ACTION c a th FORM.ộ ủ ẻ

elements M ng ch a t t c các thành ph n trong m t form (nh checkbox, trả ứ ấ ả ầ ộ ư ường text, danh sách l a ch nự ọ

encoding Xâu ch a ki u MIME đứ ể ượ ử ục s d ng đ mã hoá n i dung c a form g i cho server.ể ộ ủ ử

length S lố ượng các thành ph n trong m t form.ầ ộ

method Thu c tính METHOD.ộ

target Xâu ch a tên c a c a s đích khi submit formứ ủ ử ổ

Các phương th cứ

formName.submit ();

Xu t d li u c a m t form tên formName t i trang x lý. Phấ ữ ệ ủ ộ ớ ử ương th c này mô ph ngứ ỏ m t click vào nút submit trên form.ộ

Các chương trình x lý s ki nử ự ệ

onSubmit - Chương trình x lý s ki n này đử ự ệ ược g i khi ngọ ườ ử ụi s d ng chuy n d li uể ữ ệ t form đi.ừ

Các ph n t c a đ i tầ ử ủ ố ượng form

Form đượ ạc t o b i các ph n t cho phép ngở ầ ử ườ ử ụi s d ng đ a thông tin vào. Khi đó, n iư ộ dung (ho c giá tr ) c a các ph n t s đặ ị ủ ầ ử ẽ ược chuy n đ n m t chể ế ộ ương trình trên server qua m t giao di n độ ệ ược g i là Common Gateway Interface(Giao ti p qua m t c ng chung) g i t tọ ế ộ ổ ọ ắ là CGI.

B ng các ph n t c a form ầ ử ủ

Ph n tầ Mô tả

Button Là m t nút b m h n là nút submit hay nút resetộ ấ ơ (<INPUT TYPE="button">)

checkbox M t checkbox (<INPUT TYPE="checkbox">) ộ

FileUpload Là m t ph n t t i file lên cho phép ngộ ầ ử ả ười sử d ng g i lên m t file (<INPUT TYPE="file">) ụ ử ộ Hidden M t trộ ường n (<INPUT TYPE="hidden">) ẩ

password M t tr ng text đ nh p m t kh u mà t t c các

ộ ườ ể ậ ậ ẩ ấ ả

ký t nh p vào đ u hi n th là d u (*)(<INPUTự ậ ề ể ị ấ TYPE="password">)

Radio M t nút b m (<INPUT TYPE="radio">) ộ ấ Reset M t nút reset(<INPUT TYPE="reset">) ộ Select

M t danh sách l a ch nộ ự ọ

(<SELECT><OPTION>option1</OPTION> <OPTION>option2</OPTION></SELECT>) Submit M t nút submit (<INPUT TYPE="submit">) ộ Text M t trộ ường text (<INPUT TYPE="text">)

textArea M t trộ ường text cho phép nh p vàp nhi u dòngậ ề <TEXTAREA>default text</TEXTAREA>)

Thu c tính TYPEộ

Trong m i ph n t c a form đ u có thu c tính type, đó là m t xâu ch đ nh rõ ki u c aỗ ầ ử ủ ề ộ ộ ỉ ị ể ủ ph n t đầ ử ược đ a vào nh nút b m, m t trư ư ấ ộ ường text hay m t checkbox...ộ

Xâu đó có th là m t trong các giá tr sau:ể ộ ị

Text field: "text" Radio button: "radio" Checkbox: "checkbox" Hidden field: "hidden" Submit button: "submit" Reset button: "reset"

Password field: "password" Button: "button"

Select list: "select-one"

Multiple select lists: "select-multiple" Textarea field: "textarea"

Ph n t BUTTONầ ử

Trong m t form HTML chu n, ch có hai nút b m có s n là submit và reset b i v d li uộ ẩ ỉ ấ ẵ ở ị ữ ệ trong form ph i đả ược g i t i m t vài đ a ch URL (thử ớ ộ ị ỉ ường là CGI-BIN script) đ x lý và l uể ử ư tr .ữ

M t ph n t button độ ầ ử ược ch đ nh rõ khi s d ng th INPUT:ỉ ị ử ụ ẻ

<INPUT TYPE="button" NAME="name" VALUE= "buttonName">

Trong th INPUT, name là tên c a button, thu c tính VALUE có ch a nhãn c a buttonẻ ủ ộ ứ ủ s đẽ ược hi n th trên Navigator c a browser.ể ị ủ

Ch có m t th s ki n duy nh t đ i v i button là ỉ ộ ẻ ự ệ ấ ố ớ onClick. K t h p v i nó là cáchế ợ ớ th c duy nh t ứ ấ click.Ph n t buttton có kh năng m r ng cho phép ngầ ử ả ở ộ ườ ậi l p trình JavaScript có th vi t để ế ược m t đo n mã l nh JavaScript đ th c thi vi c thêm vào m t nút b m trongộ ạ ệ ể ự ệ ộ ấ m t script.ộ

Trong ví d sau, thay vì s d ng onChange, b n có th ch nh s a script đ đ nh giáụ ử ụ ạ ể ỉ ử ể ị bi u th c khi button để ứ ược b m.ấ

Ví d :ụ Đ nh giá m t form s d ng ph n t button. ị ộ ử ụ ầ ử <HTML>

<HEAD>

<TITLE>button Example</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS function calculate(form) {

form.results.value = eval(form.entry.value); }

// STOP HIDING FROM OTHER BROWSERS --> </SCRIPT>

</HEAD> <BODY>

<FORM METHOD=POST>

Enter a JavaScript mathematical expression: <INPUT TYPE="text" NAME="entry" VALUE=""> <BR>

The result of this expression is:

<INPUT TYPE=text NAME="results" onFocus="this.blur();"> <BR>

<INPUT TYPE="button" VALUE="Calculate" onClick="calculate(this.form);"> </FORM>

</BODY> </HTML>

Ph n t CHECKBOXầ ử

Các ph n t checkbox có kh năng b t t t dùng đ ch n ho c không ch n m t thôngầ ử ả ậ ắ ể ọ ặ ọ ộ tin. Các checkbox có nhi u thu c tính và cách th c h n button. B ng dề ộ ứ ơ ả ưới đây là danh sách các thu c tính và các cách th c c a ph n t checkbox.ộ ứ ủ ầ ử

B ng . Các thu c tính và cách th c c a ph n t checkbox.ả ộ ứ ủ ầ ử Cách th c vàứ

thu c tínhộ Mô tả

Checked Cho bi t tr ng thái hi n th i c a checkbox (thu c tính)ế ạ ệ ờ ủ ộ defaultChecked Cho bi t tr ng thái m c đ nh c a ph n t (thu c tính)ế ạ ặ ị ủ ầ ử ộ name Cho bi t tên c a ph n t đế ủ ầ ử ược ch đ nh trong th INPUTỉ ị ẻ

(thu c tính)ộ

value Cho bi t giá tr hi n th i c a ph n t đế ị ệ ờ ủ ầ ử ược ch đ nh trongỉ ị th INPUT (thu c tính)ẻ ộ

click() Mô t m t click vào checkbox (Cách th c)ả ộ ứ Ph n t checkbox ch có m t th s ki n là onClickầ ử ỉ ộ ẻ ự ệ

Ví d :ụ T o h p checkbox đ nh p vào m t s r i l a ch n tính nhân đôi và bình phạ ộ ể ậ ộ ố ồ ự ọ ương: <HTML>

<HEAD>

<TITLE>checkbox Example</TITLE> <SCRIPT>

<!-- HIDE FROM OTHER BROWSERS

function calculate(form,callingField) { if (callingField == "result") { // if(1)

if (form.square.checked) { // if(2)

form.entry.value = Math.sqrt(form.result.value); }

else {

} //end if(2) } else{ if (form.square.checked) { // if(3) form.result.value=form.entry.value*form.entry.value; } else { form.result.value = form.entry.value * 2; } //enfzd if(3) }//end if(1) }//end function

// STOP HIDING FROM OTHER BROWSERS --> </SCRIPT>

</HEAD> <BODY>

<FORM METHOD=POST>

Value: <INPUT TYPE="text" NAME="entry" VALUE=0 onChange="calculate(this.form,this.name);"> <BR>

Action (default double): <INPUT TYPE=checkbox NAME=square onClick="calculate(this.form,this.name);">

Square <BR>

Result: <INPUT TYPE="text" NAME="result" VALUE=0

onChange="calculate(this.form,this.name); ">

</FORM> </BODY> </HTML>

Trong script này, b n đã th y cách s d ng th s ki n onClick cũng nh thu c tínhạ ấ ử ụ ẻ ự ệ ư ộ checked là m t giá tr ki u Boolean có th dùng làm đi u ki n trong câu l nh if...elseộ ị ể ể ề ệ ệ

Có th thêm m t checkbox tên là square vào form. N u h p này để ộ ế ộ ược check, chương trình s l y giá tr c a nó, n u không, m t th c thi đẽ ấ ị ủ ế ộ ự ược m c đ nh s nhân đôi giá tr c a nó.ặ ị ẽ ị ủ Th s ki n onClick trong checkbox đẻ ự ệ ược đ nh nghĩa:ị

<INPUT TYPE=checkbox NAME=square

onClick= "calculate( this.form, this.name);"> Khi đó n u ngế ười dùng thay đ i m t câu l nh khác, form s đổ ộ ệ ẽ ược tính toán l i.ạ Đ t o ra s m r ng cho checkbox. b n có th thay đ i hàm calculate() nh sau:ể ạ ự ở ộ ạ ể ổ ư function calculate(form,callingField) {

if (callingField == "result") { // if (1) if (form.square.checked) { // if (2)

form.entry.value = Math.sqrt(form.result.value); } else { form.entry.value = form.result.value / 2; } //end if(2) } else { if (form.square.checked) { // if (3) form.result.value=form.entry.value*form.entry.value ; } else { form.result.value = form.entry.value * 2; } // end if (3) } // end if (1) }  Ph n t FILE UPLOADầ ử

Ph n t này cung c p cho form m t cách đ ngầ ử ấ ộ ể ườ ử ụi s d ng có th ch rõ m t file đ aể ỉ ộ ư vào form x lý. Ph n t file Upload đử ầ ử ược ch đ nh rõ trong JavaScript b ng đ i tỉ ị ằ ố ượng

FileUpload.

Đ i tố ượng ch có hai thu c tính là ỉ ộ namevalue, c hai đ u là giá tr xâu nh các đ iả ề ị ư ố tượng khác. Không có cách th c hay th file cho đ i tứ ẻ ố ượng này.

Ph n t HIDDENầ ử

Ph n t hidden là ph n t duy nh t trong s t t c các ph n t c a form không đầ ử ầ ử ấ ố ấ ả ầ ử ủ ược hi n th trên Web browser. Trể ị ường hidden có th s d ng đ l u các giá tr c n thi t đ g iể ử ụ ể ư ị ầ ế ể ử t i server song song v i s xu t ra t form (form submission) nh ng nó không đớ ớ ự ấ ừ ư ược hi n thể ị trên trang. M i ngọ ười có th s d ng trong JavaScript đ l u các giá tr trong su t m t scriptể ử ụ ể ư ị ố ộ và đ tính toán không c n form.ể ầ

Đ i tố ượng hidden ch có hai thu c tính là ỉ ộ namevalue, đó cũng là nh ng giá tr xâuữ ị gi ng các đ i tố ố ượng khác. Không có cách th c hay th s ki n nào cho đ i tứ ẻ ự ệ ố ượng này.

Ph n t PASSWORDầ ử

Đ i tố ượng Password là đ i tố ượng duy nh t trong các đ i tấ ố ượng c a form mà khi gõủ b t kỳ ký t nào vào cũng đ u hi n th d u sao(*). Nó cho phép đ a vào nh ng thông tin bíấ ự ề ể ị ấ ư ữ m t nh đăng ký m t kh u...ậ ư ậ ẩ

Đ i tố ượng Password có 3 thu c tính gi ng trộ ố ường text là: defaultValue, name và value. Không gi ng v i hai ph n t trên, trố ớ ầ ử ở ường Password có nhi u cách th c h n(focus(), blur(),ề ứ ơ and select() ) và tương ng v i các th s ki n: onFocus, onBlur, and onSelect.ứ ớ ẻ ự ệ

Ph n t RADIOầ ử

Đ i tố ượng radio g n gi ng s b t t t checkbox khi có hai nút radio k t h p thành m tầ ố ự ậ ắ ế ợ ộ nhóm. Khi nhi u radio đề ược k t h p thành m t nhóm, ch có m t nút đế ợ ộ ỉ ộ ược ch n trong b t kỳọ ấ

Một phần của tài liệu Giới thiêu ngôn ngữ HTML - Dùng để thiết kế Web (Trang 57)

Tải bản đầy đủ (PDF)

(101 trang)