超详细快速入门JavaScript详解(二)

最新推荐文章于 2020-12-03 13:06:00 发布

煌sir

最新推荐文章于 2020-12-03 13:06:00 发布

阅读量407

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43705131/article/details/107032839

版权

JavaScript 专栏收录该内容

5 篇文章 9 订阅

订阅专栏

今天让我们来继续一起探讨JavaScript吧, 话不多说,开货,滴滴~~~

1、小写的function (相当于：public static 返回值类)

2、参数列表上不能书写var

3、JS中的函数一定有返回值。

未定义返回值，默认返回值undefined

2.注意事项

1、JS中若函数名相同，不存在重载，存在的是方法的覆盖

2、形参未赋值，默认值是undefined

6. onsubmit事件（最特殊的事件）

一. JS运算符

1. 比较运算符

== 逻辑等。仅仅对比数据值。
=== 全等。对比数据值并且对比类型。

如果值和类型都相同，则为true；值和类型有一个不同，则为false

举例:

<script>
    /*
    *       ==     仅仅比较值是否相同。  如果相同，返回true，否则返回false
    *       ===    比较值和数据类型。   如果值和数据类型都相等，返回true；  否则返回false
    * */
    var aa = "10";
    alert(aa==10);//true
    alert(aa===10);//类型不同，false
    alert(aa==="10");//true  值和类型都相等
</script>

2.特殊情况

JavaScript逻辑运算符没有 & |
JS中除法的结果是小数

if表达式特殊情况：

举例:

<script>
    //undefined、null、0、NaN、空字符 默认翻译为false
    // 一般简化JS条件语句
    //应用环境：1、判断用户名是否为空
    /*
        var a = "";
    *   if(a){
    *       alert("不为空");
    *   }else{
    *       alert("为空");
    *   }
    *
    * */
    var a="";
    if(a){
        alert("true");
    }else{
        alert("false");
    }

</script>

二.JS函数/方法

1.函数入门

Java：

public static 返回值类型方法名（参数列表）{

函数体

}

JS：

1、小写的function (相当于：public static 返回值类)

2、参数列表上不能书写var

3、JS中的函数一定有返回值。

未定义返回值，默认返回值undefined

举例:

<script>
    function run1(){
        alert("run1");
    }
    var x = run1();
    alert(x);
</script>

2.注意事项

Java :方法名相同，参数列表不同。重载方法

1、JS中若函数名相同，不存在重载，存在的是方法的覆盖

举例:

<script>
    function run1() {
        alert("run1");
    }
    function run1(a) {
        alert("run1"+a);
    }
    function run1(a,b) {
        alert("run1"+a+b);
    }
    run1();
</script>

2、形参未赋值，默认值是undefined

三. JS正则对象

Java正则：“字符串”

JS正则：正则对象

var reg = /^表达式$/; 直接量（开发中常用）

直接量中存在边界，即^代表开始，$代表结束

直接量方式的正则是对象，不是字符串，别用引号

举例:

<script>
    var str = "  ccc    ";
    //定义一个正则对象
    var reg = /^\s*$/;//  \s空白符--空格   。  空格可以有0个或多个
    alert(reg.test(str));
</script>

四.JS事件

1.事件简述

通常鼠标或热键的动作我们称之为事件(Event)

鼠标点击

鼠标双击

鼠标移入

鼠标移出

键位按下

键位弹起

2.onclick事件

点击事件：由鼠标或热键点击元素组件时触发

举例:

<script>
        function run1(){
            alert("真疼");
        }
    </script>
</head>
<body>
    <input type="button" value="点我啊" onclick="run1()"/>
</body>

οnclick=”run1()” 为当前标签绑定点击事件，事件触发时，执行run1方法

3.绑定多个函数

1、绑定多个函数，用;分隔

举例:

<script>
        //点击按钮，依次调用方法 run1和run2, 弹出“真疼”“轻点”
        function run1(){
            alert("真疼");
        }
        function run2(){
            alert("轻点");
        }
    </script>
</head>
<body>
    <input type="button" value="点我啊" onclick="run1();run2()"/>
</body>

2、控制器

<script>
        //点击按钮，依次调用方法 run1和run2, 弹出“真疼”“轻点”
        function run1(){
            alert("真疼");
        }
        function run2(){
            alert("轻点");
        }
        //控制器
        function xx(){
            run1();
            run2();
        }
    </script>
</head>
<body>
    <input type="button" value="点我啊" onclick="xx()"/>
</body>

4. 绑定事件的两种方式

1、标签绑定方式

<标签名事件=””/>

2、HTML-DOM绑定方式

<script>
        function run1(){
            alert("真疼");
        }
    </script>
</head>
<body>
    <input id="x1" type="button" value="点我啊"/>
</body>
</html>
<script>
    //html-dom绑定方式
    //1、获取标签对象
    //文档.获取元素通过ID ------》通过ID搜索整个文档，找到某个元素对象
    var input = document.getElementById("x1");
    //2、对象.onclick 绑定点击事件
    input.onclick = run1;
</script>

注意事项：

根据ID寻找元素对象时，保证整个文档都加载好了
寻找的ID必须存在，否则返回null
input.onclick = run1; 不能写成 input.onclick = run1();，否则这叫绑定方法的返回值

使用环境：

标签绑定方式，适用于：简便开发、中小型开发
HTML-DOM方式，适用于：大型开发、动态开发


<script>
        function run1(){
            alert("真疼");
        }
        function run2(){
            alert("轻点");
        }
        function xx(){
            run2();
            run1();
        }
    </script>

</head>
<body>
    <input id="x1" type="button" value="点我啊"/>

</body>
</html>
<script>
    //html-dom绑定方式
    //1、获取标签对象
    //文档.获取元素通过ID ------》通过ID搜索整个文档，找到某个元素对象
    var input = document.getElementById("x1");
    //2、对象.onclick 绑定点击事件
    input.onclick =xx;
</script>

5. 匿名函数

<script>
        function run1(){
            alert("真疼");
        }
        function run2(){
            alert("轻点");
        }
    </script>

</head>
<body>
    <input id="x1" type="button" value="点我啊"/>

</body>
</html>
<script>
    //html-dom绑定方式
    //1、获取标签对象
    //文档.获取元素通过ID ------》通过ID搜索整个文档，找到某个元素对象
    var input = document.getElementById("x1");
    //2、对象.onclick 绑定点击事件
    input.onclick = function () {
        run2();
        run1();
    };
</script>

6. onsubmit事件（最特殊的事件）

表单提交事件：表单的提交按钮被点击时触发

注意：该事件需要返回boolean类型的值来执行提交/阻止表单数据的操作。

事件得到true，提交表单数据
事件得到false，阻止表单数据提交

<script>
        function run1(){
            alert("run1执行了");
            return false;
        }
    </script>
</head>
<body>
    <!--
        通过onsubmit 控制表单数据是否提交
        1、onsubmit是绑定在<form>
        2、格式： onsubmit="return 方法名()"
        3、被绑定的方法，必须返回boolean值
            true: 表单正常提交
            false: 阻止表单数据提交
    -->
    <form onsubmit="return run1()">
        用户名:<input type="text" name="uname" value="zzz"/><br/>
        <input type="submit"/>
    </form>
</body>

看完恭喜你,又知道了一点点!!!

你知道的越多,不知道的越多!

~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!

注: 如果本篇有需要改进的地方或错误,欢迎大神们指定一二~~

煌sir

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
超详细快速入门JavaScript详解(二)

今天让我们来继续一起探讨JavaScript吧, 话不多说,开货,滴滴~~~目录一.JS运算符1.比较运算符2.特殊情况二.JS函数/方法1.函数入门1、小写的function(相当于：public static 返回值类)2、参数列表上不能书写var3、JS中的函数一定有返回值。未定义返回值，默认返回值undefined2.注意事项1、JS中若函数名相同，不存在重载，存在的是方法的覆盖2、形参未赋值，...
复制链接

扫一扫