day03-JavaScript高级
1、js的函数定义(三种方式)
一、使用关键字 function 方法名称(参数列表) { 方法体和返回值 }
注意1:参数列表中的参数不需要写类型(var),直接写参数名称
注意2:返回值,根据实际需要可以有也可以没有
例1:function test1() { alert("123456");}//定义函数
test1();//调用函数test1()
例2:function add1(a,b) {var sum = a+b; return sum;}
alert(add1(2,3)); //调用函数add1()
一、使用关键字 function 方法名称(参数列表) { 方法体和返回值 }
注意1:参数列表中的参数不需要写类型(var),直接写参数名称
注意2:返回值,根据实际需要可以有也可以没有
例1:function test1() { alert("123456");}//定义函数
test1();//调用函数test1()
例2:function add1(a,b) {var sum = a+b; return sum;}
alert(add1(2,3)); //调用函数add1()
二、匿名函数,使用关键字function(参数列表) { 方法体和返回值; }
例: var test1 = function(a,b) { return a+b;}
alert(test1(3,4)); //调用test1()
例: var test1 = function(a,b) { return a+b;}
alert(test1(3,4)); //调用test1()
三、动态函数(方法体和返回值、参数列表都由参数传递)
释:用js内置对象 new Function("参数列表","方法体和返回值")
例:var param = "a,b";
var method = "var sum;sum=a+b;return sum;";
var test2 = new Function(param,method);
alert(test2(5,6)); //调用函数test2()
释:用js内置对象 new Function("参数列表","方法体和返回值")
例:var param = "a,b";
var method = "var sum;sum=a+b;return sum;";
var test2 = new Function(param,method);
alert(test2(5,6)); //调用函数test2()
2、js的函数重载(js中不存在重载,但可通过js函数的arguments数组模拟重载的效果)
(1)原理:js里面有一个数组arguments用来保存传递进来的参数,利用此数组可模拟重载的效果
(2)模拟重载的效果
function add1() {
for(var i=0;i<arguments.length;i++) {
alert(arguments[i]);
}
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));
(1)原理:js里面有一个数组arguments用来保存传递进来的参数,利用此数组可模拟重载的效果
(2)模拟重载的效果
function add1() {
for(var i=0;i<arguments.length;i++) {
alert(arguments[i]);
}
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的标签上可通过触发事件调用js里面的函数
(2)使用事件(三种方式)
1:使用事件属性调用js方法
例:<input type="button" value="第一种方式" οnclick="add1();"/>
(1)事件作用:在html的标签上可通过触发事件调用js里面的函数
(2)使用事件(三种方式)
1:使用事件属性调用js方法
例:<input type="button" value="第一种方式" οnclick="add1();"/>
2:获取绑定的标签,再使用事件的属性
例:document.getElementById("buttonid").onclick = add1;
例:document.getElementById("buttonid").onclick = add1;
3:首先得到要绑定的标签,写js的代码
例:document.getElementById("buttonid1").onclick = function() {
alert("aaaaa");};
例:document.getElementById("buttonid1").onclick = function() {
alert("aaaaa");};
4、js的常用的事件
(1)onload事件和onclick事件
onload:html页面加载时触发事件 例:<body οnlοad="test1();">
onclick:鼠标点击事件 例:<input type="text" οnclick="test2();"/>
(1)onload事件和onclick事件
onload:html页面加载时触发事件 例:<body οnlοad="test1();">
onclick:鼠标点击事件 例:<input type="text" οnclick="test2();"/>
(2)其他事件
onfocus:获取焦点
onblur:失去焦点
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
onkeypress:键盘按下触发
例: <input type="text" id="textid1" οnkeypress="key1(event);"/>
function key1(obj) {
alert(obj.keyCode);//若按下回车键,取得其对应值13
if(obj.keyCode==13) { alert("key1");}
}
onfocus:获取焦点
onblur:失去焦点
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
onkeypress:键盘按下触发
例: <input type="text" id="textid1" οnkeypress="key1(event);"/>
function key1(obj) {
alert(obj.keyCode);//若按下回车键,取得其对应值13
if(obj.keyCode==13) { alert("key1");}
}
5、js的dom对象(document object model:文档对象模型)
(1)概念 文档:指的是标记型文档(html、xml)
对象:在对象里面有属性和方法
(2)作用 使用dom里面提供对象的属性和方法,对标记型文档进行操作(先解析)
(3)使用dom解析标记型文档html(html中包含 标签、属性、文本内容)
解析过程:根据html的层级结构在内存中分配一个树形结构
document对象,代表整个文档
element对象,代表标签
attribute属性对象
text文本对象
Node节点对象,是这些对象的父对象,在找不到想要使用的方法,到Node里面找
(1)概念 文档:指的是标记型文档(html、xml)
对象:在对象里面有属性和方法
(2)作用 使用dom里面提供对象的属性和方法,对标记型文档进行操作(先解析)
(3)使用dom解析标记型文档html(html中包含 标签、属性、文本内容)
解析过程:根据html的层级结构在内存中分配一个树形结构
document对象,代表整个文档
element对象,代表标签
attribute属性对象
text文本对象
Node节点对象,是这些对象的父对象,在找不到想要使用的方法,到Node里面找
(4)DHTML简介(很多技术的统称)
包含技术有:html(封装数据) css(使用属性和属性值修改数据的样式)
ECMAScript(语句和语法) DOM:对标记型文档进行操作
包含技术有:html(封装数据) css(使用属性和属性值修改数据的样式)
ECMAScript(语句和语法) DOM:对标记型文档进行操作
6、document对象(代表整个文档)
(1)主要方法
1.write() 向页面输出内容,可以输出html代码
例:document.write("aa"); 例: document.write("<hr/>");
(1)主要方法
1.write() 向页面输出内容,可以输出html代码
例:document.write("aa"); 例: document.write("<hr/>");
2.getElementById() 通过标签的id值获取标签对象
例:var input1 = document.getElementById("textid");
document.write(input1.value);
例:var input1 = document.getElementById("textid");
document.write(input1.value);
3:getElementsByName(): 根据标签name属性值得到多个标签对象的数组
例:var inputs1 = document.getElementsByName("name1");
for(var i=0;i<inputs1.length;i++) {
var input1 = inputs1[i];
alert(input1.value);
}
注意:若只有一个标签,该方法返回的仍是一个数组,但可直接使用数组的下标获取值
例:var inputs2 = document.getElementsByName("name2");
alert(inputs2[0].value);
例:var inputs1 = document.getElementsByName("name1");
for(var i=0;i<inputs1.length;i++) {
var input1 = inputs1[i];
alert(input1.value);
}
注意:若只有一个标签,该方法返回的仍是一个数组,但可直接使用数组的下标获取值
例:var inputs2 = document.getElementsByName("name2");
alert(inputs2[0].value);
4:getElementsByTagName():根据标签的名称获取标签对象,返回数组
例:var inputs3 = document.getElementsByTagName("input");
for(var i=0;i<inputs3.length;i++) {
alert(inputs3[i].value);
}
注意:若只有一个标签,该方法返回的仍是一个数组,但可直接使用数组的下标获取值
例:var arr = document.getElementsByTagName("input");
alert(arr[0].value);
例:var inputs3 = document.getElementsByTagName("input");
for(var i=0;i<inputs3.length;i++) {
alert(inputs3[i].value);
}
注意:若只有一个标签,该方法返回的仍是一个数组,但可直接使用数组的下标获取值
例:var arr = document.getElementsByTagName("input");
alert(arr[0].value);
7、innerHTML属性(不是dom里面属性)
功能1,获取标签里面的文本内容
例:var span1 = document.getElementById("spanid");
alert(span1.innerHTML);
功能1,获取标签里面的文本内容
例:var span1 = document.getElementById("spanid");
alert(span1.innerHTML);
功能2,向标签内设置内容(可以写html代码)(会覆盖原标签内容)
例:var div1 = document.getElementById("div1");
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";
例:var div1 = document.getElementById("div1");
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";
8、练习:动态生成表格(点击生成按钮,根据行列数生成对应的表格)
(1)实现的步骤
1.创建页面,在页面中包含两个普通输入项和按钮(有事件)
2.首先得到输入的行和列
3.根据行和列生成表格
4.循环行 <tr>
5.在行里面循环单元格 <td>
(1)实现的步骤
1.创建页面,在页面中包含两个普通输入项和按钮(有事件)
2.首先得到输入的行和列
3.根据行和列生成表格
4.循环行 <tr>
5.在行里面循环单元格 <td>
(2)代码实现
function add1() {
var hang = document.getElementById("hid").value;
var lie = document.getElementById("lid").value;
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>";
var div1 = document.getElementById("div1");
div1.innerHTML = tab;
}
function add1() {
var hang = document.getElementById("hid").value;
var lie = document.getElementById("lid").value;
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>";
var div1 = document.getElementById("div1");
div1.innerHTML = tab;
}
9、表单的提交(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"/>
例:function form01() {
var form01 = document.getElementById("form01");
form01.submit();
}
第一种: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"/>
例:function form01() {
var form01 = document.getElementById("form01");
form01.submit();
}
第三种:使用超链接提交数据
释:<a href="要链接的地址?参数名称1=参数的值1&参数名称2=参数的值2">超链接</a>
例:<a href="15-表单的提交方式二.html?username=ccc&password=123456">超链接提交数据</a>
释:<a href="要链接的地址?参数名称1=参数的值1&参数名称2=参数的值2">超链接</a>
例:<a href="15-表单的提交方式二.html?username=ccc&password=123456">超链接提交数据</a>
10、表单校验(规范数据的输入格式)
(2)表单校验步骤
第一种:submit提交表单校验。(在form标签里面,使用onsubmit事件)
释:<form method="get" οnsubmit="return checkForm();"> return返回值为true才提交表单
例: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;
}
(2)表单校验步骤
第一种:submit提交表单校验。(在form标签里面,使用onsubmit事件)
释:<form method="get" οnsubmit="return checkForm();"> return返回值为true才提交表单
例: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提交表单的校验
释:function form01() {
例:var username = document.getElementById("usernameid").value;
var password = document.getElementById("passwordid").value;
if(username == "") {
alert("用户名不能为空");
} else if(password == "") {
alert("密码不能为空");
} else {
var form01 = document.getElementById("form01");
form01.submit();
}
}
11、json简介(JavaScript Object Notation :JavaScript对象表示法)
(1)json是数据的交换格式,比xml更加轻巧。
json是js的原生的格式,可通过js直接操作json格式数据,不需要依赖其他东西。
(2)json数据格式(两种)
1.:json的对象格式 {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}
说明1:类似于key-value形式
2:名称和值之间使用冒号隔开,多个值之间使用逗号隔开
3:json数据的名称是字符串类型,json数据值类型string, number, object, array, true, false, null
例:{"name":"zhangsan","age":20,"addr":"nanjing"}
释:function form01() {
例:var username = document.getElementById("usernameid").value;
var password = document.getElementById("passwordid").value;
if(username == "") {
alert("用户名不能为空");
} else if(password == "") {
alert("密码不能为空");
} else {
var form01 = document.getElementById("form01");
form01.submit();
}
}
11、json简介(JavaScript Object Notation :JavaScript对象表示法)
(1)json是数据的交换格式,比xml更加轻巧。
json是js的原生的格式,可通过js直接操作json格式数据,不需要依赖其他东西。
(2)json数据格式(两种)
1.:json的对象格式 {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}
说明1:类似于key-value形式
2:名称和值之间使用冒号隔开,多个值之间使用逗号隔开
3:json数据的名称是字符串类型,json数据值类型string, number, object, array, true, false, null
例:{"name":"zhangsan","age":20,"addr":"nanjing"}
2.:json的数组格式 [json对象1,json对象2........]
说明:在数组里面有多个json对象,多个json对象之间使用逗号进行隔开
例:[{"name":"lucy","age":20},{"name":"mary","age":30}]
(3)可以使用json的这两种格式组成更加复杂json的格式
例:{"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}
说明:在数组里面有多个json对象,多个json对象之间使用逗号进行隔开
例:[{"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对象的数据格式(由json对象数据格式里的name得到name对应的值)
例:var json1 = {"username":"lucy","age":20,"addr":"nanjing"};
document.write(json1.username+"<br/>");
document.write(json1.age+"<br/>");
document.write(json1.addr);
(1)js解析json对象的数据格式(由json对象数据格式里的name得到name对应的值)
例:var json1 = {"username":"lucy","age":20,"addr":"nanjing"};
document.write(json1.username+"<br/>");
document.write(json1.age+"<br/>");
document.write(json1.addr);
(2)js解析json的数组的数据格式
释:遍历json数组,得到json数组每个json对象,解析每个json对象,根据对象的数据名称得到值。
例:var json2 = [{"username":"zhangsan","age":20,"addr":"beijing"},
{"username":"lisi","age":30,"addr":"tianjin"},
{"username":"wangnwu","age":40,"addr":"nanjing"}];
document.write(json2[1].age+""<br/>""); //得到第二个json对象里面的age对应值
document.write(json2[0].addr+"<br/>"); //得到第一个json对象里面的addr对应值
for(var i=0;i<json2.length;i++) {
var person = json2[i];
var username = person.username;
var age = person.age;
var addr = person.addr;
document.write("username:"+username+" ;age:"+age+" ;addr:"+addr+"<br/>");
}
释:遍历json数组,得到json数组每个json对象,解析每个json对象,根据对象的数据名称得到值。
例:var json2 = [{"username":"zhangsan","age":20,"addr":"beijing"},
{"username":"lisi","age":30,"addr":"tianjin"},
{"username":"wangnwu","age":40,"addr":"nanjing"}];
document.write(json2[1].age+""<br/>""); //得到第二个json对象里面的age对应值
document.write(json2[0].addr+"<br/>"); //得到第一个json对象里面的addr对应值
for(var i=0;i<json2.length;i++) {
var person = json2[i];
var username = person.username;
var age = person.age;
var addr = person.addr;
document.write("username:"+username+" ;age:"+age+" ;addr:"+addr+"<br/>");
}
13、json练习:人员信息的显示
要求:把多个人员的信息存到json的数据格式里面,通过js解析json的数据格式,把所有的人员显示到页面的表格里面。
例:var persons = [{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}];
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++) {
var person = persons[i];
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>";
var div1 = document.getElementById("div1");
div1.innerHTML = tab;
}
要求:把多个人员的信息存到json的数据格式里面,通过js解析json的数据格式,把所有的人员显示到页面的表格里面。
例:var persons = [{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}];
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++) {
var person = persons[i];
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>";
var div1 = document.getElementById("div1");
div1.innerHTML = tab;
}