馬士兵-html-css-javascript講義

1、尚學(xué)堂 手把手教程http:/版權(quán)所有：尚學(xué)堂科技 JAVA V3.0http:/HTMLWEB第一語言第一語言手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂課程內(nèi)容及學(xué)習(xí)周期 HTML介紹 HTML細(xì)節(jié)文件結(jié)構(gòu)文字圖片鏈接表格表格表單表單多窗口特殊字符 在不是很熟悉HTML的情況下，學(xué)習(xí)加練習(xí)的時(shí)間應(yīng)該在48個(gè)小時(shí) 對(duì)于已經(jīng)熟悉HTML的讀者可以略過本章 本章內(nèi)容針對(duì)程序員進(jìn)行設(shè)置，不是培養(yǎng)設(shè)計(jì)師手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂HTML簡介 Hyper Text Markup Language超文本 (文字+圖片+音視+鏈接)標(biāo)記語言 (瀏覽器根據(jù)標(biāo)記顯示內(nèi)容)來自于SGM

2、L(標(biāo)準(zhǔn)通用標(biāo)記語言)專注于在Web上傳遞信息是寫給瀏覽器的語言歷史HTML1.0 HTML2.0 (IETF制定) HTML4.0(最終版) W3CIETF Internet Engineering Task ForceHTTP協(xié)議 RFC等RFC2616 Http1.1 RFC1521 MIMEW3C World Wide Web Consortium ()HTML XML等XHTML符合XML標(biāo)準(zhǔn)的HTMLDHTML Dynamic HTML （X）HTML / CSS / JavaScript的綜合運(yùn)用手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂HTML語法標(biāo)記

3、 標(biāo)記(標(biāo)簽或元素)的形式 內(nèi)容 Eg. 文字 Eg. Eg. 位于尖括號(hào)內(nèi)，可以具有屬性值 屬性值必須“” 或 ，不寫也可以解析， 但是不推薦（不符合XHTML） 有開始必須有結(jié)束(XHTML) 標(biāo)簽不能嵌套 不區(qū)分大小寫 但應(yīng)該養(yǎng)成良好的編程習(xí)慣，推薦都用小寫手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂Html文檔結(jié)構(gòu) 典型HTML我會(huì)努力的！ 01.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂head中的常用標(biāo)簽 文字 “文字”將顯示在瀏覽器標(biāo)題欄上 ：用于設(shè)置一些頭信息 定義CSS格式 用于定義腳本，Eg. Javascripthttp-equiv指明下面要設(shè)置的項(xiàng)目c

4、ontent指明該項(xiàng)目設(shè)置的內(nèi)容02.html標(biāo)簽手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂bodybgcolor=“#” -背景色 background=img_url -背景圖片 色彩值 “#rrggbb” Eg. 紅綠藍(lán)數(shù)字值 body其他屬性 text link alink vlink bgcolor leftmargin topmargin03.html04.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂錨點(diǎn)標(biāo)簽- 在該位置定義名字為AnchorName的錨，就是給這個(gè)位置起了個(gè)名字，別人可以用這個(gè)名字直接鏈接到該文件的這個(gè)位置手把手教程版權(quán)所有：尚學(xué)堂科技http:

5、/尚學(xué)堂鏈接標(biāo)簽- 超級(jí)鏈接，跳轉(zhuǎn)到另一文件文字 當(dāng)鼠標(biāo)點(diǎn)擊“文字”時(shí)，TargetWindow的內(nèi)容將會(huì)跳轉(zhuǎn)到“url”，不指定target時(shí)在本窗口跳轉(zhuǎn)。 連接到文件的特定部分 Href=“url#point” 鏈接到url的point部分 在url文檔中用標(biāo)識(shí) Target 見“框架“部分05.html06.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂路徑問題 本地路徑 c:dir1dir2 絕對(duì)路徑 http:/ 相對(duì)路徑 images/01.jpg ././images/01.jpg /images/01.jpg = http:/mysite/images/01.jpg

6、Eg. Eg. 07.html相對(duì)于URL地址手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂URL URI URN URL Uniform Resource Locator（統(tǒng)一資源定位符） 網(wǎng)絡(luò)協(xié)議 主機(jī)名 端口號(hào) 資源名（定位標(biāo)記） http:/:80/index.html#top帶有參數(shù)的url 及 url編碼問題 見Servlet / JSP部分 URN Uniform Resource Name 持久可用的資源標(biāo)準(zhǔn)名稱 例如郵箱名 URI Uniform Resource Identifier 包含URL和URNURI_URL_URN.html手把手教程版權(quán)所有：尚學(xué)堂科技http

7、:/尚學(xué)堂分隔線- 語法 Size 高度 Align 對(duì)齊方式，可以取left或right Noshade 無陰影效果 顏色 Eg. 08.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂標(biāo)題字體大小- #=1、2、3、4、5、6 按標(biāo)題級(jí)別用黑體字顯示標(biāo)題內(nèi)容 自動(dòng)插入空行 最大 最小09.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂字體設(shè)置 face定義字體 size 1 2 3 4 5 6 7 實(shí)際 8 10 12 14 18 24 36（pixels） Color可以使用預(yù)定義的名字,也可以使用數(shù)字 red、blue、black 通常是打字機(jī)風(fēng)格字體通常是打字機(jī)風(fēng)格

8、字體 通常是引用方式（斜體）通常是引用方式（斜體） 強(qiáng)調(diào)（通常是斜體加粗體）強(qiáng)調(diào)（通常是斜體加粗體）10.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂設(shè)置文字顯示名稱HTML代碼黑體斜體下劃線中劃線閃爍上標(biāo)下標(biāo)11.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂特殊字符<®注冊(cè)商標(biāo)& 空格©copyright™商標(biāo)"“12.html可以使用&#xx來顯示字符，xx為字符的unicode碼dreamweaver 华手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂文字的布局分段落現(xiàn)實(shí) 分塊顯示符號(hào)列表

9、數(shù)字列表 換行 不換行保留原有格式跑馬燈效果13.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂對(duì)齊align 取值:left right center top middle bottom 對(duì)齊到中間14.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂圖片 Src 圖片路徑，一般使用相對(duì)路徑 Alt 圖片無法顯示時(shí)顯示的文字 Border 邊框的厚度 Align = left right top middle bottom圖文混排時(shí)用于和圖片的對(duì)齊15.html圖片與鏈接 見DreamWeaver演示 手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂表格重點(diǎn)掌握 %或像素值

10、表頭（可選）單元格top middle bottom跨行跨列16.htmltable的屬性：bgcolorborderbordercolorlightbordercolordarkcellspacingcellpaddingwidthheight手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂表單重點(diǎn)掌握 作用 收集用戶信息 數(shù)據(jù)庫查詢 收發(fā)email 用戶不僅僅是信息的被動(dòng)接受者，還可以通過表單成為信息的主動(dòng)發(fā)出者手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂表單基礎(chǔ)- 的屬性 Method (get post) Get 發(fā)送較少數(shù)據(jù)（256byte），顯示在url中，url/userin

11、fo?username=張三&password=hehe Post數(shù)據(jù)長度無限制，不會(huì)顯示在url中 Action Form中數(shù)據(jù)交給服務(wù)器端哪個(gè)程序進(jìn)行處理 Eg. 手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂位于表單中的輸入標(biāo)簽 位于之中，接收用戶輸入 格式： type: text radio checkbox password hidden select submit reset button textarea image name: 提交到服務(wù)器端的變量的名字手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂表單中的輸入標(biāo)簽文本框 textmaxlength 最大字符長度size 文

12、本框?qū)挾龋ㄗ址┟艽a區(qū)域特殊的單行文本輸入框 password單選按鈕典型用法 : 同一名字，不同的值錯(cuò)誤的用法 : 不同的名字復(fù)選框典型的用法 : 同一name，不同的value隱藏域不顯示在網(wǎng)頁中通常用作向下一個(gè)頁面?zhèn)鬏斠阎畔⒒虮韱蔚母郊有畔⑹职咽纸坛贪鏅?quán)所有：尚學(xué)堂科技http:/尚學(xué)堂select 列表框 Multiple 表示多重列表框，可以多選 Selected 被選中 多行多列文本框 Rows: 行數(shù) Cols: 列數(shù) Wrap: Off : 不換行 Soft: 自動(dòng)換行，并且如果行末有英文單詞，會(huì)將整個(gè)單詞移到下一行 Hard: 自動(dòng)換行，但會(huì)截?cái)嘈心┑膯卧~中間的值會(huì)被提交所

13、以不要含有空格手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂button 按下該按鈕沒有反映 按下該按鈕，該form中所有的輸入信息將被提交到服務(wù)器 按下該按鈕，該form中所有的輸入部分將被重置 點(diǎn)擊圖片提交Label標(biāo)簽與輸入元素相關(guān)聯(lián)見DreamWeaver演示手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂框架 嵌套 Pixels or %yes no auto18.html19.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂鏈接、表單與框架 Target: Frame name _blank 新窗口 _self 本窗口 _parent 父窗口（本窗口的上一級(jí)窗口） _to

14、p 瀏覽器窗口手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂HTML網(wǎng)上行 比老師更加淵博的老師 互聯(lián)網(wǎng) 打開網(wǎng)頁 IE菜單查看源文件 IE菜單文件另存為 學(xué)習(xí)其他的優(yōu)秀的HTML設(shè)計(jì) 可以查看CSS 可以查看Javascript 讀代碼應(yīng)該直奔目的地 沒必要背過HTML標(biāo)簽尚學(xué)堂 手把手教程http:/版權(quán)所有：尚學(xué)堂科技 JAVA V3.0http:/CSSHTML美容師美容師手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂課程內(nèi)容 CSS介紹 CSS細(xì)節(jié)CSS的各種屬性 視熟悉程度，應(yīng)掌握在1-6個(gè)小時(shí)左右，當(dāng)然了，我們培養(yǎng)的是程序員，這個(gè)時(shí)間足夠了手把手教程版權(quán)所有：尚學(xué)堂科技htt

15、p:/尚學(xué)堂CSS定義 CSSCascade Style Sheet層疊樣式表 1998/5/12，CSS level2成為W3C標(biāo)準(zhǔn) 用來裝飾HTML/XML的標(biāo)記集合 特點(diǎn)： 樣式表由樣式規(guī)則組成，以告訴瀏覽器如何顯示一個(gè)文檔 每個(gè)規(guī)則的組成包括一個(gè)選擇符-通常是一個(gè)HTML的元素-和該選擇符所接受的樣式 每個(gè)元素可以定義多個(gè)屬性，每個(gè)屬性帶有一個(gè)值，共同的描述選擇符如何呈現(xiàn)手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂CSS樣式 樣式規(guī)則格式： 選擇符屬性:值 單一選擇符的復(fù)合樣式聲明應(yīng)該用分號(hào)分割： 選擇符屬性1:值1; 屬性2:值2 01.html手把手教程版權(quán)所有：尚學(xué)堂科技ht

16、tp:/尚學(xué)堂CSS的調(diào)用方式 在Head中調(diào)用(01.html) 在Body中調(diào)用(02.html) 調(diào)用css文件(03.html/03.css) CSS的優(yōu)先級(jí)問題 按照最靠近元素的定義來顯示(04.html) 如果兩個(gè)css文件沖突,以后面的為準(zhǔn)手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂CLASS & ID 類選擇符：Class 一個(gè)選擇符能有不同的Class，因而允許同一個(gè)選擇符具有不同的樣式(05.htm) 不同的選擇符也可以同時(shí)定義一樣的樣式(06.htm) ID選擇 06_1.htm手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂CSS組合/注釋 可以一次性定義多個(gè)選擇符

17、的樣式 H1,H2,H3color:red;font-family:serif P A 06_2.html 注釋： /*這是注釋*/手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂字體屬性屬性屬性含義含義屬性值屬性值font-family字體各種字體font-style字體樣式italic、obliquefont-variant小體大寫small-capsfont-weight字體粗細(xì)bold、bolder、lighterfont-size字體大小absolute、relative、%color字體顏色顏色值例：07.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂顏色與背景屬性屬性含

18、義屬性值Color顏色顏色值Background-color背景色顏色值Background-image背景圖案圖片路徑Background-repeat背景圖案重復(fù)方式Repeat-x | repeat-y | no-repeatBackground-attachment背景的滾動(dòng)Scroll | fixBackground-position背景圖案初始位置% | n em | top | left | right | bottom 例：08.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂文本屬性屬性屬性含義含義屬性值屬性值word-spacing單詞間距n emletter-sp

19、acing字母間距n emtext-decoration裝飾樣式underline| overline| line-through| blinkvertical-align垂直方向位置sub| super |top |text-top|middle| bottom| text-bottomtext-transform轉(zhuǎn)為其他形式capitalize| uppercase| lowercasetext-align對(duì)齊left| right| center| justifytext-indent縮進(jìn)n em| %line-height行高pixels、n em、%例：09.htmlEm:12pix

20、els 的 M常用于印刷的單位手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂裝飾超鏈接 偽類選擇符 對(duì)鏈接的修飾 A:link 未訪問時(shí)的狀態(tài) A:visited 訪問過后的狀態(tài) A:active 鼠標(biāo)點(diǎn)中不放時(shí)的狀態(tài) A:hover 鼠標(biāo)劃過時(shí)的狀態(tài) 10.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂邊距屬性屬性屬性含義含義屬性值屬性值margin-top上邊距n em | %margin-right右n em | %margin-bottom下n em | %margin-left左n em | %例：11.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂填充屬性屬性

21、屬性含義含義屬性值屬性值padding-top上填充n em | %padding-right右n em | %padding-bottom下n em | %padding-left左n em | %例：12.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂邊框?qū)傩詫傩詫傩院x含義屬性值屬性值Border-top-width上邊框?qū)挾萵 em | thin | medium | thickBorder-right-width右同上Border-bottom-width下同上Border-left-width左同上Border-width四邊同上Border-color邊框顏色Color

22、Border-style邊框樣式Dotted | dash | solid | double | groove | ridge | inset | outsetBorder-top |right|bottom|left上(右|底|左)所有屬性Border-width | border-style | color例：13.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂圖文混排屬性屬性含義含義屬性值屬性值Width寬度n em | %Height高度n emFloat文字環(huán)繞Left | rightclear去除文字環(huán)繞Left | rig

23、ht | both例：14.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂列表屬性屬性屬性含義含義屬性值屬性值Display是否顯示Block | inline | list-item | noneWhite-space空白部分Pre | nowrap | normal（是否合并)List-style-type項(xiàng)目編號(hào)Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|noneList-style-image項(xiàng)目前圖片Img-urlList-style-position第二行位置Insi

24、de | outsideList-style全部屬性Keyword | position | url例：15.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂鼠標(biāo)屬性屬性值含義屬性值含義Auto自動(dòng)N-resize上箭頭Crosshair+Se-resize右下Default默認(rèn)Sw-resize左下Hand手形S-resize下箭頭Move移動(dòng)W-resize左箭頭E-resize右箭頭TextINe-resize右上Wait沙漏Nw-resize左上help幫助例：16.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂定位屬性屬性屬性含義含義屬性值屬性值Position位置

25、Absolute|relative|staticLeft | top橫向|縱向位置N em | %Width | height寬度|高度同上Clip剪切Shape | autoOverflow內(nèi)容超出時(shí)Visible | hidden | scroll | autoZ-index立體效果Integervisibility可見性Inherit | visible | hidden例：17.html 18.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂濾鏡屬性屬性值含義屬性值含義Alpha半透明Invert底片Blur模糊Light燈光投影Chroma指定顏色透明Mask透明膜Drops

26、hadow投射陰影Shadow陰影Fliph水平翻轉(zhuǎn)Wave波紋Flipv垂直翻轉(zhuǎn)XrayX射線Glow光效Grayscale灰度例：19.html手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂 CSS布局 CSS框架手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂DreamWeaver 認(rèn)識(shí)DreamWeaver 練習(xí)使用DreamWeaver 用DreamWeaver畫表格和表單 用DreamWeaver來應(yīng)用CSS尚學(xué)堂 手把手教程http:/版權(quán)所有：尚學(xué)堂科技 JAVA V3.0http:/JavaScriptWEB魔術(shù)師魔術(shù)師手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂本章內(nèi)

27、容的學(xué)習(xí)周期 視熟悉程度，應(yīng)該在416小時(shí)左右，可以達(dá)到入門并熟悉常用操作的目的，例如：打開新窗口、判斷表單輸入等。當(dāng)然了，javascript是一門獨(dú)立的語言，如果應(yīng)用的好，可以作出很多豐富多彩的效果，甚至游戲。手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂課程內(nèi)容 Javascript介紹 Javascript語言 視熟悉程度，應(yīng)該在416小時(shí)左右，可以達(dá)到入門并熟悉常用操作的目的，例如：打開新窗口、判斷表單輸入等。當(dāng)然了，JavaScript是一門獨(dú)立的語言，如果應(yīng)用的好，可以作出很多豐富多彩的效果，甚至游戲。手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂程序開發(fā)分為客戶端、服務(wù)器端

28、 客戶端開發(fā)的好處 減少客戶端到服務(wù)器端的往返。 表單驗(yàn)證 服務(wù)器端開發(fā)的好處 web應(yīng)用的核心邏輯集中管理 胖客戶端、瘦客戶端手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂客戶端編程的主要技術(shù) javascript（最主要的） vbscript jscript applet activex組件 plug-in技術(shù)（價(jià)值在于：讓專家級(jí)程序員開發(fā)新型語言） flash技術(shù)的最新發(fā)展 jsdk包含的plug-in yahoo 的工具條 百度搜索伴侶 CNNIC網(wǎng)絡(luò)實(shí)名等 3721手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂學(xué)習(xí)資料 msdnjscript參考 CoreGuideJS15.zi

29、p CoreReferenceJS15.zip JavaScript手冊(cè)中文.chm JavaScript 2005- Wrox - Professional Javascript For Web Developers.pdf手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂JavaScript and ECMA versionsJavaScript version Relationship to ECMA version JavaScript 1.1 ECMA-262, Edition 1 is based on JavaScript 1.1. JavaScript 1.2 ECMA-262

30、was not complete when JavaScript 1.2 was released.JavaScript 1.3 JavaScript 1.3 is fully compatible with ECMA-262, Edition 1. JavaScript 1.4 JavaScript 1.4 is fully compatible with ECMA-262, Edition 1. JavaScript 1.5 JavaScript 1.5 is fully compatible with ECMA-262, Edition 3.手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)

31、堂JavaScript和Java的區(qū)別 基于對(duì)象和面向?qū)ο?解釋和編譯 強(qiáng)變量和弱變量 JavaScript中變量聲明，采用其弱類型。 即變量在使用前不需作聲明，而是解釋器在運(yùn)行時(shí)檢查其數(shù)據(jù)類型x=1234; /數(shù)值型變量數(shù)值型變量y“4321”; /字符型變量字符型變量 代碼格式不一樣 嵌入方式不一樣 手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂JavaScriptJavaScript是一種描述式語言，它與HTML結(jié)合起來，用于增強(qiáng)功能，并提高與最終用于之間的交互性能由Netscape公司利用Sun的Java開發(fā)它是與Java完全不同的一種語言。雖然在結(jié)構(gòu)和語法上與Java類似，但是，它

32、只是函數(shù)式的語言。客戶端的JavaScript 必須要有瀏覽器的支持JavaScript (ECMAScript)基礎(chǔ)語法DOM Document Object ModelBOM Brower Object ModelJavaScript/jscript / ECMAScriptavaScript是由Netscape公司開發(fā) .它的前身是Live Script Microsoft發(fā)行jscript用于internet explorer 最初的jscript和javascript差異過大，web程序員不得不痛苦的為兩種瀏覽器編寫兩種腳本。于是誕生了ECMAScript,是一種國際標(biāo)準(zhǔn)化的java

33、script版本。現(xiàn)在的主流瀏覽器都支持這種版本。 手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂ECMAScript ECMAScript并不與任何具體瀏覽器相綁定 一個(gè)完整的JavaScript實(shí)現(xiàn)是由以下3個(gè)不同部分組成的（見圖1-1）： 核心（ECMAScript） 文檔對(duì)象模型（DOM）； 瀏覽器對(duì)象模型（BOM）。 手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂在網(wǎng)頁中加入JavaScript 通過在網(wǎng)頁中加入標(biāo)記JavaScript的開始和結(jié)束，將JavaScript代碼放到之間 (1.htm) 也可以引入一個(gè)外部的JavaScript文件，這個(gè)JavaScript文件一般以

34、.js作為擴(kuò)展名 (2.htm) 原則上，放在之間。但視情況可以放在網(wǎng)頁的任何部分 (3.htm) 一個(gè)頁面可以有幾個(gè)/Script，不同部分的方法和變量，可以共享。 (4.htm)手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂JavaScript的數(shù)據(jù)類型的數(shù)據(jù)類型 The primary (primitive) data types are: String Number Boolean The composite (reference) data types are: Object Array The special data types are: Null Undefined (var

35、 a;)手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂控制字符 JavaScript中有些以反斜杠（）開頭的不可顯示的特殊字符。通常稱為控制字符。 b :表示退格符。 f :表示換頁。 n :表示換行符。 r :表示回車符。 t :表示Tab符號(hào)。 :表示單引號(hào)本身。 :表示雙引號(hào)本身。手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂類型轉(zhuǎn)換Operation Result Add a number and a string The number is coerced into a string. Add a Boolean and a string The Boolean is coerc

36、ed into a string. Add a number and a Boolean The Boolean is coerced into a number. var a=3; var b=10; var c=true;alert(a+b); alert(b+c); alert(a+c);手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂JavaScript基本語法 變量 JavaScript是一門弱類型的語言，所有的變量定義均以var來實(shí)現(xiàn) JavaScript的變量建議先定義，再使用 JavaScript區(qū)分大小寫 雖然JavaScript可以不需定義即可直接使用變量，但不建議這么做

37、(5.htm) 數(shù)組定義 var arr = new Array(3); 通過arr.length取得數(shù)組的長度 (6.htm) 注釋的寫法和java的一樣手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂數(shù)組使用方式： myarray=new Array(num) myarray=new Array(value1,value2)aa = new Array(3);aa20 = 444;document.write (aa20); num不設(shè)定，則按數(shù)組默認(rèn)的最大長度自動(dòng)設(shè)定。例如：aa = new Array();aa20 = 444;document.write (aa.length);手把

38、手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂JavaScript基本語法運(yùn)算符 算術(shù)運(yùn)算 +、-、*、/ 、=、=、= (7.htm) 邏輯運(yùn)算 與：& 或：| 非：! (8.htm) 字符串運(yùn)算符 連接運(yùn)算：+ (9.htm) 取子集：substring(index1,index2) (10.htm) 條件表達(dá)式 條件?A:B (11.htm)手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂substring 方法方法 返回位于String對(duì)象中指定位置的子字符串。 strVariable.substring(start,end) String Literal.substring(start

39、,end) 參數(shù)參數(shù) start 指明子字符串的起始位置，該索引從 0 開始起算。 end 指明子字符串的結(jié)束位置，該索引從 0 開始起算。 說明說明 substring方法將返回一個(gè)包含從start到最后（不包含end）的子字符串的字符串。 substring方法使用start和end兩者中的較小值作為子字符串的起始點(diǎn)。例如，strvar.substring(0, 3)和strvar.substring(3, 0)將返回相同的子字符串。 如果start或end為NaN或者負(fù)數(shù)，那么將其替換為0。 子字符串的長度等于start和end之差的絕對(duì)值。例如，在strvar.substring(0,

40、 3)和strvar.substring(3, 0)返回的子字符串的的長度是 3。手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂JavaScript基本語法控制語句 if語句 if(條件) else if(條件1) else(12.htm) while語句 while(條件) 13.htm switch 語句 switch(i) case i1: casei2: default: (14.htm) for 15.htm dowhile 16.htm while 17.htm手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂JavaScript內(nèi)置類型 typeof 返回值有六種可能： numb

41、er, string, boolean, object, function, 和 undefined. typeof 操作符typeof.htm手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂字符串對(duì)象字符串對(duì)象 屬性：length 方法： 字體控制： big() blink() bold() fixed() fontcolor(color) fontsize(size) Italics() small() anchor() 字符串： toLowCase() toUpperCase() indexOf(char,fromIndex) substring(start,end)手把手教程版權(quán)所有：

42、尚學(xué)堂科技http:/尚學(xué)堂big()、bold()、link()var strVariable = This is a string object;strVariable = strVariable.big().big().big().big().big().big().big().big().big();strVariable = strVariable.bold(); strVariable = strVariable.link(http:/);document.write(strVariable);This is a string object手把手教程版權(quán)所有：尚學(xué)堂科技http:/

43、尚學(xué)堂substring、indexOf substring(start,end) 返回字符串的子字符串 案例：substring.htm indexOfcharactor,fromIndex 字符搜索 案例：indexOf.htm手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂Math對(duì)象對(duì)象常用方法： abs() 絕對(duì)值 sin() , cos() 正弦余弦值 asin() , acos() 反正弦反余弦 tan() , atan() 正切反正切 round() 四舍五入 sqrt() 平方根 pow(x,y) x的y次方案例： Math.htm手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚

44、學(xué)堂Date對(duì)象對(duì)象創(chuàng)建方式： myDate = new Date(); 日期起始值:9年月日: 主要方法 getYear(): 返回年數(shù) setYear(): 設(shè)置年數(shù) getMonth(): 返回月數(shù) setMonth():設(shè)置月數(shù) getDate(): 返回日數(shù) setDate():設(shè)置日數(shù) getDay(): 返回星期幾 setDay():設(shè)置星期數(shù) getHours():返回小時(shí)數(shù) setHours():設(shè)置小時(shí)數(shù) getMinutes():返回分鐘數(shù) setMintes():設(shè)置分鐘數(shù) getSeconds():返回秒數(shù) setSeconds():設(shè)置秒數(shù) getTime() :

45、返回毫秒數(shù) setTime() :設(shè)置毫秒數(shù)案例： Date.htm手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂JavaScript基本語法函數(shù) 函數(shù)的使用 利用function來定義一個(gè)函數(shù) (18.htm) 傳入?yún)?shù) (19.htm) 傳出值 (20.htm)手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂函數(shù)的參數(shù)傳遞preloadTreeImages(1.gif,2.gif,3.gif);function preloadTreeImages()for (var i = 0; i arguments.length; i+)var img = document.createElemen

46、t(img);img.src = argumentsi;div1.appendChild(img);手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂JavaScript事件處理onFocus：在用戶為了輸入而選擇select、text、textarea等時(shí)(onFocus.htm)onBlur：在select、text、password、textarea失去焦點(diǎn)時(shí)(onBlur.htm)onChange：在select、text、textarea的值被改變且失去焦點(diǎn)時(shí)(onChange.htm/SelectionChange.htm)onClick：在一個(gè)對(duì)象被鼠標(biāo)點(diǎn)中時(shí)（button,che

47、ckbox,radio,link,reset,submit,text,textarea等）(onClick.htm)onLoad：出現(xiàn)在一個(gè)文檔完成對(duì)一個(gè)窗口的載入時(shí)(onLoad.htm)onUnload：當(dāng)用戶退出一個(gè)文檔時(shí)(onload.htm)onMouseOver：鼠標(biāo)被移動(dòng)到一個(gè)對(duì)象上時(shí)(onMouse.htm)onMouseOut：鼠標(biāo)從一個(gè)對(duì)象上移開時(shí)(onMouse.htm)onSelect：當(dāng)form對(duì)象中的內(nèi)容被選中時(shí)(onSelect.htm)onSubmit：出現(xiàn)在用戶通過提交按鈕提交一個(gè)表單時(shí)(onSubmit.htm)手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)

48、堂JavaScript的對(duì)話框 警告框(alert)：出現(xiàn)一個(gè)提示信息 21.htm 詢問框(prompt)：返回輸入的值 22.htm 確認(rèn)框(confirm)：根據(jù)不同的選擇，返回true/false 23.htm手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂使用eval 不使用eval alert (3+2); -32 使用eval的上下文環(huán)境 alert (eval(3) + eval(2); -5 eval()函數(shù)可以把一個(gè)字符串當(dāng)作一個(gè)JavaScript表達(dá)式一樣去執(zhí)行它eval_1.htmEval_2.htm手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂javascript

49、 hijacking 函數(shù)劫持 通過替換js函數(shù)的實(shí)現(xiàn)來達(dá)到劫持這個(gè)函數(shù)調(diào)用的目的 hook.htm手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂this指的是當(dāng)前的對(duì)象 24.htm 函數(shù)調(diào)用時(shí)使用this object.htm 自定義對(duì)象,隨時(shí)可以增加屬性,方法 class.htm 定義類手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂對(duì)象 forin In后跟一個(gè)對(duì)象，對(duì)此對(duì)象中的所有元素循環(huán)一次 (25.htm 25_1.htm) with 為一段代碼建立一個(gè)缺省的對(duì)象，任何無對(duì)象的屬性引用，都將使用該缺省的對(duì)象 (26.htm) new 用于生成一個(gè)新的對(duì)象 (27.htm)手把手教程版權(quán)所有：尚學(xué)堂科技http:/尚學(xué)堂TryCatchtrydocument.writeln(Beginnng the try block)document.writeln(No exceptions yet)/ Create a syntax