1. null undefined NaN的区别 21
在js当中有两个比较特殊的运算符
== 等同运算符,只判断值是否相同
=== 全等运算符,既判断值是否相同,又判断数据类型是否相等
代码在014 null undefined NaN的区别
<!-- null undefined NaN的区别 21 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>null undefined NaN的区别</title>
</head>
<body>
<script type="text/javascript">
// == 是等同运算符
alert(1 == true); // true
alert(1 === true); // false
// null NaN undefined 数据类型不一致.
alert(typeof null); // "object"
alert(typeof NaN); // "number"
alert(typeof undefined); // "undefined"
//null和undefined的可以等同
alert(null==NaN);//false
alert(null==undefined);//true
alert(NaN==undefined);//false
//在js当中有两个比较特殊的运算符
//== 等同运算符,只判断值是否相同
//=== 全等运算符,既判断值是否相同,又判断数据类型是否相等
alert(null===NaN);//false
alert(null===undefined);//false
alert(NaN===undefined);//false
</script>
</body>
</html>
2. js中的事件 22
blur失去焦点
focus获得焦点
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）
任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）
2.1 回调函数概念 23
对于当前程序来说,sayHello函数被称为回调函数(callback函数)
回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
function sayHello(){
alert("hello js!");
}
2.1.1 java中的回调函数 23
java中也有回调函数机制： public class MyClass{
public static void main(String[] args){
// 主动调用run()方法，站在这个角度看run()方法叫做正向调用。
run();
}
// 站在run方法的编写者角度来看这个方法，把run方法叫做回调函数。
public static void run(){
System.out.println("run...");
}
}
2.2 注册事件的两种方式 22-24
代码在015 js中的事件 22-24
<!-- js中的事件 22-24 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中的事件</title>
</head>
<body>
<script type="text/javascript">
/*
JS中的事件： 22
blur失去焦点
focus获得焦点
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）
任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）
*/
// 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
// 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
function sayHello(){
alert("hello js!");
}
</script>
<!-- 注册事件的第一种方式，直接在标签中使用事件句柄 -->
<!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
<input type="button" value="hello" onclick="sayHello()"/>
<input type="button" value="hello2" id="mybtn"/>
<input type="button" value="hello3" id="mybtn3"/>
<input type="button" value="hello4" id="mybtn4"/>
<script>
function doSome(){
alert("do some……");
}
/*
第二种注册事件的方式，是使用纯JS代码完成事件的注册。 24
*/
// 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
var btnObj = document.getElementById("mybtn");
//第二部:给这个按钮对象的onclik属性赋值
// 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
// 这行代码的含义是,将回调函数doSome注册到click事件上.
btnObj.onclick=doSome;
var mybtn3 = document.getElementById("mybtn3")
//这里直接将函数写在了这里,因为没有名字，称为匿名函数,也是一个回调函数
// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
mybtn3.onclick=function(){
alert("test....");
}
//将上述合成一句话
document.getElementById("mybtn4").onclick=function(){
alert("test2222222.....");
}
</script>
</body>
</html>
3. js代码的执行顺序 25
3.1 普通写法
代码在016 js代码的执行顺序
<!-- js代码的执行顺序 25 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js代码的执行顺序</title>
</head>
<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生。-->
<body onload="ready()">
<script type="text/javascript">
/* // 第一步:根据id获取节点对象
var btn = document.getElementById("btn"); // 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
// 第二步:给节点对象绑定事件
btn.onclick=function(){
alert("hello js");
} */
function ready(){
var btn = document.getElementById("btn");
btn.onclick=function(){
alert("hello js");
}
}
</script>
<input type="button" value="hello" id="btn"/>
</body>
</html>
3.2 升级写法常用 25
页面加载的过程中,将a函数注册给了load事件
页面加载完毕之后,load事件发生了,此时执行回调函数a
回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
当id="btn"的节点发生click事件之后,b函数被调用并执行.
window.onload=function(){// 这个回调函数叫做a
document.getElementById("btn").onclick=function(){// 这个回调函数叫做b
alert("hello js......");
}
}
代码在017 js代码的执行顺序2
<!-- js代码的执行顺序2 25 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js代码的执行顺序2</title>
</head>
<body>
<script type="text/javascript">
// 页面加载的过程中,将a函数注册给了load事件
// 页面加载完毕之后,load事件发生了,此时执行回调函数a
// 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
// 当id="btn"的节点发生click事件之后,b函数被调用并执行.
window.onload=function(){// 这个回调函数叫做a
document.getElementById("btn").onclick=function(){// 这个回调函数叫做b
alert("hello js......");
}
}
</script>
<input type="button" value="hello" id="btn"/>
</body>
</html>
4. js代码设置节点的属性 26
一个节点对象中只要有的属性都可以通过 "."来调出
代码在018 js代码设置节点的属性
<!-- js代码设置节点的属性 26 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js代码设置节点的属性</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").onclick=function(){//这个函数是给按钮设置功能即 将文本框修改为复选框
var mytext = document.getElementById("mytext");//这里根据id得到文本框
//一个节点对象中只要有的属性都可以通过 "."来调出
mytext.type="checkbox";//拿到文本框的type属性进行修改
}
}
</script>
<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="btn"/>
</body>
</html>
