JavaScript學(xué)習(xí)

1運算符  

算數(shù)運算符:+，-，*，%，/，++，--

賦值運算符:=,+=,-=,*=,/=,%=

比較運算符:==,!=,!==,>,<,>=,<=

===(全等于) !== (不全等于): 判斷值和數(shù)據(jù)的類型

邏輯運算符:&&,||,!

條件運算符:

字符串操作: +連接符號,

位運算符:

2變量 

var 變量名=值

var 的類型取決于值的類型 類型一個自動類型

var 類型可以動態(tài)的變換

var a = "abc"

a = 123   這是沒問題的

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

數(shù)字類型  number

字符串類型 string 空字符也是字符類型

真假類型 boolean

空類型: null什么都沒有

未定義類型:Undefined 表示沒有定義

符合數(shù)據(jù)類型:復(fù)雜類型,array數(shù)組,object對象

查看數(shù)據(jù)的類型 Typeof  返回的是

4alert 彈出一個窗口,會暫停程序的運行

5語法規(guī)則:

1區(qū)分大小寫

2所有的符號都必須是英文狀態(tài)下的

3可以不加分號結(jié)尾,但是最好加上最好.

4單行注釋 // 多行注釋 /**/

5document.write() 輸出到頁面

6傳值

賦值傳值: 兩份數(shù)據(jù),之間不會影響

引用傳值: 一份數(shù)據(jù)，任意一個改動值另一個都會收到影響

簡單數(shù)據(jù)是賦值傳值 var a = 10; var b = a;

復(fù)雜數(shù)據(jù)都是引用傳值: var a = {a:"你好",b:23}; var b = a

7if(條件){語句塊}  

if(條件){語句塊} else{語句塊}

if(條件){語句塊} else if(條件){語句塊} else{語句塊}

8switch

switch(值)
{
    case 值:
    {
    }
    break;
    case 10>值  前提是值是bool類型
    break
    
    default:默認(rèn)
    break;
}

9while(條件){執(zhí)行體}

10 for(初始值;循環(huán)條件;值每次的變化){循環(huán)體}

11函數(shù) function 函數(shù)名(){函數(shù)體}

帶參數(shù)函數(shù) function 函數(shù)名(名字){ 使用參數(shù)直接用名字 函數(shù)體}

帶參數(shù)的不需要加var, 

     function jia(a,b)
{
document.write(a+b);
}
jia(10,20)

參數(shù)最后一個可以有默認(rèn)值

 function jia(a,b=20){}

12數(shù)組

同數(shù)據(jù)類型的變量放在一個集合里

var arr=[23,24,25]

訪問第一個取值arr[0]

長度: arr.length

for(var key in 數(shù)組名){

 key就是數(shù)組的下標(biāo)

}

查找數(shù)據(jù)所在索引

arr.indexOf(10)  返回10的下標(biāo)  ，沒有就返回 -1

刪除某個元素 splice(開始索引,刪除個數(shù))

var arr = [10,20,230,40,50]

比如我要刪除后面兩個

arr.splice(3,2)

排序 快速排序 自己寫一個

arr.sort(function(s1,s2){
    if(s1<s2){

        return -1;
    }

    else{

        return 1;

    }

});

隨機打亂一個數(shù)組 類似洗牌

var arnm = [1,2,3,4,5,6,7,8,9,10];

arnm.sort(function(lhs,rhs){

    if(Math.random()<0.5){

        return -1;

    }

    else {

        return 1;

    }

});

13二維數(shù)組

遍歷二維數(shù)組

var arr1=[1,2,3];
var arr2=[4,5,6];
var arr3=[7,8,9];
var arr4=[arr1,arr2,arr3];
或者
var arr4=[
            [1,2,3],
            [4,5,6],
            [7,8,9] 
           ];

for(var i = 0;i<arr4.length;i++)
{
for(var j =0;j<arr4[i].length;j++)
{
document.write(arr4[i][j]+"<br/>");
}
}

14常用函數(shù)

ParseInt:取整

parseFloat: 去浮點數(shù)

NaN:not a number表示不是一個數(shù)字

isNaN: 判斷是不是數(shù)字,是返回false  如果是字符才會返回true

15array對象

var arr = new Array(23，2,2,4) // 創(chuàng)建一個array對象

對象有屬性和方法

Concat()連接內(nèi)容或者數(shù)組,組成新的數(shù)組 返回

Join加入某個字符n,用n來連接數(shù)組的每項組成的字符串 最后元素一個不會

arr567 = arr567.join(""); 使用這種方法,可將一個數(shù)組變成一個字符串

Pop刪除數(shù)組最后一個元素,并返回

Push加入新的內(nèi)容到最后,返回新的長度

Reverse 反轉(zhuǎn)數(shù)組的順序

16 string對象 var str = "abc"  var str = new string("abc")

屬性:

length  字符串長度

方法:

charAt(n) 獲取字符串里下標(biāo)為n的字符

也可以直接用[]下標(biāo)號 取值

CharCodeAt(n) 找到索引位置上的字符串的編碼值 ASCLL

indexOf("m") 找m在字符串中第一次出現(xiàn)的位置 從0開始沒找到返回-1

lastIndexOf("c") 字符c在字符串中最后一次出現(xiàn)的位置 找到返回-1

split("n") 以字符n分割字符串為 返回一個數(shù)組 

如果沒有這個字符 就會把所有的字符串轉(zhuǎn)為一個數(shù)組元素.

split("") 可以把字符串 每個元素切割成 數(shù)組

substr(n,m):截取字符串: 把字符串從n開始的地方截取m個字符

如果只有一個參數(shù)n,默認(rèn)就從n開始截取到最后

substring(n,m)截取字符串:把字符串從n的位置開始截取到m的位置,

注意能夠取到n但是去不到m

toLowerCase() 把字符串中的字符轉(zhuǎn)換成小寫toUpperCase轉(zhuǎn)大寫

17 Math 對象

Math.pow(n,m) 求n的m次方

Math.abs(n)求n的絕對值

Math.round(n)求n的四舍五入值

Math.floor(n) 求n的向下取整的值,不大于n的最大整數(shù)

Math.ceil(n) 求n的向上取整的值，不小于n的最小整數(shù)

Math.random()獲得一個0到1之間的隨機數(shù),注意:能取到0,但不不能取到1

Math.random()*20  求0到20之間的隨機數(shù) 

Math.random()*10+10  求10到20之間的隨機數(shù) 

也就是最小10最大20,同時減去10(0,10）然后總體+10

求30-60之間的隨機數(shù):

首先30-30 60-30(0,30)然后整體+30

Math.random()*30+30

50 100隨機數(shù) 都減去50(0*50) 整體加50

Math.random()*50+50

Math.PI 圓周率

Math.floor 方法實例 數(shù)值向下取整 就是:小與或等于他的最大整數(shù)

該方法與 Math.ceil 方法正好相反。

運行該例子，輸出：

0
10
-10
-11

18 JS特殊字符

單引號和雙引號：只是用字符和字符串這兩個沒有區(qū)別

如果雙引號中包括雙引號需要用\"轉(zhuǎn)義

單引號也是一樣的

如果要用反斜杠'\\'

\轉(zhuǎn)義字符  document.write("他說:\"aaa,bbb,ccc,hggg\""+"<br/>");

\r回車   

\r換行

19 Date 對象

構(gòu)造方法:

new Date(); //創(chuàng)建當(dāng)前時間日期對象

new Date("1999/9/9 6:6:6") 創(chuàng)建一個指定的時間

new Date("1999,9,9,6,6,6") 創(chuàng)建一個指定的時間日期對象

new Date(2343523445632)  創(chuàng)建一個從1970年開始的1-1-凌晨0點開始,

以毫秒為單位, 但現(xiàn)在的時間  單位是毫秒。

toLocalString() 以當(dāng)前本地格式顯示

getFullYear()  獲取年份

getMonth()   獲取月份
getDate()    獲取日期

getHours()    獲取小時

getMinutes()    獲取分鐘數(shù)

getSeconds()    獲取秒數(shù)

getMilliSeconds() 毫秒

getDay()   獲取星期

setFullYear(n) 設(shè)置年份

setMonth()   設(shè)置月份
setDate()    設(shè)置日期

setHours()    設(shè)置小時

setMinutes()   設(shè)置分鐘數(shù)

setSeconds()   設(shè)置秒數(shù)

setMilliSeconds() 設(shè)置毫秒

20 Object對象

var obj = {name:"小明",age:24,taiji:function(){},zuofan:function(alert("做飯")){]};

里面有屬性 有方法

使用對象

obj.name 取值

//調(diào)用方法

obk.zuofan();

HTML和JS交互 通過id獲取這個標(biāo)簽

HTML:對象.HTML屬性=值

CSS: 對象.style.CSS 屬性=值

document.getElementById(標(biāo)簽id) 獲取之后 Js就可以使用這個標(biāo)簽的屬性和方法了

Onclick  點擊

Onmouseiver  鼠標(biāo)放上

Onmouseout   鼠標(biāo)離開.

function fn(){
var obj = document.getElementById("d1");
obj.style.background = "red";
}
function fm(){
var obj = document.getElementById("d1");
obj.style.background = "blue";
}
</script>

<body>
<div id="d1" onmouseover="fn()" onmouseout="fm()">
這是DIV
<div/>

21 事件

鼠標(biāo)事件:

Onclick:點擊

OMouseover:鼠標(biāo)放上

Onmouseout:鼠標(biāo)離開

ONdblclick:雙擊事件

Onmousedown:鼠標(biāo)按下

Onmouseup:鼠標(biāo)抬起

Onmousemove: 鼠標(biāo)移動

表單事件:

onfocuss:獲得焦點

onblur:失去焦點

onsubmit:提交事件

onchange:當(dāng)發(fā)生改變的時候

onreset: 重置事件

鍵盤事件:
onkeyup:  鍵盤抬起

onkeydowm: 鍵盤按下

onkeypress:鍵盤按下一次

窗口事件:onload事件

頁面加載完成之后立刻執(zhí)行的事件。

21 DOM對象 當(dāng)網(wǎng)頁被加載時,瀏覽器會創(chuàng)建頁面的文檔對象模型(Document Object Model)

通過這些對象 去修改或者獲取元素對應(yīng)的內(nèi)容

22 DOM操作HTML

JavaScript能改變頁面中所有HTML的元素

JavaScript能夠改變頁面中所有的HTML屬性

JavaScript能夠改變頁面中所有的CSS樣式

JavaScript能夠?qū)撁嬷兴械氖录鞒龇磻?yīng)

document.getElementById("id號")

//通過元素名獲取

<p>aaa</p>

<p>bbb</p>

他默認(rèn)獲得的就是第一個元素的對象

document.getElementsByTagName("p")

23異常捕獲

try{

    放可能會發(fā)生異常的代碼

}catch(err){
   發(fā)生異常在這里處理 err就是錯誤信息

}
自定義錯誤  使用throw拋出

try{

如 if(字符串 == "")  我們不想要空字符串

{    

    throw "字符串不能為空";

}

}catch(err)

{

    這時候 err輸出的就是 字符串不能為空
}

24 使用函數(shù)來定義對象,然后創(chuàng)建新的對象

創(chuàng)建一個object對象 并且為對象的屬性賦值
poe = new Object()
poe.age = 10
poe.name = "a"

還有另外一種也可以
poe = {age:"10",name:"hahaha"};

document.write("age:"+poe.age)
document.write("name:"+poe.name)

使用函數(shù)來創(chuàng)建  

function peop(name,age){
this._name = name;
this._age = age;
this._print = function prints(){
document.write("age:"+this._age+"name:"+this._name);
}
}
peopa = new peop("zhangsan","10")
peopa._print()

25事件詳解

HTML事件處理  

這是一個Button標(biāo)簽
<button id="btn1">按鈕</button>
<script>
    var btn = document.getElementById("btn1")
    btn.onClick = function(){  函數(shù)體代碼  }  點擊這個按鈕會執(zhí)行這個

</script>

    //如果是這種情況 
    var btn = document.getElementById("btn1")
    btn.onclick = function(){ alert("a")}  這個事件會被覆蓋
   btn.onclick = function(){ alert("b")}   這個事件會執(zhí)行

這是DOM2級事件處理

addEventListener("事件名","事件處理函數(shù)","布爾值")

true事件捕獲,false事件冒泡  這個版本暫時忽略

使用removeEventListener()移除一個事件

var btn = document.getElementById("btn1")
    btn:addEventListener("click",da1)
btn:addEventListener("click",da2)
function da1(){alert("我是事件1")}
function da2(){alert("我是事件2")}  這個事件會依次執(zhí)行
刪除一個事件
btn:removeEventListener("click",da1)


使用type屬性可獲取事件類型 比如  click  mouseover
target獲取事件目標(biāo)

stopPropagation() 阻止事件冒泡

26Window對象

innerHeight 瀏覽器內(nèi)部高度

innerWidth  瀏覽器內(nèi)部寬度

26 可以設(shè)定一個時間間隔來執(zhí)行代碼 

1setlnterval()間隔 單位毫秒數(shù),不停的執(zhí)行指定的代碼

clearlnterval()用來停止setlnterval方法的函數(shù)代碼

2setTimeout（）暫停指定的毫秒數(shù)后指定的代碼

clearTimeout 停止執(zhí)行settimeout方法的代碼

我們每隔1秒 去調(diào)用獲取事件

var mytime = setInterval(function(){
 gettime();
},1000)
function gettime(){
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("timew").innerHTML=t;
}

26 Location 對象 window.location用來獲取當(dāng)前頁面的地址(URL)

27 Screen對象

screen.avaliWidth 可用屏幕寬度

screen.availHeigth 可用屏幕高度

screen.heigth  屏幕高度

screen.width  屏幕寬度

28 面向?qū)ο?/span>

29 prototype

在JavaScript中prototype是實現(xiàn)面向?qū)ο蟮闹匾獧C制

每個函數(shù)就是一個對象(function)函數(shù)對象都有一個子對象,prototype對象,類是

以函數(shù)的形式來定義的,prototype表示改函數(shù)的圓形,也表示一個類成員的集合

30 function 來模擬類

function Peo(){
}
Peo.prototype.shuo = function(){
alert("說話");
}
實例化
var p = new Peo()
p.shuo()   調(diào)用類方法


屬性
Peo.prototype.age 

這個function Peo就相當(dāng)于構(gòu)造函數(shù)  這樣可以給內(nèi)部屬性賦值
function Peo(age){
	this._age = age
}

var p = new Peo(30)
alert(p._age)    這里輸出的就是30

31 類的繼承

function Stu(){
}
繼承自 上面的Peo 
Stu.prototype = new Peo();
調(diào)用父類的函數(shù)
var s = new Stu();

子類重名 覆蓋父類方法
Peo.prototype.shuo = function(){
	alert("說不出話");
}


如果還想調(diào)用父類的方法
var superFunc = Stu.prototype.shuo;
superFunc.call(this);

父類的先構(gòu)造 然后 子類再構(gòu)造

成員函數(shù)可以直接使用成員屬性

Peo.prototype.shuo = function(){

	alert("說話"+this._age);
}

閉包是外部不能訪問這個對象里的變量

var n = 10            這個變量可以在任意地方使用
function Peo(age){
this._age = age
alert("父類"+this._age);
}
Peo.prototype.shuo = function(){
alert("說話"+this._age);

}

alert(n) 成功輸出

但是我們可以把他包起來
(function(){
var n = 10
function Peo(age){

	this._age = age
	alert("父類"+this._age);

}

Peo.prototype.shuo = function(){

	alert("說話"+this._age);
}

}());


這樣外部就不能訪問他了

這時候外部不能訪問了,在么辦呢? 

這里就要面向?qū)ο蟮姆庋b了

window.Peo = Peo 使用window對象來記錄這個變量
然后就可以直接使用Peo了

另一種方法 來使用面向?qū)ο?/span>

首先還是創(chuàng)建一個function

function Per(){
//創(chuàng)建一個空的對象
var _this = {}
_this.shuohua = function(){alert("說話");}
//返回這個對象
return _this;
}

繼承

function ter(){
var _this = Per();
return _this;
}

創(chuàng)建對象 并調(diào)用方法

var t = new ter()
t.shuohua();

重寫父類方法

function ter(){
var _this = Per();
_this.shuohua = function(){
alert("不說話");
}
return _this;
}

如果還是要調(diào)用父類的方法

function ter(){
var _this = Per();
var superFunc = _this.shuohua;
superFunc.call(this);
_this.shuohua = function(){
alert("不說話");
}
return _this;
}

有參構(gòu)造和屬性

function Per(name){
//創(chuàng)建一個空的對象
var _this = {}
_this.names = name;
_this.shuohua = function(){
alert("說話");
}
//返回這個對象
return _this;
}

封裝起來

(function(){
function Per(name){
//創(chuàng)建一個空的對象
var _this = {}
_this.names = name;
_this.shuohua = function(){
alert(_this.names+"說話");
}
//返回這個對象
return _this;
}
window.Per = Per;
}());

32代碼模塊

1js里面代碼可以放在不同的文件里,稱為代碼模塊

2一個模塊需要引用其他模塊代碼的時候需要使用require

3require 如果是第一次調(diào)用,那么就加載執(zhí)行腳本

每個代碼模塊由  module.exports 導(dǎo)出的對象

每次require的時候, 都返回module.exports

假如有一生成隨機數(shù)的js文件 里面的代碼是

var utils = {
random_int:function(start,end){
var num = start+(end-start)*Math.random();
num = Math.floor(index);
return num;
}
};

每個模塊都有一個module.exports 
這時候module.exports 指向的是這個utils
module.exports = utils;

在其他文件里導(dǎo)入使用

導(dǎo)入代碼 并用變量保存返回值

這里會判斷是不是第一次執(zhí)行,如果是第一次他會把js代碼全部加載上來

并執(zhí)行者整個js文件。然后返回module.exports

如果不是第一次require 那么就直接返回module.exports

var utls = require("utils")

調(diào)用模塊方法
var num = utls.vrandom_int(10,20)

module.exports可以到處表,可以導(dǎo)出數(shù)組,還可以導(dǎo)出函數(shù)對象

33 this

顯示的傳遞實例, 但參數(shù)第一個參數(shù)就是this

function test(name,age){
this.name = name;
this.age = age;
}


var xiaoming = {};
test.call(xiaoming,"xiaoming",20);
console.log(xiaoming);

上面輸出的是{name:"xiaoming",age:20}

this就是類似參數(shù)似得,可以顯示的傳遞this

上面xiaoming傳到參數(shù)里,其實他就是那個this

通過函數(shù)對象.call(對象實例,參數(shù)) 這個this指向的就是那個實例

隱式的傳遞實例   其中this就是 xiaohong

他就是將xiaohong作為this 傳給了這個函數(shù)方法

var xiaohong = {
name:"xiaohong",
testfunc = function(){
console.log(this);
}
}
xiaohong.testfunc();

輸出:{name:"xiaohong",testfunc:[Function:test_func]}

還有一種就是強制傳遞this

var func = function(){
console.log(this);
}.bind(xiaohong); 
func();

因為上面綁定了xiaohong  所以他執(zhí)行的時候會強制將xiaohong作為this

bind在原來的對象基礎(chǔ)上,產(chǎn)生了一個新的函數(shù)對象

func = func.bind(xiaohong)
func()

也就是會產(chǎn)生一個新的函數(shù)對象,這兩個對象指向同一個代碼段,

但是他們有一個this是不同的,這個this就是他綁定的

如果即綁定了this, 又隱式的傳遞this呢

強制綁定優(yōu)先級高級 隱式傳遞

var xiaohong = {
    name: "xiaohong",
    test_func:function(){
        console.log(this);
    }.bind(4)
};

xiaohong.test_func()
這里輸出的就是4   因為他強制綁定了是4

如果用call顯示傳遞 那么他調(diào)用的還是xiaohong 不會輸出4 因為強制綁定高于他們

var func = function(){
    console.log(this);
}:

func = func.bind(xiaohong);
func();
func.call(4);//顯示傳遞

我們看到 func_test2 他強制綁定了5 那你無論隱式或顯示傳遞他 都是5

var xiaohong = {
name:"xiaohong",
func_test:function(){
console.log(this);
},
func_test2:function(){
console.log(this);
}.bind(5),
}

xiaohong.func_test2()   隱式 最后一個還是5

xiaohong.func_test2.call(20)顯式  輸出還是5

總結(jié)一下就是強制綁定this,優(yōu)先級比其他的都高

顯示call傳遞this高于 

詳解面向?qū)ο?/span>

函數(shù)對象
function person(name,age){
//類成員
this.name = name;
this.age = age;
}
//類方法 
person.prototype.test_func = function(){
console.log("name"+this.name+"  age"+this.age);
}
//實例化對象
var p = new person("小明",20);
p.test_func();

prototype是什么?

每一個函數(shù)對象都會有一個prototype變量, 指向這個對象。

var func_temp = function(){};

console.log(func_temp.prototype) 

這里輸出的：func_temp{} 

沒錯就是一個空的對象,由于他是一個對象,有了這個那就可以來擴充這個對象key:value

func_temp.prototype.test_func= function(){}

new函數(shù)做了什么？

var data = new func_temp();

第一步:他是把一個空的表給data  var data = {};

第二步:在data里面加key:valye  key是__protp__  value是 prototype這個對象的賦值 潛賦值

第三步:把這個data作為實例,this傳給后面的函數(shù)

第四步:調(diào)用這個函數(shù)func_temp 并把data作為this傳遞

console.log(data.__proto__)
console.log(person.prototype)

上面兩個輸出的都是一樣的 

{test_func:[Function]}

{test_func:[Function]}

所以這兩個func對象都是指向 同一個引用,也就是代碼是用一份,但是他們是兩個表.

__proto__是被隱藏的.

調(diào)用方法的時候做了什么事情呢?

把data 作為this傳遞給data的__proto__ 這個對象里面的函數(shù).

data.test_func()

data.__proto__.test_func.call(data);  

上面兩個效果是一樣的,意思是隱式把data作為this傳遞給__proto__的方法

第二個是顯示的把data作為this傳遞給__proto__的方法

如果這個key　執(zhí)行新的value 方法呢?

p.test_func = function(){

console.log("new test_func",this);

}

p.test_func();

這時候上面執(zhí)行的就是指向的這個新的函數(shù)

他首先會在這個實例p的表里面搜索,有沒有這樣的對象,

如果沒有在到對象的__proto__里面去搜索。有了之后吧這個實例

作為this，然后傳遞給這個函數(shù)對象.

繼承

var Man = function(){}

//這種做法是不對的,因為這樣他們是指向同一個對象

Man.prototype = 父類.prototype;

如果這時候要擴展Man的方法的時候, 父類的方法跟著改了。

使用這種方法來復(fù)制 原來的 是一個潛拷貝

var super = function(){};

super.prototype =  父類.prototype;

Man.prototype = nwe Super(); //這樣子類復(fù)制的是super這個的prototype

這時候new出來的是新的實例,  這時候Man就可以擴展方法了。

如果這時候 Man修改key = 同名函數(shù)就是會把 父類的覆蓋掉

如果沒有同名函數(shù) 就是擴展這個類。

編寫一個class方法 來定義一個雷,讓他繼承基類

//函數(shù)對象 模擬類

function Class(param){
var new_class = function(){};
//這里就表示有基類 就直接繼承
if(param.extend){
var supers = function(){};
supers.prototype = param.extend.prototype;
new_class.prototype = new supers();
}
//遍歷參數(shù)
for(var key in param){
if(key == "extend"){
continue;//這個參數(shù)處理過了
}
//把所有參數(shù)的函數(shù) 加到這里面來
new_class.prototype[key] = param[key];
}
return new_class;
}
//把這些函數(shù) 屬性作為參數(shù)傳遞進去
var Student2 = Class({
extend:person, //設(shè)置基類
set_class: function(class_num){
this.classs = class_num;
},
set_grade:function(grade){
this.grade = grade;
},
});
//實例化
var s = new Student2();
//調(diào)用
s.set_class(10); 
s.set_grade(2);

發(fā)布一個作業(yè) 屬性面向?qū)ο?

1熟練的使用require與module.exports;

2熟悉了解new與構(gòu)造函數(shù)

3熟悉掌握this,與bind(this),function.call(實例,參數(shù).)

4熟悉掌握js繼承原理

5編寫一個person類,這個類在player.js文件,  

然后編寫一個player類 放在player.js里面, 繼承了person

 在外部實例化player對象

 在person中編寫一個函數(shù)get_name.使用player的實例調(diào)用