Web前端開發(fā)（初級）（上冊）高職全套教學(xué)課件

Web簡介第一章Web前端開發(fā)初級(上冊)【ch01】Web簡介.pptx【ch02】HTML基礎(chǔ).pptx【ch03】CSS基礎(chǔ).pptx【ch04】JavaScript語法基礎(chǔ).pptx【ch05】JavaScript對象模型.pptx【ch06】JavaScript事件處理.pptx全套可編輯PPT課件學(xué)習(xí)路線Web簡介01Web的誕生Internet，中文正式譯名為因特網(wǎng),又叫作國際互聯(lián)網(wǎng)，是由所有使用公用語言互相通信的計(jì)算機(jī)連接而組成的全球網(wǎng)絡(luò)。一旦連接到它的任意一個(gè)節(jié)點(diǎn)，就意味著計(jì)算機(jī)或者其他設(shè)備已經(jīng)連入Internet。目前，Internet的用戶已經(jīng)遍及全球，截止到2018年，已經(jīng)有超過40億人在使用Internet，并且它的用戶數(shù)還在以等比級數(shù)上升。Web的誕生Intemnet的前身是美國國防部高級研究計(jì)劃局（AdvancedResearchProjectsAgency，ARPA）主持研制的ARPANET網(wǎng)絡(luò)，當(dāng)時(shí)建立這個(gè)網(wǎng)絡(luò)是為了將美國的幾臺軍事和研究用的計(jì)算機(jī)主機(jī)連接起來。ARPANET網(wǎng)絡(luò)于1969年正式啟用，但當(dāng)時(shí)僅連接了4臺計(jì)算機(jī)，供科學(xué)家們進(jìn)行計(jì)算機(jī)聯(lián)網(wǎng)實(shí)驗(yàn)使用。Web的誕生1986年美國國家科學(xué)基金會（NationalScienceFoundation，NSF）在政府的資助下，用TCP/IP協(xié)議建立了NSFNET網(wǎng)絡(luò)。NSFNET網(wǎng)絡(luò)于1989年改名為Internet，且向公眾開放。從此，Internet便在全球各地普及起來。Web的誕生目前，Internet在人們的日常生活中，己經(jīng)涉及方方面面，能幫助人們快速找到所需要的信息，空閑的時(shí)候可以依靠網(wǎng)絡(luò)放松自我。可以發(fā)郵件或者聊天，可以網(wǎng)上購物，可以在網(wǎng)絡(luò)上工作或者聯(lián)系親朋好友，甚至可以在網(wǎng)上交友，等等。Web的誕生E-mail電子郵件，具有速度快、成本低、方便靈活等優(yōu)點(diǎn)，是目前Internet的重要服務(wù)項(xiàng)目之一。FTP文件傳輸，用戶通過該協(xié)議可以進(jìn)行文件傳輸或者文件訪問。由于安全問題，其使用場景也越來越少。BBS電子公告，最早是用來公布股市價(jià)格等類信息的，現(xiàn)在的BBS己經(jīng)發(fā)展成功能齊全的社區(qū)。WWWWorldWideWeb，中文名為萬維網(wǎng)，也被稱為Web，是Internet中發(fā)展最迅速的部分。Web的誕生1984年，TimBerners-Lee進(jìn)入由歐洲原子核研究會（CERN）建立的粒子實(shí)驗(yàn)室。他在這里接受了一項(xiàng)工作：為了使歐洲各國的核物理學(xué)家能通過計(jì)算機(jī)網(wǎng)絡(luò)及時(shí)溝通傳遞信息進(jìn)行合作研究，需要開發(fā)一個(gè)軟件，以便使分布在各國物理實(shí)驗(yàn)室和研究所的最新信息、數(shù)據(jù)、圖像資料供大家共享。Web的誕生接受這項(xiàng)任務(wù)的TimBerners-Lee于1989年夏天，成功開發(fā)出世界上第一個(gè)Web服務(wù)器和第一個(gè)Web客戶機(jī)。1989年12月，TimBerners-Lee將他的發(fā)明正式命名為WorldWideWeb，即WWW。Web的誕生1991年8月6日，TimBerners-Lee建立了世界上第一個(gè)網(wǎng)站，即http：//info.cern.ch/（該網(wǎng)站現(xiàn)在還運(yùn)轉(zhuǎn)如常）。第一個(gè)網(wǎng)站，即http：//info.cern.ch/（該網(wǎng)站現(xiàn)在還運(yùn)轉(zhuǎn)如常）。該網(wǎng)站解釋了WorldWideWeb是什么，以及如何使用網(wǎng)頁瀏覽器和如何建立一個(gè)網(wǎng)頁服務(wù)器等。此時(shí)，Web正式誕生。Web的誕生1994年10月，TimBerners-Lee在麻省理工學(xué)院創(chuàng)立了WorldWideWeb

Consortium，中文名為萬維網(wǎng)聯(lián)盟，該聯(lián)盟的簡稱為W3C，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。Web的誕生02Web的相關(guān)概念WWWWWW，WorldWideWeb的縮寫，也可寫為W3、Web，中文名為萬維網(wǎng)。WWW是Intemet的最核心部分。它是Internet上那些支持Www服務(wù)和HTTP協(xié)議的服務(wù)器集合。WWW在使用上分為Web客戶端和Web服務(wù)器。用戶可以使用Web客戶端（多用網(wǎng)絡(luò)瀏覽器）訪問Web服務(wù)器上的頁面。Web的相關(guān)概念WebsiteWebsite，中文名為網(wǎng)站，是指在Internet上根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。人們可以通過網(wǎng)站發(fā)布自己想要公開的資訊，或者利用網(wǎng)站提供相關(guān)的網(wǎng)絡(luò)服務(wù)。Web的相關(guān)概念URLURL，UniformResourceLocator的縮寫，中文名為統(tǒng)一資源定位符，俗稱網(wǎng)址。它是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。在WWW上瀏覽或者查詢信息，必須在網(wǎng)頁瀏覽器上輸入查詢目標(biāo)的地址。Web的相關(guān)概念URL的一般格式如下：協(xié)議：//主機(jī)地址（IP地址）+目錄路徑+參數(shù)Web的相關(guān)概念file主要用于訪問本地計(jì)算機(jī)中的文件。httpHyperTextTransferProtocol，超文本傳輸協(xié)議。ftpFileTransferProtocol，文件傳輸協(xié)議，可以通過FTP訪問服務(wù)器上的文件。telent允許用戶通過一個(gè)協(xié)商過程與一個(gè)遠(yuǎn)程設(shè)備進(jìn)行通信。Web的相關(guān)概念例如：http：//http：//https：///s?ie=UTF-8&wd=HTMLWeb的相關(guān)概念URL的參數(shù)通常放在URL后面，用“?”開頭，用“&”將多個(gè)參數(shù)拼接起來。URL只能用ASCII字符集通過因特網(wǎng)進(jìn)行發(fā)送，如果包含非ASCII字符集的字符，則需要進(jìn)行轉(zhuǎn)換。Web的相關(guān)概念Web標(biāo)準(zhǔn)Web應(yīng)用開發(fā)需要遵循的標(biāo)準(zhǔn)就是WebStandard（Web標(biāo)準(zhǔn)），這里Web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)標(biāo)準(zhǔn)（XML、HTML和XHTML），表現(xiàn)標(biāo)準(zhǔn)（CSS），行為標(biāo)準(zhǔn)（DOM、JavaScript）。Web的相關(guān)概念Web瀏覽器Web瀏覽器，簡稱瀏覽器，是一個(gè)顯示網(wǎng)頁服務(wù)器或者檔案系統(tǒng)內(nèi)的HTML文件，并讓用戶與這些文件互動的軟件。第一個(gè)網(wǎng)頁瀏覽器就是TimBemers-Lee編寫的WorldWideWeb，后改名為Nexus。Web的相關(guān)概念主流瀏覽器的發(fā)展歷史如下表所示。Web的相關(guān)概念現(xiàn)存主流瀏覽器的內(nèi)核情況如下表所示。Web的相關(guān)概念Web服務(wù)器Web服務(wù)器的主要功能是提供網(wǎng)上信息瀏覽服務(wù)。Web服務(wù)器可以解析HTTP協(xié)議，當(dāng)Web服務(wù)器接收到一個(gè)HTTP請求時(shí)，會返回一個(gè)HTTP響應(yīng)，這樣客戶端就可以從服務(wù)器上獲取網(wǎng)頁（HTML），包括CSS、JS、音頻、視頻等資源。Web的相關(guān)概念03Web開發(fā)目前，Web開發(fā)主要分為前端和后端兩部分。前端指的是直接與用戶接觸的網(wǎng)頁，網(wǎng)頁上通常有HTML、CSS、JavaScript等內(nèi)容；后端指的是程序、數(shù)據(jù)庫和服務(wù)器層面的開發(fā)。Web開發(fā)04本章小結(jié)本章簡單介紹了Internet的歷史和Web的誕生，重點(diǎn)介紹了Web的相關(guān)概念，包括WWW、Website、URL、Web標(biāo)準(zhǔn)、Web瀏覽器、Web服務(wù)器。同時(shí)，明確了Web前端開發(fā)需要掌握的內(nèi)容，包括HTML、CSS、JavaScript。本章小結(jié)感謝觀看HTML基礎(chǔ)第二章Web前端開發(fā)初級(上冊)學(xué)習(xí)路線HTML基礎(chǔ)雖然HTML現(xiàn)在已經(jīng)到了HTML5版本，但本章主要是圍繞HTML4.01和部分XHTML1.0展開的。這是因?yàn)槟壳盀g覽器對HTML5支持的問題，現(xiàn)在網(wǎng)頁的開發(fā)，80%左右的用戶使用的還是HTML4已有部分，甚至某些前端開發(fā)會遇到不使用HTMLS的極端情況。正是基于這種情況，HTML4可以稱為HTML基礎(chǔ)，掌握它是前端開發(fā)所必需的。HTML基礎(chǔ)01HTML概述語言是人類最重要的交際工具，是人們進(jìn)行溝通的主要表達(dá)方式。人們借助語言保存和傳遞人類文明的成果。同樣，計(jì)算機(jī)雖然是0和1的世界，人們將計(jì)算機(jī)中0和1組成的語言稱為機(jī)器語言，但這種機(jī)器語言晦澀難懂。在機(jī)器語言的基礎(chǔ)上，人們逐步研發(fā)出匯編語言、高級語言、腳本語言、標(biāo)記語言等，HTML是標(biāo)記語言的一種。HTML概述標(biāo)記語言標(biāo)記語言，是一種將文本（Text）以及與文本相關(guān)的其他信息結(jié)合起來，展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。標(biāo)記語言的種類有很多，常見的有XML、HTML、XHTML等。HTML概述01HTML（第1版）1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布。03HTML3.21997年1月14日，W3C推薦標(biāo)準(zhǔn)，這是第一個(gè)被廣泛使用的標(biāo)準(zhǔn)。02HTML2.01995年11月作為RFC1866發(fā)布。HTML概述HTML4.0HTML4.011997年12月18日，W3C推薦標(biāo)準(zhǔn)。1999年12月24日，W3C推薦標(biāo)準(zhǔn)，這也是另一個(gè)被廣泛使用的標(biāo)準(zhǔn)。HTML概述HTML的基本結(jié)構(gòu)HTML文件由文件頭（head）和文件體（body）兩部分組成，在這兩部分外面還要加上標(biāo)簽<html×</html>說明此文件是HTML文件。這樣瀏覽器才能正確識別HTML文件。HTML概述HTML的基本結(jié)構(gòu)如下：HTML概述將這段文字輸入任意文本編輯器中，注意不要使用Windows的寫字板程序，或者M(jìn)icrosoftOfficeWord、WPS等多功能文字處理軟件。輸入完成后保存，保存時(shí)，將文本保存類型設(shè)為“喇?”，文件名隨意，但它的后綴名一定是html或者h(yuǎn)tm。HTML概述將該文件用瀏覽器打開即可看到下圖。HTML概述下表匯總了HTML4.01和XHTML1.0所有的DTD。HTML概述01HTML的相關(guān)基本定義標(biāo)簽前面已經(jīng)介紹過，用“<”和“”括起來的叫作標(biāo)簽。03屬性HTML標(biāo)簽可以擁有屬性。屬性提供了有關(guān)HTML元素更多的信息。02元素一對標(biāo)簽包含的所有代碼，元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容。HTML概述HTML的常用開發(fā)工具正所謂“工欲善其事，必先利其器”，對HTML5開發(fā)人員來說，好工具的使用總會為人們帶來事半功倍的效果。所以，找到適合自己的開發(fā)工具是至關(guān)重要的。HTML概述02HTML的全局屬性HTML的全局標(biāo)準(zhǔn)屬性全局標(biāo)準(zhǔn)屬性適用于大多數(shù)元素。在HTML規(guī)范中，規(guī)定了8個(gè)全局標(biāo)準(zhǔn)屬性。HTML的全局屬性class用于定義元素的類名。通常用于指向CSS樣式表中的類，偶爾會通過JavaScript改變所有具有指定class的元素。id用于指定元素的唯一id。style用于指定元素的行內(nèi)樣式。title用于指定元素的額外信息。通常會在鼠標(biāo)移到元素上時(shí)顯示定義的提示文本。HTML的全局屬性tabindex用于指定元素在Tab鍵下的次序。lang用于指定元素內(nèi)容的語言。accesskey用于指定激活某個(gè)元素的快捷鍵。dir用于指定元素中內(nèi)容的文本方向。HTML的全局屬性HTML的全局事件屬性事件是針對某個(gè)控件或者元素而言的，且可以識別的操作。例如，針對按鈕，有單擊或者按下事件；針對勾選框，有選中事件和取消選中事件，或者稱為選中狀態(tài)改變事件；針對文本框，有獲取輸入焦點(diǎn)事件、文本變化事件等。HTML的全局屬性HTML4的新特性之一是可以使HTML事件觸發(fā)瀏覽器中的行為，如當(dāng)用戶單擊某個(gè)HTML元素時(shí)啟動一段JavaScript程序。在HTML中，事件既可以通過JavaScript直接觸發(fā)，也可以通過全局事件屬性觸發(fā)。HTML的全局屬性示例代碼：<!DOCTYPE

HTML

PUBLIC

π_//W3C//DTD

HTMI

4.01//EN""http：//www.w3，org/

TR/html4/strict.dtd">HTML的全局屬性運(yùn)行結(jié)果如下圖所示。HTML的全局屬性03HTML的元素HTML的主體元素一個(gè)完整的HTML文檔必須有它的主體元素，前面已經(jīng)給出了一個(gè)基本結(jié)構(gòu)的例子。但它不是一個(gè)完整的HTML文檔，將上面的例子在正中運(yùn)行。HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素一個(gè)最簡潔的HTML文檔應(yīng)該如下：HTML的元素IE中運(yùn)行結(jié)果正常，如下圖所示。HTML的元素HTML的無語義元素HTML中每個(gè)標(biāo)簽都有自己的語義。例如，<body>表示主體，<head>表示HTML文件信息頭，<hl>表示一級標(biāo)題。但也有兩個(gè)無語義的標(biāo)簽，如<span>和<div>.<span>和<div>的不同之處在于：<span>是內(nèi)聯(lián)標(biāo)簽，用在一行文本中，前后銜接緊密；而<div>是塊級標(biāo)簽，它等同于其前后有換行。HTML的元素示例代碼：HTML的元素HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素HTML常用<div>標(biāo)簽劃分節(jié)或者區(qū)域，它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。現(xiàn)在有很多網(wǎng)頁的布局方式可以叫作DIV+CSS.DIV用于存放需要顯示的數(shù)據(jù)（文字、圖表等），CSS用于指定如何顯示數(shù)據(jù)樣式，從而做到結(jié)構(gòu)與樣式的相互分離，便于后期維護(hù)與改版。HTML的元素這種布局代碼簡單，且易于維護(hù)。HTML的元素HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素HTML的標(biāo)題元素<h1><h6>標(biāo)簽可定義標(biāo)題。其中，<h1>定義最大的標(biāo)題，<h6>定義最小的標(biāo)題。由于<h>元素?fù)碛写_切的語義，因此在開發(fā)過程中需要選擇恰當(dāng)?shù)臉?biāo)簽層級構(gòu)建文檔的結(jié)構(gòu)。通常，<h1>用于最頂層的標(biāo)題；<h2>、<h3>和<h4>用于較低的層級；<h5>和<h6>由于文檔層級關(guān)系，使用頻率比較低。HTML的元素示例代碼：HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素HTML的段落元素<p>標(biāo)簽用于定義段落，瀏覽器會自動在其前后創(chuàng)建一些空白。段落的行數(shù)需要依賴瀏覽器窗口的大小。如果調(diào)節(jié)瀏覽器窗口的大小，將改變段落中的行數(shù)，而且如果段落元素的內(nèi)容中連續(xù)出現(xiàn)了很多空格，或者連續(xù)出現(xiàn)了一個(gè)以上的換行，瀏覽器都將解讀為一個(gè)空格。該標(biāo)簽支持全局標(biāo)準(zhǔn)屬性和全局事件屬性。HTML的元素示例代碼：HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素HTML的注釋元素<!--一>用于在HTML中插入注釋，它的開始標(biāo)簽為<!-，結(jié)束標(biāo)簽為一，開始標(biāo)簽和結(jié)束標(biāo)簽不一定在一行，也就是說，可以寫多行注釋。瀏覽器不會顯示注釋，但作為一個(gè)開發(fā)者，經(jīng)常要在一些代碼旁做一些注釋，這樣做的好處很多。HTML的元素HTML的格式化元素示例代碼：HTML的元素HTML的元素HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素HTML的圖片元素在HTML中，圖像是由<img>元素定義的，<img>元素是空元素標(biāo)簽，也就是說，為了更加嚴(yán)謹(jǐn)和可靠，在實(shí)際開發(fā)中，最好寫成<img/>。有很多情況，一張圖片可能勝過千言萬語，但是圖片過多或者過大，也可能造成用戶的等待，甚至造成用戶不知所云。所以，在編寫HTML文檔時(shí)，圖文并茂一定要合理。HTML的元素HTML的超鏈接元素超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁的一部分，它是一種允許我們同其他網(wǎng)頁或者站點(diǎn)之間進(jìn)行鏈接的元素。各個(gè)網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。超鏈接可以是一個(gè)字、一個(gè)詞或者一組詞，也可以是一幅圖像。將鼠標(biāo)指針移動到網(wǎng)頁中的某個(gè)超鏈接上時(shí)，鼠標(biāo)箭頭會變?yōu)橐恢恍∈帧？梢哉f，超鏈接是Web頁面和其他媒體的重要區(qū)別之一。HTML的元素這就需要<a>標(biāo)簽的target屬性進(jìn)行規(guī)定，它的默認(rèn)值為self，其他的值還有_blank、parent、top等，如下表所示。HTML的元素常見的超鏈接大致可以分為以下7種類型文本鏈接；錨點(diǎn)鏈接；圖像鏈接；圖像熱區(qū)鏈接；E-mail鏈接；JavaScript鏈接；空鏈接。HTML的元素HTML的列表元素通常人們會將相關(guān)信息用列表的形式放在一起，這樣會使內(nèi)容顯得更加有條理性。HTML提供了3種列表模式。HTML的元素?zé)o序列表無序列表的每一項(xiàng)前綴都顯示為圖形符號，用<ul>定義無序列表，用<li>定義列表項(xiàng)。有序列表有序列表的前綴通常為數(shù)字或者字母，用<ol>定義有序列表，用<li>定義列表項(xiàng)。定義列表定義列表是一種特殊的列表，它的內(nèi)容不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。HTML的元素HTML的表格元素表格用<table>標(biāo)簽定義。表格標(biāo)題用<caption>標(biāo)簽定義，每個(gè)表格均有若干行，用<tr>標(biāo)簽定義。每行被分割為若干單元格，用<td>標(biāo)簽定義，當(dāng)單元格是表頭時(shí)，一般用<th>標(biāo)簽定義。HTML的元素<table>標(biāo)簽常用屬性如下表所示。HTML的元素HTML的表單元素在實(shí)際使用中，經(jīng)常會遇到賬號注冊、賬號登錄、搜索、用戶調(diào)查等，大部分網(wǎng)站在這些問題上使用HTML表單與用戶進(jìn)行交互。表單元素允許用戶在表單中輸入內(nèi)容，如文本框、文本域、單選框、復(fù)選框、下拉列表、按鈕等，當(dāng)用戶信息填寫完畢后，進(jìn)行提交操作，然后表單可以將用戶在瀏覽時(shí)輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。HTML的元素<input>元素可以通過type的屬性值定義以下10種表單控件。HTML的元素HTML的框架元素前面講述了網(wǎng)頁布局，大部分網(wǎng)頁可以看作DIV+CSS布局方式，但是，有一小部分網(wǎng)頁不是這么做的，它們可能是table布局方式，也可能是框架集布局方式。table布局方式通篇用<table>元素完成，通常見于報(bào)告單等，使用較少。HTML的元素框架集布局用到了HTML框架集元素，框架集布局和普通布局最大的不同就是，框架集布局可以在同一個(gè)瀏覽器窗口顯示一個(gè)以上的頁面?？蚣芗季衷趯懛ㄉ?，首先是DTD的不同，需要用到框架集模式。HTML的元素示例代碼：HTML的元素運(yùn)行結(jié)果如下圖所示，圖中左側(cè)的淘寶網(wǎng)無法下拉，并且無法調(diào)整大小。HTML的元素示例代碼：HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素示例代碼：HTML的元素運(yùn)行結(jié)果如下圖所示。HTML的元素04HTML的預(yù)留字符在編程語言中有大量的保留字，這些保留字不能用作變量名或者過程名。同樣，在HTML中也存在大量的類似字符，稱作預(yù)留字符。在實(shí)際開發(fā)中，這些預(yù)留字符是不能使用的，因?yàn)闉g覽器可能會誤讀我們想要表達(dá)的內(nèi)容。HTML的預(yù)留字符常見的HTML需要轉(zhuǎn)義的字符可以查看下表。HTML的預(yù)留字符HTML還提供了大量的實(shí)體字符，用于輸入一些特殊符號，如下表所示。HTML的預(yù)留字符05本章小結(jié)本章主要介紹了HTML和XHTML的歷史，需要重點(diǎn)掌握HTML4的元素及其用法，并了解HTML的全局事件屬性，為學(xué)習(xí)CSS和JavaScript奠定基礎(chǔ)。本章小結(jié)感謝觀看CSS基礎(chǔ)第三章Web前端開發(fā)初級(上冊)學(xué)習(xí)路線CSS基礎(chǔ)01什么是CSSCSS，英文全稱是CascadingStyleSheets，中文名為級聯(lián)樣式單，也有人稱其為層疊樣式單。層疊就是樣式可以層層疊加，可以對一個(gè)元素多次設(shè)置樣式，后面定義的樣式會對前面定義的樣式進(jìn)行重寫，在瀏覽器中看到的效果是使用最后一次設(shè)置的樣式。什么是CSSCSS是一種表現(xiàn)語言，是對網(wǎng)頁結(jié)構(gòu)語言的補(bǔ)充。CSS主要用于網(wǎng)頁的風(fēng)格設(shè)計(jì)，包括字體、顏色、位置等方面的設(shè)計(jì)。在HTML網(wǎng)頁中加入CSS，可以使網(wǎng)頁展現(xiàn)更豐富的內(nèi)容。什么是CSS02CSS的歷史CSS1.0發(fā)布于1996年12月，這個(gè)版本提供了有關(guān)文字、顏色、位置和文本屬性等基本信息。發(fā)布于1998年5月，這個(gè)版本提供了比CSS1.0更強(qiáng)的XML和HTML文檔的格式化功能。CSS的歷史CSS2.0CSS2.1由于當(dāng)時(shí)瀏覽器支持性不太好，存在各種各樣的漏洞，使開發(fā)一個(gè)跨平臺且表現(xiàn)一致的網(wǎng)頁十分困難，故W3C于2007年發(fā)布了CSS2.1。是CSS2.0修訂的第一版，糾正了CSS2.0中的一些錯(cuò)誤，刪除和修改了一些屬性和行為，2011年6月成為標(biāo)準(zhǔn)。CSS的歷史03CSS樣式單的使用方法CSS樣式單可以增強(qiáng)HTML文檔的顯示效果。為了在HTML中使用CSS樣式單，通常有以下4種方式。CSS樣式單的使用方法導(dǎo)入外部樣式文件通過<style>元素使用@import導(dǎo)入，效果與引入外部樣式文件相同。使用內(nèi)聯(lián)樣式定義將CSS樣式單寫到元素的通用屬性style中，這種方式只對單個(gè)元素有效。引入外部樣式文件過<link>元素引入外部樣式文件，外部樣式文件通常是CSS后綴的文件。使用內(nèi)部樣式定義直接將CSS樣式單寫在<style>元素中作為元素的內(nèi)容。CSS樣式單的使用方法04CSS的兩個(gè)特性CSS的第一個(gè)特性是“層疊”，也就是說，一個(gè)HTML文檔可能會使用多種CSS樣式單，細(xì)化到某元素來說，會層疊多層樣式單，但生效的總會有一個(gè)順序。CSS的第二個(gè)特性是“繼承”，繼承指的是特定的CSS屬性可以從父元素向下傳遞到子元素。CSS的兩個(gè)特性繼承示例代碼：CSS的兩個(gè)特性運(yùn)行結(jié)果如下圖所示。CSS的兩個(gè)特性05CSS的基本語法CSS由兩部分組成：selector{propertyl：valuel；property2：value2；property3：value3；…}其中，selector被稱為選擇器，選擇器決定了樣式定義對哪些元素生效。property：value被稱為樣式，每一條樣式都決定了目標(biāo)元素將會發(fā)生的變化。CSS的基本語法（1）一般來說，一行定義一條樣式，每條聲明末尾都需要加上分號。（2）CSS對大小寫不敏感，但在實(shí)際編寫中，推薦屬性名和屬性值皆用小寫。CSS的基本語法06CSS的選擇器元素選擇器元素選擇器示例代碼：CSS的選擇器運(yùn)行結(jié)果如下圖所示。CSS的選擇器通配符選擇器通配符選擇器示例代碼：CSS的選擇器運(yùn)行結(jié)果如下圖所示。CSS的選擇器屬性選擇器對帶有指定屬性的HTML元素設(shè)置樣式。從廣義的角度來看，元素選擇器是屬性選擇器的特例，是一種忽視指定HTML元素的屬性選擇器。CSS的選擇器屬性選擇器的語法格式共有4種，如下表所示。CSS的選擇器派生選擇器/上下文選擇器后代選擇器派生選擇器依據(jù)元素在其位置的上下文關(guān)系定義樣式，在CSS1.0中，這種選擇器被稱為上下文選擇器，CSS2.0改名為派生選擇器。后代選擇器（DescendantSelector）可以選擇某元素后代的元素，后代選擇器中兩個(gè)元素之間的間隔可以是無限的。CSS的選擇器子元素選擇器子元素選擇器（ChildSelectors）只能選擇作為某元素子元素的元素。相鄰兄弟選擇器相鄰兄弟選擇器（AdjacentSiblingSelector）可以選擇緊接在另一元素后的元素，且二者有相同父元素。CSS的選擇器id選擇器id選擇器示例代碼：CSS的選擇器運(yùn)行結(jié)果如下圖所示。CSS的選擇器類選擇器類選擇器示例代碼：CSS的選擇器運(yùn)行結(jié)果如下圖所示。CSS的選擇器偽類選擇器在選取元素時(shí)，CSS除了可以根據(jù)元素名、id、class、屬性選取元素，還可以根據(jù)元素的特殊狀態(tài)選取元素，即偽類選擇器和偽元素選擇器。偽類是指那些處在特殊狀態(tài)的元素。偽類名可以單獨(dú)使用，泛指所有元素，也可以和元素名稱連起來使用，特指某類元素。偽類以冒號（：）開頭，元素選擇符和冒號之間不能有空格，偽類名中間也不能有空格。CSS的選擇器CSS中常用的偽類如下表所示。CSS的選擇器偽元素選擇器偽元素是指那些元素中特別的內(nèi)容，與偽類不同的是，偽元素表示的是元素內(nèi)部的東西。邏輯上存在，但在文檔樹中并不存在與之對應(yīng)關(guān)聯(lián)的部分。偽元素選擇器的格式與偽類選擇器一致。CSS的選擇器在CSS中常用的偽元素如下表所示。CSS的選擇器07CSS的屬性CSS背景屬性CSS允許為任何元素添加純色作為背景，也允許使用圖像作為背景，并且可以精準(zhǔn)地控制背景圖像，以達(dá)到精美的效果。CSS的屬性CSS背景屬性如下表所示。CSS的屬性CSS字體屬性HTML最核心的內(nèi)容還是以文本內(nèi)容為主，CSS也為HTML的文字設(shè)置了字體屬性，不僅可以更換不同的字體，還可以設(shè)置文字的風(fēng)格等。CSS的屬性CSS中常用字體屬性如下表所示。CSS的屬性CSS文本屬性我們經(jīng)常需要控制HTML網(wǎng)頁中文本的顏色、對齊方式、換行風(fēng)格等顯示效果，這些效果都是由CSS文本屬性控制的。CSS的屬性CSS中常用文本屬性如下表所示。CSS的屬性CSS尺寸屬性CSS可以控制每個(gè)元素的大小、包含寬度，以及最小寬度、最大寬度、高度、最小高度、最大高度。CSS的屬性CSS尺寸屬性如下表所示。CSS的屬性CSS列表屬性CSS列表屬性用于改變列表項(xiàng)標(biāo)記，甚至用圖像作為列表項(xiàng)的標(biāo)記。CSS的屬性CSS列表屬性如下表所示。CSS的屬性CSS表格屬性CSS表格屬性用于改變表格的外觀。CSS表格屬性如下表所示。CSS的屬性CSS內(nèi)容屬性示例代碼：CSS的屬性運(yùn)行結(jié)果如下圖所示。CSS的屬性08CSS盒模型CSS盒模型，又稱框模型（BoxModel），包含元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）幾個(gè)要素，如下圖所示。CSS盒模型CSS內(nèi)邊距屬性元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。CSS內(nèi)邊距常用屬性如下表所示。CSS盒模型控制該區(qū)域最簡單的屬性是padding，按照上右下左的順序定義，也可以省略方式定義；還可以通過padding-top、padding-bottom、padding-left、padding-right精準(zhǔn)控制內(nèi)邊距。其屬性值可以是auto（自動）長度（不允許使用負(fù)數(shù)）、百分比（相對于父元素寬度的比例）。CSS盒模型CSS值復(fù)制在設(shè)置邊距時(shí)，我們通常會按照上右下左的順序依次輸入，具體如下：padding：10px10px10px10px；其可以簡寫成如下形式：padding：10px；CSS盒模型CSS外邊距屬性CSS外邊距常用屬性如下表所示。CSS盒模型控制該區(qū)域最簡單的屬性是margin，也可以通過margin-top、margin-bottom、margin-left、margin-right精準(zhǔn)控制外邊距。其屬性值可以是auto（自動）、長度（不允許使用負(fù)數(shù)）、百分比（相對于父元素高度的比例）、inherit。CSS盒模型CSS邊框?qū)傩訡SS邊框?qū)傩匀缦卤硭尽SS盒模型CSS盒模型CSS輪廓屬性輪廓不會占用頁面實(shí)際的物理布局。CSS輪廓屬性如下表所示。CSS盒模型09布局屬性CSS浮動屬性浮動，可以使元素脫離普通文檔流，CSS定義浮動可以使塊級元素向左或者向右浮動，直到遇到邊框、內(nèi)邊距、外邊距或者另一個(gè)塊級元素位置。布局屬性浮動涉及的常用屬性如下表所示。布局屬性CSS定位屬性CSS定位常用屬性如下表所示。布局屬性10本章小結(jié)本章簡單介紹了CSS的歷史，需要重點(diǎn)掌握Css的選擇器。包括元素選擇器、通配符選擇器、屬性選擇器、派生選擇器、id選擇器、類選擇器、偽類選擇器和偽元素選擇器。本章小結(jié)同時(shí)需要重點(diǎn)掌握CSs的屬性，包括背景、字體、文本、尺寸、列表、表格等，還需要重點(diǎn)掌握HTML的盒模型和布局方面的一些屬性。本章涉及的知識點(diǎn)較多，需要將CSS屬性勤加練習(xí)，爛熟于心，并且掌握選擇器的用法。本章小結(jié)感謝觀看JavaScript語法基礎(chǔ)第四章Web前端開發(fā)初級(上冊)學(xué)習(xí)路線JavaScript語法基礎(chǔ)01JavaScript的歷史JavaScript的誕生JavaScript誕生于1995年。起初它的主要目的是處理以前由服務(wù)器端負(fù)責(zé)的一些表單驗(yàn)證。在那個(gè)絕大多數(shù)用戶都在使用調(diào)制解調(diào)器上網(wǎng)的時(shí)代，用戶填寫完一個(gè)表單單擊提交，需要等待幾十秒，之后服務(wù)器反饋的信息是某個(gè)地方填錯(cuò)了。JavaScript的歷史在當(dāng)時(shí)如果能在客戶端完成一些基本的驗(yàn)證絕對是令人興奮的。當(dāng)時(shí)走在技術(shù)革新最前沿的Netscape（網(wǎng)景），決定著手開發(fā)一種客戶端語言，用于處理這種簡單的驗(yàn)證。當(dāng)時(shí)就職于Netscape的BrendanEich開始著手研究，并計(jì)劃將1995年2月發(fā)布的LiveScript同時(shí)在瀏覽器和服務(wù)器中使用。JavaScript的歷史ECMAScript的版本ECMAScript的不同版本又稱為版次，ECMA-262第5版發(fā)布于2009年。ECMA-262第6版增添了許多必要特性（如模塊、類）和一些實(shí)用特性（如Maps、Sets、Promises、Generators等）。JavaScript的歷史盡管第6版做了大量的更新，但是它依舊完全向后兼容以前的版本。由于瀏覽器兼容性問題，本書后續(xù)內(nèi)容在第5版的基礎(chǔ)上配合部分實(shí)例進(jìn)行講解。ECMA-262的第1版實(shí)質(zhì)上與Netseape的JavaSeript1.1相同，只是做了一些小改動：支持Unicode標(biāo)準(zhǔn)，對象與平臺無關(guān)。JavaScript的歷史02JavaScript的基礎(chǔ)知識JavaScript的特點(diǎn)JavaScript，是一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，是瀏覽器的一部分，廣泛用于客戶端的腳本語言中，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用的，用于為HTML網(wǎng)頁增加動態(tài)功能。JavaScript的基礎(chǔ)知識目前，JavaScript被廣泛用于Web應(yīng)用開發(fā)，常用于為網(wǎng)頁添加各式各樣的動態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中實(shí)現(xiàn)自身的功能的。JavaScript的基礎(chǔ)知識JavaScript的語法熟悉Java、C和Perl這些語言的開發(fā)者會發(fā)現(xiàn)JavaScript的語法很容易掌握，因?yàn)樗栌昧诉@些語言的語法。Java和JavaScript有一些關(guān)鍵的語法特性相同，也有一些完全不同。JavaScript的基礎(chǔ)知識變量的聲明原則要求前面加上var聲明，表示是全局變量，而在方法或者循環(huán)等代碼段中聲明則不需要加上var。但不少瀏覽器對是否加var并不敏感，也不會報(bào)錯(cuò)，所以開發(fā)者應(yīng)盡量遵循規(guī)范，全局變量加上var，以便增加代碼的可讀性。JavaScript的基礎(chǔ)知識JavaScript的關(guān)鍵字每一門語言都會有關(guān)鍵字，JavaScript也不例外。關(guān)鍵字是指可用于表示控制語句的開始和結(jié)束，或者用于執(zhí)行特定操作等。根據(jù)規(guī)定，關(guān)鍵字是保留的，不能用作變量名或者函數(shù)名。如果把關(guān)鍵字用作變量名或者函數(shù)名，可能會得到諸如"IdentifierExpected"（應(yīng)該有標(biāo)識符、期望標(biāo)識符）這樣的錯(cuò)誤消息。JavaScript的基礎(chǔ)知識JavaScript關(guān)鍵字的完整列表如下表所示。JavaScript的基礎(chǔ)知識JavaScript的變量為變量賦值時(shí)，JavaScript的解釋程序必須判斷該值是原始類型還是引用類型。要實(shí)現(xiàn)這一點(diǎn)，解釋程序需要嘗試判斷該值是否為JavaSeript的原始類型之一，即Undefined、Null、Boolean、Number和String型。JavaScript的基礎(chǔ)知識由于這些原始類型占據(jù)的空間是固定的，因此可將它們存儲在較小的內(nèi)存區(qū)域（棧）中。這樣存儲便于迅速查尋變量的值。在許多語言中，字符串都被看作引用類型，而非原始類型，因?yàn)樽址拈L度是可變的。JavaScript打破了這一傳統(tǒng)。JavaScript的基礎(chǔ)知識數(shù)據(jù)類型在JavaScript中，數(shù)據(jù)類型表示數(shù)據(jù)的類型，JavaScript語言的每一個(gè)值都屬于某一種數(shù)據(jù)類型。JavaScript的數(shù)據(jù)主要分為以下兩類。值類型（原始值）；引用數(shù)據(jù)類型（引用值）。JavaScript的基礎(chǔ)知識值類型（原始值）：字符串（String）、數(shù)字（Number）、布爾（Boolean）、對空（Null）、未定義（Undefined）、Symbol（ES6引入了一種新的原始數(shù)據(jù)類型，表示獨(dú)一無二的值）。引用數(shù)據(jù)類型（引用值）：對象（Object）、數(shù)組（Array）、函數(shù)（Function）。JavaScript的基礎(chǔ)知識運(yùn)算符JavaScript運(yùn)算符用于賦值、比較值、執(zhí)行算術(shù)運(yùn)算等。運(yùn)算符包括賦值運(yùn)算符、算數(shù)運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、一元運(yùn)算符、二元運(yùn)算符和三元運(yùn)算符，此外，運(yùn)箅符之間還存在優(yōu)先級的先后情況。JavaScript的基礎(chǔ)知識03分支循環(huán)if條件語句if條件語句表示假如的意思，在程序運(yùn)行中提供判斷的功能，if中可以有多個(gè)表達(dá)式，但所有表達(dá)式最后必須提供一個(gè)統(tǒng)一的true或者false。if（true）則可以進(jìn)入對應(yīng)的代碼塊運(yùn)行，否則會跳到下一個(gè)代碼塊中運(yùn)行。分支循環(huán)其語法格式如下：分支循環(huán)switch選擇語句switch選擇語句表示多條件選擇，符合哪個(gè)case的值就執(zhí)行哪個(gè)case中的代碼塊，需要注意的是。在一般情況下，case代碼塊中必須有break結(jié)尾，否則會繼續(xù)執(zhí)行后面case中的代碼塊。分支循環(huán)其語法格式如下：分支循環(huán)for循環(huán)for循環(huán)的應(yīng)用場景如下：如果需要一遍又一遍地運(yùn)行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的。分支循環(huán)forin遍歷其語法格式如下：分支循環(huán)輸出結(jié)果如下圖所示。分支循環(huán)while循環(huán)while（表達(dá)式），只要表達(dá)式為真，即可進(jìn)入循環(huán)，while（true）是著名的死循環(huán)。其語法格式如下：分支循環(huán)輸出結(jié)果如下圖所示。分支循環(huán)do-while循環(huán)do-while（表達(dá)式）和while循環(huán)大同小異，只是語法格式稍有不同，這里不做詳細(xì)的案例介紹。其語法格式如下：分支循環(huán)04數(shù)組JavaScript中數(shù)組包含的屬性和方法如下表所示。數(shù)組數(shù)組數(shù)組定義要使用一個(gè)數(shù)組，就需要先定義一個(gè)數(shù)組。在JavaScript中定義一個(gè)數(shù)組有以下幾種方法。方法1：使用new關(guān)鍵字創(chuàng)建一個(gè)Array對象，可直接在內(nèi)存中創(chuàng)建一個(gè)數(shù)組空間，然后向數(shù)組中添加元素。數(shù)組方法2：使用new關(guān)鍵字創(chuàng)建一個(gè)Array對象的同時(shí)為數(shù)組賦予n個(gè)初始值。方法3：不用new，直接用|聲明一個(gè)數(shù)組，同時(shí)可以直接賦予初始值，是最簡便的一種聲明方式數(shù)組數(shù)組操作JavaScript中提供了很多數(shù)組操作，比較常用的有添加和刪除元素、遍歷數(shù)組、刪除元素、插入元素、合并數(shù)組、數(shù)組轉(zhuǎn)字符串、數(shù)組元素倒序、對數(shù)組元素進(jìn)行排序等。數(shù)組二維數(shù)組如果一個(gè)數(shù)組中的元素本身也是一個(gè)數(shù)組，那么這種嵌套結(jié)構(gòu)其實(shí)可以構(gòu)造出n維數(shù)組，n維數(shù)組可以存儲帶嵌套結(jié)構(gòu)的數(shù)據(jù)，下面以二維數(shù)組為例進(jìn)行介紹。在下面的實(shí)例中，我們先定義了一個(gè)空數(shù)組，然后通過for循環(huán)為數(shù)組中每一個(gè)元素同樣賦值為數(shù)組，在每一層循環(huán)中再嵌套for循環(huán)通過調(diào)用數(shù)組的push方法為里層的數(shù)組賦值，從而形成一個(gè)元素本身也是數(shù)組的二維數(shù)組。數(shù)組輸出結(jié)果如下圖所示。數(shù)組05字符串操作字符串對象屬性，詳見下表。字符串操作字符串對象方法，詳見下表。字符串操作字符串操作字符串連接加法操作：直接用+進(jìn)行字符串連接。concat函數(shù)：語法為字符串.concat（字符串1，字符串2，），concatl函數(shù)可以有多個(gè)參數(shù)，傳遞多個(gè)字符串，拼接多個(gè)字符串。字符串操作01字符串搜索indexOf（）語法為字符串.indexOf（搜索詞，起始索引位置）/第2個(gè)參數(shù)不寫則默認(rèn)從0開始搜索。03match（）語法為字符串.match（搜索詞）或者字符串.match（正則表達(dá)式）。02search（）語法為字符串.search（搜索詞）或者字符串.search（正則表達(dá)式）。字符串操作字符串截取JavaScript為字符串提供了3種字符串截取的方法：substring()、slice（）和substr（）。substring（），語法為字符串.substring（截取開始位置，截取結(jié)束位置）。字符串操作substring（是最常用的字符串截取方法，它可以接收兩個(gè)參數(shù)（參數(shù)不能為負(fù)值），分別是截取開始位置和截取結(jié)束位置。它將返回一個(gè)新的字符串，其內(nèi)容是從截取開始位置處到截取結(jié)束位置-1處的所有字符。字符串操作字符串替換在JavaScript中，字符串的替換很常用，即字符串的replace（），語法為字符串.replace（正則表達(dá)式/要被替換的字符串，要替換成為的子字符串）。replace（）用于進(jìn)行字符串替換操作，它可以接收兩個(gè)參數(shù)：前者為要被替換的子字符串（可以是正則），后者為要替換成為的子字符串。字符串操作如果第一個(gè)參數(shù)傳入的是子字符串或是沒有進(jìn)行全局匹配的正則表達(dá)式，那么replace（將只進(jìn)行一次替換（即替換最前面的），返回經(jīng)過一次替換后的結(jié)果字符串。在下面的實(shí)例中，我們通過調(diào)用字符串str的replace（分別將第一個(gè)小寫的a替換成大寫的A，以及將正則為/a/替換成大寫的A。字符串操作字符串切割在JavaScript中，切割字符串同樣是用splitQ，split（用于將一個(gè)字符串分割成字符串?dāng)?shù)組。語法為字符串.split（用于分割的子字符串，返回?cái)?shù)組的最大長度）。字符串操作其中，返回?cái)?shù)組的最大長度一般情況下不設(shè)置。在下面的實(shí)例中，我們通過調(diào)用字符串str的split方法分別按照符號|切割、按照符號|切割三次及按照空格切割。字符串操作06正則表達(dá)式正則表達(dá)式是由一個(gè)字符序列形成的搜索模式。在文本中搜索數(shù)據(jù)時(shí)，可以用搜索模式描述要查詢的內(nèi)容。正則表達(dá)式可以是一個(gè)簡單的字符，也可以是一個(gè)更復(fù)雜的模式。正則表達(dá)式可用于所有文本搜索、文本替換、文本提取等操作。正則表達(dá)式正則表達(dá)式的組成正則表達(dá)式是由普通字符（如字符a~z）及特殊字符（稱為元字符）組成的文字模式。正則表達(dá)式作為一個(gè)模板，將某個(gè)字符模式與所搜索的字符串進(jìn)行匹配。正則表達(dá)式=普通字符+特殊字符（元字符）。正則表達(dá)式包含匹配符、限定符、定位符、轉(zhuǎn)義符等。正則表達(dá)式正則表達(dá)式所用的方法字符串方法，如下表所示。正則表達(dá)式正則對象（regExp）方法，如下表所示。正則表達(dá)式07對象Object（對象）是一個(gè)以鍵值對形式存儲屬性的集合，每個(gè)屬性有一個(gè)特定的名稱，以及與名稱相對應(yīng)的值。其實(shí)這種關(guān)系是有一個(gè)專有名稱的，可稱為映射。對對象來說，除了可以通過這種方式保持自有屬性，還可以通過繼承的方式獲取繼承屬性，這種方式可稱為“原型式繼承”。對象對象的聲明在JavaScript中，聲明一個(gè)對象有兩種方法，分別通過賦值newObject（）和{}實(shí)現(xiàn)。newObject（）：聲明一個(gè)類，然后使用new關(guān)鍵字創(chuàng)建一個(gè)擁有獨(dú)立內(nèi)存區(qū)域和指向原型的指針的對象。對象歡迎詞的種類歡迎詞的結(jié)構(gòu)歡迎詞的種類較多，按其性質(zhì)與內(nèi)容一般可以分為三大類。在此處添加內(nèi)容在此次添加內(nèi)容在此處添加內(nèi)容在此次添加內(nèi)容對象{}：對象直接申明法，利用現(xiàn)有值，直接實(shí)例化一個(gè)對象。在下面的實(shí)例中，變量userl直接通過{屬性名：屬性值，}聲明為一個(gè)對象，也可以通過Object.create（{屬性名：屬性值，}）聲明對象user2。對象對象的屬性既然是對象，里面就可以包含屬性，屬性又分為屬性名和屬性值。在JavaScript中，對象可以動態(tài)地操作屬性，還可以添加、刪除、檢測屬性。對象添加屬性：為已存在的對象添加屬性?？梢圆捎脤ο髮傩悦蛯ο骩”屬性名”]的方式添加屬性。刪除屬性：可以添加屬性，當(dāng)然也可以刪除屬性。在下面的實(shí)例中，我們先用{}聲明一個(gè)空的對象user，再為user添加id、name、age和career4個(gè)屬性。對象對象的方法對象中除了有屬性，也可以有方法，對象中的方法和屬性一樣，可以動態(tài)地添加和動態(tài)地刪除。但方法只能通過對象.方法名創(chuàng)建。在下面的實(shí)例中，我們先用{}聲明了一個(gè)空的對象user，然后為user添加了id、name、age、eareer和courses5個(gè)屬性。對象之后又定義了chooseCourse方法，該方法旨在為courses中的數(shù)組添加元素，后面通過該方法為user對象的courses的數(shù)組添加了數(shù)據(jù)結(jié)構(gòu)、高等數(shù)學(xué)和Java3個(gè)元素。對象對象的遍歷JavaScript中還提供了對象的遍歷方法，可以用for…in方式遍歷出對象的鍵，然后用鍵訪問對象的全部屬性和方法。在下面的實(shí)例中，我們先用{聲明了一個(gè)空的對象user，然后為user添加了id、name、age、career和courses5個(gè)屬性。對象之后又定義了chooseCourse方法，該方法為user對象的courses中的數(shù)組添加了數(shù)據(jù)結(jié)構(gòu)、高等數(shù)學(xué)和Java3個(gè)元素。最后通過for.in遍歷user對象獲取對象元素的屬性名，然后通過對象[屬性名]讀取屬性值。對象運(yùn)行結(jié)果如下圖所示。對象08函數(shù)函數(shù)是一組延遲動作集的定義，可以通過事件觸發(fā)或者在其他腳本中進(jìn)行調(diào)用。在JavaScript中，通過函數(shù)對腳本進(jìn)行有效的組織，腳本可以更加結(jié)構(gòu)化、模塊化，同時(shí)更易于理解和維護(hù)。函數(shù)函數(shù)是事件驅(qū)動、可重復(fù)使用的代碼塊，它是用來幫助封裝、調(diào)用代碼的工具。函數(shù)由函數(shù)名、參數(shù)、函數(shù)體、返回值4部分組成。其中，參數(shù)可有可無，返回值也可有可無，可以根據(jù)需要選用。函數(shù)函數(shù)的聲明函數(shù)在使用之前需要進(jìn)行聲明。函數(shù)有以下3種聲明方式：通過函數(shù)名聲明，在程序調(diào)用時(shí)才能執(zhí)行。通過將匿名函數(shù)賦值給變量，調(diào)用時(shí)可以扶行；通過new的方式來聲明，不需要調(diào)用，直接執(zhí)行，此種方式不常用。函數(shù)函數(shù)的返回值函數(shù)執(zhí)行完畢后可以有返回值也可以沒有返回值，有返回值時(shí)可以返回一個(gè)值，也可以返回一個(gè)數(shù)組，還可以返回一個(gè)對象等。在下面的實(shí)例中，函數(shù)funl返回一個(gè)值，函數(shù)fun2返回?cái)?shù)組，函數(shù)fun3返回對象，分別展示返回各種結(jié)果的類型。函數(shù)函數(shù)的調(diào)用函數(shù)的調(diào)用有傳值調(diào)用、傳址調(diào)用、傳函數(shù)調(diào)用等方式。傳值調(diào)用，顧名思義就是將參數(shù)的值傳遞給函數(shù)，而函數(shù)在進(jìn)行調(diào)用時(shí)會復(fù)制這個(gè)值，然后將復(fù)制的值在函數(shù)中進(jìn)行運(yùn)算。函數(shù)如果這個(gè)被復(fù)制的值在函數(shù)體內(nèi)發(fā)生了改變，不會影響原值，傳值調(diào)用所傳入的參數(shù)均為簡單類型，包括數(shù)字、字符串、布爾型變量、字符等；傳址調(diào)用。就是將參數(shù)的內(nèi)存地址傳給函數(shù)進(jìn)行調(diào)用，當(dāng)此參數(shù)在函數(shù)體內(nèi)被改變，原值也會發(fā)生改變，傳址調(diào)用所轉(zhuǎn)入的參數(shù)必須是復(fù)合類型，包括數(shù)組、對象等；傳函數(shù)調(diào)用，是函數(shù)既可以作為返回值返回，也可以作為一個(gè)參數(shù)傳入另一個(gè)函數(shù)中。函數(shù)閉包函數(shù)閉包函數(shù)是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因此這些變量也是該表達(dá)式的一部分。閉包函數(shù)的特點(diǎn)如下。作為一個(gè)函數(shù)變量的一個(gè)引用，當(dāng)函數(shù)返回時(shí)，其處于激活狀態(tài)。一個(gè)閉包就是當(dāng)一個(gè)函數(shù)返回時(shí)，一個(gè)沒有釋放資源的棧區(qū)。函數(shù)簡單來說，JavaScript允許使用內(nèi)部函數(shù)，也就是函數(shù)定義和函數(shù)表達(dá)式位于另一個(gè)函數(shù)的函數(shù)體內(nèi)，而且這些內(nèi)部函數(shù)可以訪問它們所在的外部函數(shù)中聲明的所有局部變量、參數(shù)和其他內(nèi)部函數(shù)。當(dāng)其中一個(gè)這樣的內(nèi)部函數(shù)在包含它們的外部函數(shù)之外被調(diào)用時(shí)，就會形成閉包。函數(shù)內(nèi)置函數(shù)JS內(nèi)置函數(shù)包括字符串函數(shù)、數(shù)組函數(shù)、數(shù)學(xué)函數(shù)和日期函數(shù)4個(gè)部分，字符串函數(shù)和數(shù)組函數(shù)在前面已有介紹，本節(jié)介紹數(shù)學(xué)函數(shù)、日期函數(shù)和定時(shí)器函數(shù)。函數(shù)09本章小結(jié)本章主要介紹了JavaScript的語言歷史和相關(guān)知識，包括JavaScript的變量、數(shù)據(jù)類型，并全面介紹了各種運(yùn)算符，還介紹了JavaScript的流程控制語句，最后重點(diǎn)介紹了對象和函數(shù)。以上內(nèi)容都是JavaScript的語言基礎(chǔ)，只有掌握這些知識，才能更好地學(xué)習(xí)HTML。本章小結(jié)感謝觀看JavaScript對象模型第五章Web前端開發(fā)初級(上冊)學(xué)習(xí)路線JavaScript對象模型01BOM對象BOM對象也稱為內(nèi)置對象（BrowserObjectMode），是瀏覽器對象模型，也是JavaScript的重要組成部分。它提供了一系列對象用于與瀏覽器窗口進(jìn)行交互，這些對象通常統(tǒng)稱為BOM對象。BOM對象BOM對象如下圖所示。BOM對象JavaScript的誕生window對象表示瀏覽器窗口，所有瀏覽器都支持window對象，所有JavaScript全局對象、函數(shù)及變量均自動成為window對象的成員。其中全局變量是window對象的屬性，全局函數(shù)是window對象的方法。BOM對象document對象每個(gè)載入瀏覽器的HTML文檔都會成為document對象，document對象是window對象的一部分?？梢酝ㄟ^window.document屬性對其進(jìn)行訪問，此對象可以從腳本中對HTML頁面中的所有元素進(jìn)行訪問。BOM對象document中包含很多屬性和方法，常用的屬性和方法如下表所示。BOM對象location對象location對象包含有關(guān)當(dāng)前URL的信息，location對象是window對象的一個(gè)部分，可以通過window.location屬性訪問，location常用的屬性和方法如下表所示。BOM對象navigator對象navigator對象包含有關(guān)瀏覽器的信息，所有瀏覽器都支持該對象。navigator對象常用的屬性如下表所示。BOM對象screen對象每個(gè)window對象的screen屬性都引用一個(gè)screen對象。screen對象中存放有關(guān)顯示瀏覽器屏幕的信息。BOM對象JavaScript程序?qū)⒗眠@些信息優(yōu)化它們的輸出，以達(dá)到用戶的顯示要求。例如，一個(gè)程序可以根據(jù)顯示器的尺寸選擇使用大圖像還是小圖像，它還可以根據(jù)顯示器的顏色深度選擇使用16位色還是8位色的圖形。BOM對象另外，JavaScript程序還能根據(jù)有關(guān)屏幕尺寸的信息將新的瀏覽器窗口定位在屏幕中間。它提供了一系列對象用于與瀏覽器窗口進(jìn)行交互，這些對象通常統(tǒng)稱為BOM對象。BOM對象screen對象的屬性如下表所示。BOM對象history對象history對象包含用戶（在瀏覽器窗口中）訪問過的URL。history對象是window對象的一部分，可以通過window.history屬性對其進(jìn)行訪問，所有瀏覽器都支持該對象。BOM對象history對象的屬性和方法如下表所示。BOM對象02BOM操作5.1節(jié)對BOM對象進(jìn)行了介紹，同時(shí)闡述了相關(guān)對象的屬性及方法，本節(jié)將運(yùn)用實(shí)例對上述對象的常用操作進(jìn)行介紹。window對象獲得寬和高。在下面的實(shí)例中，w和h分別為獲取窗口的寬和高，然后通過彈框的形式，顯示窗口的寬和高。根據(jù)不同的瀏覽器可以選擇不同的獲取寬和高的方法。BOM操作示例代碼：BOM操作執(zhí)行結(jié)果如下圖所示。BOM操作document對象設(shè)置背景色和前景色在下面的實(shí)例中，通過document對象的bgColor設(shè)置網(wǎng)頁背景色為綠色；通過document對象的fgColor設(shè)置網(wǎng)頁前景色為藍(lán)色，也就是頁面中文本的顏色為藍(lán)色。BOM操作示例代碼：BOM操作執(zhí)行結(jié)果如下圖所示。BOM操作location對象獲取當(dāng)前頁面的URL鏈接和端口在下面的實(shí)例中，通過location對象的href和port屬性獲得當(dāng)前頁面的URL鏈接與當(dāng)前頁面訪問的端口，頁面加載完之后通過彈框的形式顯示出來。BOM操作示例代碼：BOM操作執(zhí)行結(jié)果如下圖所示。BOM操作navigator對象獲取瀏覽器名稱、平臺版本信息、是否啟用cookie狀態(tài)、操作系統(tǒng)平臺等在下面的實(shí)例中，分別通過document.write0方法將瀏覽器的名稱、平臺版本信息、瀏覽器是否啟用cookie的狀態(tài)及瀏覽器的操作系統(tǒng)平臺展示在窗口頁面。BOM操作示例代碼：BOM操作執(zhí)行結(jié)果如下圖所示。BOM操作screen對象獲取瀏覽器顯示屏幕的寬和高，以及顯示器屏幕的寬和高在下面的實(shí)例中，頁面加載完畢，通過document.write（將瀏覽器顯示屏幕的寬和高以及顯示器屏幕的寬和高顯示在頁面中，可以看到瀏覽器屏幕高度和顯示器高度相差一個(gè)Windows任務(wù)欄的高度。BOM操作示例代碼：BOM操作執(zhí)行結(jié)果如下圖所示。BOM操作history對象獲取網(wǎng)頁鏈接的長度。在下面的實(shí)例中，通過彈框的形式將網(wǎng)頁訪問過的網(wǎng)頁鏈接的長度顯示出來。示例代碼：BOM操作03BOM對象當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會創(chuàng)建頁面的文檔對象模型（DocumentObjeetModel）。文檔對象模型屬于BOM的一部分，用于對BOM中的核心對象document進(jìn)行操作。BOM對象HTMLDOM模型被構(gòu)造為對象的樹。對HTML，DOM使HTML形成一棵DOM樹，類似于一棵家族樹，一層接一層，子子孫孫。為了能夠使JavaScript操作HTML，JavaScript就有了一套自己的DOM編程接口。BOM對象HTMLDOM樹圖如下圖所示。BOM對象通過可編程的對象模型DOM，JavaScript獲得了足夠的能力創(chuàng)建動態(tài)的HTML。具體來說，JavaScript能夠改變頁面中的所有HTML元素、HTML屬性、CSS樣式，并且能夠?qū)撁嬷械乃惺录龀龇磻?yīng)。BOM對象04DOM操作5.3節(jié)介紹了HTML形成的DOM樹，本節(jié)將通過JS的DOM編程接口操作DOM樹。DOM操作主要包括獲取節(jié)點(diǎn)、獲取/設(shè)置元素的屬性值、創(chuàng)建/增添節(jié)點(diǎn)、刪除節(jié)點(diǎn)、屬性操作等。DOM操作獲取節(jié)點(diǎn)DOM樹是由許多HTML標(biāo)簽元素構(gòu)成的，這些標(biāo)簽元素就是樹上的節(jié)點(diǎn)，要對節(jié)點(diǎn)操作首先需要獲得節(jié)點(diǎn)，獲取節(jié)點(diǎn)的方法主要有以下幾種。標(biāo)簽id獲??；標(biāo)簽name屬性獲?。粯?biāo)簽名稱獲取。DOM操作根據(jù)標(biāo)簽獲取的結(jié)果是偽數(shù)組形式，偽數(shù)組是不具備數(shù)組的方法。根據(jù)標(biāo)簽名獲取元素時(shí)，有可能獲取到的標(biāo)簽只有一個(gè)，但是形式還是偽數(shù)組。由于獲取結(jié)果可能是多個(gè)，因此Element后面要加s。要操作偽數(shù)組中的所有元素需要遍歷偽數(shù)組。DOM操作獲取/設(shè)置元素的屬性值對獲取的節(jié)點(diǎn)，我們可以得到節(jié)點(diǎn)的屬性值。也可以設(shè)置節(jié)點(diǎn)的屬性值，還可以通過getAttribute（）和setAttribute（）實(shí)現(xiàn)。DOM操作其具體的語法格式如下：DOM操作示例代碼：DOM操作DOM操作執(zhí)行結(jié)果如下圖所示。DOM操作創(chuàng)建/增添節(jié)點(diǎn)在DOM操作中，常常需要在HTML頁面中動態(tài)地追加一些HTML元素。這就需要創(chuàng)建節(jié)點(diǎn)，然后追加節(jié)點(diǎn)。DOM操作示例代碼：DOM操作DOM操作執(zhí)行結(jié)果如下圖所示。DOM操作刪除節(jié)點(diǎn)對節(jié)點(diǎn)的操作，可以進(jìn)行增加，那么也可以將節(jié)點(diǎn)進(jìn)行動態(tài)刪除，下面介紹刪除節(jié)點(diǎn)的方法。//刪除當(dāng)前節(jié)點(diǎn)下指定的子節(jié)點(diǎn)，刪隙成功返回該被刪除的節(jié)點(diǎn)，否則返回nul1element.removeChild（Node）DOM操作屬性操作DOM操作中的標(biāo)簽屬性操作有很多方法，下面介紹一些常用的方法。獲取當(dāng)前元素的父節(jié)點(diǎn)；獲取當(dāng)前元素的子節(jié)點(diǎn)；獲取當(dāng)前元素的同級元素；獲取當(dāng)前元素的文本；獲取當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)類型。DOM操作05本章小結(jié)本章介紹了JavaScript的內(nèi)置對象，包括window對象、document對象、location對象、navigator對象、screen對象、history對象。這些都是Web前端必須了解的為瀏覽器提供服務(wù)的內(nèi)置對象，能幫助開發(fā)者獲取客戶端瀏覽器的信息，為開發(fā)提供數(shù)據(jù)支撐。本章小結(jié)另外，本章還介紹了JavaScript的DOM操作，包括獲取節(jié)點(diǎn)、獲取/設(shè)置元素的屬性值、創(chuàng)建/增添節(jié)點(diǎn)、刪除節(jié)點(diǎn)、屬性操作等。學(xué)習(xí)本章可以掌握在Web頁面上動態(tài)地增減節(jié)點(diǎn)并為節(jié)點(diǎn)動態(tài)設(shè)置相關(guān)屬性，使開發(fā)者可以更加靈活地操作頁面元素。本章小結(jié)感謝觀看JavaScript事件處理第六章Web前端開發(fā)初級(上冊)學(xué)習(xí)路線JavaScript事件處理01事件介紹JS事件指在瀏覽器窗體或者HTML元素上發(fā)生的，可以觸發(fā)JS代碼塊運(yùn)行的行為。例如，當(dāng)瀏覽器中所有HTML加載完成時(shí)，可以觸發(fā)頁面加載完成事件：input字段發(fā)生改變，可以觸發(fā)字段改變事件；HTML按鈕被單擊時(shí)，可以觸發(fā)按鈕單擊事件；等等。事件介紹常用的事件類型包括窗口事件、鼠標(biāo)事件、鍵盤事件、文本事件等。常用的事件方法如下表所示。事件介紹事件介紹02窗口事件窗口事件是