響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5 CSS3 Bootstrap）（第3版） 課件 第4章 JavaScript與視頻、音頻_第1頁
響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5 CSS3 Bootstrap）（第3版） 課件 第4章 JavaScript與視頻、音頻_第2頁
響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5 CSS3 Bootstrap）（第3版） 課件 第4章 JavaScript與視頻、音頻_第3頁
響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5 CSS3 Bootstrap）（第3版） 課件 第4章 JavaScript與視頻、音頻_第4頁
響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5 CSS3 Bootstrap）（第3版） 課件 第4章 JavaScript與視頻、音頻_第5頁
已閱讀5頁，還剩135頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第4章JavaScript與視頻、音頻《響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）（第3版）》學(xué)習(xí)目標(biāo)/Target熟悉JavaScript概述，能夠歸納JavaScript的組成部分和特點(diǎn)熟悉JavaScript的引入方式，能夠歸納JavaScript的3種引入方式掌握J(rèn)avaScript常用的輸入和輸出語句，能夠靈活運(yùn)用prompt()、document.write()、

alert()、console.log()語句

熟悉JavaScript注釋，能夠歸納單行注釋和多行注釋的特點(diǎn)和快捷鍵掌握變量的使用方法，能夠聲明變量和為變量賦值學(xué)習(xí)目標(biāo)/Target熟悉數(shù)據(jù)類型，能夠解釋5種常用基本數(shù)據(jù)類型的含義掌握運(yùn)算符的使用方法，能夠靈活使用運(yùn)算符完成運(yùn)算掌握函數(shù)，能夠根據(jù)實(shí)際需求在程序中定義并調(diào)用函數(shù)掌握分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)的使用方法，能夠根據(jù)實(shí)際需求進(jìn)行選擇和使用熟悉DOM，能夠歸納DOM的樹形結(jié)構(gòu)和節(jié)點(diǎn)類型學(xué)習(xí)目標(biāo)/Target掌握獲取元素的常用方法，能夠使用document對(duì)象提供的方法獲取元素掌握操作元素的方法，能夠操作元素的內(nèi)容和樣式熟悉事件，能夠歸納常用事件類型掌握注冊(cè)事件的使用方法，能夠完成事件的注冊(cè)掌握Math對(duì)象的使用方法，能夠?qū)崿F(xiàn)數(shù)學(xué)運(yùn)算學(xué)習(xí)目標(biāo)/Target掌握<video>標(biāo)簽的使用方法，能夠在網(wǎng)頁中定義視頻掌握video對(duì)象的使用方法，能夠通過JavaScript控制視頻的播放、暫停等掌握<audio>標(biāo)簽的使用方法，能夠在網(wǎng)頁中定義音頻掌握audio對(duì)象的使用方法，能夠通過JavaScript控制音頻的播放、暫停等學(xué)習(xí)目標(biāo)/Target掌握視頻播放器的制作方法，能夠完成視頻播放器的開發(fā)掌握音頻播放器的制作方法，能夠完成音頻播放器的開發(fā)章節(jié)概述/Summary在網(wǎng)頁開發(fā)中，利用<video>標(biāo)簽、<audio>音頻以及JavaScript，可以為用戶帶來更豐富的多媒體體驗(yàn)。本章將詳細(xì)講解如何為網(wǎng)頁添加動(dòng)態(tài)交互和吸引人的音頻、視頻內(nèi)容。目錄/Contents4-14-2視頻播放器音頻播放器視頻播放器項(xiàng)目4-1項(xiàng)目需求在日常生活中，視頻播放器可以幫助我們播放各種類型的視頻文件。除了基本的播放功能，視頻播放器還應(yīng)具備一系列實(shí)用功能，如暫停、快進(jìn)、快退、調(diào)節(jié)音量和靜音等。這些功能使我們能夠更好地掌控視頻播放過程，滿足不同的觀看需求。項(xiàng)目需求本項(xiàng)目旨在開發(fā)一個(gè)視頻播放器，它具有播放、快進(jìn)5秒、快退5秒、音量+、音量-和靜音功能，其效果如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！熟悉JavaScript概述，能夠歸納JavaScript的組成部分和特點(diǎn)1.JavaScript概述知識(shí)儲(chǔ)備1.JavaScript概述JavaScript是一種編程語言，主要用于開發(fā)交互式的網(wǎng)頁。在網(wǎng)頁中，許多常見的交互效果都可以用JavaScript來實(shí)現(xiàn)，例如輪播圖、選項(xiàng)卡、表單驗(yàn)證等。知識(shí)儲(chǔ)備1.JavaScript概述JavaScript由ECMAScript、DOM、BOM這3部分組成，下面分別進(jìn)行講解。①ECMAScript：規(guī)定了JavaScript的編程語法和基礎(chǔ)核心內(nèi)容，例如變量、分支語句、循環(huán)語句等。②DOM：文檔對(duì)象模型，是W3C制定的用于處理HTML文檔和XML文檔的編程接口，它提供了對(duì)文檔的結(jié)構(gòu)化表述，并定義了一種方式，使程序可以對(duì)該結(jié)構(gòu)進(jìn)行訪問，從而改變文檔的結(jié)構(gòu)、樣式和內(nèi)容。③BOM：瀏覽器對(duì)象模型，是一套編程接口，用于對(duì)瀏覽器進(jìn)行操作，如刷新頁面、彈出警告框、控制頁面跳轉(zhuǎn)等。知識(shí)儲(chǔ)備1.JavaScript概述JavaScript的特點(diǎn)如下。①JavaScript是一種解釋型編程語言，不需要通過專門的編譯器進(jìn)行編譯。當(dāng)嵌入JavaScript的HTML文檔被瀏覽器加載時(shí)，JavaScript會(huì)逐行解釋并執(zhí)行代碼。②JavaScript是動(dòng)態(tài)類型的編程語言，這意味著變量的類型可以在運(yùn)行時(shí)發(fā)生變化，無須顯式聲明或轉(zhuǎn)換類型。③JavaScript是基于原型的面向?qū)ο缶幊陶Z言，通過原型實(shí)現(xiàn)繼承和共享屬性與方法。此外，JavaScript可以利用DOM以及其提供的豐富內(nèi)置對(duì)象和操作方法來實(shí)現(xiàn)所需的功能。④JavaScript是事件驅(qū)動(dòng)的編程語言，能夠響應(yīng)用戶輸入（如單擊、鍵盤輸入、鼠標(biāo)移動(dòng)等）以及瀏覽器事件（如窗口大小調(diào)整）。⑤JavaScript是跨平臺(tái)的編程語言，不依賴于特定的操作系統(tǒng)。只要有支持JavaScript的瀏覽器，就可以運(yùn)行JavaScript程序。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！熟悉JavaScript的引入方式，能夠歸納JavaScript的3種引入方式2.JavaScript的引入方式知識(shí)儲(chǔ)備2.JavaScript的引入方式在HTML文檔中引入JavaScript與引入CSS的方式類似，主要有行內(nèi)式、內(nèi)部式和外部式，下面分別進(jìn)行講解。知識(shí)儲(chǔ)備2.JavaScript的引入方式（1）行內(nèi)式行內(nèi)式是指將JavaScript代碼寫在HTML標(biāo)簽的屬性值中，通常是寫在以on開頭的事件屬性的屬性值中，以實(shí)現(xiàn)與特定事件的關(guān)聯(lián)。以雙標(biāo)簽為例，行內(nèi)式的語法格式如下。標(biāo)簽名是要應(yīng)用JavaScript代碼的HTML標(biāo)簽。onevent表示事件屬性，例如onclick、onload等。JavaScript代碼是在事件觸發(fā)時(shí)執(zhí)行的。<標(biāo)簽名onevent="JavaScript代碼"></標(biāo)簽名>知識(shí)儲(chǔ)備2.JavaScript的引入方式下面演示如何在<button>標(biāo)簽中使用行內(nèi)式，示例代碼如下。<buttononclick="alert('Hello,World!')">單擊我</button>知識(shí)儲(chǔ)備2.JavaScript的引入方式（2）內(nèi)部式內(nèi)部式是指將JavaScript代碼直接寫在HTML文檔中，使用<script>標(biāo)簽標(biāo)識(shí)JavaScript代碼。<script>標(biāo)簽應(yīng)寫在</body>結(jié)束標(biāo)簽之前，這樣做是為了確保在HTML元素完全加載之后再執(zhí)行JavaScript代碼，從而避免嘗試修改尚未加載的HTML元素而導(dǎo)致的錯(cuò)誤。知識(shí)儲(chǔ)備2.JavaScript的引入方式內(nèi)部式的語法格式如下。<script>標(biāo)簽有type屬性，用于表示<script>標(biāo)簽中的腳本類型。在HTML5中，默認(rèn)情況下，<script>標(biāo)簽的type屬性值為text/javascript。在HTML5文檔中使用<script>標(biāo)簽來編寫JavaScript代碼時(shí)，可以省略type屬性。<body><script>JavaScript代碼

</script></body>知識(shí)儲(chǔ)備2.JavaScript的引入方式（3）外部式外部式是指將JavaScript代碼保存在一個(gè)或多個(gè)以.js為擴(kuò)展名的外部JavaScript文件中，通過<script>標(biāo)簽的src屬性將外部JavaScript文件引入HTML頁面中。這種方式會(huì)使代碼更加有序、更容易復(fù)用。外部式的語法格式如下。<script>和</script>標(biāo)簽之間不需要編寫代碼。<scriptsrc="js文件的路徑"></script>知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握J(rèn)avaScript常用的輸入和輸出語句，能夠靈活運(yùn)用prompt()、document.write()、alert()、console.log()語句3.JavaScript常用的輸入和輸出語句知識(shí)儲(chǔ)備3.JavaScript常用的輸入和輸出語句在實(shí)際開發(fā)中，為了方便數(shù)據(jù)的輸入和輸出，JavaScript提供了輸入和輸出語句。知識(shí)儲(chǔ)備3.JavaScript常用的輸入和輸出語句常用的輸入和輸出語句如下表所示。類型語句作用輸入prompt()在網(wǎng)頁中彈出輸入框輸出document.write()在網(wǎng)頁中輸出內(nèi)容alert()在網(wǎng)頁中彈出警告框console.log()在控制臺(tái)中輸出內(nèi)容若要查看使用console.log()語句輸出到控制臺(tái)的內(nèi)容，可以在Chrome瀏覽器中打開開發(fā)者工具，并切換到“Console”選項(xiàng)卡進(jìn)行查看。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！熟悉JavaScript注釋，能夠歸納單行注釋和多行注釋的特點(diǎn)和快捷鍵4.JavaScript注釋知識(shí)儲(chǔ)備4.JavaScript注釋在實(shí)際開發(fā)中，為了增強(qiáng)代碼的可讀性，可以給代碼添加注釋。在解析程序時(shí)，注釋會(huì)被JavaScript解釋器忽略。JavaScript支持單行注釋和多行注釋，下面分別進(jìn)行講解。知識(shí)儲(chǔ)備4.JavaScript注釋（1）單行注釋單行注釋以“//”開始，到該行結(jié)束之前的內(nèi)容都是注釋。在VSCode編輯器中，可以通過“Ctrl+/”快捷鍵來添加單行注釋。單行注釋的示例代碼如下。alert('Hello');//輸出Hello知識(shí)儲(chǔ)備4.JavaScript注釋（2）多行注釋多行注釋以“/*”開始，以“*/”結(jié)束。在VSCode編輯器中，可以通過“Shift+Alt+A”快捷鍵來添加多行注釋。多行注釋的示例代碼如下。/*

這是一個(gè)警告框alert('hello');*/多行注釋中可以嵌套單行注釋，但是不能嵌套多行注釋。注意知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握變量的使用方法，能夠聲明變量和為變量賦值5.變量知識(shí)儲(chǔ)備5.變量在編寫程序時(shí)，我們經(jīng)常需要存儲(chǔ)數(shù)據(jù)，以便后續(xù)使用。例如，將兩個(gè)數(shù)字相加的結(jié)果存儲(chǔ)起來，以便在后續(xù)的計(jì)算中使用。為了存儲(chǔ)這些數(shù)據(jù)，我們可以在程序中聲明一些變量。知識(shí)儲(chǔ)備5.變量變量指的是程序在內(nèi)存中申請(qǐng)的一塊用來存放數(shù)據(jù)的空間。變量由變量名和變量值組成，給變量分配一個(gè)唯一的名稱之后，可以使用該名稱來引用變量，并訪問或修改其對(duì)應(yīng)的值。知識(shí)儲(chǔ)備5.變量變量名的具體命名規(guī)則如下。①變量名使用字母、數(shù)字、下劃線或美元符號(hào)（$）命名，不能以數(shù)字開頭，且不能包含+、-等運(yùn)算符。例如，age、score、set_name、$a、user01是有效的變量名，而01student、02-user是無效的變量名。②變量名嚴(yán)格區(qū)分大小寫。例如name和Name是不同的變量名。③變量名應(yīng)具有描述性，以便理解和維護(hù)代碼。例如，age表示年齡、gender表示性別、num表示數(shù)字等。④變量名遵循命名慣例。通常使用下劃線分隔多個(gè)單詞，如show_message；或使用小駝峰命名法，變量的第1個(gè)單詞首字母小寫，后面的單詞首字母大寫，如leftHand、myFirstName等。⑤避免使用JavaScript中的關(guān)鍵字作為變量名。關(guān)鍵字是JavaScript中被事先定義并賦予特殊含義的單詞，如if、this等。知識(shí)儲(chǔ)備5.變量變量的基本使用包括變量的聲明和賦值，主要有2種方式。先聲明變量后賦值。在聲明變量的同時(shí)為變量賦值。知識(shí)儲(chǔ)備5.變量（1）先聲明變量后賦值在JavaScript中，通常使用let關(guān)鍵字聲明變量，聲明變量后，變量值默認(rèn)會(huì)被設(shè)定為undefined，表示未定義。如果需要使用變量保存具體的值，就需要在聲明變量后為其賦值。先聲明變量后賦值的示例代碼如下。//聲明變量letusername; //聲明一個(gè)名稱為username的變量letage,height; //同時(shí)聲明2個(gè)變量//為變量賦值username='小王'; //為變量賦值'小王'age=18; //為變量賦值18height=180; //為變量賦值180知識(shí)儲(chǔ)備5.變量（2）聲明變量的同時(shí)為變量賦值在聲明變量的同時(shí)為變量賦值，這個(gè)過程又稱為定義變量或初始化變量，示例代碼如下。letusername='小明'; //聲明username變量并賦值為'小明'letsex='男'; //聲明sex變量并賦值為'男'letheight=180; //聲明height變量并賦值為180知識(shí)儲(chǔ)備5.變量在JavaScript中還可以使用var關(guān)鍵字或const關(guān)鍵字聲明變量。var關(guān)鍵字是JavaScript早期的關(guān)鍵字，存在諸多缺點(diǎn)，目前已不推薦使用。const關(guān)鍵字可使變量一旦被賦值后不可重新賦值。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！熟悉數(shù)據(jù)類型，能夠解釋5種常用基本數(shù)據(jù)類型的含義6.數(shù)據(jù)類型知識(shí)儲(chǔ)備6.數(shù)據(jù)類型JavaScript將數(shù)據(jù)類型分為兩大類，分別是基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型，如下圖所示。知識(shí)儲(chǔ)備6.數(shù)據(jù)類型在基本數(shù)據(jù)類型中，bigInt和symbol不常用，了解即可。除此之外的其他基本數(shù)據(jù)類型的解釋如下。①number：值為整數(shù)或浮點(diǎn)數(shù)，在數(shù)字前面添加“+”表示正數(shù)，添加“-”表示負(fù)數(shù)，通常情況下省略“+”。②string：值為用單引號(hào)（'）、雙引號(hào)（"）或反引號(hào)（`）標(biāo)識(shí)的一個(gè)或多個(gè)字符。③boolean：有true和false兩個(gè)值。true表示真或成立；false表示假或不成立。④null：只有一個(gè)值null，表示聲明的變量未指向任何對(duì)象。⑤undefined：只有一個(gè)值undefined，表示聲明了一個(gè)變量但還未賦值。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握運(yùn)算符的使用方法，能夠靈活使用運(yùn)算符完成運(yùn)算7.運(yùn)算符知識(shí)儲(chǔ)備7.運(yùn)算符在實(shí)際開發(fā)中，經(jīng)常需要對(duì)數(shù)據(jù)進(jìn)行運(yùn)算，JavaScript提供了多種類型的運(yùn)算符用于運(yùn)算，如：算術(shù)運(yùn)算符比較運(yùn)算符邏輯運(yùn)算符賦值運(yùn)算符三元運(yùn)算符知識(shí)儲(chǔ)備7.運(yùn)算符（1）算術(shù)運(yùn)算符算術(shù)運(yùn)算符用于對(duì)兩個(gè)數(shù)字或變量進(jìn)行算術(shù)運(yùn)算，與數(shù)學(xué)中的加、減、乘、除運(yùn)算類似。常用的算術(shù)運(yùn)算符如下表所示。算術(shù)運(yùn)算符描述示例結(jié)果+加3+36-減4-22*乘2*612/除16/82%取模3%73++遞增（前置）a=2;b=++a;a=3;b=3;遞增（后置）a=2;b=a++;a=3;b=2;--遞減（前置）a=2;b=--a;a=1;b=1;遞減（后置）a=2;b=a--;a=1;b=2;知識(shí)儲(chǔ)備7.運(yùn)算符遞增運(yùn)算符和遞減運(yùn)算符可以快速地對(duì)變量的值進(jìn)行遞增和遞減，它們屬于一元運(yùn)算符，只對(duì)一個(gè)表達(dá)式進(jìn)行操作；而“+”“-”等運(yùn)算符屬于二元運(yùn)算符，對(duì)兩個(gè)表達(dá)式進(jìn)行操作。遞增（遞減）運(yùn)算符既可以寫在變量前面（如++i、--i），也可以寫在變量后面（如i++、i--）。當(dāng)放在變量前面時(shí)，稱為前置遞增（遞減）運(yùn)算符。當(dāng)放在變量后面時(shí)，稱為后置遞增（遞減）運(yùn)算符。前置和后置的區(qū)別在于，前置返回的是計(jì)算后的結(jié)果，后置返回的是計(jì)算前的結(jié)果。知識(shí)儲(chǔ)備7.運(yùn)算符下面通過代碼演示遞增運(yùn)算符的使用方法，示例代碼如下。leta=1,b=1;console.log(++a); //輸出結(jié)果：2（前置遞增）console.log(a); //輸出結(jié)果：2console.log(b++); //輸出結(jié)果：1（后置遞增）console.log(b); //輸出結(jié)果：2知識(shí)儲(chǔ)備7.運(yùn)算符（2）比較運(yùn)算符比較運(yùn)算符用于對(duì)兩個(gè)數(shù)據(jù)進(jìn)行比較，返回一個(gè)布爾型的值，即true或false。常用的比較運(yùn)算符如下。比較運(yùn)算符描述示例結(jié)果>

大于5>5false<

小于5<5false>=大于或等于5>=5true<=小于或等于5<=5true==等于（只根據(jù)表面值進(jìn)行比較，不涉及數(shù)據(jù)類型）'5'==5true!=不等于（只根據(jù)表面值進(jìn)行比較，不涉及數(shù)據(jù)類型）'5'!=5false===全等5===5true!==不全等5!=='5'true知識(shí)儲(chǔ)備7.運(yùn)算符運(yùn)算符“==”和“!=”在進(jìn)行比較時(shí)，如果比較的兩個(gè)數(shù)據(jù)的類型不同，會(huì)自動(dòng)轉(zhuǎn)換成相同的類型再進(jìn)行比較。例如，比較字符串'123'與數(shù)字123時(shí)，首先會(huì)將字符串'123'轉(zhuǎn)換成數(shù)字123，再與123進(jìn)行比較。而“===”和“!==”運(yùn)算符在進(jìn)行比較時(shí)，不僅要比較值是否相等，還要比較數(shù)據(jù)類型是否相同。知識(shí)儲(chǔ)備7.運(yùn)算符（3）邏輯運(yùn)算符邏輯運(yùn)算符用于對(duì)布爾值進(jìn)行運(yùn)算，其返回值也是布爾值，常用的邏輯運(yùn)算符如下表所示。邏輯運(yùn)算符描述示例結(jié)果&&與a&&b只有當(dāng)a、b的值都為true時(shí)，結(jié)果才為true，否則為false||或a||b只有當(dāng)a、b的值都為false時(shí)，結(jié)果才為false，否則為true!非!a若a為false，則結(jié)果為true，否則為false知識(shí)儲(chǔ)備7.運(yùn)算符在JavaScript中，在進(jìn)行邏輯判斷時(shí)，會(huì)將false、0（數(shù)字）、空字符串、null、NaN和undefined轉(zhuǎn)換為false。例如，對(duì)于letnum=0;，條件語句if(num)會(huì)被轉(zhuǎn)換為if(false)，表示條件不成立。知識(shí)儲(chǔ)備7.運(yùn)算符（4）賦值運(yùn)算符賦值運(yùn)算符用于將運(yùn)算符右邊的值賦給左邊的變量。它可以與算術(shù)運(yùn)算符、邏輯運(yùn)算符等配合使用，以實(shí)現(xiàn)更靈活的賦值操作。常用的賦值運(yùn)算符如下表所示。賦值運(yùn)算符描述示例結(jié)果=賦值a=3;a=3-=減并賦值a=3;a-=2;a=1*=乘并賦值a=3;a*=2;a=6/=除并賦值a=3;a/=2;a=1.5%=取模并賦值a=3;a%=2;a=1+=加并賦值a=3;a+=2;a=5知識(shí)儲(chǔ)備7.運(yùn)算符（5）三元運(yùn)算符三元運(yùn)算符由條件表達(dá)式、問號(hào)（?）、冒號(hào)（:）和兩個(gè)結(jié)果表達(dá)式組成，其語法格式如下。條件表達(dá)式?結(jié)果表達(dá)式1:結(jié)果表達(dá)式2當(dāng)條件表達(dá)式為true時(shí)，返回結(jié)果表達(dá)式1的值。當(dāng)條件表達(dá)式為false時(shí)，返回結(jié)果表達(dá)式2的值。知識(shí)儲(chǔ)備7.運(yùn)算符下面通過代碼演示三元運(yùn)算符的使用方法，示例代碼如下。letage=prompt('請(qǐng)輸入需要判斷的年齡：');letstatus=age>=18?'已成年':'未成年';console.log(status);知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握函數(shù)，能夠根據(jù)實(shí)際需求在程序中定義并調(diào)用函數(shù)8.函數(shù)知識(shí)儲(chǔ)備8.函數(shù)函數(shù)是指實(shí)現(xiàn)某個(gè)特定功能的一段代碼，相當(dāng)于將包含一條或多條語句的代碼塊封裝起來，用戶在使用時(shí)只需關(guān)心參數(shù)和返回值，就能實(shí)現(xiàn)特定的功能。函數(shù)的優(yōu)勢(shì)在于可以提高代碼的復(fù)用性，降低程序的維護(hù)難度。知識(shí)儲(chǔ)備8.函數(shù)JavaScript中的函數(shù)分為內(nèi)置函數(shù)和自定義函數(shù)。內(nèi)置函數(shù)是指可以直接使用的函數(shù)。自定義函數(shù)是指實(shí)現(xiàn)某個(gè)特定功能的函數(shù)。自定義函數(shù)在使用之前要先定義，定義后才能調(diào)用，在需要實(shí)現(xiàn)特定功能時(shí)調(diào)用對(duì)應(yīng)的函數(shù)即可。知識(shí)儲(chǔ)備8.函數(shù)定義函數(shù)的語法格式如下。function函數(shù)名([參數(shù)1,參數(shù)2,……]){

函數(shù)體}①function：定義函數(shù)的關(guān)鍵字。②函數(shù)名：一般由字母、數(shù)字、下劃線和$組成。需要注意的是，函數(shù)名不能以數(shù)字開頭，且不能是JavaScript中的關(guān)鍵字。③參數(shù)：外界傳遞給函數(shù)的值，此時(shí)的參數(shù)稱為形參，它是可選的，多個(gè)參數(shù)之間使用逗號(hào)“,”分隔，“[]”用于在語法格式中標(biāo)識(shí)可選參數(shù)，實(shí)際編寫代碼時(shí)不用寫“[]”。④函數(shù)體：由函數(shù)內(nèi)所有代碼組成的整體，用于實(shí)現(xiàn)特定功能。知識(shí)儲(chǔ)備8.函數(shù)定義完函數(shù)后，如果想要在程序中調(diào)用函數(shù)，只需要通過“函數(shù)名()”的方式調(diào)用即可，小括號(hào)中可以傳入?yún)?shù)。函數(shù)調(diào)用的語法格式如下。函數(shù)名([參數(shù)1,參數(shù)2,……])參數(shù)表示傳遞給函數(shù)的值，也稱為實(shí)參。“([參數(shù)1,參數(shù)2,……])”是實(shí)參列表，實(shí)參個(gè)數(shù)可以是0個(gè)、1個(gè)或多個(gè)。通常，函數(shù)的實(shí)參列表與形參列表順序一致。當(dāng)函數(shù)體內(nèi)不需要參數(shù)時(shí)，調(diào)用函數(shù)時(shí)可以不傳參。在程序中定義函數(shù)和調(diào)用函數(shù)的編寫順序不分前后，這是因?yàn)槎x函數(shù)的代碼會(huì)被預(yù)解析。知識(shí)儲(chǔ)備8.函數(shù)下面通過代碼演示函數(shù)的定義與調(diào)用，示例代碼如下。//定義函數(shù)functionsayHello(){alert('HelloWorld');}//調(diào)用函數(shù)sayHello(); //輸出結(jié)果為：HelloWorld在上述示例代碼中，定義了sayHello()函數(shù)，并調(diào)用了該函數(shù)。知識(shí)儲(chǔ)備8.函數(shù)若調(diào)用函數(shù)后需要返回函數(shù)的結(jié)果，在函數(shù)體中可以使用return關(guān)鍵字，返回的結(jié)果稱為返回值。function函數(shù)名(){return返回值;}函數(shù)返回值的語法格式如下。知識(shí)儲(chǔ)備8.函數(shù)下面通過代碼演示函數(shù)返回值的使用方法，示例代碼如下。functiongetResult(){return123456;}//通過變量接收返回值letresult=getResult();console.log(result); //輸出結(jié)果為：123456//調(diào)用函數(shù)并直接輸出返回值console.log(getResult()); //輸出結(jié)果為：123456知識(shí)儲(chǔ)備8.函數(shù)如果getResult()函數(shù)沒有使用return關(guān)鍵字返回一個(gè)值，則調(diào)用函數(shù)后獲取到的返回值為undefined，示例代碼如下。functiongetResult(){}//直接將函數(shù)的返回值輸出console.log(getResult()); //輸出結(jié)果為：undefined知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握分支結(jié)構(gòu)的使用方法，能夠根據(jù)實(shí)際需求選擇和使用分支結(jié)構(gòu)9.分支結(jié)構(gòu)知識(shí)儲(chǔ)備9.分支結(jié)構(gòu)在由上到下執(zhí)行代碼的過程中，根據(jù)不同的條件，可執(zhí)行不同的代碼，從而得到不同的結(jié)果，這樣的結(jié)構(gòu)就是分支結(jié)構(gòu)。常用的分支結(jié)構(gòu)語句包括：if單分支語句if…else雙分支語句if…elseif…else多分支語句知識(shí)儲(chǔ)備9.分支結(jié)構(gòu)（1）if單分支語句if單分支語句只包含一個(gè)條件表達(dá)式和對(duì)應(yīng)的代碼段，其語法格式如下。if(條件表達(dá)式){

代碼段}如果條件表達(dá)式的值為true，則執(zhí)行代碼段。如果條件表達(dá)式的值為false，則直接跳過代碼段。當(dāng)代碼段中只有一條語句時(shí)，“{}”可以省略。知識(shí)儲(chǔ)備9.分支結(jié)構(gòu)下面通過代碼演示if單分支語句的使用方法，示例代碼如下。letage=20;if(age>=18){console.log('已成年');}知識(shí)儲(chǔ)備9.分支結(jié)構(gòu)（2）if…else雙分支語句if…else雙分支語句包含兩個(gè)互斥的條件表達(dá)式和對(duì)應(yīng)的代碼段。根據(jù)條件表達(dá)式的值，選擇執(zhí)行不同的代碼段。if…else雙分支語句的語法格式如下。if(條件表達(dá)式){

代碼段1}else{

代碼段2}如果條件表達(dá)式的值為true，則執(zhí)行代碼段1。如果條件表達(dá)式的值為false，則執(zhí)行代碼段2。知識(shí)儲(chǔ)備9.分支結(jié)構(gòu)下面通過代碼演示if…else雙分支語句的使用方法，示例代碼如下。letage=12;if(age>=18){console.log('已成年');}else{console.log('未成年');}知識(shí)儲(chǔ)備9.分支結(jié)構(gòu)（3）if…elseif…else多分支語句if…elseif…else多分支語句包含多個(gè)互斥的條件表達(dá)式和對(duì)應(yīng)的代碼段。根據(jù)條件表達(dá)式的值，選擇執(zhí)行不同的代碼段。if…elseif…else多分支語句的語法格式如下。if(條件表達(dá)式1){

代碼段1}elseif(條件表達(dá)式2){

代碼段2}……elseif(條件表達(dá)式n){

代碼段n}else{

代碼段n+1}如果條件表達(dá)式1的值為true，則執(zhí)行代碼段1。如果條件表達(dá)式1的值為false，則繼續(xù)判斷條件表達(dá)式2的值。如果條件表達(dá)式2的值為true，則執(zhí)行代碼段2，以此類推。如果所有表達(dá)式的值都為false，則執(zhí)行最后的else中的代碼段n+1。如果最后沒有else，則直接結(jié)束。知識(shí)儲(chǔ)備9.分支結(jié)構(gòu)下面通過代碼演示if…elseif…else多分支語句的使用方法，示例代碼如下。letscore=88if(score>=90){console.log('優(yōu)秀');}elseif(score>=80){console.log('良好');}elseif(score>=70){console.log('中等');}elseif(score>=60){console.log('及格');}else{console.log('不及格');}知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握循環(huán)結(jié)構(gòu)的使用方法，能夠根據(jù)實(shí)際需求選擇和使用循環(huán)結(jié)構(gòu)10.循環(huán)結(jié)構(gòu)知識(shí)儲(chǔ)備10.循環(huán)結(jié)構(gòu)循環(huán)結(jié)構(gòu)用于批量操作以實(shí)現(xiàn)一段代碼的重復(fù)執(zhí)行。JavaScript提供的循環(huán)語句如下。for語句while語句do…while語句知識(shí)儲(chǔ)備10.循環(huán)結(jié)構(gòu)（1）for語句for語句適用于循環(huán)次數(shù)已知的情況，其語法格式如下。for(初始化變量;條件表達(dá)式;操作表達(dá)式){

循環(huán)體}①初始化變量：初始化一個(gè)用于作為計(jì)數(shù)器的變量，通常使用let關(guān)鍵字聲明一個(gè)變量并賦初始值。②條件表達(dá)式：用于判斷循環(huán)是否繼續(xù)。③操作表達(dá)式：通常用于對(duì)計(jì)數(shù)器變量進(jìn)行更新，是每次循環(huán)中最后運(yùn)行的代碼。知識(shí)儲(chǔ)備10.循環(huán)結(jié)構(gòu)下面通過代碼演示如何使用for語句實(shí)現(xiàn)在控制臺(tái)中輸出0~100的整數(shù)，示例代碼如下。for(leti=0;i<=100;i++){console.log(i+'<br>');}知識(shí)儲(chǔ)備10.循環(huán)結(jié)構(gòu)（2）while語句while語句可以在條件表達(dá)式為true的前提下，循環(huán)執(zhí)行指定的一段代碼，直到條件表達(dá)式為false時(shí)結(jié)束循環(huán)，具體語法結(jié)構(gòu)如下。while(條件表達(dá)式){

循環(huán)體}知識(shí)儲(chǔ)備10.循環(huán)結(jié)構(gòu)下面通過代碼演示如何使用while語句實(shí)現(xiàn)在控制臺(tái)中輸出1~100的整數(shù)，示例代碼如下。letnum=1;while(num<=100){console.log(num);num++;}知識(shí)儲(chǔ)備10.循環(huán)結(jié)構(gòu)（3）do…while語句do…while語句的功能和while語句類似，其區(qū)別在于，do…while語句會(huì)無條件地執(zhí)行一次循環(huán)體中的代碼，然后判斷條件表達(dá)式，根據(jù)條件表達(dá)式的結(jié)果決定是否執(zhí)行循環(huán)體；而while語句是先判斷條件表達(dá)式，再根據(jù)條件表達(dá)式的結(jié)果決定是否執(zhí)行循環(huán)體。do…while語句的語法格式如下。do{

循環(huán)體}while(條件表達(dá)式);首先執(zhí)行do后面“{}”中的循環(huán)體，然后再判斷while后面的條件表達(dá)式。當(dāng)條件表達(dá)式的值為true時(shí)，繼續(xù)執(zhí)行循環(huán)體，否則結(jié)束循環(huán)。知識(shí)儲(chǔ)備10.循環(huán)結(jié)構(gòu)下面通過代碼演示如何使用do…while語句實(shí)現(xiàn)在控制臺(tái)中輸出1~100的整數(shù)，示例代碼如下。letnum=1;do{console.log(num);num++;}while(num<=100);知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！熟悉DOM，能夠歸納DOM的樹形結(jié)構(gòu)和節(jié)點(diǎn)類型11.DOM簡(jiǎn)介知識(shí)儲(chǔ)備11.DOM簡(jiǎn)介DOM是JavaScript的組成部分。在網(wǎng)頁開發(fā)中，DOM扮演著非常重要的角色。使用DOM可以獲取元素，操作文檔的內(nèi)容、屬性和樣式等，從而實(shí)現(xiàn)豐富多彩的網(wǎng)頁交互效果。知識(shí)儲(chǔ)備11.DOM簡(jiǎn)介DOM將整個(gè)文檔視為樹形結(jié)構(gòu)，這個(gè)結(jié)構(gòu)被稱為文檔樹。頁面中所有的內(nèi)容在文檔樹中都表示為節(jié)點(diǎn)，所有的節(jié)點(diǎn)都會(huì)被看作對(duì)象，這些對(duì)象都擁有屬性和方法。知識(shí)儲(chǔ)備11.DOM簡(jiǎn)介文檔節(jié)點(diǎn)是整個(gè)文檔樹的根節(jié)點(diǎn)。HTML文檔中所有的標(biāo)簽都屬于元素節(jié)點(diǎn)。標(biāo)簽中包含的文本內(nèi)容都屬于文本節(jié)點(diǎn)。文檔樹的結(jié)構(gòu)如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握獲取元素的常用方法，能夠使用document對(duì)象提供的方法獲取元素12.獲取元素知識(shí)儲(chǔ)備12.獲取元素在使用DOM操作元素時(shí)，需要先獲取到該元素，才能對(duì)其進(jìn)行操作。document對(duì)象提供的用于獲取元素的常用方法，如下表所示。方法描述getElementById()返回?fù)碛兄付╥d的第一個(gè)元素getElementsByName()返回帶有指定名稱的元素集合getElementsByTagName()返回帶有指定標(biāo)簽名的元素集合querySelector()返回指定CSS選擇器的第一個(gè)元素querySelectorAll()返回指定CSS選擇器的元素集合知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握操作元素的使用方法，能夠操作元素的內(nèi)容和樣式13.操作元素知識(shí)儲(chǔ)備13.操作元素在實(shí)際開發(fā)中，當(dāng)獲取元素后，還需要對(duì)元素進(jìn)行操作，從而實(shí)現(xiàn)頁面的改變。下面講解如何操作元素的內(nèi)容和樣式。知識(shí)儲(chǔ)備13.操作元素（1）操作元素內(nèi)容在實(shí)際開發(fā)中，當(dāng)需要修改頁面中的內(nèi)容時(shí)，就需要操作元素內(nèi)容。例如，修改頁面中元素的文本內(nèi)容，或動(dòng)態(tài)生成頁面內(nèi)容等。下面列舉DOM提供的操作元素內(nèi)容的常用屬性，如下表所示。屬性作用innerHTML設(shè)置或獲取元素開始標(biāo)簽和結(jié)束標(biāo)簽之間的HTML內(nèi)容，返回結(jié)果包含HTML標(biāo)簽，并保留空格和換行innerText設(shè)置或獲取元素的文本內(nèi)容，返回結(jié)果會(huì)去除HTML標(biāo)簽和多余的空格和換行，在設(shè)置文本內(nèi)容時(shí)會(huì)進(jìn)行特殊字符轉(zhuǎn)義textContent設(shè)置或獲取元素的文本內(nèi)容，返回結(jié)果會(huì)去除HTML標(biāo)簽、保留空格和換行知識(shí)儲(chǔ)備13.操作元素innerHTML屬性獲取的元素內(nèi)容包含HTML標(biāo)簽。innerText屬性獲取的元素內(nèi)容不包含HTML標(biāo)簽。textContent屬性和innerText屬性相似，都可以用來設(shè)置或獲取元素的文本內(nèi)容，并且返回結(jié)果會(huì)去除HTML標(biāo)簽，但是textContent屬性還可以用于設(shè)置或獲取占位隱藏元素的文本內(nèi)容。知識(shí)儲(chǔ)備13.操作元素（2）操作元素樣式在實(shí)際開發(fā)中，頁面中元素的樣式可以通過操作元素的style屬性實(shí)現(xiàn)，示例代碼如下。element.style.樣式屬性=樣式屬性值; //設(shè)置樣式console.log(element.style.樣式屬性); //獲取樣式element表示要操作的元素。使用element.style可以設(shè)置或獲取元素在HTML標(biāo)簽內(nèi)定義的樣式。樣式屬性表示要設(shè)置或獲取的CSS屬性的名稱。樣式屬性值表示要設(shè)置的屬性值。樣式屬性與CSS屬性相對(duì)應(yīng)，但寫法不同。樣式屬性需要去掉CSS屬性中的連字符“-”，并將連字符“-”后面的單詞首字母大寫。例如，設(shè)置字號(hào)的CSS屬性為font-size，對(duì)應(yīng)的樣式屬性為fontSize。注意知識(shí)儲(chǔ)備13.操作元素下面列舉style屬性中常用的樣式屬性，如下表所示。樣式屬性作用background設(shè)置或獲取元素的背景屬性backgroundColor設(shè)置或獲取元素的背景顏色display設(shè)置或獲取元素的顯示類型fontSize設(shè)置或獲取元素的字號(hào)width設(shè)置或獲取元素的寬度height設(shè)置或獲取元素的高度left設(shè)置或獲取定位元素的左部位置listStyleType設(shè)置或獲取列表項(xiàng)目符號(hào)的類型overfolw設(shè)置或獲取如何處理呈現(xiàn)在元素外面的內(nèi)容textAlign設(shè)置或獲取文本的水平對(duì)齊方式textDecoration設(shè)置或獲取文本的修飾效果textIndent設(shè)置或獲取文本首行的縮進(jìn)boder設(shè)置或獲取元素的邊框樣式、寬度和顏色知識(shí)儲(chǔ)備13.操作元素下面通過代碼演示為元素添加樣式，示例代碼如下。<body><divclass="box"></div><script>

letele=document.querySelector('.box');ele.style.width='200px';ele.style.height='100px';ele.style.border='1pxsolid#000'</script></body>添加樣式后的ele元素的代碼如下。<divclass="box"style="width:200px;height:100px;border:1pxsolidrgb(0,0,0);"></div>知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！熟悉事件，能夠歸納常用事件類型14.事件知識(shí)儲(chǔ)備14.事件事件是指可以被JavaScript偵測(cè)到的行為，如單擊頁面、鼠標(biāo)指針滑過某個(gè)區(qū)域等，不同行為對(duì)應(yīng)不同事件，并且每個(gè)事件都有對(duì)應(yīng)的事件驅(qū)動(dòng)程序。事件驅(qū)動(dòng)程序由開發(fā)人員編寫，用于實(shí)現(xiàn)由該事件產(chǎn)生的網(wǎng)頁交互效果。知識(shí)儲(chǔ)備14.事件事件是一種“觸發(fā)—響應(yīng)”機(jī)制，行為產(chǎn)生后，對(duì)應(yīng)的事件就會(huì)被觸發(fā)，事件驅(qū)動(dòng)程序就會(huì)被調(diào)用，從而使網(wǎng)頁響應(yīng)并產(chǎn)生交互效果。知識(shí)儲(chǔ)備14.事件事件有3個(gè)要素，分別是事件源、事件類型和事件驅(qū)動(dòng)程序，具體解釋如下。①事件源：承載或觸發(fā)事件的元素對(duì)象。例如，在單擊按鈕的過程中，按鈕就是事件源。②事件類型：使網(wǎng)頁產(chǎn)生交互效果的行為對(duì)應(yīng)的事件種類。例如，單擊事件的事件類型為click。③事件驅(qū)動(dòng)程序：事件觸發(fā)后，為了實(shí)現(xiàn)相應(yīng)的網(wǎng)頁交互效果而運(yùn)行的代碼。知識(shí)儲(chǔ)備14.事件JavaScript中常用的事件類型如下表所示。事件類型描述click單擊時(shí)觸發(fā)mouseover鼠標(biāo)指針移入元素時(shí)觸發(fā)（當(dāng)前元素與其子元素都觸發(fā)）mouseout鼠標(biāo)指針移出元素時(shí)觸發(fā)（當(dāng)前元素與其子元素都觸發(fā)）mouseenter鼠標(biāo)指針移入元素時(shí)觸發(fā)（子元素不觸發(fā)）mouseleave鼠標(biāo)指針移出元素時(shí)觸發(fā)（子元素不觸發(fā)）mousedown鼠標(biāo)按鍵被按下時(shí)觸發(fā)mouseup鼠標(biāo)按鍵被釋放時(shí)觸發(fā)知識(shí)儲(chǔ)備14.事件事件類型描述mousemove在元素內(nèi)當(dāng)鼠標(biāo)指針移動(dòng)時(shí)持續(xù)觸發(fā)blur當(dāng)前元素失去焦點(diǎn)時(shí)觸發(fā)change當(dāng)前元素失去焦點(diǎn)并且元素內(nèi)容發(fā)生改變時(shí)觸發(fā)focus某個(gè)元素獲得焦點(diǎn)時(shí)觸發(fā)reset表單被重置時(shí)觸發(fā)submit表單被提交時(shí)觸發(fā)onload頁面加載完成時(shí)觸發(fā)知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握注冊(cè)事件的使用方法，能夠完成事件的注冊(cè)15.注冊(cè)事件知識(shí)儲(chǔ)備15.注冊(cè)事件在實(shí)際開發(fā)中，為了讓元素在觸發(fā)事件時(shí)運(yùn)行特定的代碼，需要為元素注冊(cè)事件。注冊(cè)事件也稱為綁定事件，可以通過事件屬性或者addEventListener()方法來為操作的元素注冊(cè)事件。知識(shí)儲(chǔ)備15.注冊(cè)事件（1）通過事件屬性注冊(cè)對(duì)象事件屬性的命名方式為“on事件類型”，例如，單擊事件類型為click，對(duì)象的事件屬性為onclick。通過事件屬性注冊(cè)事件有兩種方式：在標(biāo)簽中注冊(cè)。在JavaScript中注冊(cè)。在標(biāo)簽中注冊(cè)事件的示例代碼如下。<divonclick="">點(diǎn)我</div>在onclick屬性值中可以編寫事件驅(qū)動(dòng)程序。知識(shí)儲(chǔ)備15.注冊(cè)事件在JavaScript中注冊(cè)事件的示例代碼如下。element.onclick=function(){};首先通過onclick事件屬性為element元素注冊(cè)click事件。然后編寫事件處理函數(shù)，并將事件處理函數(shù)賦值給onclick事件屬性。完成上述代碼后，當(dāng)element元素觸發(fā)click事件時(shí)，事件處理函數(shù)就會(huì)被執(zhí)行。知識(shí)儲(chǔ)備15.注冊(cè)事件（2）通過addEventListener()方法注冊(cè)事件通過addEventListener()方法注冊(cè)事件的語法格式如下。element.addEventListener(type,callback,[capture]);①type：表示要注冊(cè)的事件類型，不帶on前綴。例如，click、mousemove、keydown等。②callback：表示事件處理函數(shù)，表示事件發(fā)生時(shí)要執(zhí)行的函數(shù)。③capture：可選參數(shù)，默認(rèn)值為false，表示在事件冒泡階段完成事件處理；將其設(shè)置為true時(shí)，表示在事件捕獲階段完成事件處理。知識(shí)儲(chǔ)備15.注冊(cè)事件通過addEventListener()方法注冊(cè)事件時(shí)，可以多次調(diào)用addEventListener()方法來為同一個(gè)元素注冊(cè)多個(gè)不同類型或相同類型的事件處理函數(shù)。另外，可以調(diào)用removeEventListener()方法移除注冊(cè)的事件，該方法接受與addEventListener()方法相同的參數(shù)。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握Math對(duì)象的使用方法，能夠?qū)崿F(xiàn)數(shù)學(xué)運(yùn)算16.Math對(duì)象知識(shí)儲(chǔ)備16.Math對(duì)象在實(shí)際開發(fā)中，有時(shí)需要進(jìn)行與數(shù)學(xué)相關(guān)的運(yùn)算，例如獲取圓周率、絕對(duì)值、最大值、最小值等。為了提高開發(fā)效率，可以通過Math對(duì)象提供的屬性和方法，快速完成與數(shù)學(xué)運(yùn)算相關(guān)的開發(fā)需求。知識(shí)儲(chǔ)備16.Math對(duì)象Math對(duì)象表示數(shù)學(xué)對(duì)象，用于數(shù)學(xué)運(yùn)算，可以直接使用其屬性和方法。屬性和方法作用PI獲取圓周率，結(jié)果為3.141592653589793abs(x)獲取x的絕對(duì)值max([value1[,value2,…]])獲取所有參數(shù)中的最大值min([value1[,value2,…]])獲取所有參數(shù)中的最小值pow(base,exponent)獲取基數(shù)（base）的指數(shù)（exponent）次冪，即baseexponentsqrt(x)獲取x的平方根，若x為負(fù)數(shù)，則返回NaNceil(x)獲取大于或等于x的最小整數(shù)，即向上取整floor(x)獲取小于或等于x的最大整數(shù)，即向下取整round(x)獲取x四舍五入后的整數(shù)值random()獲取大于或等于0且小于1的隨機(jī)值知識(shí)儲(chǔ)備16.Math對(duì)象round()方法遵循的計(jì)算規(guī)則并非傳統(tǒng)的四舍五入，而是在遇到5時(shí)始終選擇更大的整數(shù)。例如，對(duì)于-2.5，候選整數(shù)為-2和-3，其中-2更大，因此結(jié)果為-2。知識(shí)儲(chǔ)備16.Math對(duì)象下面通過代碼演示Math對(duì)象的使用方法。①使用PI屬性獲取圓周率，并計(jì)算半徑為5的圓的面積，示例代碼如下。②使用abs()方法獲取數(shù)字-13的絕對(duì)值，示例代碼如下。③使用max()方法和min()方法獲取一組數(shù)“8，9，22，18，15”的最大值和最小值，示例代碼如下。console.log(Math.PI*5*5); //輸出結(jié)果為：78.53981633974483console.log(Math.abs(-13)); //輸出結(jié)果為：13console.log(Math.max(8,9,22,18,15)); //輸出結(jié)果為：22console.log(Math.min(8,9,22,18,15)); //輸出結(jié)果為：8知識(shí)儲(chǔ)備16.Math對(duì)象④使用pow()方法獲取3的4次冪，然后使用sqrt()方法對(duì)其結(jié)果求平方根，示例代碼如下。⑤使用ceil()方法獲取大于或等于3.1和3.9的最小整數(shù)，使用floor()方法獲取小于或等于3.1和3.9的最大整數(shù)，示例代碼如下。leta=Math.pow(3,4);console.log(a); //輸出結(jié)果為：81console.log(Math.sqrt(a)); //輸出結(jié)果為：9console.log(Math.ceil(3.1)); //輸出結(jié)果為：4console.log(Math.ceil(3.9)); //輸出結(jié)果為：4console.log(Math.floor(3.1)); //輸出結(jié)果為：3console.log(Math.floor(3.9)); //輸出結(jié)果為：3知識(shí)儲(chǔ)備16.Math對(duì)象⑥使用round()方法獲取數(shù)字2.1、2.5、2.9、-2.5和-2.6四舍五入后的整數(shù)值，示例代碼如下。⑦使用random()方法獲取大于或等于0且小于1的隨機(jī)數(shù)，示例代碼如下。console.log(Math.round(2.1)); //輸出結(jié)果為：2console.log(Math.round(2.5)); //輸出結(jié)果為：3console.log(Math.round(2.9)); //輸出結(jié)果為：3console.log(Math.round(-2.5)); //輸出結(jié)果為：-2console.log(Math.round(-2.6)); //輸出結(jié)果為：-3console.log(Math.random()); //輸出結(jié)果為：0.44156518524455257知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握<video>標(biāo)簽的使用方法，能夠在網(wǎng)頁中定義視頻17.<video>標(biāo)簽知識(shí)儲(chǔ)備17.<video>標(biāo)簽<video>標(biāo)簽用于定義網(wǎng)頁中的視頻，它不僅可以播放視頻，還提供了視頻控制器，用于實(shí)現(xiàn)播放、暫停、進(jìn)度和音量控制、全屏等功能。知識(shí)儲(chǔ)備17.<video>標(biāo)簽<video>標(biāo)簽的語法格式如下。<videosrc="視頻文件路徑"controls>

瀏覽器不支持<video>標(biāo)簽。</video>src屬性用于設(shè)置視頻文件的路徑。controls屬性用于為視頻提供播放控件。width和height屬性用于設(shè)置寬度和高度。在<video>和</video>之間可以插入文字，用于在瀏覽器不能支持<video>標(biāo)簽時(shí)顯示。知識(shí)儲(chǔ)備17.<video>標(biāo)簽當(dāng)使用<video>標(biāo)簽時(shí)，需要注意視頻文件的格式問題。目前，大多數(shù)瀏覽器都支持下列3種常見的視頻格式。①OGG：帶有Theora視頻編碼和Vorbis音頻編碼的OGG格式。②MPEG4：帶有H.264視頻編碼和AAC音頻編碼的MPEG4格式。③WebM：帶有VP8視頻編碼和Vorbis音頻編碼的WebM格式。知識(shí)儲(chǔ)備17.<video>標(biāo)簽為了避免遇到瀏覽器不支持的格式導(dǎo)致視頻無法播放，HTML5提供了<source>標(biāo)簽，用于指定多個(gè)備用的不同格式的文件路徑，其語法格式如下。<videocontrols><sourcesrc="視頻文件地址"type="video/格式"><sourcesrc="視頻文件地址"type="video/格式">……</video>type屬性用于指定視頻文件的格式。OGG格式對(duì)應(yīng)的type屬性值為video/ogg。MPEG4格式對(duì)應(yīng)的type屬性值為video/mp4。WebM格式對(duì)應(yīng)的type屬性值為video/webm。知識(shí)儲(chǔ)備17.<video>標(biāo)簽下面通過代碼演示如何使用<video>標(biāo)簽，示例代碼如下。<body><videosrc="video/example.mp4"width="300"controls></video></body>知識(shí)儲(chǔ)備17.<video>標(biāo)簽展示視頻的頁面效果如下圖所示。通過單擊視頻控制器中的按鈕，可以對(duì)視頻進(jìn)行暫停、播放等操作。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握video對(duì)象的使用方法，能夠通過JavaScript控制視頻的播放、暫停等18.video對(duì)象知識(shí)儲(chǔ)備18.video對(duì)象在實(shí)際開發(fā)中，有時(shí)需要通過JavaScript控制視頻的播放、暫停以及更改播放進(jìn)度。為此，HTML5提供了video對(duì)象，開發(fā)者可以通過該對(duì)象來操作視頻文件。知識(shí)儲(chǔ)備18.video對(duì)象video對(duì)象的常用屬性如下表所示。屬性說明currentSrc返回當(dāng)前視頻的URLcurrentTime設(shè)置或返回視頻中的當(dāng)前播放位置（以秒計(jì)）duration返回當(dāng)前視頻的長(zhǎng)度（以秒計(jì)）ended返回視頻的播放是否已結(jié)束error返回表示視頻錯(cuò)誤狀態(tài)的MediaError對(duì)象paused設(shè)置或返回視頻是否暫停muted設(shè)置或返回視頻是否靜音loop設(shè)置或返回視頻是否應(yīng)在結(jié)束時(shí)重新播放volume設(shè)置或返回視頻的音量知識(shí)儲(chǔ)備18.video對(duì)象video對(duì)象的常用方法如下表所示。方法說明play()開始播放視頻pause()暫停當(dāng)前播放的視頻load()重新加載視頻知識(shí)儲(chǔ)備18.video對(duì)象video對(duì)象的常用事件如下表所示。事件描述play執(zhí)行方法play()時(shí)觸發(fā)（開始播放）playing正在播放視頻時(shí)觸發(fā)pause執(zhí)行方法pause()時(shí)觸發(fā)（暫停播放）timeupdate播放位置被改變時(shí)觸發(fā)ended播放結(jié)束后停止播放時(shí)觸發(fā)waiting等待加載下一幀時(shí)觸發(fā)ratechange當(dāng)前播放速率改變時(shí)觸發(fā)volumechange音量改變時(shí)觸發(fā)canplay以當(dāng)前播放速率，在播放期間需要緩沖時(shí)觸發(fā)canplaythrough以當(dāng)前播放速

溫馨提示

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

評(píng)論

0/150

提交評(píng)論