1、上節課內容回顧
* html裏面form表單
* css
* javascript
2、內容補充
1、js和html兩種結合方式
* 使用外部文件方式
*
2、padding：內邊距
* padding: 20px;
* 另外一種設置方式：
/*
設置內邊距
按照順時針順序
*/
padding:20px 40px 60px 10px;
3、js的運算符裏面 == 和 ===區別
if（i==3）：數值的比較
if(i===3):類型和值
** == 比較只是值，與類型無關
** === 比較的是類型和值
3、js的String對象
** 創建String對象
- var str = “abc”;
- var str1 = new String(“aaa”);
* 屬性：length 字符串的長度
* 方法：
** 與html相關的方法（設置樣式的方法）
- bold() 使用粗體顯示字符串。
- fontcolor() 使用指定的顏色來顯示字符串。
* document.write(str.fontcolor("red"));
- fontsize() 使用指定的尺寸來顯示字符串。
* size 參數必須是從 1 至 7 的數字。
- link() 將字符串顯示爲鏈接。
* document.write(str.link("01-內容補充.html"));
- sub() 把字符串顯示爲下標。
- sup() 把字符串顯示爲上標。
** 和java相似的方法（java裏面也有類似的方法 split ）
- charAt() 返回在指定位置的字符。
* document.write(str1.charAt(7));
* 如果沒有這個字符，返回“”
- concat() 連接字符串。
* document.write(str1.concat(str2));
- indexOf() 檢索字符串。 返回字符的位置，如果沒有返回-1
* indexOf() 方法對大小寫敏感！
- replace() 替換字符串
* 傳遞兩個參數 replace(old,new)
* old: 要替換的部分
* new：替換成的部分
- split() 把字符串分割爲字符串數組。
* var arr = str3.split("-");
- * substr() 從起始索引號提取字符串中指定數目的字符。
* 兩個參數
- * substring() 提取字符串中兩個指定的索引號之間的字符。
* var str4 = "abcdef123456";
document.write("substr: "+str4.substr(3,5)); //def12
** 從第三開始，向後截取五位
document.write("<br/>");
document.write("substring: "+str4.substring(3,5)); //de [3,5)
** 從第三位開始到第五位結束，但是不包含第五位 [3,5)
4、js的Array對象
* 創建數組方式 三種
1、var arr1 = [1,2,”4”];
2、var arr2 = new Array(3);
3、var arr3 = new Array(4,5,6);
* 屬性：length 設置或返回數組中元素的數目。
* 方法：
- concat()：連接數組
* document.write(“concat: “+arr.concat(arr1));
- join() 把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。
* document.write(“new: “+arr2.join(“-“));
- push() 向數組的末尾添加一個或更多元素，並返回新的長度。
* //創建一個數組 arr4
var arr4 = [“aaaa”,”bbbb”,”cccc”];
//執行push方法
document.write(“length: “+arr3.push(arr4));
//執行push方法之後的值
document.write(“
”);
document.write(“new: “+arr3);
** 添加的是一個元素，如果添加數組，會把作爲一個整體添加進去
- pop() 刪除並返回數組的最後一個元素
* //pop方法
document.write(“
”);
var arr5 = [“tom”,”jack”,”mary”];
//輸出原始值
document.write(“old:”+arr5);
//執行pop方法
document.write(“
”);
document.write(“執行pop的返回值：”+arr5.pop());
//執行pop之後數組的值
document.write(“
”);
document.write(“new:”+arr5);
- reverse() 顛倒數組中元素的順序。
* //reverse方法
document.write(“
”);
var arr6 = [11,12,13,14];
document.write(“old:”+arr6);
//執行reverse方法
document.write(“
”);
document.write(arr6.reverse());
5、js的Date對象
* 創建Date對象
var date = new Date();
// Date date = new Date();
* 方法：
- toLocaleString():根據本地時間格式，把 Date 對象轉換爲字符串。
- 獲取年：getFullYear() 從 Date 對象以四位數字返回年份 （不使用getYear方法）
- 月: getMonth() 從 Date 對象返回月份 (0 ~ 11) ,需要加1
- 星期：getDay() 從 Date 對象返回一週中的某一天 (0 ~ 6)
* 判斷一下，如果0 ，加7，表示的星期日
- 日：getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)
- 小時 getHours()
- 分鐘：getMinutes()
- 秒：getSeconds()
- getTime() 返回 1970 年 1 月 1 日至今的毫秒數
** 應用場景：防止瀏覽器緩存
6、js的Math對象
* 一些數學運算
* Math裏面的方法，都是靜態的方法
- ceil(x) 對一個數進行上舍入。
- floor(x) 對一個數進行下舍入。
- round(x) 把一個數四捨五入爲最接近的整數
* var a = 12.6;
//ceil
document.write(Math.ceil(a));
//floor
document.write("<br/>");
document.write(Math.floor(a));
//round
document.write("<br/>");
document.write(Math.round(a));
- random() 返回 0 ~ 1 之間的隨機數
* //生成0-9之間的隨機數
document.write("<hr/>");
document.write(Math.floor(Math.random()*10));
7、js的全局函數
* 不屬於任何一個對象，使用直接寫方法名 eval();
* 常用方法：
- eval()：執行字符串裏面的js代碼
var str = “alert(‘123’);”;
//alert(str);
eval(str);
- isNaN():判斷當前是否是個數字
* NaN:表示不是一個數字
* 返回是true false
* 如果不是數字返回 ture
* 如果是數字返回 false
* 字符編碼，ie瀏覽器url編碼，火狐瀏覽器base64編碼
- encodeURI()：把字符進行編碼
- decodeURI()：把字符進行解碼
- parseInt():轉換類型
* document.write(parseInt(str4)+1);
8、js的函數重載
* java裏面的重載：肯定有重載，方法名相同，參數不同
* js裏面 沒有重載，可以通過一些其他的方式來模擬重載的效果
— js裏面沒有重載
- js的函數裏面有一個數組arguments，這個數組用於存儲傳遞過來的參數
* 面試題目：js裏面是否存在重載？
1、js裏面不存在重載
2、但是可以使用其他方式來模擬實現，使用arguments數組來實現模擬重載的效果
9、js的bom對象
* broswer object model: 瀏覽器對象模型
* 對象：
** navigator（瞭解）：瀏覽器的信息
- navigator.appName;
- window.navigator.appName;
** screen（瞭解）：屏幕的信息
- screen.width
- window.screen.width
** location（重點掌握屬性href）：URL 的信息
* 引入 *
* 鼠標點擊事件 onclick="js方法"
- 屬性 href 設置或返回完整的 URL。
1、獲得url路徑地址
- location.href
2、設置url路徑地址
//設置url地址，實現頁面跳轉到的地址
function href1() {
location.href = "01-內容補充.html";
}
** history（三個方法）：url的歷史信息
* back() 加載 history 列表中的前一個 URL
* forward() 加載 history 列表中的下一個 URL
* go() 加載 history 列表中的某個具體頁面
* -1:上一個頁面 1：下一個頁面
** 模擬實現向上一個頁面，和下一個頁面
- 創建一個頁面h1.html 寫超鏈接 到 h2.html
- 在h2.html中寫超鏈接到 h3.html
** window（重點）：窗口對象，頂層對象
* 方法：
1、alert(): 在頁面彈出一個提示框
- window.alert();
2、confirm(): 表示一個確認框
- var aa = window.confirm("顯示在提示框上的內容");
- 有返回值，如果點擊確定，返回true；點擊取消，返回false
3、prompt() 顯示可提示用戶輸入的對話框。
- prompt(text,defaultText)
** text:顯示在輸入框上的內容
** defaultText：表示輸入框的默認值
4、open() 打開一個新的瀏覽器窗口
- window.open('url地址','','width=200,height=100')
5、close():關閉窗口(有些瀏覽器不支持)
* 實現定時器的效果
- 每一秒，在頁面上alert 123；
* 方法：
- setInterval(): 比如設置的是一秒，每一秒就會去執行js代碼（不斷的執行）
** setInterval("js代碼",毫秒數)
**setInterval("add1();",毫秒數)
- setTimeout()：比如設置的是三秒，表示三秒後去執行js代碼（只會執行一次）
** setTimeout("js",毫秒數);
- clearInterval(): 清除設置的setInterval()
* setInterval()時候返回一個id
* 想要清除 clearInterval(id);
- clearTimeout(): 清除設置的setTimeout()
* setTimeout()時候返回一個id
* 想要清除 clearTimeout(id)
10、js的dom對象
* document object model 文檔對象模型
** 文檔：標記型文檔（html、xml）
** 對象：js是基於對象，對象裏面包括屬性和方法。學習js提供的dom對象裏面的屬性和方法
** 模型：js提供的dom對象裏面的屬性和方法對標記型文檔進行操作
**** 使用dom對象裏面的屬性和方法如何對標記型文檔進行操作
* 要想操作標記型文檔，首先要對標記型文檔裏面的所有內容進行封裝成對象。
**包括 標籤、文本、屬性
** 要想進行操作，首先必須要解析html（標記型文檔）
** 解析html（標記型文檔）過程：
- 根據html的層級結構，在內存中分配一個樹形結構，
- document對象：整個文檔
- 元素對象（標籤對象）element
- 屬性對象
- 文本對象
- 節點對象 Node：是dom裏面所有對象的父對象
* DHTML介紹
* DHTML不是一種技術，而是很多技術的簡稱
* 包含：
** html: 封裝數據
** css：提供了很多屬性和屬性值，來實現數據樣式的變化
** javascript（專門指的是ECMAScript）：提供了一些語法
** dom：文檔對象模型，對標記型文檔進行操作
11、dom的document對象
* 方法：
** getElementById()
- 通過id得到元素（標籤）
- var u1 = document.getElementById(“id1”);
alert(u1.id);
** getElementsByName()
- 通過name屬性值得到元素對象（數組）
- var a1 = document.getElementsByName("username");
//alert(a1.length);
//遍歷數組
for(var i=0;i<a1.length;i++) {
var input1 = a1[i];
alert(input1.value);
}
- 獲取一個標籤，直接使用數組下標實現
var a2 = document.getElementsByName("username1")[0];
alert(a2.value);
** getElementsByTagName()
- 通過標籤的名稱獲取元素對象（數組）
- //使用getElementsByTagName()返回是數組
var a3 = document.getElementsByTagName("input");
//alert(a3.length);
//遍歷數組
for(var m=0;m<a3.length;m++) {
var input2 = a3[m];
//alert(input2.value);
}
- 獲取一個標籤，使用getElementsByTagName
var a4 = document.getElementsByTagName("input")[0];
//alert(a4.length);
alert(a4.value);
** write(); 向頁面輸出內容，也可以輸出html代碼
12、window案例
* 案例開發步驟
1、創建兩個頁面
* 第一個頁面：
** 有兩個文本輸入框
** 一個按鈕，寫一個鼠標點擊事件 onclick
*鼠標點擊事件： 打開一個新的頁面 open()
* 第二個頁面
** 有一個表格 有三個字段 操作 編號 姓名
** 在操作裏面有按鈕：
*** 點擊這個按鈕之後，把按鈕所在行的內容賦值到第一個頁面對應的文本框裏面
** 頁面關閉 close()