标签：javaweb
<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>后面
思维导图
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];
}
returnsum;
}
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);
= isNaN()：判断是否是一个数字（NaN表示非数字，isNaN表示问是非数字吗）
这个数字是通过检测它的值是不是数字，如果boolean类型的也当作是一个
数字。
==var s = "aa";
//如果是数字返回 false；如果不是数字返回true
alert(isNaN(s)); //返回true。
=parseInt()：把字符串转化成number类型
==var a1 = "10";
document.write(a1+1);
document.write("<hr/>");
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);
}
==如果通过这个方法得到只是一个标签，返回也是一个对象的数组
可以直接使用数组的下标获取标签的对象（数组的下标从0开始）
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("密码不能为空");
returnfalse;
}
if(email== "") {
alert("邮箱不能为空");
returnfalse;
}
return true;
}
（2）使用button提交表单的验证方法
=首先在button按钮上面绑定一个事件 <input type="button" value="提交"onclick="form2();"/>
=function form2() {
//非空校验
//得到输入项里面的值
varusername = document.getElementById("usernameid").value;
var password =document.getElementById("passwordid").value;
varemail = document.getElementById("emailid").value;
if(username== "") {
alert("用户名不能为空");
}else if(password == "") {
alert("密码不能为空");
}else if(email == "") {
alert("邮箱不能为空");
}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": "brett@newInstance.com" },
{"firstName":"Jason", "email": "jason@servlets.com" }
]
};
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": "brett@newInstance.com"},
{"firstName":"Mary","email": "mary@newInstance.com"}
];
//获取数组里面第二个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(要删除标签)
===============================================================================================
今天内容的总结
（1）js创建函数的两种方式
（2）js函数的重载
（3）js的全局函数（会用）
（4）html绑定事件三种方式
（5）js里面的常用的事件（会用）
**重点 onsubmit
（6）dom是什么
（7）dom解析标记型文档的过程（**）
（8）dom里面的对象document、element、属性、文本、node
（9）DTHML 是很多技术的简称
（10）document对象四个方法
（11）innerHTML属性 做两件事情
（12）表单的提交方式
（13）表单的验证
*按钮是submit，使用onsubmit事件
* button按钮验证
（14）json数据（*********）
*json格式
*js解析json数据
*json数据显示人员信息练习
</pre>
本文出自 “行意天下” 博客，请务必保留此出处http://4259297.blog.51cto.com/4249297/1668631
标签：javaweb
原文地址：http://4259297.blog.51cto.com/4249297/1668631
