Day3
JavaScript
1. js的函数
定义方式:
方式 | 原理 | 代码 | 注意 |
第一种 | 使用关键字 function 方法名称(参数列表) { 方法体和返回值 } | function test1() { alert("123456"); } test1(); | 参数列表,不需要写类型(var),直接写参数名称 返回值,根据实际需要可以有也可以没有 |
第二种 | 匿名函数,使用关键字function(参数列表) { 方法体和返回值; } | Var test1 = function(a,b) { return a+b; } alert(test1(3,4)); |
|
第三种 | 动态函数(方法体和返回值,包含参数列表都是通过参数传递进来的) | var param = "a,b"; var method = "var sum;sum=a+b;return sum;"; var test2 = new Function(param,method); alert(test2(5,6)); |
|
2. js的函数重载
(1) 在js不存在重载
(2) 可以使用js函数里面arguments数组模拟重载的效果
(3) 模拟重载的效果:
在js函数里面有一个数组arguments,保存传递进来的参数的
代码:
function add1() {
//模拟重载的效果(有几个参数,实现这几个参数的相加)
var sum = 0;
for(vari=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里面的函数叫js的事件
(2) 在html的标签上面使用事件:
方式 | 原理 | 代码 |
第一种 | 使用事件属性调用js方法 | <input type="button" value="第一种方式" οnclick="add1();"/> |
第二种 | 首先得到要绑定的标签,在使用事件的属性 | document.getElementById("buttonid").onclick = add1; |
第三种 | 首先得到要绑定的标签,写js的代码 | document.getElementById("buttonid1").onclick = function() { alert("aaaaa"); }; |
4. js的常用的事件
事件 | 用法 | 代码 |
onload | html页面在加载时候触发事件,调用响应的js方法 | <body οnlοad="test1();"> |
onclick | 鼠标点击事件 | <input type="text" οnclick="test2();"/> |
onfocus | 获取焦点 |
|
onblur | 失去焦点 |
|
onmouseover | 鼠标被移到某元素之上 |
|
onmouseout | 鼠标从某元素移开 |
|
onkeypress | 击键盘上面的某个键,调用方法 | <input type="text" id="textid1" οnkeypress="key1(event);"/> function key1(obj) { //如果点击键盘上面的回车键 ,调用方法 13 if(obj.keyCode==13) { alert("key1"); } } |
5. js的dom对象
(1) dom:document object model:文档对象模型
(2) 使用dom解析html
解析过程:根据html的层级结构在内存中分配一个树形结构
document对象,代表整个文档
element对象,代表标签
attribute属性对象
text文本对象
Node节点对象,是这些对象的父对象,在找不到想要使用的方法,到Node里面找
(3) DHTML的简介
不是一种技术,是很多技术的简称。
包含:
html:封装数据
css:使用属性和属性值修改数据的样式
ECMAScript:语句和语法
DOM:对标记型文档进行操作
6. document对象
(1) document对象代表整个文档
(2) 方法:
方法 | 用途 | 代码 |
write() | 向页面输出内容,可以输出html代码 | document.write("<hr/>") document.write("aa") |
getElementById() | 获取标签对象,通过标签的id值进行获取 | document.getElementById("textid").value |
getElementsByName() | 根据标签里面name属性的值得到标签对象,返回数组 |
|
getElementsByTagName() | 根据标签的名称获取标签对象,返回数组 |
|
7. innerHTML属性
(1) innerHTML属性不是dom里面属性
(2) 实现的功能:
a) 获取标签里面的文本内容
b) 向标签里面设置内容(可以写html代码)
8. 表单的提交
方式 | 代码 |
在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() { //得到form标签 var form01 = document.getElementById("form01"); //提交form表单 form01.submit(); } |
使用超链接提交数据 | <a href="要链接的地址?参数名称1=参数的值1&参数名称2=参数的值2">超链接</a> <a href="15-表单的提交方式二.html?username=ccc&password=123456">超链接提交数据</a> |
9. 表单校验
输入的格式 | 原理 | 代码 |
使用submit进行表单提交,进行表单校验 | 使用事件 onsubmit事件,写在form标签里面 <form method="get" οnsubmit="return checkForm();"> | 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(); } } |
10. json的简介
(1) JavaScript Object Notation,JavaScript 对象表示法。json是数据的交换格式,比xml更加轻巧。
json是js的原生的-格式,通过js操作json不需要依赖其他东西,直接对json格式进行操作。
(2) json数据格式
第一种:json的对象的格式
写法 {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}
类似于key-value形式
名称和值之间使用冒号隔开,多个值之间使用逗号隔开
json数据的名称是字符串的类型,json数据的值 string,number, object, array, true, false, null
具体数据的格式{"name":"zhangsan","age":20,"addr":"nanjing"}
第二种:json的数组的格式
写法 [json对象1,json对象2........]
在数组里面有多个json对象,多个json对象之间使用逗号进行隔开
具体数据的格式[{"name":"lucy","age":20},{"name":"mary","age":30}]
(3) 两种格式组成更加复杂json的格式
{"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}
11. js解析json
(1) js解析json的对象的数据格式
代码:
var json1 ={"username":"lucy","age":20,"addr":"nanjing"};
document.write(json1.username);
document.write(json1.age);
document.write(json1.addr);
(2) js解析json的数组的数据格式
代码:
//js解析json数组格式的数据
var json2=[{"username":"zhangsan","age":20,"addr":"beijing"},
{"username":"lisi","age":30,"addr":"tianjin"},
{"username":"wangnwu","age":40,"addr":"nanjing"}];
//js操作数组,遍历数组,根据数组的下标得到值
//遍历json数组格式,得到的是一个json对象,解析json对象(根据名称得到值)
//得到第二个json对象里面的age的值 数组下标从0开始的
document.write(json2[1].age);
//得到第一个json对象里面的addr的值
document.write("<br/>");
document.write(json2[0].addr);
//遍历json数组的格式
document.write("<hr/>");
for(vari=0;i<json2.length;i++) {
//得到数组里面的每一个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/>");
}