HTML+CSS+JS 入門基礎(chǔ)

1、目錄,1.HTML/CSS/JavaScript先睹為快 2.HTML 3.CSS 4.JavaScript,1.1 HTML代碼, 未使用css，JavaScript的html網(wǎng)頁(yè) 未使用css，JavaScript的html網(wǎng)頁(yè) 這是一個(gè)未使用css，JavaScript的html網(wǎng)頁(yè) 使用記事本即可編寫HTML代碼，擴(kuò)展名是html或htm。 使用瀏覽器就可以查看其效果。,1.2 CSS代碼, 使用了css的html網(wǎng)頁(yè) h2 font-size:50 pfont-size:20;font-style:italic 使用了css的html網(wǎng)頁(yè) 這是一個(gè)使用了css的html網(wǎng)頁(yè) ,1.3

2、 JavaScript代碼, 使用了css和JavaScript的html網(wǎng)頁(yè) h2 font-size:50 pfont-size:20;font-style:italic alert(這是JavaScript起的作用); 使用了css和JavaScript的html網(wǎng)頁(yè) 這是一個(gè)使用了css和JavaScript的html網(wǎng)頁(yè) ,1.4 HTML、CSS、JavaScript的角色,HTML：超文本標(biāo)記語(yǔ)言。是網(wǎng)頁(yè)設(shè)計(jì)的主要語(yǔ)言。無(wú)論網(wǎng)頁(yè)是否包括動(dòng)畫、多媒體、圖形等各種復(fù)雜的元素，其基本架構(gòu)都是HTML. CSS：層疊樣式表。是目前唯一的網(wǎng)頁(yè)排版樣式標(biāo)準(zhǔn)，彌補(bǔ)了HTML在網(wǎng)頁(yè)格式化方面的不

3、足，幫助用戶對(duì)頁(yè)面的布局加以更多的控制。 JavaScript用于開發(fā)Internet客戶端應(yīng)用程序，實(shí)現(xiàn)了一種實(shí)時(shí)、動(dòng)態(tài)、交互的頁(yè)面功能。它的出現(xiàn)使靜態(tài)的HTML頁(yè)面逐漸本客戶端可做出響應(yīng)的動(dòng)態(tài)頁(yè)面所取代。 可以在HTML語(yǔ)言中直接編寫CSS和JavaScript代碼，也可以獨(dú)立編寫。擴(kuò)展名分別是.css和.js,2 HTML,1:HTML簡(jiǎn)介 2:基本標(biāo)記 3:列表list 4:表格table 5:表單form 6:框架frame 7:層div,2.1.1 HTML概念,HTML Hyper Text Markup Language 超文本標(biāo)識(shí)語(yǔ)言 是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。

4、 用HTML編寫的超文本文檔稱為HTML文檔 HTML文檔：*.htm或*.html 文件名區(qū)分大小寫 瀏覽HTML文件的工具:瀏覽器 例：Netscape Navigator ,Microsoft IE,Mazilla FireFox,2.1.2 HTML文檔的編寫方法,手工直接編寫 記事本等，存成.htm .html格式，要求用戶必須掌握HTML 使用可視化HTML編 輯 器 Frontpage、Dreamweaver等,容易產(chǎn)生廢碼,2.1.3 HTML 文檔結(jié)構(gòu), my first page This is my first homepage! 這是我的第一張網(wǎng)頁(yè)！ ,2.1.3 HT

5、ML 文檔結(jié)構(gòu),標(biāo)記(簽)是HTML語(yǔ)言的基本部分，比如、。大多數(shù)標(biāo)記總是成對(duì)出現(xiàn)，每一對(duì)標(biāo)記一般都有一個(gè)開始的標(biāo)記并且結(jié)束的標(biāo)記總是在開始的標(biāo)記前加一個(gè)斜杠。 屬性：HTML標(biāo)記有自己的相關(guān)屬性，每一個(gè)屬性還可以由我們網(wǎng)頁(yè)編制者賦一定的值。 my first homepage 注意： 標(biāo)記不區(qū)分大小寫。例都可以 標(biāo)記中不要有空格，否則瀏覽器無(wú)法識(shí)別。例錯(cuò)誤 任何空格和回車在代碼中無(wú)效。插入空格和回車分別用 和 屬性的值可以用雙引號(hào)引起來(lái)，也可以不引，最好引起來(lái) 各屬性之間無(wú)先后次序，屬性也可省略（即取默認(rèn)值）,2.1.3 HTML 文檔結(jié)構(gòu)-head(title),標(biāo)記出現(xiàn)在文檔的開頭部分。

6、 與之間的內(nèi)容不會(huì)在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。 1: 標(biāo)記定義HTML文檔的標(biāo)題。 與之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄。,2.1.3 HTML 文檔結(jié)構(gòu)-head(meta),2:標(biāo)記 標(biāo)記定義網(wǎng)頁(yè)的一些相關(guān)信息，例文件的關(guān)鍵字，作者，網(wǎng)頁(yè)過(guò)期時(shí)間等，這些信息不會(huì)在瀏覽器的文檔窗口顯示 用來(lái)標(biāo)記搜索引擎在搜索你的頁(yè)面時(shí)所取出的關(guān)鍵詞。 用來(lái)標(biāo)記文檔的作者。 用來(lái)標(biāo)記你的頁(yè)面的解碼方式。 用來(lái)自動(dòng)刷新網(wǎng)頁(yè),2.1.3 HTML 文檔結(jié)構(gòu)-(head)meta,編寫一個(gè)網(wǎng)頁(yè)，要求3秒鐘后自動(dòng)跳轉(zhuǎn)到北軟教育首頁(yè)。 my first page 三秒鐘后本網(wǎng)頁(yè)將自動(dòng)跳轉(zhuǎn)到

7、北軟教育首頁(yè) ,2.1.3 HTML 文檔結(jié)構(gòu)-body,表明是HTML文檔內(nèi)容主體部分。在與之間，通常都會(huì)有很多其它標(biāo)記；這些標(biāo)記和標(biāo)記屬性構(gòu)成HTML文檔的主體部分。 自身屬性主要有： 1)bgcolor bgcolor屬性標(biāo)志HTML文檔的背景顏色。如：bgcolor=#CCFFCC。 2)background background屬性標(biāo)志HTML文檔的背景圖片?？梢允褂玫膱D片格式為gif,jpg 如：background=“images/bg.gif。 3)text text屬性標(biāo)志HTML文檔的正文文字顏色。如：text=“#FF6666”。 text定義的顏色將應(yīng)用于整篇文檔。,2

8、.1.3 HTML 文檔結(jié)構(gòu)-body,2.2 基本 HTML 標(biāo)記,1.標(biāo)題標(biāo)記 2.文字標(biāo)記 3.段落級(jí)標(biāo)記 4.字符級(jí)標(biāo)記 5.水平標(biāo)尺標(biāo)記 6.HTML注釋 6.超級(jí)鏈接 7.圖像標(biāo)記 8.移動(dòng)的文字,2.2.1 標(biāo)題標(biāo)記,可顯示六種大小的標(biāo)題，即到，為最大，為最小 HTML 簡(jiǎn)介 HTML 簡(jiǎn)介 HTML 簡(jiǎn)介 HTML 簡(jiǎn)介 HTML 簡(jiǎn)介 HTML 簡(jiǎn)介 HTML 簡(jiǎn)介 ,2.2.2 文字標(biāo)記,文字屬性標(biāo)記 1.文字顏色 . #=RRGGBB 16 進(jìn)制數(shù)碼 2.文字字體 . #=客戶端可獲得的字體 3.文字大小 . #=1, 2, 3, 4, 5, 6, 7等,2.2.3.段落

9、級(jí)標(biāo)記,段落標(biāo)記(paragraph) 換行符標(biāo)記 預(yù)格式化標(biāo)記： HTML的段落與段落之間有一定的空隔。 如果不希望出現(xiàn)空隔而只想換行的話，就要用到另一個(gè)元素，即元素。 利用標(biāo)記對(duì)網(wǎng)頁(yè)中文字段落進(jìn)行預(yù)格式化，在輸入過(guò)程中，按鍵盤上的回車鍵，就可以生成一個(gè)段落。即瀏覽器會(huì)以文本輸入格式顯示 用三種標(biāo)記分別實(shí)現(xiàn)登鸛雀樓的顯示,2.2.4 字符級(jí)標(biāo)記,常用字符級(jí)標(biāo)記 傾斜文本 粗體文本 下劃線文本 刪除線文本 強(qiáng)調(diào)文本 居中顯示文本 空格標(biāo)記,2.2.5 水平線標(biāo)記,水平線 ：設(shè)定線寬 ：設(shè)定線長(zhǎng) ：設(shè)定對(duì)齊方式 #=left, right ：設(shè)定線的顏色 ,2.2.6 HTML注釋,HTML文檔

10、可以插入注釋。不但便于對(duì)程序排錯(cuò)，也使其他人更易讀懂自己的代碼 HTML注釋的格式為：源碼依然存在，不會(huì)被瀏覽器所解釋 注釋語(yǔ)句的特點(diǎn)是僅用于程序中某一句或一段語(yǔ)句的作用說(shuō)明，瀏覽器在執(zhí)行過(guò)程中將忽略掉注釋語(yǔ)句的內(nèi)容，對(duì)其視而不見(jiàn)。,2.2.7 超級(jí)鏈接,超級(jí)鏈接是用錨元素定義的 在元素下，有元素屬性href,href的屬性值為一個(gè)URL地址 如：指向?qū)W院的超級(jí)鏈接 如：普通超級(jí)鏈接 如：普通超級(jí)鏈接 開一個(gè)新的(瀏覽器)窗口 (Target Window) . ,2.2.7 超級(jí)鏈接,超級(jí)鏈接的路徑 絕對(duì)路徑：指文件的完整路徑，包括協(xié)議，主機(jī)地址等，一般用于網(wǎng)站的外部鏈接。 相對(duì)路徑：指相對(duì)

11、于當(dāng)前文件的路徑，它包含了從當(dāng)前文件指向目的文件的路徑，一般用于網(wǎng)站的內(nèi)部鏈接。,2.2.8 圖像標(biāo)記, 的基本屬性是src屬性，src的屬性值為所引用的圖片的URL地址。 src屬性是必須的。src的URL可以是絕對(duì)地址，也可以是相對(duì)地址 width指定寬度，height指定高度。它們的屬性值可以是象素，也可以是%。 定義圖片替代文本的方法是： 替代文本有兩個(gè)作用： 提示：若圖片下載成功，把鼠標(biāo)放在圖片上，會(huì)出現(xiàn)提示文本。 替代：若圖片下載不成功，在圖片位置出現(xiàn)替代文本。 圖片的對(duì)齊方式 #=left,right,top,middle,bottom,2.2.8 圖像標(biāo)記,HTML 文檔中的圖

12、片 GIF（Graphics Interchange Format ）圖像 (.GIF) 支持無(wú)損壓縮 只支持256色 JPEG（Joint Photographic Experts Group）圖像 (.JPG) 有損壓縮 ，但這個(gè)損失是剔除一些視覺(jué)上不易察覺(jué)的部分。 通常用來(lái)保存超過(guò)256色的圖片文件 PNG（Portable Network Graphics ） 新興的網(wǎng)絡(luò)圖片格式，結(jié)合了gif和jpeg的優(yōu)點(diǎn)。 可以將圖片文件以最小的方式壓縮而不造成圖片失真 支持48bit的色彩。,2.2.8 圖像標(biāo)記,圖像的超級(jí)鏈接 圖像的超級(jí)鏈接是指整個(gè)圖像的超級(jí)鏈接，當(dāng)點(diǎn)擊圖像的任何部分時(shí)，都會(huì)

13、打開這個(gè)超級(jí)鏈接。定義默認(rèn)超級(jí)鏈接的方法是： 圖像的熱區(qū)鏈接 熱區(qū)就是在圖片中特意劃分出一個(gè)熱點(diǎn)區(qū)域。當(dāng)點(diǎn)擊圖象的熱區(qū)時(shí)，才會(huì)打開這個(gè)超級(jí)鏈接。 需要使用map標(biāo)記指定熱區(qū)。,2.2.9 移動(dòng)的文字,基本語(yǔ)法 . 文字移動(dòng)屬性 (1)方向 ：direction=# #=left, right,up,down (2)方式： behavior=# #=scroll(循環(huán)), slide(只走一次), alternate(來(lái)回走) (3)循環(huán): loop=# #=次數(shù)；若未指定則循環(huán)不止(infinite) (4)速度: scrollamount=# (5)延時(shí): scrolldelay=#,2.3

14、.1 無(wú)序列表,無(wú)序列表由和元素定義的: sports food drink friends 無(wú)序列表的默認(rèn)符號(hào)是圓點(diǎn)。 元素有type屬性，通過(guò)定義不同的type屬性可以改變列表的項(xiàng)目符號(hào)。目前，type屬性的屬性值有：disc(圓)、circle （圓圈）、square（方塊） 支持嵌套定義,2.3.2 有序列表,有序列表由和定義: sports drink friends 元素也有自己的type屬性，type屬性的屬性值有1、A、a、I、i等。例如，我們以A、B、C作為列表的編號(hào) 元素還可以定義列表的起始編號(hào)，如我們希望列表的第一個(gè)編號(hào)為5，而不是1，則需要定義元素的start屬性 支持

15、嵌套定義,2.4.1 表格的基本結(jié)構(gòu),定義表格 定義表頭 定義表行 定義單元格 . 定義表行 定義單元格 ,2.4.1 表格的基本結(jié)構(gòu), 元素：定義一個(gè)表格。每一個(gè)表格只有一對(duì)和，一張頁(yè)面中可以有多個(gè)表格。 元素：定義表格的行，一個(gè)表格可以有多行，所以對(duì)于一個(gè)表格來(lái)說(shuō)不是唯一的。 元素：定義表格的一個(gè)單元格。每行可以有不同數(shù)量的單元格，在和之間是單元格的具體內(nèi)容。 需要注意的是：上述的三個(gè)元素必須、而且只能夠配對(duì)使用。缺少任何一個(gè)元素，都無(wú)法定義出一個(gè)表格。 元素：定義表格的表頭行，一個(gè)表格只能有一個(gè)表頭行或者沒(méi)有，所以對(duì)于一個(gè)表格來(lái)說(shuō)是唯一的或沒(méi)有。,2.4.2 表格的屬性,表格的屬性 wi

16、dth屬性：指定表格或某一個(gè)表格單元格的寬度。單位可以是%或者象素。 height屬性：指定表格或某一個(gè)表格單元格的高度。單位可以是%或者象素。 border屬性：表格邊線粗細(xì) bgcolor屬性：指定表格或某一個(gè)單元格的背景顏色。 background屬性：指定表格或某一個(gè)單元格的背景圖片。其屬性值為一個(gè)URL地址 align屬性：指定表格或某一個(gè)單元格里的內(nèi)容（文本、圖片等）的對(duì)齊方式(left,center,right)。,2.4.3 單元格的屬性,單元格屬性 valign屬性：指定某一個(gè)單元格里的內(nèi)容（文本、圖片等）的垂直對(duì)齊方式。垂直對(duì)齊方式的屬性值包括： top：頂端對(duì)齊； mid

17、dle：居中對(duì)齊； bottom：底端對(duì)齊; baseline：相對(duì)于基線對(duì)齊; align屬性：指定某一個(gè)單元格里的內(nèi)容（文本、圖片等）的水平對(duì)齊方式（left,center,right） colspan：屬性值表示當(dāng)前單元格跨越幾列 rowspan：屬性值表示當(dāng)前單元格跨越幾行,2.4.4 行的屬性,行屬性 1、valign屬性：指定某一個(gè)單元格里的內(nèi)容（文本、圖片等）的垂直對(duì)齊方式。垂直對(duì)齊方式的屬性值包 top：頂端對(duì)齊； middle：居中對(duì)齊；bottom：底端對(duì)齊。 baseline：相對(duì)于基線對(duì)齊。 2、align屬性：指定表格或某一個(gè)單元格里的內(nèi)容（文本、圖片等）的水平對(duì)齊方

18、式(left,center,right) 3、height屬性：指定表格中某一行的高度。單位可以是%或者象素,2.4.5 表格的嵌套,在 之間插入表格，實(shí)現(xiàn)表格嵌套 導(dǎo)航列表 計(jì)算機(jī) 政治 軍事 法律 正文內(nèi)容 ,2.4.5 表格的作用,表格是用于在 HTML 頁(yè)面上設(shè)計(jì)數(shù)據(jù)和圖像布局的常用工具，可使用表格來(lái)組織數(shù)據(jù)，控制頁(yè)面布局 制作網(wǎng)頁(yè)時(shí)，為了以一定的形式將網(wǎng)頁(yè)中的信息組織起來(lái)，同時(shí)使網(wǎng)頁(yè)便于閱讀和頁(yè)面美觀，需要對(duì)頁(yè)面的版式進(jìn)行設(shè)計(jì)或進(jìn)行頁(yè)面 布局。而表格能將網(wǎng)頁(yè)分成多個(gè)任意的矩形區(qū)域，表格是網(wǎng)頁(yè)制作中是常用的一種簡(jiǎn)單布局工具。 表格的作用一般只是控制文本和圖像的顯示，而不顯示表格的邊框,

19、2.4.6 表格舉例, 第一季度 第二季度 一月 二月 三月 四月 五月 六月 1000 550 240 1500 2765 1240 , 3000 2430 2500 1250 900 3400 ,2.5.1 表單form,HTML表單是HTML頁(yè)面與瀏覽器端實(shí)現(xiàn)交互的重要手段。利用表單可以收集客戶端提交的有關(guān)信息。 在HTML里，我們可以定義表單，并且使表單與CGI或ASP等服務(wù)器端的表單處理程序配合。我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)課程中不會(huì)涉及程序編制。 表單是網(wǎng)頁(yè)上的一個(gè)特定區(qū)域。這個(gè)區(qū)域是由一對(duì)元素定義的。,2.5.2 表單舉例,設(shè)計(jì)一個(gè)注冊(cè)表單，輸入姓名，年齡，密碼，密碼確認(rèn)，電子郵件，性別，愛(ài)好

20、，身份，個(gè)人簡(jiǎn)歷，單擊提交按鈕提交，單擊重置按鈕重置。 姓名，年齡，電子郵件：text 密碼，密碼確認(rèn)：password 性別：radio 愛(ài)好：checkbox 身份：select 個(gè)人簡(jiǎn)歷：textarea 提交按鈕：submit 重置按鈕：reset,2.5.2 表單舉例,2.5.2 表單舉例, 姓名 密碼 密碼確認(rèn) 性別 男 女 年齡 電子郵件 愛(ài)好體育 音樂(lè) 美術(shù) 身份 學(xué)生 教師 解放軍 個(gè)人經(jīng)歷請(qǐng)輸入個(gè)人簡(jiǎn)歷 ,2.5.2 表單舉例,2.5.2 表單舉例, 姓名 密碼 密碼確認(rèn) 性別 男 女 年齡 ,2.5.2 表單舉例, 電子郵件 愛(ài)好 體育 音樂(lè) 美術(shù) 身份 學(xué)生 教師 解放

21、軍 個(gè)人經(jīng)歷 請(qǐng)輸入個(gè)人簡(jiǎn)歷 ,2.5.3 表單基本語(yǔ)法,1.表單的基本語(yǔ)法: . action屬性：用來(lái)定義表單處理程序（一個(gè)ASP、JSP等程序）的位置(相對(duì)地址或絕對(duì)地址)。 method定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種方法：get、post。 GET有數(shù)據(jù)量限制，POST無(wú)以上限制,以文件形式傳輸,2.5.3 表單基本語(yǔ)法,2.文本框的基本語(yǔ)法: ? 文本框的名字 * 默認(rèn)值 * 長(zhǎng)度 ? 最大輸入字符數(shù) 3.密碼框的基本語(yǔ)法：數(shù)據(jù)以圓點(diǎn)形式顯示，提高密碼安全性 ,2.5.3 表單基本語(yǔ)法,3.復(fù)選框的基本語(yǔ)法: 在一個(gè)表單里的所有多選框可以有一個(gè)或多個(gè)被選中。 /默

22、認(rèn)選中 4.單選框的基本語(yǔ)法: 一個(gè)表單里的所有變量名相同的單選框只能夠有一個(gè)被選中。 / 默認(rèn)選中 各個(gè)選項(xiàng)的name必須一樣才能達(dá)到預(yù)期效果 5.標(biāo)準(zhǔn)按鈕的基本語(yǔ)法: ,2.5.3 表單基本語(yǔ)法,6.提交按鈕和重置按鈕的基本語(yǔ)法: 7.圖象域的基本語(yǔ)法:：相當(dāng)于漂亮的submit按鈕。 8. 隱藏域的基本語(yǔ)法 隱藏域在網(wǎng)頁(yè)中對(duì)用戶是不可見(jiàn)的，用戶單擊提交按鈕提交表單時(shí)，隱藏域的信息也被一起發(fā)送到服務(wù)器。 ,2.5.3 表單基本語(yǔ)法,9.文本區(qū)域的基本語(yǔ)法: . 10.下拉菜單的基本語(yǔ)法 音樂(lè) 美術(shù) 體育 ,2.5.3 表單基本語(yǔ)法,2.6.1 框架舉例, ,2.6.1 框架舉例,框架的嵌套

23、 ,2.6.2 框架簡(jiǎn)介,框架是一種在一個(gè)網(wǎng)頁(yè)中顯示多個(gè)網(wǎng)頁(yè)的技術(shù)，通過(guò)超級(jí)鏈接可以為框架之間建立內(nèi)容之間的聯(lián)系，從而實(shí)現(xiàn)頁(yè)面導(dǎo)航。 在網(wǎng)頁(yè)文件中，框架常用于網(wǎng)頁(yè)的布局。 框架的基本結(jié)構(gòu)分為框架集frameset和框架frame兩個(gè)部分。 使用框架集的頁(yè)面的標(biāo)記將被標(biāo)記替代，然后在利用標(biāo)記去定義框架結(jié)構(gòu)。 每個(gè)框架frame由一個(gè)單獨(dú)的 HTML 頁(yè)面組成。 框架支持嵌套。當(dāng)一個(gè)框架集中既有左右分割，又有上下分割是，就要用到框架嵌套。,2.6.2 framset基本語(yǔ)法, 框架由一對(duì)定義 有兩個(gè)屬性：rows和cols rows定義上下分割的框架的大?。?cols定義左右分割的框架的大?。?在

24、定義大小時(shí)，rows和cols可使用相對(duì)大小或以百分比為單位,2.6.2 frame基本語(yǔ)法,的屬性 src：在本框架里顯示的網(wǎng)頁(yè)的URL。 frameborder：是否顯示邊框 name：定義該框架的名字。這個(gè)名字可以被一些網(wǎng)頁(yè)元素引用，如被元素引用。 noresize：框架在瀏覽器里不可以被調(diào)整大小。 scrolling：是否顯示滾動(dòng)條。yes, no, auto,2.6.2 frame基本語(yǔ)法, left.html: 快樂(lè)的生活 在當(dāng)前框架中打開超鏈接頁(yè)面 默認(rèn)就是在當(dāng)前框架頁(yè)中打開,也可以采用 target=“_self” 在指定框架中打開超級(jí)鏈接頁(yè)面 target=“name” 新開

25、窗口打開鏈接頁(yè)面 target=“_blank” 跳出整個(gè)框架集 target=“_parent”,2.7.1 圖層,圖層也是網(wǎng)頁(yè)制作中用于定位元素或布局的一種技術(shù)，圖層比表格的布局更加靈活，它能夠?qū)又械膬?nèi)容擺放到瀏覽器的任意位置，放入到層中的HTML元素包括：文字、圖像、動(dòng)畫甚至是圖層。 一個(gè)網(wǎng)頁(yè)中可以使用多個(gè)層，層與層之間可以重疊，在網(wǎng)頁(yè)制作中，使用層可以將網(wǎng)頁(yè)中的任何元素布局到網(wǎng)頁(yè)的任意位置，同時(shí)可以以任何方式重疊。 可以想象在word文檔中不同圖片之間的上下左右位置和前后重疊關(guān)系。 圖層也可以實(shí)現(xiàn)嵌套的功能。嵌套圖層最主要的特點(diǎn)就是可以保證子層永遠(yuǎn)位于父層之上。,2.7.2 圖層舉例

26、, 將元素分組 第一層 這是第一部分內(nèi)的一個(gè)段落元素 第一層的內(nèi)容。 該部分之外 第二部分 這是第二部分內(nèi)的一個(gè)段 第一層的內(nèi)容。 ,2.7.3 圖層屬性講解,基本語(yǔ)法 /設(shè)置圖層背景色 . /圖層的具體內(nèi)容 ,3.1 CSS的作用,CSS是Cascading Style Sheets(層疊樣式表)的簡(jiǎn)稱.,是一系列格式規(guī)則，它們控制網(wǎng)頁(yè)內(nèi)容的外觀。css簡(jiǎn)單來(lái)說(shuō)就是用來(lái)美化網(wǎng)頁(yè)用的。 使用CSS樣式可以非常靈活并更好地控制確切的網(wǎng)頁(yè)外觀，從精確的布局定位到特定的字體和樣式。 即使不改動(dòng)HTML，只是通過(guò)添加不同的CSS規(guī)則，就可以得到各種不同樣式的網(wǎng)頁(yè)。 可以通過(guò)簡(jiǎn)單的更改CSS文件,改變網(wǎng)

27、頁(yè)的整體表現(xiàn)形式,從而減少我們的工作量,所以她是每一個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員的必修課. CSS可以嵌入到html文檔中，也可以單獨(dú)文件形式存在，擴(kuò)展名是.css,3.1 CSS的作用,當(dāng)樣式定義在外部文件中時(shí)，一個(gè)樣式表可以用于多個(gè)頁(yè)面，甚至整個(gè)工作點(diǎn)，因此具有更好的易用性和擴(kuò)展性。 總的來(lái)說(shuō)，CSS可以完成下列工作： （1）彌補(bǔ)HTML對(duì)網(wǎng)頁(yè)格式化功能的不足，如段落間距、行距等。 （2）設(shè)置字體變化和大小。 （3）設(shè)置頁(yè)面格式的動(dòng)態(tài)更新。 （4）進(jìn)行排版定位。 CSS的特點(diǎn) （1）控制頁(yè)面中的每一個(gè)元素（精確定位）。 （2）對(duì)HTML語(yǔ)言處理樣式的最好補(bǔ)充。 （3）把內(nèi)容和格式處理相分離，減少工作量。

28、,3.2 樣式表規(guī)則,CSS的樣式規(guī)則 css樣式規(guī)則由兩部分組成：選擇器和聲明。 選擇器是樣式名稱（如TR或P）。 聲明是用于定義樣式元素。 pfont-style:italic; font-weight:bold; color:limegreen .water color:blue ,用法： RuleSelector property:value;property: value; . ,規(guī)則選擇器,聲明,屬性,屬性值,3.3 樣式表中的選擇器,1：簡(jiǎn)單選擇器(僅描述元素，而不考慮該元素在文檔結(jié)構(gòu)中的位置) 1.1 HTML選擇器-選擇器是HTML標(biāo)記的名稱 1.2 類選擇器使用HTML元素

29、的CLASS屬性 1.3 ID選擇器使用HTML元素的ID屬性 2：上下文選擇器(引用元素的上下文),3.3 樣式表中的選擇器,1.1：HTML選擇器示例 h1, h2, h3, h4, h5, h6 color: green Pfont-style:italic; font-weight:bold; color:red 測(cè)試HTML選擇器 這些選擇器使用HTML元素的名稱唯一區(qū)別是刪除了尖括號(hào)。 ,3.3 樣式表中的選擇器,1.2：類選擇器示例 .water color:blue; text-align:right p.danger color:red; text-align:center

30、測(cè)試CSS 測(cè)試水 測(cè)試危險(xiǎn) 無(wú)樣式 ,3.3 樣式表中的選擇器,1.3：ID選擇器示例 ID選擇器 #control color:red 這是火焰的顏色 本段沒(méi)有應(yīng)用樣式 ,3.3 樣式表中的選擇器,所有的HTML標(biāo)簽都可以作為類選擇器。 省略HTML標(biāo)記的類選擇器是最常用的CSS方法，使用這種方法，可以很方便的在任意元素上套用預(yù)先定義好的類樣式 HTML頁(yè)面中ID參數(shù)指定了某個(gè)單一元素，ID選擇器用來(lái)對(duì)這個(gè)單一元素定義單獨(dú)的樣式。由于ID選擇器局限性很大，只能單獨(dú)定義某個(gè)元素的樣式，一般只在特殊情況下使用。 ID是先給某個(gè)元素定義標(biāo)簽，再給它定義樣式；class是先定義好一種樣式，再套給多

31、個(gè)元素。 用多個(gè)相同ID“一般情況下”也能正常顯示。但是當(dāng)你需要用JavaScript通過(guò)id控制這個(gè)元素時(shí)(如div)，那就會(huì)出現(xiàn)錯(cuò)誤,3.3 樣式表中的選擇器,2：上下文選擇器示例 acolor:red;font-size:20 table acolor:green;font-size:25 table a:hovercolor:blue 北軟教育 北軟教育 北軟教育 ,3.3 樣式表中的選擇器,2：上下文選擇器示例 上下文選擇器 BODYcolor:blue;background:lavender;font-family:Arial; UL color:red ul acolor:gre

32、en; font-size:15 芒果桔子蘋果 芒果桔子蘋果 ,3.4 在HTML中引用樣式表,1：使用Style元素 2：使用Style屬性 3：使用Link元素,3.4 在HTML中引用樣式表,1：使用Style元素 STYLE元素應(yīng)插入文檔的元素部分中，所有規(guī)則都放置在開始標(biāo)記和結(jié)束標(biāo)記之間。顯示頁(yè)面時(shí)，只有嵌入了STYLE元素的文檔會(huì)受到影響, H1color:maroon; Pcolor:hotpink; font-family:Arial; ,3.4 在HTML中引用樣式表,2：使用Style屬性 style屬性用于將樣式表應(yīng)用于單個(gè)元素。直接將在HTML標(biāo)記里加入style參數(shù)，

33、而style參數(shù)的內(nèi)容就是CSS的屬性和值。, 本段應(yīng)用了內(nèi)嵌樣式 本段以默認(rèn)樣式顯示。 您能發(fā)現(xiàn)本行中的 不同之處嗎？ ,3.4 在HTML中引用樣式表,3：使用Link元素鏈入外部樣式表 鏈入外部樣式表是把樣式表保存為一個(gè)樣式表文件，然后在頁(yè)面中用標(biāo)記鏈接到這個(gè)樣式表文件，這個(gè)標(biāo)記必須放到頁(yè)面的區(qū)內(nèi), 設(shè)置屬性 。 ,3.5 樣式表屬性,3.5 樣式表屬性,JavaScript,JavaScript概述 JavaScript基本語(yǔ)法 JavaScript事件 JavaScript對(duì)象,4.1.1 JavaScript先睹為快,舉例 在HTML頁(yè)面中顯示“你好,歡迎學(xué)習(xí)JavaScript！

34、” 創(chuàng)建交互式的網(wǎng)頁(yè) 允許用戶以適當(dāng)?shù)母袷捷斎霐?shù)據(jù)； 使用彈出窗口為用戶顯示信息等 控制瀏覽器的行為 設(shè)置頁(yè)面的背景顏色； 在狀態(tài)欄顯示信息等,4.1.1 JavaScript先睹為快,用HTML代碼實(shí)現(xiàn)在頁(yè)面中顯示“你好,歡迎你學(xué)習(xí)JavaScript!” 1、在HMTL中嵌入JavaScript document.write(你好，歡迎你學(xué)習(xí)JavaScript！) 2、鏈接JavaScript文件 鏈接JavaScript代碼 test.js文件要顯示的內(nèi)容如下： document.write(你好，歡迎你學(xué)習(xí)JavaScript！),4.1.1 JavaScript先睹為快, func

35、tion checkPw() fm = document.form1; if (fm.pw2.value != fm.pw1.value) alert(密碼不符，請(qǐng)重新輸入); document.form1.pw2.select(); else alert(謝謝你，+.value); 姓名： 輸入密碼： 重新輸入： ,4.1.1 JavaScript先睹為快, document.bgColor=green; document.fgColor=white function mOver(object,msg) status = msg; object.color = red; obj

36、ect.face = 華文楷體; function mOut(object) status = 謝謝指向; object.color = blue; object.face = 黑體; Javapro技術(shù)學(xué)習(xí)網(wǎng) ,4.1.2 什么是JavaScript,JavaScript是由Netscape（網(wǎng)景）公司研發(fā)出來(lái)的一種在它的Navigator瀏覽器上執(zhí)行的程序語(yǔ)言。 JavaScript是一種基于對(duì)象(object-based)和事件驅(qū)動(dòng)(Event Driven)并具有安全性能的腳本語(yǔ)言。 使用它的目的是與HTML超文本標(biāo)記語(yǔ)言、Java 腳本語(yǔ)言（Java小程序）一起實(shí)現(xiàn)在一個(gè)Web頁(yè)面中

37、連接多個(gè)對(duì)象，與Web客戶交互作用,從而可以開發(fā)客戶端的應(yīng)用程序等。 它是通過(guò)嵌入或調(diào)入到標(biāo)準(zhǔn)的HTML語(yǔ)言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML語(yǔ)言只能制作靜態(tài)網(wǎng)頁(yè)的缺陷，它是Java與HTML折衷的選擇,4.1.3 JavaScript 的基本特點(diǎn),1、腳本編寫語(yǔ)言 腳本語(yǔ)言是一種簡(jiǎn)單的程序，這些程序是由一些ASCII字符構(gòu)成，可以使用任何一種文本編輯器編寫。一些程序語(yǔ)言（如C、C+、Java等）都必須經(jīng)過(guò)編譯，將源代碼編譯成二進(jìn)制的可執(zhí)行文件之后才能運(yùn)行，而腳本語(yǔ)言不需要事先編譯，只要有一個(gè)與其相適應(yīng)的解釋器就可以執(zhí)行。 腳本語(yǔ)言是指在web瀏覽器內(nèi)有解釋器解釋執(zhí)行的編程語(yǔ)言，每次運(yùn)行程序的時(shí)

38、候，解釋器會(huì)把程序代碼翻譯成可執(zhí)行的格式。,4.1.3 JavaScript 的基本特點(diǎn),2、基于對(duì)象的語(yǔ)言 面向?qū)ο笥腥筇攸c(diǎn)（封裝，繼承，多態(tài)）卻一不可 通?！盎趯?duì)象”是使用對(duì)象，但是無(wú)法利用現(xiàn)有的對(duì)象模板產(chǎn)生新的對(duì)象類型，也就是說(shuō)“基于對(duì)象”沒(méi)有繼承的特點(diǎn)。沒(méi)有了繼承的概念也就無(wú)從談?wù)摗岸鄳B(tài)”。 現(xiàn)在的很多流行技術(shù)都是基于對(duì)象的，它們使用一些封裝好的對(duì)象，調(diào)用對(duì)象的方法，設(shè)置對(duì)象的屬性。但是它們無(wú)法讓程序員派生新對(duì)象類型。他們只能使用現(xiàn)有對(duì)象的方法和屬性。,4.1.3 JavaScript 的基本特點(diǎn),3、簡(jiǎn)單性 它是一種基于Java基本語(yǔ)句和控制流之上的簡(jiǎn)單而緊湊的設(shè)計(jì), 從而對(duì)于學(xué)

39、習(xí)Java是一種非常好的過(guò)渡。 它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。 var a,b,c; a=123; b=“abc”; a=b;,4.1.3 JavaScript 的基本特點(diǎn),4、安全性 JavaScript不能訪問(wèn)本地的硬盤，不能將數(shù)據(jù)存入到服務(wù)器上，不能對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，而只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互 5、跨平臺(tái)性 JavaScript依賴于瀏覽器本身，與操作平臺(tái)無(wú)關(guān)，只要計(jì)算機(jī)上安裝了支持JavaScript 的瀏覽器（裝有JavaScript解釋器），JavaScript 程序就可以正確執(zhí)行。,4.1.3 JavaScript 的基本特點(diǎn),6、動(dòng)態(tài)性（

40、交互性） JavaScript可以直接對(duì)客戶輸入在客戶端做出響應(yīng)，實(shí)現(xiàn)人機(jī)交互，無(wú)須經(jīng)過(guò)Web服務(wù)程序。它對(duì)用戶的反映響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。 事件驅(qū)動(dòng)：在網(wǎng)頁(yè)中執(zhí)行了某種操作的動(dòng)作，被稱為“事件”(Event)，比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)。,4.1.3 JavaScript 的基本特點(diǎn),JavaScript的局限性 各種瀏覽器支持JavaScript的程度是不一樣的，支持和不完全支持JavaScript的 瀏覽器在瀏覽同一個(gè)帶有JavaScript腳本的網(wǎng)頁(yè)時(shí)，效果會(huì)有一定的差距，有時(shí)甚至?xí)@示不出來(lái)。 當(dāng)把JavaS

41、cript的一個(gè)設(shè)計(jì)目標(biāo)設(shè)定為“Web安全性”時(shí)，就需要犧牲JavaScript的一些功能。這時(shí)，純粹的JavaScript將不能打開、讀寫和保存用戶計(jì)算機(jī)上的文件。 它有權(quán)訪問(wèn)的唯一信息就是它所嵌入的那個(gè)Web主頁(yè)中的信息，簡(jiǎn)言之，JavaScript將只存在于它自己的小小世界-Web網(wǎng)頁(yè)里。,4.1.4 JavaScript的作用,交互式操作 表單驗(yàn)證 網(wǎng)頁(yè)特效 Web游戲 服務(wù)器腳本開發(fā)等,4.1.5 其他腳本語(yǔ)言,JScript :Microsoft 公司在Netscape 公司發(fā)布的JavaScript的基礎(chǔ)上，也開發(fā)了自己的JavaScript規(guī)范，叫JScript ECMAscr

42、ipt:國(guó)際上通用的標(biāo)準(zhǔn)化版本的JavaScript，是未來(lái)JavaScript的發(fā)展方向 VBScript：Microsoft開發(fā)的VB家族的成員，與JavaScript運(yùn)行原理相同。但是，目前只有IE瀏覽器支持VBScript 注意：JavaScript也有服務(wù)器端和客戶端兩種形式，客戶端JavaScript就是指把JavaScript解釋器嵌入到web瀏覽器中，這是迄今為止最為普通的JavaScript，一般提到的JavaScript都是指客戶端JavaScript,4.1.6 JavaScript 和Java的區(qū)別,Java是SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計(jì)語(yǔ)言，特別適合于In

43、ternet應(yīng)用程序開發(fā)； Java的前身是Oak語(yǔ)言。 JavaScript是Netscape公司的產(chǎn)品，是為了擴(kuò)展Netscape Navigator功能而開發(fā)的一種可以嵌入Web頁(yè)面中的基于對(duì)象和事件驅(qū)動(dòng)的解釋性語(yǔ)言，它的前身是Live Script；,4.1.6 JavaScript 和Java的區(qū)別,JavaScript是腳本語(yǔ)言，是一種基于對(duì)象（Object Based）和事件驅(qū)動(dòng)（Event Driver）的編程語(yǔ)言。因而它本身提供了非常豐富的內(nèi)部對(duì)象供設(shè)計(jì)人員使用。不支持繼承和多態(tài)。 Java是面向?qū)ο蟮模碕ava是一種真正的面向?qū)ο蟮恼Z(yǔ)言，即使是開發(fā)簡(jiǎn)單的程序也必須設(shè)計(jì)對(duì)象

44、。支持封裝、繼承和多態(tài)。,4.1.6 JavaScript 和Java的區(qū)別,JavaScript與Java在瀏覽器中執(zhí)行的方式不一樣。 JavaScript是一種解釋性編程語(yǔ)言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過(guò)編譯，而是將文本格式的字符代碼發(fā)送給客戶端，即JavaScript語(yǔ)句本身隨Web頁(yè)面一起下載下來(lái)，由瀏覽器解釋執(zhí)行。 Java的源代碼在傳遞到客戶端執(zhí)行之前，必須經(jīng)過(guò)編譯，因而客戶端上須具有相應(yīng)平臺(tái)上的解釋器，傳到客戶端的是編譯后的字節(jié)碼。,4.1.6 JavaScript 和Java的區(qū)別,兩種語(yǔ)言所采取的變量是不一樣的。 Java采用強(qiáng)類型變量檢查，即所有變量在編譯之前必須聲

45、明為某一指定類型。如: int x=1234;String s=“abcd”; JavaScript中是弱類型變量。統(tǒng)一采用var聲明，可賦各種數(shù)據(jù)類型值。 var a,b,c; a=123; b=“abc”; a=b;,4.1.6 JavaScript 和Java的區(qū)別,Java是一種與HTML無(wú)關(guān)的格式，必須通過(guò)像HTML中引用外媒體那么進(jìn)行裝載，其代碼以字節(jié)代碼的形式保存在獨(dú)立的文檔中。在HTML文檔中，Java使用.來(lái)標(biāo)識(shí)。 JavaScript的代碼是一種文本字符格式，可以直接嵌入或間接調(diào)入到HTML文檔中，并且可動(dòng)態(tài)裝載。編寫HTML文檔就像編輯文本文件一樣方便。在HTML文檔中，

46、JavaScript使用.來(lái)標(biāo)識(shí),4.1.7 在網(wǎng)頁(yè)中加入JavaScript,在HTML中加入JavaScript代碼，必須將JavaScript代碼放在與標(biāo)簽之間。 / JavaScript語(yǔ)言代碼；JavaScript 語(yǔ)言代碼; . JavaScript中的注釋語(yǔ)句兩種：?jiǎn)涡凶⑨?.與多行注釋/*/。 可以利用HTML注釋語(yǔ)句“”標(biāo)記JavaScript代碼，讓那些老瀏覽器不執(zhí)行這些JavaScript代碼,4.1.7 在網(wǎng)頁(yè)中加入JavaScript,一個(gè)HTML文檔中可以出現(xiàn)多個(gè)標(biāo)簽。 JavaScript代碼的出現(xiàn)次序就是JavaScript的執(zhí)行次序。 標(biāo)簽可出現(xiàn)在HTML文檔

47、的任何位置，但一般放在內(nèi)部，可以早于部分執(zhí)行 JavaScript除了可以直接嵌入HTML文件中，也可以獨(dú)立存在與HTML文件之外?？梢酝ㄟ^(guò)設(shè)置標(biāo)簽中src屬性來(lái)指定外部JavaScript文件的地址。,4.1.8 JavaScript的執(zhí)行方式,1 直接執(zhí)行 在與標(biāo)簽中的JavaScript代碼，只要不是放置在函數(shù)中的，都是屬于直接執(zhí)行的JavaScript代碼。 2 與事件結(jié)合調(diào)用 JavaScript可以支持很多事件，比如說(shuō)單擊鼠標(biāo)左鍵、按下鍵盤、移動(dòng)鼠標(biāo)等等。與事件結(jié)合，可以調(diào)用執(zhí)行JavaScript的函數(shù)。,4.2.1 數(shù)據(jù)類型,數(shù)值型：整數(shù)和浮點(diǎn)數(shù)統(tǒng)稱為數(shù)值。例如85或3.141

48、5926等。 字符串型：由0個(gè),1個(gè)或多個(gè)字符組成的序列。在JavaScript中，用雙引號(hào)或單引號(hào)括起來(lái)表示，如“您好”、學(xué)習(xí)JavaScript 等。 邏輯（布爾）型：用true或false來(lái)表示。 空（null）值：表示沒(méi)有值，用于定義空的或不存在的引用。要注意，空值不等同于空字符串或0。 未定義（undefined）值：它也是一個(gè)保留字。在兩種情況下可能得到一個(gè)未定義的值，一種是根本不存在的對(duì)象，另一種就是雖然已經(jīng)聲明，但卻沒(méi)有賦值。,4.2.1 數(shù)據(jù)類型,null是一個(gè)特殊的數(shù)據(jù)類型，其所代表的意思為“空”。需要注意，這個(gè)“空”并不代表是0或空字符串。數(shù)字0代表的是數(shù)字，是數(shù)字型的數(shù)

49、據(jù)；空字符串代表的是長(zhǎng)度為0的字符串，是字符串類型的數(shù)據(jù)。而null代表沒(méi)有值，不是一個(gè)有效的數(shù)字、字符串，也不是數(shù)組、對(duì)象和函數(shù)，什么數(shù)據(jù)類型都不是。 undefined也是一個(gè)特殊的數(shù)據(jù)類型，只有定義了一個(gè)變量但沒(méi)有為該變量賦值、使用了一個(gè)并未定義的變量、或者是使用了一個(gè)不存的對(duì)象的屬性時(shí)，JavaScript才會(huì)返回undefined。 除了以上五種基本的數(shù)據(jù)類型之外，JavaScript還支持復(fù)合數(shù)據(jù)類型，復(fù)合數(shù)據(jù)類型包括對(duì)象和數(shù)組兩種。,4.2.2 變量,JavaScript中的變量是沒(méi)有類型或者說(shuō)是弱類型的，這就意味著在JavaScript中的變量可以是任何一種數(shù)據(jù)類型。 1變量定

50、義 在JavaScript聲明一個(gè)變量時(shí)，可以使用以下方式實(shí)現(xiàn)： var up,down,left,right; /大小寫敏感 也可以直接給它賦值，如下： x=3; 2變量的作用范圍 當(dāng)在一個(gè)函數(shù)之外定義一個(gè)變量，那這個(gè)變量就叫做全局變量。全局變量可用于當(dāng)前所有的文檔。 在函數(shù)內(nèi)部定義的變量則叫做局部變量，它只作用于函數(shù)內(nèi)部。,4.2.2 變量,使用變量注意事項(xiàng)： 重復(fù)定義變量：后者覆蓋前者 變量必須要先聲明后使用：否則出錯(cuò)。 給未聲明的變量賦值：可以 引用未賦值的變量：undefined var x; /聲明一個(gè)為賦值的變量，它

51、的值是undefined。 alert(i) ; /使用未聲明的變量將引發(fā)錯(cuò)誤。 d=123; /給未聲明的變量賦值，將創(chuàng)建該變量。,4.2.3 常量,1整型常量 整型常量可以使用十六進(jìn)制、八進(jìn)制和十進(jìn)制表示其值。 2浮點(diǎn)數(shù)常量 有小數(shù)和指數(shù)兩種表示方式，如3.1415926、-3.1E12、1e12和2E-12。 3字符串常量 字符串是由單引號(hào)（）或雙引號(hào)（“）括起來(lái)的字符序 列。其中字符序列的個(gè)數(shù)可以是零個(gè)或多個(gè)。 單引號(hào)所括起 來(lái)的字符序列里可以包括雙引號(hào)，而雙引號(hào)所括起來(lái)的字符序列里也可以包含單引號(hào)。,4.2.3 常量,4布爾常量 布爾類型只有兩種值：true和false。 5數(shù)組常量

52、 數(shù)組常量是零或更多表達(dá)式的列表，它包含在一對(duì)方括號(hào)內(nèi)。使用數(shù)組常量來(lái)創(chuàng)建一個(gè)數(shù)組時(shí)，它的元素和長(zhǎng)度由所指定的值進(jìn)行初始化。例如下面常量有3個(gè)元素，其長(zhǎng)度為3。 apple=fruit,China,vitamin 不必在數(shù)組常量中指定所有的元素。如果在一行中輸入兩個(gè)逗號(hào)，它會(huì)自動(dòng)為沒(méi)有指定的元素留出空間，如下例所示： God=Belial,Angel“ 該數(shù)組包含兩個(gè)元素值和一個(gè)空元素，要注意的是，如果把逗號(hào)放到數(shù)組的最后，那它將會(huì)被忽略不計(jì)。,4.2.4 運(yùn)算符,算術(shù)運(yùn)算符 賦值運(yùn)算符 關(guān)系運(yùn)算符 邏輯運(yùn)算符 位運(yùn)算符 條件運(yùn)算符 其他運(yùn)算符,4.2.4 運(yùn)算符, var x = 11; v

53、ar y = 5; with (document) write(x = 11, y = 5); write(x + y 是 , x + y); write(x - y 是 , x - y); write(x * y 是 , x * y); write(x / y 是 , x / y); write(x % y 是 , x % y); write(+ x 是 , + x); write(- y 是 , - y); ,4.2.4 運(yùn)算符, var x = 5; /x 是數(shù)值5 var y = 5; /y 是字符串5 var z = 6; /x 是數(shù)值6 with (document) write(

54、x = 5, y = 5, z = 6); write(x = y 嗎？, x = y); write(x = y 嗎？, x = y); write(x != y 嗎？, x != y); write(x != y 嗎？, x != y); write(x y ,4.2.4 運(yùn)算符, var t = true; var f = false; with(document) write(true ,4.2.5 控制結(jié)構(gòu),if表達(dá)式 Switch while循環(huán) do-while循環(huán) for循環(huán) break continue,4.2.6 函數(shù)function,JavaScript函數(shù)分為系統(tǒng)函數(shù)和

55、自定義函數(shù) 自定義函數(shù)定義方法 function 函數(shù)名(參數(shù)1,參數(shù)2) return 返回值; 無(wú)論是否有返回值，都無(wú)需指定返回值類型。 JavaScript中可通過(guò)arguments .Length來(lái)檢查參數(shù)的個(gè)數(shù) 在JavaScript中對(duì)象事件的處理通常由函數(shù)(function)擔(dān)任。,4.2.6 函數(shù)function, function checkPassword(testObject) if (testObject.value.length 請(qǐng)輸入密碼： ,4.2.6 函數(shù)function, function check() if(document.forms0.elements

56、0.value.length ,4.2.6 函數(shù)function,系統(tǒng)函數(shù) eval()函數(shù)的主要作用是將字符串表達(dá)式轉(zhuǎn)換成數(shù)字。 parseInt()函數(shù)是把字符串值轉(zhuǎn)換成數(shù)字。 parseFloat()函數(shù)是把字符串值轉(zhuǎn)換成浮點(diǎn)數(shù)。 在JavaScript中，如果對(duì)非數(shù)字型變量進(jìn)行數(shù)值運(yùn)算，如兩個(gè)字符串相除，將會(huì)返回NaN。NaN所代表的是“Not a Number”的意思。在JavaScript中在進(jìn)行數(shù)值運(yùn)算時(shí)，可以先使用isNaN()函數(shù)來(lái)判斷變量是否為數(shù)字型變量。如果該參數(shù)返回true，說(shuō)明該變量為 非數(shù)字型變量，否則說(shuō)明該變量為數(shù)字型變量。,4.2.6 函數(shù)function, w

57、ith (document) write(eval(12.34*10)是 , eval(12.34*10); write(eval(12*(3+4)是 , eval(12*(3+4); write( eval(12.34abc1.2), eval(12.34abc1.2); write( ); write(parseInt(0 x11)是 , parseInt(0 x11); write(parseInt(1234)是 ,parseInt(1234); write(parseInt(12abc)是 , parseInt(12abc); write(parseInt(12.34*10)是 , p

58、arseInt(12.34*10); write(parseInt(abc123)是 , parseInt(abc123); write( ); write(parseFloat(12.34*1.2)是, parseFloat(12.34*1.2); write(parseFloat(12.34e10)是, parseFloat(12.34e10); write(parseFloat(12abc)是, parseFloat(12abc); write(parseFloat(2.1e4abc)是 , parseFloat(2.1e4abc); write(parseFloat(xyz123)是,

59、 parseFloat(xyz); ,4.2.6 函數(shù)function, function add() var sc1=document.fm.chj1.value; var sc2=document.fm.chj2.value; if(sc1=) sc1=0; if(sc2=) sc2=0; if(isNaN(sc1) sc1=0; if(isNaN(sc2) sc2=0; document.fm.chj3.value=parseInt(sc1)+parseInt(sc2); 平時(shí)成績(jī) 期末成績(jī) 總成績(jī) ,4.3.1 JavaScript事件類型,主要有以下三類事件 鼠標(biāo)事件 單擊事件onC

60、lick和雙擊事件onDbClick 鼠標(biāo)移進(jìn)事件onMouseOver和鼠標(biāo)移出事件onMouseOut 鼠標(biāo)按下事件onMouseDown和鼠標(biāo)松開事件onMouseUp 鍵盤事件 鍵盤按下事件onKeyDown和鍵盤松開事件onKeyUp 鍵盤按下事件onKeyPress 若按下鍵不放, onKeyDown不觸發(fā),onKeyPress持續(xù)觸發(fā),4.3.1 JavaScript事件類型,HTML事件 載入頁(yè)面事件onLoad 卸載頁(yè)面事件onUnload 改變事件 onChange 選中事件onSelect 獲得焦點(diǎn)事件onFocus 失去焦點(diǎn)事件onBlur 提交事件onSubmit 重