目录
null NaN undefined区别
== 和 ===
== 是等同运算符,只判断值是否相等
alert(1 == true); // true
alert(1 === true); // false
===(全等运算符:既判断值是否相等,又判断数据类型是否相等)
alert(null === NaN); // false
alert(null === undefined); // false
alert(undefined === NaN); // false
null NaN nudefined
// 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(undefined == NaN); // false
JS常用事件
blur失去焦点
focus获得焦点
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
change下拉列表选中项改变,或文本框内容改变
select文本被选定
load页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生。)
任何一个事件都会对应一个事件句柄,事件句柄是在事件前添加on。
onXXX这个事件句柄出现在一个标签的属性位置上。(事件句柄以属性的形式存在。)
注册事件的第一种方式,直接在标签中使用事件句柄
以下代码的含义是:将sayHello函数注册到按钮上,等待click事件发生之后,该函数被浏览器调用。我们称这个函数为回调函数。
</script>
function sayHello(){
alert("hello js!");
}
</script>
<input type="button" value="hello" onclick="sayHello()"/>
第二种注册事件的方式,是使用纯JS代码完成事件的注册。
<input type="button" value="hello2" id="mybtn" />
<input type="button" value="hello3" id="mybtn1" />
<script type="text/javascript">
function doSome(){
alert("do some!");
}
第一步:先获取这个按钮对象
var btnObj = document.getElementById("mybtn");
document是全部小写,内置对象,可以直接用,document就代表整个HTML页面
第二步:给按钮对象的onclick属性赋值
btnObj.onclick = doSome;
注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
这行代码的含义是,将回调函数doSome注册到click事件上.
var mybtn1 = document.getElementById("mybtn1");
mybtn1.onclick = function(){
alert("test..........");
}
这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
JS代码的执行顺序
第一种:<body>标签中进行onload
load事件什么时候发生?页面全部元素加载完毕之后才会发生
<body onload="ready()">
<script type="text/javascript">
function ready(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("hello js");
}
}
</script>
<input type="button" value="hello" id="btn" />
</body>
第二种:js脚本内onload加载
<body>
<script type="text/javascript">
window.onload = function(){ // 这个回调函数叫做a
document.getElementById("btn").onclick = function(){ // 这个回调函数叫做b
alert("hello js..........");
}
}
</script>
<input type="button" value="hello" id="btn" />
</body>
页面加载的过程中,将a函数注册给了load事件
页面加载完毕之后,load事件发生了,此时执行回调函数a
回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
当id="btn"的节点发生click事件之后,b函数被调用并执行.
JS代码设置节点属性
<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick = function(){
var mytext = document.getElementById("mytext");
// 一个节点对象中只要有的属性都可以"."
mytext.type = "checkbox";
}
}
</script>
<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="btn"/>
点击前:
点击后:
JS代码捕捉回车键
回车键的键值是13
ESC键的键值是27
usernameElt.onkeydown = function(a, b, c){
// 获取键值
// alert(a); // [object KeyboardEvent]
// alert(b); //undefined
// alert(c); //undefined
}
这说明,function()括号里面只能传一个参数,这个参数是“事件”
window.onload = function(){
var usernameElt = document.getElementById("username");
usernameElt.onkeydown = function(event){
// 获取键值
// 对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
alert(event.keyCode);
}
usernameElt.onkeydown = function(event){
if(event.keyCode === 13){
alert("正在进行验证....");
}
}
JS-void运算符
JavaScript种其他运算符与Java一样,特殊的为void()运算符
void运算符的语法:void(表达式)
运算原理:执行表达式,但不返回任何结果。
javascript:void(0)
void() 小括号里面必须要有表达式内容,不写视为错误
其中javascript:作用是告诉浏览器后面是一段JS代码。
以下程序的javascript:是不能省略的。
<a href="javascript:void(0)" onclick="window.alert('test code')">
既保留住超链接的样式,同时用户点击该超链接的时候执行一段JS代码,但页面还不能跳转。
</a>
JS的控制语句
1、if
2、switch
3、while
4、do .. while..
5、for循环
6、break
7、continue
8、for..in语句(了解)
9、with语句(了解)
for in
一般for循环遍历数组
// 创建JS数组
var arr = [false,true,1,2,"abc",3.14];
// 遍历数组
for(var i = 0; i < arr.length; i++){
alert(arr[i]);
}
JS中数组中元素的类型随意.元素的个数随意.
for...in...遍历数组
// for..in
for(var i in arr){
//alert(i);
alert(arr[i]);
}
此时var i 表示数组的下标
for..in语句可以遍历对象的属性
User = function(username,password){
this.username = username;
this.password = password;
}
var u = new User("张三", "444");
alert(u.username + "," + u.password);
alert(u["username"] + "," + u["password"]);
for(var shuXingMing in u){
//alert(shuXingMing)
//alert(typeof shuXingMing) // shuXingMing是一个字符串
alert(u[shuXingMing]);
}
此时var shuXingMing表示属性名
with()
wtih()可读性差,不推荐使用
alert(u.username);
alert(u.password);
with(u){
alert(username + "," + password);
}