ECMAJavaScript相关知识

将介绍一些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>

 

 

 

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值