事件与函数的关系:
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
事件句柄：
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。
事件中如果有this.value
eg:onclick=checkName(this.value)
这个this.value中的value来源于表单项input的value值，并且是当前被选中的value传递的值！！
js表单想要提交数据到后台的话，input中是一定要有name属性的, 发送到后台的是name中的value值
<input type="" name=value>
js的change事件
change
onchange 句柄
问：change事件是在什么时候发生的?
下拉列表中的选项发生改变的时候，change事件发生。
此时注册在onchange事件句柄后的js代码会自动执行。
完整列子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
testFun = function(coursename){ //传进来的值是你选中的那个value的值
alert(coursename);
/*
if("java" == coursename){
//dosome...
}else if("js" == coursename){
//dosome...
}else...
*/
}
</script>
</head>
<body>
<select name="course" onchange="testFun(this.value)">
<option>--请选择--</option>
<option value="java">java</option>
<option value="js">js</option>
<option value="oracle">oracle</option>
<option value="spring">spring</option>
</select>
</body>
</html>
js中通过DOM创建元素、节点
createElement() 创建节点
appendChild() 追加节点
eg:完整的列子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
addElt = function(){
//alert("aa");
//向div追加一个子节点font
//1.先获得div节点
var myDiv = document.getElementById("myDiv");
//2.创建font节点
var fontt = document.createElement("font");
fontt.innerHTML="测试"; //往节点里添加内容
fontt.color="red";
//3.将font节点加div节点中
myDiv.appendChild(fontt);
}
</script>
</head>
<body>
<input type="button" value="给div添加font标签" onclick="addElt();"/>
<div id="myDiv"></div>
</body>
</html>
问：innerHTML 和innerText的区别？
eg:
innerHTML="<font color='red'>测试1</font>" //控制台显示结果为： <font color='red'>测试1</font>
innerText="<font color='red'>测试2</font>" //控制台显示结果为： 测试2
从这个列子可以看出来，innerHTML会把里面的所有全部都打印出来，innerText是标签不会打印出来只打印内容
js中的window——弹框
window是BOM内置对象
BOM全拼Browser Object Model
window代表整个浏览器窗口
window.alert("消息"); //弹出消息框
var ok = window.confirm("亲，你确认删除吗?"); //弹出确认框,并且得到一个结果
删除数据的时候，数据无价，需要给用户提示，待用户确认删除数据，才敢删除数据哦。
完整的列子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
deleteData = function(){
var a = window.confirm("您确定要删除吗？");
if(a){
alert("正在删除数据请稍后...");
/* }else{
alert("取消"); */
}
}
</script>
</head>
<body>
<input type="button" value="删除" onclick="deleteData();"/>
</body>
</html>
js中的window——跳转
location 单词的意思为：位置
列子：跳到百度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
goBaibu = function(){
//window.location.href="http://www.baidu.com"; //这个三个注释掉的都可以完成请求的发送，都能跳到百度
//window.location="http://www.baidu.com";
//document.location.href="http://www.baidu.com";
document.location="http://www.baidu.com";
}
</script>
</head>
<body>
<!-- <a href="http://www.baidu.com">百度</a> -->
<input type="button" value="百度" onclick="goBaibu();"/>
</body>
</html>
js中的window——后退到上一步
window.history.back();
window.history.go()
eg:
<input type="button" value="后退" onclick="window.history.back();"./> //有点问题
js中的全局变量和全局函数
在js中，全局变量和全局函数都可以用window对象来调用，而且，window还可以省略！！
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
//全局变量
var ename="smisi";
//访问全局变量
alert("ename="+ename);
//在js中全局变量和全局函数都是window对象的属性
alert("ename2"+window.ename);
function sayHello(){
alert("我是全局函数啦");
}
sayHello();
window.sayHello();
</script>
</head>
<body>
</body>
</html>
eg:下拉列表添加选项
思路：
1.先获取课程名称
2.获取下拉列表对象
3.创建新的选项节点
4.将选项节点加入下拉列表中去
js中的 void运算符
href="javascript:void(0)"
固定写法!!!只执行一段js代码，不进行页面跳转，还想保留超链接的样式，应用场景：在本页面里面统计啊，查找啊，不跳转
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
</script>
</head>
<body>
<br><br><br><br><br><br><br>
<a href="javascript:void(0)" onclick="alert('执行到这里');">只执行一段js代码，不进行页面跳转，还想保留超链接的样式</a>
</body>
</html>
js中的json
json：全拼 javaScript Object Notation
json对象使用{} 进行创建，这种语法可以创建一种无类型的javascript对象
json通常使用在语言之间进行数据交换的时候充当数据交换格式
java可以在后台拼接json字符串，将json字符串发送给浏览器，浏览器中的js程序。
可以解析json格式的字符串。这样java和js就完成了通信
json是一种数据传送格式，是一套标准的简单的轻量级的数据传送格式
任何一个编程语言都可以在后台拼接json格式的字符串，发送给前端
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。
a.什么是json?
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言 *
JSON 易于理解。
b.json的语法规则
数据为 键/值对，并且对象中的key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
数据由逗号分隔
大括号保持对象
方括号保存数组
c.
创建对象的格式 ： var user={
"usercode":9527, //对象可以保存多个 键/值 对,用逗号隔开
"username":"hongyy",
"age":23
};
//访问对象中的属性
alert(user.usercode);
alert(user.username);
alert(user.age);
创建数组的格式 ：
JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象!!!!!!!
"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]
d.JSON 值
JSON 值可以是：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false） eg:{ "flag":true }
数组（在中括号中）
对象（在大括号中）
null eg:{ "runoob":null }
e.访问对象的值（掌握）
1.可以用对象.属性
var user={
"usercode":9527
}
var x = user.usercode; //常用 alert(x); --9527
2.可以使用中括号[]来访问对象的值
var user={
"usercode":9527
}
var x= user["usercode"]; // alert(x); --9527
f:循环对象的属性
可以用for-in
在使用for遍历时，只能通过 myObj[x] 来获取相应属性的值，而不能使用 myObj.x
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：</p>
<p id="demo"></p>
<script>
var myObj = { "name":"李银河", " age":17, "site":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += myObj[x] + "<br>"; //在使用for遍历时，只能通过 myObj[x] 来获取相应属性的值，而不能使用 myObj.x
}
</script>
</body>
</html>
g:嵌套 JSON 对象
对象既可以嵌套对象，又可以嵌套数组
eg:
<script>
myObj = {
"name":"runoob",
"alexa":10000,
"sites": {
"site1":"www.runoob.com",
"site2":"m.runoob.com",
"site3":"c.runoob.com"
}
}
x1 = myObj.sites.site1;
alert(x1); --www.runoob.com
// 或者
x = myObj.sites["site2"];
alert(x); --m.runoob.com
</script>
h:json.parse()
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法:
JSON.parse(text[,reviver])
eg:
<body>
<h2>从 JSON 对象中创建 JavaScript 对象</h2>
<p id="demo"></p>
<script>
var obj = JSON.parse('{ "name":"李银河", "alexa":10000, "site":"010101" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>
</body>
i:无聊写个列子
eg:从以上json对象中获取每一个学生的学号或者是姓名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
//在js中[]表示数组对象，{}表示对象
var stus={
"total":5,
"data":[
{"sno":66,"sname":"胖大海"},
{"sno":77,"sname":"李银河"},
{"sno":88,"sname":"王小波"},
{"sno":99,"sname":"洪杨洋"},
{"sno":100,"sname":"易冰冰"}
]
};
//从以上json对象中获取每一个学生的学号
//alert(stus.total); //total 对象.total
//alert(stus.data); //这样不行，因为data是一个数组，必须遍历
for(var i=0;i<stus.data.length;i++){
//var stu = stus.data[i];
//alert(stu.sno);
//alert(stus.data[i].sno); //也可以的啦
alert(stus.data[i].sname);
alert(stus.data[0].sno); //这个是只取第一个sno,取的是下标
}
</script>
</head>
<body>
</body>
</html>
js中的eval
eval函数的作用：将普通字符串当做js代码解释执行
eg:
<script>
window.eval("var i = 100;");
alert(i); //结果为：100
</script>
eval重点补充: java程序连接数据库之后，查询数据
然后拼接成一个json格式的字符串发送给浏览器
浏览器只是接收到一个普通的json格式的字符串，然后在js中使用eval函数
将json格式的字符串转换成json对象
js事件
事件 事件句柄
blur onBlur 失去焦点
change onChange 下拉框改变事件
click onClick 鼠标单击
dbiclick onDbiClick 鼠标双击
focus onfocus window,frame,form的input,frameset 获取焦点事件
keydown onKdyDowm 键盘按下键
load onload 页面加载完毕马上发生
mousedown onMouseDown 按下鼠标
reset onRest 重置form
submit onSubmit 提交form (return true/false)
......
欢迎大家指出错误 /比心哟