JavaScript新手教学入门篇

最新推荐文章于 2025-10-09 01:13:06 发布

原创最新推荐文章于 2025-10-09 01:13:06 发布 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #js入门教学 #零基础

JS 专栏收录该内容

25 篇文章

订阅专栏

本文探讨JavaScript脚本在HTML中的放置位置及其对页面加载速度的影响，解析浏览器渲染过程，提供代码示例说明。

大家好，今天给大家带来的是有关JavaScript的学习，简称js，刚入门的小伙伴儿们，一定要看好呦~，话不多说让我们开始进入学习的海洋吧！！

在学习js之前，先声明一下，我们的脚本语言是必须要放在 < script > 标签内的，且< script >标签可以放在 < head > 里也可以放在 < body > 里，一般情况下，除了想要先加载的文件外，我们把它放在< body >里，那么为什么要这样做呢？在这里就涉及到一个浏览器的加载问题，在这里也和大家讲一下吧，知道的小伙伴儿们可以自行跳过下面的拓展哦！ ^ _ ^

拓展：浏览器渲染页面的过程（前端页面性能优化）

首先呢，当一个浏览器拿到一个网页的时候，比如拿到了一个HTML 的网页，它从上到下依次执行，当它遇上 < link > 标签（也就是网页中引用样式）的时候，它会一边执行< link >一边继续往下进行页面的渲染，二者并不冲突。

但是，当它遇上 < script > 标签（也就是网页中引用脚本）的时候浏览器则会把渲染的权力交给js，因为js是单线程的，在执行js脚本的时候浏览器是不进行渲染的，直到js脚本文件执行完毕，才会将渲染的权力重新交给浏览器继续完成渲染。

当一个网页脚本文件很大，且又放在了< head >里，则有可能在进入页面时加载慢，出现空白的现象（就是因为执行js的时候没有同时渲染页面样式导致的），放在后面就可以让页面先加载样式，后执行脚本就不会出现这种问题了。对于js的单线程问题，等我有时间做一下整理，到时候在和大家分享。

下面呢，我们继续，先上一段小小的demo，大家可以复制代码尝试一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    // 这个位置也是可以放script标签的，但是建议现在body标签里面
    <title>js的学习及使用</title>
</head>
<body>
    <script>
        // 在页面上添加内容
        document.write("<h1>我是标题</h1>");
        document.write("<div>我是一个div</div>");
    </script>
</body>
</html>

上面例子中的js语句会在页面加载时执行，项目中我们通常需要在某个事件发生的时候执行代码，比如当用户点击按钮时，如果我们把js的代码放到函数中，就可以在事件发生的时候调用该函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./styles.css">
    <title>js的学习及使用</title>
    <style>
        .btn {
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 20px;
            background: pink;
            /* 鼠标变小手 */
            cursor: pointer;
            margin: 100px auto;
        }
        .text {
            width: 260px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <h2 class="text">我是标题</h2>
    <!-- 2. 点击时调用该事件 -->
    <div class="btn" onclick="text()">点击改变标题</div>
    <script>
        // 1. 把改变后的内容封装在这个text()函数内
        function text() {
            document.querySelector(".text").innerHTML="我是被改过的标题哟~~"
        }
    </script>
</body>
</html>

执行结果（可以复制到自己编辑器内尝试）：

提示：我们把 JavaScript 放到了页面代码的底部（body中），这样就可以确保在 < h2 > 元素创建之后再执行脚本。
在这里插入图片描述
前面我们都是把js写在页面里的< script >标签里了，现在我们可以尝试着 使用外部文件引用：

提示：这样把每部分的js文件单独分离出来，可以方便后期项目维护。