将介绍一些ECMAJavaScript相关的知识
主要内容有:
null NaN undefined这三个值有什么区别
JS中的常用事件-注册事件的两种方式
JS代码的执行顺序
JS代码设置节点的属性
JS捕捉回车键
void运算符
JS的控制语句
JavaScript变量、数据类型以及帮助文档等其他内容请查看我的另一边博客
null NaN undefined这三个值有什么区别
这个简单,直接上代码
<script type="text/javascript">
alert(1==true);//true
alert(typeof null);//object
alert(typeof NaN);//number
alert(typeof undefined);//undefined
alert(null==NaN);//false
alert(null==undefined)//true
alert(undefined==NaN);//false
//JS当中有两个比较运算符
//==(等同运算符:只判断值是否相等)
//===(全等运算符,既判断值是否相等,也判断类型是否相等)
alert(null===NaN);//false
alert(null===undefined)//false
alert(undefined===NaN);//false
</script>
JS中的常用事件-注册事件的两种方式
常用事件:
blur失去焦点
focus获得焦点
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
change下拉列表选中项改变,或文本框内容改变
load页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生的。)
select文本被选定
注册事件的第一种方式
注册事件的第一种方式,直接在标签中使用onclick
<input type="button" value="hello" οnclick="sayHello()" />
注册事件的第二种方式
注册事件的第二种方式,是使用纯JS代码完成事件的注册。
<input type="button" value="hello2" id="mybtn" />
<input type="button" value="hello3" id="mybtn1" />
<input type="button" value="hello4" id="mybtn2" />
<script type="text/javascript">
function doSome(){
alert("doSome!!!");
}
/*
注册事件的第二种方式,是使用纯JS代码完成事件的注册。
*/
//第一步:先获取按钮对象(document是全部小写,内置对象,可以直接使用,document就代表整个HTM页面)
var btnObj=document.getElementById("mybtn");
//第二步:给按钮对象的onclick属性赋值
btnObj.οnclick=doSome;//注意:千万别加小括号。btnObj.οnclick=doSome()这个是错误的
var mybtn1=document.getElementById("mybtn1");
mybtn1.οnclick=function(){//这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
alert("text.....");
};
document.getElementById("mybtn2").οnclick=function(){
alert("你好啊");
};
</script>
JS代码的执行顺序
<!--load发生时间:页面全部元素加载完毕之后才会发生-->
<body οnlοad="ready()">
<script type="text/javascript">
/*
//document返回值是null(因为代码执行到此处的时候id="btn"的元素没有加载到内存)
document.getElementById("mybtn").οnclick=function(){
alert("hello");
}
*/
function ready(){
document.getElementById("mybtn").οnclick=function(){
alert("hello");
}
}
</script>
<input type="button" value="hello" id="mybtn" />
另一种写法
<body>
<script type="text/javascript">
//事件句柄后面的代码在事件结束之后执行
window.οnlοad=function(){
document.getElementById("mybtn").οnclick=function(){
alert("你好");
}
}
</script>
<input type="button" value="hello" id="mybtn" />
</body>
JS代码设置节点的属性
<script type="text/javascript">
window.οnlοad=function(){
document.getElementById("mybtn").οnclick=function(){
document.getElementById("mytext").type="checkbox";
}
document.getElementById("mytext").οnclick=function(){
alert("hello");
}
}
</script>
<input type="text" id="mytext" />
<input type="button" value="将文本框修改为复选框" id="mybtn" />
JS捕捉回车键
<script type="text/javascript">
window.οnlοad=function(){
document.getElementById("username").οnkeydοwn=function(event){
//获取键值 回车键键值:13 ESC键键值:27
//对于键盘事件对象来说,都有keyCode属性用来获取键值
if(event.keyCode===13){
alert("登录成功");
}
}
}
</script>
<label>用户名:</label>
<input type="text" placeholder="用户名" id="username"/>
void运算符
页面顶部<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--
void运算符的语法:void(表达式)
运算原理:执行表达式,但是不返回任何结果。
javascript:void(0)
其中JavaScript:作用是告诉浏览器后面是一段JS代码。
-->
<a href="javascript:void(0)" οnclick="window.alert('test....')">
既保留住超链接的样式,同时用户点击超链接的时候执行一段JS代码,但页面不能跳转。
</a>
<br><br><br>
<script type="text/javascript">
JS的控制语句
1、if
2、switch
3、while
4、do....while
5、for循环
6、break
7、continue
8、for..in语句
9、with语句
<script type="text/javascript">
//创建JS数组
var arr=[false,true,1,3.14,"abc"];//JS数组中元素可以放任何类型,元素的个数随意.
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
for(var i in arr){
alert(arr[i]);
}
//for...in可以遍历对象的属性
User=function(username,password){
this.username=username;
this.password=password;
}
var user=new User("zhangsan",4444);
alert(user["username"]+","+user["password"]);
for(var i in user){
//alert(typeof i);//string
alert(user[i]);
}
//with的使用方法
with(user){
alert(username);
alert(password);
}
</script>