JS介紹
js的歷史
在上個(gè)世紀(jì)的1995年火惊,當(dāng)時(shí)的網(wǎng)景公司正憑借其Navigator瀏覽器成為Web時(shí)代開啟時(shí)最著名的第一代互聯(lián)網(wǎng)公司液斜。
由于網(wǎng)景公司希望能在靜態(tài)HTML頁面上添加一些動(dòng)態(tài)效果累贤,于是叫Brendan Eich這哥們?cè)趦芍苤畠?nèi)設(shè)計(jì)出了JavaScript語言。你沒看錯(cuò)少漆,這哥們只用了10天時(shí)間臼膏。
為什么起名叫JavaScript?原因是當(dāng)時(shí)Java語言非常紅火,所以網(wǎng)景公司希望借Java的名氣來推廣示损,但事實(shí)上JavaScript除了語法上有點(diǎn)像Java渗磅,其他部分基本上沒啥關(guān)系。
JavaScript版本兼容性
JavaScript語言是在10天時(shí)間內(nèi)設(shè)計(jì)出來的屎媳,雖然語言的設(shè)計(jì)者水平非常NB夺溢,但誰也架不住“時(shí)間緊论巍,任務(wù)重”烛谊,所以,JavaScript有很多設(shè)計(jì)缺陷嘉汰,我們后面會(huì)慢慢講到丹禀。
此外,由于JavaScript的標(biāo)準(zhǔn)——ECMAScript在不斷發(fā)展鞋怀,最新版ECMAScript 6標(biāo)準(zhǔn)(簡(jiǎn)稱ES6)已經(jīng)在2015年6月正式發(fā)布了双泪,所以,講到JavaScript的版本密似,實(shí)際上就是說它實(shí)現(xiàn)了ECMAScript標(biāo)準(zhǔn)的哪個(gè)版本焙矛。
由于瀏覽器在發(fā)布時(shí)就確定了JavaScript的版本,加上很多用戶還在使用IE6這種古老的瀏覽器残腌,這就導(dǎo)致你在寫JavaScript的時(shí)候村斟,要照顧一下老用戶贫导,不能一上來就用最新的ES6標(biāo)準(zhǔn)寫,否則蟆盹,老用戶的瀏覽器是無法運(yùn)行新版本的JavaScript代碼的孩灯。
js的組成
ECMAScript
ECMAScript是一個(gè)標(biāo)準(zhǔn)。
因?yàn)榫W(wǎng)景開發(fā)了JavaScript逾滥,一年后微軟又模仿JavaScript開發(fā)了JScript峰档,為了讓JavaScript成為全球標(biāo)準(zhǔn),幾個(gè)公司聯(lián)合ECMA(European Computer Manufacturers Association)組織定制了JavaScript語言的標(biāo)準(zhǔn)寨昙,被稱為ECMAScript標(biāo)準(zhǔn)讥巡。
所以簡(jiǎn)單說來就是,ECMAScript是一種語言標(biāo)準(zhǔn)毅待,而JavaScript是網(wǎng)景公司對(duì)ECMAScript標(biāo)準(zhǔn)的一種實(shí)現(xiàn)尚卫。
那為什么不直接把JavaScript定為標(biāo)準(zhǔn)呢?因?yàn)镴avaScript是網(wǎng)景的注冊(cè)商標(biāo)。
不過大多數(shù)時(shí)候尸红,我們還是用JavaScript這個(gè)詞吱涉。如果你遇到ECMAScript這個(gè)詞,簡(jiǎn)單把它替換為JavaScript就行了外里。
DOM
DOM:Document Object Model怎爵。文檔對(duì)象模型,后邊我們會(huì)有專門的課程來講解DOM操作
BOM
BOM:Browser Object Model盅蝗。瀏覽器對(duì)象模型鳖链,后邊我們也會(huì)專門來講bom操作
JavaScript的特點(diǎn)
(1)、一種解釋性執(zhí)行的腳本語言墩莫。
同其他腳本語言一樣芙委,JavaScript也是一種解釋性語言,其提供了一個(gè)非常方便的開發(fā)過程狂秦。JavaScript的語法基本結(jié)構(gòu)形式與C灌侣、C++、Java十分類似裂问。但在使用前侧啼,不像這些語言需要先編譯,而是在程序運(yùn)行過程中被逐行地解釋堪簿。JavaScript與HTML標(biāo)識(shí)結(jié)合在一起痊乾,從而方便用戶的使用操作。
(2)椭更、一種基于對(duì)象的腳本語言哪审。
其也可以被看作是一種面向?qū)ο蟮恼Z言,這意味著JavaScript能運(yùn)用其已經(jīng)創(chuàng)建的對(duì)象虑瀑。因此湿滓,許多功能可以來自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用畏腕。
(3)、一種簡(jiǎn)單弱類型腳本語言茉稠。
其簡(jiǎn)單性主要體現(xiàn)在:首先描馅,JavaScript是一種基于Java基本語句和控制流之上的簡(jiǎn)單而緊湊的設(shè)計(jì),從而對(duì)于使用者學(xué)習(xí)Java或其他C語系的編程語言是一種非常好的過渡而线,而對(duì)于具有C語系編程功底的程序員來說铭污,JavaScript上手也非常容易;其次,其變量類型是采用弱類型膀篮,并未使用嚴(yán)格的數(shù)據(jù)類型嘹狞。
(4)、一種相對(duì)安全腳本語言誓竿。
JavaScript作為一種安全性語言磅网,不被允許訪問本地的硬盤,且不能將數(shù)據(jù)存入服務(wù)器筷屡,不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除涧偷,只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的丟失或?qū)ο到y(tǒng)的非法訪問毙死。
(5)燎潮、一種事件驅(qū)動(dòng)腳本語言。
JavaScript對(duì)用戶的響應(yīng)扼倘,是以事件驅(qū)動(dòng)的方式進(jìn)行的确封。在網(wǎng)頁(Web Page)中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作,被稱為“事件”(Event)再菊。例如按下鼠標(biāo)爪喘、移動(dòng)窗口、選擇菜單等都可以被視為事件纠拔。當(dāng)事件發(fā)生后秉剑,可能會(huì)引起相應(yīng)的事件響應(yīng),執(zhí)行某些對(duì)應(yīng)的腳本绿语,這種機(jī)制被稱為“事件驅(qū)動(dòng)”秃症。
(6)候址、一種跨平臺(tái)性腳本語言吕粹。
JavaScript依賴于瀏覽器本身,與操作環(huán)境無關(guān)岗仑,只要計(jì)算機(jī)能運(yùn)行瀏覽器匹耕,并支持JavaScript的瀏覽器,就可正確執(zhí)行荠雕,從而實(shí)現(xiàn)了“編寫一次稳其,走遍天下”的夢(mèng)想驶赏。
因此,JavaScript是一種新的描述語言既鞠,其可以被嵌入到HTML文件中煤傍。JavaScript語言可以做到響應(yīng)使用者的需求事件(例如表單的輸入),而不需要任何的網(wǎng)絡(luò)來回傳輸資料嘱蛋。所以當(dāng)一位使用者輸入一項(xiàng)資料時(shí)蚯姆,此資料數(shù)據(jù)不用經(jīng)過傳給服務(wù)器(server)處理再傳回來的過程,而直接可以被客戶端(client)的應(yīng)用程序所處理洒敏。
3龄恋、JavaScript的優(yōu)缺點(diǎn)
(1)、JavaScript的優(yōu)點(diǎn):
<1>.JavaScript減少網(wǎng)絡(luò)傳輸凶伙。
在JavaScript這樣的用戶端腳本語言出現(xiàn)之前郭毕,傳統(tǒng)的數(shù)據(jù)提交和驗(yàn)證工作均由用戶端瀏覽器通過網(wǎng)絡(luò)傳輸?shù)椒?wù)器上進(jìn)行。如果數(shù)據(jù)量很大函荣,這對(duì)于網(wǎng)絡(luò)和服務(wù)器的資源來說實(shí)在是一種無形的浪費(fèi)显押。而使用JavaScript就可以在客戶端進(jìn)行數(shù)據(jù)驗(yàn)證。
<2>.JavaScript方便操縱HTML對(duì)象傻挂。
JavaScript可以方便地操縱各種頁面中的對(duì)象煮落,用戶可以使用JavaScript來控制頁面中各個(gè)元素的外觀、狀態(tài)甚至運(yùn)行方式踊谋,JavaScript可以根據(jù)用戶的需要“定制”瀏覽器蝉仇,從而使網(wǎng)頁更加友好。
<3>.JavaScript支持分布式運(yùn)算殖蚕。
JavaScript可以使多種任務(wù)僅在用戶端就可以完成轿衔,而不需要網(wǎng)絡(luò)和服務(wù)器的參與,從而支持分布式的運(yùn)算和處理睦疫。
(2)害驹、JavaScript的局限性:
<1>.各瀏覽器廠商對(duì)JavaScript支持程度不同。
目前在互聯(lián)網(wǎng)上有很多瀏覽器蛤育,如Firefox宛官、Internet Explorer、Opera等瓦糕,但每種瀏覽器支持JavaScript的程度是不一樣的底洗,不同的瀏覽器在瀏覽一個(gè)帶有JavaScript腳本的主頁時(shí),由于對(duì)JavaScript的支持稍有不同咕娄,其效果會(huì)有一定的差距亥揖,有時(shí)甚至?xí)@示不出來。
<2>.“[Web安全性]”對(duì)JavaScript一些功能犧牲。
當(dāng)把JavaScript的一個(gè)設(shè)計(jì)目標(biāo)設(shè)定為“Web安全性”時(shí)费变,就需要犧牲JavaScript的一些功能摧扇。因此,純粹的JavaScript將不能打開挚歧、讀寫和保存用戶計(jì)算機(jī)上的文件扛稽。其有權(quán)訪問的唯一信息就是該JavaScript所嵌入的那個(gè)Web主頁中的信息,簡(jiǎn)言之滑负,JavaScript將只存在于它自己的小小世界—Web主頁里庇绽。
js的引入方式
在一對(duì) script 標(biāo)簽中引入js代碼
通過這種方式引入,可以把js代碼和HTML代碼寫在同一個(gè)文件中橙困,但是注意:最好把js代碼寫在body之后瞧掺,文檔的加載順序是從上到下加載的,先把頁面內(nèi)容渲染出來凡傅,再加入用戶交互辟狈,這樣用戶體驗(yàn)會(huì)大大加強(qiáng)。
示例代碼:
<HTML lang="en">
<head>
<meta charset="UTF-8" />
<title>js基礎(chǔ)一</title>
</head>
<body> </body>
<!--script 最好放在body之后夏跷,處理交互事件哼转,等到內(nèi)容顯示之后-->
<script type="text/Javascript"> //警告框 alert('網(wǎng)絡(luò)錯(cuò)誤!'); </script>
</HTML>
引入外部js代碼
我們可以把js代碼寫在一個(gè)后綴為.js的文件中,然后把這個(gè)js文件引入HTML文檔里
操作步驟:
創(chuàng)建一個(gè)目錄文件夾例如為js,然后再這個(gè)文件夾中創(chuàng)建一個(gè)一個(gè)后綴為.js的一個(gè)js文件槽华,例如叫做index.js;
在script標(biāo)簽中的src中寫入js文件的路徑壹蔓。
示例代碼:
<!doctype HTML>
<HTML lang="en">
<head>
<meta charset="UTF-8" />
<title>js基礎(chǔ)一</title>
</head>
<body>
</body>
<!--script 最好放在body之后,處理交互事件猫态,等到內(nèi)容顯示之后-->
<!--第二種方式:引入js文件-->
<script src="js/index.js" type="text/Javascript"> </script>
</HTML>
alert語句
我們注意到上邊我們使用到了一個(gè)語句:alert('網(wǎng)絡(luò)錯(cuò)誤!');佣蓉。這是一個(gè)alert語句,用來在瀏覽器中彈出一個(gè)提示框的亲雪。
js中的變量
什么是變量?
變量首先是一個(gè)容器勇凭,可以用來存放數(shù)據(jù),而且存放在這個(gè)容器中的數(shù)據(jù)可以發(fā)生變化义辕。舉個(gè)例子:我有一個(gè)盆子虾标,這個(gè)盆子中既可以裝沙子、也可以裝水灌砖,還可以裝糧食璧函。這個(gè)盆子就可以看做一個(gè)變量,里邊裝的水基显、沙子蘸吓、糧食就是存放在變量中的值。
在生活中续镇,我們使用紙張來記錄和保存信息美澳,而在計(jì)算機(jī)中销部,我們使用變量來保存信息摸航。變量的概念基本上和初中代數(shù)的方程變量是一致的制跟,只是在計(jì)算機(jī)程序中,變量不僅可以是數(shù)字酱虎,還可以是任意數(shù)據(jù)類型雨膨。
如何定義變量?
使用關(guān)鍵字 var +變量名 + =(賦值號(hào)) + 值 + ; 就可以定義一個(gè)變量。
示例代碼:定義一個(gè)變量:
var a = 12;
以上代碼定義了一個(gè)變量 a 读串,變量里保存的值是數(shù)值12 聊记。
變量的命名規(guī)則
變量在JavaScript中就是用一個(gè)變量名表示,變量名是大小寫英文恢暖、數(shù)字排监、$和_的組合,且不能用數(shù)字開頭杰捂。變量名也不能是JavaScript的關(guān)鍵字舆床,如if、while等嫁佳。聲明一個(gè)變量用var語句挨队,比如:
var a; // 申明了變量a,此時(shí)a的值為undefinedvar
$b = 1; // 申明了變量$b蒿往,同時(shí)給$b賦值盛垦,此時(shí)$b的值為1
var s_007 = '007'; // s_007是一個(gè)字符串
var Answer = true; // Answer是一個(gè)布爾值true
var t = null; // t的值是null
變量名也可以是中文,但是由于中文的兼容性不好瓤漏,所以不要使用中文作為變量名腾夯。
變量命名規(guī)范:
類型前綴
首字母大寫
類型
前綴
類型
實(shí)例
數(shù)組
a
Array
aItems
布爾值
b
Boolean
bItsComplete
浮點(diǎn)數(shù)
f
Float
fPrice
函數(shù)
fn
Function
fnHandler
整數(shù)
i
Integer
iTtemCount
對(duì)象
o
Object
oDiv1
正則表達(dá)式
re
ReExp
reEmaolCheck
字符串
s
String
sUserName
變體變量
v
Variant
vAnything
js的基本數(shù)據(jù)類型
Number
number是數(shù)值類型,在生活中蔬充,我們把沒有小數(shù)位的數(shù)稱作整數(shù)俯在,帶有小數(shù)位的數(shù)稱作小數(shù)(計(jì)算機(jī)中叫浮點(diǎn)數(shù)),JavaScript不區(qū)分整數(shù)和浮點(diǎn)數(shù)娃惯,統(tǒng)一用Number表示跷乐,以下都是合法的Number類型:
var a = 123; // 整數(shù)123
var a = 0.456; // 浮點(diǎn)數(shù)0.456
var a = 1.2345e3; // 科學(xué)計(jì)數(shù)法表示1.2345x1000,等同于1234.5
var a = -99; // 負(fù)數(shù)
NaN; // NaN表示Not a Number趾浅,當(dāng)無法計(jì)算結(jié)果時(shí)用NaN表示
Infinity; // Infinity表示無限大愕提,當(dāng)數(shù)值超過了JavaScript的Number所能表示的最大值時(shí),就表示為Infinity
Number類型的數(shù)可以進(jìn)行加皿哨、減浅侨、乘、除证膨、求余如输、自增、自減運(yùn)算
字符串
字符串是以單引號(hào)'或雙引號(hào)"括起來的任意文本,比如'abc'不见,"xyz"等等澳化。請(qǐng)注意,''或""本身只是一種表示方式稳吮,不是字符串的一部分缎谷,因此,字符串'abc'只有a灶似,b列林,c這3個(gè)字符。
如果'本身也是一個(gè)字符酪惭,那就可以用""括起來希痴,比如"I'm OK"包含的字符是I,'春感,m润梯,空格,O甥厦,K這6個(gè)字符纺铭。
**
如果字符串內(nèi)部既包含'又包含"怎么辦?可以用轉(zhuǎn)義字符\來標(biāo)識(shí),比如:
'I'm "OK"!';
表示的字符串內(nèi)容是:I'm "OK"!
**
轉(zhuǎn)義字符
\表示轉(zhuǎn)義字符刀疙,在計(jì)算機(jī)中舶赔,有些特殊的字符被系統(tǒng)賦予了特殊含義,如'表示括住字符串谦秧。但是想輸出一個(gè)'怎么辦?我們就可以像上邊一樣使用轉(zhuǎn)移字符\竟纳,在特殊字符前添加一個(gè)轉(zhuǎn)義字符,計(jì)算機(jī)就會(huì)把這個(gè)特殊字符當(dāng)做普通的字符串來處理疚鲤。
布爾值
在計(jì)算機(jī)中锥累,我們用真表示條件成立,用假表示條件不成立集歇。真和假就是布爾值(bollean)桶略。
在js中,我們使用true來表示真诲宇,用false來表示假际歼。布爾值只有真和假,沒有第三個(gè)值姑蓝。布爾值經(jīng)常用在條件判斷中鹅心。
var bo1 = true;//布爾類型 結(jié)果true和false //typeof()獲取變量的數(shù)據(jù)類型,(在不知道變量類型的情況下,也可以通過ypeof()獲取) alert(typeof(bo1));
null和undefined
null表示一個(gè)“空”的值纺荧,它和0以及空字符串''不同旭愧,0是一個(gè)數(shù)值颅筋,''表示長(zhǎng)度為0的字符串,而null表示“空”输枯。
在其他語言中议泵,也有類似JavaScript的null的表示,例如Java也用null用押,Swift用nil肢簿,Python用None表示靶剑。但是蜻拨,在JavaScript中,還有一個(gè)和null類似的undefined桩引,它表示“未定義”缎讼。
JavaScript的設(shè)計(jì)者希望用null表示一個(gè)空的值,而undefined表示值未定義坑匠。事實(shí)證明血崭,這并沒有什么卵用,區(qū)分兩者的意義不大厘灼。大多數(shù)情況下夹纫,我們都應(yīng)該用null。undefined僅僅在判斷函數(shù)參數(shù)是否傳遞的情況下有用设凹。
拓展 undefined類型
//如果我們不給某個(gè)變量設(shè)置值舰讹,則為undefined類型;var color;alert(typeof color);
js中的運(yùn)算符
算數(shù)運(yùn)算符
+加
-減
乘
/除
%求余(取模)
賦值運(yùn)算符
=賦值
+=加后賦值
-= 減后賦值
= 乘后賦值
/=除后賦值
%=模后賦值
關(guān)系運(yùn)算符
>大于
<小于
<=小于等于
>=大于等于
==等于(如果左右兩邊類型不一致闪朱,則隱式轉(zhuǎn)換為一致的類型后再比較)
===等于(如果左右兩邊類型不一致月匣,則返回false)
!=不等于(如果左右兩邊類型不一致,則隱式轉(zhuǎn)換為一致的類型后再比較)
!==不等于(不轉(zhuǎn)換類型奋姿,直接比較)
邏輯運(yùn)算符
&&與
||或
!非
js的邏輯運(yùn)算符
邏輯運(yùn)算產(chǎn)生的結(jié)果是一個(gè)布爾值锄开,js中有三種邏輯運(yùn)算符:
&&與
||或
!非
邏輯與&&
書寫方式:表達(dá)式一 && 表達(dá)式二。邏輯與表達(dá)式為真的條件是:左右兩邊的表達(dá)式同時(shí)成立時(shí)称诗,整個(gè)邏輯與表達(dá)式才成立萍悴,只要有一個(gè)表達(dá)式不成立,整個(gè)邏輯表達(dá)式為假寓免。
邏輯或||
書寫方式:表達(dá)式一 || 表達(dá)式二退腥。邏輯或表達(dá)式為真的條件是:左右兩邊的表達(dá)式,這要其中一個(gè)為真再榄,則整個(gè)表達(dá)式為真狡刘。只有在兩邊表達(dá)式同時(shí)為假時(shí),整個(gè)表達(dá)式才為假困鸥。
邏輯非!
書寫方式為:!表達(dá)式嗅蔬。邏輯非是對(duì)原有的表達(dá)式結(jié)果進(jìn)行取反操作剑按。如原表達(dá)式為真,則進(jìn)行邏輯非操作后澜术,返回的值是假;元表達(dá)式為假艺蝴,進(jìn)行邏輯非運(yùn)算后表達(dá)式為真。