JavaScript語言基礎(chǔ)知識有哪些

這篇文章主要講解了“JavaScript語言基礎(chǔ)知識有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript語言基礎(chǔ)知識有哪些”吧！

了解JavaScript語言

JavaScript語言是一種免費的客戶端腳本語言，其能夠讓你往超文本標(biāo)記語言(Hypertext Markup Language，HTML)頁面中加入交互行為?？蛻舳?client-side)意味著JavaScript運行在瀏覽器中，而不是用在服務(wù)器端。在網(wǎng)頁被服務(wù)器送達(dá)并被瀏覽器加載后，客戶端腳本就允許用戶與網(wǎng)頁進(jìn)行交互。例如，Google Maps就是使用JavaScript語言來支持用戶與地圖之間的交互的，交互的方式有移動地圖、放大和縮小等。沒有JavaScript語言的話，網(wǎng)頁需要為每次和每個用戶的交互行為進(jìn)行刷新，當(dāng)然，除非頁面用到了諸如Adobe Flash或是Microsoft® Silverlight一類的插件。JavaScript語言不需要插件。

因為JavaScript語言為加載后的網(wǎng)頁提供用戶交互行為，因此開發(fā)者通常會用它來實現(xiàn)下面的一些功能：

1. 動態(tài)添加、編輯和刪除HTML元素及它們的值。

2. 在提交之前校驗表單。

3. 在用戶的計算機(jī)上創(chuàng)建cookies以用于在將來的訪問中保存和檢索數(shù)據(jù)。

在開始之前，只要知道語言的幾個基本原則就行了：

1. 要在HTML文件中把JavaScript代碼包含進(jìn)來的話，你必須要把代碼放在腳本標(biāo)簽(script)的內(nèi)部，并加入text/javascript這一類型(type)屬性(清單1)。

2. 所有的JavaScript語句以分號結(jié)束。

3. 語言是大小寫敏感的。

4. 所有的變量名都必須以字母或是下劃線作為開始。

5. 你可以使用注釋來說明腳本中的某些行，注釋的編寫方式是，以一個雙斜線(//)為開始，后面跟著注釋。

6. 你還可以使用注釋來把腳本注釋掉。要注釋腳本的多行的話，一種好的做法是使用/* 你的腳本在這里 */。任何位于星號之內(nèi)的腳本在執(zhí)行過程中都不會運行。

清單1.需要使用script標(biāo)簽和type屬性來把JavaScript代碼包含到HTML文件中來

<script  type="text/javascript"></script>

要隱藏瀏覽器不支持的JavaScript的代碼，或是用戶想把代碼關(guān)掉的話，只要在JavaScrip語句的前后使用注釋標(biāo)簽就可以了(清單2)。

清單2. 使用注釋來隱藏瀏覽器不支持的JavaScript代碼

<script type="text/javascript">   <!--  Example statement here  //-->  </script>

最常用的把JavaScript代碼包含到網(wǎng)頁中的方式是，使用腳本(script)標(biāo)簽中的src屬性來把代碼從一個外部的JavaScript文件中加載進(jìn)來(清單3)。

清單3. 在HTML文件中包含外部的JavaScript文件

<script type="text/javascript" src="path/to/javascript.js" kesrc="path/to/javascript.js"></script>

外部JavaScript文件是最常見的包含JavaScript代碼的方式，這是有一些很實在的原因的：

1. 如果你的HTML頁面中有著更少的代碼的話，搜索引擎就能夠以更快的速度來抓取和索引你的網(wǎng)站。

2. 保持JavaScript代碼和HTML的分離，這樣代碼顯得更清晰，且最終更易于管理。

3. 因為可以在HTML代碼中包含進(jìn)多個JavaScript文件，因此你可以把JavaScript文件分開放在web服務(wù)器上不同的文件目錄結(jié)構(gòu)中，這類似于圖像的存放方式，這是一種更容易管理代碼的做法。清晰、有條理的代碼始終是讓網(wǎng)站管理變得容易起來的關(guān)鍵。

變量

變量存儲數(shù)據(jù)，這些數(shù)據(jù)稍后要被檢索的或是要使用新的數(shù)據(jù)來更新。存儲在變量中的數(shù)據(jù)可以是一個值或表達(dá)式，JavaScript語言有三種類型的表達(dá)式，表1對此做了描述。

表1. JavaScript表達(dá)式

表達(dá)式描述

算術(shù)　計算的結(jié)果為一個數(shù)值

字符串計算的結(jié)果為一個字符串

邏輯　計算的結(jié)果為一個布爾值(true或者false)

變量有兩種類型：局部的和全局的。局部變量使用var這一關(guān)鍵字來聲明，聲明全局變量則不需要使用var關(guān)鍵字。使用了var關(guān)鍵字的變量被看成是 局部的，因為除了你聲明它的地方所處的范圍之外，它不能在其他任何地方被訪問。例如，如果你在一個函數(shù)(在將近文章的結(jié)尾部分我會談?wù)摰?的內(nèi)部聲明了一個局部變量的話，該變量就不能在該函數(shù)之外被訪問，這就使得它是這一函數(shù)局部的。如果你沒有使用var關(guān)鍵字聲明這同一變量的話，它在整個腳本中就都是可被訪問到的，而不僅限定于只能在那個函數(shù)中被訪問。

清單4給出了一個局部變量的例子，其被命名為num，并被賦值為10。

清單4. 聲明一個局部變量

var num = 10;

要在腳本中的另一個位置訪問num變量的值的話，你只需要通過名稱來引用該變量就可以了，如清單5所示。

清單5. 訪問變量的值

document.write("The value of num is: "+ num);

這一語句的結(jié)果是“The value of num is: 10”。這一document.write函數(shù)把數(shù)據(jù)寫到網(wǎng)頁中，在本文余下的部分中你都是使用這一函數(shù)來把例子寫到網(wǎng)頁中。

要把算術(shù)表達(dá)式存儲到變量中的話，你只要把變量指配給計算的值就可以了，如清單6所示。計算的結(jié)果而非算式本身被存儲在變量中。因此，我們又一次得到這一結(jié)果“The value of num is: 10”。

清單6. 存儲算術(shù)表達(dá)式

var num = (5 + 5);  document.write("The value of num is: "+ num);

要改變變量的值的話，通過你為變量所分配的名稱來引用變量，并使用等號來為其賦一個新的值(清單7)。這次的不同之處在于你不需要使用var關(guān)鍵字，因為變量已經(jīng)聲明過了。

清單7. 改變現(xiàn)有變量的值

var num = 10;  document.write("The value of num is: "+ num);   // 把num的值更新成15  num = 15;  document.write("The new value of num is: "+ num);

這一腳本的結(jié)果先是一句“The value of num is: 10”，后面跟著“The new value of num is: 15”。除了講解變量之外，這一節(jié)內(nèi)容還引入了下一個主題，也就是運算符。你用來把值賦給變量的等號(=)就是一個賦值運算符，以及你用在5+5中的加號(+)是一個算術(shù)運算符。下一節(jié)內(nèi)容談?wù)揓avaScript語言中的所有變量運算符及其用法。

運算符

在執(zhí)行JavaScript語言中的任何運算時，你都需要運算符。運算包括了加法、減法、比較等。JavaScript語言中有四種運算符。

1. 算術(shù)

2. 賦值

3. 比較

4. 邏輯

算術(shù)運算符

算術(shù)運算符執(zhí)行基本的數(shù)學(xué)運算，比如說加減乘除等。表2列出并描述了JavaScript語言中的所有可用的算術(shù)運算。

表2. 算術(shù)運算符

運算符描述

+ 加法

- 減法

* 乘法

/ 除法

% 取模(找出余數(shù))

++　 遞增

--遞減

賦值運算符

算術(shù)運算符執(zhí)行基本的數(shù)學(xué)運算，而賦值運算符則是把值賦給JavaScript變量。當(dāng)你在前面一節(jié)中把值賦給變量時，你已經(jīng)見到了最常用的賦值運算符。表3列出并描述了JavaScript語言中所有可用的賦值運算符。

表3. 賦值運算符

運算符描述

=等于

+=把加法值(變量加上值的結(jié)果值)賦給變量

-=把減法值(變量減去值的結(jié)果值)賦給變量

*=把乘法值(變量乘上值的結(jié)果值)賦給變量

/=把除法值(變量除以值的結(jié)果值)賦給變量

%=把取模值(變量對值取模的結(jié)果)賦給變量

你已經(jīng)看到了如何使用等號來把值或是表達(dá)式賦給變量，但現(xiàn)在我會給展示如何使用一個令人稍加困惑的賦值運算符。把一個加法值賦給一個變量可能是一個很奇怪的概念，但實際上很簡單(清單8)。

清單8. 把一個加法值賦給一個變量

var num = 10;  document.write("The value of num is: "+ num);   // 把num的值更新為15  num += 5;  document.write("The new value of num is: "+ num);

這一腳本的結(jié)果是“The value of num is: 10”后面跟著“"The new value of num is: 15”。你可以看到，這一腳本中的運算符把加法值賦給了變量。這也可以當(dāng)作是清單9中所編寫的腳本的一種簡短寫法。

清單9. 把加法值賦給變量的一種更長的寫法。

var num = 10;  document.write("The value of num is: "+ num);   // 把num的值更新為15  num = (num + 5);  document.write("The new value of num is: "+ num);

比較運算符

比較運算符確定變量或是它們的值之間的關(guān)系。你在條件語句中使用比較運算符，通過比較變量或是它們的值來計算出語句為true還是為false，以此創(chuàng)建邏輯。表4列出并描述了JavaScrpit語言中所有可用的比較運算符。

表4. 比較運算符

運算符描述

==等于

===　全等，用于值和對象類型

!=不等于

>大于

<小于

>=　大于或等于

<=　小于或等于

在編寫任何類型的邏輯時，變量和值的比較都是最基本的。清單10中的例子展示了如何使用等于這一比較運算符(==)來確定10是否等于1。

清單10. 使用比較運算符

document.write(10 == 1);

邏輯運算符

邏輯運算符通常是用來組合條件語句中的比較運算符。表5列出并描述了JavaScript語言中的所有可用的邏輯運算符。

表5. 邏輯運算符

運算符描述

&&與

||或

! 非

現(xiàn)在在變量和運算符方面你已經(jīng)有些經(jīng)驗了，是時候了解如何創(chuàng)建一種比簡單的變量有著更多存儲內(nèi)容的機(jī)制了。

數(shù)組

數(shù)組類似于變量，但不同之處在于它們可以把多個值和表達(dá)式放在一個名稱之下。把多個值存放在一個變量中，這種做法造就了數(shù)組的強大。你可存放在 JavaScript數(shù)組中的數(shù)據(jù)的類型和數(shù)量都沒有限制，在腳本中聲明數(shù)組之后，你就可以隨時訪問數(shù)組中的任何項的任何數(shù)據(jù)。雖然數(shù)組可以保存 JavaScript語言的任何數(shù)據(jù)類型，包括其他數(shù)組，但最常見的做法是，把相類似的數(shù)據(jù)存儲在同一個數(shù)組中，并給它指定一個與數(shù)組項有關(guān)聯(lián)意思的名稱。清單11提供的例子使用了兩個獨立的數(shù)組來各自存放相類似的數(shù)據(jù)。

清單11. 把相類似的值存放在數(shù)組中

var colors = new Array("orange", "blue", "red", "brown");  var shapes = new Array("circle", "square", "triangle", "pentagon");

正如你見到的那樣，是可以把所有的這些數(shù)據(jù)項都保存在一個數(shù)組中，但這是不符合邏輯的，且有可能會在以后給腳本帶來問題，比如說在識別數(shù)組中存放的是什么數(shù)據(jù)時。

訪問數(shù)組中的值很容易，但這里有一個陷阱存在。數(shù)組的ID總是從0而不是從1開始的，在***次使用的時候你可能會有些困惑。ID從0開始遞增，例如0、1、2、3等。要訪問數(shù)組項的話你就必須要使用它的ID，其指向子項在數(shù)組中的位置(清單12)。

清單12. 把相類似的值保存在一個數(shù)組中

var colors = new Array("orange", "blue", "red", "brown");   document.write("Orange: "+ colors[0]);  document.write("Blue: "+ colors[1]);  document.write("Red: "+ colors[2]);  document.write("Brown: "+ colors[3]);

也可以給數(shù)組中的某個位置賦值，或是更新數(shù)組中的某項的值，就像前面訪問數(shù)組中的項的做法一樣(清單13)。

清單13. 給數(shù)組中的特定位置賦值

var colors = new Array();  colors[0] = "orange";  colors[1] = "blue";  colors[2] = "red";  colors[3] = "brown";  document.write("Blue: "+ colors[1]);   // 把blue更新成purple  colors[1] = "purple";  document.write("Purple: "+ colors[1]);

現(xiàn)在你已經(jīng)很好地了解了變量、運算符和數(shù)組，接下來把你所學(xué)的東西運用到實踐中，開始創(chuàng)建一些邏輯。

條件語句

條件語句是創(chuàng)建腳本語言或是編程語言中各種類型的邏輯的骨架，JavaScript語言也不例外。條件語句基于你所寫的條件來確定要采取的行為，JavaScript語言有四種編寫條件語句的方式，表6對此做了描述。

表6. 條件語句

語句描述

if如果某個特定條件為true的話就執(zhí)行腳本

if...else　如果某個特定條件為true的話就執(zhí)行某個腳本，

如果條件為false的話則執(zhí)行令一個腳本

if...else if...else　 如果不限個數(shù)的多個條件中之一為true的話就執(zhí)行某個腳本，

如果所有的條件都為false的話 就執(zhí)行其他的腳本

switch　執(zhí)行許多腳本中的一個

如果你只想在某個條件為true時執(zhí)行某個腳本的話，就使用if語句。清單14展示了如何使用帶有比較運算符的if語句來在條件為true時執(zhí)行腳本。

清單14. 使用if語句

var num = 10;  if(num == 5)  {     document.write("num is equal to 5");  }

如果你打算在某個條件為true時執(zhí)行一個腳本，而在條件為false時執(zhí)行另一個腳本話，那么使用if...else語句，如清單15所示。

清單15. 使用if...else語句

var num = 10;  if(num == 5)  {     document.write("num is equal to 5");  }  else {     document.write("num is NOT equal to 5, num is: "+ num);  }

如果要基于不同的條件來執(zhí)行不同的腳本的話，則使用if...else if...else語句，如清單16所示。

清單16. 使用if...else if...else語句

var num = 10;  if(num == 5)  {       document.write("num is equal to 5");  }  else if(num == 10)  {     document.write("num is equal to 10");  }  else  {    document.write("num is: "+ num);  }

Swith語句不同于if語句，它們不能用來確定變量值是否大于或是小于另一個值。清單17給出的例子說明了使用switch語句來確定要執(zhí)行的腳本的適當(dāng)時機(jī)。

清單17. 使用switch語句

var num = 10;  switch(num)  {     case 5:        document.write("num is equal to 5");        break;     case 10:        document.write("num is equal to 10");        break;     default:        document.write("num is: "+ num);  }

你可能已經(jīng)注意到清單17用到了case子句、break語句和default子句。這些子句和語句對switch語句來說都是很重要的部分。case子句確定了switch的值是否與子句中用到的數(shù)據(jù)值相等;break語句中斷&mdash;&mdash;或是停止&mdash;&mdash;switch語句執(zhí)行語句的余下部分;而default子句則標(biāo)明了在沒有case語句執(zhí)行的情況下或是已執(zhí)行的case語句沒有break語句的情況下，缺省要運行的腳本。例如，清單18說明了在已執(zhí)行的case語句中如果沒有break語句的話，多個case語句和default語句是如何執(zhí)行的。

清單18. 通過不包含break的方式來執(zhí)行多行代碼

var num = 10;  switch(num)  {     case 5:        document.write("num is equal to 5");        break;     case 10:        document.write("num is equal to 10");     default:        document.write("num is: "+ num);  }

這一腳本的結(jié)果先是一句“num is equal to 10”，后面再跟著一句“num is: 10”。這種情況有時被稱為switch直落。

正如本節(jié)開頭提到的那樣，條件語句是任何腳本語言或是編程語言中的所有邏輯的骨架，不過如果不用函數(shù)的話，你得到的代碼就會像糾纏不清的一團(tuán)亂麻。

函數(shù)

有許多理由可用來證明函數(shù)是很有用的。函數(shù)是那些只能由事件或是函數(shù)調(diào)用來執(zhí)行的腳本的容器，因此，在瀏覽器最初加載和執(zhí)行包含在網(wǎng)頁中的腳本的時候，函數(shù)并沒有被執(zhí)行。函數(shù)的目的是包含那些要完成某個任務(wù)的腳本，這樣你就隨時都能夠執(zhí)行該腳本和運行該任務(wù)。

構(gòu)建一個函數(shù)很容易，其以function這一關(guān)鍵字作為開始，接著是一個空格，然后是函數(shù)的名稱。你可以選擇任何的字串來作為函數(shù)的名稱，不過讓函數(shù)的名稱和其要執(zhí)行任務(wù)之間有某種關(guān)聯(lián)意思是很重要的。清單19給出了一個函數(shù)例子，該函數(shù)修改一個現(xiàn)有變量的值。

清單19. 構(gòu)建一個簡單的函數(shù)

var num = 10;  function changeVariableValue()  {     num = 11;  }  changeVariableValue();  document.write("num is: "+ num);

清單19中的例子不僅說明了如何構(gòu)建一個函數(shù)，還說明了如何調(diào)用函數(shù)來修改變量的值。在這一例子中你能夠修改變量的值是因為，變量是在主腳本范圍里做聲明的，函數(shù)也是一樣，因此函數(shù)知道變量的存在。然而，如果變量是在函數(shù)的內(nèi)部做聲明的話，那么在函數(shù)的外部你是不能訪問該變量的。

函數(shù)還能夠通過函數(shù)的參數(shù)來接受數(shù)據(jù)，函數(shù)可以有一個或多個形式參數(shù)，函數(shù)調(diào)用基于函數(shù)的形式參數(shù)個數(shù)可以有一個或多個實際參數(shù)。形式參數(shù)(形參，parameter)和實際參數(shù)(實參，argument)常會被弄混;形參是函數(shù)定義的組成部分，而實參則是在調(diào)用函數(shù)時用到的表達(dá)式。清單20給出了一個函數(shù)例子，該函數(shù)帶有形參，函數(shù)調(diào)用則用到了實參。

清單20. 使用函數(shù)參數(shù)

var num = 10;  function increase(_num)  {     _num++;  }  increase(num);  document.write("num is: "+ num);

這一例子中的函數(shù)遞增了任何傳遞給它的實際參數(shù)的值，該例中的實際參數(shù)是一個你已預(yù)先聲明了的變量。通過把它作為一個實際參數(shù)傳遞給函數(shù)，你把它的值遞增成了11。

return語句在函數(shù)中也是常被用到的，它們在執(zhí)行完函數(shù)中的腳本后返回一個值。例如，你可以把函數(shù)返回的值賦給一個變量。清單21中的例子說明了在執(zhí)行腳本之后，如何從函數(shù)中返回一個值。

清單21. 在函數(shù)中使用return語句

function add(_num1, _num2)  {     return _num1+_num2;  }  var num = add(10, 10);  document.write("num is: "+ num);

這一腳本的結(jié)果是“num is: 20”。這一函數(shù)的好處是，它可以把你傳遞給它的任意兩個數(shù)字相加并返回相加后的值，你可以把該值賦給任何變量，而不是像清單20那樣總是改變同一個變量的值。

循環(huán)

正如你已經(jīng)見到的那樣，數(shù)組是存儲大量可重用數(shù)據(jù)的一種很棒的方式。但這不過是一個開始;for和while循環(huán)提供了遍歷這些數(shù)組、訪問它們的值和使用它們來執(zhí)行腳本的功能。

JavaScript語言中最常用到的循環(huán)類型是for循環(huán)。for循環(huán)通常是這樣構(gòu)成的，先是一個賦了數(shù)值的變量，然后該變量使用一個比較運算符來和另一個值做比較，***該數(shù)字值被遞增或是遞減。for循環(huán)中的比較通常是確定初始變量的數(shù)值是否小于或是大于另一個數(shù)值，接著在條件為true的這段時間內(nèi)，循環(huán)運行，變量遞增或是遞減直到條件的計算結(jié)果為false。清單22給出的例子說明了如何編寫一個for循環(huán)，當(dāng)數(shù)值小于數(shù)組的長度時循環(huán)運行。

清單22. 構(gòu)建一個for循環(huán)并遍歷一個數(shù)組

var colors = new Array("orange", "blue", "red", "brown");  for(var i=0; i  {     document.write("The color is: "+ colors[i] +"  ");  }

數(shù)組的length屬性提供了一個與數(shù)組中的子項個數(shù)相等的數(shù)值，再一次說明，這里容易讓你出錯的一點是，數(shù)組的ID是從0開始的，因此，如果數(shù)組中有4個子項的話，長度就是4，但數(shù)組中的索引則是0、1、2和3&mdash;&mdash;沒有4。

另一種循環(huán)類型是while循環(huán)，它們的執(zhí)行速度比for循環(huán)快，但適用在一些不是遍歷數(shù)組的情況中，比如說當(dāng)某個條件為true時執(zhí)行某個腳本。清單23展示了如何編寫這樣的一個while循環(huán)，即當(dāng)數(shù)值變量小于10時執(zhí)行某個腳本。

清單23. 構(gòu)建while循環(huán)

var i = 0;  while(i<10)  {     document.write(i +"  ");     i++;  }

可以注意到，while循環(huán)中的腳本包含了一行代碼，該行代碼疊加數(shù)值變量直到while循環(huán)中的條件為false為止。沒有這行代碼的話，你得到的就是一個無限循環(huán)。

感謝各位的閱讀，以上就是“JavaScript語言基礎(chǔ)知識有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript語言基礎(chǔ)知識有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！