JavaScript基礎(chǔ)

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)建自定義錯誤
    trycatch 通常成對出現(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");
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容