JavaScript簡介
JavaScript(Java腳本)是一種基于對象(Object)和事件驅(qū)動( Event Driven)并具有安全性能的解釋型腳本語言,目的是能夠在客戶端的網(wǎng)頁中增加動態(tài)效果和交互能力,實(shí)現(xiàn)了用戶與網(wǎng)頁之間的一種實(shí)時的、動態(tài)的交互關(guān)系。
JS組成
JS組成:ECMAScript(JS的核心)、DOM(文檔對象模型)、BOM(瀏覽器對象模型)
- ECMAScript:主要定義了 JS 的語法
- DOM:一套操作頁面元素的 API,DOM 可以把 HTML 看做是文檔樹,通過 DOM 提供的 API 可以對樹上的節(jié)點(diǎn)進(jìn)行操作
- BOM:一套操作瀏覽器功能的 API,通過 BOM 可以操作瀏覽器窗口
JS用途
主要用于網(wǎng)頁特效、服務(wù)端開發(fā)、命令行工具、桌面程序、APP、控制硬件—物聯(lián)網(wǎng)、游戲開發(fā)
JavaScript的書寫位置
1、寫在行內(nèi)
<input type="button" value="按鈕" onclick="alert('Hello World')" />
2、寫在 script 標(biāo)簽中
<script>
alert('Hello,world!');
</script>
由<script>...</script>包含的代碼就是JavaScript代碼,他將直接被瀏覽器執(zhí)行。
3、寫入外部 js 文件中,在頁面引入
<script type="text/javascript" src="/js/Hello.js"></script>
把代碼放在單獨(dú)的文件中更有利于維護(hù)代碼,并且多個頁面可以各自引用同一個 .js 文件。
基本語法
JavaScript 語法和 Java 相似,每個語句以;結(jié)束,語句塊用{···}。 注意:JavaScript 嚴(yán)格區(qū)分大小寫。
變量的使用
變量的概念: 一個變量就是分配了一個值的參數(shù)。使用變量可以方便的獲取或者修改內(nèi)存中的數(shù)據(jù) 變量的聲明: 在聲明變量時使用關(guān)鍵字 var,要注意關(guān)鍵字與變量名之間的空格,也可以在一行中聲明多個變量,以逗號分隔變量。
var age;
var age, name, sex; age = 10; name = ‘zs’;
注意: 變量名必須是一個 JavaScript 標(biāo)識符,應(yīng)遵循以下標(biāo)準(zhǔn)命名規(guī)則:
- 第一個字符必須是字母、下劃線(_)或者美元符($)
- 后面可以跟字母、下劃線、美元符、數(shù)字,但不能是其他符號
- 在被申明的范圍內(nèi),變量的名稱必須是唯一的
- 不能使用保留關(guān)鍵字作為標(biāo)識符
變量的賦值: 在 JavaScript 中,使用=對變量進(jìn)行賦值??梢园讶我鈹?shù)據(jù)類型賦值給變量,同一個變量可以反復(fù)賦值,而且可以是不同的數(shù)據(jù)類型的變量,但是只能用var申明一次。要顯示變量,可以用console.log(x),打開 Chrome 的控制臺就可以看到結(jié)果。
var age; age = 18;
var age = 18;
注釋
以//開頭直到行末的字符被視為注釋,注釋是給開發(fā)人員看的,JavaScript 引擎會自動忽略。 另一種塊注釋是用/*···*/把多行字符包裹起來,視為注釋。 例如:
<html>
<head>
<script> //這是一行注釋
alert('Hello,world!');
/*從這里開始是塊注釋
?
塊注釋結(jié)束*/
</script>
</head>
<body>
···
</body>
</html>
數(shù)據(jù)類型
JS 的數(shù)據(jù)類型分為兩大類
- 簡單數(shù)據(jù)類型(基本數(shù)據(jù)類型):boolean、number、string、null、undefined(、symbol)
- 復(fù)雜數(shù)據(jù)類型:object
number
JavaScript 不區(qū)分整數(shù)和浮點(diǎn)數(shù),統(tǒng)一用 number 表示,以下都是合法的 number 類型:
123;//整數(shù)123 0.456;//浮點(diǎn)數(shù)0.456 1.2345e3;//等同于1234.5 -99;//負(fù)數(shù) NaN;//當(dāng)無法計算結(jié)果是使用NaN表示 Infinity;//表示無限大
number 存在精度問題:
0.2 + 0.1 = 0.30000000000000004 0.1 + 0.2 !== 0.3 //true
所以最好不要判斷浮點(diǎn)數(shù)是否相等
string
用于表示由零個或多個 16 位 Unicode 字符組成的字符序列,即字符串。字符串是以單引號'或雙引號"括起來的任意文本,比如'abc'、"xyz"等等。單引號和雙引號只是一種表示方式,不是字符串的一部分,所以,字符串'abc'中只有 a、b、c 這3個字符。 特點(diǎn): 不可變的 當(dāng)重新為一個字符串賦值時,實(shí)際上是重新開辟內(nèi)存空間,例如:
var lang=“Java”; lang=lang+“Script”;
以上代碼是先創(chuàng)建一個空間存放字符串 “Java”,接著在運(yùn)行到下一行代碼時,在內(nèi)存中重新開辟一個空間,存放的是"JavaScript",變量 lang 指向新開辟的空間。這些操作都是后臺發(fā)生的,影響網(wǎng)站性能,所以一般代碼中不要寫大量的字符串拼接。
null和undefined
null表示一個“空”的值,他和0以及空字符串’‘不同,0是一個數(shù)值,’'表示長度為0的字符串,而 null 示空。 undefined 表示“未定義”。
boolean
布爾值和布爾代數(shù)的表示完全一樣,一個布爾值只有 true 和 false 兩種值,區(qū)分大小寫。可以直接用 true 和 false 表示布爾值,也可以通過布爾運(yùn)算算出來:
true;//這是一個true值
false;//這是一個false值
2>1;//這是一個true值
2>=3;//這是一個false值
轉(zhuǎn)為boolean值
- null
- undefined
- “”
- NaN
- 0
注意:布爾值經(jīng)常用在條件判斷句中。
typeof運(yùn)算符
獲取變量類型,返回的值是string類型 結(jié)果有:
- “undefined”
- “boolean”
- “string”
- “number”
- “object”
- “function”
typeof 10 //"number"
typeof "10" //"string"
?
function fn(){
...
}
typeof fn //"function"
//age未聲明
typeof age //"undefined"
?
typeof null //"object"
typeof undefined //"undefined"
JavaScript對象
一、object 對象
- Object 類型,我們也稱為一個對象。是 JavaScript 中的引用數(shù)據(jù)類型。
- 它是一種復(fù)合值,它將很多值聚合到一起,可以通過名字訪問這些值。
- 對象也可以看做是屬性的無序集合,每個屬性都是一個名/值對。
- 對象除了可以創(chuàng)建自有屬性,還可以通過從一個名為原型的對象那里繼承屬性。
- 除了字符串、數(shù)字、true、false、null 和 undefined 之外,JS 中的值都是對象。
二、創(chuàng)建對象 創(chuàng)建對象的方式有兩種
第一種:
var obj = new Object();
obj.name = "###";
obj.age = 15;
第二種:
var obj = {
name:"###",
age:15
}
三、對象屬性的訪問
訪問屬性的兩種方式:對象.屬性名 或者 對象[“屬性名”]
四、數(shù)組
數(shù)組也是對象的一種。數(shù)組是一種用于表達(dá)有順序關(guān)系的值的集合的語言結(jié)構(gòu)。
創(chuàng)建數(shù)組 =====注意:不同于 java 數(shù)組長度可變 var users = new Array(3); users[0]=3; users[1]=9; users[2]=5; users[3]=999; 數(shù)組內(nèi)的各個值被稱作元素。每一個元素 都可以通過索引(下標(biāo))來快速讀取。索引是從零開始的整數(shù)。
函數(shù)
函數(shù)對任何語言來說都是核心的概念。通過函數(shù)可以封裝任意多條語句,而且可以在任何地方、任何時候調(diào)用執(zhí)行。ECMAScript 中的函數(shù)由function關(guān)鍵字來聲明,后跟一組參數(shù)以及函數(shù)體。 語法:
function functionName(arg0,arg1...){
statement
}
示例:
function sayHi(name,message){
alert("Hello "+name+","+message);
}
sayHi("ly","how are you?");//函數(shù)的調(diào)用
一些自帶的函數(shù)
返回值 ECMAScript 中的函數(shù)定義時可以有返回值,也可以沒有返回值。當(dāng)函數(shù)執(zhí)行完的時候,并不是所有時候都要把結(jié)果打印。我們期望函數(shù)給我一些反饋(比如計算的結(jié)果返回進(jìn)行后續(xù)的運(yùn)算),這個時候可以讓函數(shù)返回一些東西。也就是返回值。函數(shù)通過 return 返回一個返回值
返回值語法:
//聲明一個帶返回值的函數(shù)
function 函數(shù)名(形參1, 形參2, 形參...){
//函數(shù)體
return 返回值;
}
?
//可以通過變量來接收這個返回值
var 變量 = 函數(shù)名(實(shí)參1, 實(shí)參2, 實(shí)參3);
函數(shù)的調(diào)用結(jié)果就是返回值,因此我們可以直接對函數(shù)調(diào)用結(jié)果進(jìn)行操作。
返回值詳解: 如果函數(shù)沒有顯示的使用 return 語句 ,那么函數(shù)有默認(rèn)的返回值:undefined 如果函數(shù)使用 return 語句,那么跟再 return 后面的值,就成了函數(shù)的返回值 如果函數(shù)使用 return 語句,但是 return 后面沒有任何值,那么函數(shù)的返回值也是:undefined 函數(shù)使用 return 語句后,這個函數(shù)會在執(zhí)行完 return 語句之后停止并立即退出,也就是說 return 后面的所有其他代碼都不會再執(zhí)行。
參數(shù) ECMAScript 不介意傳遞的參數(shù)的個數(shù),也不在乎參數(shù)的數(shù)據(jù)類型。ECMAScript 中的參數(shù)是由一個數(shù)組來表示的,函數(shù)體內(nèi)部可以通過arguments對象來訪問這個參數(shù)數(shù)組。arguments對象只是與數(shù)組類似(不是Array實(shí)例)
形參和實(shí)參:
形式參數(shù):在聲明一個函數(shù)的時候,為了函數(shù)的功能更加靈活,有些值是固定不了的,對于這些固定不了的值。我們可以給函數(shù)設(shè)置參數(shù)。這個參數(shù)沒有具體的值,僅僅起到一個占位置的作用,我們通常稱之為形式參數(shù),也叫形參。 實(shí)際參數(shù):如果函數(shù)在聲明時,設(shè)置了形參,那么在函數(shù)調(diào)用的時候就需要傳入對應(yīng)的參數(shù),我們把傳入的參數(shù)叫做實(shí)際參數(shù),也叫實(shí)參。
var x = 5, y = 6;
fn(x,y);
function fn(a, b) {
console.log(a + b);
}
//x,y實(shí)參,有具體的值。函數(shù)執(zhí)行的時候會把x,y復(fù)制一份給函數(shù)內(nèi)部的a和b,函數(shù)內(nèi)部的值是復(fù)制的新值,
推薦好課:JavaScript微課、ES6微課