一，js的函数
1. 在java里面定义方法
public void/int 方法名称(参数列表) {
方法体和返回值;
}
2. 在js里面定义函数有三种方式
第一种：使用关键字 function 方法名称(参数列表) {方法体和返回值}
· 注意一：参数列表，不需要写类型(var)，直接写参数名称
· 注意二：返回值，根据实际需要可以有也可以没有
代码示例：
//实现2个数相加
function add1(a,b) {
var sum = a+b;
return sum;
}
add1(2,3);
第二种：匿名函数，使用关键字function(参数列表) {方法体和返回值;}
代码示例：
var test1 = function(a,b) {
return a+b;
}
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);
test2(5,6);
二，js的函数的重载
1. 在java里面存在重载，方法名称相同，参数列表不同
2. js里面是否存在函数的重载？
首先，在js里面不存在函数的重载。
但是，可以使用js函数里面arguments数组模拟重载的效果
3. 模拟重载的效果
代码示例：
//在js函数里有一个数组arguments，保存传递进来的参数
function add1(){
var sum=0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
return sum
}
三，js的事件
1. 什么是事件：在html的元素里面可以出发事件调用js里面的函数
2. 在html的标签上有三种方法使用事件：
· 第一种：使用事件属性调用js方法
代码示例：
<input type="button" value="第一种方法" onclick="add1();"/>
· 第二种：首先得到要绑定的标签，再使用事件的属性
document.getElementById("buttonid1").onclick = add1;
· 第三种：首先得到要绑定的标签，写js的代码
document.getElementById("buttonidid2").onclick = function(){alert("aaa");};
四，js的常用事件
1. onload事件和onclick事件
· onload ： html页面在加载的时候触发事件，调用相应的js方法
<input type="text" onclick="test2();">
· onclick ： 鼠标点击事件
<input type="text" onclick="test();">
2. onfocus事件和onblur事件
· onfocus ： 获取焦点
· onblur ： 失去焦点
3.onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
4. onkeypress ：点击键盘上的某个键调用方法
<input type="text" id="textid" onkeypress="key(event);"/>
function key(obj) {//根据obj.keyCode知道每个按键对应的code
if(obj.keyCode==13) alert("key");
}
五，js的dom对象
1. 什么是dom：document object model：文档对象模型
·文档：指的是标记型文档(html/xml)
· 对象：在对象里面有属性和方法：使用dom里面提供的属性和方法，对标记型文档进行操作
· 如果要使用dom对象标记型文档进行操作，首先需要解析标记型文档(html为例)
html中包含 标签、属性、文本内容
2. 使用dom解析html
· 解析过程：根据html的层级结构在内存中分配一个树形结构
· document对象，代表整个文档
· element对象，代表标签
· 属性对象
· 文本对象
· Node节点对象，是这些对象的父对象，在找不到想要使用的方法，到Node里面找
六，document对象
1. document对象代表整个文档
2. 方法
· 第一个：write()，向页面输出内容，可以输出html代码
document.write("<hr/>");
· 第二个：getElementById()：获取标签对象，通过标签的id值进行获取
var input1 = document.getelEmentById("textId");
· 第三个：getElementsByName()：根据标签里面的name属性的值得到标签对象，返回数组
var names = document.getElementsByName("username");
for(var i=0; i<names.length; i++) {
var name= names[i];
document.write(name.value);
}
· 如果只要一个标签，返回的也还是一个数组，可以不用遍历，直接通过数组的第一个角标位0来获取
七，innerHTML属性
1. innerHTML属性不是dom里面的属性
2. 实现什么功能？
· 第一，获取标签里面的文本内容
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>
八，练习：动态生成表格
1. 练习需求：在页面中可以获取用户输出的2个数字，动态生成一个表格。表格的行和列就由这2个数字决定
2. 实现步骤：
· 首先创建页面，在页面上有2个普通输入项和按钮（按钮产生事件）
· 点击按钮，可以生成对应的表格
· 需要得到输入的行和列，根据行和列生成表格
3. 代码实现：
<html>
<head>
<title>动态生成表格</title>
</head>
<body>
行：<input type="text" id="rowId"/>
列：<input type="text" id="colId"/>
<br/>
<input type="button" value="生成" onclick="made()"/>
<br/>
<div id="divid"></div>
</body>
<script type="text/javascript">
function made() {
var row = document.getElementById("rowId").value;
var col = document.getElementById("colId").value;
var tab = "<table border='1' cellspacing='0' cellpadding='5'>";
for(var i=0; i<row; i++) {
tab += "<tr>";
for(var j=0; j<col; j++) {
tab += "<td>aaa</td>";
}
tab += "</tr>";
}
tab += "</table>";
var divid = document.getElementById("divid");
divid.innerHTML = tab;
}
</script>
</html>
九，表单的提交
1. 在html中写form标签，提交方式有三种：
· 第一种：在form标签里面，写提交按钮<input type="submit"/>
代码示例：form表单的action如果不写，默认提交当前页面
<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" onclick="form1();">
代码：
function from1(){
//得到form标签
var form = document.getElementById("form1");
form1.submit();
}
· 第三种方式：使用超链接提交数据
提交格式：<a href="要链接的地址?参数名称1=参数的值1&参数名称2=参数的值2">超链接</a>
十，表单校验
1. 规范数据的输入格式
2. 如何进行表单的校验
· 第一，使用submit进行表单提交，进行表单校验。使用onsubmit事件，在form标签里面
<form method="get" onsubmit="return checkForm();">
进行form表单校验的代码：
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 {
//得到form标签
var form01 = document.getElementById("form01");
form01.submit();
}
}
十一，json的简介
1. JavaScript Object Notation，JavaScript对象表示法。json是数据的交换格式，比xml更加轻巧
· json是JS的原生格式，通过js操作json不需要依赖其他东西，直接对json格式进行操作。
2. json数据格式：json有2种数据格式
第一种：json的对象格式
· 写法{json数据的名称1:json数据的值1,json数据的名称2:json数据的值2......}
· 类似于key-value形式
· 名称的值之间使用冒号隔开，多个值之间使用逗号隔开
· json数据的名称是字符串类型，json数据的值 string,number，object,array,true,flase,null
· 第二种：json的数组格式
· 写法[json对象1，json对象2......]
· 在数组里面如果有多个json对象，多个json对象之间使用逗号进行隔开
· 具体数据的格式：
[{"name":"zhangsan","age":20},{"name":"lisi","age":20}]
3.可以使用json这种2种格式组成更加复杂的json的格式
十二，js解析json
1. js解析json的对象的数据格式
· 通过json对象数据格式里面的name的名称得到对应的值
代码：
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对象的数据的名称得到值
代码：
十三，json练习：人员信息的显示
要求：把多个人员的信息存到json的数据格式里面，通过js解析json的数据格式，把所有的人员显示到页面的表格里面
人员信息：[{"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++) {
//得到数组里面的每个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;
}