闪电编程入门课-第一课

梦杰老师
115 阅读21分钟

第一课：网页初探及JavaScript入门

闪电编程，助你闪电入门！⚡️⚡️⚡️

本节课的大纲：

  • 第一课自我介绍
  • 理解网页、看懂网页源代码、编写网页
  • JavaScript变量、数据类型
  • JavaScript字符串与打印
  • JavaScript条件判断

本节课学完后能收获什么：

  • 打开一个网页，会看、能懂背后的源代码
  • 能自己编写出一个带交互的简易网站，
  • 理解编程思想，能够使用JavaScript对日常生活场景问题进行编程

在线代码编辑环境：闪电编程班练习区

第一部分：如何看懂一个网页？—— 网页三剑客：HTML, CSS, JavaScript

一、引子：网页是怎么“造”出来的？

我们每天都会浏览各种各样的网站，比如新闻网站、购物网站、视频网站。这些五彩斑斓、功能各异的网页，它们的代码到底是什么样子的？我们又该如何理解它们呢？

这里，我想请大家想象一下“盖房子”的过程。一个完整的房子，需要有结构、有装修、还要有各种水电设施。 我们的网页也是一样，它由三个核心部分组成：HTML、CSS、JavaScript。

  • HTML
    • 概念: HTML (HyperText Markup Language, 超文本标记语言)。
    • 类比: 房子的骨架和结构。
    • 作用: 它会告诉浏览器：“这里应该有一个标题”，“那儿应该是一段文字”，“这儿需要放一张图片”。它搭建了网页的骨架，但它本身并不美观，就像一个只有水泥框架的毛坯房 。  
  • CSS:
    • 概念: CSS (Cascading Style Sheets, 层叠样式表)
    • 类比: 房子的装修和设计。
    • 作用: 它决定了标题是什么颜色、字体有多大、图片放在左边还是右边、段落之间有多少间距。CSS 让光秃秃的 HTML 骨架变得漂亮美观。  
  • JavaScript:
    • 概念: JavaScript (，简称JS)
    • 类比: 房子的功能和交互，比如电路、水管、电灯开关。
    • 作用: 负责让网页动起来，实现各种交互功能。当你点击一个按钮，弹出一个登录框；当你把鼠标悬停在一张图片上，图片会放大；当你提交一个表单，网页会提示你“提交成功”。这都是JS的功劳。

二、HTML：网页的“骨架”

HTML，全称“超文本标记语言（HyperText Markup Language）”。

它用<标签名>的形式定义网页元素，每个标签都有明确的语义（即 “这个元素是做什么的”）。一句话概括：

一种用 <标签> 描述网页元素的的标记方式。

举个例子：

```
<h1>这是一个大标题</h1>
<p>这是一段普通的文字。</p>
<img src="一张图片的地址">
<button>一个按钮</button>
```

这些用尖括号<>围起来的代码<>，就是一个个标签，告诉浏览器“嘿，在这里放一个标题”、“在这里放一段文字”。 这就是HTML的工作。

1.2.1 常见 HTML 标签及语义（零基础必学 7 个）

HTML代码片段结果展示：闪电编程班练习区 - 码上掘金

<h1>这是一个h1大标题</h1>
<h3>这是一个h3小标题</h3>
<p>这是一段普通的文字。</p>
<p>下面👇是一个链接：</p>
<a href="https://www.baidu.com">去百度搜索</a>
<p>下面👇是一个button：</p>
<button>一个按钮</button>
<p>下面👇是一个input输入框：</p>
<input type="text" placeholder="请输入姓名">（文本输入框）
<p>下面👇是一个div盒子容器：</p>
<div class="article"><p>div包含的文字内容</p></div>
<p>下面👇是一张图片：</p>
<img src="https://picsum.photos/400/200" alt="图片加载失败文字">

常见 HTML 标签释义表：

标签语义作用例子
<h1>~<h6>标题表示页面的层级标题，<h1>最大，<h6>最小<h1>我的个人博客</h1>（页面主标题）
<p>段落包裹正文文字，会自动换行且与其他段落保持间距<p>今天学习了HTML的基础标签，感觉很有趣！</p>
<img>图片插入图片，必须通过src属性指定图片路径<img src="cat.jpg" alt="一只猫">
<a>链接实现页面跳转，通过href属性指定目标地址<a href="www.baidu.com">去百度搜索 </a>
<div>容器用于 “分组” 其他元素，比如把 “标题 + 段落 + 图片” 打包成一个模块<div class="article"><p>文章内容</p></div>
<button>按钮定义可点击的按钮，常配合 JS 实现交互<button onclick="alert('点击我了！')">点我
<input>输入框让用户输入内容（比如账号、密码、搜索关键词），通过type属性改变类型<input type="text" placeholder="请输入姓名">（单行文本输入框）
1.2.2 HTML 的 “树形结构”

HTML 标签嵌套形成的结构是 “树形” 的，就像电脑里的文件夹层级:

  • 最顶层是<html>标签，里面包含:
    • <head>（页面配置，比如标题、CSS）
    • <body>（页面具体内容，比如段落文字图片）
<html> <!-- 根节点 -->
  <head> <!-- 子节点1：页面配置区 -->
    <title>我的页面</title> <!-- 孙节点1：页面标题 -->
    <style>/* CSS代码 */</style> <!-- 孙节点2：样式 -->
  </head>
  <body> <!-- 子节点2：页面内容区 -->
    <h1>标题</h1> <!-- 孙节点1：主标题 -->
    <div> <!-- 孙节点2：容器 -->
      <p>段落内容</p> <!-- 曾孙节点1：段落 -->
      <img src="pic.jpg"> <!-- 曾孙节点2：图片 -->
    </div>
  </body>
</html>
  • 树形层次： 大枝长小枝，“大框包小框”。——更清晰理解网站代码。
1.2.3 案例练习：开发者眼里的网页里世界？

“大众眼中的网页，存在着名为【源代码】的里世界”

  1. 网站空白处，按下鼠标右键；

  2. 点击“检查”；

image.png

  1. 单击左边鼠标选框按钮； image.png

  2. 鼠标移动，选中任意网页元素，显示出选框及其对应标签。

image.png

找到自己感兴趣的网站，动手试试吧！——如：淘宝、小红书

三、CSS：网页的“衣服”

CSS， 全称为 “层叠样式表（Cascading Style Sheets）”，

“层叠” 的意思是：多个 CSS 规则可以同时作用于一个元素，优先级高的规则会覆盖优先级低的规则（比如 “班级样式” 和 “个人样式” 冲突时，以 “个人样式” 为准）。

它用 元素{样式维度：具体样式} 的形式，为每种网页元素指定某一维度的具体样式（如“这个元素的颜色是蓝色”、“这个元素的边角是圆角”）。

一句话概括：

一个为网页元素指定风格和样式的列表。

  • 举个例子：

    /* 告诉浏览器，把所有h1标题变成红色 */
h1 {
  color: red;
}
/* 告诉浏览器，把所有按钮的背景色变成蓝色，文字变成白色 */
button {
  background-color: blue;
  color: white;
}

大括号{ }前面的就是目标元素，大括号内每一个维度的样式用;隔开。 告诉浏览器“h1标题的文字颜色是红色”、“按钮的背景色变成蓝色”。 这就是CSS的工作。

1.3.1 CSS 的 “选择器”：找到要美化的 “目标元素”

要给元素加样式，首先要通过 “选择器” 定位元素，就像快递员根据地址找到收件人。零基础必学的 3 个选择器：(纯元素的、带.的、带#的)

  1. 标签选择器：选中所有同名标签（比如所有<p>标签）
p { /* 选中所有\<p>标签 */
  color: #333; /* 文字颜色为深灰色 */
  font-size: 16px; /* 字体大小16像素 */
  line-height: 1.5; /* 行高（行与行的间距）为1.5倍字体大小 */
}

2. 类选择器（.class） ：选中所有带指定class属性的元素

在使用前，给元素的HTML加class属性：

<h2 class="text-red">红色标题</h2>
<p class="text-red">红色段落</p>

.text-red { /* 选中所有class="text-red"的元素 */
  color: red;
  font-weight: bold; /* 文字加粗 */
}

3. ID 选择器（#id） ：选中带指定id属性的元素

在使用前，给元素的HTML加id属性：

<div id="header">顶部导航栏</div>

#header { /* 选中id="header"的元素 */
  background-color: #f5f5f5; /* 背景色为浅灰色 */
  height: 60px; /* 高度60像素 */
  line-height: 60px; /* 让文字垂直居中（行高=高度） */
}
1.3.2 案例练习-CSS如何美化网页：

一个原来普通朴素的html，加了css摇身一变更美观。 闪电编程班练习区

理解区分：

  • 每个元素如何选择，用的什么类型选择器？
  • 每个样式的维度和具体形式举例

尝试：

  • 去掉、加上css代码，页面出现了什么变化？
/* 页面基础样式 */
body {
    background: #f5f5f5;
    font-family: "Microsoft YaHei", sans-serif;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* 标题样式 */
h1 {
    color: #333;
    font-size: 28px;
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 10px;
    margin-top: 0;
}

h3 {
    color: #555;
    font-size: 20px;
    border-left: 3px solid #2196F3;
    padding-left: 10px;
}

/* 文本样式 */
p {
    color: #666;
    line-height: 1.6;
    font-size: 16px;
}

/* 链接样式 */
a {
    color: #2196F3;
    text-decoration: none;
}

a:hover {
    color: #0b7dda;
    text-decoration: underline;
}

/* 按钮样式 */
button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background: #45a049;
}

/* 输入框样式 */
input[type="text"] {
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    width: 200px;
    font-size: 16px;
}

input[type="text"]:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

/* 容器样式 */
.article {
    background: white;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 图片样式 */
img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin-top: 10px;
}

三、JavaScript：网页的“动作和灵魂”

JavaScript - 网页的编程语言

1995 年，网景公司为了让网页摆脱单纯的 “静态展示”，急需一门能在浏览器端运行的脚本语言，让用户能和网页互动（比如填写表单时实时验证、点击按钮有反馈）。

JavaScript可以操作HTML和CSS，是直接在浏览器里运行的脚本语言，门槛低、上手快，专门为网页交互设计。

注意： JavaScript 和 Java 没有 “亲戚关系”，就像 “雷锋” 和 “雷峰塔”。

案例演示（需要button元素）：

// 当按钮被点击时执行函数
document.querySelector('button').addEventListener('click', function() {
    alert('你好！欢迎来到JavaScript世界！');
});

总结一下：

HTML 决定 有什么，就像人的骨架。

CSS 决定 好不好看，就像人的衣服。

JS 决定 能不能互动。就像人的动作和灵魂。

动手练习1：网页结构分析

目标：分析一个真实网页的结构，理解HTML、CSS和JS的分工。

步骤：

  1. 打开你最喜欢的网站（如淘宝、微博、知乎等）

  2. 右键点击页面，选择"检查"或"查看页面源代码"

  3. 尝试回答以下问题：

    • 找到页面上的主要标题，它使用了什么HTML标签？（尝试在Elements面板中搜索h1、h2等）
    • 找到页面上的导航菜单，它是由什么HTML元素组成的？
    • 尝试禁用一些CSS样式：在Elements面板中，找到一些元素，右键点击并选择"Force state"或直接取消勾选一些CSS属性，观察页面变化

思考：

  • 如果去掉所有CSS，网页会变成什么样子？
  • 如果禁用JavaScript（可以通过浏览器设置实现），网页的哪些功能会失效？

动手练习2：在线编辑器实战

目标：使用在线代码编辑器创建一个小型网页，体验三者协同工作。

步骤：

  1. 打开闪电编程班练习区或CodePen 或 JSFiddle
  2. 在HTML部分输入以下代码：
<div class="container">
    <h1>我的学习笔记</h1>
    <p id="message">今天学习了HTML、CSS和JavaScript的基础知识</p>
    <button onclick="changeText()">更新内容</button>
</div>
  1. 在CSS部分输入以下代码：
.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    text-align: center;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

button:hover {
    background-color: #45a049;
}
  1. 在JavaScript部分输入以下代码：
function changeText() {
    const messages = [
        "HTML是网页的骨架",
        "CSS是网页的外观",
        "JavaScript是网页的行为",
        "三者协同工作创建了现代化网页"
    ];
    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
    document.getElementById('message').textContent = randomMessage;
}
  1. 点击运行按钮，查看结果。尝试点击"更新内容"按钮，观察变化。

挑战：

  • 尝试修改CSS中的颜色值，看看页面样式如何变化
  • 尝试在消息数组中添加你自己的消息
  • 尝试添加一个新的按钮，实现不同的功能

第二部分：JavaScript变量与数据类型

一、什么是变量 (Variable)？

在指挥电脑工作时，我们经常需要临时存储一些信息，比如用户的名字、商品的价格、考试的分数等等。我们用什么来存储这些信息呢？答案就是 变量。

  • 类比：带标签的“储物盒”
    想象一下，你有很多盒子，每个盒子上都贴着一个标签，比如“玩具”、“书籍”、“零食”。当你需要找东西时，只需要看标签就能快速找到对应的盒子 。
    在JavaScript中，变量 (Variable) 就是这样一个带标签的储物盒。

    • 盒子本身：是电脑内存里的一块空间。
    • 标签：就是我们给这个盒子起的名字，叫做 变量名。
    • 盒子里放的东西：就是我们要存储的信息，叫做 值。

二、如何创建和使用变量？—— 声明与赋值

在JS里，我们要使用一个“储物盒”，得分两步：

  1. 声明 (Declaration)：  告诉计算机：“嘿，我要准备一个盒子了！” 我们需要用到一个关键字 let。
  2. 赋值 (Assignment)：  把东西放进这个盒子里。我们用 = 号来完成。

举个例子：

// 1. 声明一个变量，给它起名叫 a_box_for_name
let houzi_name; 

// 2. 赋值，把 "孙悟空" 这个信息放进去
houzi_name = "孙悟空";

当然，我们更喜欢把这两步合在一起写，更简洁：

// 声明一个名为 houzi_name 的变量，并把 "孙悟空" 存进去
let houzi_name = "孙悟空";

现在，这个名为 houzi_name 的“盒子”里，就装着“孙悟空”这个信息了。以后我们想用“孙悟空”这个信息，直接用它的“标签”houzi_name 就可以了。

关键字 let 和 const：两种不同的“盒子”

在ES6之后，我们主要用 let 来声明变量，和 const 来声明常量。

  • let：声明一个 可变的 变量。

    • 类比：一个普通的储物盒。你今天可以放玩具，明天可以把玩具拿出来，换成零食。盒子里面的东西可以随时更换 。
    let myAge = 18;
myAge = 19; // 没问题，明年我就19岁了，可以改

  • const：声明一个 不可变的 常量。

    • 类比：一个被胶带封死的“纪念品盒” 。一旦你把东西放进去并封存，就不能再换成别的东西了 。它通常用来存储那些我们不希望被意外修改的值，比如圆周率PI、你的出生日期等。
    const myBirthday = "2005-01-01";

三、数据类型 (Data Types)：盒子里能放什么？

我们的“储物盒”里不能什么都乱放，得分门别类。比如，有的盒子专门放文字，有的专门放数字。这些类别，就是 数据类型。JS是动态类型语言，意味着一个盒子（变量）可以先后存放不同类型的数据。

我们先来认识几种最基本、最常用的数据类型 ：

  1. 字符串 (String)

    • 是什么：  就是文本内容，比如一句话、一个名字、一个地址。

    • 怎么写：  必须用 英文的 单引号 ' ' 或双引号 " " 包起来。

    • 例子：

      let myName = "齐天大圣";
let mySkill = '七十二变';

  2. 数字 (Number)

    • 是什么：  就是我们数学里学的数字，可以是整数，也可以是小数。

    • 怎么写：  直接写数字，不要加引号。

    • 例子：

      let myAge = 500;
let goldenHoopStickWeight = 13500; // 金箍棒的重量（斤）
let pi = 3.14159;

  3. 布尔值 (Boolean)

    • 是什么：  这个类型非常特殊，它只有两个值：true (真) 和 false (假)。它就像一个开关，只有开和关两种状态。通常用来表示判断的结果。

    • 怎么写：  直接写 true 或 false，不要加引号。

    • 例子：

      let isHandsome = true; // 我帅吗？帅！
let isDefeated = false; // 我被打败了吗？没有！

四、动手练习 (15分钟)

练习目标：  亲手创建不同数据类型的变量，并在浏览器的“控制台”中看到它们。

准备工作：

  1. 在线编辑器中打开 html窗口，复制以下代码进去：
  2. 鼠标右键单击网页空白，点击检查，切换到控制台
<!DOCTYPE html>
<html>
<head>
  <title>我的第一个JS练习</title>
</head>
<body>

  <h1>请打开控制台查看结果</h1>

  <script>
    // 在这里写你的JavaScript代码！
    
  </script>

</body>
</html>

练习任务：  “我的个人名片”

请在 <script> 标签内，完成以下任务：

  1. 使用 let 或 const 创建一个变量来存储你的 名字 (字符串类型)。
  2. 创建另一个变量来存储你的 年龄 (数字类型)。
  3. 创建第三个变量，用来表示你 是否是学生 (布尔类型，true 或 false)。
  4. 使用 console.log() 指令，将这三个变量一一打印到控制台中。console.log() 是一个神奇的指令，你可以把它括号里的任何东西显示在控制台里，方便我们调试和查看。

参考代码：

// 在<script>标签内写入：

// 1. 创建变量存储名字
const myName = "白骨精"; // 把这里的名字换成你自己的

// 2. 创建变量存储年龄
let myAge = 27; // 把这里的年龄换成你自己的

// 3. 创建变量表示是否是学生
const isStudent = true; // 如果你是学生就是true，不是就是false

// 4. 在控制台打印这些信息
console.log("我的名字是：");
console.log(myName);

console.log("我的年龄是：");
console.log(myAge);

console.log("我是不是学生？");
console.log(isStudent);

第三部分：玩转文字——JS字符串与打印

一、字符串的“拼接”

在编程中，一个非常常见的操作就是把几段独立的文字“拼接”成一整句话。

  • 类比：串珠子。想象一下，你有一堆单独的珠子（独立的字符串），你想用一根线（+号）把它们串成一条项链（一个新的、更长的字符串）。

在JavaScript中，我们使用 + 号来拼接字符串。

举个例子：

let familyName = "孙";
let givenName = "悟空";

// 使用 + 号拼接
let fullName = familyName + givenName;

console.log(fullName); // 控制台会输出 "孙悟空"

注意，+ 号只是把它们紧紧地贴在一起，不会自动添加空格。如果需要空格，你需要手动把它作为一个字符串加上去。

let greeting = "你好";
let name = "八戒";

let fullGreeting = greeting + "，" + name + "！"; // 加上逗号和感叹号

console.log(fullGreeting); // 控制台会输出 "你好，八戒！"

输出结果：

你好，八戒！

当字符串和数字用 + 连接时，JavaScript会很“聪明”地把数字也变成字符串，然后进行拼接 。

let heroName = "悟能";
let pigAge = 800;

let intro = heroName + "已经" + pigAge + "岁了。";
console.log(intro); // 输出："悟能已经800岁了。"

二、print：如何让用户看到信息？

我们刚才一直用的 console.log()，是给我们程序员自己看的“后台日志”。如果想在网页上弹出一个窗口，给普通用户看，我们可以用另一个指令：alert()。

  • alert(): 在浏览器页面上弹出一个带“确定”按钮的警告框。

举个例子：

alert("妖怪，哪里跑！");

你可以把这行代码写到你的 <script> 标签里，刷新页面看看效果。

三、动手练习 (10分钟)

练习目标：  综合运用变量和字符串拼接，做一个“智能迎宾机器人”。

练习任务：
这个机器人需要向访客做自我介绍。请在你的 index.html 的 <script> 标签里完成以下代码：

  1. 创建几个变量，分别存储机器人的名字（比如叫“小智”）、制造年份（比如2024）、和它的功能（比如“迎宾和咨询”）。
  2. 使用字符串拼接，将这些变量组合成一段通顺的自我介绍。例如：“大家好，我是机器人小智，我诞生于2024年，我的主要功能是迎宾和咨询。很高兴为您服务！”
  3. 使用 alert() 指令，将这段完整的自我介绍通过弹窗显示出来。

参考代码：

// 在<script>标签内写入：

const robotName = "小智";
const birthYear = 2024;
const mainFunction = "迎宾和咨询";

// 使用 + 号拼接成一段完整的介绍
const introduction = "大家好，我是机器人" + robotName + "，我诞生于" + birthYear + "年，我的主要功能是" + mainFunction + "。很高兴为您服务！";

// 使用 alert 弹窗显示
alert(introduction);

第四部分：让程序学会思考——判断与选择 if

一、为什么需要判断？

到目前为止，我们的代码都是从上到下一行一行执行的，非常“死板”。但真实世界充满了各种选择。

  • 生活中的例子：  

    • 如果 明天天气好，就去公园。否则就待在家里看电影。
    • 如果 你的考试分数大于等于60分，就及格了。否则就不及格。
    • 如果 你想去北京，并且 想快点到，就坐飞机。如果 你想省钱，就坐火车。

程序也需要这种“做决定”的能力。if 语句就是JavaScript中用来实现这种逻辑判断的工具 。它告诉计算机：“如果某个条件成立，就做这件事；否则，就做另一件事。”

二、if 语句的基本结构

最简单的 if 结构如下：

if (条件) {
  // 如果条件为 true (成立)，就执行这里的代码
}
  • if：关键字，意思是“如果”。
  • ( ) ：圆括号里放的是 判断条件，这个条件的结果必须是一个布尔值（true 或 false）。
  • { } ：花括号里放的是 代码块，只有当条件为 true 时，这里的代码才会被执行。

举个例子：

let myScore = 85;

if (myScore >= 60) {
  console.log("恭喜你，考试及格了！"); // 这句话会被打印出来
}

if (myScore === 100) {
  console.log("你是天才！满分！"); // 这句话不会被打印，因为条件不成立
}

注意：  在JS中，判断“等于”我们通常用 === （三个等号），它会严格比较值和类型。>= 表示大于等于，< 表示小于，等等。

三、if...else：二选一的选择

很多时候，我们不仅要处理条件成立的情况，也要处理条件不成立的情况。这时就需要 else。

if (条件) {
  // 如果条件为 true，执行这里的代码
} else {
  // 否则 (条件为 false)，执行这里的代码
}
  • else：关键字，意思是“否则”。它提供了一个备用方案。

举个生活场景例子：  

// 模拟天气情况
let isRaining = true; 

if (isRaining === true) {
  console.log("出门记得带伞！");
} else {
  console.log("天气真好，去散步吧！");
}
// 因为 isRaining 是 true，所以会输出 "出门记得带伞！"

四、if...else if...else：多选一的复杂选择

如果我们的选择不止两种呢？比如根据分数评定“优秀”、“良好”、“及格”、“不及格”。这时就需要 else if 来添加更多的判断分支。

if (条件1) {
  // 如果条件1成立，执行这里
} else if (条件2) {
  // 如果条件1不成立，但条件2成立，执行这里
} else if (条件3) {
  // ...可以有很多个 else if
} else {
  // 如果以上所有条件都不成立，执行这里
}

举个成绩评定的例子：  

let score = 75;

if (score >= 90) {
  console.log("优秀！你是学霸！");
} else if (score >= 80) {
  console.log("良好！继续努力！");
} else if (score >= 60) {
  console.log("及格！下次要加油哦！");
} else {
  console.log("不及格！需要补考了。");
}

五、动手练习：买票(10分钟)

练习任务：

  • 年龄小于 12 岁 → 儿童票
  • 年龄 12~60 岁 → 成人票
  • 年龄大于 60 岁 → 老年票

参考代码：

let age = 8;

if (age < 12) {
  console.log("您可以买儿童票");
} else if (age <= 60) {
  console.log("您可以买成人票");
} else {
  console.log("您可以买老年票");
}

尝试修改 age 的值，看输出结果是否符合逻辑。

四、总结与练习

课程总结

让我们一起快速回顾一下今天课程的收获：

  1. 网页的构成：  我们知道了网页是由 HTML（骨架）、CSS（装修）和 JavaScript（灵魂）三剑客组成的。我们学习的JS，就是赋予网页交互能力的魔法。
  2. 变量 (Variables)：  我们学会了使用“带标签的储物盒”——变量（let 和 const）来存储信息 。
  3. 数据类型 (Data Types)：  我们认识了最基本的数据类型：字符串（文字）、数字和布尔值（真/假），知道了储物盒里可以放不同种类的东西。
  4. 字符串操作：  我们学会了用 + 号像串珠子一样把文字拼接起来,学会了使用console.log() 和alert() 两种不同效果的打印方式。
  5. 判断与选择 (if 语句)：  我们学会了用 if...else if...else 结构，让程序能够像人一样，根据不同的条件，做出不同的选择和行为 。

大家每个人都成功地编写并运行了自己的JavaScript代码，你们已经不再是编程世界的门外汉，而是已经踏入编程大门的工程师！

课后练习

根据下图的买菜生活场景，

结合本节课学习的HTML、变量、字符串、条件判断if相关知识，

写出完整的可在控制台打印文字输出的HTML+JavaScript代码。

image.png

html模板代码：

 <!DOCTYPE html>
    <html>
    <head>
      <title>我的第一个JS练习</title>
    </head>
    <body>

      <h1>请打开控制台查看结果</h1>

      <script>
        // 在这里写你的JavaScript代码！
        // 定义变量存储价格、白菜描述、是否便宜
        let price = 6;
        let cabbageDescription = "西双版纳大白菜";
        let isCheap = price < 5;
        // 根据是否便宜决定购买行为
        if (isCheap) {
            console.log(`价格是${price}元一斤，很便宜，买2斤`);
        } else {
            console.log(`价格是${price}元一斤，不便宜，扬长而去`);
        }
      </script>

    </body>
    </html>
avatar
文章
阅读
粉丝