JavaWeb之day03js

目錄:

一、js的String對象(****)

二、js的Array對象 (****)

三、js的Date對象 (****)
　　* 獲取當前的月 0-11，想要獲得準確的月 +1
　　* 獲取星期時候，星期日是 0

四、js的Math對象 (****)
　　* 靜態方法，直接Math.random()

五、js的全局函數 (****)
　　* 直接寫方法名稱 eval()

六、js的函數重載(****面試中問道)
　　（1）不存在重載
　　（2）能夠經過其餘方式模擬重載的效果 經過數組arguments

=========================

七、js的BOM對象（******）
　　navigator screen location history

八、window對象（*******）
　　- 方法都要掌握
　　- setInterval和setTimeout

九、DOM簡介和解析html（*******）

十、document對象（*******）
　　- 記住幾個方法

十一、案例：window練習（*******）

 

 

 

 

day03

上節內容回顧

一、html的表單標籤

　　<form>:
　　　　** action method enctype
　　　　輸入項：
　　　　　　** type="text"
　　　　　　** passwrod
　　　　　　** radio
　　　　　　** checkbox
　　　　　　** file
　　　　　　** submit
　　　　　　** reset
　　　　　　** type="image" src=""
　　　　　　** select
　　　　　　** textarea
　　　　　　** type=「button」
　　　　　　** hidden

二、css

　　** css和html的結合方式（四種）
　　　　（1）在標籤裏面style
　　　　（2）使用標籤<style>
　　　　（3） 使用@import url()
　　　　（4）link頭標籤實現

　　** css的基本選擇器（三種）
　　　　（1）標籤選擇器
　　　　（2）class選擇器 .名稱
　　　　（3）id選擇器 #名稱

三、javascript

　　** java和javascript區別

　　** js原始類型（五個）
　　　　string number boolean null undifined
　　　　使用var
　　** js的語句
　　　　if switch while for do-while
　　** js運算符
　　　　* == 和 === 區別
　　** js的數組
　　** 建立方式（三種）
　　　　var arr1 = [1,2,3,"4"];
　　　　var arr2 = new Array(3);
　　　　var arr3 = new Array(4,5,6);
　　** 屬性 length：長度
　　** js的函數
　　** 定義方式（三種）
　　　　function add1(){}
　　　　function(){}
　　** js的全局變量和局部變量
　　** 全局變量：在頁面的任何js的部分均可以使用
　　** 局部變量：在方法內部定義的變量，只是在方法內部使用
　　** script標籤應該放在什麼位置 </body>

 

一、js的String對象

　　** 建立String對象
　　　　*** var str = "abc";
　　** 方法和屬性（文檔）
　　*** 屬性 length：字符串的長度

　　*** 方法
　　（1）與html相關的方法
　　　　- bold()：加粗
　　　　- fontcolor(): 設置字符串的顏色
　　　　- fontsize(): 設置字體的大小

　　　　- link(): 將字符串顯示成超連接  w
　　　　　　**** str4.link("hello.html")
　　　　- 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(20)); //字符位置不存在，返回空字符串
　　　　- indexOf()： 返回字符串位置
　　　　　　** var str4 = "poiuyt";
　　　　　　document.write(str4.indexOf("w")); //字符不存在，返回-1
　　　　- split()：切分字符串，成數組
　　　　　　** var str5 = "a-b-c-d";
　　　　　　　var arr1 = str5.split("-");
　　　　　　   document.write("length: "+arr1.length);
　　　　- replace() ： 替換字符串
　　　　　　* 傳遞兩個參數：
　　　　　　　　-- 第一個參數是原始字符
　　　　　　　　-- 要替換成的字符
　　　　　　　　　　* var str6 = "abcd";
　　　　　　　　　　document.write(str6);
　　　　　　　　　　document.write("<br/>");
　　　　　　　　　　document.write(str6.replace("a","Q"));
　　　　- substr()和substring()
　　　　　　* var str7 = "abcdefghuiop";
　　　　　　//document.write(str7.substr(5,5)); //fghui 從第五位開始，向後截取五個字符
　　　　　　　　*** 從第幾位開始，向後截取幾位

　　　　　　document.write("<br/>");
　　　　　　document.write(str7.substring(3,5)); //de 從第幾位開始到第幾位結束 [3,5)
　　　　　　　　*** 從第幾位開始，到第幾位結束，可是不包含最後哪一位

二、js的Array對象

　　** 建立數組（三種）
　　　　- var arr1 = [1,2,3];
　　　　- var arr2 = new Array(3); //長度是3
　　　　- var arr3 = new Array(1,2,3); //數組中的元素是1 2 3

　　　　- var arr = []; //建立一個空數組
　　** 屬性：length：查看數組的長度

　　** 方法:
　　　　- concat方法： 數組的鏈接
　　　　　　* var arr11 = [1,2,3];
　　　　　　var arr12 = [4,5,6];
　　　　　　document.write(arr11.concat(arr12));

　　　　- join()：根據指定的字符分割數組
　　　　　　* var arr13 = new Array(3);
　　　　　　　　arr13[0] = "a";
　　　　　　　　arr13[1] = "b";
　　　　　　　　arr13[2] = "c";

　　　　　　　　document.write(arr13);
　　　　　　　　document.write("<br/>");
　　　　　　　　document.write(arr13.join("-"));

　　　　- push():向數組末尾添加元素，返回數組的新的長度
　　　　　　** 若是添加的是一個數組，這個時候把數組當作一個總體字符串添加進去

　　　　　　* //push方法 
　　　　　　　　var arr14 = new Array(3);
　　　　　　　　arr14[0] = "tom";
　　　　　　　　arr14[1] = "lucy";
　　　　　　　　arr14[2] = "jack";
　　　　　　　　document.write("old array: "+arr14);

　　　　　　　　document.write("<br/>");
　　　　　　　　document.write("old length:"+arr14.length);

　　　　　　　　document.write("<br/>");
　　　　　　　　document.write("new length: "+arr14.push("zhangsan"));

　　　　　　　　document.write("<br/>");
　　　　　　　　document.write("new array: "+arr14);

　　　　　　　　* var arr15 = ["aaa","bbb","ccc"];
　　　　　　　　var arr16 = ["www ","qqq"];

　　　　　　　　document.write("old array:"+arr15);
　　　　　　　　document.write("<br/>");
　　　　　　　　document.write("old length:"+arr15.length);

　　　　　　　　document.write("<br/>");
　　　　　　　　document.write("new length:"+arr15.push(arr16));
　　　　　　　　document.write("<br/>");
　　　　　　　　document.write("new array: "+arr15);
　　　　　　　　for(var i=0;i<arr15.length;i++) {
　　　　　　　　　　alert(arr15[i]);
　　　　　　　　}

　　　　- pop()：表示 刪除最後一個元素，返回刪除的那個元素
　　　　　　* var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];
　　　　　　document.write("old array: "+arr17);
　　　　　　document.write("<br/>");

　　　　　　document.write("return: "+arr17.pop());
　　　　　　document.write("<br/>");
　　　　　　document.write("new array: "+arr17);

　　　　- reverse():顛倒數組中的元素的順序
　　　　　　* var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];
　　　　　　document.write("old array: "+arr17);
　　　　　　document.write("<br/>");

　　　　　　document.write("return: "+arr17.pop());
　　　　　　document.write("<br/>");
　　　　　　document.write("new array: "+arr17);

　　　　　　//reverse方法
　　　　　　　　document.write("<hr/>");
　　　　　　　　var arr18 = ["zhangsan1","lisi1","zhaoliu1","niuqi1"];
　　　　　　　　document.write("old array: "+arr18);
　　　　　　　　document.write("<br/>");
　　　　　　　　document.write("new array:"+arr18.reverse());

三、js的Date對象

　　** 在java裏面獲取當前時間
　　　　Date date = new Date();
　　　　//格式化
　　　　//toLocaleString() //2015年4月17日 11:17:12

　　** js裏面獲取當前時間
　　　　var date = new Date();
　　　　//獲取當前時間
　　　　var date = new Date();
　　　　document.write(date); // Fri Apr 17 10:47:46 UTC+0800 2015

　　　　//轉換成習慣的格式
　　　　document.write("<hr/>");
　　　　document.write(date.toLocaleString());

　　** 獲取當前的年方法
　　　　getFullYear()：獲得當前的年
　　　　**** document.write("year: "+date.getFullYear());

　　** 獲取當前的月方法
　　　　getMonth()：獲取當前的月
　　　　*** 返回的是 0-11月，若是想要獲得準確的值，加1
　　　　**** var date1 = date.getMonth()+1;
　　　　　　document.write("month: "+date1);

　　** 獲取當前的星期
　　　　getDay()：星期,返回的是 (0 ~ 6)
　　　　** 外國朋友，把星期日做爲一週的第一天，星期日返回的是 0
　　　　　　而星期一到星期六 返回的是 1-6
　　　　** document.write("week: "+date.getDay());

　　** 獲取當前的日
　　　　getDate()：獲得當前的天 1-31
　　　　** document.write("day: "+date.getDate());

　　** 獲取當前的小時
　　　　getHours()：獲取小時
　　　　** document.write("hour: "+date.getHours());
　　** 獲取當前的分鐘
　　　　getMinutes()：分鐘
　　　　** document.write("minute: "+date.getMinutes());

　　** 獲取當前的秒
　　　　getSeconds(): 秒
　　　　** document.write("second: "+date.getSeconds());
　　** 獲取毫秒數
　　　　getTime()
　　　　返回的是1970 1 1 至今的毫秒數

　　　　** 應用場景：
　　　　*** 使用毫秒數處理緩存的效果（不有緩存）
　　　　　　http://www.baidu.com?毫秒數

四、js的Math對象

　　* 數學的運算
　　　　** 裏面的都是靜態方法，使用能夠直接使用 Math.方法()

　　　　** ceil(x): 向上舍人

　　　　** floor(x)：向下舍人

　　　　** round(x)：四捨五入

　　　　** random()：獲得隨機數（僞隨機數）
　　- 獲得0-9的隨機數
　　　　Math.random()*10
　　　　Math.floor(Math.random()*10));

五、js的全局函數

　　* 因爲不屬於任何一個對象，直接寫名稱使用

　　　　** eval() ： 執行js代碼（若是字符串是一個js代碼，使用方法直接執行）
　　　　　　**** var str = "alert('1234');";
　　　　　　　　//alert(str);
　　　　　　　　eval(str);

　　　　** encodeURI() ：對字符進行編碼
　　　　　　- %E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaa1234

　　　　**decodeURI() ：對字符進行解碼

　　　　　　encodeURIComponent() 和 decodeURIComponent()

　　　　** isNaN():判斷當前字符串是不是數字
　　　　　　-- var str2 = "aaaa";
　　　　　　　　alert(isNaN(str2));
　　　　　　*** 若是是數字，返回false
　　　　　　*** 若是不是數字，返回true

　　　　** parseInt()：類型轉換
　　　　　　** var str3 = "123";
　　　　　　document.w rite(parseInt(str3)+1);   

六、js的函數的重載

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

　　** js的重載是否存在？ 不存在
　　　　** 調用最後一個方法
　　　　** 把傳遞的參數保存到 arguments數組裏面

　　** js裏面是否存在重載？(面試題目) 
　　　　（1）js裏面不存在重載。
　　　　（2）可是能夠經過其餘方式模擬重載的效果 （經過aruguments數組來實現）

　　　　*** function add1() {
　　　　//好比傳遞的是兩個參數
　　　　　　if(arguments.length == 2) {
　　　　　　　　return arguments[0]+arguments[1];

　　　　　　} else if (arguments.length == 3) {
　　　　　　　　return arguments[0]+arguments[1]+arguments[2];

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

　　　　　　　　return arguments[0]+arguments[1]+arguments[2]+arguments[3];
　　　　　　} else {
　　　　　　　　return 0;
　　　　　　　　}
　　　　　　}

七、js的bom對象

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

　　** 有哪些對象？
　　　　*** navigator： 獲取客戶機的信息（瀏覽器的信息）
　　　　　　- navigator.appName
　　　　　　- document.write(navigator.appName);

　　　　*** screen: 獲取屏幕的信息
　　　　　　- document.write(screen.width);
　　　　　　document.write("<br/>");
　　　　　　document.write(screen.height);

　　　　*** location: 請求url地址
　　　　　　- href屬性
　　　　　　**** 獲取到請求的url地址
　　　　　　　　- document.write(location.href);

　　　　　　**** 設置url地址
　　　　　　　　- 頁面上安置一個按鈕，按鈕上綁定一個事件，當我點擊這個按鈕，頁面能夠跳轉到另一個頁面
　　　　　　　　- location.href = "hello.html";

　　　　　　　　**** <input type="button" value="tiaozhuan" onclick="href1();"/>
　　　　　　　　- 鼠標點擊事件 onclick="js的方法;"

　　　　*** history：請求的url的歷史記錄
　　　　　　- 建立三個頁面
　　　　　　　　一、建立第一個頁面 a.html 寫一個超連接 到 b.html
　　　　　　　　二、建立b.html 超連接 到 c.html
　　　　　　　　三、建立c.html

　　　　　　- 到訪問的上一個頁面
　　　　　　　　history.back();
　　　　　　　　history.go(-1);

　　　　　　- 到訪問的下一個頁面
　　　　　　　　history.forward();
　　　　　　　　history.go(1);

　　　　**** window（****）
　　　　　　* 窗口對象
　　　　　　* 頂層對象（所用的bom對象都是在window裏面操做的）

　　　　　　** 方法
　　　　　　　　- window.alert() : 頁面彈出一個框，顯示內容
　　　　　　** 簡寫alert()
　　　　　　　　- confirm()： 確認框
　　　　　　　　　　- var flag = window.confirm("顯示的內容");
　　　　　　　　- prompt()： 輸入的對話框
　　　　　　　　　　- window.prompt("please input : ","0");
　　　　　　　　　　- window.prompt("在顯示的內容","輸入框裏面的默認值");
　　　　　　　　- open() :　打開一個新的窗口
　　　　　　　　　　** open("打開的新窗口的地址url","","窗口特徵，好比窗口寬度和高度")
　　　　　　　　　　　　-建立一個按鈕，點擊這個按鈕，打開一個新的窗口
　　　　　　　　　　　　　　- window.open("hello.html","","width=200,height=100");
　　　　　　　　- close(): 關閉窗口(瀏覽器兼容性比較差)
　　　　　　　　　　- window.close();
　　　　　　　　- 作定時器
　　　　　　　　　　** setInterval("js代碼",毫秒數) 1秒=1000毫秒
　　　　　　　　　　　　- 表示每三秒，執行一次alert方法
　　　　　　　　　　　　window.setInterval("alert('123');",3000);
　　　　　　　　　　** setTimeout("js代碼",毫秒數)
　　　　　　　　　　　　- 表示在毫秒數以後執行，可是隻會執行一次

　　　　　　　　　　　　- 表示四秒以後執行js代碼，只會執行一次
　　　　　　　　　　　　window.setTimeout("alert('abc');",4000);
　　　　　　　　　　** clearInterval(): 清除setInterval設置的定時器
　　　　　　　　　　　　var id1 = setInterval("alert('123');",3000);//經過setInterval會有一個返回值
　　　　　　　　　　　　clearInterval(id1);

　　　　　　　　　　** clearTimeout() : 清除setTimeout設置的定時器
　　　　　　　　　　　　var id2 = setTimeout("alert('abc');",4000);
　　　　　　　　　　　　clearTimeout(id2);

八、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：操做html文檔（標記型文檔）
　　** javascript：專門指的是js的語法語句（ECMAScript）

九、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 = "bbbbb";
　　　　**** getElementsByName();
　　　　　　- 經過標籤的name的屬性值獲得標籤
　　　　　　- 返回的是一個集合（數組）
　　　　　　- //使用getElementsByName獲得input標籤
　　　　　　　　var inputs = document.getElementsByName("name1"); //傳遞的參數是 標籤裏面的name的值
　　　　　　//alert(inputs.length);
　　　　　　//遍歷數組
　　　　　　　　for(var i=0;i<inputs.length;i++) { //經過遍歷數組，獲得每一個標籤裏面的具體的值
　　　　　　　　　　var input1 = inputs[i]; //每次循環獲得input對象，賦值到input1裏面
　　　　　　　　　　alert(input1.value); //獲得每一個input標籤裏面的value值
　　　　　　}
　　　　**** getElementsByTagName("標籤名稱");
　　　　　　- 經過標籤名稱獲得元素
　　　　　　- //演示getElementsByTagName
　　　　　　　　var inputs1 = document.getElementsByTagName("input"); //傳遞的參數，是標籤名稱
　　　　　　　　//alert(inputs1.length);
　　　　　　　　//遍歷數組，獲得每一個input標籤
　　　　　　　　for(var m=0;m<inputs1.length;m++) {
　　　　　　　　　　//獲得每一個input標籤
　　　　　　　　　　var input1 = inputs1[m];
　　　　　　　　　　//獲得value值
　　　　　　　　　　alert(input1.value);
　　　　　　　　}

　　　　**** 注意地方
　　　　**** 只有一個標籤，這個標籤只能使用name獲取到，這個使用，使用getElementsByName返回的是一個數組，
　　　　可是如今只有一個元素，這個時候不須要遍歷，而是能夠直接經過數組的下標獲取到值
　　　　//經過name獲得input標籤
　　　　　　var inputs2 = document.getElementsByName("name11")[0];
　　　　　　alert(inputs2.value);

　　　　　　var inputss = document.getElementsByTagName("input")[0];
　　　　　　alert(inputss.value);

十、案例：window彈窗案例

　　- 實現過程
　　　　一、建立一個頁面
　　　　　　** 有兩個輸入項和一個按鈕
　　　　　　** 按鈕上面有一個事件：彈出一個新窗口 open

　　　　二、建立彈出頁面
　　　　　　** 表格
　　　　　　** 每一行有一個按鈕和編號和姓名
　　　　　　** 按鈕上有一個事件：把當前的編號和姓名，賦值到第一個頁面相應的位置

　　　　　　****//實現s1方法
　　　　　　　　function s1(num1,name1) {
　　　　　　　　　　//須要把num1和name1賦值到window頁面
　　　　　　　　　　//跨頁面的操做 opener：獲得建立這個窗口的窗口 獲得window頁面
　　　　　　　　　　var pwin = window.opener; //獲得window頁面
　　　　　　　　　　pwin.document.getElementById("numid").value = num1;
　　　　　　　　　　pwin.document.getElementById("nameid").value = name1;
　　　　　　　　　　//關閉窗口
　　　　　　　　　　window.close();
　　　　　　　　}

　　　　－opener:屬性，獲取建立當前窗口的窗口

　　　　- 作這個案例時候會有一個問題 　　　　　　*** 因爲咱們如今訪問的是本地文件，js安全性，谷歌瀏覽器安全級別很高，不容許訪問本地文件 　　　　　　*** 在實際開發中，沒有這樣的問題，實際中不可能訪問本地的文件。 　　　　　　*** http://www.baidu.com