HTML5跨平臺開發(fā)基礎與實戰(zhàn)PPT完整全套教學課件

上傳人：b*** IP屬地：浙江上傳時間：2023-06-13 格式：PPTX 頁數(shù)：323 大?。?.45MB 積分：35 舉報 版權(quán)申訴

HTML5跨平臺開發(fā)基礎與實戰(zhàn)PPT完整全套教學課件_第2頁

HTML5跨平臺開發(fā)基礎與實戰(zhàn)PPT完整全套教學課件_第3頁

HTML5跨平臺開發(fā)基礎與實戰(zhàn)PPT完整全套教學課件_第4頁

HTML5跨平臺開發(fā)基礎與實戰(zhàn)PPT完整全套教學課件_第5頁

已閱讀5頁，還剩318頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領

文檔簡介

HTML5跨平臺開發(fā)基礎與實戰(zhàn)任務1實現(xiàn)猜拳游戲首頁界面任務2實現(xiàn)問卷調(diào)查頁面靜態(tài)布局任務3實現(xiàn)簡潔立體菜單效果任務4實現(xiàn)猜拳游戲功能任務5實現(xiàn)注冊登錄驗證效果任務6實現(xiàn)響應式詳情頁面任務7實現(xiàn)響應式商品優(yōu)惠列表任務8響應式購物列表展示和管理任務9實現(xiàn)商品優(yōu)惠列表評價信息滑入效果任務1實現(xiàn)猜拳游戲首頁界面HTML5跨平臺開發(fā)基礎與實戰(zhàn)學習目標了解前端工程師工作內(nèi)容。理解頁面結(jié)構(gòu)、樣式和行為。了解HTML5、CSS3的優(yōu)勢。了解JavaScript的作用及常用框架。掌握開發(fā)工具的使用,能夠新建項目和文件。目錄一、任務描述二、Web前端簡述三、開發(fā)工具四、任務實施五、小結(jié)任務描述01實現(xiàn)猜拳游戲首頁界面運氣猜拳，是一種簡單的游戲，共有剪刀、石頭、布三個手勢。雙方同時做出相應手勢，輸贏判斷規(guī)則為：剪刀贏布，布贏石頭，石頭贏剪刀。本任務來實現(xiàn)電腦版的猜拳游戲首頁界面效果，如圖所示。任務描述：實現(xiàn)猜拳游戲首頁界面Web前端簡述02前端工程師頁面結(jié)構(gòu)、樣式和行為HTML5的優(yōu)勢CSS3的優(yōu)勢JavaScript及相關框架Web前端學習路線前端工程師，也叫Web前端開發(fā)工程師。他是隨著Web發(fā)展，細分出來的行業(yè)。尤其是現(xiàn)在互聯(lián)網(wǎng)時代，Web技術應用更加廣泛。網(wǎng)站、移動App等都離不開Web技術。Web前端人才的需求量也是與日俱增。通俗點說Web前端工程師就是用HTML5、CSS3、JavaScript、Ajax等技術做成交互網(wǎng)頁。前端工程師

HTML（HyperTextMarkupLanguage超文本標記語言）定義了網(wǎng)頁的內(nèi)容，即頁面結(jié)構(gòu)，HTML5是最新的HTML版本；CSS（CascadingStyleSheet層疊樣式表）描述了網(wǎng)頁布局的樣式，CSS3是最新的CSS標準；

JavaScript控制網(wǎng)頁的行為。頁面結(jié)構(gòu)、樣式和行為

HTML5是萬維網(wǎng)發(fā)布的最新語言規(guī)范，做Web前端，精通HTML5是必須要掌握的一項技能。

目前95%的瀏覽器都支持HTML5，其中包含移動端等設備上使用的瀏覽器。HTML5的優(yōu)勢

CSS3的語言開發(fā)是朝著模塊化發(fā)展的，這些模塊包括盒子模型、列表模塊、文字特效等，對于Web前端整個頁面的設計CSS3是必備的技能。

不用圖片CSS3就可以創(chuàng)造出各種效果，圓角邊框，漸變背景，文字陰影，盒陰影等，還有一些基本的交互效果，如懸停動畫等。CSS3的優(yōu)勢

JavaScript是Web的編程語言，是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言。jQuery是輕量級的JavaScript庫，解決跨瀏覽器，跨平臺問題。jQuery設計的宗旨是"writeLess，DoMore"，即倡導寫更少的代碼，做更多的事情。

Bootstrap是基于HTML、CSS和jQuery的，它簡潔靈活，使得Web開發(fā)更加快捷。Bootstrap中包含了豐富的Web組件，根據(jù)這些組件，可以快速的搭建一個漂亮、靈活、可移植、跨平臺的網(wǎng)站。JavaScript及相關框架掌握了HTML5，CSS3，JavaScript等技術之后，就應該學習一個Web框架加快開發(fā)速度。學習通常的路線是：學習、理解、模仿、創(chuàng)造。Web前端學習路線開發(fā)工具03選擇開發(fā)工具新建項目和文件開發(fā)工具的調(diào)試技巧

HBuilder是DCloud推出的一款支持HTML5的Web開發(fā)IDE。快，是HBuilder的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、JavaScript、CSS的開發(fā)效率。

選擇開發(fā)工具依次單擊HBuilderX菜單：“文件”|“新建”|“項目”，打開了“新建項目”對話框。新建項目和文件本書案例使用HBuilderX進行開發(fā)，并采用Chrome瀏覽器作為展示和調(diào)試工具。開發(fā)工具的調(diào)試技巧任務實施04實現(xiàn)猜拳游戲首頁界面

新建項目cqgame，在項目中新建文件cq.html，目錄結(jié)構(gòu)如圖所示，添加代碼實現(xiàn)布局效果。并拓展體驗動態(tài)交互效果。

任務實施：實現(xiàn)猜拳游戲首頁界面

小結(jié)05實現(xiàn)猜拳游戲首頁界面

(1)

Web前端簡述前端工程師頁面結(jié)構(gòu)、樣式和行為HTML5的優(yōu)勢CSS3的優(yōu)勢JavaScript及相關框架Web前端學習路線

(2)開發(fā)工具選擇開發(fā)工具新建項目和文件開發(fā)工具的調(diào)試技巧

(3)任務實施與拓展小結(jié)總結(jié)謝謝任務2實現(xiàn)問卷調(diào)查頁面靜態(tài)布局HTML5跨平臺開發(fā)基礎與實戰(zhàn)學習目標掌握HTML的基本語法。能使用HTML基本標簽。掌握文字與段落標簽。掌握圖像、超級鏈接和列表標簽。能使用HTML列表、超級鏈接標簽等布局標簽。掌握表格標簽，能使用表格相關標簽實現(xiàn)信息展示。掌握表單元素標簽的應用。能使用HTML5表單常用新屬性。能使用表單標簽實現(xiàn)注冊等頁面的布局。能使用綜合使用常用標簽實現(xiàn)頁面的整體布局。目錄一、任務描述二、HTML的基本概念三、HTML5常用標簽五、任務實施六、小結(jié)四、表單相關元素和屬性任務描述01實現(xiàn)問卷調(diào)查頁面靜態(tài)布局本任務是采用HTML的布局方式，實現(xiàn)問卷調(diào)查頁面起始頁面、問卷調(diào)查頁面及問卷調(diào)查信息統(tǒng)計展示頁面的靜態(tài)布局，如圖所示。任務描述：實現(xiàn)問卷調(diào)查頁面靜態(tài)布局HTML的基本概念02HTML簡介HTML基本格式

HTML注釋語句

HTML的英文全稱是HyperTextMarkupLanguage，是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。HTML運行在瀏覽器上，由瀏覽器來解析。HTML文檔包含了HTML標簽及文本內(nèi)容，用來描述文字、圖形、動畫、聲音、表格、鏈接等。HTML文檔也叫做Web頁面。5版本是HTML目前最新版本，也就是現(xiàn)在常說的HTML5，而且現(xiàn)在學習HTML都是針對5這個版本進行學習的。HTML5是對以前的HTML發(fā)展產(chǎn)生出來的，因此，HTML5保留了以前HTML絕大部分標簽。HTML簡介<!DOCTYPEhtml>聲明為HTML5文檔。<html>元素是HTML頁面的根元素。此元素可告知瀏覽器其自身是一個HTML文檔。<head>元素包含了文檔的元（meta）數(shù)據(jù)，如：<metacharset="utf-8">定義網(wǎng)頁編碼格式為utf-8。<title>元素描述了文檔的標題。<body>元素包含了可見的頁面內(nèi)容。HTML基本格式舉例HTML的注釋方法：包含在“”之間的內(nèi)容將會被瀏覽器忽略。<body>

文檔內(nèi)容......

</body>HTML注釋語句舉例HTML5文檔常用標簽03文字段落相關標簽HTML圖像<img>元素列表、表格、超鏈接、DIV標簽多媒體元素語義化標簽HBuilder編輯器常用的快捷方式

常用的文字與段落標簽有以下幾種：

1.標題標簽<hn>2.換行標簽<br>

3.段落標簽<p>4.水平分隔線標簽<hr>5.特殊字符，如版權(quán)標志“?”。

文字段落相關標簽舉例網(wǎng)頁中插入圖片用單標簽<img>，當瀏覽器讀取到<img>標簽時，就會顯示此標簽的src屬性所設定的圖像。<imgsrc="img/hd.jpg"alt="蝴蝶"width="260"height="180">

若路徑有誤或者網(wǎng)速過低時，圖片加載不到，會在圖片的位置顯示alt屬性的值。HTML圖像<img>元素舉例

1．無序列表<ul><ultype="square"><li>西瓜</li><li>桃子</li><li>荔枝</li></ul>

2．有序列表<ol><oltype="A"><li>可樂</li><li>雪碧</li><li>檸檬茶</li></ol>3．嵌套列表

將一個列表嵌入到另一個列表中，作為另一個列表的一部分，稱為嵌套列表。無論是有序列表的嵌套還是無序列表的嵌套，瀏覽器都可以自動分層排列。

列表舉例<table>…</table>//定義表格<caption>…</caption> //定義標題<tr>…</tr> //定義表行<th>…</th> //定義表頭<td>…</td> //定義單元格（存放表格的具體數(shù)據(jù)）表格舉例

超鏈接是網(wǎng)頁互相聯(lián)系的橋梁，頁面間的跳轉(zhuǎn)功能就是通過超鏈接<a>元素來實現(xiàn)的。（1）鏈接到同一目錄中的網(wǎng)頁文件

<ahref="目標文件名.html">訪問文檔</a>（2）鏈接到下一級目錄中的網(wǎng)頁文件

<aherf="子目錄名/目標文件名.html">訪問文檔</a>（3）鏈接到上一級目錄中的網(wǎng)頁文件

<aherf="../目標文件名.html">訪問文檔

</a>（4）鏈接到同級目錄中的網(wǎng)頁文件

<ahref="../子目錄名/目標文件名.html">熱點對象</a>

超鏈接舉例

<div>（division）簡單而言就是一個區(qū)塊標簽，即在<div></div>之間相當于一個容器，可以容納段落、標題、圖片、表格，乃至章節(jié)、摘要、標注等各類HTML標簽。

DIV標簽介紹舉例1．a(chǎn)udio標簽介紹audio元素用于播放音頻，controls屬性設置是否使用播放控制，示例如下：<audiosrc="music.mp3"controls="controls"></audio>2．video標簽介紹視頻標簽<video></video>，其中的controls屬性設置是否使用播放控制，示例如下：<videosrc="mov.mp4"controls="controls"></video>

多媒體元素舉例

html5比以前的版本增加了許多語義化的標簽，比如header、footer、nav、main、article、aside等，這些標簽和div的作用類似，且更加語義化。

語義化標簽舉例1．生成標簽直接輸入標簽名，按tab鍵既可，比如：在頁面中輸入div然后tab鍵，就可以生成<div></div>。2．生成多個相同標簽如果想要生成多個相同標簽加上*就可以了，比如在頁面中輸入div*3然后tab鍵，就可以快速生成3個div3．生成帶有屬性的標簽如果想要生成帶有指定樣式類屬性或者id屬性的div標簽，如直接寫.demo然后tab鍵就可以生成代碼“<divclass="demo"></div>4．生成層級標簽如果想要生成父子級關系的標簽，可以用“>”，比如在頁面中輸入ul>li*6，然后tab鍵

HBuilder編輯器常用的快捷方式舉例HTML5表單相關元素和屬性04表單的定義表單控件HTML5表單常用新屬性

表單是頁面上的一塊特定區(qū)域，這塊區(qū)域有一對<form>標簽定義。

<formaction="url"method="ge|post"name="value">…</form>1.formaction屬性action屬性規(guī)定當提交表單時，向何處發(fā)送表單數(shù)據(jù)。2.formmethod屬性method屬性，表示了發(fā)送表單信息的方式。

表單的定義舉例表單常用控件舉例控件元素對象名稱type屬性值單行文本框text多行文本框textarea按鈕button單選鈕radio復選框checkbox列表框

密碼框password重置按鈕reset提交按鈕submit表單及控件常用屬性屬性描述name控件名稱type控件的類型，如radio、text等align指定對齊方式，可取top、bottom、middlevalue用于設定輸入默認值maxlength在單行文本的時候允許輸入的最大字符數(shù)readonly用于文本框中表示只能顯示，不能添加修改checked設置單選框、復選框，初始狀態(tài)為選中，屬性值僅有checked，表示初始就被選中。舉例1．placeholder

是指文本框或處于未輸入狀態(tài)并且未獲得光標焦點時，降低顯示輸入提示文字不透明度。2．typeHTML5加入了新的input類型，type字段為輸入提供選擇格式。如：type=“color”3．pattern

該屬性規(guī)定用于驗證輸入字段的模式,當觸發(fā)表單提交的時候，瀏覽器會將輸入與pattern屬性做匹配來最終判斷是否有效輸入。4．a(chǎn)utofocus

規(guī)定在頁面加載時，域自動地獲得焦點。5．required

規(guī)定必須在表單提交之前填寫輸入域（不能為空）。6.autocomplete屬性

為了完成表單的快速輸入，瀏覽器一般提供了自動補全的功能選擇。HTML5表單常用新屬性

舉例任務實施04實現(xiàn)猜拳游戲首頁界面本任務是采用HTML的布局方式，實現(xiàn)問卷調(diào)查頁面起始頁面、問卷調(diào)查頁面及問卷調(diào)查信息統(tǒng)計展示頁面的靜態(tài)布局。單擊圖片跳轉(zhuǎn)到調(diào)查頁面，填寫表單，點擊提交按鈕，提交表單。

任務實施：實現(xiàn)問卷調(diào)查頁面靜態(tài)布局

小結(jié)05實現(xiàn)問卷調(diào)查頁面靜態(tài)布局

(1)

HTML的基本概念HTML簡介HTML基本格式、注釋語句

(2)HTML5文檔常用標簽文字段落相關標簽HTML圖像<img>元素列表、表格、超鏈接、DIV標簽多媒體元素語義化標簽HBuilder編輯器常用的快捷方式

(3)HTML5表單相關元素和屬性表單的定義、表單控件HTML5表單常用新屬性

(4)任務實施與拓展小結(jié)總結(jié)謝謝任務3實現(xiàn)簡潔立體菜單效果HTML5跨平臺開發(fā)基礎與實戰(zhàn)學習目標掌握CSS的引用、分類方式。能夠使用字體、顏色、背景與文字屬性能夠使用邊距、填充與邊框?qū)傩阅軌蚴褂昧斜韺傩?。掌握各類元素CSS設置與盒模型的應用。掌握頁面布局的方法。掌握常用的CSS3文字陰影，盒陰影，漸變背景等效果的實現(xiàn)。能夠使用彈性布局實現(xiàn)簡潔立體菜單效果。目錄一、任務描述二、CSS3介紹三、樣式表的使用五、邊距、填充與邊框四、字體、顏色、背景

與文字屬性六、列表屬性目錄七、列表屬性八、CSS布局基礎九、常用布局結(jié)構(gòu)十一、彈性布局十二、兼容性處理十、CSS3常用特效十三、任務實施十四、小結(jié)任務描述01實現(xiàn)簡潔立體菜單效果本任務實現(xiàn)在線學習系統(tǒng)主頁面菜單的布局和美化，如圖所示。任務描述：實現(xiàn)簡潔立體菜單效果CSS3介紹02樣式表簡介樣式表的規(guī)則樣式表注釋方法

CSS是CascadingStyleSheet的縮寫，可以翻譯為“層疊樣式表”或“級聯(lián)樣式表”，即樣式表。它可以定義在HTML文檔的標簽里，也可以在外部附加文檔中作為附加文件。此時，一個樣式表可以作用多個頁面，乃至整個站點，因此具有更好的易用性和拓展性。。CSS的發(fā)展是向模塊發(fā)展的，模塊包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。CSS3把很多以前需要使用圖片和腳本來實現(xiàn)的效果，只需要短短幾行代碼就能搞定。比如圓角，圖片邊框，文字陰影和盒陰影、漸變等。CSS3不僅能簡化前端開發(fā)工作人員的設計過程，還能加快頁面載入速度。樣式表簡介語法：選擇器{屬性1:屬性值1;屬性2:屬性值2}在下面的示例中，p為選擇器，介于“{}”中的所有內(nèi)容為聲明塊。表示了<p></p>標簽內(nèi)的所有文本的字體為宋體，字體大小為18px。代碼如下：p{font-family:"宋體";font-size:18px;}。樣式表的規(guī)則舉例

以“/*”開始一直到“*/”結(jié)束/*創(chuàng)建人：韓梅梅*創(chuàng)建時間：2021.5.8*作用：設置文字樣式*//*----------文字樣式開始----------*/.white12px{color:white;/*白色12象素文字*/font-size:12px;}/*----------文字樣式結(jié)束----------*/樣式表注釋方法舉例樣式表的使用03常用添加CSS的方法選擇器的分類選擇器的優(yōu)先級1.行內(nèi)樣式表如：<divstyle="width:200px;height:200px;background:#FF0000;color:#FFFFFF;"></div>2.內(nèi)聯(lián)樣式表在HTML頁面的<head>元素中嵌入style元素，將CSS樣式都寫在style標簽中3.外聯(lián)樣式表

外聯(lián)樣式表又稱外部樣式表或鏈接樣式表，當樣式需要應用于很多頁面時，外聯(lián)樣式表將是理想的選擇。這里的外聯(lián)樣式表指的是CSS文件，CSS文件的后綴名為“.css”，HTML文件通過<link>標簽鏈接到樣式表?；菊Z法：<linkrel="stylesheet"href="*.css"type="text/css">常用添加CSS的方法舉例1.標簽選擇器HTML中的所有標簽都可以作為標簽選擇器。如：body{font-size:12px;line-height:18px;}2.類選擇器常用于為多個元素設置同一樣式，如：.right{color:#FF0000;text-align:right;}調(diào)用的方法是<pclass="right">危樓高百尺手可摘星辰</p><pclass="right">欲窮千里目更上一層樓</p>3.id選擇器在HTML頁面中id屬性標識了某個單一元素，id選擇器是用來對某個單一元素定義單獨的樣式。如：#title1{color:#FF0000;text-align:center}選擇器的分類舉例4.偽類選擇器指定的是元素的某種狀態(tài)。如：a:link{color:#000000;text-decoration:none;}a:visited{color:#333333;text-decoration:none;}:nth-child(n) 5.后代選擇器后代選擇器是選擇父元素的所有子孫元素，選擇div元素下面所有的p元素的示例如：divp{background-color:red}6.一級子元素選則器選擇某個元素的直接子元素。如：div>p{background-color:red;}選擇器的分類舉例7.屬性選擇器指定的是元素的某種狀態(tài)。以特定前綴開頭element[attribute^="value"]用于選取屬性值以指定值開頭的元素。該選擇器的關鍵字符是^符號，它的意思是“以此開頭”。示例如下：img[alt^="film"]{border:3pxdashed#e15f5f;}包含特定字符串element[attribute$="value"] 用于選取屬性值以指定值結(jié)尾的元素。該選擇器的關鍵字符是$，它的意思是“以此結(jié)尾”。示例如下：img[alt$="film"]{border:3pxdashed#e15f5f;}以特定后綴結(jié)尾element[attribute*="value"] 用于選取屬性值中包含指定值的元素，位置不限，也不限制整個單詞。該選擇器的關鍵字符是*符號，它的意思是“包含”。示例如下：img[alt*="film"]{border:3pxdashed#e15f5f;}選擇器的分類舉例8.分組選擇器給多個選擇器添加同樣的CSS樣式效果，選擇器之間要用逗號隔開，目的是優(yōu)化代碼，減少重復。例如：h1,h2,h3,h4,h5,h6,td{color:#666666;}這里的樣式表示h1,h2,h3,h4,h5,h6,td中的文本顏色都為灰色（#666666）。選擇器的分類舉例樣式表的繼承規(guī)則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。如果在同一個選擇器上使用了多個不同的樣式表時,這些樣式相互沖突,產(chǎn)生不可預料的效果。瀏覽器根據(jù)以下規(guī)則顯示樣式屬性。樣式作用在同一元素上的優(yōu)先級順序為:內(nèi)聯(lián)樣式>ID選擇器>類選擇器=屬性選擇器=偽類選擇器>標簽選擇器選擇器的優(yōu)先級舉例字體、顏色、背景與文字屬性04設置樣式表的字體屬性顏色及背景屬性文本屬性

CSS的字體屬性主要包括字體族科、字體大小、加粗字體以及英文字體的大小轉(zhuǎn)換等。1.字體設置—font-family語法：font-family:"字體1","字體2","字體3";2.設置字號—font-size語法：font-size:大小取值3.字體風格—font-style字體風格就是字體樣式，主要是設置字體是否為斜體。語法：font-style:樣式的取值4.設置加粗字體—font-weightfont-weight屬性用于設置字體的粗細，實現(xiàn)對一些字體的加粗顯示。語法：font-weight:字體粗度值設置樣式表的字體屬性舉例

CSS的字體屬性主要包括字體族科、字體大小、加粗字體以及英文字體的大小轉(zhuǎn)換等。5.小型的大寫字母—font-variantfont-variant屬性用來設置英文字體是否顯示為小型的大寫字母。語法：font-variant：取值6.復合屬性：字體—fontfont屬性是復合屬性，用作對不同字體屬性的略寫，特別是行高。語法：font:字體取值

設置樣式表的字體屬性舉例3.背景顏色background-color

語法：background-color:顏色取值4.背景圖像background-image語法：background-image:url(圖像地址）說明：圖像地址可以設置成絕對地址，也可以設置成相對地址。5.背景重復background-repeat語法：background-repeat：取值取值范圍：repeat|no-repeat|repeat-x|repeat-y說明：repeat背景圖片橫向和豎向都重復；no-repeat背景圖片橫向和豎向都不重復；repeat-x背景圖片橫向重復；repeat-y背景圖片豎向重復。6.背景附件background-attachment背景附件屬性用來設置背景圖像是隨對象內(nèi)容滾動還是固定的。語法：background-attachment：取值說明：scroll表示背景圖像是隨對象內(nèi)容滾動，是默認選項；fixed表示背景圖像固定在頁面上靜止不動，只有其他的內(nèi)容隨滾動條滾動。顏色及背景屬性舉例3.背景顏色background-color

語法：background-color:顏色取值4.背景圖像background-image語法：background-image:url(圖像地址）說明：圖像地址可以設置成絕對地址，也可以設置成相對地址。5.背景重復background-repeat語法：background-repeat：取值

說明：repeat背景圖片橫向和豎向都重復；no-repeat背景圖片橫向和豎向都不重復；repeat-x背景圖片橫向重復；repeat-y背景圖片豎向重復。6.背景附件background-attachment語法：background-attachment：取值說明：scroll表示背景圖像是隨對象內(nèi)容滾動，是默認選項；fixed表示背景圖像固定在頁面上靜止不動，只有其他的內(nèi)容隨滾動條滾動。顏色及背景屬性舉例3.背景顏色background-color

8.背景大小background-sizebackground-size指定背景圖像的大小?？梢灾付ㄏ袼鼗虬俜直却笮?。9.復合屬性：背景background語法：background：取值

背景相關屬性的簡寫10.CSS3多重背景排在最前面的圖片在瀏覽器中顯示時會覆蓋在最上面。還可以在聲明中追加背景顏色，像下面這樣：background:url('img/1.png'),url('img/2.png'),url('img/3.png')leftbottom,black;顏色及背景屬性舉例1.單詞間隔word-spacing語法：word-spacing:取值

2.字符間隔letter-spacing語法：letter-spacing:取值

3.文字修飾text-decoration設置下劃線、刪除線等。4.縱向排列vertical-align垂直對齊方式

5.文本轉(zhuǎn)換text-transform文本轉(zhuǎn)換屬性僅被用于用來轉(zhuǎn)換英文文字的大小寫的。6.文本的水平對齊text-align

文本屬性舉例7.文本縮進text-indent常用于設置段落的首行縮進。8.文本行高line-height行高屬性用于控制文本基線之間的間隔值。9.文本行高line-height行高屬性用于控制文本基線之間的間隔值。說明：normal是默認屬性，即將連續(xù)的多個空格合并；pre作用類似HTML中的<pre>標簽；nowrap則表示強制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遇到<br>對象。

文本屬性舉例邊距、填充與邊框?qū)傩?5邊距與填充屬性邊框?qū)傩?/p>

1.邊距―margin

margin的值可以取1到4個，如果只設置了1個值，則應用于4個邊距；如果設置了兩個或3個值，則省略的值與對邊相等；如果設置了4個值，則按照上、右、下、左的順序分別對應其邊距。2.填充―padding

間隔值可以設置為長度值或百分比。其中，百分比不能使用負值。示例如下：img{margin:10px20px;padding:5px6px7px8px;}

邊距與填充屬性舉例邊框?qū)傩?邊框樣式border-style舉例border-style屬性值含義none不顯示邊框，為默認屬性值dotted點線dashed虛線solid實線double雙實線groove邊框帶有立體感的溝槽ridge邊框成脊形inset使整個方框凹陷，即在外框內(nèi)嵌入一個立體邊框outset使整個方框凸起，即在外框外嵌入一個立體邊框邊框?qū)傩?/p>

舉例

邊框?qū)傩詁order邊框?qū)傩杂脕碓O置一個元素的邊框?qū)挾?、樣式和顏色。它所包含?種屬性（即上、右、下、左4個邊框?qū)傩院鸵粋€總的邊框?qū)傩裕┒际菑秃蠈傩浴SS3圓角邊框border-radius屬性為元素添加圓角邊框！

列表屬性06列表符號的取值舉例符號的取值含義none不顯示任何項目符號或編碼disc以實心圓形●作為項目符號circle以實心圓形○作為項目符號square以實心方塊■作為項目符號decimal以普通阿拉伯數(shù)字1、2、3……作為項目編號lower-roman以小寫羅馬數(shù)字ⅰ、ⅱ、?！鳛轫椖烤幪杣pper-roman以大寫羅馬數(shù)字Ⅰ、Ⅱ、Ⅲ……作為項目編號lower-alpha以小寫英文字母a、b、c……作為項目編號upper-alpha以大寫英文字母A、B、C……作為項目編號列表屬性舉例列表屬性拓展舉例CSS布局基礎07CSS布局元素類型盒模型定位及尺寸屬性CSS布局元素類型舉例1.塊級元素每個塊級元素都從新的一行開始，塊級元素一般是其它元素的容器元素，它可以容納內(nèi)聯(lián)元素和其它元素。例如：段落、標題、列表、表格、div等元素都是塊級元素。2.行內(nèi)元素行內(nèi)元素也成為內(nèi)聯(lián)元素。和其他元素都在一行上；給內(nèi)聯(lián)元素設置寬度和高度是沒有效果的。

3.行內(nèi)塊元素行內(nèi)塊元素和其他元素都在一行上；元素的高度、寬度、行高以及頂和底邊距都可設置。inline-block。4.display實現(xiàn)元素類型的轉(zhuǎn)換“display:block”將元素轉(zhuǎn)換為塊級元素。“display:inline”將元素裝換為行級元素

盒模型舉例定位及尺寸屬性舉例1.定位方式position定位方式屬性用于設定瀏覽器應如何來定位HTML元素。2.元素位置top、right、bottom、left元素位置屬性與定位方式共同設置元素的具體位置。

3.層疊順序z-index

層疊順序?qū)傩杂糜谠O定層的先后順序和覆蓋關系。4.浮動屬性float

浮動屬性也稱漂浮屬性，浮動使元素脫離文檔普通流，漂浮在普通流之上的。5.清除屬性clear清除屬性指定一個元素是否允許有其他元素漂浮在它的周圍。6.可見屬性visibility可見屬性用于設定嵌套層的顯示屬性。

常用布局結(jié)構(gòu)08單行單列結(jié)構(gòu)二列布局結(jié)構(gòu)單行單列結(jié)構(gòu)舉例二列布局結(jié)構(gòu)舉例CSS3常用特效09CSS3盒陰影CSS3文字陰影

CSS3漸變背景CSS3盒陰影舉例box-shadow屬性值說明h-shadow必需的。水平陰影的位置。允許負值v-shadow必需的。垂直陰影的位置。允許負值blur可選。陰影模糊值。不允許負值spread可選。陰影外延值?？梢詾樨撝礳olor可選。陰影的顏色。inset可選。設置對象的陰影類型為內(nèi)陰影。該值為空時，則對象的陰影類型為外陰影CSS3盒陰影舉例CSS3文字陰影舉例text-shadow屬性值說明h-shadow必需的。水平陰影的位置。允許負值v-shadow必需的。垂直陰影的位置。允許負值blur可選。陰影模糊值。不允許負值color可選。陰影的顏色。CSS3漸變背景舉例彈性布局10彈性布局舉例兼容性處理11CSS3兼容性處理舉例/*加上私有前綴*/-webkit-border-radius:50px;/*-webkit-Safari、Chrome*/-moz-border-radius:50px;/*-moz-Firefox*/-ms-border-radius:50px;/*-ms-IE*/-o-border-radius:50px;/*-o-Opera*/border-radius:50px;/*標準*/任務實施12實現(xiàn)猜拳游戲首頁界面本任務是采用彈性布局，并添加陰影，圓角邊框等美化效果如圖所示。

任務實施：實現(xiàn)簡潔立體菜單效果

小結(jié)13實現(xiàn)簡潔立體菜單效果CSS3介紹樣式表的使用字體、顏色、背景與文字屬性邊距、填充與邊框?qū)傩粤斜韺傩訡SS布局基礎常用布局結(jié)構(gòu)CSS3常用特效彈性布局兼容性處理小結(jié)總結(jié)謝謝任務4實現(xiàn)猜拳游戲功能HTML5跨平臺開發(fā)基礎與實戰(zhàn)學習目標能夠運用JavaScript輸出語句實現(xiàn)信息的展示。能夠給程序添加注釋。掌握JavaScript的數(shù)據(jù)類型。能使用typeof來判斷數(shù)據(jù)類型。理解JavaScript的數(shù)據(jù)類型的自動轉(zhuǎn)換。能使用parseInt()、parseFloat()實現(xiàn)JavaScript的數(shù)據(jù)類型的強制轉(zhuǎn)換。掌握JavaScript運算符與表達式。掌握變量的聲明和賦值。能夠定義和調(diào)用函數(shù)，能夠?qū)崿F(xiàn)函數(shù)的參數(shù)傳送，能夠使用函數(shù)的返回值。理解變量的作用域。能夠運用流程控制語句。了解處理日期和時間的存儲、轉(zhuǎn)化和表達的Date對象。學習目標掌握Date對象常用方法和屬性的訪問。能夠使用Date對象實現(xiàn)日期的各種形式展示。了解處理數(shù)學運算的Math對象。掌握Math對象常用方法和屬性的訪問。能夠使用Math對象實現(xiàn)數(shù)學運算。掌握DOM元素的常用屬性和方法。能夠?qū)崿F(xiàn)元素的獲取。掌握DOM事件的處理。能夠?qū)崿F(xiàn)元素事件的綁定。掌握DOM元素的樣式動態(tài)設置。能夠動態(tài)改變元素的樣式。目錄一、任務描述二、JavaScript簡述三、數(shù)據(jù)類型和運算符五、常用的內(nèi)置函數(shù)六、基本語句四、變量和函數(shù)目錄七、日期(Date)對象和數(shù)學(Math)對象八、DOM基礎九、動態(tài)改變元素樣式十、任務實施十一、小結(jié)任務描述01實現(xiàn)猜拳游戲功能本任務本任務是編寫JavaScript程序，實現(xiàn)猜拳游戲功能，如圖所示。任務描述：實現(xiàn)猜拳游戲功能

JavaScript簡述02JavaScript概要、主要特點、相關應用常用的引入JavaScript的方式JavaScript輸出語句調(diào)試JavaScript程序頁面結(jié)構(gòu)、樣式和行為JavaScript概要

ECMAScript是實現(xiàn)JavaScript所依據(jù)的標準。也用來描述語言版本(比如ECMAScript5)，是一種由歐洲計算機制造商協(xié)會（ECMA）通過的腳本程序設計標準。1997年，為了解決JavaScript幾個版本語法、特性等方面的混亂，推出了ECMA-262規(guī)范版本，ECMA-262標準Edition3是一個巨大的成功，在業(yè)界得到廣泛支持，成為通行標準，奠定了JavaScript語言的基本語法，以后的版本完全繼承。直到今天，初學者一開始學習JavaScript，其實就是在學3.0版的語法。2009年12月，ECMAScript5版正式發(fā)布。ECMAScript5與ECMAScript3基本保持兼容，ECMAScript5瀏覽器支持情況：Opera11.60、InternetExplorer9*、Firefox4、Safari5.1*、Chrome13，因此在PC端開發(fā)的時候，要注意IE9以下的兼容，移動端開發(fā)時，可以比較放心了。JavaScript的組成

JavaScript由三部分組成：核心（ECMAScript）描述了該語言的語法和基本對象瀏覽器對象模型(BOM，是BrowserObjectModel的首字母縮寫)描述了與瀏覽器進行交互的方法和接口文檔對象模型(DOM，是DocumentObjectModel的首字母縮寫)描述了處理網(wǎng)頁內(nèi)容的方法和接口JavaScript引擎的工作原理

JavaScript解析引擎就是能夠“讀懂”JavaScript代碼，并準確地給出代碼運行結(jié)果的一段程序。

JavaScript代碼執(zhí)行順序為了安全起見，我們一般在頁面初始化完畢之后才允許JavaScript代碼執(zhí)行，這樣可以避免網(wǎng)速對JavaScript執(zhí)行的影響，同時也避開了HTML文檔流對于JavaScript執(zhí)行的限制。如果在一個頁面中存在多個window.onload事件處理函數(shù)，則只有最后一個才是有效的，為了解決這個問題，可以把所有腳本或調(diào)用函數(shù)都放在同一個onload事件處理函數(shù)中，例如：window.onload=function(){f1();f2();f3();}而且通過這種方式可以改變函數(shù)的執(zhí)行順序，方法是：簡單地調(diào)整onload事件處理函數(shù)中調(diào)用函數(shù)的排列順序。

JavaScript的主要特點JavaScript是一種Web頁面中的一種腳本編程語言，也是一種通用的、跨平臺的、基于對象和事件驅(qū)動并具有安全性的腳本語言。它不需要進行編譯，而是直接嵌入到HTML頁面中，把靜態(tài)頁面轉(zhuǎn)變成支持用戶交互并響應事件的動態(tài)頁面。JavaScript主要用于讀寫HTML元素、在網(wǎng)頁中嵌入動態(tài)文本、動態(tài)修改CSS樣式表；對瀏覽器事件做出響應、表單數(shù)據(jù)驗證、檢測訪客的瀏覽器信息等等。用途

JavaScript相關應用1.驗證數(shù)據(jù)2.頁面特效3.數(shù)值計算4.動態(tài)頁面效果JavaScript主要用于讀寫HTML元素、在網(wǎng)頁中嵌入動態(tài)文本、動態(tài)修改CSS樣式表；對瀏覽器事件做出響應、表單數(shù)據(jù)驗證、檢測訪客的瀏覽器信息等等。1．

通過<script>標簽嵌入到HTML頁面來引入JavaScriptJavaScript代碼寫在<script></script>標簽對之間。<scripttype="text/JavaScript">//JavaScript語句；</script>type屬性用于指定HTML文檔引用腳本的語言類型，“type=’text/JavaScript’”表示<script></script>元素中包含的是JavaScript腳本?！?/”表示單行注釋標記，使用“/**/”定義多行注釋。同時需要注意，JavaScript語句必須以分號“；”結(jié)束；

JavaScript區(qū)分大小寫。

常用的引入JavaScript的方式舉例2．通過<script>標簽的src屬性鏈接外部的JavaScript文件單獨創(chuàng)建一個JavaScript文件（簡稱js文件）其文件后綴通常為.js，然后將JavaScript代碼直接寫在JavaScript文件中。鏈接JavaScript文件名稱為“xxx.js”的示例如下：<scriptsrc="xxx.js"></script>

常用的引入JavaScript的方式舉例JavaScript輸出語句舉例1．使用window.alert()彈出警告框，向用戶發(fā)出警告或提醒alert()方法會創(chuàng)建一個警告框，用于將瀏覽器或文檔的警告信息傳遞給客戶。參數(shù)可以是變量、字符串或表達式，警告框無返回值。window可以省略。2．document.write()

document.write()方法可以向文檔寫文本、HTML表達式或JavaScript代碼。該方法需要個字符串參數(shù)，它是寫到文檔HTML內(nèi)容，這些字符串參數(shù)可以是變量或值為字符串的表達式，寫入的內(nèi)容常常包括HTML標記語言。

window.alert(5+6);

document.write("<h1>個人信息</h1>");JavaScript輸出語句舉例3．使用console.log()JavaScript顯示數(shù)據(jù)使用console.log()寫入到瀏覽器的控制臺。

語法：window.confirm(“str”)等效于confirm(“str”)；【例】確認消息對話框。if(confirm("確定開始么?")){alert("您單擊了確認");}else{alert("您單擊了取消");}JavaScript輸出語句舉例5．prompt()方法

語法：prompt(msg,defaultText)；提示用戶進行輸入的對話框。該方法可返回用戶輸入的字符串。【例】提示用戶進行輸入的對話框。varans=prompt("請輸入您的賬號?","666");if(ans){alert("您的賬號是："+ans);}else{alert("您拒絕了回答！");}JavaScript輸出語句舉例6.使用innerHTML

語法：object.innerHTML="輸出內(nèi)容"；JavaScript顯示數(shù)據(jù)使用innerHTML寫入到HTML元素?！纠枯敵鰯?shù)據(jù)。<pid="demo">我的第一個段落</p><script>document.getElementById("demo").innerHTML="段落已修改。";</script>1．語法錯誤

調(diào)試JavaScript程序舉例2．邏輯錯誤

調(diào)試JavaScript程序舉例頁面結(jié)構(gòu)、表現(xiàn)和行為HTML：（HyperTextMarkupLanguage）超文本標記語言，用來編寫網(wǎng)頁的內(nèi)容，形成頁面的結(jié)構(gòu)。CSS：（CascadingStyleSheet）層疊樣式表，它出現(xiàn)的目的是為了讓網(wǎng)頁的表現(xiàn)更豐富。JavaScript：控制頁面的行為。JavaScript通過事件動態(tài)修改HTML和CSS。數(shù)據(jù)類型和運算符03JavaScript數(shù)據(jù)類型-數(shù)值型字符串型、布爾型

、特殊數(shù)據(jù)類型

數(shù)據(jù)類型的隱式和顯式轉(zhuǎn)換JavaScript常用運算符數(shù)據(jù)類型的分類舉例

數(shù)值型：數(shù)字可以帶小數(shù)點，也可以不帶如：120，35.23;也可以用科學或標準方法表示，如：5E7表示50000000、4e-5表示0.00004等。undefined類型：專門用來確定一個已經(jīng)創(chuàng)建但是沒有初值的變量。JavaScript中基本的數(shù)據(jù)類型有以下幾種。字符串型：用引號包圍的文本，如："我是字符串1",'我是字符串2'等。布爾型：只有兩個取值，如：true、false。判斷時非0或非空可作為true對待。null類型：表示從未賦值的值，只有一種取值null。如果引用一個沒有定義的變量，則返回一個null值。數(shù)值型number

JavaScript腳本語言中采用弱類型的方式，擁有動態(tài)類型，這意味著相同的變量可用作不同的類型數(shù)值型：數(shù)字可以帶小數(shù)點，也可以不帶如：120，35.23;也可以用科學或標準方法表示，如：5E7表示50000000、4e-5表示0.00004等。toFixed()方法可把number四舍五入為指定小數(shù)位數(shù)的數(shù)字，返回值為string類型。varnum=3.456789;varn=num.toFixed();//將一個數(shù)字，不留任何小數(shù)：n的值為3varnum=3.456789;varn=num.toFixed(2);//將一個數(shù)字，留2位小數(shù)：n的值為3.46alert(typeofn);//string舉例字符串型String

舉例字符串（string）是有Unicode字符、數(shù)字、標點符號等組成的序列，它是JavaScript用來表示文本的數(shù)據(jù)類型。程序中的字符串型數(shù)據(jù)包含在單引號和雙引號中，由單引號定界的字符串中可以包含雙引號，由雙引號定界的字符串中也可以包含單引號。例如：單引號括起來的一個或多個字符，代碼如:'HelloJavaScript！'例如：雙引號括起來的一個或多個字符，代碼如：

"HelloJavaScript！"例如：單引號定界的字符串中可以包含雙引號，代碼如：'pass="mypass"'例如：雙引號定界的字符串中可以包含單引號，代碼如："Youcancallher'Rose'"假設字串

varmyString=“thissampletooeasy！”其中字串對象的“位置”是從0開始，字串“thissampletooeasy！”中第0位置的字符是“t”，第1的位置是“h”，……依次類推。布爾型

舉例布爾數(shù)據(jù)類型只有兩個值，這兩個合法的值分別由直接量“true”和“false”表示。它說明某個事物是真還是假。在JavaScript程序中，布爾值通常用來比較所得的結(jié)果，例如：m==1這行代碼測試了變量m的值是否和數(shù)值1相等。如果相等，比較的結(jié)果就是布爾值true，否則結(jié)果就是false。布爾值通常用于JavaScript的控制結(jié)構(gòu)。例如，JavaScript的if/else語句就是在布爾值true時執(zhí)行一個動作，而在布爾值為false時執(zhí)行另一個操作。JavaScript在必要的時候?qū)rue轉(zhuǎn)化為1，將false轉(zhuǎn)化為0。特殊數(shù)據(jù)類型

舉例未定義值undefined類型只有一個值，即特殊的undefined。在使用var聲明變量，但沒有對其初始化時，這個變量的值就是undefined。例如：varm;alert(m);JavaScript中還有一種特殊類型的數(shù)字常量NaN，即“非數(shù)字”。當程序由于某種原因計算錯誤后，將產(chǎn)生一個沒有意義的數(shù)字，此時JavaScript返回的數(shù)值就是NaN。JavaSript中的關鍵字null是一個特殊的值，它表示值為空，用于定義空的或者不存在的引用。如果試圖引用一個沒有定義的變量，則返回一個null值。這里必須注意的是，null不等同與空字符串（""）和0。null和undefined的區(qū)別是，null表示一個變量被賦予了一個空值，而undefined則表示該變量尚未被賦值。特殊數(shù)據(jù)類型

舉例轉(zhuǎn)義字符在document.write()語句中使用時，只有將其放在格式化文本標簽<pre></pre>中才會起作用。如：document.write(“<pre>努力學習\nJavaScript語言！</pre>”);

復合數(shù)據(jù)類型:Object類型值為基本數(shù)據(jù)類型的組合如：數(shù)組，json等，如下：varperson={//json'name':'Bob','age':20,'tags':['js','web','mobile'],'city':'Beijing','hasCar':true,'zipcode':null};數(shù)據(jù)類型的隱式轉(zhuǎn)換

舉例當JavaScript嘗試操作一個"錯誤"的數(shù)據(jù)類型時，會自動轉(zhuǎn)換為"正確"的數(shù)據(jù)類型。以下輸出結(jié)果不是你所期望的：5+null//返回5null轉(zhuǎn)換為0"5"+null//返回"5null"null轉(zhuǎn)換為"null""5"+1//返回"51"1轉(zhuǎn)換為"1""5"-1//返回4"5"轉(zhuǎn)換為5"5"*2//返回10"5"轉(zhuǎn)換為5"6"/2//返回3"6"轉(zhuǎn)換為6JavaScript常用運算符

用于操作數(shù)據(jù)特定符號的集合叫運算符，運算符操作的數(shù)據(jù)叫操作數(shù)，運算符與操作數(shù)連接后的式子叫表達式，運算符也可以連接表達式構(gòu)成更長的表達式。算術運算符可以進行加、減、乘、除和其他數(shù)學運算，給定

y=7，下表解釋了這些算術運算符。算術運算符描述例子結(jié)果+加x=y+2x=9-減x=y-2x=5*乘x=y*2x=14/除x=y/2x=3.5%取模x=y%2x=1++遞加1x=++yx=8--遞減1x=--yx=6

比較運算符可以比較表達式的值，并返回一個布爾值，給定x=7，如表所示。比較運算符描述例子<

小于x<8為true>

大于x>8為false<=小于等于x<=8為true===全等于x===7為true；x==="7"為false>=大于等于x>=8為false==等于x==8為false!=不等于x!=8為true!==不全等于x!=="7"為true全等于運算符“===”與不全等于“！==”對數(shù)據(jù)類型的一致性要求嚴格。

邏輯運算符比較兩個值，然后返回一個布爾值（true或false），JavaScript中常用的邏輯運算符，如表所示。邏輯運算符描述&&邏輯與，在形式A&&B中，只有當兩個條件A和B都為true時，整個表達式才為true||邏輯或，在形式A||B中，只要兩個條件A和B有一個為true，整個表達式就為true!邏輯非，在!A中，當A為true時，表達式的值為false；當A為false時，表達式的值為true三個邏輯運算符優(yōu)先級有細微差別，從高到低次序為!、&&、||。賦值運算符不僅實現(xiàn)了賦值功能，由它構(gòu)成的表達式也有一個值，值就是賦值運算符右邊的表達式的值，賦值運算符的優(yōu)先級很低，僅次于逗號運算符。復合賦值運算符是運算與賦值兩種運算的復合，先運算、后賦值，以簡化程序的書寫，提高運算效率。給定

x=20

和

y=5，如表10-7所示認識常用組合賦值運算符。賦值運算符描述例子=將右邊表達式的值賦給左邊的變量。x=y，結(jié)果x=5+=將運算符左側(cè)的變量加上右側(cè)表達式的值賦給左側(cè)的變量。x+=y等同于x=x+y，結(jié)果x=25-=將運算符左側(cè)的變量減去右側(cè)表達式的值賦給左側(cè)的變量。x-=y等同于x=x-y，結(jié)果x=15*=將運算符左側(cè)的變量乘以右側(cè)表達式的值賦給左側(cè)的變量。x*=y等同于x=x*y，結(jié)果x=100/=將運算符左側(cè)的變量初一右側(cè)表達式的值賦給左側(cè)的變量。x/=y等同于x=x/y，結(jié)果x=4%=將運算符左側(cè)的變量用右側(cè)表達式的值求模。x%=y等同于x=x%y，結(jié)果x=0條件運算符是三元運算符，使用該運算符可以方便地由條件邏輯表達式的真假值得到各自對應的取值?；蛴梢粋€值轉(zhuǎn)換成另外兩個值，使用條件運算符嵌套多個值。語法：操作數(shù)？結(jié)果1:結(jié)果2如果操作數(shù)的值為true時，表達式的值為“結(jié)果1”，否則為“結(jié)果2”。例如：

varm=5;(m==10)?a="Yes":a="No";document.write("m==10的結(jié)果為"+a);則最終的輸出結(jié)果為“m==10的結(jié)果為No”?！纠?/p>

】三元運算符實現(xiàn)圖片切換。舉例運算符具有明確的優(yōu)先級與結(jié)合性。優(yōu)先級較高的運算符將先于優(yōu)先級較低的運算符進行運算。結(jié)合性則是指具有同等優(yōu)先級的運算符將按照怎樣的順序進行運算。結(jié)合性有向左結(jié)合和向右結(jié)合兩種。例如,表達式x+y+z，向左結(jié)合就是先運算x+y，即(x+y)+z；向右結(jié)合則表示先運算y+z，即x+(y+z)。優(yōu)先級結(jié)合性運算符最高向左[]、()優(yōu)先級由高到低依次排列向右++、--、-、!、delete、new、typeof、void向左*、/、%向左+、-向左<<、>>、>>>向左<、<=、>、>=、in、instanceof向左==、!=、===、!===向左&向左^向左|向左&&向左||向右?:向右=向右*=、/=、%=、+=、-=、<<=、>>=、.>>>=、&=、^=、|=最低向左，typeof運算符返回其操作數(shù)當前的數(shù)據(jù)類型。這對于判斷一個變量是否已被定義特別有用。例如，下面應用typeof運算符返回當前操作數(shù)的數(shù)據(jù)類型，如：typeoffalsetypeof運算符把類型信息用字符串返回。typeof運算符的返回值有6種：“number”、“string”、“boolean”、“object”、“function”和“undefined”。typeof"John"http://返回stringtypeof3.14//返回numbertypeoffalse//返回booleantypeof[1,2,3,4]//返回objecttypeof{name:'John',age:34}//返回objecttypeofundefined//undefinedtypeofnull//object變量和函數(shù)04JavaScript變量的命名與聲明

函數(shù)的定義與調(diào)用變量的作用域關鍵字舉例JavaScript關鍵字（ReservedWords）是指在JavaScript語言中有特殊含義，成為JavaScript語法中一部分的那些字。在JavaScript中標識符用來命名變量和函數(shù)，或者用作JavaScript代碼中某些循環(huán)的標簽。JavaScript關鍵字不能作為變量名或者函數(shù)名使用。使用JavaScript關鍵字作為變量名或函數(shù)名，會使JavaScript在載入的過程中出現(xiàn)編譯的錯誤。變量的定義與命名變量是指程序中一個已經(jīng)命名的存儲單元，它的主要作用就是為數(shù)據(jù)操作提供存放信息的容器。在使用變量前，首先必須了解變量的命名規(guī)則，規(guī)則同樣適用于函數(shù)的命名。必須是一個有效的變量，即變量以字母開頭，中間可以出現(xiàn)數(shù)字或下劃線如test1、btn_Start等。變量名稱不能有空格、加號(+)、減號(-)、逗號(,)或其他符號。其他（如函數(shù)、屬性等）需要命名的也與此相似。變量也能以$和下劃線符號開頭(不推薦這么做，通常用在特定領域)。在對變量命名時，最好注意名字能代表其存儲數(shù)據(jù)的意義，增強可讀性，以免出現(xiàn)錯誤。JavaScript中數(shù)據(jù)是弱類型的，以節(jié)省程序調(diào)試與開發(fā)的時間。JavaScript中的變量命名同其計算機語言非常相似，這里要注意以下三點。不能使用JavaScript中的關鍵字作為變量。在JavaScript中定義了40多個關鍵字，這些關鍵是在其內(nèi)部使用的，不能作為變量的名稱。如var、int、double、true不能作為變量的名稱。例如：varx，y=“125”，xy=true，cost=19.5。變量的聲明與賦值舉例Javascript是一種弱檢測的語言。它對變量的定義并不需要聲明變量類型，通過賦值的形式，可以將各種類型的數(shù)據(jù)賦值給同一個變量。在JavaScript中，變量可以用關鍵字var作聲明，例如：varage;JavaScript中變量申明分顯式申明和隱式申明。

vari=56;//顯式申明，并賦予了它的值，它的類型目前是數(shù)值型，值為56。

i=56;//隱式申明，

JavaScript會自動用該變量名創(chuàng)建一個全局變量。JavaScript可以使用var同時聲明多個變量，也可以同時賦值。只聲明未對其賦值的變量，則其默認值為undefined。其中x為數(shù)值型，y為字符串，xy為布爾型，cost為數(shù)值型。函數(shù)的定義與調(diào)用舉例函數(shù)就是包裹在花括號中的代碼塊，前面使用了關鍵詞functionfunctionfunctionname([參數(shù)表]){執(zhí)行代碼

}在調(diào)用函數(shù)時，可以向其傳遞值，這些值被稱為參數(shù)。這些參數(shù)可以在函數(shù)中使用。可以發(fā)送任意多的參數(shù)，由逗號(,)分隔：myFunction(argument1,argument2)函數(shù)的返回值舉例通過使用return語句可以實現(xiàn)函數(shù)將值返回調(diào)用它的地方。在使用return語句時，函數(shù)會停止執(zhí)行，并返回指定的值。functionmyFunction(x){if(x>=0)returnx;elsereturn-x;}varmyVar=myFunction(5);myVar變量的值是5，也就是函數(shù)"myFunction()"所返回的值。即使不把它保存為變量，也可以使用返回值，如：document.getElementById(“demo”).innerHTML=myFunction();“demo”元素的innerHTML將成為5，也就是函數(shù)"myFunction()"所返回的值。如果沒有return語句，函數(shù)執(zhí)行完畢后也會返回結(jié)果，只是結(jié)果為undefined。函數(shù)的作用域舉例

在JavaScript中同樣有全局變量和局部變量之分。全局變量是定義在所有函數(shù)體之外，其作用范圍是所有的函數(shù)；而局部變量是定義在函數(shù)體之內(nèi)，只在該函數(shù)內(nèi)可見，其他函數(shù)則不能訪問它。如果全局變量與局部變量有相同的名字，則同名局部變量所在函數(shù)內(nèi)會屏蔽全局變量，從而優(yōu)先使用局部變

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

HTML5跨平臺開發(fā)基礎與實戰(zhàn)PPT完整全套教學課件

文檔簡介

溫馨提示

最新文檔

評論

HTML5跨平臺開發(fā)基礎與實戰(zhàn)PPT完整全套教學課件

文檔簡介

溫馨提示

最新文檔

評論

相關文檔