Javaweb學習筆記——（三）——————JavaScript基礎&DOM基礎

day03



1.js的String對象

 **建立String對象

 ***var str = "abc";



 **方法和屬性（文檔）

 ***屬性 lenth：字元串的長度



 ***方法

 （1）與html相關法方法

 -hold():設定字元加粗

 -fontcolor()：設定字元串的顔色

 -fontsize()：設定字型的大小



 -link()：講字元串顯示成超連結

 **** str4.link("www.baidu.com")

 -sub()：下标 

  sup()：上标



 （2）與Java相似的方法

 -concat()：連接配接字元串

 **//concat方法

 var str1 = "abc";

 var str2 = "dfg";

 document.write(str1.concat(str2));

 -charAt()：傳回指定位置的字元串

 var str3 = "abcdefg";

 document.write(str3.charAt(0));

 document.write(str3.charAt(20));//字元位置不存在，傳回空字元串

 -indexOf()：傳回字元串中字元的位置

 var str4 = "poiuyst";

 document.write(str4.indexOf(p));

 document.write(str4.indexOf(x)); //字元不存在，傳回-1

 -split()：對字元串按照字元切分

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

 var str5 = "a-b-c-d";

 var arr1 = str5.split("-");

 document.width("arr1.length:"+arr1.length);

 -replace()：替換字元串

 *傳遞兩個參數：

 --第一個參數是原始字元

 --要替換成的字元

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

 var str6 = "hello world";

 var str7 = "js";

 document.write(str6);

 document.write(str6.replace("world", str7));

 document.write(str6);



 -substr()和substring()

 *var str7 = "123456789";

 document.write(str7.substr(5, 3));  // 
 

 **從第五位開始，向後截取3個字元

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

 document.write(str7.substring(5, 3));
 //
 **從第幾位開始，到第幾位結束，但是不包含第五位

 //[5, 3)



2.js的Array對象

 **建立數組（三種）

 -var arr1 = [1, 2, 3];

 -var arr2 = new Array(3); //長度是3

 -var arr3 = new Array(1, 2, 3); //數組中元素的1,2,3



 **屬性：length,檢視數組的長度



 **方法：

 -concat方法：數組的連接配接

 *var arr1 = [1,2,3];

 var arr2 = [4,5,6];

 document.write(arr1.concat(arr2));



 -join方法：

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

 var arr3 = new Array(3);

 arr3[0] = "a";

 arr3[1] = "b";

 arr3[2] = "c";

 

 document.write(arr3.join("--"));



 -push()；想數組末尾添加元素，傳回數組的新的長度

 **如果添加的是一個數組，這個時候就把數組當做一個元素添加進去

 *var arr4 = new Array(3);

 arr4[0] = "Tom";

 arr4[1] = "Lucy";

 arr4[2] = "Jack";

 document.write(arr4);

 document.write(arr4.push("zhangsan"));
 //return new Array()的長度

 



 var arr5 = ["aaa","bbb","ccc"];

 var arr6 = ["www","qqq"];

 

 document.write("length"+arr5);

 document.write("<br/>")

 document.write("array"+arr5.length);

 

 document.write("<br/>")

 document.write("new length"+arr5.push(arr6));  //4

 document.write("<br/>")

 document.write("new array"+arr5);

 for(var int=i; i<arr5.length; i++){

 alert(arr5[i]);

 }



 -pop()：表示删除一個元素，傳回删除的那個元素

 *var arr7 = [ "zhangsan", "lishi", "wangwu", "zhaoliu" ];

 document.write("old array" + arr7);

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

 document.write("return" + arr7);

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

 document.write("new array" + arr7);



 -revense()：表示颠倒數組中的元素的順序

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

 var arr8 = [ "a", "b", "c" ];

 document.write("old:" + arr8);

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

 document.write("new:" + arr8.reverse());



3.js的Date對象

 **在Java裡面擷取目前時間

 Date date = new Date();

 //格式化

 //toLocaleString()



 **js裡面擷取目前時間

 var date = new Date();

 //擷取目前時間

 var date = new Date();

 document.write(date);  // 



 //轉換成習慣的格式

 document.write("<hr/");

 document.write(date.toLocaleString());



 **擷取目前的年

 getFullyear():得到目前的年

 ****document.write("getFullYear:" + date.getFullYear());



 **擷取目前的月

 getMonth():得到目前的月

 ***傳回的是 0 - 11 月，如果想要得到準确的值，加1

 ****var month = date.getMonth()+1;

 document.write("getMonth:" + month);



 **擷取目前的星期

 getDay():星期，傳回的是（0~6）

 **國外，把星期日作為一周的第一天，星期日傳回的是0

 而星期一到星期六是1-6

 ****document.write("getDay:" + date.getDay());

 **擷取目前的日

 getDate():擷取目前的号數：1-31

 ****document.write("getDate:" + date.getDate());



 **擷取目前的時

 getHours()：擷取目前的時

 ****document.write("getHours:" + date.getHours());

 

 **擷取目前的分

 getMinutes():擷取目前的分鐘

 ****document.write("getMinutes:" + date.getMinutes());

 

 **擷取目前的秒

 getSeconds():擷取目前的秒

 ****document.write("getSeconds:" + date.getSeconds());



 **擷取毫秒數

 getTime():擷取目前的毫秒數

 傳回的是1970 1 1 至今的毫秒數



 **應用場景：

 ***使用毫秒數處理緩存的效果（不有緩存）

​​​ http://www.baidu.com?毫秒數
​​​

4.js的math對象：

 *屬數學的運算

 **裡面的都是靜态的方法，使用可以直接使用 Math.方法()



 ** ceil(x)：向上舍入



 ** floor(x)：向下舍入



 ** round(x)：四舍五入



 ** random()：得到随機數(僞随機數)

 -得到0-9的随機數

 Math.random()*10

 Math.floor(Math.random()*10);



 ** max(x,y)：傳回x和y之間的最大值

 ** min(x,y)：傳回***
 最小值





5.js的全局函數

 *由于不屬于任何一個對象，直接寫名稱使用

 ** eval（)：執行js代碼（如果字元串是一個js代碼，使用方法直接執行）

 ****var str = "alert('1234')";

 //alert(str);

 eval（str);



 ** encodeURI()：對字元進行編碼 

    decodeURI()：對字元進行解碼



    encodeURIComponent()和 decodeURIComponent()



 ** isNaN()

 判斷目前的字元串是否是數字
 

 --
 document.write("<hr/>")

 var str2 = "123";

 var flag = isNaN(str2);

 alert(flag);

 *** 如果是數字，則is‘t NaN ，是以傳回false

 ***
 如果不是數字，那麼isNaN，是以傳回true



 ** parseInt():類型轉換

 var str3 = "132";

 document.write(parseInt(str3) + 1);



6.js的函數的重載

 **什麼是重載？：方法名相同，參數不同



 **js的重載是否存在？ 不存在

 **調用最後一個方法

 

 **js裡面是否存在存在重載？(面試題目)

 (1)js裡面不存在重載

 (2)但是可以通過其他方式模拟重載 (通過aruguments數組來實作)

 function add() {

 var sum = 0;

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

 sum += arguments[i];

 }

 return sum;



 }





 //調用

 alert(add1(1, 2)); //NaN

 alert(add1(1, 2, 3)); //NaN

 alert(add1(1, 2, 3, 4)); // 10



7.js的bom對象

 ** bom：broswer object model： 浏覽器對象模型



 **
 有哪些對象?

 ***
 navigator：擷取客戶機的資訊（浏覽器的資訊）
 

 - document.write(navigator.appName);



 ***
 screen：擷取螢幕的資訊

 - document.write(screen.width+"       "+screen.height);



 ***
 location：請求url位址

 -href屬性

 ****擷取到請求的url位址



 ****設定url位址

 -頁面上安置一個按鈕，按鈕上綁定一個事件，當點選這個按鈕，頁面就可以跳轉到另一個頁面

 -location.href = "hello.html";



 **** <input type="button" name="跳轉" value="tiaozhuan" οnclick="href()"/>
 

 -滑鼠點選事件 οnclick="js的方法"



 ***
 history：請求的url的曆史記錄

 -建立三個頁面

 1.建立第一個頁面 a.html 寫一個超連結 到 b.html

 2.建立b.html 超連結 到 c.html

 3.建立c.html



 -到通路的上一個頁面

 history.back();

 history.go(-1);

 -到通路的下一個頁面

 history.forward();

 history.go(1);





 ****  window (****)

 *視窗對象

 *頂層對象(所有的bom對象都是在window裡面操作的)



 **方法：

 -window.alert()：頁面彈出一個框，顯示内容

 **簡寫 alert();

 -confirm()：确認框

  
 var flag = confirm("是否删除？");  

  
 flag傳回删除的絕定結果



 -prompt()：輸入的對話框

 window.prompt("please input", "0");

 window.prompt("輸入框的提示内容", "輸入框中的内容");



 -open()：打開一個新的視窗

 ** open("打開的新視窗的位址url", "", "視窗特征,比如視窗的寬高");

 - 建立一個按鈕，點選這個按鈕，打開一個新視窗

 window.open("01.js的String對象.html","","windth=200, height=50");



 -close()：關閉視窗(浏覽器相容性比較差)

  
 window.close();



 -做定時器

 ** setInterval("js代碼", 毫秒數) 

 window.setInterval("alert(123)", 3000);



 ** setTimeout("js代碼", 毫秒數);

 -表示在毫秒數之後執行，但是隻執行一次

 -表示四秒之後執行js代碼，隻會執行一次

 window.setTimeout("alert(123)", 4000);



 ** clearInterval()：清除setInterval設定的定時器

 var id1 = setInterval("alert(123)", 3000);//通過setInterval會有一個id傳回值，可以通過clearInterval(id1)結束



 ** clearTimeout()：清除setTimeout設定的定時器

 var id2 = setTimeout("alert(123)", 4000);

 //同上，clrearTimeout(id2);



8.js的dom對象

 *dom：document object model：文檔對象模型

 **文檔：

 超文本文檔（超文本标記文檔）html、xml

 

 **對象：

 提供了屬性和方法



 **模型：

 使用了屬性和方法操作超文本标記性文檔



 ***可以使用js裡面的dom裡面的提供的對象，使用這些對象的屬性和方法，對标記型文檔進行操作



 ***想要對象标記型文檔進行操作，首先需要 對标記型文檔裡面的所有内容封裝成對象
 

 --需要把html裡面的标簽、屬性、文本内容都封裝成對象



 ***要想對标記型文檔進行操作，解析标記性文檔

 - 如何使用dom解析html

 

 ***解析過程

 根據html的層級結構，在記憶體中配置設定一個樹形結構，需要把html中的每部分封裝成對象，

 - document對象：整個文檔

 - element對象：标簽對象

 - 屬性對象

 - 文本對象



 -- 
 Node節點對象：這個對象是這些對象的父對象

 *** 如果在對象裡面找不到想要的方法，這個時候到Node對象裡面去找



 DOM模型有三種：

 DOM level 1：将html文檔封裝成對象。

 DOM level 2：在level 1的基礎上添加新的功能，列如：對象時間和css樣式的支援。

 DOM level 3：支援xml1.0的一些新特性。



 * DHTML :是很多技術的簡稱：html+css+dom+JavaScript

 ** html：封裝資料

 ** css：使用屬性和屬性值來設定樣式

 ** dom：操作html文檔（标記型文檔）

 ** JavaScript：專門指的是js的文法語句（ECMAScript）

 

9.document對象

 * 表示整個的文檔



 ** 常用的方法：

 **** write()方法:

 (1)向頁面輸出變量（值）

 (2)向頁面輸出html代碼

 - var str = "abc";

 document.write(str);

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



 **** getElementById();

 -通過id得到元素（标簽）

 -//使用getElementById得到input标簽

 var input1 = document.getElementById("nameid"); //傳遞的參數是标簽裡面的id的值

 //得到input裡面的value值

 alert(input1.name);  //标簽對象.屬性名稱

 //向input裡面設定一個值value

 input1.value = "bbbb";



 **** getElementsByName();

 -通過标簽的name的屬性值得到标簽

 -傳回的是一個集合（數組）

 -//使用getElementsByName得到input标簽

 var inputs = document.getElementsByName("name1"); //傳遞的參數是 标簽裡面的name的值



 //周遊數組

 for (var i=0; i<inputs.length; i++) {//通過周遊數組，得到每個标簽裡面的具體的值

 var input1 = inputs[i];  
 //每次循環得到input對象，指派到input1裡面

 input1.value = "aaaaaaaaa";//得到每個input标簽裡面的value值

 }



 **** getElementsByTagName("标簽名稱");

 -通過标簽名得到元素

 -//示範getElementsByTagName()

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

 alert(inputarray.length);

 //周遊數組，得到每個input标簽

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

 //得到每個input标簽

 var input1 = inputarray[i];



 //得到每個input的值

 alert(input1);



 }



 **** 注意點的地方

 **** 隻有一個标簽，這個标簽隻能使用name擷取到，這個使用，使用getElementsByName傳回的是一個數組,但是現在隻有一個元素，這個時候就不需要周遊，而是可以直接通過數組的下标擷取到值

 //通過name得到input标簽

 var input2 = document.getElementsByName("name11")[0];

 alert(input2.value);



 var inputs = document.getElementsByTagName("input")[0];

 alert(inputs.value);



10.案例：window彈窗案例

 - 實作過程

 1.建立一個頁面：

 **兩個輸入項和一個按鈕

 **按鈕上面有一個事件：彈出一個新視窗 open

 2.建立彈出頁面

 **表格

 **每一個有一個按鈕和編号和姓名

 **按鈕上有一個事件：把目前的編号和姓名傳到原來頁面中的輸入框中



 ****//實作s1方法

 function s1(num1,name1){

 //需要把num1,和name1值傳到window頁面中

 //跨頁面的操作  opener

 var pwin = window.opener;

 pwin.document.getElementById("numid").value = num1;

 pwin.document.getElementById("nameid").value = name1;



 //關閉彈出視窗

 window.close();



 }



 -opener：屬性，擷取建立目前視窗的視窗



 -做這個案例的時候會有一個問題：

 ***由于我們現在通路的是本地檔案，js安全性，谷歌浏覽器安全級别很高，不允許通路本地檔案

 ***在實際開發中，沒有這樣的問題，實際中不可能通路本地的檔案