一赢笨、JavaScript高級
1.js的函數(shù)
（1）在java里面定義方法
public void/int 方法名稱(參數(shù)列表) {
方法體和返回值;
}
（2）在js里面定義函數(shù)有三種方式
第一種：使用關鍵字 function 方法名稱(參數(shù)列表) { 方法體和返回值 }
* 注意一：參數(shù)列表，不需要寫類型（var）驮吱，直接寫參數(shù)名稱
* 注意二：返回值茧妒，根據(jù)實際需要可以有也可以沒有
* 代碼
function test1() {
alert("123456");
}
//test1();
//實現(xiàn)兩個數(shù)的相加
function add1(a,b) {
var sum = a+b;
return sum;
}
alert(add1(2,3));
第二種：匿名函數(shù)，使用關鍵字function(參數(shù)列表) { 方法體和返回值; }
* 代碼
//第二種定義方式
var test1 = function(a,b) {
return a+b;
}
//調用函數(shù)
alert(test1(3,4));
第三種：動態(tài)函數(shù)（方法體和返回值左冬，包含參數(shù)列表都是通過參數(shù)傳遞進來的）
* 使用js里面的內置對象 new Function("參數(shù)列表","方法體和返回值")
* 代碼
//第三種定義方式
var param = "a,b";
var method = "var sum;sum=a+b;return sum;";
var test2 = new Function(param,method);
//調用函數(shù)
alert(test2(5,6));
2.js的函數(shù)的重載
（1）在java里面存在重載桐筏，方法名稱相同，參數(shù)列表不同
（2）js里面是否存在函數(shù)的重載拇砰？
第一梅忌，在js不存在重載
第二，可以使用js函數(shù)里面arguments數(shù)組模擬重載的效果
（3）模擬重載的效果
* 在js里面有一個數(shù)組arguments除破，保存?zhèn)鬟f進來的參數(shù)牧氮，使用這個數(shù)組模擬重載的效果
* 代碼
//模擬重載的效果
//在js函數(shù)里面有一個數(shù)組 arguments，保存?zhèn)鬟f進來的參數(shù)的
function add1() {
//alert(arguments.length);
//遍歷數(shù)組
/*for(var i=0;i<arguments.length;i++) {
alert(arguments[i]);
}*/
//模擬重載的效果（有幾個參數(shù)瑰枫，實現(xiàn)這幾個參數(shù)的相加）
var sum = 0;
for(var i=0;i<arguments.length;i++) {
sum += arguments[i];
}
return sum;
}
//調用
alert(add1(1,2));
alert(add1(1,2,3));
alert(add1(1,2,3,4));
3.js的事件
（1）什么是事件：在html的元素里面可以觸發(fā)事件調用js里面的函數(shù)
（2）在html的標簽上面如何使用事件
* 有三種方式
* 第一種：使用事件屬性調用js方法
** 代碼
<input type="button" value="第一種方式" onclick="add1();"/>
* 第二種：首先得到要綁定的標簽踱葛，在使用事件的屬性
** 代碼
//第二種方式綁定事件
document.getElementById("buttonid").onclick = add1;
* 第三種：首先得到要綁定的標簽，寫js的代碼
** 代碼
document.getElementById("buttonid1").onclick = function() {
alert("aaaaa");
};
4.js的常用的事件
（1）onload事件和onclick事件
* onload：html頁面在加載時候觸發(fā)事件光坝，調用響應的js方法
** <body onload="test1();">
* onclick：鼠標點擊事件
** <input type="text" onclick="test2();"/>
（2）onfocus事件和onblur事件
* onfocus：獲取焦點
* onblur：失去焦點
（3）onmouseover 鼠標被移到某元素之上
（4）onmouseout 鼠標從某元素移開
（5）onkeypress：點擊鍵盤上面的某個鍵尸诽，調用方法
* <input type="text" id="textid1" onkeypress="key1(event);"/>
* function key1(obj) {
//alert(obj.keyCode);
//如果點擊鍵盤上面的回車鍵 ，調用方法 13
if(obj.keyCode==13) {
alert("key1");
}
}
5.js的dom對象
（1）什么dom：document object model：文檔對象模型
* 文檔：指的是標記型文檔（html盯另、xml）
* 對象：在對象里面有屬性和方法
** 使用dom里面提供的對象里面的屬性和方法性含，對標記型文檔進行操作
* 要想使用dom對象標記型文檔進行操作，首先需要解析標記型文檔（html為例）
** html中包含 標簽鸳惯、屬性商蕴、文本內容
（2）使用dom解析html
* 解析過程：根據(jù)html的層級結構在內存中分配一個樹形結構
* document對象，代表整個文檔
* element對象悲敷，代表標簽
* 屬性對象
* 文本對象
* Node節(jié)點對象究恤，是這些對象的父對象，在找不到想要使用的方法后德，到Node里面找
（3）DHTML的簡介
* 不是一種技術部宿，是很多技術的簡稱。
* 包含的技術：
** html：封裝數(shù)據(jù)
** css：使用屬性和屬性值修改數(shù)據(jù)的樣式
** ECMAScript：語句和語法
** DOM：對標記型文檔進行操作
6.document對象
（1）document對象代表整個文檔
（2）方法
第一個：write()，向頁面輸出內容理张，可以輸出html代碼
* document.write("aa");
document.write("<hr/>");
第二個：getElementById(): 獲取標簽對象赫蛇，通過標簽的id值進行獲取
* var input1 = document.getElementById("textid");
document.write(input1.value);
第三個：getElementsByName(): 根據(jù)標簽里面name屬性的值得到標簽對象，返回數(shù)組
* //getElementsByName()
var inputs1 = document.getElementsByName("name1");
//alert(inputs1.length);
//獲取每個input里面的value值
for(var i=0;i<inputs1.length;i++) {
var input1 = inputs1[i];
//得到value值
alert(input1.value);
}
* 如果只有一個標簽雾叭，使用getElementsByName返回的也是一個數(shù)組悟耘，不需要遍歷，直接使用數(shù)組的下標獲取值
* var inputs2 = document.getElementsByName("name2");
//alert(inputs2.length);
alert(inputs2[0].value);
第四個：getElementsByTagName()：根據(jù)標簽的名稱獲取標簽對象织狐，返回數(shù)組
* var inputs3 = document.getElementsByTagName("input");
//alert(inputs3.length);
//遍歷數(shù)組
for(var i=0;i<inputs3.length;i++) {
var input3 = inputs3[i];
//得到標簽的value
alert(input3.value);
}
* 如果只有一個標簽暂幼，使用getElementsByTagName返回的也是一個數(shù)組，不需要遍歷移迫，直接使用數(shù)組的下標獲取值
var arr = document.getElementsByTagName("input");
alert(arr[0].value);
7.innerHTML屬性
（1）innerHTML屬性不是dom里面屬性
（2）實現(xiàn)什么功能
第一旺嬉，獲取標簽里面的文本內容
** var span1 = document.getElementById("spanid");
alert(span1.innerHTML);
第二，向標簽里面設置內容（可以寫html代碼）
** var div1 = document.getElementById("div1");
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";
8.練習：動態(tài)生成表格
（1）實現(xiàn)的步驟
* 首先創(chuàng)建頁面厨埋，在頁面中有兩個普通輸入項和按鈕（有事件）
* 點擊生成按鈕邪媳，生成對應的表格
** 首先得到輸入的行和列
** 根據(jù)行和列生成表格
*** 循環(huán)行 <tr>
*** 在行里面循環(huán)單元格 <td>
（2）代碼
//實現(xiàn)生成表格
function add1() {
//得到輸入的行和列
var hang = document.getElementById("hid").value;
var lie = document.getElementById("lid").value;
//alert(hang+" :: "+lie);
var tab = "<table border='1' cellpadding='10'>";
//生成行
for(var i=1;i<=hang;i++) {
tab += "<tr>";
//生成單元格
for(var j=1;j<=lie;j++) {
tab += "<td>aaaaa</td>";
}
tab += "</tr>";
}
tab += "</table>";
//alert(tab);
//獲取div標簽
var div1 = document.getElementById("div1");
//向div里面寫html代碼
div1.innerHTML = tab;
}
9.表單的提交
（1）在html中寫form標簽，提交方式
提交表單有三種方式
第一種方式：在form標簽里面荡陷，寫提交按鈕 <input type="submit"/>
= 代碼
<form method="get">
username: <input type="text" name="username"/>
<br/>
password: <input type="password" name="password"/>
<br/>
<input type="submit" value="提交"/>
</form>
第二種方式：在form標簽里面雨效，寫普通按鈕 <input type="button"/>
= 代碼
//使用button進行表單的提交
function form01() {
//得到form標簽
var form01 = document.getElementById("form01");
//提交form表單
form01.submit();
}
第三種方式：使用超鏈接提交數(shù)據(jù)
* <a href="要鏈接的地址?參數(shù)名稱1=參數(shù)的值1&參數(shù)名稱2=參數(shù)的值2">超鏈接</a>
* <a href="15-表單的提交方式二.html?username=ccc&password=123456">超鏈接提交數(shù)據(jù)</a>
10.表單校驗
（1）規(guī)范數(shù)據(jù)的輸入的格式
（2）如何進行表單的校驗
第一，使用submit進行表單提交废赞，進行表單校驗
* 使用事件 onsubmit事件徽龟，寫在form標簽里面
<form method="get" onsubmit="return checkForm();">
* 如何return返回的值true可以提交表單，如果返回false不會提交表單
= 代碼
//submit表單的校驗
function checkForm() {
//判斷用戶名不能為空
var username = document.getElementById("usernameid").value;
var password = document.getElementById("passwordid").value;
if(username == "") {
alert("用戶名不能為空");
return false;
}
if(password == "") {
alert("密碼不能為空");
return false;
}
return true;
}
第二唉地，使用button進行表單校驗
= 代碼
//使用button提交表單顿肺，進行校驗
function form01() {
//得到輸入項里面的值，判斷值是否為空渣蜗，如果為空不進行提交
var username = document.getElementById("usernameid").value;
var password = document.getElementById("passwordid").value;
//如果值為空，不進行提交
if(username == "") {
alert("用戶名不能為空");
} else if(password == "") {
alert("密碼不能為空");
} else {
//得到form標簽
var form01 = document.getElementById("form01");
form01.submit();
}
}
11.json的簡介
（1）JavaScript Object Notation旷祸，JavaScript 對象表示法耕拷。json是數(shù)據(jù)的交換格式，比xml更加輕巧托享。
json是js的原生的格式骚烧，通過js操作json不需要依賴其他東西，直接對json格式進行操作闰围。
（2）json數(shù)據(jù)格式
* json有兩種數(shù)據(jù)格式
第一種：json的對象的格式
* 寫法 {json數(shù)據(jù)的名稱1:json數(shù)據(jù)的值1,json數(shù)據(jù)的名稱2:json數(shù)據(jù)的值2.....}
** 類似于key-value形式
** 名稱和值之間使用冒號隔開赃绊，多個值之間使用逗號隔開
** json數(shù)據(jù)的名稱是字符串的類型，json數(shù)據(jù)的值 string, number, object, array, true, false, null
** 具體數(shù)據(jù)的格式 {"name":"zhangsan","age":20,"addr":"nanjing"}
第二種：json的數(shù)組的格式
* 寫法 [json對象1,json對象2........]
** 在數(shù)組里面有多個json對象羡榴，多個json對象之間使用逗號進行隔開
** 具體數(shù)據(jù)的格式 [{"name":"lucy","age":20},{"name":"mary","age":30}]
（3）可以使用json的這兩種格式組成更加復雜json的格式
* 復雜的格式 {"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}
12.js解析json
（1）js解析json的對象的數(shù)據(jù)格式
* 通過json對象數(shù)據(jù)格式里面的name的名稱得到name對應的值
* 代碼
//js解析json的對象格式的數(shù)據(jù)
var json1 = {"username":"lucy","age":20,"addr":"nanjing"};
//對json的對象格式數(shù)據(jù)進行操作
document.write(json1.username);
document.write("<br/>");
document.write(json1.age);
document.write("<br/>");
document.write(json1.addr);
（2）js解析json的數(shù)組的數(shù)據(jù)格式
* 根據(jù)數(shù)組的下標得到json對象碧查，解析json對象，根據(jù)數(shù)據(jù)的名稱得到值
* 遍歷json數(shù)組，得到json數(shù)組里面每個json對象忠售，解析每個json對象传惠，根據(jù)json對象的數(shù)據(jù)
的名稱得到值
* 代碼
//js解析json數(shù)組格式的數(shù)據(jù)
var json2 = [{"username":"zhangsan","age":20,"addr":"beijing"},
{"username":"lisi","age":30,"addr":"tianjin"},
{"username":"wangnwu","age":40,"addr":"nanjing"}];
//js操作數(shù)組，遍歷數(shù)組稻扬，根據(jù)數(shù)組的下標得到值
//遍歷json數(shù)組格式卦方，得到的是一個json對象，解析json對象（根據(jù)名稱得到值）
//得到第二個json對象里面的age的值 數(shù)組下標從0開始的
document.write(json2[1].age);
//得到第一個json對象里面的addr的值
document.write("<br/>");
document.write(json2[0].addr);
//遍歷json數(shù)組的格式
document.write("<hr/>");
for(var i=0;i<json2.length;i++) {
//得到數(shù)組里面的每一個json對象
var person = json2[i];
//得到每個對象里面的值
var username = person.username;
var age = person.age;
var addr = person.addr;
document.write("username:"+username+" ; age:"+age+" ; addr:"+addr);
document.write("<br/>");
}
13.json練習：人員信息的顯示
（1）把多個人員的信息存到json的數(shù)據(jù)格式里面泰佳，通過js解析json的數(shù)據(jù)格式盼砍，把所有的人員顯示到頁面的表格里面。
（2）[{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}]
（3）代碼
//創(chuàng)建json的數(shù)據(jù)的格式逝她，用于存儲人員的信息
var persons = [{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}];
//使用js解析persons格式浇坐，把這些人員信息顯示到頁面上
//遍歷json的數(shù)組，得到每個人員的信息
//生成表格 汽绢，把數(shù)據(jù)放到表格里面吗跋，把表格顯示到頁面上
function showData() {
var tab = "<table border='1' cellpadding='10'>";
//添加表頭
tab += "<tr><th>姓名</th><th>年齡</th><th>地址</th></tr>";
for(var i=0;i<persons.length;i++) {
//得到數(shù)組里面的每個json對象
var person = persons[i];
//得到每個json對象里面值
var name = person.name;
var age = person.age;
var addr = person.addr;
//生成表格
tab += "<tr><td>"+name+"</td><td>"+age+"</td><td>"+addr+"</td></tr>";
}
tab += "</table>";
//alert(tab);
//把table表格的代碼顯示到頁面上，使用innerHTML屬性
//得到div標簽
var div1 = document.getElementById("div1");
//向div里面寫table代碼
div1.innerHTML = tab;
}
