JS基礎

一．          基礎

如今主流的前端框架：

jQuery,LayUI,EasyUI,Bootstrap,React,Vue,Angular,Ext JS,DWZ

 

學習JavaScript的目的主要有如下三點：

1． 客戶端表單驗證

2． 頁面動態效果

3． jQuery的基礎

 

JavaScript是一種描述性語言，也是一種基於對象(Object)和事件驅動(Event Driven)的，並具備安全性能的腳本語言，JQuery是對JS的封裝。

特色：主要用來在HTML頁面添加交互行爲

  是一種腳本語言，語法與Java相似

  通常用來編寫客戶端的腳本

  是一種解釋性語言，邊執行邊解釋

JavaScript是遵循ECMAScript標準的一種實現。

 

一個完整的JavaScript是由

1. ECMAScript標準

不與任何具體瀏覽器綁定，主要描述了：

l  語法

l  變量和數據類型

l  運算符

l  邏輯控制語句

l  關鍵字、保留字

l  對象

1. 瀏覽器對象模型(Browser Object Model,BOM)

提供獨立於內容與瀏覽器窗口進行交互的對象，使用瀏覽器對象模型能夠實現與HTML的交互

1. 文檔對象模型(Document Object Model,DOM)

是HTML文檔對象(HTML DOM)定義的一套標準方法，用來訪問和操縱HTML文檔

 

JS的基本結構：能夠位於任何地方body、head、html中均可以

<script type="text/javascript">

          JavaScript 語句;

   </script>

執行原理

瀏覽器客戶端向服務器發送請求

數據處理：服務器處理

發送響應:服務器向客戶端發送最終效果

 

好處：包含JavaScript的頁面只要下載一次便可，這樣能減小沒必要要的通訊

JavaScript程序由客戶端執行，能減輕服務器壓力

 

引用JavaScript嵌入網頁的方式

1. 內部JavaScript文件

直接使用<script>標籤，適用於代碼較少，而且網站中的每一個頁面使用JavaScript均不一樣的狀況

1. 使用外部JavaScript文件

適用在幾個頁面中實現相同的效果

<script type="text/javascript" src="文件名"></script>

1. 直接在HTML標籤中

適用於極少代碼，僅用於當前標籤，當時增長了HTML代碼

<input type="button" name="btn" id="btn" value="彈出消息框" onclick="javascript:alert('歡迎你')"/>

• onclick點擊

 

 

變量的聲明和賦值

變量是var聲明的，語法：

var 合法變量名；

如：var whidth=20;

命名規則：由數字、字母、下劃線和$組成，首字母不能爲數字。

JS區分大小寫

能夠不經過聲明直接使用，但容易出錯

JS中的基本數據類型：

undefined     (未定義類型)

null          (空類型)

number        (數值類型)

String        (字符串類型)

boolean        (布爾類型)

object

1.typeof:用來判斷一個值或變量究竟屬於哪一種數據類型

語法:typeof(變量或值)

返回值：

l  undefined：本類型的變量，返回本類型的結果

l  number：本類型的變量，返回本類型的結果

l  String：本類型的變量，返回本類型的結果

l  boolean：本類型的變量，返回本類型的結果

l  object:若是變量是null類型,或是一種引用類型,如函數、對象、數組，則返回object。

2.undefined類型

此類型只有一個值，即undefined。當聲明的變量未初始化時，該變量的默認值爲undefined。例：var width;沒有初始值，被賦予undefined。

3.null類型

能夠用來檢測某個變量是否被賦值。undefined時unll派生的，所以js把他們定義爲相等的。

4.number類型

既能夠表示32位整數，又能夠表示64位浮點。

其中整數能夠表示位八進制或十六進制，八進制首數字必須位0其後能夠爲(0~7),十六進制首字母必須爲0，後能夠是(0~9和A~F)

NaN(Not a Number)表示非數，是number類型

5.String類型

    定義:字符串是被單引或雙引括起來的文本

如：var string1=’string’或」string」;

屬性和方法:有一個length屬性，表示字符串長度(包括空格)

格式：字符串對象.length;

var 字符串對象 = 「str ing」;

var strLength = str.length;

strLength返回長度爲7。

字符串對象的使用語法：字符串對象.方法名;

String對象經常使用方法

方法	描述
indexOf(str,index)	查找某個指定的字符串在字符串位置中首次出現的位置，若是沒有，返回-1
char(index)	返回在指定位置出現的字符
toLowerCase()	把字符串轉化爲小寫
toUpperCase()	把字符串轉化爲大寫
substring(index1,index2)	返回位置於指定索引index1和index2之間的字符串，包含index1位置不包含index2
split(str)	將字符串分割爲字符串數組

6.boolean類型

是ECMAScript中經常使用的類型之一,包含true和false

 

數組

建立數組:var 數組名 = new Array(長度);

或：var 數組名 = [「one」,」two」,」three」,」four」];

    訪問數組元素：數組名[下標];0表明第一個元素

經常使用的屬性和方法

類別	名稱	描述
屬性	length	設置或返回數組中元素的數目
方法	join()	把數組的全部元素放入一個字符串，經過一個分隔符進行分割
	sort()	對數組排序
	push()	向數組末尾添加一個或多個元素，並返回新的長度

length

返回值類型爲整型，若是建立時指定了長度，則返回指定長度

join()

指定一個分隔符把數組元素放在一個字符串中：join(分隔符);

      <script type="text/javascript">

          var fruit = "apple,orange,peach,banana";

          var arrList = fruit.split(",");

          var str = arrList.join("-");

          document.write("分割前:"+fruit+"<br/>");

          document.write("使用\"-\"從新鏈接後"+str)

      </script>

 

 

運算符號

類別	符號
算術運算符	+、-、*、/、%、++、--
比較運算符	>、<、>=、<=、==、!=、===、!==
邏輯運算符	&&、||、!
賦值運算符	=、+=、-=

==表示等於，===表示恆等，!==表示不恆等，==能夠在比較時轉換數據類型，===只要類型不匹配，就返回false

 

邏輯控制語句：

條件結構：

if結構：

if(表達式){

//語句

}else{

//語句

}

若是if或else後只有一條語句，能夠省略大括號

switch結構：

       switch(表達式){

case 1:

語句1

break;

case 2;

語句2

break;

default:

語句n

break;

}

循環結構：

for:

for(初始化;條件;增量或減量){

語句;

}

 

       while:

while(條件){

語句；

}

 

do-while:

do{

       語句

}while(條件)

 

       for-in:用於對數組或對象的屬性進行循環

for(變量 in 對象){

語句;

}

             

中斷循環：

break:當即退出整個循環

continue：退出當前循環，根據條件判斷是否進入下一次循環

 

註釋：

單行://

多行：/*開始    結束*/

 

關鍵字
break	case	catch	continue	defaule
delete	do	else	finally	for
function	if	in	instanceof	new
return	switch	this	throw	try
typeof	var	void	while	with

 

保留字是某種意義上爲未來的關鍵字而保留的單詞

保留字
abstract	boolean	byte	char	class
const	debugger	double	enum	export
extents	final	float	goto	implements
import	int	interface	long	native
package	private	protected	public	short
static	super	synchronized	throws	transient
voaltile

 

經常使用的輸入/輸出

警告(alert)：alert(「提示信息」);   將彈出對話框，內容爲變量的值或表達式的值

提示(prompt):prompt(「提示信息」,」輸入框的默認內容」);   若是取消，返回null

 

大小寫：JavaScript關鍵字永遠都是小寫；內置對象以大寫字母開頭；對象名稱一般是小寫，但其方法常常是開頭小寫，以後大寫

 

變量、函數、對象的名稱

能夠包括大小寫字母、數字、下劃線、$符號，但必須以字母、下劃線、$開頭

 

分號

容許自行決定是否使用，可是不符合標準

 

網頁開發人員工具

       Elements:查看和編輯當前頁面中的HTML和SCC元素；

       Console:顯示腳本中所輸出的調試信息，或運行測試腳本等；

       Sources:查看和調試當前頁面所加載的腳本源文件；

       Network:查看HTTP請求的詳細信息；

       TimeLine:查看腳本執行時間、頁面元素渲染時間等；

       Profiles:查看CPU執行時間與內存佔用信息；

       Resource:查看當前頁面所請求的資源文件；

       Audits:優化前端頁面、加速網頁加載速度等；

 

alert()方法

       將不肯定的數據以信息框的方式顯示。

 

經常使用系統函數

       parseInt():可解析一個字符串，並返回一個整數數字，會查看位置0處的字符，若是不是數字，返回NaN，若是是，返回到不是數字的字符爲止

              parseInt(「字符串」);

       parseFloat():可解析一個字符串，並返回一個浮點數,第一個小數點是有效字符，第二個小數點以後的數字被看做無效

parseFloat(「字符串」);

isNaN():用於檢測參數是不是非數字，若是是數字返回false,是非數字值返回true

isNaN(值);

系統函數：

var 函數名= parseInt(‘長得像數字的字符串’);

var 函數名= parseFloat(‘長的像數字的字符串’);

定義函數

帶參函數

function 函數名(參數1，參數2，參數3，……){

語句;

[return返回值]

}

不帶參函數

function 函數名(){

語句；

}

匿名函數：

(function(){

語句；

})();

 

       參數可選，沒有類型檢查和類型限定

 

調用函數：調用時必須指定函數名及其後面的參數(若是帶參)

事件名 = 「函數名()」;

若是有同名的，則以最後一個爲準

 

變量的做用域

全局變量：是在函數以外的腳本中聲明的變量，做用範圍是該變量以後全部的語句

局部變量：在函數內聲明，只在該函數中且位於該變量以後的語句可使用

 

事件

事件是網頁特效的靈魂，當與瀏覽器進行交互的時候瀏覽器會觸發各類事件。

常見事件

名稱	說明
onload	一個網頁或圖片完成加載
onlick	鼠標單擊某個對象
onmouseover	鼠標指導移到某元素上
onkeydown	某個鍵盤按鍵被按下
onchange	域的內容被改變