javascript簡(jiǎn)介

什么是Javascript？

Javascript幌羞，簡(jiǎn)稱js寸谜，是一種腳本語(yǔ)言，主要用于制作前端頁(yè)面的交互效果属桦，例如選項(xiàng)卡熊痴、模態(tài)框彈出他爸、表單驗(yàn)證等等。除了應(yīng)用在網(wǎng)頁(yè)中之外果善，還廣泛應(yīng)用于手機(jī)游戲開發(fā)讲逛、服務(wù)器、nosql數(shù)據(jù)庫(kù)等領(lǐng)域岭埠。

JavaScript用途

當(dāng)我們?cè)谧鼍W(wǎng)站的時(shí)候盏混，網(wǎng)站是分層的，分別為：

• 結(jié)構(gòu)層 HTML 從語(yǔ)義的角度描述頁(yè)面的結(jié)構(gòu)
• 樣式層 CSS 從審美的角度裝飾頁(yè)面
• 行為層 JavaScript 從交互的角度提升用戶體驗(yàn)

而其中的JavaScript用來(lái)制作web頁(yè)面交互效果惜论，提升用戶體驗(yàn)许赃。常見的應(yīng)用如下：

• 輪播圖

  
  
  image.png

• 選項(xiàng)卡

  
  
  image.png

• Ajax表單驗(yàn)證

  
  
  image.png

• 炫酷HTML5頁(yè)面
  

  image.png

JavaScript誕生

在1995 年 Netscape（網(wǎng)景公司，我們要非常感謝網(wǎng)景公司馆类，首先提出的交互的概念混聊，首先提出的用戶體驗(yàn)的概念），一位名為 Brendan Eich 的工程師創(chuàng)造了 JavaScript乾巧，隨后在 1996 年初句喜，JavaScript 首先被應(yīng)用于 Netscape 2 瀏覽器上。最初的 JavaScript 名為 LiveScript（活力腳本）沟于，后來(lái)因?yàn)?Sun Microsystem 的 Java 語(yǔ)言的興起和廣泛使用咳胃，Netscape 出于宣傳和推廣的考慮，將它的名字從最初的 LiveScript 更改為 JavaScript——盡管兩者之間并沒有什么共同點(diǎn)旷太。這便是之后混淆產(chǎn)生的根源展懈。（也就是說(shuō)，JavaScript和Java沒有任何關(guān)系供璧，就是為了“榜大牌”的存崖，和北大青鳥和北大的關(guān)系一樣）。

幾個(gè)月后睡毒，Microsoft 隨著 IE 3 推出了一個(gè)與之基本兼容的語(yǔ)言 JScript来惧。又幾個(gè)月后，Netscape 將 JavaScript 提交至 Ecma International（一個(gè)歐洲標(biāo)準(zhǔn)化組織）演顾， ECMAScript 標(biāo)準(zhǔn)第一版便在 1997 年誕生了供搀，隨后在 1999 年以 ECMAScript 第三版的形式進(jìn)行了更新，從那之后這個(gè)標(biāo)準(zhǔn)沒有發(fā)生過(guò)大的改動(dòng)偶房。由于委員會(huì)在語(yǔ)言特性的討論上發(fā)生分歧趁曼，ECMAScript 第四版尚未推出便被廢除，但隨后于 2009 年 12 月發(fā)布的 ECMAScript 第五版引入了第四版草案加入的許多特性棕洋。第六版標(biāo)準(zhǔn)已經(jīng)于2015年六月發(fā)布。
ECMAScript是JavaScript的標(biāo)準(zhǔn)乒融，現(xiàn)在我們學(xué)習(xí)的版本的大部分是ECMAScript5掰盘、6摄悯。

Brendan Eich (JavaScript之父)

JavaScript的發(fā)展歷程

2003年：牛皮鮮，頁(yè)面上漂浮的廣告愧捕、彈窗廣告奢驯；所以當(dāng)時(shí)的瀏覽器就推出一個(gè)功能，禁用廣告次绘，實(shí)際上本質(zhì)就是禁用JavaScript瘪阁。頁(yè)面上的特效，都特別俗邮偎，比如鼠標(biāo)后面跟隨的星星管跺，然后工程師對(duì)JS的感覺就是不用學(xué)習(xí)，生搬硬套禾进，大量的“效果寶盒”軟件豁跑，一套就有各種特效了。沒有人琢磨語(yǔ)言特性泻云。

2004年：谷歌打開了Ajax這個(gè)潘多拉的盒子艇拍，從此JavaScript被人重視，很多人開始學(xué)習(xí)JS語(yǔ)言宠纯。當(dāng)時(shí)問(wèn)世了兩本JS巨作《犀牛書》卸夕、《高級(jí)程序設(shè)計(jì)》。

2007年：三層分離婆瓜，iPhone發(fā)布娇哆，人們開始重視用戶體驗(yàn)。大家發(fā)現(xiàn)了勃救，JavaScript是web頁(yè)面中制作交互效果唯一的語(yǔ)言碍讨，所以把JS的重視程度，提到了相當(dāng)高的一個(gè)地位蒙秒。招聘信息里面開始出現(xiàn)獨(dú)立的“JS工程師”職位了勃黍，之前都是后臺(tái)工程師捎帶腳寫寫JS。

2008年：Chrome瀏覽器發(fā)布晕讲，V8引擎加快了JS的解析覆获，之前的瀏覽器解析JS的時(shí)候卡頓卡頓的，動(dòng)畫效果是蹦蹦的瓢省。在Chrome里弄息，它的引擎叫做V8，運(yùn)行JS很流暢勤婚。

2009年：jQuery變得流行摹量，解決了瀏覽器兼容問(wèn)題，制作頁(yè)面效果變得簡(jiǎn)單，越來(lái)越多的初學(xué)者愿意學(xué)習(xí)JavaScript缨称。

2010年：Canvas畫布技術(shù)得到眾多瀏覽器支持宴树，可以用Canvas替代Flash了抢呆，并且能可以制作小游戲撵颊。

2011年：Node.js得到廣泛應(yīng)用问慎，實(shí)際上就是把JavaScript運(yùn)行在了服務(wù)器上，單線程非阻塞当凡，能夠讓企業(yè)用最小的成本實(shí)現(xiàn)后臺(tái)網(wǎng)站山害，比如之前4萬(wàn)的服務(wù)器都卡，現(xiàn)在用了node之后沿量，4000的機(jī)器都很流暢浪慌。

2012年：HTML5+CSS3的流行，也帶火了JavaScript欧瘪。

2013年： hybrid app模式開始流行眷射。當(dāng)時(shí)做手機(jī)app的時(shí)候，老板們發(fā)現(xiàn)要雇傭三隊(duì)人馬佛掖，ios妖碉、安卓、windows phone芥被∨芬耍花三份工資，并且產(chǎn)品還不好迭代拴魄。所以人們發(fā)明了用網(wǎng)頁(yè)技術(shù)開發(fā)手機(jī)App的技術(shù)冗茸，叫做web app。但是web app 并不能調(diào)用底層的硬件設(shè)備匹中，這個(gè)時(shí)候hybrid app就誕生了夏漱，可以結(jié)合web技術(shù)和原生開發(fā)技術(shù)進(jìn)行APP的開發(fā)，達(dá)到省錢顶捷，好迭代的目的挂绰。

2015年：ECMA6發(fā)布，叫做ECMA2015服赎。重量級(jí)的改變葵蒂，把語(yǔ)言的特性顛覆性的一個(gè)增強(qiáng)。

javascript之HelloWorld重虑！

學(xué)習(xí)任何的語(yǔ)言践付，我們都喜歡在屏幕上直接輸出一點(diǎn)什么，當(dāng)做最簡(jiǎn)單缺厉、最基本的案例永高。輸出什么大家隨意隧土，但是很多人都習(xí)慣輸出“hello world”，世界你好乏梁。感覺自己很有情懷的樣子次洼。

如何運(yùn)行Javascript代碼

只要有javascript的引擎就可以運(yùn)行js的代碼关贵，在瀏覽器中都內(nèi)置了這種引擎所以在html頁(yè)面中可以直接嵌入js的代碼遇骑。目前最快的引擎是谷歌出的V8引擎。

網(wǎng)頁(yè)中應(yīng)用Javascript代碼

1. 在HTML頁(yè)面使用 script 標(biāo)簽嵌入
2. 在純js文件編寫揖曾，然后使用script引入該腳本文件

alert()語(yǔ)句

alert("helloworld落萎！");

編碼規(guī)范

• JavaScript語(yǔ)句和語(yǔ)句之間的換行、空格炭剪、縮進(jìn)都不敏感练链。
• 語(yǔ)句后面的分號(hào)，不是必須寫的奴拦，如果語(yǔ)句是一行一行寫的媒鼓，那么分號(hào)是沒有必要的。但是壓縮頁(yè)面的時(shí)候错妖，語(yǔ)句結(jié)尾的分號(hào)绿鸣，非常重要。

字面量

字面量：英語(yǔ)叫做literals暂氯，有些書上叫做直接量潮模。看見什么痴施，它就是什么擎厢。

數(shù)字的字面量

數(shù)字的字面量，就是這個(gè)數(shù)字自己辣吃，并不需要任何的符號(hào)來(lái)界定這個(gè)數(shù)字动遭。

字符串字面量

字符串是一個(gè)術(shù)語(yǔ)，就是人類說(shuō)的語(yǔ)句神得、詞厘惦。字符串的字面量，必須用雙引號(hào)循头、單引號(hào)包裹起來(lái)绵估。字符串被限定在同種引號(hào)之間；也即卡骂，必須是成對(duì)單引號(hào)或成對(duì)雙引號(hào)国裳。

變量

變量用于在程序運(yùn)行過(guò)程中臨時(shí)保存數(shù)據(jù)的。和高中代數(shù)學(xué)習(xí)的x全跨、y缝左、z很像，用來(lái)保存信息的。

變量定義

變量在使用之前必須先定義渺杉，否則會(huì)出錯(cuò)蛇数。

var name;// 聲明
var age = 12; // 聲明同時(shí)賦值
var number1 = 12, number2= 24; // 聲明多個(gè)同時(shí)賦值

變量命名規(guī)范

變量名只能包含字母、數(shù)字是越、下劃線(_) 和 $耳舅，只能以字母、下劃線和$開頭倚评。

擴(kuò)展：
JS中有一些關(guān)鍵字（保留字）不能用來(lái)當(dāng)變量名浦徊。

image.png

image.png

image.png

image.png

注釋

• 單行注釋 // 注釋內(nèi)容
• 多行注釋 /* 注釋內(nèi)容 */

變量輸出

• console.log(var1)：在瀏覽器的控制臺(tái)輸出
• alert(var2)：在瀏覽器彈窗輸出

數(shù)據(jù)類型

變量保存的值的類型。變量的數(shù)據(jù)類型由這個(gè)變量所保存的值來(lái)決定

• number
• string
• boolean
• array
• object
• undefined
• null

數(shù)據(jù)類型轉(zhuǎn)換

• parseInt：轉(zhuǎn)化成整型
• join：數(shù)組轉(zhuǎn)字符串
• split：字符串轉(zhuǎn)數(shù)組
• prompt：接收用戶輸入的信息
• 1 + '' ：將一個(gè)數(shù)字轉(zhuǎn)換為字符串

運(yùn)算符

• 賦值運(yùn)算
• 算術(shù)運(yùn)算
• 邏輯運(yùn)算
• 比較運(yùn)算
• 三目運(yùn)算

流程控制

• 順序（代碼從上到下執(zhí)行）
• 分支（單向分支天梧、雙向分支盔性、多向分支）
• 循環(huán)（for、while呢岗、do...while冕香、for...in、break后豫、continue）

函數(shù)

將經(jīng)常使用的一段代碼寫到一個(gè)函數(shù)中悉尾，用時(shí)直接調(diào)用這個(gè)函數(shù)即可，不需要再重新寫相同的代碼硬贯。

函數(shù)定義

function fnName(參數(shù)1焕襟，參數(shù)2....){
    // 注釋、下面寫函數(shù)體
   var name = 'andy'; // 每條語(yǔ)句以分號(hào)結(jié)尾
}

函數(shù)調(diào)用

fnName();

變量作用域

• 全局變量：函數(shù)外部使用var定義的變量饭豹。在整個(gè)腳本中的任何位置都可以使用
• 局部變量：函數(shù)內(nèi)部使用var定義的變量鸵赖。只在函數(shù)內(nèi)部可以使用，并且只要函數(shù)執(zhí)行過(guò)程中存在拄衰，函數(shù)執(zhí)行結(jié)束就銷毀了它褪。

函數(shù)返回

在函數(shù)中執(zhí)行return會(huì)退出函數(shù)的執(zhí)行并返回調(diào)用函數(shù)的地方。注意：return只能用在函數(shù)內(nèi)部用來(lái)退出函數(shù)的翘悉。

function fnName(參數(shù)1茫打，參數(shù)2....){
    // 注釋、下面寫函數(shù)體
   var name = 'andy'; // 每條語(yǔ)句以分號(hào)結(jié)尾
    return;
}

函數(shù)的參數(shù)

匿名函數(shù)

沒有名字的函數(shù)被稱為匿名函數(shù)妖混，一般用于事件的回調(diào)老赤，或者避免執(zhí)行被污染。

遞歸函數(shù)

數(shù)內(nèi)部又調(diào)用自身的函數(shù)制市。例如求取階乘抬旺。

javascript中自帶的系統(tǒng)函數(shù)

• parseInt：轉(zhuǎn)換為整數(shù)
• setInterval和clearInterval ：周期性去執(zhí)行
• setTimeout和clearTimeout：定時(shí)只執(zhí)行一次

事件

當(dāng)頁(yè)面中發(fā)生一個(gè)行為（也稱為動(dòng)作或者交互）時(shí)觸發(fā)執(zhí)行一段JS代碼。
常見事件有哪些呢祥楣？

• 鼠標(biāo)相關(guān)事件：

  • onclick ：鼠標(biāo)點(diǎn)擊時(shí)
  • ondblclick：鼠標(biāo)雙擊時(shí)
  • onmousemove：鼠標(biāo)移動(dòng)
  • onmouseout：鼠標(biāo)離開時(shí)
  • onmouseover：鼠標(biāo)放上時(shí)

• 鍵盤相關(guān)事件：

  • onkeypress：鍵盤按鍵按下并未釋放時(shí)
  • onkeydown：鍵盤按鍵按下瞬間時(shí)
  • onkeyup：當(dāng)鍵盤按鍵放開時(shí)

• 表單相關(guān)事件：

  • onfocus：得到焦點(diǎn)時(shí)
  • onblur：失去焦點(diǎn)時(shí)

綁定事件處理函數(shù)

可以為頁(yè)面中任何元素綁定一個(gè)事件處理函數(shù)开财，當(dāng)事件發(fā)送后汉柒，則該函數(shù)執(zhí)行。該函數(shù)一般被稱為事件的回調(diào)函數(shù)责鳍。

事件冒泡

當(dāng)多個(gè)元素重疊是碾褂，當(dāng)點(diǎn)擊內(nèi)層的一個(gè)元素時(shí)，這個(gè)點(diǎn)擊事件會(huì)一直向上級(jí)傳遞历葛，所以如果外層上級(jí)也綁定了點(diǎn)擊事件正塌，那么外層上級(jí)的事件也會(huì)依次被觸發(fā)！

事件冒泡

事件對(duì)象

在綁定事件的回調(diào)函數(shù)中可以加一個(gè)參數(shù)啃洋，這個(gè)參數(shù)就是這個(gè)事件的對(duì)象传货，參數(shù)名可以任意取屎鳍。該對(duì)象記錄了事件發(fā)生時(shí)候的相關(guān)信息宏娄，例如事件發(fā)生的主體，事件發(fā)生的坐標(biāo)點(diǎn)...

常見屬性和方法：

• target：事件發(fā)生主體逮壁，就是事件發(fā)生在誰(shuí)身上孵坚，誰(shuí)就是事件主體
• preventDefault()：阻止默認(rèn)行為，比如我們可以阻止 a標(biāo)簽點(diǎn)擊之后跳轉(zhuǎn)的這個(gè)默認(rèn)行為
• stopPropagation()：阻止冒泡
• clientX ：觸發(fā)事件時(shí)鼠標(biāo)的x坐標(biāo)
• clientY ：觸發(fā)事件時(shí)鼠標(biāo)的鼠標(biāo)y坐標(biāo)
• keyCode ：?jiǎn)螕翩I盤的按鈕對(duì)應(yīng)的鍵碼

DOM操作

有的時(shí)候我們需要通過(guò)js去操作 網(wǎng)頁(yè)里面的元素（這些元素被稱為DOM元素【文檔對(duì)象模型】）窥淆，例如去更改某個(gè)元素的背景色卖宠、字體大小等。在編程中忧饭，可以使用document對(duì)象【或者：window.document對(duì)象】來(lái)操作窗口中的HTML文檔中的元素扛伍。

查找元素

• document.getElementById：根據(jù)id查找一個(gè)元素，返回這個(gè)元素對(duì)象词裤。
• document.getElementsByTagName：根據(jù)標(biāo)簽名字查找元素刺洒，返回包含所有元素的數(shù)組

設(shè)置元素樣式 - style

當(dāng)查詢到一個(gè)元素之后就可以使用style屬性來(lái)修改標(biāo)簽的css樣式

元素對(duì)象的屬性

獲取到一個(gè)標(biāo)簽之后可以獲取或者設(shè)置這個(gè)標(biāo)簽上的屬性

• getAttribute(屬性名); ：獲取標(biāo)簽上的屬性值
• setAttribute(屬性名,屬性值); ：設(shè)置標(biāo)簽上的屬性值

元素內(nèi)容 - innerHTML和innerText

可以使用innerHTML和innerText屬性獲取和設(shè)置元素里面的內(nèi)容。

創(chuàng)建吼砂、追加逆航、刪除元素

我們可以使用JS代碼在頁(yè)面中生成一個(gè)HTML元素，或者刪除渔肩。

• document.createElement：創(chuàng)建節(jié)點(diǎn)
• document.body.appendChild：追加節(jié)點(diǎn)
• document.body.removeChild：刪除子元素

BOM操作

有的時(shí)候我們需要通過(guò)js去操作瀏覽器因俐，例如改變?yōu)g覽器的url地址，或者讓當(dāng)前網(wǎng)頁(yè)刷新周偎，或者進(jìn)行前進(jìn)或者后退抹剩，則這個(gè)時(shí)候我們可以通過(guò)BOM（瀏覽器對(duì)象模型）進(jìn)行操作。

location對(duì)象

在javascript中可以使用location對(duì)象獲取當(dāng)前訪問(wèn)的頁(yè)面地址信息蓉坎。

image.png

history對(duì)象

可以使用history對(duì)象實(shí)現(xiàn)歷史頁(yè)面的跳轉(zhuǎn)

• history.go(-1)：后退一頁(yè)
• history.go(1)：前進(jìn)一頁(yè)
• history.back()：后退一頁(yè)
• history.forward()：前進(jìn)一頁(yè)

數(shù)學(xué)運(yùn)算 - Math

當(dāng)要做一些數(shù)學(xué)運(yùn)算時(shí)就可以使用這個(gè)對(duì)象澳眷，該對(duì)象提供了一些對(duì)數(shù)字做處理的方法。

• Math.abs()：計(jì)算絕對(duì)值
• Math.ceil()：向上取整
• Math.floor()：向下取整
• Math.round：四舍五入取整
• Math.max：獲取一系列數(shù)字中最大的那個(gè)數(shù)
• Math.random()：取一個(gè) 0~1之間的隨機(jī)數(shù)袍嬉， 包含0境蔼，不包含1
• Math.pow(3,4)：求取 3^4
• Math.sqrt(81)：求取81的平方

思考：如何隨機(jī)到一個(gè)指定區(qū)間的數(shù)字呢灶平？ 比如 [12, 30]

日期操作 - Date

Date對(duì)象可以做時(shí)間相關(guān)的操作，例如獲取年月日箍土、時(shí)分秒

• var d = new Date()
  +d.getDate()：返回一個(gè)月的某一天【1~31】
• d.getDay()：返回一周中的某一天【0~6】
• d.getMonth()：返回一年中的某一個(gè)月【0~11】
• d.getFullYear()：返回四位數(shù)的年
• d.getHours()：返回小時(shí)【0~23】
• d.getMinutes()：返回分鐘【0~59】
• d.getSeconds()：返回秒【0~59】
• d.getTime()：返回時(shí)間戳

擴(kuò)展：moment.js 是一個(gè)專門做時(shí)間處理的js插件逢享。

moment.js