JavaScript的调用方式与执行顺序

常见的使用方式(可以在HTML页面中的任意位置添加<script>标签):

1. 直接在<script type="module"> </script>标签内写JS代码。

例如:
index.html中的内容为:

<body>
    <script type="module">
        let x = 2;
        console.log(x);
    </script>
</body>

2. 直接引入文件:<script type="module" src="/static/js/index.js"> </script>

例如:
/static/js/index.js文件中的内容为:

console.log("hello world");

index.html中的内容为:

<script type="module" src="/static/js/index.js"> </script>

3. 将所需的代码通过import关键字引入到当前作用域。

例如:
/static/js/index.js文件中的内容为:

let name = "kitty";  // 定义一个变量name

function print() {   // 定义一个print()函数
    console.log("Hello World!");  // 输出到控制台
}

export {   // 将变量name,函数print()暴露出来,以便可以用来调用
    name,
    print
}

index.html中的内容为:

<script type="module">
    import { name, print } from "/static/js/index.js";

    console.log(name);
    print();
</script>

执行顺序:

  • 类似于HTML与CSS,按从上到下的顺序执行。

  • 事件驱动执行。


HTML, CSS, JavaScript三者之间的关系:

  • CSS控制HTML

  • JavaScript控制HTML与CSS

  • 为了方便开发与维护,尽量按照上述顺序写代码。例如:不要在HTML中调用JavaScript中的函数。


ps:先静态后动态:把js放在标签最后面,防止访问时没有渲染出来bug。

posted @   kitty又困了  阅读(31)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示