前端學習記錄（JS篇）

javascript簡介

javascript俗稱js，js的正式名稱是ECMAScript，是網景公司Netscape公司開發的一種基於客戶端瀏覽器、基於面向對象、事件驅動式的網頁腳本語言。主要用於：交互式操做，表單驗證，網頁特效，web遊戲，服務器腳本開發等；

特色

• js是一種解釋性腳本編程語言
• js是基於對象的腳本編程語言
• 簡單性
• 安全性（不能訪問本地硬盤）
• 動態性的
• 跨平臺性（依賴瀏覽器，與操做系統無關）

三種使用方法

(1)使用onclick:屬性構建執行js代碼

<a href="#" onclick="alert(1)">點擊</a>

(2)使用<script../>標籤來包含js代碼

<script type="text/javascript">
    alert('Hello, world');
</script>

(3)導入外部的javascript文件，讓html頁面和js腳本分離

<script src="outer.js" type="text/javascript"></script>

---

javascript變量和數據類型

js是弱類型腳本語言，使用變量以前，能夠無需定義，當使用某個變量的時候直接使用便可。主要分爲如下兩種定義方式：
(1)隱式定義：直接給變量賦值(隱式變量聲明的時候必須賦初值)
a = 10;
(2)顯示定義：使用var關鍵字定義變量(使用以前必須賦初值，否則會報undefined錯誤)
var a = 10;

變量命名規則：

• 首字母必須是字母、下劃線或者$符號。
• 餘下的字母能夠是下劃線、$、任意字母或數字。
• 變量名不能使用關鍵字
• 變量名對大小寫敏感。

js是弱類型腳本語言，聲明變量時無需指明變量的數據類型，js是解釋時動態決定的，數據保存在內存中時也是有數據類型的，經常使用數據類型以下：

• 數值類型(number)：包含整數和浮點數
• 布爾類型(boolean)：只有true或false兩個值
• 字符串類型(string)：字符串必須用單引號或雙引號括起來
• 對象類型(object)
• 數組類型（array）
• 未定義類型(undefined)：專門用來肯定一個已經建立可是沒有初值的變量
• 空類型(null)：用來代表某個變量的值爲空
• NaN：非數值型

注：undefined和null的值相等，類型不一樣。 兩個字符串是否相等，可用==來判斷。

數據類型轉換：

+號或者toString()：數值number類型轉換成字符串
parseInt()：將字符串轉爲整型
parseFloat()：將字符串轉換爲浮點型

注意：

parseInt('67red') -> 67(字符串轉爲整型的時候會自動截取前面的數字，後面的忽略)
parseInt('red67') -> NaN(字符串前面沒有數字，會報not a number錯誤)

字符串經常使用方法：

stringObject.charAt(index)：獲取字符串特定索引處的字符 
index：下標(若是不在0～stringObject.length-1的範圍內，返回'') 
返回值：string

stringObject.toUpperCase()：將字符串的全部字符轉換成大寫字母 
返回值：string

stringObject.toLowerCase()：將字符串的全部字符轉換成小寫字母 
返回值：string

stringObject.substring(start, end)：提取字符串中介於兩個指定下標之間的字符 
start：必須，字符串中開始位置 
end：非必需，字符串中結束位置，若是不指定，會一直到字符串的結尾 
返回值：string

arrayObject.slice(start, end)：提取字符串中介於兩個指定下標之間的字符，可指定負數 
start：必須，字符串中開始位置 
end：非必需，字符串中結束位置，若是不指定，會一直到字符串的結尾 
返回值：string

stringObject.indexOf(searchvalue,fromindex)：返回某個指定的字符串值在字符串中首次出現的位置 
searchvalue：必須，須要查找的字符串 
fromindex：非必須，字符串的指定位置，若是不指定，會從字符串的開始位置開始查找 
返回值：number

stringObject.replace(regexp/substr,replacement)：將字符串中的某個子串以特定的字符串替換 
regexp/substr：須要替換的字符串 
replacement：替換字符串的值 
返回值：string

stringObject.split(separator,limit)： 
separator    必需，分隔符 
limit 可選。該參數可指定返回的數組的最大長度，若是不指定，整個字符串都會被分割 
返回值：string數組

stringObject.concat(str1, str2...)：用於將多個字符串拼加成一個字符串 
str1：字符串 
返回值：string

注意：

• 用字符串作加法的時候，會作字符串拼接工做
• 用字符串作減法、乘法、除法的時候，會將字符串轉換成數值類型進行減法、乘法、除法運算

js數組

三種定義數組的方法：
(1)定義時直接給數組變量賦值
var arr = [1, 2, 3];
(2)定義一個空數組
var arr = [];
(3)用new方法定義數組
var arr = new Array();

特色：

• 數組長度可變
• 同一數組中的元素類型能夠互不相同
• 當訪問未賦值的數組元素時，該元素值爲undefined，不會數組越界

js裏面沒有數組越界的概念，會顯示undefined

js運算符

算術運算符：+ - * / % ++ --
賦值運算符：=
比較運算符：> < >= <= == != === !==
邏輯運算符：&& || !
位運算符：& | ~ ^ << >>
其餘運算符：三目運算符(?:)
void運算符：強行指定某個表達式的不會返回值

`typeof` 運算符：獲取某個變量的數據類型
         `instanceof`運算符：判斷某個變量的數據類型是否爲指定的數據類型
         `var a = void 3;  //輸出爲undefined`
         `document.write(typeof(str));  //輸出爲string`
         ` alert(arr instanceof Array);  //輸出爲true`

注意：js中沒有繼承的概念，全部的對象的父類都是object

js流程控制

js支持的分支語句主要有if和switch語句。

if(條件){
    //表達式
}else{
    //表達式
}

//注意：switch中表達式的值能夠是number類型，也能夠是string類型
switch(表達式){
    case 值1: //表達式 break;
    case 值1: //表達式 break;
    ...
    default://表達式;

}

js支持的循環語句主要有while循環，do-while循環，for循環，for-in循環

//先判斷，後執行
while(循環條件){
    //表達式
}

//先執行，後判斷，至少執行一次
do{
    //表達式
}while(循環條件)

//當循環次數肯定的狀況下，通常用for循環，更簡潔
for(表達式1; 表達式2; 表達式3){
    //表達式
}

//可用於遍歷對象，好比數組(數組遍歷的是下標，對象遍歷的是屬性，注意：都不是具體的值)
for(變量 in 對象){
    //表達式
}

//遍歷的是下標
var arr = [1, 2, 3, 4, 5];
            arr[5] = 10;
            arr[10] = 11;

for(var a in arr){
    document.write(arr[a]+'    ');
}

js提供了break和continue來改變循環的控制流

• break：跳出該層循環
• continue：結束該層循環的本次循環

經常使用的特殊語句

語句是js的基本執行單元，每條語句都是以分號結束，語句了前面的賦值語句、算術運算等語句以外，還有一些特殊語句。

• 語句塊(包含在一對大括號裏)
• 空語句(使用運用比較少)
• 異常拋出語句
  throw new Error('異常拋出');

• 異常捕捉語句

  try{
      var age = 5;
      if(age == 5){
          throw new Error('異常拋出');
      }
  }catch(e){
      document.write('出錯:'+e.message);
  }finally{
      document.write('總會執行的finally塊');
  }