系统自学Javascript的第三天

慢三步上篮

已于 2022-03-31 10:45:10 修改

阅读量441

点赞数 2

分类专栏： javascript 文章标签：前端经验分享 javascript

于 2022-03-30 18:03:51 首次发布

本文链接：https://blog.csdn.net/weixin_45725653/article/details/123852963

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.JS函数的声明

    function slowStep(name){
        document.write("Hello！" + name);
    }

2.JS函数的调用

    function slowStep(name){
        document.write("Hello！" + name);
    }
    // 调用 slowStep() 函数
    slowStep('三步上篮。');

3.设置JS参数的默认值

    function sayHello(name = "kiki"){
        document.write("Hello!" + name);
    }
    sayHello();             // 输出：Hello!kiki
    sayHello('PG13');       // 输出：PG13

保证不写参数时也能输出“优雅的”语句。

4.JS函数返回值

    function slowStep(num1, num2){
        return num1 + num2;
    }
    var sum1 = slowStep(7, 12);      // 函数返回值为：19
    var sum2 = slowStep(-5, 33);     // 函数返回值为：28

Tips:当函数运行到 return 语句时会立即停止运行，并返回到调用函数的地方继续执行

5.JS函数表达式

var slowStep = function(num1, num2) {
    var total = num1 + num2;
    return total;
};

其实就是 var xxx = “函数的声明”。。

Tips：函数表达式不可以在定义前被调用，可是函数的声明却可以。好像是因为在JS中，在程序执行之前，函数的声明就已经被解析了。

 //类似于 
 slowStep(); 
 funtion slowStep(){  document.write("慢三步");  }
 //这样是不会报错的

6.JS事件

：当用户与网页进行交互时发生的事情。最常见的就是按钮的onclick（点击）事件啦！这个我刚刚才做过，所以还是比较熟悉的。

通俗来说：先搞一个按钮的样式→写点击函数→选择不同的选项点击按钮后返回不同的值→拿这个值与数据库表里面的值对应→刷新整张表，显示出这个选项的相关信息。//长话短说就是类似于选一个id，点击按钮，出来这个id的相关信息，比如账户余额等等，这是我做过的最典型、也是相对简单的一个JS事件了。

跑题了，我去。JS事件可以分为四大类：鼠标事件、键盘事件、表单事件和窗口事件。

1.onmouseover 事件是指当用户鼠标指针移动到元素上时触发的事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
        <button type="button" onmouseover="alert('您的鼠标已经移动到了该按钮上');">请将鼠标移动至此处</button><br>
        <a href="#" onmouseover="myEvent()">请将鼠标移动至此处</a>
        <script>
            function myEvent() {
                alert('您的鼠标已经移动到了该链接上');
            }
        </script>
    </body>
    </html>

2.onmouseout 事件会在鼠标从元素上离开时触发

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
        <div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div>
        <script>
            function myEvent() {
                alert('您的鼠标已经离开指定元素');
            }
            document.getElementById("myBox").onmouseout = myEvent;
        </script>
    </body>
    </html>

3.onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
        <input type="text" onkeydown="myEvent()">
        <script>
            function myEvent() {
                alert("您按下了键盘上的某个按钮");
            }
        </script>
    </body>
    </html>

4.onkeyup 事件是指当用户按下并松开某个按键时触发的事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
        <input type="text" onkeyup="myEvent()">
        <script>
            function myEvent() {
                alert("您按下了键盘上的某个按钮，并将其释放了");
            }
        </script>
    </body>
    </html>

7.JS作用域

放在函数里面就是局部变量，在函数外面就是全局变量。局部变量只能在函数里面使用。

慢三步上篮

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
系统自学Javascript的第三天

1.JS函数的声明2.JS函数的调用3.设置JS参数的默认值4.JS函数返回值5.JS函数表达式6.JS事件7.JS作用域1.JS函数的声明 function slowStep(name){ document.write("Hello！" + name); }2.JS函数的调用 function slowStep(name){ document.write("Hello！" + name); }
复制链接

扫一扫