HTML使用&JAVASCRIPT程式设计-2

HTML使用與JavaScript程式設計日期：88年,90年09月簡武隆EntertitlehereHEAD區BODY區(document區)一個HTML文件基本上區分成HEAD與BODY區，我們在HEAD區設定本頁屬性，畫面內容則撰寫於BODY區，Script(處理程式）則依需求分散在文件內部HTML文件之組成Tag的格式HTML文件中最重要的元素：HTML標籤Openingtag:tag,Endingtag:/tag例:tableborder=“2”cellspacing=“1”…/table標籤屬性1=值1屬性2=值2屬性3HTMLTag,大部份皆成對出現屬性欄大部份皆有值,部份為布林值(如屬性3)網頁最基本的結構(documentstructure)htmlheadtitle標題/title/headbody其他標籤/body/html!--…--註解bodybodybgColor=“顏色”顏色的表示方法：固定名稱：red,lightBlue,…IE擴充的名稱：aliceblue,…RGB十六進位：00ff99,33ff66bodybackground=“圖檔”Body.htm表頭用的標籤TITLE文件的標題META文件的描述metahttp-equiv=Content-Typecontent=text/html;charset=Big5STYLE設定樣式LINK讀入外部的樣式檔linkrel=stylesheethref=“js/style.cssSCRIPT讀入外部的JavaScript檔案SCRIPTsrc=js/javascript.js/SCRIPT區塊文字標籤DIVDivision區域H1～H6表頭１～６PParagraph段落PREPREformattedtext原樣輸出但HTML會被解譯XMPExample完全原樣輸出特殊字元&…;<小於(lessthen)>大於(greaterthen)©商標字元 空白Block.htmListsOLtype=“1”:OrderedListType:1,i,I,a,A,circle,disc,squareUL:UnorderedListLI:ListItemList.htm文字屬性B:Bold粗體FONT字型設定BASEFONT基本字型BIG將字型變大I:Italic斜體U:Underline底線Text.htmAnchor與圖案AAnchorANAME=“#anchor1”AHREF=“anchor1”http://,ftp://,file://,mailto:,news:,javascript:,file://IMG讀取圖案檔IMGSRC=“/images/logo.gif”AREAMAPLinks.htm格式化標籤BRBReakCENTER置中HRHorizentalRuler橫線SPAN嵌入文字區域PThisparagraphcontainsasingleSPANSTYLE=color:blueblue/SPANword.表格標籤TABLETHEADTBODYTRTableRowTDTableDefinitionTables.htm表格:tableForm的送出與回應HTML文件透過Form(表單)的Submit，將瀏覽器的表單資料(INPUT或SELECT等)送給WebServerWebServer處理完畢後再依Form的指示(Action)回應至瀏覽器，做換頁處理Form的處理FormMethod=…Action=…name=…Form的請求(Request)Method有兩種：GET：將表單資料附加在Action網址(URL)後面傳給WebServer(URL?NAME1=VALUE1&NAME2=VALUE2)POST：將表單資料存入另一個HTTP封包再傳給WebServer注意：用GET時要小心中文字的轉換隱密性資料一定要用POSTForm的寫法htmlheadtitle標題/title/headbodyformmethod=POSTid=idFormaction=“nextPage.htm”…/form/body/htmlForm的資料蒐集標籤—１按鈕１：inputtype=“BUTTON”value=“中文”name=“元件名稱”按鈕２：SUBMIT(送出)取消Submit:returnfalse;按鈕３：RESET(清除)文字輸入１：inputtype=TEXTvalue=“啟始值”name=“名稱”size=“視覺大小”maxlength=“字元長度”文字輸入２：inputtype=PASSWORD…Form1.htmForm的資料蒐集標籤—２RadioButton：inputtype=“RADIO”value=“值”name=“元件名稱”同一群Radio的name要相同CheckBox：inputtype=“CHECKBOX”value=“啟始值”name=“名稱”隱藏式資料：inputtype=“HIDDEN”value=“值”name=“名稱”Form2.htmForm的資料蒐集標籤—３下拉式選單：selectname=“元件名稱”optionvalue=“值”文字/option……optionvalue=“值”文字/option/select文字區塊：textareaname=“元件名稱”ROWS=“列數”COLS=行數文字/textForm3.htm瀏覽器的物件模式(DocumentObjectModel)frameselftopparentwindowhistorylocationdocumenttoolbar,etc.fileUploadareaimageappletformlayeranchorlinktexttextareapasswordradiocheckboxselectoptionbuttonresetsubmitNetscapeNavigator4DocumentObjectModelContainmentHierarchywindow物件的屬性屬性說明parent傳回目前視窗的父視窗self傳回目前視窗的參考top傳回最上層視窗的參考name傳回本視窗的名稱opener傳回建立本視窗的視窗status視窗的狀態列文字document本視窗的document物件event本視窗的event物件history本視窗的history物件location本視窗的location物件screen本視窗的screen物件window物件的方法方法說明open開啟新的瀏覽器視窗showModalDialog開啟對話視窗alertpromptconfirm顯示警示對話視窗顯示輸入對話視窗顯示確認對話視窗close關閉瀏覽器視窗navigate載入另一頁網頁blur使網頁失去焦點focus使網頁取得焦點window.history物件屬性/方法說明length瀏覽了幾個網頁back()倒退一頁forward()向前一頁go(n)/go(-n)由目前網頁向後/向前移動n頁if(window.history.length5)window.history.go(5);window.navigator物件屬性/集合/方法說明appCodeNameBrowser代碼appNameBrowser產品名稱appVersionBrowser版本cookieEnabled是否有啟動Cookie功能userAgentBrowser名稱(HTTP封包header)mimeTypes集合:Browser支援的各式文件類型plugins集合:embed物件javaEnabled是否啟動Java功能Navigator.htmwindow.location物件屬性屬性說明範例href整個URL字串=456hashURL字串在#後面的字串#123=456host主機名稱(含port)localhost:8080hostname主機名稱localhostpathname第三個/後的路徑名稱/epos/location.htmportURL的Port#8080protocol通訊協定http:searchURL字串在?後面的字串?123=456location.htmwindow.location物件方法方法說明assign()載入另一頁網頁reload()重新整理replace()用另一頁取代目前的網頁window.event物件屬性說明x/y在螢幕上的x/y座標值clientX/ClientY元件的x/y座標值offsetX/offsetY相對於容器元件的x/y座標值screenX/ScreenY相對於螢幕的x/y座標值button引發事件的按鈕altKeyALT按鍵的狀態ctrlKeyCtrl按鍵的狀態shiftKeyShift按鍵的狀態keyCode鍵盤按鍵值window.event物件屬性說明fromElement在onmouseover,onmouseout事件中游標正離開的元件toElement在onmouseover,onmouseout事件中游標正移入的元件returnValue指定事件的傳回值srcElement觸發事件的元件canBubble事件能否向上傳遞window.screen物件屬性說明width/height螢幕寬度與高度availWidth/availHeight扣除工作列後的螢幕寬度與高度window.document物件屬性說明title=TITLEbodyReadOnly,=BODYURL/URLUnencoded網址location文件的URLdomain文件的網域cookie文件儲存的Cookie值lastModified文件最後修改的日期parentWindow父視窗activeElement取得焦點的物件window.document物件屬性說明bgColor網頁的背景顏色fgColor網頁的背景顏色linkColor未被Visit的HyperLinkalinkColor正要Visit的ActiveHyperLinkvlinkColorVisited的HyperLinkreferrer是誰參考到本頁window.document物件-集合集合說明all文件中的所有物件anchors文件中的所有Anchor物件applets文件中的所有Applet物件childNodes文件中的所有HTML物件children文件中的所有DHTML物件embeds文件中的所有embed物件forms文件中的所有表單物件frames文件中的所有頁框物件images文件中的所有圖形物件links文件中的所有連結(HREF,area)物件styleSheets文件中的所有樣式表物件DHTMLSPANid=識別名文字/SPANinnerTextinnerHTMLouterTextouterHTML樣式的使用：tagstyle=“樣式1:…;樣式2:…”tagclass=“外部樣式名”InnerTextStyleinputtype=Resetvalue=清除style=font-family:標楷體;color:red樣式間以分號隔開樣式