JavaScript學習

表達式的結果類型能夠是 string , number, boolean ,對象.. array.
case 後面能夠是常量，能夠是變量.
若是case後沒有break,那麼當程序執行某個case塊，時，就會一直執行，直到碰到一個break語句，纔會跳出switch
defual語句能夠放在swith任何位置，當一個條件都匹配不到，就會執行default,直到碰到一個break語句，或者switch執行完畢.
switch 和 if else if 的區別. 若是是針對幾個固定條件的判斷，則使用switch ,若是範圍的判斷，咱們使用 if ....else if....

/*請編寫一個程序,能夠接收一個字符串，好比: a,b,c,d,e,f,g a表示星期一，b表示星期二 … 根據用戶的輸入顯示相依的信息.要求使用

switch 語句完成

//string,number,boolean, 對象,array

//var str=1; //true->1 2 (1,2->true)

//var obj=new Object();

//var obj2=obj;

var arr1=new Array("1","2");

var arr2=arr1;

switch(arr1){

case arr2:

document.write("星期一，猴子穿新衣");

break;

case false:

document.write("星期二，猴子當小二");

break;

default:

document.write("猴子休息...");

break;

}

5、js的循環控制語句

1. for語句

for(初始化變量;循環條件的判斷;步長的變化){

//語句

}

while

while(循環條件){

//語句

//步長的變化

}

do..while

do{

//語句

//步長

}while(循環條件)

需求:(爲何須要循環語句)

->使用循環控制的語句來處理循環的需求

for 的基本用法

for(初始化; 條件判斷; 控制變量變化){

//for循環語句;

}

☞ 1. 初始化條件能夠放在for 代碼前.

2. 條件判斷能夠是組合的 (i>10 && i<50 ...)

3. 控制變量變化的部分能夠放在 for循環體.

快速入門:

編寫一個程序, 能夠打印9000000句

"你好，我是劉德華同志!"。請你們想一想怎麼作?

代碼：

for(var i=0;i<10;i++){

document.write("hello,wrold!"+i+"<br/>");

}

2. while循環控制

基本用法:

while(循環條件){

//循環的代碼

}

快速入門案例:

咱們用 while來實現輸出10句 hello,world

var i=0;

while(i<10){

document.write("hello,world"+i);

i++;

}

流程圖：

3. do..while循環控制

基本用法:

do{

//語句..

//....

}while(循環條件);

說明: 1. 語句部分能夠是多條.

2. 循環條件能夠是一個組合條件好比: i>10 && i<30

快速入門:

把上面的要求用do...while循環一把.

實際運用一下for來輸出一個金字塔

提示：若是未來難題?

思路簡化:輸出一半的金字塔

<html>

<head>

//輸出一半金字塔

* 1->一個*

** 2->2個*

***

****

*****

* 1->1* (1-1)*2+1=1 空格 2 總層數-當前層數=3-1=2

*** 2->3* (2-1)*2+1=3 空格 1 總層數-當前層數=3-2=1

***** 3->5* (3-1)*2+1=5 空格 0 總層數-當前層數=3-3=0

空心分析

* 第一層輸出*

* * 中間層: 只輸出兩邊的*,空間輸出空格思路---->代碼

***** 最後一層輸出輸出*

菱形

***

*****

***

//n變量表示層數

var n=10;

for(var i=1;i<=n;i++){

//輸出空格

for(var k=1;k<=n-i;k++){

document.write(" ");

}

for(var j=1;j<=(i-1)*2+1;j++){

//這裏須要思考，何時輸出*,何時輸出空格

if(i==1 || i==n){

document.write("*");

}else{

//中間層..

if(j==1 || j==(i-1)*2+1){

document.write("*");

}else{

document.write(" ")

}

document.write("<br/>");

}

</script>

</head>

<html>

上課課堂練習:

1.請使用

while

do..while 來改寫

輸出金字塔的案例:

2.接收一個整數，能夠輸出對應的菱形. , 再看看能不能輸出空心菱形

6、如何調試 js代碼

ie中如何調試js, ie 8 中自帶調試工具

調式步驟:

先打開開發人員工具->腳本
下斷點 –》點擊啓動調試
刷新頁面，進入調試狀態

f11->一行一行執行

f10-> 跳過一個函數繼續執行(至關於把一個函數當作一個語句執行)

shift+f11->跳出函數

經過逐行調試，咱們能夠看到局部變量變化狀況.

注意: 取消斷點

最原始的方法 ,經過 window.alert(信息); document.write("信息");

如何處理js的bug

js 代碼發生錯誤，如何定位其錯誤呢?

能夠經過程序員的經驗來判斷
window.alert() 來輸出信息
使用firebug 的調式用具 [cy--5,瀏覽器對象模型BOM]

7、函數

1. 爲何須要函數

看一個實際的需求:

輸入兩個數,再輸入一個運算符(+,-,*,/)，獲得結果.

<html>

<head>

var num1=window.prompt("請輸入一個數");

var num2=window.prompt("請輸入2個數");

var oper=window.prompt("輸入運算符號");

//把num1, num2轉成float

num1=parseFloat(num1);

num2=parseFloat(num2);

var res=0;

switch(oper){

case "+":

res=num1+num2;

break;

case "-":

res=num1-num2;

break;

case "*":

res=num1*num2;

break;

case "/":

res=num1/num2;

break;

default:

window.alert("輸入的運算符號錯誤");

}

window.alert("res="+res);

</script>

</html>

若是咱們在a.html, b.html, c.html咱們都須要作這個計算.

用代碼來實現，上面的分析:

寫一個js文件,在該文件中封裝函數
在須要的地方引入js文件便可.

好比在a.html中使用

代碼:

funs.js碼

//必然須要傳入參數[num1,num2,oper]

function jiSuan(num1,num2,oper){

//把num1, num2轉成float

num1=parseFloat(num1);

num2=parseFloat(num2);

var res=0;

switch(oper){

case "+":

res=num1+num2;

break;

case "-":

res=num1-num2;

break;

case "*":

res=num1*num2;

break;

case "/":

res=num1/num2;

break;

default:

window.alert("輸入的運算符號錯誤");

}

//return 語句表示返回? 返回給哪一個!(誰調用就返回給誰)

return res;

}

a.html:

<html>

<head>

var num1=window.prompt("請輸入一個數");

var num2=window.prompt("請輸入2個數");

var oper=window.prompt("輸入運算符號");

window.alert("res="+jiSuan(num1,num2,oper));

</script>

</html>

js函數的分類

2.1 自定義函數

基本用法是:

function 函數名(參數列表){

//語句

//return 語句

}

說明:

函數的規範問題, 能夠用字母開頭, 不要用數字開頭. 能夠包括字母/數字/_/$
參數列表能夠多個(js支持可變參數)
return 語句能夠有，也能夠沒有. 最多隻能有一個return

2.2 系統函數(js語句自己提供)

函數的調用方式

3.1 函數名(參數值); (經過函數名調用)

function test(val){

window.alert(val);

}

test("hello");

3.2 經過函數指針去調用

基本用法

var 變量=函數名; 變量(參數列表);

代碼

function test(num1,num2){

return num1+num2;

}

//window.alert(test);

//下面的話，至關於把test的函數指針，賦給了my這個變量.

//所以my也執行test函數的代碼

var my=test;

window.alert(my); //直接把這個函數的代碼打印出來啦

var res=my(67,90);

window.alert("00"+res);

特別說明:

若是一個函數有返回值，你能夠接收後再使用,也能夠直接使用.
若是一個函數沒有返回值，可是你卻使用，則會提示 undefined錯誤;

js的函數調用過程

4.1 基本調用原則:

一個測試題，加深你們對函數調用機制理解

function abc(num1){

if(num1>3){

abc(--num1);

}

document.writeln(num1);

}

abc(5);

執行的結果是:

3 3 4

分析圖是:

4.2函數調用:

使用遞歸的方法來計算 n!

//非遞歸

function test1(n){

var res=1;

for(var i=1;i<=n;i++){

res*=i;

}

//遞歸-》遞歸的條件

function test2(n){

if(n==1){

return 1;

}else{

return test2(n-1)*n;

}

使用遞歸的方法計算 f(n)=2*f(n-1)+3 , 已知 f(1)=1;

f(3000)

編寫一個函數，接收n,計算其值.

function fun1(n){

if(n==1){

return 1;

}else{

return 2*fun1(n-1)+3;

}

4.3 js使用小結

①函數的參數列表能夠是多個

參數列表能夠是多個,而且數據類型能夠是任意的類型
js函數支持可變參數
在js 中 arguments.length,能夠訪問全部傳入函數的值

代碼:

function test4(){

//window.alert(arguments.length);

var res=0;

for(var i=0;i<arguments.length;i++){ //遍歷全部傳入函數的參數的值

//document.write(arguments[i]+"--");

res+=arguments[i];

}

return res;

}

//需求我但願test4函數能夠計算我給出的數的結果和(可是我給的參數個數不肯定)

document.write(test4(45,89,90,78.8));

經過這段代碼，咱們能夠得出這樣的結論：在同一個做用域(在同一個頁面) js函數是不能有重複名字, 同時咱們也知道 js 函數不支持函數的重載.

8、js的數組的介紹

1. 爲何須要數組?

問題:

王大爺有6只烏龜，它們的體重分別是3kg,5kg,1kg,

3.4kg,2kg,50kg 。請問這六隻烏龜的整體重是少? 平均體重是多少? 請你用如今掌握的技術編一個程序解決

<script>

var weight1=3;

var weight2=5;

....

...

var total=weight1+weight2+...+weight6;

var average=total/6;

</script>

咱們須要這樣一種數據類型,它能夠幫助咱們管理一組數據.->數組.

2.快速入門的案例: 用數組的方法來完成王大爺養烏龜的問題:

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<script type="text/javascript">

//建立一個數組

var arr1=[3,5,10,34.8,50,10];

//說明，數組的下標是從[0]

//window.alert(typeof arr1);

//經過對象名.constructor 能夠顯示該對象的構造方法是什麼?

//window.alert(arr1.constructor);

//遍歷咱們的數組

var total_weight=0;

for(var i=0;i<arr1.length;i++){

//document.write("<br/>"+arr1[i]);

total_weight+=arr1[i];

}

document.write("整體重是="+total_weight+" 平均體重="+(total_weight/arr1.length).toFixed(2));

// toFixed(2) 能夠指定保留小數後幾位數字，當前是保留2位

</script>

</html>

3.數組的基本使用

如何建立數組

方法1

var arr=[元素1,元素2......] 其實也能夠這樣建立空數組 var arr=[];

元素的個數能夠任意，元素的類型能夠任意，

方法2.

var arr=new Array();

3.2 如何訪問數組的數據

指定訪問某個元素

數組名[下標號], 下標號默認是從0 開始編號.

遍歷數組

for(var i=0;i<數組.length;i++){

數組[i];

}

for(var key in 數組){

數組[key];

}

☞ 若是下標越界會怎樣?

報 undefine

☞ js的數組是否可以動態的增加

var a=[2,3];

a[2]=56;

alert(a[2]);

說明js的數組能夠動態增加.

3.3 數組在內存中怎樣存在..

php程序中，經過一個函數傳遞數組，是值傳遞，仍是引用傳遞?

結論是默認是值傳遞(拷貝.)

js代碼中，經過一個函數傳遞數組，是引用傳遞

function test2(val){

//val[0] 訪問第一個元素.

val[0]=900;

}

arr=[1,2,3];

//調用函數

test2(arr);

for(var i=0;i<arr.length;i++){

document.write("*****"+arr[i]);

}

輸出是 900*****2****3

畫圖說明;

經過下面的代碼，咱們來講明js的數組是怎樣存在內存的:

function test2(val){

//val[0] 訪問第一個元素.

val[0]=900;

}

arr=[1,2,3];【1】

//調用函數

test2(arr);

for(var i=0;i<arr.length;i++){

document.write("*****"+arr[i]);

}

分析圖:

3.4 數組的經常使用的屬性和函數

length 屬性能夠返回該數組的大小(遍歷)
split 函數，能夠拆分字符串.

var str="abc hello boy";

var arr=str.split(" ");

document.write(arr+ arr.length);

3.5 數組小結:

①數組可存聽任意類型的數據

數組大小沒必要事先指定,能夠動態增加
數組名能夠理解爲指向數組首地址的引用.
數組元素默認從0開始編號的.

9、js的二維數組

var arr1=[元素1，元素2..]

若是咱們的元素又是一個數組，則這個一維數組就成了二維數組.

1.建立二維數組

舉例

var arr=[[1,4,90],[4,'hello']];

//如何遍歷咱們的二維數組

for(var i=0;i<arr.length;i++){

var ele=arr[i];

//window.alert(ele.constructor);

//對ele進行遍歷

for(var j=0;j<ele.length;j++){

window.alert(ele[j]);

}

2.二維數組的理解和指定訪問某個變量

測試題:

0 0 0 0 0 0

0 0 1 0 0 0

0 2 0 3 0 0

0 0 0 0 0 0

//定義二維數組

var arr2=[[0,0,0,0,0,0],[0,0,1,0,0,0],[0,2,0,3,0,0],[0,0,0,0,0,0]];

for(var i=0;i<arr2.length;i++){

var size=arr2[i].length;

for(var j=0;j<size;j++){

document.write(arr2[i][j]+" ");

}

document.write("<br/>");

}

var arr=new Array();

arr[0][0]=1;

思考題:

請編寫一個函數，能夠接收一個數組，而後要求把這個二維數組轉置:

,所謂轉置就是行列數據互換

課堂練習

function reverse(arr1){

//...

}

js的排序

咱們這裏只介紹一下冒泡排序法:[其它方法能夠參考 php 的排序章節]

代碼:

<html>

<head>

var arr=[0,-1,90,-18,900,90,78];

var flag=false; //定義標誌位

var temp=0;

for(var i=0;i<arr.length-1;i++)

{

//定小循環

for(var j=0;j<arr.length-1-i;j++){

if(arr[j]>arr[j+1]){

//交換

temp=arr[j];

arr[j]=arr[j+1];

arr[j+1]=temp;

flag=true;

}

if(flag){

flag = false;

}else{

break;

}

//輸出數組

document.write(arr);

</script>

</html>

11、js的查找

1.順序查找

一個一個的比較，若是是則查找到.

var arr=[3,5,90,12,-23];

var findVal=90;

var flag=false;

for(var i=0;i<arr.length;i++){

if(arr[i]= = findVal){

document.write("找到了這個數下標是"+i);

flag=true;

}

if(!flag){

document.write("一個都沒有找到");

}

2.二分查找

面試題: 必定掌握!

//二分查找[遞歸]

//二分查找要保證咱們的數組是一個有序的.

//思想是

//首先把數組的中間這個數找出，而後和你要查詢的數比較

//① 你要查詢的數比中間的數大. 則說明咱們應當該數組的右邊[後邊]查詢

//② 你要查詢的數比中間的數小 .則說明咱們應當該數組的左邊[前邊]查詢

//③ 你要查詢的數等於中間的數, 說明找到

var arr=[1,90,100,123,4000];

//該函數的參數列表爲：須要查找的值、被查找的數組、數組的起始下標，結束下標

function binarySearch(findVal,arr,leftIndex,rightIndex){

//退出條件，若是左邊下標 > 右邊下標

if(rightIndex<leftIndex){

document.write("查詢沒有結果");

return;

}

//代碼:

//找到中間數的下標

var midIndex=Math.floor((leftIndex+rightIndex)/2);

if(arr[midIndex]<findVal){

//在右邊進行查找

binarySearch(findVal,arr,midIndex+1,rightIndex);

}else if(arr[midIndex]>findVal){

//在左邊進行查找

binarySearch(findVal,arr,leftIndex,midIndex-1);

}else{

//若是找到，則輸出該數下標，並結束函數

document.write("找到下標是"+midIndex);

return;

}

//調用的格式

binarySearch(100,arr,0,arr.length-1);

12、面向對象

1.js的面對對象編程的介紹

js是一種支持面向對象編程的腳本語句, 它有繼承，封裝，多態的特色

基於對象編程和麪向對象編程叫法區分

js 中咱們能夠認爲這個叫法一致.

課程中基於對象= =面向對象類==原型對象

2.面向對象編程的引入

一個問題?

張老太養了兩隻貓貓:一隻名字叫小白,今年3歲,白色。

還有一隻叫小花,今年10歲,花色。請編寫一個程序，

當用戶輸入小貓的名字時，就顯示該貓的名字，年齡，

顏色。若是用戶輸入的小貓名錯誤，則顯示張老太沒

有這隻貓貓。

3.js面向對象編程的快速入門

<html>

<head>

//定義了一個貓類

function Cat(){

}

//建立一隻貓 [js對象的屬性能夠動態增長]

var cat1=new Cat(); //cat1就是一個對象實例

cat1.name="小白"; //

cat1.age=3;

cat1.color="白色"

document.write(cat1.name+"--"+cat1.age+"--"+cat1.color);

//特別說明

// var cat1=new Cat(); //當作類（原型對象使用），這時cat1就是一個對象（實例）

// Cat(); //當作函數

</script>

</html>

對象公開屬性的訪問方式有

對象名.屬性名;

對象名['屬性名'];

4.js中自定義類(原型對象)的五種方法

4.1工廠方法

var obj=new Object();

obj.屬性="aa";

obj.show=function (){

};

4.2經過構造函數來定義類(最多)

function 類名/函數名(){

}

var p=new 類名/函數名(); //

函數名();

4.3經過prototype 來定義

4.4 構造函數及原型混合方式

4.5 動態原型方式

5.動態的添加方法和屬性.

構造函數和 prototype混合
動態建立對象模式

6.js中一切都是對象

基本對象/系統內置對象(Number,String,Boolean..)

var i=0;

window.alert(i.constructor);

function Person(){

}

var p1=new Person();

window.alert(p1.constructor);

window.alert(Person.constructor);

window.alert(Function.constructor);

可用經過 instanceof 來判斷某個對象實例是否是某個類的對象實例,

案例:

//如何判斷一個對象實例是否是某個類(原型對象)

if(p1 instanceof Dog){

window.alert("p1是Person一個對象實例");

}else{

window.alert("p1是Dog一個對象實例");

}

7.js的對象在內存中是怎樣存在?

var a=new Person();

a.age=10;

a.name="小明";

var b=a;

8.js的對象回收機制!!!

在js中維護一張對象對用表:

GC 如何去判斷某個對象是垃圾對象.

當對象的地址被引用的次數，變成0, 則gc 就會認爲該對象是垃圾，就會回收.

js中還提供了一種主動銷燬對象屬性的方法

基本語法是

delete 對象名.屬性名; // 不能直接 delete 對象;

原理能夠主動的銷燬某個對象的屬性

9.this

9.1提出問題?

咱們在編程中，可能須要當咱們建立一個對象後，這個對象就自動的有某些屬性，怎麼?

能夠這樣作:

function Person(){

//下面這句話表示，每建立一個Person實例,實例就會自動有一個屬性

//name,而且是公開

this.name="小童";

}

若是你但願name是建立對象實例的時候指定，能夠經過參數傳入:

function Person(name){

//下面這句話表示，每建立一個Person實例,實例就會自動有一個屬性

//name,而且是公開

this.name=name;

}

使用的時候:

$p4=new Person("順平");

$p4.name;

9.2深刻認識this的含義

//下面的代碼講解私有屬性的怎樣訪問

function Person(){

var name="abc"; //私有的，只能在內部使用

var age=900; //私有的，只能在內部使用

//感覺(至關於你是經過內部函數來訪問私有的變量.)

//如何理解: 說有一個屬性 show 由於前面有this

//說明 show屬性是公開. 該屬性是指向一個函數地址屬性.

//則經過 show去調用該函數.

this.show=function(){ //若是你必定要訪問私有屬性，則須要定義一個公開的方法（特權方法）

window.alert(name+" "+age);

}

function show2(){//這是Person類的一個私有方法，只能在Person類的內部使用

window.alert("show2()" + name + " " + age);

}

var p1=new Person();

//window.alert(p1.name+" "+p1.age);//錯誤

p1.show();

p1.show2(); //這裏會報錯！

9.3對this的再認識:

<html>

<head>

//****案例以下****

function test1(){

alert(this.v);

}

var v=190;

test1(); //輸出什麼 <==> window.test1();

window.test1();

</script>

</html>

this 只能在類定義的內部使用:

//說明this 只能在類定義的內部使用

function Dog(){

this.name="小明";

}

var dog1=new Dog();

window.alert(this.name); //報空, 由於這樣使用，至關於去訪問window對象的name屬性，可是你沒有寫.

9.5 ☞ 補充講解一個 var 的知識點:(還有說..)

//表示全局變量

var t=90;

function test(){

t=890;

}

test();

window.alert(t);

說明: var 變量：表示該變量是全局的, 若是你其餘函數中，使用變量是，前面沒有帶 var , 則表示要使用全局變量. 若是你在函數中使用變量時候，帶了 var 則說明你要使用全新的變量.

10.js面向對象的成員函數

若是咱們但願某個對象建立後，自動有方法使用，能夠在定義類的時候，直接指定成員函數.(細節...)

說明：函數調用，只看函數名稱、不看函數的參數

10.1第一種方法：動態的給某個對象指定函數

function Person(name,age){

this.name=name;

this.age=age;

}

//第一種方法,動態添加

function speak(){

document.write("我是"+this.name);

}

//建立一個對象實例

var p1=new Person("大黃",90);

p1.fun1=speak; //至關於動態的給p1對象分配一個fun1屬性(函數);

你能夠理解， fun1 是 speak函數別名

window.alert(p1.fun1);

p1.fun1();

speak(); //window

第一種方法還有一種體現形式

//建立一個對象實例

var p1=new Person("大黃",90);

p1.fun1=function speak(){

document.write("我是"+this.name);

}; //至關於動態的給p1對象分配一個fun1屬性(函數);

10.2第二種方法: 讓全部的Person對象實例都有某個成員函數

//給全部對象分配函數

function Person(name,age){

this.name=name;

this.age=age;

this.speak=function (){

document.write(this.name+"hello");

}

var p1=new Person("小孩",9);

p1.speak();

var p2=new Person("大明",30);

p2.speak();

☞ 關於給對象指定成員函數說明:

若是添加的內部函數,該函數也稱爲特權函數, 所謂特權指的是能夠訪問對象的私有屬性.

若是添加的是外部函數(給某個對象指定的函數),則這樣指定函數，只能訪問對象的公開屬性，不能訪問私有屬性.

function Person(name,age,salary){

this.name=name;//公開

this.age=age;//公開

var salary=salary;//私有

}

var p1=new Person("宋江",34,1000);

function showInfo(){

document.write(this.name+this.age+salary);//這裏salary是私有

}

p1.showInfo=showInfo;

p1.showInfo();

一個類中能夠有公開的函數

this.屬性=funciton (){};

10.3一個類中也能夠有私有的函數

代碼:

function Person(){

this.name="abc";

var salary=900;

this.fun1=function (){

//代碼

sayHello();

}

this.fun2=function(){

sayHello();

}

this.fun3=function(){

sayHello();

}

function sayHello(){

document.write("hello,資源打開"+this.name+" "+salary);

}

var p1=new Person();

p1.fun2();

小結: 經過代碼咱們能夠看出.私有函數能夠被該類的其它方法(公開)調用，同時私有函數能夠去訪問該對象的公開或者私有的屬性.

10.4第三種方式給全部的對象實例添加方法(原型法)[推薦..]

function Dog(){

/* this.shout=function (){

document.write("小狗汪汪叫");

}*/

}

//原型法

Dog.prototype.shout=function (){

document.write("小狗叫");

}

var dog1=new Dog();

dog1.shout();

對咱們原型法的一個實際運用:

請思考給 js 的 Array 對象擴展一個find(val) 方法

，當一個Array對象調用該方法的時候，若是能找

到val則返回其下標，不然返回-1

Array.prototype.find=function(val){

//順序查找

for(var i=0;i<this.length;i++){

if(val==this[i]){

flag=true;

return i;

}

return -1;

}

var arr=[4,590,-1,890];

window.alert(arr.find(890));

10.5自定類的工廠方法(瞭解便可)

當你編寫 js 代碼時，當你需要一個對象時,能夠經過new Object 來建立一個對象，而後再動態的給該對象添加屬性和方法.

//工廠法建立對象

var obj=new Object();

obj.name="大明";

obj.show=function (val){

window.alert("ok"+val);

}

obj.show("hello");

10.6課堂小練習

Number類

var i=90;

var res=i.add(78).add(90).add(900).add(9000)

window.alert(res);

10.7 成員函數小結

***成員函數的細節？

成員函數的參數能夠是多個：
例如：
function 函數名(參數1 、參數2 、…….)
成員函數能夠有返回值，也能夠沒有返回值，可是有的話，最多隻能有一個返回值。
js 中不支持函數的重載，具體案例以下：
.         function Person(){
        }
        var person = new Person();
        window.alert(person.constructor);

        function test(a,b)
        {
            window.alert("hello world");
        }
        function test(a)
        {
            window.alert(a);
        }
        function test(a,b)
        {
            window.alert(a + " " +ｂ);
        }
        //test(23)
            window.test(3,"hello");
結論：js在調用函數的時候，是根據函數名來調用的，若是有多個函數的函數名相同，則默認調用最後那個函數。（由於後面的函數會把前面函數名相同的函數給覆蓋啦）
js 支持建立動態函數，這個用的比較少，瞭解便可！
直接定義一個函數或者變量，實際上這些函數和變量就是全局函數和全局變量（本質上他們是屬於 window 對象的）

11.js的閉包

11.1js的變量做用域

代碼:

<html>

<head>

var a=90; //定義一個全局變量

function test(){

a=123; //使用外層的 a變量

}

test();

document.write("a="+a);*/

/* var a=90; //定義一個全局變量

function test(){

var a=123; //定義一個局部變量

}

test();

document.write("a="+a);*/

/* a=90; //沒有var ,就會試着去找(父函數的 a)，若是找不到就建立 a

function test(){

a=123; //沒有var ,就會試着去找(父函數/外層的 a)，若是找不到就建立 a

}

test();

document.write("a="+a);*/

//測試一下，看看你們理解否?

a=20;

function test1(){

var a=700;

function test2(){

a=890;//若是沒 var ,則會到父函數去，找a,找到就使用父函數的a,不然建立

}

return test2;

}

var var1=test1();

var1();

document.write(a);

</script>

</html>

var a=10;

function test(){

b=90;

}

window.alert(b);

</script>

☞

js容許函數中有函數
若是使用變量，若是該變量有var ,則表示建立全新的變量 ,若是該變量是直接寫在頁面，則咱們認爲是全局變量，不然是局部變量, 若是沒有帶var關鍵字, 則js引擎會這樣處理: 首先到父函數去找有沒有該變量，若是有，則使用，若是沒有則建立之.

function f1(){

　　　　//var n=999;//局部變量

n=999;//全局變量

　　}

f1();

alert(n);

上面的代碼說明，若是在一個函數中，直接使用好比
n=900; 至關於建立了一個全局變量.

11.2js中如何解決從外部讀取內部函數的局部變量->閉包

function test1(){

var n=90;//佈局變量

}

alert(n) //錯誤

解決方法->閉包

function test1(){

var n=90;

//test1函數的內部函數,能夠訪問 var n

funciton test2(){

window.alert(n++);

}

//把內部函數test2返回外部調用者

return test2;

}

var res=test1();//調用test1 ,返回 test2函數

這時res就是test1內部函數 test2別名

res();

閉包: 你能夠這樣理解 : test2()實現閉包

11.3閉包的主要用處是

把局部變量保存在內存中，不讓垃圾回收機制，將其回收.
讓外部去訪問內部函數的局部變量.

12.js中函數名不能重複

在不一樣文件中，能夠有相同的函數名.
在不一樣父函數(類), 即便在同一個頁面，能夠有相同函數，好比下面代碼

abc.html

function test(){}

functino test2(){

function sayhello(){

}

function test3(){

function sayhello(){

}

abc2.html

function test(){}

13.面向對象做業評講

① 設計計算機類,要求以下:

屬性：品牌,顏色,cpu型號,內存容量,硬盤大小,價格,工做狀態

方法: 打開,關閉,休眠,建立一個計算機對象，調用打開，關閉方法

<html>

<head>

/*設計計算機類,要求以下:

屬性：品牌,顏色,cpu型號,內存容量,硬盤大小,價格,工做狀態

方法: 打開,關閉,休眠,建立一個計算機對象，調用打開，關閉方法*、

//定義計算機類

function Computer(){

this.brand;

this.color;

this.cpu;

this.memeorysize;

this.disksize;

this.price;

this.state;

this.open=function open(){

document.write("計算機打開..");

}

this.close=function close(){

document.write("關閉計算機...");

}

this.sleep=function sleep(){

document.write("休眠中....");

}

var computer=new Computer();

computer.open();

computer.sleep();

computer.close();

</script>

</html>

用面向對象的思想，編寫小遊戲.

14.js面向對象的再說明

對於比較簡單的對象，咱們也能夠這樣定義

var dog={name: "小明"};

window.alert(dog['name']);

var dog1={name:'小紅',sayHello:function(a,b){window.alert(a+b);}};

dog1.sayHello(45,55);

在某些狀況下，咱們須要去改變某個函數的this指向，咱們能夠經過 call/apply 來實現

基本用法:

函數名.call(對象); // 這時函數的this就是對象

for ... in的另外用法

能夠對數組遍歷

能夠對象遍歷

//json

var dog={name:"xm",age:34,color:"red"};

//遍歷對象

/*for(var key in dog){

window.alert(dog[key]);

}*/

//你的瀏覽器window對象支持的屬性有那些

for(var key in window){

document.write("<br/>"+key+"="+window[key]);

}

能夠經過delete 對象名.屬性來手動的刪除某個屬性值.

15.js的面向對象的三大特徵

15.1封裝性

所謂封裝，就是把咱們抽象出的屬性和對屬性的操做寫到類的定義中，稱爲封裝.

js 中實現封裝主要有兩種封裝( 公開，私有)

function Person(name,sal){

this.name=name; //公開屬性

var sal=sal;//私有屬性

this.show=function(){ //公開方法（特權方法），若是咱們但願操做私有屬性，則能夠用公開方法實現

window.alert(this.name+" "+sal);

}

show2(){ //把函數私有化.，能夠訪問對象的屬性

window.alert("你好"+this.name+" "+sal)

}

var p1= new Person('張三',3000);

window.alert(p1.name); //在類外能夠直接訪問公開的屬性

p1.show();//這個能夠調用

p1.show2();//這個不能夠調用，由於私有方法不能夠在類的外部被調用

15.2經過構造函數添加成員方法和經過原型法添加成員方法的區別

經過原型法分配的函數是全部對象共享的.
經過原型法分配的屬性是獨立.(若是你不修改屬性，他們是共享)
建議，若是咱們但願全部的對象使用同一一個函數，最好使用原型法添加函數，這樣比較節省內存.
經過prototype 能夠給全部的對象添加方法，可是在這種方式下，不能訪問類的私有變量和方法

//構造函數法

function Dog(){

this.shout=function(){

}

//原型法

Dog.prototype.shout=function (){

window.alert("小狗尖叫"+this.name);

}

//經過原型也能夠給每一個對象，分配屬性

Dog.prototype.color="red";

var dog1=new Dog("aa");

var dog2=new Dog("bb");

if(dog1.shout==dog2.shout){

window.alert("dog1.shout==dog2.shout");

}

dog1.color="黑色";

window.alert(dog1.color+" "+dog2.color);

請你們看一個題:

function Person()

{

this.name="abc";

var age = 90;

this.abc=function()

{

window.alert("abc()");

}

Person.prototype.fun1=function()

{

window.alert(this.name); //能夠訪問

this.abc();

window.alert(age); //不能訪問私有屬性,會報錯

}

var p1 = new Person();

p1.fun1();

結論是類.prototype.函數=function (){};

稱爲後置綁定.

15.3js面相對象的繼承

看一段代碼->問題是什麼?

①對象冒充

代碼以下:

<html>

<head>

//中學生

/* function MidStu(name,age){

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年齡是="+this.age);

}

this.pay=function(fee){

window.alert("你的學費是"+fee*0.8);

}

//小學生

function Pupil(name,age){

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年齡是="+this.age);

}

this.pay=function(fee){

window.alert("你的學費是"+fee*0.5);

}

}*/

//代碼的複用性不高.

//修改以下:

//1. 把子類中共有的屬性和方法抽取出，定義一個父類Stu

function Stu(name,age){

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年齡是="+this.age);

}

//2.經過對象冒充來繼承父類的屬性的方法

function MidStu(name,age){

this.stu=Stu; //這裏至關於把Stu構造函數(類)賦值給咱們的屬性this.stu

//調用this.stu方法

this.stu(name,age); //這個表示初始化MidStu,至關於執行Stu(name,age),這句話必須有，不然沒法實現集成的效果

//能夠寫MidStu本身的方法.

this.pay=function(fee){

window.alert("你的學費是"+fee*0.8);

}

function Pupil(name,age){

this.stu=Stu;//這裏只是把碼繼承.

//初始化一把

this.stu(name,age);

//能夠寫Pupil本身的方法.

this.pay=function(fee){

window.alert("你的學費是"+fee*0.5);

}

//測試

var midstu=new MidStu("賈寶玉",15);

var pupil=new Pupil("賈環",12);

midstu.show();

midstu.pay(100);

pupil.show();

pupil.pay(100);

</script>

</html>

②經過call 或者apply來實現

<html>

<head>

//中學生

/* function MidStu(name,age){

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年齡是="+this.age);

}

this.pay=function(fee){

window.alert("你的學費是"+fee*0.8);

}

//小學生

function Pupil(name,age){

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年齡是="+this.age);

}

this.pay=function(fee){

window.alert("你的學費是"+fee*0.5);

}

}*/

//代碼的複用性不高.

//修改以下:

//1. 把子類中共有的屬性和方法抽取出，定義一個父類Stu

function Stu(name,age){

window.alert("確實被調用.");

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年齡是="+this.age);

}

//2.經過對象冒充來繼承父類的屬性的方法

function MidStu(name,age){

//這裏這樣理解: 經過call修改了Stu構造函數的this指向,

//讓它指向了調用者自己.

Stu.call(this,name,age);

//若是用apply實現，則能夠

//Stu.apply(this,[name,age]); //說明傳入的參數是數組方式

//能夠寫MidStu本身的方法.

this.pay=function(fee){

window.alert("你的學費是"+fee*0.8);

}

function Pupil(name,age){

Stu.call(this,name,age);//當咱們建立Pupil對象實例,Stu的構造函數會被執行,當執行後，咱們Pupil對象就獲取從 Stu封裝的屬性和方法

//能夠寫Pupil本身的方法.

this.pay=function(fee){

window.alert("你的學費是"+fee*0.5);

}

//測試

var midstu=new MidStu("孫悟空",15);

var pupil=new Pupil("豬八戒",12);

midstu.show();

midstu.pay(100);

pupil.show();

pupil.pay(100);

</script>

</html>

js的繼承小結

js對象能夠經過對象冒充，實現多重繼承
Object 類是全部js類的基類

15.4多態的特性

js的函數的重載文件

js默認不支持重載，咱們能夠經過，判斷參數的個數來實現重載

<html>

<head>

//*****************說明js不支持重載*****

/*function Person(){

this.test1=function (a,b){

window.alert('function (a,b)');

}

this.test1=function (a){

window.alert('function (a)');

}

var p1=new Person();

//js中不支持重載.

p1.test1("a","b");

p1.test1("a");*/

//js怎麼實現重載.經過判斷參數的個數來實現重載

function Person(){

this.test1=function (){

if(arguments.length==1){

this.show1(arguments[0]);

}else if(arguments.length==2){

this.show2(arguments[0],arguments[1]);

}else if(arguments.length==3){

this.show3(arguments[0],arguments[1],arguments[2]);

}

this.show1=function(a){

window.alert("show1()被調用"+a);

}

this.show2=function(a,b){

window.alert("show2()被調用"+"--"+a+"--"+b);

}

function show3(a,b,c){

window.alert("show3()被調用");

}

var p1=new Person();

//js中不支持重載.

p1.test1("a","b");

p1.test1("a");

</script>

</html>

覆蓋

當子類有一個方法和父類同樣,則咱們稱子類的方法覆蓋了父類的方法。

//父類

function Stu(){

this.show=function(){

window.alert("stu show");

}

//子類

function MidStu(){

this.stu=Stu;

this.stu();

//必定要放在類定義的後面

this.show=function(){

window.alert("midstu show");

}

var midstu=new MidStu();

midstu.show();

☞ 要實現覆蓋，須要把子類的方法，防止類定義的後面.

----------------------------------------------------------------------------------------------

多態的基本概念

所謂多態，咱們能夠簡單的理解就是一個引用類型 (對象/變量) 在不一樣狀況下的多種狀態
js 自己是無態,js天生就支持多態.

js的多態的一個案例:

//人類

function Person(){

this.test1=function (){

window.alert("Person test1");

}

//貓類

function Cat(){

this.test1=function(){

window.alert("Cat test1()");

}

var v=new Person();

var p=v //防止後面v被貓類替代後，v表明person這個類被垃圾回收機制回收。

v.test1();

//v的類型

if(v instanceof Person){

window.alert("23 行 v變量是人類");

}

v=new Cat();

v.test1();

if(v instanceof Cat){

window.alert("30 行 v變量是貓類");

}//在這裏，v是貓類，而同時，其之前表明的人類被回收機制給收走了。若是要讓其恢復，只要按上面的紅色加背景文字處理便可，定義var p=v

</script>

js的多態的經典案例

// Master類

function Master(name){

this.nam=name;

//方法[給動物餵食物]

}

//原型法添加成員函數

Master.prototype.feed=function (animal,food){

window.alert("給"+animal.name+" 喂"+ food.name);

}

function Food(name){

this.name=name;

}

//魚類

function Fish(name){

this.food=Food;

this.food(name);

}

//骨頭

function Bone(name){

this.food=Food;

this.food(name);

}

function Peach(name){

this.food=Food;

this.food(name);

}

//動物類

function Animal(name){

this.name=name;

}

//貓貓

function Cat(name){

this.animal=Animal;

this.animal(name);

}

//狗狗

function Dog(name){

this.animal=Animal;

this.animal(name);

}

//猴子

function Monkey(name){

this.animal=Animal;

this.animal(name);

}

var cat=new Cat("大花貓");

var fish=new Fish("黃花魚");

var dog=new Dog("大花狗");

var bone=new Bone("豬骨頭");

//建立一個主人

var master=new Master("韓順平");

master.feed(dog,bone);

//擴展

var monkey=new Monkey("金絲猴");

var peach=new Peach("仙桃");

master.feed(monkey,peach);

</script>

總結：多態有利於代碼的維護和擴展，這裏咱們能夠考慮，若是食物加入

桃子，動物加入猴子，能夠看到，Master的feed函數不須要的變化。

十3、js的內部類

概述： js的設計者，爲了讓咱們開發方便，事先提供了一下內部類(Array,Number,String,Date,Math....) , 咱們能夠直接使用。

再次說明：js的類又叫原型對象

1.js內部類的分類以下圖：

安裝使用內部類的屬性和方法的不一樣，咱們主要分紅兩種,

動態類先建立一個對象實例，而後再使用其屬性和方法

Array, String ..

var arr=new Array(); //var arr=[1,45,90];

調用方法是 arr.push()...;

調用屬性 arr.length;

靜態類經過類名，就可使用其屬性和方法(Math)

Math.random(); //php 靜態方法類名::靜態方法名

兩種調用方式都有

Number類

var num=new Number("12.3456");

//要四捨五入

alert(num.toFixed(2));

alert(Number.MIN_VALUE);

</script>

2.Math類

Math是靜態類，提供了經常使用的數學函數和常數,我這給你們介紹幾個最經常使用的函數，其它的請你們參考javascript幫助文檔。

abs(x) 返回數的絕對值

ceil(x) 對一個數進行上舍入

floor(x) 對一個數進行下舍入

max(x,y) 求x,y中較大的數

min(x,y) 求x,y中較小的數

round(x) 對 x進行四捨五入

random() 一個大於0小於1的16位小數位的數字（含0可是不含1）

var a=90.1;

//ceil 向上取整

// window.alert(Math.ceil(a)); //91

//floor 向下取整

// window.alert(Math.floor(45.99)); //45

window.alert(Math.round(Math.random()*100)); //返回在[0,100) 之間的隨機數

</script>

3.Date類（動態類）

Date() 返回當前日期和時間

getDate() 從Date對象返回一個月中的某一天

getDay() 從Date對象返回一週中的某一天

getMonth() 從Date對象返回月份

getYear() 從Date對象返回年

getHours() 從Date對象返回小時數

getMinutes() 從Date對象返回分鐘

getSeconds() 從Date對象返回秒數

toLocaleString()

//獲取當前日期

var mydate=new Date();

window.alert(mydate.toLocaleString()); //js dom

window.alert(mydate.getMonth()+1);

</script>

4.String類（動態類）

indexOf() 返回某個字符串值在該字符串中首次出現的位置，找不到就返回-1

split() 把字符串分割爲字符串數組

substr() 提取取從start下標開始的指定數目的字符

substring() 提取字符串中介於兩個指定下標之間的子串（包頭不包尾）

charAt() 返回指定位置的字符

length 屬性,能夠獲得字符串的長度

toString() js中全部內部對象的成員方法,做用是將對象中的數據轉成某個格式的字符串，咱們在實際運用中在詳細介紹

match()/replace()/search() 用的不少，可是涉及到正則表達式，這三個函數放在正則表達式章節中介紹

var txt="h韓llo中國";

//document.write(txt.indexOf("worldr"));

// var arr=txt.split("");

// document.write(arr);

//substri(start,length) 從start開始取，取出lenght個字符,若是不夠取，則儘可能的取

// var sub=txt.substr(3,3);

//stringObject.substring(start,stop) 從start開始取，取到stop-1

//var sub=txt.substring(0,2);

//charAt(index) 表示取出第幾個字符

//var sub=txt.charAt(3);

//window.alert(sub);

//練習輸入文件全路徑獲取文件名和後綴?

var file_path="c:/abc/abc北京/helo/順平.exe";

//思路

var last_index=file_path.lastIndexOf("/");

window.alert(file_path.substr(last_index+1));

</script>

會遇到問題，是由於你基礎沒有紮實。

5.Array類（動態類）

Array提供了對數組的操做，使用Array對象能夠輕鬆的建立數組，

並對數組進行刪除、排序和合並等操做。

concat() 鏈接兩個或更多的數組，並返回結果。

sort() 對數組的元素進行排序

toString() 把數組轉換爲字符串，並返回結果

pop() 刪除並返回數組的最後一個元素

push() 向數組的末尾添加一個或更多元素,並返回新的長度

splice() 方法用於插入、刪除或替換數組的元素

length 屬性

//數組的建立

var arr=new Array();

//靜態設置數據

arr[0]=23;

arr[1]="順平";

arr[2]=567;

//動態的添加

/* for(var i=0;i<3;i++){

arr[i]=window.prompt("請輸入第"+(i+1)+"數");

}*/

//如何刪除數組的某個元素

//刪除第2個元素->下標爲1

//arr.splice(1,1); //第一個1 表示刪除第幾個元素, 第二個1表示刪除1個

//修改第二個 "順平"-> "小明"

//arr.splice(1,1,"小明");//更新

//把一個新的數據"北京"，添加到第1元素後面

//arr.splice(1,0,"北京");

//遍歷數組

document.write("***********<br/>");

for(var key in arr){

document.write(arr[key]+"<br/>");

}

</script>

上面這種遍歷的經典案例是查看window下的全部函數：

for(var key in window)

document.write("<br/>"+key)

</script>

這裏咱們須要注意: splice() 函數，他把刪除，修改，添加均可以完成,根據傳入的參數的個數和值，不一樣來決定進行怎樣的操做.

深刻探討：對象數組. //用的挺多.

[坦克大戰 ]

//**********對象數組的使用*************

function Person(name,age){

this.name=name;

this.age=age;

}

/* var p1=new Person("曹操",45);

var p2=new Person("劉備",40);

var p3=new Person("孫權",30);

var arr=new Array();

p2.name="趙雲";

arr[0]=p1;

arr[1]=p2;

arr[2]=p2;

//遍歷

for(var key in arr){

var p=arr[key];

window.alert(p.name);

}*/

結果顯示是：曹操趙雲趙雲

原理圖：

另外一個例子：

var arr=new Array();

function addHero(){

for(var i=0;i<3;i++){

var name=window.prompt("請輸入英雄的名字");

var age=window.prompt("請輸入英雄的年齡");

var p=new Person("","");

p.name=name;

p.age=age;

arr[i]=p;

}

addHero();

//遍歷數組

for(var key in arr){

var p=arr[key];

document.write("<br/>"+p.name);

}

☞ js的函數間傳遞數據時候，按照什麼來傳遞

基本數據類型 number boolean string 是按照值傳遞

數組和對象是引用傳遞.

案例以下：

php比較一下: 傳遞數組的時候有一點區別 php默認是值傳遞,對象是引用傳遞.

總結就是，在php中，只有對象是引用傳遞，其餘的（number boolean string、數組）都是值傳遞。

6.Boolean類

瞭解便可

7.Number類（動態類）

案例 number1.htm

1. 請輸出23的二進制字符串和16進制的字符串

2. 計算7/3的結果，並保留到小數點後兩位(四捨五入)

/*案例 number1.htm

1. 請輸出23的二進制字符串和16進制的字符串

2. 計算7/3的結果，並保留到小數點後兩位(四捨五入) */

var n1=23;//<==> var n1=new Number(23);

window.alert(typeof(n1));

window.alert(n1.toString(10));

//toFixed();把一個數四捨五入到小數點的某一個位置.

var n=7/3;

window.alert(n.toFixed(4));

十4、系統函數

說 js的函數分爲三個大的部分

① 自定義函數 (程序員本身根據編程的須要寫的函數 [對象的成員函數，普通函數])

內部類中的函數
系統函數 (全局函數),能夠本身使用.

具體介紹

encodeURI --編碼

decodeURI --解碼

function sendInfo(){

var name=encodeURI("韓順平 abcd");

window.location.href="getInfo.php?address=beijing&name="+name;

}

//js 去請求一個php頁面

window.location.href=""

看看爲何須要

從案例演示咱們看到,在使用js提交數據時，若是瀏覽器版本低，就可能出現亂碼，或者錯誤狀況.

eval函數的使用

該函數能夠把一個字符串當作腳原本執行. 當根據輸入的狀況顯示相應內容時候，能夠用eval函數。

// var str="window.alert('hello')";

// eval(str);

function test1(val){

window.alert("我是test1函數"+ val);

}

function test2(val){

window.alert("我是test2函數"+val);

}

var input=window.prompt("請輸入你但願執行哪一個函數名");

var val=window.prompt("請輸入值");

var str=input+"('"+val+"')";

eval(str);

URL：Uniform Resource Locator，統一資源定位符；

URI：Universal Resource Identifier，通用資源標識符。

URI含義更普遍，URL是URI的一個部分，一般指網址

在必定程度上，你能夠認爲URI =URL

http://www.sohu.com:80/shareinfo/image1.jpg

網頁提交信息的三種方法：

1.經過表單[get/post]；

2.經過超連接<a href="getInfo.php?name=zs"></a>；

3.經過js來提交數據；

不管上面三種哪種提交，若是是用js來接受，那麼其拿到的都是字符串。要講字符串轉成相應的類型，在進行處理。

十5、js的事件

概述 : js是採用事件驅動的機制來響應用戶操做的，也就是說當用戶對某個html元素進行某個操做時，會產生一個事件,該事件會驅動某些函數來處理,原理圖：

Js最好是看手冊，可是參考手冊js事件裏面的屬性並不能進一步點進去深刻了解。因此咱們要經過dom event事件進行了解。該方法裏面的屬性能夠點擊後進一步瞭解。

快速入門案例:

//事件處理函數

function test1(event){

window.alert("ok");

window.alert(event.clientX);

}

</script>

這裏咱們有幾個新的名詞，須要理解:

事件源: 就是產生事件的地方(html元素)

事件: 點擊/鼠標移動/鍵按下..

事件對象: 當某個事件發生時，可能會產生一個事件對象，這個事件對象會封裝該事件的信息(好比點擊的x,y. keycode),傳遞給事件處理程序

事件處理程序: 響應用戶的事件.

快速入門：

function show_coords(event) {

x=event.clientX;

y=event.clientY;

alert(event+"X coords: " + x + ", Y coords: " + y)

}

</script>

</head>

<p>Click in the document. An alert box will alert the x and y coordinates of the mouse pointer.</p>

</body>

</html>

1.事件的分類

鼠標事件
鍵盤事件

onkeydown onkeyup onkeypress

我想知道用戶按下什麼鍵!

<html> <head>
<script type="text/javascript">

    function showkey(event){
        if(event.keyCode==65){
            window.alert("a被按下");
        }else if(event.keyCode==66){
            window.alert("b被按下");
        }
    }
</script>
</head>

<body onkeydown="showkey(event)">

</body>
</html>
html事件
其它事件

案例：經過紅色和藍色按鈕切換紅色和藍色。

    function mychange(val){
        var div1=document.getElementById("div1");
        if(val.value=='red'){
            //經過js獲取div這個對象

            //window.alert(div1.style.width);
            div1.style.backgroundColor="red";
        }else if(val.value=="black"){
            //經過js獲取div這個對象

            //window.alert(div1.style.width);
            div1.style.backgroundColor="black";
        }
    }

    function sayHello(){
        window.alert("red按鈕被按下");
    }

</script>
</head>

<body>

    <div id="div1" style="width:400px;height:300px;background-color:red">
    </div>
    <input type="button" value="red" onclick="mychange(this),sayHello()"/>
    <input type="button" value="black" onclick="mychange(this)"/>

</body>

2.不一樣的瀏覽器事件種類不同
如何區分當前瀏覽器的內核是什麼?(區分出ie6/7/8/ 火狐等)

代碼以下：

<script language="javascript">
if(window.XMLHttpRequest)
{ //Mozilla, Safari, IE7,IE8
         if(!window.ActiveXObject)
            {     // Mozilla, Safari,
        alert('Mozilla, Safari');
        }
Else
{
        alert('IE7 .8');
        }
     }
else
{
    alert('IE6');
    }
</script>
3.案例：防止用戶經過點擊鼠標右鍵菜單拷貝網頁內容
    <script type="text/javascript">

        function test(){
        //window.alert("沒有菜單");
        return false;
    }
    function test2(){
        //window.alert("全選不行");
        return false;
    }

</script>
</head>

<body oncontextmenu="return test();" onselectstart="return test2();">
個人內容!是大幅度
</body>
十6、dom編程的介紹
Javascript 精彩網頁特效實例精粹韓老師沒有發給我，記得找他要。

dom的必要性

實際上js更重要的做用是可讓用戶對網頁元素進行交互操做，這纔是學習js的精華之所在。

(1)貪吃蛇 (2)推箱子(3)坦克大戰 ,這些都需呀用的dom編程，當咱們學習完這一章節後，你們能夠很輕鬆的寫出相似的項目了。

dom編程,也是咱們學習ajax技術的基礎,因此咱們必須掌握好dom編程。前端(html+css+js[dom編程]) | 後臺

dom的介紹

dom的來源:

讓彈出窗口變小：

window.resizeTo(300,200);

</script>

1.dom對象

前面說過,js把瀏覽器,網頁文檔和網頁文檔中的html 元素都用相應的內置對象(看文檔)來表示，這些對象與對象間的層次關係構成dom,針對網頁(html,jsp,php,aspx.net)的dom就是html dom。咱們這講的就是html dom

這裏有幾個特別重要的概念要給你們說清楚:

①上面說的內置對象就是dom 對象,準確的說是html dom對象。

②由於我目前講的是 html dom 編程，因此我提到的dom 編程,dom

對象都是說的 html dom 編程和 html dom對象，請你們不要犯迷糊。

③dom 編程時，會把html文檔看作是一顆dom 樹(對照烏龜抓雞來的代碼來講明dom編程.(首先要畫出html dom圖[參看資料文件夾，已經畫好])

dom 編程的核心就是各個dom 對象,下一章節會詳細講解.

2.html dom 樹

在進行 html dom 編程時，咱們把html文件當作是一個dom樹，該dom樹在內存中有層級關係，經過操做 dom樹，就能夠改變 html 頁面的顯示效果

從上圖能夠得出：從 html dom 的角度看，每一個html文件的元素都會被當作一個Node節點對象來看待,就可使用它的方法,同時對於 html dom說，由於元素自己可能就是img/button/form同時能夠當作 Button Img Form 內置對象

html文件

var myimg=document.getElementById("myimg");

</script>

xml 文件

<class>

順平

</stu>

</class>

var mystu=document.getElementById("mystu");

這是 mystu就是 Node對象

3.html dom編程的實例

js面向對象的方式來編寫.

w ->上

a->左

s->下

d->右

課後練習: 對烏龜遊戲添加新的功能:

當烏龜碰到邊界時，不能再移動
讓雞能夠自由的移動
能夠經過上下左右的按鈕控制烏龜移動
烏龜上下左右移動的時候能夠換成相應的圖片.

烏龜抓雞代碼

<html>

<head>

//定義兩個類

function Tortoise(x,y){

this.x=x;

this.y=y;

this.speed=10;//移動一個像素

this.Catch=function(){

if((this.x>=cock.x-80)

&&(this.x<=cock.x+80)

&&(this.y>=cock.y-60)

&&(this.y<=cock.y+60)){

alert("抓到！");

}

//向上移動

this.move_up=function(){

this.y-=this.speed;

//同時修改烏龜的top的值

//dom編程體現

//先獲得這個烏龜的圖片

var wugui_div=document.getElementById("wugui");

wugui_div.style.top=this.y+"px";

}

//向下移動

this.move_down=function(){

this.y+=this.speed;

var wugui_div=document.getElementById("wugui");

wugui_div.style.top=this.y+"px";

}

//向左移動

this.move_left=function(){

this.x-=this.speed;

var wugui_div=document.getElementById("wugui");

wugui_div.style.left=this.x+"px";

}

//向右移動

this.move_right=function(){

this.x+=this.speed;

var wugui_div=document.getElementById("wugui");

wugui_div.style.left=this.x+"px";

}

function Cock(x,y){

this.x=x;

this.y=y;

this.speed=1;//移動一個像素 setInterval(定時器)

}

//建立全局的烏龜和公雞對象

var tortoise=new Tortoise(100,200);

var cock=new Cock(200,200);

//響應用戶的操做

function move(obj){

switch(obj.value){

case "向上走":

tortoise.move_up();

tortoise.Catch();

break;

case "向下走":

tortoise.move_down();

tortoise.Catch();

break;

case "向左走":

tortoise.move_left();

tortoise.Catch();

break;

case "向右走":

tortoise.move_right();

tortoise.Catch();

break;

}

//響應用戶的操做

function move2(event){

switch(event.keyCode){

case 87:

tortoise.move_up();

tortoise.Catch();

break;

case 83:

tortoise.move_down();

tortoise.Catch();

break;

case 65:

tortoise.move_left();

tortoise.Catch();

break;

case 68:

tortoise.move_right();

tortoise.Catch();

break;

default:

break;

}

</script>

</head>

<tr>

<td>shunping</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div>

</body>

</html>

4.bom

bom 的全稱是瀏覽器對象模型 (bowser object model)., 它規定全部的瀏覽器在設計時，要考慮支持 bom提出的規範,這樣才能正常瀏覽網頁.

dom 和 bom 的關係

bom一個綱領性，dom 就是具體的.( dom 對象、屬性、方法.)

bom 包括瀏覽器全部對象

dom (document object model)主要是 bom(document對象的擴展)

5.dom的層級關係

☞ 在進行dom編程時，每一個html的元素被當作一個Node節點(對象),你若是要看具體信息，到 xml dom 的 Node章節查看.

6.window對象

經常使用的函數和屬性.

6.1 confirm:

var res=window.confirm("確認安裝該軟件嗎?");

if(res){

window.alert("安裝ok");

}else{

window.alert("安裝ok");

}

6.2 setInterval("函數名()",調用該函數的間隔時間) 和 clearInterval

簡單時鐘

<html>

<head>

</head>

<body>

當前時間是,

</body>

var i=0;

var myspan=document.getElementById("myspan");

function abc(){

//window.alert(++i);

var mytime=new Date() ;

//對象.innterText表示在該對象對應標籤的中間放入文本

myspan.innerText=mytime.toLocaleString();

if(++i==10){

window.clearInterval(mytime2);

window.alert("hello,world,不走了");

}

//作了一個定時器

var mytime2=window.setInterval("abc()",1000);

</script>

</html>

小遊戲

<html>

<head>

</head>

<body>

</body>

var boy=document.getElementById("boy");

var img_no=0;

function start(){

var no=((img_no++)%8);

boy.src=no+".png";

}

function stop(){

window.clearInterval(time1);

}

//每隔一秒切換一次圖片

var time1="";

function sendCommand(obj){

switch(obj.value){

case "開始":

time1=setInterval("start()",100);

break;

case "中止":

stop();

break;

}

</script>

</html>

課堂練習時，請你們把小孩的加速和減速作了.

6.3 setTimeout / clearTimeout

該函數也能夠作定時器，可是它只調用函數一次，就結束了

function abc(){

window.alert("hello");

}

//啓用一個定時器

var time1=window.setTimeout("abc()",3000);

window.clearTimeout(time1);

6.4 moveTo moveBy resizeTo resizeBy

window.moveTo(200,200);//以當前的屏幕的左上角爲原點，進行移動

function abc(){

//window.moveBy(20,20);//這是以當前的窗口的左上角爲原點，進行移動

window.resizeBy(20,20);//在當前窗口大小的前提下，調整大小

}

window.resizeTo(100,300);//將當前這個窗口的大小，調整爲指定的大小（同時調整以後的窗口左上角與屏幕左上角重合）

</script>

6.5 open 函數該函數用於打開一個新窗口

function test(){

//第二個參數能夠指定，是替換本窗口(_self)，仍是開窗口(_blank 默認)

//第三個參數能夠指定新窗口的樣式.

window.open("newwindow.html","_blank","width=300,height=300,toolbar=yes,titlebar=yes,status=yes,location=yes,resizable=yes");//開新窗口

}

</script>

關於兩個html頁面相互通訊的案例

opener 屬性 子窗口引用父窗口信息

A頁面：

var newwindow="";

function test(){

//open函數自己就會返回子窗口的引用

newwindow=window.open("b.html");

}

function test2(){

//取出用戶但願發送給子窗口的信息

var my_text=document.getElementById("myinfo");

//newwindow.document 實際上b.html頁面的文檔

var chlid_text=newwindow.document.getElementById("myinfo");

chlid_text.value=my_text.value;

}

</script>

B頁面

function send(){

var chlid_text=document.getElementById("myinfo2");

//opener表示該頁面的父窗口

opener.document.getElementById('myinfo').value=chlid_text.value;

}

</script>

<h1>我是b.html頁面</h1>

7.history對象

history對象記錄用戶訪問的url

go back forward

入門案例:

<html>

<head>

function myback(){

//window.alert('ok');

//window.history.back();

window.alert(history.length);

window.history.go(-1);

}

</script>

</head>

</html>

8.location對象

location對象包含當前url的信息

reload方法

從新加載本頁面(刷新本頁面)

function myfresh(){

window.location.reload(); // ajax局部刷新

}

//每隔十秒刷新頁面

window.setInterval("myfresh()",10000);

</script>

href屬性

經過該屬性能夠指定載入新的頁面

window.location.href="url" //url能夠本網址，也能夠另外一個網址

9.navigator

該對象包括瀏覽器的信息

想看該對象下的全部屬性能夠經過遍歷得到。

for (var key in navigator )

{document.write("<br/>"+key+"="+navigator[key]);

}

</script>

10.screen對象

這個對象包括用戶顯示屏幕的信息

當用戶的分辨率是不1024×768時，給出提示，請寫出該程序!

if (screen.height!=768||screen.width!=1024)

{window.alert("請將您的瀏覽器分辨率調整到1024*768！")

}

</script>

11.Event對象(!!!!)

給某個html元素(控件), 綁定事件的三種方法

靜態綁定

動態綁定

//獲取某個對象再綁定

getElementById("htmlid").事件=方法

function test1(){

window.alert("test1");

//這句話的意思就是把but2 的onclick 和 test2函數綁定

//document.getElementById('but2').onclick=test2;//

//but2.onclick=test2;

$('but2').onclick=test2;

}

function $(id){

return document.getElementById(id);

}

function test2(){

window.alert("test2");

}

</script>

經過 attachEvent 和 detachEvent 方法來綁定事件和解除事件綁定

//第一個參數是事件名

but1.attachEvent("onclick",vote);

function vote(){

window.alert("你投了布什一票，之後不能再投");

//解除綁定

but1.detachEvent("onclick",vote);

}

</script>

js 中事件對象的獲取 (IE和火狐不同)

在ie中有兩種方法

//1.第一方法

function test(){

//經過 window.event.屬性

window.alert(window.event.clientX);

}

//2.第二種方法

function test2(event){

//event

window.alert(event.clientX);

}

function abc(){

window.alert("窗口變化");

}

</script>

</body>

特別說明一下: 咱們的表單除了常規提交方式，還能夠經過js來動態的提交

Event的一個案例：監測鼠標在頁面中的移動位置：

function test()

{

showxy.innerText="x="+window.event.screenX+"y="+window.event.screenY;

}

</script>

<body>

</body>

event 的一個案例:

請在文本框中輸入一個六位數，第一位不能爲0，不能超過六位數，必須全是數字，如何實現？

<body>

請輸入一個六位數 <input type="text" id="pageNow" onkeydown="return checkNum(this)"/>

</body>

<!--

var i=0;

function checkNum(obj){

//判斷輸入數字的長度是否超過六

if(i==6){

window.alert("輸入的字符串>6");

return false;

}

//防止首位是0

if(i==0){

if(window.event.keyCode=='0'.charCodeAt(0)){

alert('首位不能是0');

return false;

}

//window.alert("用戶輸入了一個"+window.event.keyCode);

//若是咱們記不住 0->48 9->57,咱們能夠這樣作

if(window.event.keyCode<'0'.charCodeAt(0) || window.event.keyCode>'9'.charCodeAt(0)){

window.alert("你輸入的不是數");

return false;

//window.event.returnValue=false;

}else{

//若是被接收

i++;

}

//-->

</script>

12.document對象

最重要的三個方法

getElementById [html php jsp] (若是頁面中有多個相同的id,則返回第一個對象引用)

getElementsByName 經過html控件的名字返回對象集合多用於多選。

getElementsByTagName 經過html的標籤名返回對象集合

案例：請選擇你的愛好

//經過id獲取對象

function test(){

var a1=document.getElementById("a1");

//若是要取出某個屬性

window.alert(a1.id+" "+a1.href+" "+a1.innerText);

a1.innerText="鏈接到百度";

a1.href="http://www.baidu.com";

}

//經過name來獲取.對象

function test2(){

//使用

var hobbies=document.getElementsByName("hobby");

//遍歷這個集合

for(var i=0;i<hobbies.length;i++){

//判斷

//window.alert(i+ " "+hobbies[i].checked);

if(hobbies[i].checked){

window.alert("你的愛好是"+hobbies[i].value);

}

//經過標籤名

function test3(){

var inputs=document.getElementsByTagName("input");

window.alert(inputs.length);

}

</script>

<body>

<a id="a1" href="http://www.sina.com">鏈接到sina</a><br/>

<a id="a1" href="http://www.sohu.com">鏈接到sohu</a><br/>

<a id="a3" href="http://www.baidu.com">鏈接到baidu</a><br/>

請選擇你的愛好:

<input type="checkbox" name="hobby" value="旅遊">旅遊

<input type="checkbox" name="hobby" value="音樂">音樂

<input type="checkbox" name="hobby" value="體育">體育

<input type="checkbox" name="hobby" value="電影">電影

</body>

咱們綜合運用一下前面學習到的各類知識

動態的建立元素(節點)/添加元素(節點)/刪除元素(節點)

注意用四個節點屬性：

createElement() 方法建立新的元素節點：

appendChild() 方法向已存在的節點添加子節點。（發射子彈）

removeChild() 方法刪除指定的節點。（子彈消失）

parentNode 屬性可返回某節點的父節點。

function test1(){

//window.alert('ok');

//1建立 a 元素 createElment(標籤名)，

var myhref=document.createElement("a"); //<a >???</a>

myhref.innerText="鏈接到sina";

myhref.href="http://www.baidu.com"

myhref.id="myhref";

//document.body.appendChild(myhref);

div1.appendChild(myhref);

}

function test2(){

//document.getElementById('div1').removeChild(document.getElementById('myhref'));

var node=document.getElementById('myhref');

node.parentNode.removeChild(node);

}

</script>

<body>

</body>

製做一個函數查詢按鍵的keycode編碼！

代碼以下：

function test()

{

window.alert("我所按下的鍵的keycode的代碼是"+window.event.keyCode);

}

</script>

<body>

</body>

思路很重要

響應用戶按 j 鍵
讓烏龜發子彈函數 fire內容多.

2.1 建立子彈

我認爲子彈就是一個圖片 / 也能夠認爲是一個div span

讓子彈飛一會

用了一個this.move_bullet函數讓它定時修改橫座標,產生移動的效果.

爲何發送第二顆子彈，第一顆就中止?

請你們思考一個問題,怎樣讓子彈碰到邊界後，就停下，而且消失

提示: window.alert("body的寬="+document.body.clientWidth);

//定義兩個類

function Tortoise(x,y){

this.x=x;

this.y=y;

//var bullet_img="";//子彈

//子彈數組

var bullet_imgs=new Array();

var bullet_img_speed=2;

this.speed=1;//移動一個像素

var isStart=false;

this.move_up=function(){

this.y-=this.speed;

//同時修改烏龜的top值.

//dom編程體現

//1先獲得這個烏龜圖片 div

var wugui_div=document.getElementById("wugui");

wugui_div.style.top=this.y+"px";

//判斷烏龜是否和公雞碰撞.

//window.alert("烏龜當前的 x y"+this.x+" "+this.y);

//window.alert("公雞當前的 x y"+cock.x+" "+cock.y);

}

//向右移動

this.move_right=function(){

this.x+=this.speed;

//同時修改烏龜的top值.

//dom編程體現

//1先獲得這個烏龜圖片 div

var wugui_div=document.getElementById("wugui");

wugui_div.style.left=this.x+"px";

}

//開火

this.fire=function(){

//window.alert("烏龜發子彈");

var bullet_img=document.createElement("img");

bullet_img.src="bullet.bmp";

//設置bullet_img的x,y

//定子彈的橫座標

bullet_img.style.left=(this.x+94)+"px";

bullet_img.style.top=(this.y+33)+"px";

//作出絕對定位

bullet_img.style.position="absolute";

document.body.appendChild(bullet_img);

//把這顆新子彈放入數組中,進行管理

bullet_imgs[bullet_imgs.length]=bullet_img;

//啓動子彈[請注意一下,若是咱們調用是一個對象的成員方法]

//setInteval 應該這樣去掉 window.setInteval("對象名.函數名()",時間);

//若是子彈數組中有子彈，就不要在調用

/* if(bullet_imgs.length==1){

window.setInterval("tortoise.move_bullet()",50);

} */

if(!isStart){

window.setInterval("tortoise.move_bullet()",10);

isStart=true;

}

//讓子彈移動

this.move_bullet=function(){

//遍歷子彈數組.看看每顆子彈是否已經到到邊界,若是到了邊界，則刪除

//for(var i=0;i<bullet_imgs.length;i++){

//}

if(bullet_imgs.length==0){

//stop定時器.

//isStart=false;

}

//這裏要求訪問 bullet_img

//修改bullet_img 的 left便可 100px

//遍歷子彈數組,讓每顆子彈移動

for(var i=0;i<bullet_imgs.length;i++){

//取出每顆子彈

var bullet_img=bullet_imgs[i];

var bullet_img_x=bullet_img.style.left.substring(0,bullet_img.style.left.indexOf("p"));

bullet_img.style.left=parseInt(bullet_img_x)+bullet_img_speed+"px";

//遍歷子彈數組.看看每顆子彈是否已經到到邊界,若是到了邊界，則刪除

if(parseInt(bullet_img_x)+17>=document.body.clientWidth){

//到達邊界,就刪除該子彈

bullet_imgs.splice(i,1); //3 2 1

//同時從html dom樹種刪除

bullet_img.parentNode.removeChild(bullet_img);

}

function Cock(x,y){

this.x=x;

this.y=y;

this.speed=1;//必定一個像素 setInterval(定時器)

}

//建立全局的烏龜對象和公雞對象

var tortoise=new Tortoise(100,120);

var cock=new Cock(200,200);

//用於響應用戶點擊的操做

function move(obj){

switch(obj.value){

case "向上走":

tortoise.move_up();

break;

case "向右走":

tortoise.move_right();

break;

}

//用於響應用戶按鍵的操做

function move2(event){

switch(event.keyCode){

case 65:

tortoise.move_left(); //烏龜向左

break;

case 68:

tortoise.move_right();

break;

case 83:

tortoise.move_down();

break;

case 87:

tortoise.move_up();

break;

//響應用戶按j這個鍵

case 74:

//發送子彈的行爲封裝到fire

tortoise.fire();

break;

default:

break;

}

</script>

</head>

<tr>

<td>shunping</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div>

</body>

</html>

考慮加入:

讓公雞能夠移動
若是子彈擊中公雞，公雞消失 [作成爆炸效果.]
子彈能夠向上下左右均可以發送.

12.1經常使用的dom 的每一個Node 節點屬性和方法(增強篇)

(取到父節點、兄弟節點、子節點等 )

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div>

</body>

function test(){

//獲得烏龜節點

var wugui=document.getElementById("wugui");

window.alert("類型"+wugui.nodeType);

window.alert("名字"+wugui.nodeName);

var wugui_parent=wugui.parentNode;

window.alert("父節點類型"+wugui_parent.nodeType);

window.alert("父節點名字"+wugui_parent.nodeName);

var wugui_next_borther=wugui.nextSibling;

window.alert("下一個兄弟類型"+wugui_next_borther.nodeType);

window.alert("下一個兄弟名字"+wugui_next_borther.nodeName);

var wugui_pre_borther=wugui.previousSibling;

window.alert("前一個兄弟類型"+wugui_pre_borther.nodeType);

window.alert("前一個兄弟名字"+wugui_pre_borther.nodeName);

//取出孩子節點

var wugui_chlid=wugui.firstChild;

window.alert("孩子類型"+wugui_chlid.nodeType);

window.alert("孩子名字"+wugui_chlid.nodeName+wugui_chlid.src);

}

function test1(){

document.bgColor="black";//背景色

document.fgColor="white";//前景色

window.alert(document.title+" "+document.URL);

}

</script>

</html>

13.body對象

body對象是document對象的一個成員屬性,經過document.body來訪問.

使用body對象，要求文檔的主體建立後才能使用,也就是說不能在文檔的body體尚未建立就去訪問body,

Body經常使用屬性：

appendChild() 添加元素

removeChild() 刪除元素

getElementsByTagName() 經過html元素名稱,獲得對象數組.

bgColor 文檔背景色

backgorund 文檔背景圖

innerText 某個元素間的文本

innerHtml 某個元素間的html代碼

onload事件文檔加載時觸發

onunload事件文檔關閉時觸發

onbeforeunload事件文檔關閉前觸發

該對象是 document對象的屬性.

innerText innerHTML

</head>

<body>

</body>

function test(){

//myspan.innerText="<a href='http://www.sohu.com'>鏈接到sohu</a>";

myspan.innerHTML="<a href='http://www.sohu.com'>鏈接到sohu</a>";

}

</script>

</html>

13.1Body案例：設置固定邊欄廣告！

<!--

function window_onscroll() {

//讓這個超連接 top 和 left和滾動條，保持一個關係

myHref.style.top=document.body.scrollTop+20;

myHref.style.left=document.body.scrollLeft;

}

function document_onselectstart() {

return false;//返回false,這樣就能夠禁止用戶選網頁中的文本　，

//當用戶選擇文本時，會觸發　onselectstart 事件，當返回false時，就不會選中

//你也能夠在body加入 onselectstart="return false;"一樣達到這個效果

}

//-->

</script>

<!--

//這樣的寫法等同於再 body上 onselectstart='return false'

window.alert('abc');

return document_onselectstart()

//-->

</script>

</head>

這個文本域足夠大!

有着深遠影響和價值的畫，就是名畫。

　　一方面所謂的價值體如今做者本人的繪畫功底上，有價值的畫其做者的繪畫功底必定是精湛的，是超凡脫羣的，最起碼也要有本身的風格，跟別人不同凡響，這樣纔會受到關注。其次，光有精湛的水平也是不夠的，還要在畫面上體現一種精神，一種思想，也就是說要託畫言志，用藝術的手法表現一種有高度的，更深一層的東西。好比說畢加索的格爾尼卡，它的價值就在於用新穎，深入，抽象的表現手法將殘酷的戰爭詮釋的淋淋盡致，把戰爭的發人深省剖析開來給人看，這種影響是能夠穿越膚色，穿越種族，穿越時間和空間的，是有深入的歷史高度的，同時畫家自身的畫技也不容忽視，因此說它是有價值的。再好比米勒的晚鐘，雖然表現的是兩位普普統統，穿着樸素，也許並無什麼高學歷的勤勞農民，可是他們臉上那種對於上帝的虔誠，那種對於平凡生活的熱愛，被米勒用飽含着感情的筆觸描繪出來，用其影響力和感染力詮釋着價值的內在。

　　另外一方面有些做品之因此成爲名畫，是由於它所要表達的內涵是永恆的，雖然誕生在那個時代，可是也一樣是生活在現代的咱們共同追求的大主題，配合着當時的時代背景，加上畫家主觀的表現提煉，這樣創做出來的做品便被稱爲名畫，所以它有着深遠影響。

有着深遠影響和價值的畫，就是名畫。

</TEXTAREA>

</body>

</html>

13.2案例：廣告圖片在網頁中飄動，碰到網頁邊沿改變漂移方向

<html >

<head>

<title>廣告圖片在網頁中飄動</title>

</head>

<!--

//向x方向移動速度

var divX=1;

//向y方向移動速度

var divY=1;

var posX=0;//div的x座標

var posY=0;//div的y座標

//window.alert(div1.offsetWidth+" "+div1.offsetHeight);

function move(){

//讓div的橫座標增長 2*divX

posX+=2*divX;

//讓div縱座標增長 2*divX

posY+=2*divY;

div1.style.top=posY+"px";

div1.style.left=posX+"px";

//posX表示div碰到最左邊

//posX+div1.offsetWidth>=document.body.clientWidth 碰到最右

// div本身的寬度

if(posX<=0||posX+div1.offsetWidth>=document.body.clientWidth){

divX=-divX;

}

//posY表示碰到最上

//posY+div1.offsetHeight>=document.body.clientHeight 碰到最上

if(posY<=0||posY+div1.offsetHeight>=document.body.clientHeight){

divY=-divY;

}

//啓動一個定時器

setInterval("move()",10);

//-->

</script>

</body>

</html>

13.3隨意拖拽窗口:用戶用鼠標點中,浮動窗口,能夠隨意的拖拽該窗口。

<html>

<head>

</head>

var x = 0, y = 0, x1 = 0, y1 = 0;

var moveable = false;

var index = 20000;

//開始拖動

function startDrag(obj, evt) {

e = evt ? evt : window.event;

// if (true) {

if (!window.captureEvents) {

obj.setCapture();

} else {

window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);

}

var win = obj.parentNode;//取得父窗體(父窗體就是該div得上一級div)

win.style.zIndex = ++index;//設置父窗體的Z軸值

x = e.clientX;//取得當前鼠標的X座標

y = e.clientY;//取得當前鼠標的Y座標

x1 = parseInt(win.style.left);//將父窗體的距瀏覽器左邊界的距離轉換爲NUMBER

y1 = parseInt(win.style.top);//將父窗體的距瀏覽器上邊界的距離轉換爲NUMBER

moveable = true;

// }

}

function drag(obj, evt) {

e = evt ? evt : window.event;

if (moveable) {

var win = obj.parentNode;

win.style.left = x1 + e.clientX - x;

win.style.top = y1 + e.clientY - y;

}

//中止拖動

function stopDrag(obj) {

if (moveable) {

if (!window.captureEvents) {

obj.releaseCapture();

} else {

window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);

}

moveable = false;

}

</script>

<body>

<div id="l1"

style="position: absolute; width: 200px; height: 200px; background-color: #99CCFF; z-index: 200; top: 100px; left: 154px;">

<div id="title" onMouseDown="startDrag(this,event);"

onMouseMove="drag(this,event);" onMouseUp="stopDrag(this);"

style="width: 200px; height: 20px; background-color: #330033; top: 0px; left: 0px; z-index: 200; position: absolute; font-size: 9pt; color: #FFFFFF; padding-top: 5px; padding-left: 5px;">浮動窗口</div>

</div>

</body>

</html>

14.style

style對象不是針對某一個html元素,而是對全部的html元素而言的,也就是說,咱們能夠經過 document.getElementById("id").style.property="值",來控制網頁文檔的任何一個元素(對象)的樣式,固然這個很重要的.

14.1web版坦克大戰(1)

<html>

//面向對象

function Wall(){

}

function Bullet(){

}

function Water(){

}

function Hero(x,y){

this.x=x;

this.y=y;

this.speed=1;

this.direct=0;//0 -》上 1->右 2->下 3->左

this.move_up=function(){

this.y-=this.speed;

myhero.style.backgroundPositionY="0px";

myhero.style.top=this.y+"px";

}

this.move_down=function(){

this.y+=this.speed;

myhero.style.backgroundPositionY="80px";

myhero.style.top=this.y+"px";

}

this.move_left=function(){

//首先讓坦克轉向

this.x-=this.speed;

myhero.style.backgroundPositionY="40px";

myhero.style.left=this.x+"px";

}

this.move_right=function(){

this.x+=this.speed;

myhero.style.backgroundPositionY="120px";

myhero.style.left=this.x+"px";

}

//建立本身的坦克

var hero=new Hero(100,250);

function sendCommand(){

switch(window.event.keyCode){

case 65:

hero.move_left(); //本身坦克向左

break;

case 68:

hero.move_right();

break;

case 83:

hero.move_down();

break;

case 87:

hero.move_up();

break;

//響應用戶按j這個鍵

case 74:

//發送子彈的行爲封裝到fire

hero.fire();

break;

default:

break;

}

</script>

</div>

</body>

</html>

Css複習主要是看這個很全面。

晚上:

讓本身的坦克能夠發送子彈.

子彈碰到邊界，就消失

顯示敵人的坦克(3個)

當本身發射的子彈擊中敵人坦克後，敵人坦克就爆炸

14.2如何去作網頁層切換效果

代碼：

<html >

<head>

<!--

function change(obj,obj2){

//由於style在外邊css,因此這樣獲取不到，可是設置後，就能夠在本頁獲取了

//window.alert(content1.style.display);

//window.alert(obj.innerText.length+"="+"出國".length);

obj2.style.backgroundColor="#FFC63D";

if(obj=="zs"){

//window.alert('招生');

content1.style.display="block";

content2.style.display="none";

content3.style.display="none";

}else if(obj=="rz"){

//window.alert('熱招');

content1.style.display="none";

content2.style.display="block";

content3.style.display="none";

}else if(obj=="cg"){

//window.alert('出國');

content1.style.display="none";

content2.style.display="none";

content3.style.display="block";

}

function change2(obj){

obj.style.backgroundColor="#E8E8E8";

}

//-->

</script>

</head>

<body>

<ul>

</ul>

</div>

<ul>

<li><a href='#'>熱招熱招熱招月!</a></li>

</ul>

</div>

<ul>

<li><a href='#'>出國出國出國月!</a></li>

</ul>

</div>

<ul>

<li><a href='#'>澳洲留學高中月!</a></li>

</ul>

</div>

</body>

</html>

My.css

body

{

font-size:12px;

margin:0;/*把body的邊距清零*/

}

.div1{

width:132px;/*width:128px;*/

height:160px;

/*background-color:pink;*/

}

.navi{

height:160px;

width:22px;

/*background-color:green;*/

float:left;

}

.navi ul{

padding:0px;

margin-left:0px;

}

.navi ul li{

height:50px;

width:22px;

background-color:#E8E8E8;

float:left;

list-style-type :none;

margin-top:3px;

text-align:center;

padding-top:5px;

}

.content3,.content1,.content2{

height:160px;

width:104px;

margin-left:2px;

/*background-color:blue;*/

float:left;

}

.content2 ul,.content3 ul,.content1 ul{

padding:0px;

margin-left:4px;

margin-top:2px;

/*background-color:green;*/

}

.content2 ul li,.content3 ul li,.content1 ul li{

float:left;

list-style-type :none;

font-size:12px;

line-height:20px;

}

.content2{

display:none;

}

.content3{

display:none;

}

經過style對象，咱們能夠去控制某個html元素的外觀.

補充講解:

14.3display 和 visiability 區別

這個屬性均可以用於設置某個區域或者控件，顯示不顯示, display 設置 none; 它不顯示同時讓出本身佔用的空間

visiability 這個屬性設置成 hidden 就不顯示, 可是它不讓這個空間.

14.4style對象的案例:

<body>

<span id="myspan" onclick="test(this);" style="border: 3px solid red;cursor:hand;

">+</span> 個人家庭

</ul>

</body>

<!--

function test(obj){

//myspan

if(obj.innerText=="+"){

//顯示成員

myul.style.display="block";

obj.innerText="-";

}else if(obj.innerText=="-"){

myul.style.display="none";

obj.innerText="+";

}

//-->

</script>

14.5style 的小案例- 簡易購物車

<body>

<h1>請選擇你喜歡的水果</h1>

</body>

<!--

var allPrice=0;

function shop(obj,price){

//遍歷整個複選框，看看誰被選中.

/* var frutis=document.getElementsByName("fruits");

for(var i=0;i<frutis.length;i++){

//if(frutis[i].checked){

// window.alert(frutis[i].value+"被選中"+" 該價格是"+frutis[i].price);

//}

if(frutis[i].checked){

allPrice+=parseInt(frutis[i].price);

}

}*/

//直接判斷點擊行爲是選中，仍是取消,而後是決定對allPrice進行+,-

if(obj.checked){

//window.alert("中");

allPrice+=parseInt(obj.price);

}else{

//window.alert("取消");

allPrice-=parseInt(obj.price);

}

showres.innerText=allPrice;

}

//-->

</script>

forms對象集合和form對象

15.1案例一：

這裏咱們說明form對象

form對象名.某控件名.

<body>

u:<input type="text" name="username" value="hello"/><br/>

p:<input type="password" name="password" value="xxx"/><br/>

</form>

u:<input type="text" name="username"/>

</form>

</body>

<!--

//window.alert(document.forms.item(1).action);

//取出第一個from

function mysubmit(){

var form1=document.forms.item(1);

//window.alert(form1.username.value);

//window.alert(form1.password.value);

form1.submit();

}

//-->

</script>

15.2案例2：驗證用戶註冊

<html>

<head>

function check(){

//經過表單對象來回去用戶的輸入

var form = document.forms.item(0);

var name=form.username.value;

var passwd=form.passwd.value;

var passwd2=form.passwd2.value;

//window.alert(name+passwd+passwd2);

if(name.length<4 || name.length>6){

//window.alert("error");

error1.style.display="inline";

return false;

}

if(passwd!=passwd2){

error2.innerText="兩次密碼不一致";

error2.style.display="inline";

return false;

}

</script>

</head>

<body>

<tr><td>用戶　名:</td><td class="style2"><input class="style1" type="text" id="username" name="username"/><span style="display: none;color: red;font-size: 10px" id="error1">用戶名必須在4-6位間</span></td></tr>

</table>

</form>

</body>

</html>

15.3案例：文本框中自動設置鼠標光標！

<html>

<head>

</head>

<body>

<form>

name:<input type="text" id="text1" />

age: <input type="text" id="text2" />

<br />

</form>

</body>

document.getElementById("text1").focus();

</script>

</html>

16．table 對象是咱們的一個重點

概述，在咱們的網頁中，每出現一次 table標籤，就會有一個table對象產生.

table對象中的集合對象有兩個

rows[] 還有一個 cells[]

rows[] 表示全部行的一個集合

cells[] 表示一行的全部列

16.1快速入門案例

要求，點擊testing 按鈕能夠顯示宋江的名字,可是不能經過id 獲取 table對象來獲取.

<html>

<head>

function test(){

//window.alert(document.getElementById('name').innerText);

var mytable=document.getElementById("mytab");//mytable就是一個table對象

window.alert(mytable.rows[2].cells[2].innerText);

//window.alert(typeof(mytable));

//請取出盧俊義的外號

}

function addHero(){

//建立一個

//document.createElement("<tr>");

//添加一行

var mytable=document.getElementById("mytab");

//3表示添加到表格的第幾行

//tableRow表示一個新行，它的類型是TableRow

var tableRow=mytable.insertRow(3); //<tr></tr>

//經過tableRow添加新列 tableCell類型是 TableCell

var tableCell=tableRow.insertCell(0); //<tr><td></td></tr>

tableCell.innerHTML="3"; //<tr><td>3</td></tr>

var tableCell1=tableRow.insertCell(1);

tableCell1.innerHTML="吳用"; //<tr><td>3</td><td>吳用</td></tr>

var tableCell2=tableRow.insertCell(2);

tableCell2.innerHTML="智多星"; //<tr><td>3</td><td>吳用</td></tr>

}

function deleteHero(){

//刪除一個英雄

var mytable=document.getElementById("mytab");

mytable.deleteRow(3);

}

function updateHero(){

//找到宋江的外號這個對象<td></td> TableCell

var mytable=document.getElementById("mytab");

mytable.rows[1].cells[2].innerHTML="黑三郎";

}

</script>

</head>

<body>

</table>

</body>

</html>

16.2Table對象的綜合案例

實現兩個功能：1.動態添加 2.若是有重複，彈出了跳窗有重複。

<html>

<head>

function addhero(){

//獲取用戶的輸入信息

var no=document.getElementById('no').value;

var heroname=document.getElementById('heroname').value;

var nickname=document.getElementById('nickname').value;

var mytab=document.getElementById('mytab');

//window.alert(no+" "+heroname+" "+nickname);

//先判斷，再添加

for(var i=0;i<mytab.rows.length;i++){

if(mytab.rows[i].cells[0].innerHTML==no){

window.alert("編號重複");

return false;

}

//在遍歷的時候，要想辦法肯定這個新的英雄，適當的位置.

}

//添加一行

//獲取table對象

var tableRow=mytab.insertRow(mytab.rows.length);

tableRow.insertCell(0).innerHTML=no;

tableRow.insertCell(1).innerHTML=heroname;

tableRow.insertCell(2).innerHTML=nickname;

tableRow.insertCell(3).innerHTML="<a href='#' onclick='abc('"+no+"')'>刪除用戶</a>"

}

</script>

</head>

<body>

</table>

<h1>請輸入英雄的信息</h1>

排名<input type="text" id="no" name="no"/><br/>

名字<input type="text" id="heroname" name="heroname" /><br/>

外號<input type="text" id="nickname" name="nickname" /><br/>

</body>

</html>

十7、js的正則表達式

爲何要學習正則表達式?

好比身份證., 電話.. 郵件.. 。。

1.正則表達式介紹

正則表達式，其實是一個語法規則, 經過這個表達式,能夠去匹配知足這個語法規則的字串. , 咱們能夠經過建立 RegExp 對象來建立規範

RegExp (regular expression)

2.快速入門案例:

從一個字串中，尋找四個數字相互鏈接的案例：

<html>

<head>

var str="akdlfaklhello 1234klfdksalfd9000kalsj2345fd;lsa"

//建立一個正則對象 \d表示一個數 100數字相連

//var reg=/(\d){4}/gi; //reg表示一個語法 //gi [g表示全局][i表示是否區分大小寫] \d 表示任意的數 (\d) 表示子表達式

var reg=new RegExp("(\\d){4}","gi");//顯示建立

var res="";

while(res=reg.exec(str)){ //res 表示找到一個結果，該結果是一個數組. [0]->結果是什麼若是正則表達式有子表達式，[1]->第一個子表達式的結果

//[2]->第2個子表達式的結果 ...

window.alert(res);

}

</script>

</head>

<body>

</body>

</html>

2.1找到四個數字，個位和仟位，十位和百位相同

<html>

<head>

var str="akdlfaklhello 1234klfd1441ksalfd9000kals8998j2345fd;lsa"

//建立一個正則對象 \d表示一個數 100數字相連

var reg=/(\d)(\d)\2\1/gi; //reg表示一個語法 //gi [g表示全局][i表示是否區分大小寫] \d 表示任意的數 (\d) 表示子表達式

var res="";

while(res=reg.exec(str)){ //res 表示找到一個結果，該結果是一個數組. [0]->結果是什麼若是正則表達式有子表達式，[1]->第一個子表達式的結果

//[2]->第2個子表達式的結果 ...

window.alert(res);

}

</script>

</head>

</html>

3.正則表達式詳解

問正則表達式是什麼?

答: 正則表達式是一個語法(句法)規則,經過該規則能夠從一個大的字符串中去匹配知足該規則的子字符串.

4.正則表達式對象

建立方法

隱式建立

var reg=/pattern/gi 【g 表示全局, i表示在匹配的時候不區分大小寫,m 表示多行匹配】

舉例說明 gmi 的含義

代碼 reg3.html

<html>

<head>

var str="aklfdjakabcadkflsakfabclABCsa";

//需求,使用正則找到 abc子串

var reg=/abc/gim;

//使用reg對象方法 exec null "" 0

//res 是一個數組 [0]->找到的子串 res[1]=> 是一個子表達式的內容 res[2]=>

var res="";

//執行正則表達式

while(res=reg.exec(str)){

window.alert(res[0]);

}

</script>

</head>

<body>

</body>

</html>

reg4.html:

var str="wwlkel123fklsd908wwlkk \r\nwwl";

//var myReg=/(\\d){3}/gi;

//new RegExp("^(Wwl)","igm"); 表示找到每行的開頭的 wwl字符(不區分大小寫)

var myReg=new RegExp("^(Wwl)","ig");//m就會找到兩個wwl,若是沒有m就會只找到一個wwl就是頭一個，一般咱們使用gi

while(res=myReg.exec(str)){

window.alert(res[0]);

}

</script>

執行正則表達式的第二個方法:

var res2=str.match(reg); //該方法比較簡單,會返回獲得子串的數組

for(var i=0;i<res2.length;i++){

window.alert(res2[i]);

}

顯式建立

var reg=new RegExp("pattern","選項gim");

3.方法

exec() 方法

test() 方法，能夠檢測一個字串中，是否含義知足正則規範的子串. 返回true,或者fasle

5.String對象的幾個方法

match search replace split

代碼:

<html>

<head>

var str="aklfabcdj1234akabcadkfl韓順sakfabc5678lABCsa";

/*var reg=/韓順平/gi;

if(reg.test(str)){

window.alert("含有");

}else{

window.alert("沒有");

}*/

//如今咱們把abc子串轉成北京

/* var reg=/abc/gi;

var newStr=str.replace(reg,"北京");

window.alert(newStr);*/

var reg=/(\d){4}/gi;

//按照正則表達式來分割

var newStr=str.split(reg);

for(var i=0;i<newStr.length;i++){

window.alert(newStr[i]);

}

</script>

</head>

<body>

</body>

</html>

6.綜合小案例:

代碼:

function abc(){

//先獲得用戶輸入

var inputcon=document.getElementById('myta').innerText; //value

//得打text1

var text1=document.getElementById('text1').value;

var test2=document.getElementById("text2").value;

var reg="/"+text1+"/gi"; //abc /abc/gi

window.alert("reg"+reg);

//str怎麼當作對象.

var newString=inputcon.replace(eval(reg),test2);

//把新的串放入到第二個文本域

document.getElementById("myta2").innerText=newString;

}

</script>

<h1>替換小測試</h1>

hello

</textarea>

</textarea>

<br />

請輸入你要查找的字符串:<input type="text" id="text1" /> <br /><br />

請輸入你要替換成什麼穿:<input type="text" id="text2" /><br />

7.正則表達式中重要的概念

子表達式

咱們能夠用圓括號組成一個比較複雜的匹配模式，那麼一個圓括號的

部分咱們能夠看做是一個子表達式。

舉例

var reg=/(\d)([a-z])/gi

(\d)就是第一個子表達式

([a-z]) 是第二個子表達式

捕獲

多個子表達式所匹配到的內容按順序出如今內存的緩衝區中，這個我

們稱爲捕獲

反向引用

圓括號的內容被捕獲後，能夠在這個括號後被使用，從而寫出一個比

較實用的匹配模式，這個咱們稱爲反向引用

var str="1adkk"

var reg=/(\d)([a-z])/gi

把 (\d)匹配到的結果 1 放入緩存區 =》引用 \1

把 ([a-z])匹配的內容 a 放入緩存區 => 引用\2

思考題:

請思考下面的問題:

請在字符串中檢索商品編號,形式如:12321-333999111 這樣的號碼,要求知足前面是一個五位數,而後一個-號,而後是一個九位數,連續的每三位要相同

代碼:

var str = "aaaaabbbb45678-678900034bv123hhh55555 88888 99999 12345-444555999777";

var reg=/(\d){5}-(\d)\2{2}(\d)\3{2}(\d)\4{2}/gi;

var regs=str.match(reg);

for(var i=0;i<regs.length;i++){

window.alert(regs[i]);

}

8.正則表達式語法的細節:

8.1經常使用的正則表達式

// var str="1111111";

//{n} n 是一個非負整數。匹配肯定的 n 次。

// var reg=/1{2}/gi;

//{n,m} 表示指定字符串出現次數大於等於n小於等於m m>=n

//使用貪婪匹配模式

// var reg=/1{3,5}/gi;

//+ 表示出現1次到任意屢次

//* 表示出現0次到任意屢次

// var reg=/1+/gi;

//? 表示出現0次到1次

// var reg=/a1?/gi;

//[a-z] 表示能夠匹配a-z中任意一個字符

//[0-9] 表示能夠匹配0-9中任意一個字符

//[a-zA-Z0-9] 表示能夠匹配a-z或者 A-Z或者0-9中任意一個字符

// var str="hell.....o111";

// var reg=/[a-z]/gi;

//[^a-z] 表示能夠匹配不是a-z中的任意一個字符

// var reg=/[^a-z]/gi;

//[abcd] 表示能夠匹配abcd中的任意一個字符。

//[^abcd] 表示能夠匹配不是abcd中的任意一個字符

// var reg=/[^abcd]/gi;

// . 匹配出 \n 以外的全部字符,若是要匹配.自己則須要使用 \.

// var reg=/\./gi;

//([\d\D])\1{2} 任意三個連續的字符

// var reg=/([\d\D])\1{2}/gi;

//xn的用法特殊的字符可使用\xn

// var reg=/\x21/gi;

//^ 匹配目標字符串的開始位置

// var str="hanjjkj hihihi han";

// var reg=/^han/gi;

//$ 匹配目標字符串的結束位置

// var reg=/han$/gi;

// \ 檢索某些特殊字符的時候，須要用到轉義符號，不然檢索不到結果，

//須要用到轉義符號的字符 . * + ( ) $ / \ ? [ ] ^ { }

// var reg=/\$/gi;

//選擇匹配符號 | 既能夠匹配這個，又能夠匹配那個

var reg=/\$ | han/gi;

var res=str.match(reg);

window.alert(res+"發現位置"+RegExp.index);

</script>

8.2電子郵件的正則表達式

var str = "hashunping@sohu.com.";

/*只能有一個@，@前面是用戶名,能夠是a-z A-Z 0-9 _-字符 @後面是域名,能夠是sohu.com 或者 tsinghua.org.cn 而且域名只能是英文字母163.com*/

// var reg= /[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]/gi; //驗證是不是電子郵件的reg

var reg=/^[a-zA-Z0-9_]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/gi;

if(reg.test(str)){

window.alert("格式ok");

}else{

window.alert("電子郵件的格式不ok");

}

</script>

8.3結巴程序:

var str = "我....我要....學學學學....編程程程程程程phppppppp";

//1.考慮把.去掉

var reg1=/\./gi;

var reg2=/(.)\1+/gi; //用於去捕獲出現屢次的字符

var res1=str.replace(reg1,"").replace(reg2,"$1");

window.alert(res1);

</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JavaScript學習

1、js的基本介紹

1. js 技術用在什麼地方?

2. js的基本介紹

3. 瀏覽器歷史

如何理解js是事件驅動的腳本語言

js的變量類型

js的標識符的規範

2、js的基本數據類型

1.整數

實數

特殊的數值

布爾類型

字符型

js的複合數據類型

js的特殊數據類型

數據類型的強制轉換

3、js的運算符

1.除法

2. ++ 和 – 運算

3. 關係運算符

4. 邏輯運算符

5．js的位運算和移位運算->面試題

4、js的流程控制

1 . 順序控制

2. 分支控制

2.1 單分支

2.2雙分支

2.3 多分支

2.4 多分支的switch

5、js的循環控制語句

1. for語句

2. while循環控制

3. do..while循環控制

實際運用一下for來輸出一個金字塔

6、如何調試 js代碼

7、函數

1. 爲何須要函數

js函數的分類

2.1 自定義函數

2.2 系統函數(js語句自己提供)

函數的調用方式

3.1 函數名(參數值); (經過函數名調用)

3.2 經過函數指針去調用

js的函數調用過程

4.1 基本調用原則:

4.2函數調用:

4.3 js使用小結

8、js的數組的介紹

1. 爲何須要數組?

2.快速入門的案例: 用數組的方法來完成 王大爺養烏龜的問題:

3.數組的基本使用

如何建立數組

3.2 如何訪問數組的數據

3.3 數組在內存中怎樣存在..

3.4 數組的經常使用的屬性和函數

3.5 數組小結:

9、js的二維數組

1.建立二維數組

2.二維數組的理解和指定訪問某個變量

js的排序

11、js的查找

1.順序查找

2.二分查找

12、面向對象

1.js的面對對象編程的介紹

2.面向對象編程的引入

3.js面向對象編程的快速入門

4.js中自定義類(原型對象)的五種方法

4.1工廠方法

4.2經過構造函數來定義類(最多)

4.3經過prototype 來定義

4.4 構造函數及原型混合方式

4.5 動態原型方式

5.動態的添加方法和屬性.

6.js中一切都是對象

7.js的對象在內存中是怎樣存在?

8.js的對象回收機制!!!

9.this

9.1提出問題?

2.快速入門的案例: 用數組的方法來完成王大爺養烏龜的問題:

10.1第一種方法：動態的給某個對象指定函數

1.js內部類的分類以下圖：