JavaScript
- 輕量的腳本語言
- 插入HTML中的編程語言
寫入HTML輸出
document.write("<h1>Hello,World!</h1>")
按鈕反應(yīng)
<button type="button" onclick="alert('Welcome!')">按鈕</button>
訪問HTML元素
x=document.getElementById("_name")
JavaScript對大小寫敏感。
函數(shù)編寫
JS的函數(shù)可以嵌套(騷不騷?但是好像其他語言也支持?)
<scirpt>
function Function_name()
{
function second()
{
}
}
</script>
變量提升
JavaScript的函數(shù)定義時,它會先把函數(shù)體掃一遍,然后把所有的變量聲明提升到函數(shù)頂部(這才是最騷的叭~)
arguments參數(shù)
只在函數(shù)內(nèi)部起作用,永遠指向函數(shù)調(diào)用者傳入的所有參數(shù),類似Array但不是Array
利用 arguments 獲得所有參數(shù)(求和)
function sum(a,b)
{
if(arguments.length===0)
return 0;
var s=0;
for(var i=0;i<arguments.length;++i)
s+=arguments[i];
return s;
}
sum();
sum(1);
sum(1,2);
sum(1,2,3,4,5);
rest參數(shù)
要想獲得函數(shù)參數(shù)列表外的剩余參數(shù),使用rest更為方便,當(dāng)參數(shù)數(shù)量不夠填滿參數(shù)列表時,rest是一個空數(shù)組,而在參數(shù)將參數(shù)列表填滿后,會被包括在rest數(shù)組中。
方法
在一個對象中綁定函數(shù),稱為這個對象的方法
在一個方法中,this這個特殊變量始終指向當(dāng)前對象
通過 apply() 可以控制this的指向
function getAge() {
var y = new Date().getFullYear();
return y - this.birth;
}
var xiaoming = {
name: '小明',
birth: 1990,
age: getAge
};
xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 參數(shù)為空
改變this的另一個方法是 call()
Math.max.apply(null,[1,2,3]);
Math.max.call(null,1,2,3);
(對于普通函數(shù)調(diào)用,通常把 this 綁定為 null )
裝飾器
利用 apply() ,動態(tài)改變函數(shù)行為。
統(tǒng)計使用了多少次 parseInt() 函數(shù)
var count =0;
var oldparseInt=parseInt;
window.parseInt = function()
{
++count;
return oldparseInt.apply(null,arguments);//調(diào)用原函數(shù)
}
高階函數(shù)
第一次見,覺得賊牛逼。。
就是說,函數(shù)的參數(shù)可以接收另外一個函數(shù)作為參數(shù),這樣的函數(shù)稱之為 高階函數(shù)
//一個簡單的高階函數(shù)
function add(x,y,f)
{
return f(x)+f(y);
}
add(1,-3,Math.abs);
使用外部JavaScript
外部JavaScript文件后綴名為 .js
<body>
<script src="xxx.js"></script>
</body>
JavaScript可以用""反斜杠來折行
聲明變量
var _name
JavaScript具有動態(tài)類型
JavaScript并不強制要求聲明時使用var,但會自動生成全局變量,請盡量不要這么干
- 顯式地聲明變量類型
var a=new String;
var a=new Number;
var a=new Boolean;
var a=new Array;
var a=new Object;
- 聲明全局變量
a = "xxx";
比較運算符
- ==弱類型比較
- ===強類型比較
NaN與任何數(shù)都不相等,包括它自己,在判斷NaN時使用isNaN()函數(shù)
數(shù)組
數(shù)組聲明
var a=new Array();
a[0]="xxx";
a[1]="xxx";
var a=new("x","xx","xxx");
var a=["x","xx","xxx"];
為代碼可讀性考慮,盡量用[]
indexOf
通過indexOf()搜索指定元素的位置
slice
對應(yīng)String的substring(),截取Array的部分元素,返回一個新的數(shù)組
起止參數(shù)包括開始索引,不包括結(jié)束索引
不給indexOf()傳遞任何參數(shù),它會截取全體元素,因此可以通過indexOf()復(fù)制一個Array
push和pop
把數(shù)組當(dāng)成棧就好
unshift和shift
- unshift()在數(shù)組頭部添加元素
- shift()把第一個元素刪去
splice
修改Array的萬能方法,增刪無所不能
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 從索引2開始刪除3個元素,然后再添加兩個元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只刪除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不刪除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因為沒有刪除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
concat
concat()將多個Array連接起來,并返回新的Array
并沒有修改當(dāng)前Array,只是返回了新Array
var arr=['a','b','c'];
arr.concat(1,2,[3,4]); //['a','b','c',1,2,3,4]
join
join()將當(dāng)前Array的每個元素用指定字符串連接
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
對象
對象的屬性以名稱和值對的形式(name:value)定義。
var people=
{
name:"12end",
age: "18",
}
判斷屬性是否存在于對象中:
'name' in xiaoming;
in()判斷的屬性有可能是對象繼承得到的,如要判斷一屬性是否為對象自身擁有的,應(yīng)該用 hasOwnProperty()
Map和Set
JavaScript的默認對象表示方式{ }可以視作其他語言中Map和Set的數(shù)據(jù)結(jié)構(gòu)(一組鍵值對)。
但是JavaScript對象的鍵必須是字符串,為了解決,ES6引入了Map。
Map
具有極快的查找速度
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined
Set
與Map類似,但不存儲value,key具有唯一性,所以Set有自動去重的功能,相當(dāng)于集合
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
s.add(4);//Set[1,2,3,4]
s.delete(1);
s;//Set[2,3,4]
比較運算符
== 等于
=== 全等(類型也必須相同)
for/in循環(huán)
循環(huán)遍歷對象的屬性
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
JavaScript錯誤
- try 測試代碼塊錯誤
- catch 處理錯誤代碼塊
- throw 創(chuàng)建自定義錯誤
(try 與 catch 通常成對出現(xiàn))
產(chǎn)生錯誤的術(shù)語:JavaScript“拋”出了一個錯誤
JavaScript HTML DOM
通過HTML DOM可訪問JSHTML的所有元素
HTML DOM(文檔對象模型)
當(dāng)網(wǎng)頁被加載時,瀏覽器會創(chuàng)建頁面的文檔對象模型(Document Object Model)。
HTML DOM 模型被構(gòu)造為對象的樹。
查找 HTML 元素
- 使用id
var x = document.getElementById("a"); //找到id=a的元素
- 使用標(biāo)簽名
var x = document.getElementByTagName("p"); //找到標(biāo)簽為<p>的所有元素
- 使用類名
改變 HTML 內(nèi)容
- 改變HTML輸出流
document.write(Date())
- 改變HTML元素
document.getElementById("xxx").innerHTML="NEW TEXT";
- 改變HTML樣式
document.getElementById("xxx").style.property=new style
對事件做出反映
one click=JavaScript;
HTML 事件的例子:
- 當(dāng)用戶點擊鼠標(biāo)時
- 當(dāng)網(wǎng)頁已加載時
- 當(dāng)圖像已加載時
- 當(dāng)鼠標(biāo)移動到元素上時
- 當(dāng)輸入字段被改變時
- 當(dāng)提交 HTML 表單時
- 當(dāng)用戶觸發(fā)按鍵時
JavaScript RegExp對象
RegExp 為 正則表達式 的縮寫,用于描述需要檢索的內(nèi)容
定義RegExp
var a = new RegExp("!"); //使用該RegExp檢索時,將尋找"!"
創(chuàng)建RegExp對象
new RegExp(pattern,attributes);
參數(shù)pattern:
一個字符串,指定正則模式
參數(shù)attributes(可選):
包含屬性"g","i",和"m",分別用于指定全局匹配,對大小寫不敏感的匹配,多行匹配
RegExp對象的三個方法
- test()
檢索字符串中的指定值,返回true或者false
var a = new RegExp("!");
document.write(a.text("Hello,world!"));
//輸出true
- exec()
檢索字符串中的指定值,返回被找到的值
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free")); //輸出e
- compile
用于改變RegExp
patt1.compile("d");