Web前端開發(fā) 課件 第12章 JavaScript基礎_第1頁
Web前端開發(fā) 課件 第12章 JavaScript基礎_第2頁
Web前端開發(fā) 課件 第12章 JavaScript基礎_第3頁
Web前端開發(fā) 課件 第12章 JavaScript基礎_第4頁
Web前端開發(fā) 課件 第12章 JavaScript基礎_第5頁
已閱讀5頁，還剩58頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第12章JavaScript基礎主講教師：朱鐵櫻《Web前端開發(fā)》

12.1JavaScript概述JavaScript是Web開發(fā)領域中的一種功能強大的編程語言。其作用主要用于開發(fā)交互式的Web頁面，使網頁的互動性更強，用戶體驗更好。語言作用說明HTML結構從語義角度描述頁面結構，相當于人的身體結構CSS樣式從審美角度美化頁面樣式，相當于給人穿衣服、化妝JavaScript行為從交互角度描述頁面行為，相當于人的各種動作LiveScript由布蘭登·艾奇（BrendanEich）發(fā)明，于1995年出現(xiàn)在Netscape。Netscape與SUN合作，將LiveScript改為JavaScript，造就了這個強大的Web頁開發(fā)工具。如今，web3.0時代，各種JavaScript功能框架層出不窮，各種前端應用愈加豐富多彩。

JavaScript的誕生和發(fā)展

12.1JavaScript概述JavaScript內嵌于HTML網頁中，通過瀏覽器內置的JavaScript引擎直接編譯，把一個原本只用來顯示的頁面，轉變成支持用戶交互的頁面。JavaScript主要運行在瀏覽器中的。例如，直接在瀏覽器中進行表單驗證，只有填寫格式正確的內容后才能夠提交表單，避免因表單填寫錯誤導致反復提交，節(jié)省了時間和網絡資源。

JavaScript作用

12.1JavaScript概述JavaScript是一種腳本語言，特點是簡單、易學、易用，語法規(guī)則比較松散，能夠快速完成程序的編寫工作JavaScript可以跨平臺，它不依賴操作系統(tǒng)，僅需要瀏覽器的支持JavaScript支持面向對象，可以使JavaScript開發(fā)變得快捷和高效，降低開發(fā)成本

JavaScript特點

12.1JavaScript概述JavaScript由ECMAScript、DOM、BOM三部分組成。JavaScriptECMAScriptBOMDOM

JavaScript組成

12.1JavaScript概述ECMAScript：是JavaScript的核心。規(guī)定了JavaScript的編程語法和基礎核心內容，是所有瀏覽器廠商共同遵守的一套JavaScript語法工業(yè)標準。DOM：文檔對象模型，是用于html編程的接口，可以通過DOM對頁面上的各種元素進行操作。BOM：瀏覽器對象模型，它提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。通過BOM，可以對瀏覽器窗口進行操作。

JavaScript組成

12.1JavaScript概述行內式：將單行或少量的JavaScript代碼寫在HTML標簽的事件屬性中。注意單引號和雙引號的使用。行內式可讀性較差。多層引號嵌套時，容易混淆，導致代碼出錯。臨時測試或特殊情況使用行內式，一般情況下不推薦。

JavaScript書寫位置

12.1JavaScript概述內嵌式（嵌入式）：使用<script>標簽包裹JavaScript代碼，<script>標簽可以寫在<head>或<body>標簽中。

12.1JavaScript概述

JavaScript書寫位置外部式（外鏈式）：將JavaScript代碼寫在一個單獨的文件中，一般使用“.js”作為文件擴展名，在HTML頁面中使用<script>標簽引入，適合JavaScript代碼量比較多的情況。注意外部式的<script>標簽內不能編寫JavaScript代碼。

12.1JavaScript概述

JavaScript書寫位置在編寫JavaScript代碼時，需要注意基本的語法規(guī)則：JavaScript嚴格區(qū)分大小寫，在編寫代碼時一定注意大小寫的正確性。JavaScript代碼對空格、換行、縮進不敏感，一條語句可以分成多行書寫。如果一條語句結束后，換行書寫下一條語句，后面的分號可以省略。

JavaScript語法規(guī)劃

12.1JavaScript概述JavaScript代碼的注釋方式：單行注釋：以“//”開始，到該行結束或<script>標簽結束之前的內容都是注釋?？旖萱I：ctrl+/。多行注釋：以“/*”開始，以

“*/”結束。需要注意的是，多行注釋中可以嵌套單行注釋，但不能再嵌套多行注釋?？旖萱I：shift+ctrl+/。

12.1JavaScript概述JavaScript可以在網頁中實現(xiàn)用戶交互效果。例如，網頁打開后自動彈出一個輸入框，用戶輸入內容后，由程序內部進行處理，處理完成后再把結果返回給用戶。這整個過程分為輸入、處理和輸出3個步驟。語句說明alert('msg')瀏覽器彈出警告框console.log('msg')瀏覽器控制臺輸出信息prompt('msg1','msg2')瀏覽器彈出輸入框，用戶可以輸入內容document.write('msg')；向文檔寫文本、HTML表達式或JavaScript代碼輸入和輸出語句

12.1JavaScript概述圖1圖2圖3

12.1JavaScript概述瀏覽器的控制臺中也可以直接輸入JavaScript代碼中來執(zhí)行語句，這為初學者提供了很大的便利。用戶輸入控制臺輸出控制臺

12.1JavaScript概述

12.2變量變量是計算機內存中存儲數據的空間，使用變量可以方便的獲取或者修改內存中的數據。變量的使用，分為兩步：聲明變量和變量賦值。varage;//聲明一個名稱為age的變量

age=10//為age變量賦值

varage=18//聲明變量的同時賦值

1.聲明變量2.變量賦值3.變量初始化

12.2變量1.更新變量的值。2.同時聲明多個變量。

12.2變量3.聲明變量的特殊情況。（1）只聲明變量，但不賦值（2）不聲明變量，直接輸出變量的值在對變量進行命名時，需要遵循變量的命名規(guī)則，具體如下：由字母、數字、下劃線和美元符號（$）組成。嚴格區(qū)分大小寫，如app和App是兩個變量。不能以數字開頭，如18age是錯誤的變量名。不能是關鍵字、保留字，如var、for、while等是錯誤的變量名。要盡量做到“見名知義”如age表示年齡，num表示數字。遵循駝峰命名法，首字母小寫，后面單詞首字母大寫，如myFirstName。

12.2變量

12.3數據類型JavaScript是一種弱類型語言，不用提前聲明變量的數據類型。在程序運行過程中，變量的數據類型會被自動確定。

12.3數據類型當不確定一個變量或值是什么數據類型的時候，可以利用typeof運算符進行數據類型檢測。toString()：把其他類型轉換成字符串如:varnum=35;num.toString()parseInt(String)、parseFloat(String)將字符串轉換為整型、浮點型如:parseFloat(“34.45”)將字符串“34.45”轉換為浮點值34.45基本數據類型轉換Boolean(value)：把值轉換為布爾型，空字符串、0、NaN、null和undefined轉換為false，其他為true。Number(value)：將值轉換為數值型。String(value)：把值轉換為字符串。數據類型轉換

12.3數據類型

12.4運算符JavaScript運算符用于賦值，比較值，執(zhí)行算術運算等。

12.4運算符算術運算符用于對兩個變量或值進行算術運算。運算符描述例子y值x值備注+加法x=y+2y=5x=7-減法x=y-2y=5x=3*乘法x=y*2y=5x=10/除法x=y/2y=5x=2.5%余數x=y%2y=5x=1++自增x=++yy=6x=6先自增再賦值x=y++y=6x=5先賦值再自增--自減x=--yy=4x=4先自減再賦值x=y--y=4x=5先賦值再自減12.4運算符賦值運算符用于對兩個變量或值進行算術運算。運算符運算示例結果=賦值a=3;a=3+=加并賦值a=3;a+=2;a=5-=減并賦值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='abc';a+='def';a='abcdef'12.4運算符比較運算符用于對兩個數據進行比較，其結果是布爾值（true或false）。運算符運算示例結果備注>大于5>5false<小于5<5false>=大于或等于5>=5true<=小于或等于5<=5true==等于5==4false先轉換相同類型，再比較!=不等于5!=4true===全等5===5true比較值是否相等，比較數據類型是否相同!==不全等5!=='5'true

12.4運算符邏輯運算符用于對布爾值進行運算，其返回值也是布爾值。運算符運算示例結果&&與a&&ba和b都為true，結果為true，否則為false||或a||ba和b中至少有一個為true，則結果為true，否則為false!非!a若a為false，結果為true，否則相反12.4運算符條件運算符又叫三元運算符，是一種需要三個操作數的運算符，運算的結果根據給定條件決定。條件表達式?表達式1:表達式2語法說明：先求條件表達式的值，如果為true，則返回表達式1的執(zhí)行結果；如果條件表達式的值為false，則返回表達式2的執(zhí)行結果。age>=18?'已成年':'未成年';

12.4運算符運算符優(yōu)先級：是指表達式中所有運算符參與運算的先后順序。結合方向運算符結合方向運算符無()左==!====!==無++（后置）--（后置）左&右!-（負數）+（正數）++（前置）--（前置）左^右**左|左*/%左&&左+-左||左<<>>>>>右?:左<<=>>=右=+=-=*=/=%=<<=>>=>>>=&=^=|=

12.5流程控制通過控制代碼的執(zhí)行順序來完成要實現(xiàn)的功能，這就是流程控制。順序結構是程序中最基本的結構，程序會按照代碼的先后順序依次執(zhí)行。分支結構用于根據條件來決定是否執(zhí)行某個分支代碼。循環(huán)結構用于根據條件來決定是否重復執(zhí)行某一段代碼。12.5流程控制常用的分支結構語句有if語句和switch語句。if單分支語句，當滿足某種條件時，進行某種處理if…else雙分支語句，當滿足某種條件時，進行某種處理，否則進行另一種處理if…elseif多分支語句，可針對不同情況進行不同的處理12.5流程控制switch多分支語句，針對某個表達式的值作出判斷，從而決定執(zhí)行哪一段代碼。查詢水果價格12.5流程控制使用switch多分支語句實現(xiàn)用戶在彈出框中輸入一個水果，如果有就彈出該水果的價格，如果該水果不存在就彈出“沒有此水果”的效果。蘋果3.5元/斤榴蓮35元/斤香梨3元/斤12.5流程控制1.一般情況下，它們兩個語句可以互相替換。2.Switch…case語句通常處理case比較確定值的情況，而if…elseif語句更加靈活，常用于范圍判斷(大于、等于某個范圍)。3.switch語句進行條件判斷后直接執(zhí)行到程序的條件語句，效率更高，而if…elseif語句有幾種條件，就得判斷多少次。4.當分支比較少時，

if…elseif語句的執(zhí)行效率高。5.當分支比較多時，switch語句的執(zhí)行效率高，而且結構更清晰。

switch語句和if…elseif語句的區(qū)別12.5流程控制在程序中，一組被重復執(zhí)行的語句稱為循環(huán)體，能否重復執(zhí)行，取決于循環(huán)的終止條件。由循環(huán)體及循環(huán)的終止條件組成的語句稱為循環(huán)語句。for語句是最常用的循環(huán)語句，循環(huán)次數已知的情況。①執(zhí)行“vari=1;”初始化變量。②判斷條件表達式“i<=100”是否為真，如果為真，執(zhí)行循環(huán)體，反之，結束循環(huán)。③執(zhí)行循環(huán)體console.log(i)。④執(zhí)行操作表達式“i++”，將i的值加1。⑤繼續(xù)判斷“i<=100”是否為true，當i的值加到101時，循環(huán)結束。代碼執(zhí)行流程循環(huán)結構12.5流程控制while語句可以在條件表達式為true的前提下，循環(huán)執(zhí)行指定的一段代碼，直到條件表達式為false時結束循環(huán)。do…while語句會無條件地執(zhí)行一次循環(huán)體中的代碼，然后再判斷條件，根據條件決定是否循環(huán)執(zhí)行。注意：1.在循環(huán)體中需要對計數器的值進行更新，以防止出現(xiàn)死循環(huán)。2.while是先判斷后執(zhí)行，而do...while是先執(zhí)行后判斷。3.do...while保證循環(huán)體至少執(zhí)行一次，而while不能。循環(huán)結構12.5流程控制continue關鍵字應用在循環(huán)結構中，用來立即跳出本次循環(huán)，也就是跳過continue后面的代碼，繼續(xù)下一次循環(huán)。break關鍵字可以用在switch語句和循環(huán)語句中，在循環(huán)語句中使用時，其作用是立即跳出整個循環(huán)，也就是將循環(huán)結束。循環(huán)結構12.5流程控制（1）重復執(zhí)行相同代碼，執(zhí)行N次，N通過prompt輸入。重要的事情說N遍。（2）重復執(zhí)行不同代碼，第1遍輸出“這是第1次循環(huán)”，第100遍輸出”這是第100次循環(huán)“，其他遍忽略。循環(huán)結構12.5流程控制（3）1~100之間的所有整數“求和”和“平均數”。（4）1~100之間的所有整數“求偶數和”和“求奇數和”循環(huán)結構（5）1~100之間的所有能被3整除的整數之和12.5流程控制循環(huán)嵌套（6）生成字符串（7）九九乘法表12.5流程控制猜數游戲隨機產生一個0到9之間的數字，接收用戶輸入的一個數字，用戶有3次輸入的機會。猜大了，提示“大了”，猜小了，提示“小了”。如果3次機會內猜對則提示“猜對了”，直接跳出游戲。如果3次都沒有猜對則提示“你輸了”，并結束游戲。Math.random()：產生一個[0，1)之間的隨機數。Math.ceil()方法執(zhí)行的是向上取整計算，它返回的是大于或等于函數參數，并且與之最接近的整數。

12.6函數函數的含義：用于封裝一段完成特定功能的代碼。相當于將一條或多條語句組成的代碼塊包裹起來，用戶在使用時只需關心參數和返回值，就能完成特定的功能，而不用了解具體的實現(xiàn)。函數有兩種：JavaScript自帶的系統(tǒng)函數和用戶自定義函數函數在使用時分為兩步，聲明函數和調用函數。聲明函數的基本語法調用函數：三種情況1.函數調用和表單元素的事件一起使用，格式：事件名＝“函數名()”;2.在腳本中直接調用，格式：函數名();3.在腳本中通過元素事件調用，格式：事件名=函數名；

12.6函數函數的使用<inputtype="submit"name="Submit"value="計算1-100之和"onClick="getSum(1,100)">在<script>標簽對中添加語句：window.onload=getSum(1,100);

12.6函數函數的使用JavaScript函數參數的使用非常靈活，它允許函數的形參和實參個數不同。當實參數量多于形參數量時，函數可以正常執(zhí)行，多余的實參由于沒有形參接收，會被忽略。當實參數量小于形參數量時，多出來的形參類似于一個已聲明未賦值的變量，其值為undefined。

12.6函數函數的參數在JavaScript函數體內，使用return語句可以設置函數的返回值。一旦執(zhí)行return語句，將停止函數的運行，并計算和返回return后面的表達式的值。如果函數不包含return語句，則執(zhí)行完函數體內每條語句后，返回undefined值。

12.6函數函數的返回值匿名函數是沒有名稱的函數，因此要將聲明的匿名函數賦值給一個變量，通過變量完成函數的調用和參數的傳遞，成為一個函數表達式。

12.6函數匿名函數聲明變量后是否可以在任意位置使用該變量？

12.6函數作用域的分類變量的使用是有作用域范圍的。按作用域劃分有全局作用域、函數作用域和塊級作用域（ES6提供的），根據不同作用域對應的變量：全局變量、局部變量、塊級變量（ES6提供的）。js文件函數含有{}如for等函數作用域全局作用域塊級作用域

12.6函數作用域的分類①全局變量：不在任何函數內聲明的變量（顯式定義）或在函數內省略var聲明的變量（隱式定義）都稱為全局變量，它在同一個頁面文件中的所有腳本內都可以使用。②局部變量：在函數體內利用var關鍵字定義的變量稱為局部變量，它僅在該函數體內有效。③塊級變量：ES6提供的let關鍵字聲明的變量稱為塊級變量，僅在“{}”中間有效，如if、for或while語句等。作用域的分類

12.6函數養(yǎng)成良好的編程習慣命名風格函數主要用來實現(xiàn)功能，通常用“動詞+名詞”形式。變量名用來存儲數據，通常用”名詞“或”形容詞+名詞“形式。變量名以小寫字母開頭，對于多個詞的情況，如果沒有分隔符，則從第二個詞開始，每個詞語第一個字母大寫。類的命名通常使用“名詞”，類名應該以大寫字母開頭。document.表單名.文本框名.valuedocument.getElementById(id).value注意：從文本框中獲取的值都是字符串，若進行加減，都要進行類型轉換。獲取文本框值的方法document.myForm.txtCount.valuedocument.getElementById(“txtCount).value在頁面實現(xiàn)簡易計算器，用戶在頁面輸入第一個數和第二個數，點擊相應操作符將操作結果顯示在計算結果文本框中。制作簡易計算器設計靜態(tài)頁面。獲取用戶輸入文本框的值。使用函數定義對應的加、減、乘、除操作。單擊按鈕時調用函數。怎么用一個函數來代替4個結構相似的函數？使用有參函數，將運算符作為參數傳遞

12.8對象JavaScript對象是擁有屬性和方法的數據。在JavaScript中，幾乎所有的事物都是對象。對象屬性方法

=Fiat

car.model=500

car.weight=850kg

car.color=white

car.start()

car.drive()

car.brake()

car.stop()所有汽車都有這些屬性，但是每款車的屬性都不盡相同。所有汽車都擁有這些方法，但是它們被執(zhí)行的時間都不盡相同。

12.8對象內置對象Date、Math、String、Array、Number等瀏覽器對象Window、Location、history、Navigator、Screen、document、Frame等自定義對象Date對象的創(chuàng)建Date對象存儲的日期為自1970年1月1日00:00:00以來的毫秒數要先使用new運算符創(chuàng)建Date對象，創(chuàng)建Date對象常見方式有三種不帶參數：varmyDate=newDate();創(chuàng)建一個含有系統(tǒng)當前日期和時間的Date對象變量myDate。創(chuàng)建一個指定日期的Date對象：varmyDate=newDate(“2024/05/01”);創(chuàng)建了2024年5月1日的Date變量myDate。創(chuàng)建一個指定時間的Date對象：varmyDate=newDate(2024,5,1,10,30,20,50);創(chuàng)建了一個包含確切日期和時間“2024年5月1日10點30分20秒50毫秒”的myDate變量

12.8對象Date對象的常用方法方法名描述getYear()返回年份數getFullYear()返回年份數getMonth()返回月份數（0--11）getDate()返回日期數（1--31）getDay()返回星期數（0--6）getHours()返回時數（0--23）getMinutes()返回分數（0--59）getSeconds()返回秒數（0--59）getMilliseconds()返回毫秒數（0--999）getTime()返回對應日期基線的毫秒toGMTString()以GMT格式表示日期對象toLocaleString()返回日期的字符串表示，其格式根據系統(tǒng)當前的區(qū)域設置來確定

12.8對象定時器setTimeout()：用于在指定的毫秒后調用函數或計算表達式語法：setTimeout(“調用的函數名稱”,等待的毫秒數)使用clearTimeout()方法清除s

溫馨提示

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

評論

0/150

提交評論