前端三剑客之JavaScript：从零开始，让你的网页“活”起来

爱昏羔

379人浏览 · 2026-05-12 11:13:29

爱昏羔 · 2026-05-12 11:13:29 发布

前言：

在前端中，有HTML，CSS和JavaScript这三兄弟，前面两个是“老实人”，而js是"戏精"。所以我们重点是学习JavaScript。因为学JS = 给网页注入灵魂。
这篇文章，就是给刚接触JS的小伙伴准备的“灵魂注入指南”。如果你喜欢，记得点赞+关注，咱们一起变大佬！

JavaScript到底是什么呢？为什么如此重要！

是什么？

是一种运行在客户端的编程语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等交互效果。

怎么写呢？

JavaScript程序是不能独立运行的，需要被嵌入HTML中，如何浏览器才能执行JavaScript代码。

那如何查看我们的JavaScript程序是否正确被运行出来了呢？

我们是有两种查看方式
- 1. 第一种：内部方式（推荐这个）
  - 直接创建一个HTML文件，在标签内或者标签内写script标签包裹JavaScript代码。
- 1. 第二种方式：外部形式
  - 将JavaScript代码写在独立的以.js结尾的文件，然后通过script标签src属性引入。

为什么如此重要呢？
- 1. 首先明确一下 HTML CSS 和JavaScript分别是担任什么角色？
  - 通俗来说就是HTML是一个房子的结构和骨架，定义这个网页有什么内容；CSS就是房子的装修和风格，定义这个网页看起来怎么样；JavaScript时房子的电力系统和智能家居等，能让网页动起来、响应你的操作并执行任务。
- 1. 区别：
  - HTML 和CSS 是静态的
  - JavaScript是动态的，真正的编程语言。
- 1. 优点：
  - 交互性
  - 动态内容可以被修改
  - 数据通信
总结：
这三个结合一起才构成一个完整的现代网页，而JavaScript是最“亮眼”的，英文可以让网页用起来动起来。

核心基础知识

输入输出

输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 这个就是在网页上弹窗出一个需要你自己填写你好
        prompt("请输入你好")
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 这个方法就是在网页直接输出nihao
        document.write("nihao")
        // 这个方法就是在网页弹窗出一个你好
        alert("你好")
        // 这个就是给程序员在控制台测试的
        console.log("程序员测试使用的")

    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

结束符：;
如何注释

ctrl + /:单行注释
ctrl + shift + /:多行注释

数据类型：

基本数据类型：number、string、Boolean、undefined、null
引用数据类型：object、function、array
如何查看数据类型：typeof()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i = 10;
        var s = "hello world";
        var flag = true;
        var j;
        /*变量如何查看数据类型*/
        /* js中的原始数据类型有五种
        * number类型
        * string
        * boolean
        * undefined
        * null */
        console.log(typeof i);
        console.log(typeof s);
        console.log(typeof flag);
        console.log(typeof j);
    </script>
</head>
<body>

</body>
</html>

模板字符串：

变量：存储数据的容器（能改变）

声明：声明关键字（let---->推荐这个 var）和变量名（标识）
命名规则：字母、数字、下划线和$
变量更新：
···html
let age = 18
age = 19
console.log(age)
···

var 和 let 的区别

var 可以先使用再声明；var 声明过的变量可以重复声明；var 就是个bug。
let 可以解决 var的一些问题

常量：保存的值是不可以改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const pi = 3.14
        console.log(pi)


    </script>
</head>
<body>

</body>
</html>

来一个综合作业练练手吧

在这里插入图片描述

将这个页面做出来
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>订单样式</title>
   <style>
       .title{
           text-align: center;
           color:#3e3e3e;
       }
       .order{
           border-collapse: collapse;
           height:80px;
           margin:0 auto;
           text-align:center;
           border-radius: 10px 10px 0 0;
           overflow:hidden;
       }
       .order tr:nth-child(1){
           background: linear-gradient(to right,#f46e33,#f057a5);
       }
       .order tr:nth-child(2){
           background: linear-gradient(to right,#f0ebff,#fdeff6);
           color:#f282bb;
       }
       .order th{
           padding:5px 50px;
           color:#fff
       }
       .order,th,td{
           border:1px solid #fff;
           line-height:50px;
       }
   </style>
</head>
<body>
   <h1 class="title">订单信息</h1>
   <script type = "text/javascript">
       let price = prompt("请输入商品价格：")
       let num = prompt("请输入商品数量：")
       let address = prompt("请输入收货地址")
       let total = Number(price) * Number(num)
       document.write(`            <table class="order">
                       <tr>
                           <th>商品名称</th>
                           <th>商品价格</th>
                           <th>商品数量</th>
                           <th>总价</th>
                           <th>收货地址</th>
                       </tr>
                       <tr>
                           <td>小米青春版plus</td>
                           <td>${price}</td>
                           <td>${num}</td>
                           <td>${total}</td>
                           <td>${address}</td>
                       </tr>
                   </table>
               `)
   </script>
</body>
</html>

结束

恭喜你！你已经成功迈出了学习JS的第一步🎉
现在你可以试着写写JS，在网页做一个弹窗，用console.log进行调试代码，写一个动态的订单页面。
我们是第一天学习JS：
刚开始：这素什么？
学几天：好像有点味道？
学一阵子：手拿把掐

🌱 编程不是背出来的，是敲出来的。
哪怕你今天只抄了一遍代码，你也比昨天的自己更厉害了。

下篇预告

我们下一篇聊聊数组、函数和DOM操作咯！！！
如果你不想错过的话，点个关注哟，第一时间收到更新！
有问题？评论区见👇
喜欢这篇？点赞 + 收藏，是对小白博主最大的鼓励❤️

亚马逊云科技技术品牌专区

更多推荐

Gemini 2.5 Flash Lite 新手极速上手指南

在开发智能应用时，很多开发者常常面临一个两难选择：是追求模型的强大理解能力，还是担心高昂的算力成本和复杂的部署流程？特别是在处理长文档分析、图片内容识别或需要实时交互的场景下，传统方案往往显得力不从心。要么响应速度慢得让人失去耐心，要么在处理复杂上下文时出现“遗忘”现象，导致回答断章取义。其实，随着新一代大模型 API 的成熟，这些问题已经有了更优雅的解法。不需要自己搭建庞大的服务器集群，也不必深

亚马逊云科技技术品牌专区

Kiro Editor 开发实战：使用 Cargo 构建、测试与性能优化指南

欢迎来到这篇终极指南，我们将深入探索如何使用Rust构建高性能的终端文本编辑器Kiro Editor。无论你是Rust新手还是经验丰富的开发者，这篇完整教程将带你了解如何利用Cargo工具链进行高效的开发、测试和性能优化，打造一款快速、轻量且功能强大的UTF-8文本编辑器。## 什么是Kiro Editor？Kiro Editor是一款使用Rust编写的极简终端文本编辑器，它最初是著名编辑

亚马逊云科技技术品牌专区

Kimi 智能助手新手入门与实战指南

在处理长篇技术文档或行业研报时，我们往往只需要其中的核心结论或特定数据。利用 AI 进行长文档摘要，可以极大缩短信息获取周期。操作时，直接将文档内容复制粘贴到对话框中（注意遵守平台的长度限制，若超长可分段处理），然后配合精准的指令。假设你手头有一份五十页的《云计算架构演进趋势报告》，你可以输入：“请阅读以下关于云计算架构的报告内容。首先，用不超过 200 字总结全文的核心观点。其次，提取出文中提到