1、js的函数
(2)在js里面定义函数有三种方式
第一种:使用关键字 function 方法名称(参数列表) { 方法体和返回值 }
* 注意一:参数列表,不需要写类型(var),直接写参数名称
* 注意二:返回值,根据实际需要可以有也可以没有
* 代码
function test1() {
alert("123456");
}
//test1();
//实现两个数的相加
function add1(a,b) {
var sum = a+b;
return sum;
}
alert(add1(2,3));
第二种:匿名函数,使用关键字function(参数列表) { 方法体和返回值; }
//第二种定义方式
var test1 = function(a,b) {
return a+b;
}
alert(test1(3,4));
第三种:动态函数(方法体和返回值,包含参数列表都是通过参数传递进来的)
* 使用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));
2、js的函数的重载
(1)在java里面存在重载,方法名称相同,参数列表不同
(2)js里面是否存在函数的重载?
第一,在js不存在重载
第二,可以使用js函数里面arguments数组模拟重载的效果
(3)模拟重载的效果
* 在js里面有一个数组arguments,保存传递进来的参数,使用这个数组模拟重载的效果
//模拟重载的效果
//在js函数里面有一个数组 arguments,保存传递进来的参数的
function add1() {
//alert(arguments.length);
//遍历数组
/*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;
}
console.log(add1(1,2));
console.log(add1(1,2,3));
console.log(add1(1,2,3,4));
3、js的事件
(1)什么是事件:在html的元素里面可以触发事件调用js里面的函数
(2)在html的标签上面如何使用事件
* 有三种方式
* 第一种:使用事件属性调用js方法
<input type="button" value="第一种方式" οnclick="add1();"/>
* 第二种:首先得到要绑定的标签,在使用事件的属性
//第二种方式绑定事件
document.getElementById("buttonid").onclick = add1;
//没加就是直接打印提示.
//'加了()就是把函数的结果返回给调用者'
* 第三种:首先得到要绑定的标签,写js的代码
document.write('<input type="button" id="buttonid" value="第三种方式"/>');
document.getElementById("buttonid").onclick = function() {
alert("aaaaa");
};
4、js的常用的事件
(1)onload事件和onclick事件
* onload:html页面在加载时候触发事件,调用响应的js方法
** <body οnlοad="test1();">
* onclick:鼠标点击事件
** <input type="text" οnclick="test2();"/>
(2)onfocus事件和onblur事件
* onfocus:获取焦点
* onblur:失去焦点
(3)onmouseover 鼠标被移到某元素之上
(4)onmouseout 鼠标从某元素移开
(5)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对象
(1)什么dom:document object model:文档对象模型
* 文档:指的是标记型文档(html、xml)
* 对象:在对象里面有属性和方法
** 使用dom里面提供的对象里面的属性和方法,对标记型文档进行操作
* 要想使用dom对象标记型文档进行操作,首先需要解析标记型文档(html为例)
** html中包含 标签、属性、文本内容
(2)使用dom解析html
* 解析过程:根据html的层级结构在内存中分配一个树形结构
* document对象,代表整个文档
* element对象,代表标签
* 属性对象
* 文本对象
* Node节点对象,是这些对象的父对象,在找不到想要使用的方法,到Node里面找
(3)DHTML的简介
* 不是一种技术,是很多技术的简称。
* 包含的技术:
** html:封装数据
** css:使用属性和属性值修改数据的样式
** ECMAScript:语句和语法
** DOM:对标记型文档进行操作
DHTML是Dynamic HTML的简称。DHTML不是一种技术、标准或规范,只是一种将目前已有的网页技术、语言标准整合运用,制作出能实时变换页面元素效果的网页设计概念。简单来说,三句话:
** DHTML 是一种使 HTML 页面具有动态特性的艺术
** DHTML 是一种创建动态和交互 WEB 站点的技术集
** 对大多数人来说,DHTML 意味着 HTML、CSS和 JavaScript 的组合
)
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(): 根据标签里面name属性的值得到标签对象,返回数组
* //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返回的也是一个数组,不需要遍历,直接使用数组的下标获取值
* var inputs2 = document.getElementsByName("name2");
//alert(inputs2.length);
alert(inputs2[0].value);
第四个:getElementsByTagName():根据标签的名称获取标签对象,返回数组
* var inputs3 = document.getElementsByTagName("input");
//alert(inputs3.length);
//遍历数组
for(var i=0;i<inputs3.length;i++) {
var input3 = inputs3[i];
//得到标签的value
alert(input3.value);
}
* 如果只有一个标签,使用getElementsByTagName返回的也是一个数组,不需要遍历,直接使用数组的下标获取值
var arr = document.getElementsByTagName("input");
alert(arr[0].value);
7、innerHTML属性
(1)innerHTML属性不是dom里面属性
第一,获取标签里面的文本内容
** var span1 = document.getElementById("spanid");
console.log(span1.innerHTML) //哈哈呵呵
document.write('<span id="spanid">哈哈呵呵</span>');
var span1 = document.getElementById("spanid");
console.log(span1.innerHTML) //哈哈呵呵
第二,向标签里面设置内容(可以写html代码)
** var div1 = document.getElementById("div1");
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";
//注意不用按回车生成表格
//通过方法触发设置写html代码
document.write('<div id="div1">这是表格生成的位置</div> <input type="button" value="add" onclick="add1();"/>');
var span1 = document.getElementById("spanid");
function add1() {
var div1 = document.getElementById("div1");
//'注意不用按回车生成表格'
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";
}
add1()
<div id="div1"></div>
<input type="button" value="add" οnclick="add1();"/>
</body>
<script type="text/javascript">
//获取标签里面的文本内容
var span1 = document.getElementById("spanid");
//alert(span1.innerHTML);
function add1() {
var div1 = document.getElementById("div1");
//'注意不用按回车生成表格'
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";
}
</script>
</html>
*效果
8、练习:动态生成表格
(1)实现的步骤
* 首先创建页面,在页面中有两个普通输入项和按钮(有事件)
* 点击生成按钮,生成对应的表格
** 首先得到输入的行和列
** 根据行和列生成表格
*** 循环行 <tr>
*** 在行里面循环单元格 <td>
(2)代码
//实现生成表格
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、表单的提交
//所有的表单标签有name属性.
//所以的标签有id属性.
(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"/>
*代码
<body>
<!-- 表单的提交方式二 -->
<form id="form01" method="get">
username: <input type="text" name="username"/>
<br/>
password: <input type="password" name="password"/>
<br/>
<input type="button" value="提交" onclick="form01();"/>
</form>
</body>
//使用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>
10、表单校验
默认提交为true
(1)规范数据的输入的格式
(2)如何进行表单的校验
第一,使用submit进行表单提交,进行表单校验
* 使用事件 onsubmit事件,写在form标签里面
<form method="get" οnsubmit="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)json :JavaScript Object Natation: javaScript对象表示法.
JavaScript Object Notation,JavaScript 对象表示法。json是数据的交换格式,比xml更加轻巧。
json是js的原生的格式,通过js操作json不需要依赖其他东西,直接对json格式进行操作。
(2)json两种数据格式
就是相当于Map键值对 的集合
* 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的这两种格式组成更加复杂json的格式
* 复杂的格式 {"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}
12、js解析json
(1)js解析json的对象的数据格式
* 通过json对象数据格式里面的name的名称得到name对应的值
* 代码
//js解析json的对象格式的数据
var json1 = {"username":"lucy","age":20,"addr":"nanjing"};
//对json的对象格式数据进行操作
document.write(json1.username);
document.write("<br/>");
document.write(json1.age);
document.write("<br/>");
document.write(json1.addr);
(2)js解析json的数组的数据格式
* 根据数组的下标得到json对象,解析json对象,根据数据的名称得到值
* 遍历json数组,得到json数组里面每个json对象,解析每个json对象,根据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(var i=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/>");
}
13、json练习:人员信息的显示
(1)把多个人员的信息存到json的数据格式里面,通过js解析json的数据格式,把所有的人员显示到页面的表格里面。
(2)[{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}]
(3)代码
//创建json的数据的格式,用于存储人员的信息
var persons = [{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}];
//使用js解析persons格式,把这些人员信息显示到页面上
//遍历json的数组,得到每个人员的信息
//生成表格 ,把数据放到表格里面,把表格显示到页面上
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++) {
//得到数组里面的每个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;
}
效果:
。。。