JavaScript簡介
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標准通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
1.基本特點
JavaScript是一種屬於網絡的腳本語言,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。
1.是一種解釋性腳本語言（代碼不進行預編譯）。
2.主要用來向HTML（標准通用標記語言下的一個應用）頁面添加交互行為。
3.可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行為的分離。
4.跨平台特性，在絕大多數瀏覽器的支持下，可以在多種平台下運行（如Windows、Linux、Mac、Android、iOS等）。
Javascript腳本語言同其他語言一樣，有它自身的基本數據類型，表達式和算術運算符及程序的基本程序框架。Javascript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變量提供存放信息的地方，表達式則可以完成較復雜的信息處理。
2.日常用途
嵌入動態文本於HTML頁面
對瀏覽器事件做出響應
讀寫HTML元素
在數據被提交到服務器之前驗證數據
檢測訪客的瀏覽器信息
控制cookies，包括創建和修改等
基於Node.js技術進行服務器端編程
3.基本特點
(1)腳本語言 JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯后執行,而JavaScript是在程序的運行過程中逐行進行解釋。
(2)基於對象 JavaScript是一種基於對象的腳本語言,它不僅可以創建對象,也能使用現有的對象。
(3)簡單 JavaScript語言中采用的是弱類型的變量類型,對使用的數據類型未做出嚴格的要求,是基於Java基本語句和控制的腳本語言,其設計簡單緊湊。
(4)動態性 JavaScript是一種采用事件驅動的腳本語言,它不需要經過Web服務器就可以對用戶的輸入做出響應。在訪問一個網頁時,鼠標在網頁中進行鼠標點擊或上下移、窗口移動等操作JavaScript都可直接對這些事件給出相應的響應。
(5)跨平台性 JavaScript腳本語言不依賴於操作系統,僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫后可以帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript腳本語言,目前JavaScript已被大多數的瀏覽器所支持。
不同於服務器端腳本語言，例如PHP與ASP，JavaScript主要被作為客戶端腳本語言在用戶的瀏覽器上運行，不需要服務器的支持。所以在早期程序員比較青睞於JavaScript以減少對服務器的負擔，而與此同時也帶來另一個問題：安全性。
而隨着服務器的強壯，雖然程序員更喜歡運行於服務端的腳本以保證安全，但JavaScript仍然以其跨平台、容易上手等優勢大行其道。同時，有些特殊功能（如AJAX）必須依賴Javascript在客戶端進行支持。隨着引擎如V8和框架如Node.js的發展，及其事件驅動及異步IO等特性，JavaScript逐漸被用來編寫服務器端程序。
JavaScript的存在形式和存放位置
1.JavaScript的存在形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的兩種存在形式</title>
<!--js的第二種存在形式-->
<script src="common.js"></script>
<!--js的第一種存在形式，直接在head頭部進行編寫-->
<script>
var ab = 123;
alert(ab)
</script>
</head>
<body>
</body>
</html>
2.JavaScript的存放位置
- HTML的head中
- HTML的body代碼塊底部(推薦)
由於HTML代碼是從上向下執行，如果head中的js代碼耗時嚴重，就會導致用戶長時間無法看到頁面，如果放置在body代碼塊底部，那么即使JS代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
alert('123');
</script>
JavaScript變量
JavaScript中變量的聲明是一個非常容易出現錯誤的點，局部變量必須以var開頭，如果未使用var，則默認表示聲明的是全局變量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js變量的定義</title>
</head>
<body>
<script>
//全局變量
name = 'zhangsan'
function func(){
//局部變量
var age = 18;
}
//全局變量
gender = 'male'
</script>
</body>
</html>
JavaScript中代碼的注釋：
單行注釋：// 多行注釋：/* */ 說明：此注釋僅在script中生效
數據類型
JavaScript 中的數據類型分為原始類型和對象類型：
- 原始類型
- 數字
- 字符串
- 布爾值
- 對象類型
- 數組
- “字典”
- ...
特別的，數字、布爾值、null、undefined、字符串是不可變。
null是JavaScript語言的關鍵字，它表示一個特殊值，常用來描述“空值”。 undefined是一個特殊值，表示變量未定義
1、數字（Number）
JavaScript中不區分整數值和浮點數值，JavaScript中所有數字均用浮點數值表示。
轉換：
- parseInt(..) 將某值轉換成數字，不成功則NaN
- parseFloat(..) 將某值轉換成浮點數，不成功則NaN
特殊值：
- NaN，非數字。可使用 isNaN(num) 來判斷。
- Infinity，無窮大。可使用 isFinite(num) 來判斷。
更多的數值運算
常量 Math.E 常量e，自然對數的底數。 Math.LN10 10的自然對數。 Math.LN2 2的自然對數。 Math.LOG10E 以10為底的e的對數。 Math.LOG2E 以2為底的e的對數。 Math.PI 常量figs/U03C0.gif。 Math.SQRT1_2 2的平方根除以1。 Math.SQRT2 2的平方根。 靜態函數 Math.abs( ) 計算絕對值。 Math.acos( ) 計算反余弦值。 Math.asin( ) 計算反正弦值。 Math.atan( ) 計算反正切值。 Math.atan2( ) 計算從X軸到一個點的角度。 Math.ceil( ) 對一個數上舍入。 Math.cos( ) 計算余弦值。 Math.exp( ) 計算e的指數。 Math.floor( ) 對一個數下舍人。 Math.log( ) 計算自然對數。 Math.max( ) 返回兩個數中較大的一個。 Math.min( ) 返回兩個數中較小的一個。 Math.pow( ) 計算xy。 Math.random( ) 計算一個隨機數。 Math.round( ) 舍入為最接近的整數。 Math.sin( ) 計算正弦值。 Math.sqrt( ) 計算平方根。 Math.tan( ) 計算正切值。
2、字符串（String）
字符串是由字符組成的數組，但在JavaScript中字符串是不可變的：可以訪問字符串任意位置的文本，但是JavaScript並未提供修改已知字符串內容的方法。
常見功能：
obj.length 長度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n個字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根據索引獲取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大寫
obj.toUpperCase() 小寫
obj.split(delimiter, limit) 分割
obj.search(regexp) 從頭開始匹配，返回匹配成功的第一個位置(g無效)
obj.match(regexp) 全局搜索，如果正則中有g表示找到全部，否則只找到第一個。
obj.replace(regexp, replacement) 替換，正則中有g則替換所有，否則只替換第一個匹配項，
$數字：匹配的第n個組內容；
$&：當前匹配的內容；
$`：位於匹配子串左側的文本；
$'：位於匹配子串右側的文本
$$：直接量$符號
3、布爾類型（Boolean）
布爾類型僅包含真假，與Python不同的是其首字母小寫。
- == 比較值相等
- != 不等於
- === 比較值和類型相等
- !=== 不等於
- || 或
- && 且
4、數組
JavaScript中的數組類似於Python中的列表
常見功能：
obj.length 數組的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部獲取一個元素
obj.unshift(ele) 頭部插入元素
obj.shift() 頭部移除元素
obj.splice(start, deleteCount, value, ...) 插入、刪除或替換數組的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替換元素
obj.splice(n,1) 指定位置刪除元素
obj.slice( ) 切片
obj.reverse( ) 反轉
obj.join(sep) 將數組元素連接起來以構建一個字符串
obj.concat(val,..) 連接數組
obj.sort( ) 對數組元素進行排序
其他
1、序列化
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
2、轉義
- decodeURI( ) URl中未轉義的字符
- decodeURIComponent( ) URI組件中的未轉義字符
- encodeURI( ) URI中的轉義字符
- encodeURIComponent( ) 轉義URI組件中的字符
- escape( ) 對字符串轉義
- unescape( ) 給轉義字符串解碼
- URIError 由URl的編碼和解碼方法拋出
3、eval
JavaScript中的eval是Python中eval和exec的合集，既可以編譯代碼也可以獲取返回值。
- eval()
- EvalError 執行字符串中的JavaScript代碼
4、正則表達式
JavaScript中支持正則表達式，其主要提供了兩個功能：
- test(string) 用於檢測正則是否匹配
- exec(string) 用於獲取正則匹配的內容
注：定義正則表達式時，“g”、“i”、“m”分別表示全局匹配，忽略大小寫、多行匹配。
5、時間處理
JavaScript中提供了時間相關的操作，時間操作中分為兩種時間：
- 時間統一時間
- 本地時間（東8區）
更多操作參見：http://www.shouce.ren/api/javascript/main.html
語句和異常
JavaScript中支持兩個中條件語句，分別是：if 和 switch
if(條件){
}else if(條件){
}else{
}
switch(name){
case '1':
name = xiaoming;
break;
case '2':
name = xiaoxiang;
break;
default :
name = yuemei;
}
2、循環語句
JavaScript支持三種循環語句，分別是：
第一種：
var names = ["xiaoming", "xiaoxiang", "yuemei"];
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}
第二種：
var names = ["xiaoming", "xiaoxiang", "yuemei"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
第三種：
while(條件){
// break;
// continue;
}
3、異常處理
try {
//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
// 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
//e是一個局部變量，用來指向Error對象或者其他拋出的對象
}
finally {
//無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}
注：主動跑出異常 throw Error('xxxx')
函數
1、基本函數
JavaScript中函數基本上可以分為一下三類：
// 普通函數
function func(arg){
return true;
}
// 匿名函數
var func = function(arg){
return "xiaoming";
}
// 自執行函數
(function(arg){
console.log(arg);
})('123')
注意：對於JavaScript中函數參數，實際參數的個數可能小於形式參數的個數，函數內的特殊值arguments中封裝了所有實際參數。
2.作用域
JavaScript的作用域一直以來是前端開發中比較難以理解的知識點，對於JavaScript的作用域主要記住5句話
“JavaScript中無塊級作用域”
在JAVA或C#中存在塊級作用域，即：大括號也是一個作用域
public static void main ()
{
if(1==1){
String name = "seven";
}
System.out.println(name);
}
// 報錯
public static void Main()
{
if(1==1){
string name = "seven";
}
Console.WriteLine(name);
}
// 報錯
在JavaScript語言中無塊級作用域
function fun1(){
if(1==1){
var name = 'xiaoming';
}
console.log(name);
}
// 輸出： xiaoming
補充：標題之所以添加雙引號是因為JavaScript6中新引入了 let 關鍵字，用於指定變量屬於塊級作用域
JavaScript采用函數作用域
在JavaScript中每個函數作為一個作用域，在外部無法訪問內部作用域中的變量
function fun1(){
var innerValue = 'xiaoliang';
}
fun1();
console.log(innerValue);
// 報錯：Uncaught ReferenceError: innerValue is not defined
JavaScript的作用域鏈
由於JavaScript中的每個函數作為一個作用域，如果出現函數嵌套函數，則就會出現作用域鏈。
xo = 'alex';
function Func(){
var xo = "seven";
function inner(){
var xo = 'alvin';
console.log(xo);
}
inner();
}
Func();
如上述代碼則出現三個作用域組成的作用域鏈，如果出現作用域鏈后，那么尋找變量時候就會出現順序，對於上述實例：
當執行console.log(xo)時，其尋找順序為根據作用域鏈從內到外的優先級尋找，如果內層沒有就逐步向上找，直到沒找到拋出異常。
JavaScript的作用域鏈執行前已創建
JavaScript的作用域在被執行之前已經創建，日后再去執行時只需要按照作用域鏈去尋找即可。
示例一：
xo = 'alex';
function Func(){
var xo = "seven";
function inner(){
console.log(xo);
}
return inner;
}
var ret = Func();
ret();
// 輸出結果： seven
上述代碼，在函數被調用之前作用域鏈已經存在：
- 全局作用域 -> Func函數作用域 -> inner函數作用域
當執行【ret();】時，由於其代指的是inner函數，此函數的作用域鏈在執行之前已經被定義為：全局作用域 -> Func函數作用域 -> inner函數作用域，所以，在執行【ret();】時，會根據已經存在的作用域鏈去尋找變量。
示例二：
xo = 'alex';
function Func(){
var xo = "eirc";
function inner(){
console.log(xo);
}
xo = 'seven';
return inner;
}
var ret = Func();
ret();
// 輸出結果： seven
上述代碼和示例一的目的相同，也是強調在函數被調用之前作用域鏈已經存在：
- 全局作用域 -> Func函數作用域 -> inner函數作用域
不同的時，在執行【var ret = Func();】時，Func作用域中的xo變量的值已經由 “eric” 被重置為 “seven”，所以之后再執行【ret();】時，就只能找到“seven”。
示例三：
xo = 'alex';<br>
function Bar(){
console.log(xo);
}
function Func(){
var xo = "seven";
return Bar;
}
var ret = Func();
ret();
// 輸出結果： alex
上述代碼，在函數被執行之前已經創建了兩條作用域鏈：
- 全局作用域 -> Bar函數作用域
- 全局作用域 -> Func函數作用域
當執行【ret();】時，ret代指的Bar函數，而Bar函數的作用域鏈已經存在：全局作用域 -> Bar函數作用域，所以，執行時會根據已經存在的作用域鏈去尋找。
聲明提前
在JavaScript中如果不創建變量，直接去使用，則報錯：
console.log(xxoo); // 報錯：Uncaught ReferenceError: xxoo is not defined
JavaScript中如果創建值而不賦值，則該值為 undefined，如：
var xxoo; console.log(xxoo); // 輸出：undefined
在函數內如果這么寫：
function Foo(){
console.log(xo);
var xo = 'seven';
}
Foo();
// 輸出：undefined
上述代碼，不報錯而是輸出 undefined，其原因是：JavaScript的函數在被執行之前，會將其中的變量全部聲明，而不賦值。所以，相當於上述實例中，函數在“預編譯”時，已經執行了var xo；所以上述代碼中輸出的是undefined。
參考文章：http://www.cnblogs.com/wupeiqi/p/5649402.html