<pre>
day03
昨天内容回顧
*js的組成：ECMAScript bom dom
*js和html的結合方式：兩種
*js的原始類型和變量聲明
*js的運算符
**字元串相減操作，真正減法運算
**不是一個數字，傳回NaN
**布爾類型可以向加相減
*js的語句
for(vari=0;i<10;i++){ }
*js的bom對象
**navigator、screen、location、history
**window：是頂層對象，代表一個視窗
***alert、setInterval、setTimeout
*js的全局變量和局部變量
*script标簽約定放到</body>後面
思維導圖
<a href="http://s3.51cto.com/wyfs02/M01/6F/03/wKiom1WPVrCDOTf5AAEo2vowT30584.jpg" target="_blank"></a>
1、js的函數的建立和使用
*在java裡面定義方法格式：
publicvoid/int 方法名稱(參數清單) {
方法體;
傳回值;
}
*js裡面定義函數有三種方式
**第一種定義：使用一個關鍵字 function 方法名稱(參數清單) { 方法體和傳回值}
=function add1(a,b) { 方法體;傳回值可以有也沒有沒有; }
==function test1() {
alert("hello function");
//調用函數
//test1();
//實作兩個數的相加
functiontest2(a,b) {
varsum = a+b;
//alert(sum);
returnsum;
//調用有參數的函數
//test2(1,2);
alert(test2(2,3));
**第二種定義（匿名函數）：使用關鍵字 function , function() {方法體;傳回值; }
=var aa = function(m,n) {
returnm*n;
typeof(aa)傳回function
/*
functionaa(m,n){.....}
typeof(aa)傳回function
*/
//調用方法
alert(aa(4,5));
**第三種定義（了解）：（動态函數，函數裡面的參數和方法體或者傳回值都是通過參數傳遞進去的）
=使用到js裡面的内置對象 Function ，直接 new Funtion("函數的參數清單","方法體和傳回值")
==var param = "a,b";
varmethod = "var sum;sum = a+b;return sum;";
varbb = new Function(param,method)
functionbb(a,b) { ......}
//調用
alert(bb(5,6));
***定義函數之後，一定要調用函數，不然不會執行的
***參數清單是不用指定參數類型var的，直接寫參數名即可。
2、js的函數重載
*重載：方法名稱相同，參數清單不同
**在java裡面肯定有重載
*在js裡面不存在重載
*在js的函數裡面有一個數組是arguments,這個數組用來儲存傳遞到函數裡面的所有的參數
*java
publicstatic void main(String[] args)
*在js裡面模拟重載的效果
=function add1() {
//alert(arguments.length);
varsum = 0;
for(vari=0;i<arguments.length;i++) {
sum+= arguments[i];
}
alert(add1(1,2));
alert(add1(1,2,3));
alert(add1(1,2,3,4));
*JS裡面存在重載嗎？
**js裡面不存在重載
**但是可以使用函數裡面數組arguments模拟重載的效果
3、js的全局函數
*這些函數不屬于任何的一個對象，使用不需要寫任何的對象，直接寫函數名稱
=eval()：把字元串當成js代碼來執行
==var str = "alert('aaaa');";
//alert(str);
eval(str);
//其實這個函數在很多處已經被調用了，如在标簽中的事件屬性中添加響應，就是用字
符串包裹起來的js代碼。
=encodeURI()：對字元串編碼
=decodeURI()：對編碼之後的字元串進行解碼
**在傳遞參數的過程中，如果參數中包含中文，中文會有亂碼問題
***解決方式：首先對中文進行編碼，擷取資料時候在對編碼之後的内容進行解碼
==var encode1 = "abc123東方不敗";
vare1 = encodeURI(encode1);
document.write(e1);
document.write("<hr/>");
//decodeURI()：對編碼之後的字元串進行解碼
vard1 = decodeURI(e1);
document.write(d1);
當然了，javascript還提供了一些其它的編解碼全局函數。
= isNaN()：判斷是否是一個數字（NaN表示非數字，isNaN表示問是非數字嗎）
這個數字是通過檢測它的值是不是數字，如果boolean類型的也當作是一個
數字。
==var s = "aa";
//如果是數字傳回 false；如果不是數字傳回true
alert(isNaN(s)); //傳回true。
=parseInt()：把字元串轉化成number類型
==var a1 = "10";
document.write(a1+1);
document.write(parseInt(a1)+1);
4、js的事件
（1）html綁定事件
**有三種綁定方式
**第一種：在标簽裡面寫事件的屬性（注意函數名加括号）
=比如： <input type="button" value="button"onclick="js函數"/>
==<input type="button" value="buttontest"onclick="test1();"/>
**第二種：首先得到要綁定事件的标簽，在标簽對象上面.事件屬性名稱 = 要調用方法的名稱（注意不要加括号，否則可能按鈕還沒有點選就發生這個事件了。）
**使用document.getElementById();
=比如：<input type="text" id="id1" />
=在js裡面得到這個标簽 document.getElementById("id1").onclick = add1;
==document.getElementById("id1").onclick = test1;
&&&&&
假如上面不小心将test1寫成了test1()，會出現按鈕還沒有點選就執行了test1這個
方法，因為寫了test1()前面的onclick就不會産生綁定效果，相當于直接在script
調用了test()方法。
&&&&&&
**第三種：首先得到要綁定事件的标簽，在标簽對象上面.事件屬性名稱=function(){ js代碼}
=document.getElementById("id1"). {
alert("qq");
（2）js常用的事件
=onload和onclick
*onload：在html加載時候執行事件
==一般把這個事件綁定到body标簽裡面
==<body onload="load1();">
* 滑鼠點選事件
=onfocus和onblur
*onfocus：擷取到焦點
*onblur：失去焦點
*無緩存重新整理 ctrl f5
*onfocus事件問題：在一些低版本的浏覽器裡面不能用
（3）onkeypress：鍵盤事件，點選鍵盤上面的某個鍵，會觸發這個事件
事件綁定，一定要在标簽裡面調用函數并傳遞event參數。在script
裡面定義一個帶有參數的這個函數。
*<input type="text" id="keyid" name="keyname"onkeypress="key1(event);"/>
=function key1(obj) {
//得到目前點選鍵盤上面的鍵的值
//alert(obj.keyCode);
//如果點選回車，執行alert操作
if(obj.keyCode== 13) {
alert("keyload...");
（4）onmouseover和onmouseout
= 滑鼠移動到标簽上面
=onmouseout：滑鼠移出标簽
==function over1() {
document.getElementById("mouseid").value="onmouseoverload...";
functionout1() {
document.getElementById("mouseid").value="onmouseoutload...";
（5）onsubmit
=專門使用在表單送出裡面，寫在<form>标簽中。
==onsubmit="return check1();" //注意有個return。
==function check1() {
//alert("111");
returntrue;
*如果方法裡面return false，不會送出表單，隻有值是true時候才會送出表單
5、dom的簡介
（1）documentobject model：文檔對象模型
**文檔：标記型文檔，有html、xml
**對象：有屬性和方法
***使用dom裡面提供的對象，使用這些對象裡面的屬性和方法，對标記型文檔進行操作
***可以對标記型文檔裡面标簽、屬性、文本
*如果想要對标記型檔案進行操作，首先解析标記型文檔，使用dom方式進行解析
*dom解析html的過程
**樹形結構：隻能有一個根節點，有多個子節點，沒有子節點的節點是葉子節點
**根據html的層級結構在記憶體中配置設定一個樹形結構，
***document對象代表整個文檔
***element對象代表标簽對象
***屬性對象和文本對象
***node節點對象，這個對象是上面那些對象的父對象，如果在對象裡面找不到想要的方法可以到node裡面去找
（2）DHTML的簡介
**不是一種技術，而是很多的技術的簡稱
*html：封裝資料
*css：使用屬性和屬性值修改資料的樣式
*js裡面的ECMAScript：提供js的語句文法
*dom：使用dom裡面的對象對标記型檔案進行操作
=====================================================================================
上午内容的總結
（1）js建立函數的兩種方式
（2）js函數的重載
（3）js的全局函數（會用）
（4）html綁定事件三種方式
（5）js裡面的常用的事件（會用）
**重點 onsubmit
（6）dom是什麼
（7）dom解析标記型文檔的過程
（8）dom裡面的對象document、element、屬性、文本、node
（9）DHTML 是很多技術的簡稱
6、document對象的簡介
*代表整個文檔，得到整個文檔，就可以得到文檔裡面的内容
*document對象裡面的四個方法
=write() 向頁面輸出内容，同時輸出html代碼<如動态生成表格>
=getElementById() 根據标簽的id的值擷取标簽的對象。
==functionget1() {
//得到id是textid的标簽對象
varinput1 = document.getElementById("textid"); //标簽對象
//得到input裡面的value值
alert(input1.value);
= getElementsByName()根據标簽的name屬性的值擷取标簽對象，傳回對象數組。
==function get2() {
//得到多個input标簽的數組
varinputs1 = document.getElementsByName("textname");
//alert(inputs1.length);
//周遊數組
for(vari=0;i<inputs1.length;i++) {
//得到每一個input标簽對象
varinput1 = inputs1[i];
alert(input1.value);
==如果通過這個方法得到隻是一個标簽，傳回也是一個對象的數組
可以直接使用數組的下标擷取标簽的對象（數組的下标從0開始）
functionget3() {
varinput2 = document.getElementsByName("username")[0];
alert(input2.value);
= getElementsByTagName()根據标簽名稱得到标簽對象的數組。
==functionget4() {
varinputs3 = document.getElementsByTagName("input");
alert(inputs3.length);
7、innerHTML屬性
（1）這個屬性不是dom裡面的組成部分
*這個屬性可以做兩件事情
第一個：擷取标簽裡面的文本内容
=//擷取div标簽裡面的文本内容
functiongetText1() {
//得到div标簽對象
vardiv1 = document.getElementById("div1");
alert(div1.innerHTML);
*如果想要得到标簽裡面的文本内容，首先得到标簽對象，之後通過标簽對象上面使用innerHTML屬性，可以得到文本内容
第二個：向标簽裡面設定内容（可以是普通文本，也可以是html代碼）
（2）練習：動态生成表格
*實作步驟：
**首先，建立一個頁面，在頁面上有兩個輸入項和一個按鈕（有事件）
**其次，在事件裡面編寫js方法，在方法裡面首先得到輸入的行和列
**第三，根據行和列生成表格
***使用for循環生成表格
**** 首先循環行
****其次在行裡面循環列
**使用innerHTML屬性把表格的代碼顯示到div裡面
**代碼
functionadd1() {
**其次，在事件裡面編寫js方法，在方法裡面首先得到輸入的行和列
**第三，根據行和列生成表格
***使用for循環生成表格
****首先循環行
****其次在行裡面循環列
**使用innerHTML屬性把表格的代碼顯示到div裡面
//得到輸入的行和列
varhang = document.getElementById("hang").value;
varlie = document.getElementById("lie").value;
//alert(hang+":: "+lie);
//根據行和列生成表格<table> <tr><td>aaa</td></tr> </table>
vartab = "<table border='1'>";
//循環生成行和列
for(vari=1;i<=hang;i++) {//先循環tr
tab+= "<tr>";
//循環列
for(varj=1;j<=lie;j++) {
tab+= "<td>aaaaa</td>"
tab+= "</tr>";
tab+= "</table>";
//alert(tab);
//把生成的table的html代碼顯示到頁面上
vardiv11 = document.getElementById("div11");
div11.innerHTML= tab;
}
8、表單的送出方式
（1）第一種：submit
==<input type="submit"/>
（2）第二種：使用button送出表單
==首先得到form标簽，在标簽上執行submit()方法，可以送出表單
//使用button送出表單
functionform1() {
//擷取form标簽
varform1 = document.getElementById("form1");
//送出表單，調用方法
form1.submit();
（3）使用超連結送出資料
==類似與表單get送出，<ahref="hello.html?username=ddd&test=aa">超連結送出資料</a>
9、練習：表單的驗證
（1）使用submit送出表單的驗證方法
=使用一個事件 onsubmit事件：當有submit按鈕，點選這個submit時候，觸發onsubmit事件，隻有這個事件傳回true
才會送出表單。
*首先在form标簽上面寫事件 onsubmit事件
==<form action="hello.html" onsubmit="returncheckform();">
==function checkform(){
//非空的校驗
//得到輸入項裡面的值
varusername = document.getElementById("usernameid").value;
varpassword = document.getElementById("passwordid").value;
varemail = document.getElementById("emailid").value;
//alert(username+""+password+" "+email );
if(username== "") {
alert("使用者名為空");
returnfalse;
if(password== "") {
alert("密碼不能為空");
if(email== "") {
alert("郵箱不能為空");
return true;
（2）使用button送出表單的驗證方法
=首先在button按鈕上面綁定一個事件 <input type="button" value="送出"onclick="form2();"/>
=function form2() {
//非空校驗
var password =document.getElementById("passwordid").value;
alert("使用者名不能為空");
}else if(password == "") {
}else if(email == "") {
}else {
//送出表單
varform2 = document.getElementById("form2");
form2.submit();
10、json資料介紹
*JSON（JavaScript Object Notation）JavaScript 對象表示法
*json是一個資料格式，用于資料交換（資料的傳輸格式）格式
*xml：也是資料的格式，用于資料的傳輸，因為xml結構很複雜，xml解析特别麻煩
*在js裡面解析json十分友善，json就是js的一部分
*json的資料格式：
第一種格式：json對象格式 {"名稱1":"值1","名稱2":"值2"}
={"name":"zhangsan","age":30}
=key:類型是string類型，如果不是string類型js會自動轉成string類型。
=value：object類型
第二種格式：json的數組的格式（很多json對象） [json對象1,json對象2]
=[{"name":"zhangsan","age":30},{"name":"lisi","age":40}]
*把這兩種形式混合使用，形成一個更複雜的json
** var people ={
"programmers": [
{"firstName":"Brett", "email": "[email protected]" },
{"firstName":"Jason", "email": "[email protected]" }
]
};
11、js解析json
（1）js解析json對象，json對象.鍵名
**//定義json資料
varpeople ={"firstName": "zhangsan","lastName":"王五", "addr": "shanghai" };
//得到firstName的值
//alert(people.firstName);
//alert(people.addr);
（2）js解析json數組的格式
** //定義數組形式的json
varperson =[
{"firstName":"Brett","email": "[email protected]"},
{"firstName":"Mary","email": "[email protected]"}
];
//擷取數組裡面第二個firstName的值
alert(person[1].firstName);
12、json練習：人員清單展示
*有一個json資料，裡面包含人員的資訊（姓名、年齡），把這些資料顯示到表格裡面
**var person =
[
{"name":"zhangsan","addr": "beijing","age":20},
{"name":"lisi","addr": "tianjin","age":30},
{"name":"wangwu","addr": "nanjing","age":40}
varperson = [
{"name":"zhangsan","addr": "beijing","age":20},
{"name":"lisi","addr": "tianjin","age":30},
{"name":"wangwu","addr": "nanjing","age":40}
];
1、周遊數組
2、依次得到對象裡面的值
3、把得到的值放到表格裡面
functionshow1() {
vartab = "<table border='1'>";
for(vari=0;i<person.length;i++) {
//得到每一行的json對象
varper = person[i]
varname = per.name;
varaddr = per.addr;
varage = per.age;
tab+="<tr><td>"+name+"</td><td>"+addr+"</td><td>"+age+"</td></tr>";
tab+= "</table>";
//alert(tab);
//得到div的标簽對象
vardivv = document.getElementById("divv");
divv.innerHTML= tab;
13、dom裡面對象補充
（1）擷取标簽下面子标簽方法是getElementsByTagName()
（2）擷取節點父節點：使用屬性parentNode
（3）删除标簽 ，标簽不能自己删除自己，要通過父節點删除 使用在父節點上面執行方法removeChild(要删除标簽)
===============================================================================================
今天内容的總結
（7）dom解析标記型文檔的過程（**）
（9）DTHML 是很多技術的簡稱
（10）document對象四個方法
（11）innerHTML屬性 做兩件事情
（12）表單的送出方式
（13）表單的驗證
*按鈕是submit，使用onsubmit事件
* button按鈕驗證
（14）json資料（*********）
*json格式
*js解析json資料
*json資料顯示人員資訊練習
</pre>
本文轉自屠夫章哥 51CTO部落格，原文連結：http://blog.51cto.com/4259297/1668631，如需轉載請自行聯系原作者
![GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)