《JavaScript動態(tài)網頁設計》課件 1 創(chuàng)建JavaScript程序

項目1創(chuàng)建JavaScript程序主講：***2024年12月18日JavaScript動態(tài)網頁設計1子項目2024年12月18日JavaScript動態(tài)網頁設計2學習任務

任務1搭建開發(fā)環(huán)境

任務2初識JavaScript

任務3學習JavaScript語法

任務4在網頁中添加掌握JavaScript程序的基本應用2024年12月18日JavaScript動態(tài)網頁設計3任務1搭建開發(fā)環(huán)境對于Web前端開發(fā)人員，一個強大的編輯器可以使開發(fā)變得簡單、便捷、高效，建議使用類似VisualStudioCode（簡寫Vscode）這種專注于代碼編寫、輕量級且功能強的文本編輯工具作為JavaScript代碼的編寫工具。本書安裝的是windowx64的VisualStudioCode，官方簡體中文版的安裝文件可以在其官方網站下載：。2024年12月18日JavaScript動態(tài)網頁設計41、VisualStudioCode下載與安裝步驟如下：（1）下載VisualStudioCode軟件，如圖1-1所示。

圖1-1

VisualStudioCode下載界面2024年12月18日JavaScript動態(tài)網頁設計5（2）運行VisualStudioCode安裝程序，如圖1-2所示。第一步是將其解壓到指定目錄，解壓完成后，會自動運行安裝程序。

圖1-2

VisualStudioCode安裝程序（3）雙擊安裝圖標，彈出安裝窗口，選擇“我同意此協(xié)議”選項，然后點擊“下一步”按鈕。如圖1-3所示。

圖1-2

VisualStudioCode安裝界面圖1-3

VisualStudioCode安裝界面2024年12月18日JavaScript動態(tài)網頁設計6（4）進入“選擇附加任務”窗口，根據自己的需求點擊對應的選項，然后點擊“下一步”按鈕。如圖1-4所示。

圖1-4

“選擇附加任務”窗口2024年12月18日JavaScript動態(tài)網頁設計7（5）進入“準備安裝”窗口，點擊“安裝”按鈕進行程序的安裝。如圖1-5所示。

圖1-5

“準備安裝”窗口2024年12月18日JavaScript動態(tài)網頁設計8（6）完成程序安裝，如圖1-6所示。

圖1-6

完成安裝窗口2024年12月18日JavaScript動態(tài)網頁設計92、JavaScript初體驗下面通過一個案例來演示如何編寫一段簡單的JavaScript代碼?！痉独?-1】實現(xiàn)當網頁打開時自動彈出一個警告框，警告框的內容為“HelloJavaScript”。<script>

alert('HelloJavaScript');

</script>運行結果如圖1-10所示。

圖1-10

運行結果2024年12月18日JavaScript動態(tài)網頁設計10任務2初識JavaScriptJavaScript是一種運行在客戶端的腳本語言（Script是腳本的意思），不需要編譯，運行過程由js解釋器逐行來進行解釋并執(zhí)行。JavaScript控制了網頁的行為，如表單數(shù)據合法性驗證、網頁特效、數(shù)據計算、服務端開發(fā)（Node.js）、后端接口通信等。2024年12月18日JavaScript動態(tài)網頁設計11一、JavaScript的組成JavaScript是由ECMAScript、DOM、BOM這3部分組成的。①ECMAScript。是由ECMA國際進行標準化的一門編程語言。②DOM（DocumentObjectModel，文檔對象模型）。是W3C組織推薦的處理可擴展標記語言的標準編程接口。③BOM（BrowserObjectModel，瀏覽器對象模型）。是指瀏覽器對象模型，它提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。2024年12月18日JavaScript動態(tài)網頁設計12二、JavaScript的書寫JavaScript有3種書寫位置，分別為行內、內嵌和外部。1、行內式JS

可以將單行或少量JS代碼寫在HTML標簽的事件屬性中（以on開頭的屬性），如onclick。這種

方式可讀性差，引號易錯，不方便閱讀。<inputtype=”button”

value=”點擊一下”

onclick=”alert(‘helloeveryone’)”/>2024年12月18日JavaScript動態(tài)網頁設計132、內嵌式JS

可將多行JS代碼寫到<script>標簽中，內嵌JS是學習時常用的方式。

【范例1-2】使用內嵌式引用JS代碼，在控制臺輸出結果。

<script>

console.log(‘第一個JavaScript程序設計’);

</script>

運行結果如圖1-11所示。

圖1-11

內嵌式JS運行結果2024年12月18日JavaScript動態(tài)網頁設計143、外部JS文件

利用HTML頁面代碼結構化，把大段JS代碼獨立到HTML頁面之外，既美觀，也方便文件級別的復用。在HTML中使用<script>標簽引用外部JS文件，引用外部JS文件的<script>標簽中間不可以寫代碼，這種方式適合JS代碼量比較大的情況。<scriptsrc=”index.js”></script>2024年12月18日JavaScript動態(tài)網頁設計154、JavaScript注釋為了提高代碼的可讀性，JS和CSS一樣，也提供了注釋功能。JS中的注釋主要有兩種，分別是單行注釋和多行注釋。l

)單行注釋

//用來注釋單行文字。單行注釋的注釋方式如下：//我是一行文字，不想被JS引擎執(zhí)行，所以注釋起來2)多行注釋/**/用來注釋多行文字。多行注釋的注釋方式如下：/*

獲取用戶年齡和姓名

并通過提示框顯示出來*/2024年12月18日JavaScript動態(tài)網頁設計16任務3學習JavaScript語法JavaScript語言是一門功能強大、使用范圍廣泛的程序語言，其語法基礎包括變量、數(shù)據類型、運輸符、語句及函數(shù)等內容。下面主要介紹JavaScript中變量和運算符。2024年12月18日JavaScript動態(tài)網頁設計17一、變量1、變量的命名規(guī)則

在JavaScript中，為了避免代碼編寫出錯，變量進行命名時要遵守相關的規(guī)則，規(guī)則如下：·

不能以數(shù)字開頭，且不能包含空格、加號和減號等符號?！?/p>

嚴格區(qū)分大小寫?！?/p>

不能使用JavaScript的關鍵字或保留字。

為了提高代碼的可讀性，建議對變量進行命名時盡量做到“見其名知其義”。如果使用多個單詞組合命名，則用下劃線“_”分隔多個單詞，或者采用駝峰命名法，第一個單詞首字母小寫，后面單詞的首字母需要大寫。2024年12月18日JavaScript動態(tài)網頁設計182、變量的聲明和賦值

JavaScript常用的變量聲明方式有3種，分別是使用var、let、const關鍵字聲明，其中l(wèi)et和const是ES6標準中新增的聲明變量方式。（1）使用關鍵字var聲明變量和賦值使用var關鍵字既可以一次聲明一個變量，也可以一次聲明多個變量，聲明變量未賦值，表示不初始化變量，即變量默認未undefined。varage;

//聲明一個變量varname,age,sex;

//聲明多個變量，不同變量之間用逗號隔開age、name、sex是變量名，通過變量名來訪問內存中分配的空間。

“=”用來把右邊的值賦給左邊的變量空間中。2024年12月18日JavaScript動態(tài)網頁設計19（2）使用關鍵字let聲明變量和賦值關鍵字let聲明的用法類似于關鍵字var，但使用let聲明的變量只在塊級作用域中起作用。使用let既可以一次聲明一個變量也可以一次聲明多個變量。聲明變量未賦值表示不初始化變量，其變量默認未undefined。letage;

//聲明一個變量letname,age,sex;

//聲明多個變量，不同變量之間用逗號隔開（3）使用關鍵字const聲明變量和賦值使用const關鍵字聲明一次只能聲明一個變量，并必須初始化變量，且該值在整個運行過程中不可修改，如下。consta=5;//一次聲明一個變量2024年12月18日JavaScript動態(tài)網頁設計20（4）var和let可以多次對同一個變量賦值，一個變量被重新賦值后，它原有的值就會被覆蓋，變量值將以最后一次賦的值為準，如下。varprice=20;console.log(price);

//輸出結果為20price=50;console.log(price);

//輸出結果為502024年12月18日JavaScript動態(tài)網頁設計21二、基本數(shù)據類型JavaScript的基本數(shù)據類型有數(shù)值型、字符串型和布爾型，還有null（空型）、undefined（未定義型）、NaN（非數(shù)值）等。1、變量的數(shù)據類型

變量是用來存儲值的所在處，有變量名和數(shù)據類型。JavaScript是一種弱類型或者說動態(tài)語言。這意味著不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定。varage=30;//這是一個數(shù)值型varname=‘張三’;//這是一個字符串2024年12月18日JavaScript動態(tài)網頁設計222、數(shù)值型（Number型）

JavaScript的數(shù)值型包括整型和浮點型，整型通常使用十進制表示，還可以使用二進制、八進制或十六進制來表示，而浮點型數(shù)值為包含小數(shù)點的實數(shù)，可使用科學計數(shù)法來表示。vara=25;

//十進制表示的26varb=3.4;

//整數(shù)部分.小數(shù)部分varc=3.14E5;

//科學計數(shù)法表示1)

JavaScript中數(shù)值的最大和最小值。alert(Number.MAX_VALUE);

//

1.7976931348623157e+308alert(Number.MIN_VALUE);

//

5e-322024年12月18日JavaScript動態(tài)網頁設計232)

isNaN()用來判斷一個變量是否為非數(shù)字的類型，返回true或者false。【范例1-3】使用IsNaN()方法判斷。varage=21;vara=isNaN(age);console.log(a);

//falsevarb=”andy”;console.log(isNaN(b));

//true

運行結果如圖1-12所示。

圖1-12

isNaN()方法2024年12月18日JavaScript動態(tài)網頁設計243、布爾型（Boolean型）布爾型數(shù)值有兩個值，分別為true和false。在程序中也可用非0數(shù)值表示true，用數(shù)值0表示false。布爾型數(shù)值通常用于表示程序中的邏輯判斷結果。vard=true;

//給變量d賦值為布爾型數(shù)據truevare=false;

//給變量e賦值為布爾型數(shù)據false2024年12月18日JavaScript動態(tài)網頁設計254、字符串型（String型）

字符串用來表示文本數(shù)據，在JavaScript中使用單引號（‘）和雙引號（“）標注字符串。varstr1=“Javascript”;

//表示字符串”Javascript”varstr2=‘前端開發(fā)’;

//表示字符串’前端開發(fā)’1)

字符串引號嵌套JavaScript可以用單引號嵌套雙引號，或者用雙引號嵌套單引號。varstr1=‘我是”白富美”哈’;varstr2

=“我是’高富帥’哈”;2024年12月18日JavaScript動態(tài)網頁設計262)

字符串轉義符類似HTML里面的特殊字符，字符串也有特殊字符，我們稱之為轉義符。轉義符都是\開頭的，常用的轉義符如表1-1所示。表1-1

JavaScript常用的轉義符轉義符說明\n換行符，n是newline的意思\\斜杠

\\''單引號\"“雙引號\ttab縮進\b空格

，b是blank的意思2024年12月18日JavaScript動態(tài)網頁設計275、空型（Null）

空型是只有一個特殊的null值，該變量未指向任何對象。一個聲明變量給null值，里面存的值為空。

vara=null;

//null類型6、未定義型（undefined）

未定義型表示聲明的變量未被賦值，只有一個值，即為undefined。

varb;

console.log(b);

//輸出結果為undefined7、非數(shù)值型（NaN）

NaN（notaNumber）指程序運行時由于某種原因產生沒有意義的數(shù)值。

vara=6;

varb=‘厲害’;

console.log(a*b);

//輸出結果為NaN2024年12月18日JavaScript動態(tài)網頁設計28三、數(shù)據類型轉換1、獲取檢測變量的數(shù)據類型

typeof可用來獲取檢測變量的數(shù)據類型。不同類型的返回值如表1-2所示。

typeof

變量或者

typeof(變量)

varnum=20;

console.log(typeofnum)

//結果number

表1-2

不同類型的返回值類型例結果Stringtypeof“白白”stringNumbertypeof20numberBooleantypeoftruebooleanUndefinedtypeofundefinedundefinedNulltypeofnullobject2024年12月18日JavaScript動態(tài)網頁設計292、隱式類型轉換在JavaScript中定義一個變量時無需指定該數(shù)據類型，JavaScript會自動將某個數(shù)據轉換成另一個類型的數(shù)據。隱式類型轉換是通過運算自動對數(shù)據類型進行轉換。（1）如果兩個操作數(shù)中有一個是字符串，利用加號運算符運算時，為字符串拼接運算。拼接前會把與字符串相加的任何類型轉成字符串，再拼接成一個新的字符串。

2024+

“美好”;

//2024美好（2）除了加號運算符外，JavaScript會將操作數(shù)改為相應類型再進行運算，其中，true為1，false為0。

3-“8”;

//5

5*false;

//02024年12月18日JavaScript動態(tài)網頁設計303、顯式類型轉換顯式類型轉換指的是通過具體的方法進行轉換，增強代碼的可讀性。（1）將數(shù)據類型轉換為布爾型數(shù)據

在JavaScript中使用Boolean()可以將值轉換為布爾型數(shù)據，如果要轉換的值是空字符串、數(shù)字0、NaN、null和undefined，就會被轉換為false，其他的值被轉換為true。

Boolean(“

”);

//false

Boolean(0);

//false

Boolean(NaN);

//false

Boolean(null);

//false

Boolean(undefined);

//false

Boolean(123456);

//true2024年12月18日JavaScript動態(tài)網頁設計31（2）將數(shù)據轉換為數(shù)值型數(shù)據

在JavaScript中將數(shù)據轉換為數(shù)值型數(shù)據有3種方式，分別是parseInt()\parseFloat()和Number()。a）

parseInt()

將值轉換為整數(shù)。parseInt(”234.6”);

//234parseInt(”123abc”);

//123b）

parseFloat()

將值轉換為浮點數(shù)。parseFloat(”200.36”);

//200.36parseFloat(”456df”);

//456c）

Number()

將值轉換為數(shù)值。Number(”3.5”);

//3.5Number(”123ab”);

//NaN2024年12月18日JavaScript動態(tài)網頁設計32（3）將數(shù)據轉換為字符串數(shù)據

在JavaScript將數(shù)據轉換為字符串數(shù)據有2種方式，分別是String()或toString()，其中，String()是將任意數(shù)值轉換為字符串型數(shù)據，而toString()是將除了null和undefined以外的數(shù)據轉換為字符串數(shù)據。String(23);

//23String(”ab”);

//ab2024年12月18日JavaScript動態(tài)網頁設計33四、運算符運算符也被稱為操作符，是用于實現(xiàn)賦值、比較和執(zhí)行算數(shù)運算等功能的符號。JavaScript中常用的運算符有算術運算符、賦值運算符、關系運算符、邏輯運算符、賦值運算符、三元運算符、位運算符等。2024年12月18日JavaScript動態(tài)網頁設計341、算術運算符

算術運算符用于對兩個值或變量進行加減乘除等算術運算。JavaScript常用的算術運算符如表1-3所示。

表1-3

JavaScript常用的算術運算符運算符說明示例+加法運算，返回結果為兩個數(shù)值的和3+7;//返回值為10連接運算，只要有一側是字符串，進行連接運算“JavaScript”+“技術”；//返回值為“JavaScript技術”-減法運算11-5;

//返回值為6*乘法運算8*2;

//返回值為16/除法運算9/3;

//返回值為3%取模運算（取余）9%2;

//返回值為1++自增運算，x++；++xx=1;y=x++;

//y=1,

x=2;x=1;y=++x;

//y=2,

x=2;--自減運算，x--；--xx=6;y=x++;

//y=6,

x=5;x=6;y=++x;

//y=5,

x=52024年12月18日JavaScript動態(tài)網頁設計352、賦值運算符

賦值運算符用來把數(shù)據賦值給變量。初始化變量時使用的“=”就是最基本的賦值運算符，代表著將等號右邊的值賦給左邊變量。JavaScript常用的賦值運算符如表1-4所示。

表1-4

JavaScript常用的賦值運算符運算符說明示例=將右邊表達式的值賦給左邊的變量age=18;+=將左邊變量加上右邊表達式的值賦給左邊的變量a+=b;//相當于a=a+b;-=將左邊變量減去右邊表達式的值賦給左邊的變量a-=b;//相當于a=a-b;*=將左邊變量乘右邊表達式的值賦給左邊的變量a*=b;//相當于a=a*b;/=將左邊變量除以右邊表達式的值賦給左邊的變量a/=b;//相當于a=a/b;%=對左邊變量用右邊表達式的值求模，并得結果賦給左邊變量a%=b;//相當于a=a%b;&=對左邊變量和右邊表達式的值進行與運算，并得結果賦給左邊變量a&=b;//相當于a=a&b;|=對左邊變量和右邊表達式的值進行或運算，并將結果賦給左邊變量a|=b;//相當于a=a|b;2024年12月18日JavaScript動態(tài)網頁設計36【范例1-4】賦值運算符的應用如下。vara=10;console.log(a+=5);

//輸出結果為15varb=20;console.log(b*=5);

//輸出結果為100

運行結果如圖1-13所示。

圖1-13

賦值運算符的應用2024年12月18日JavaScript動態(tài)網頁設計373、關系運算符

關系運算符又叫比較運算符，是兩個數(shù)據進行比較時所用的運算符，比較運算后，其結果返回的是布爾值（true/false）。JavaScript常用的關系運算符如表1-5所示。表1-5

JavaScript常用的關系運算符運算符說明示例<小于3<4;

//返回值為true<=小于等于3<=3;//返回值為true>大于3>4;//返回值為false>=大于等于3>=4;//返回值為false==等于。只要值相等就是true“7”==7;//返回值為true!=不等于。值不相等就是false“7”!=7;//返回值為false===全等。對值和數(shù)據類型同時進行判斷“7”===7;

//返回值為false!==不全等。對值和數(shù)據類型同時進行判斷“7”!==7;

//返回值為true2024年12月18日JavaScript動態(tài)網頁設計384、邏輯運算符

邏輯運算符時用來進行布爾值運算的運算符，在程序中，如果要對條件作判斷，可以使用邏輯運算符。邏輯運算符的操作數(shù)和運算結果都是布爾值。JavaScript常用的關系運算符如表1-6所示。表1-6

JavaScript常用的邏輯運算符（給定x=2，y=9）運算符說明示例&&邏輯與。只有當兩個操作數(shù)的值都為true時，邏輯與的結果才為true，否則為falsex<6&&y>2;//返回值為true||邏輯或。只有當兩個操作數(shù)的值都為false時，邏輯或的結果才為false，否則為truex==4||y==4;//返回值為false！邏輯非。操作數(shù)的值為true時，邏輯非的結果為false；操作數(shù)的值為false時，邏輯非的結果為true！(x==y);//返回值為true2024年12月18日JavaScript動態(tài)網頁設計395、三元運算符

三元運算符包括“?”和“:”，用于組成三元表達式，其語法格式如下：條件表達式?表達式1:表達式2;其中，如果條件表達式的值為true，則返回表達式1的運行結果，否則，返回表式2運行的結果?！痉独?-5】三元運算符的應用如下。varnum=100;varresult=num>10?‘是的’

:‘不是的’;console.log(result);

//輸出結果為是的

運行結果如圖1-14所示。

圖1-14

三元運算符的應用2024年12月18日JavaScript動態(tài)網頁設計406、位運算符

位運算符用于對數(shù)據進行二進制運算，JavaScript常用的位操作運算符如表1-7所示。表1-7JavaScript常用的位運算符位操作運算符說明位操作運算符說明&與運算符<<左移|或運算符>>有符號右移^異或運算符>>>無符號右移~非運算符

2024年12月18日JavaScript動態(tài)網頁設計41【范例