Zootopia Webdev Class

介绍什么是程序，程序员的工作是什么，帮助小朋友初步了解HTML+CSS+JavaScript

Transcript

1. 疯狂动物城投票 大 战！🎬 跟着朱迪和尼克学编程
2. 什么是程序员？ 像建筑师 🏗 建筑师设计房 子 ，程序员 用 代码建造 网 站和APP。从零开始， 一 砖 一 瓦搭建起来。
3. 我们身边的程序 学习 通过 网页 ， 比 如百度、 谷 歌，帮助我们快速查 找资料 社交 QQ、微信、钉钉 方 便我们社交和 工 作 购物 淘宝、京东让我们 足 不出户就能买到想要的东 西 娱乐 玩游戏：我的世界、蛋仔派对，看视频：抖 音 ，Bilibili 智能 生 活 智能 音 箱、 豆 包AI让 生 活变得更聪明 💫 程序让你的 生 活更加便捷、 高 效，是连接虚拟与现实的超能 力 。
4. 程序员每天做什么？ 编写程序 把想法变成电脑能理解的语 言 ，让程序帮我们解决实际问题。 优化程序 让程序跑得更快，功能更实 用 ，提升我们的体验，节省时间。 捉“ 虫子 ”（修复Bug） 当程序出错时，像侦探 一 样找出问题在哪 里 ，然后修复它。
5. 今天要做什么？ 我们要做 一 个投票 网 站，选出你们 心 中最喜欢的 角色 朱迪、尼克、盖瑞……你最喜欢谁？让我们 用 代码来统计 大 家 的选择！
6. 认识搭建 网 站的三个好朋友 HTML 🏗 负责搭框架，告诉 网页 "这 里 是标题，那 里 是 按钮"。就像盖房 子 要先搭好柱 子 和墙壁 一 样！ CSS 🎨 负责打扮 网页 ，给它涂上漂亮的颜 色 、调整 大小 、加上圆 角 。让 网页 从 黑白 变成彩 色 ！ JavaScript (JS)⚡ 负责让 网页 动起来！点击按钮会有反应，数 字会变化。没有他， 网页 就只是 一 张不会动 的图 片 。
7. HTML - 房 子 的框架 🏗 HTML 用 标签来标记内容，告诉电脑"这是标题"、"这是按钮"。 <标题>疯狂动物城投票器</标题> <按钮>点击投票</按钮>
8. CSS - 装扮房 子 🎨 CSS就像魔法画笔，能把 黑白 简陋的 网页 变成五彩缤纷的艺术品。颜 色 、 大小 、圆 角 、阴 影…… 一 切都由CSS决定！ 例如装修按钮： 按钮 { 颜 色 : 紫 色 ; }
9. JavaScript - 让房 子 活起来 ⚡ 如果没有JavaScript，按钮就只是个装饰，点了也没反应。有了JavaScript，按钮就活了！ 能互动、能响应、能变化。 点击按钮 用鼠 标点 一 下投票按钮 JavaScript 工 作 程序开始运 行 ，计算新的票数 票数增加 屏幕上的数字 立 刻变化：0 → 1 → 2 → 3...
10. 我们的计划 📋 现在你已经认识了HTML、CSS、JavaScript这三个好朋友，让我们开始动 手 做投票 网 站吧！ 第 一 步：搭框架 🏗 用 HTML写出基本内容：标题、 角色 名字、投 票按钮、显示票数的地 方 。就像搭积 木一 样， 先把零件准备好。 第 二 步：美化 页面 🎨 用 CSS让 网 页 变漂亮：加上颜 色 、调整 大 小 、添加圆 角 和阴影。把 黑白 简陋版变成彩 色 精美版！ 第三步：加 入 互动 🎯 用 JavaScript让按钮能 工 作：点击后票数会增 加。这是最神奇的 一 步， 网页 从此活了起来！
11. 第 一 步 - 搭框架 🏗 朱迪 🐰 让我们为朱迪警官建 立 投票卡 片 ！ 需要的内容： 标题 - 大大 的"朱迪" 名字 - 角色 介绍 按钮 - 用 来投票 票数 - 显示得了多少票 HTML 代码示例： <div class="card">
 <h1>Judy</h1>
 <div>勇敢正义的兔 子 警官</div>
 <p>票数：<span id="judy">0</span></p>
 <button>投我 一 票</button>
 </div>

12. 第 二 步 - 美化 页面 🎨 1 添加颜 色 🎨 给标题加上橙 色 ，给按钮加上漂亮的主题 色 ，让 页面 充满活 力 ！ 2 圆 角 边框 ⭕ 把 方方 正正的按钮和卡 片 变成圆润的，看起来更可爱更友 好。 3 阴影效果 🌟 给卡 片 加上淡淡的阴影，让它看起来像浮在 页面 上 一 样，有 立 体感！ CSS 代码示例： body {
 background-color: skyblue;
 }

13. 第三步 - 加 入 互动 🎯 让按钮能点击！ 这是最激动 人心 的时刻！我们要 用 JavaScript让 网页 真正"活"起来。当你点 击按钮时，神奇的事情就会发 生 。 1 你点击按钮 用鼠 标点 一 下"投我 一 票" 2 JavaScript开始 工 作 程序计算结果 3 数字会变！ 票数从 0 变成 1，再变成 2、3... JavaScript 代码示例 let votes = 0;
 
 function vote() {
 votes = votes + 1;
 document.getElementById("judy").textContent = votes;
 }
 

14. 你们学到了什么？🎓 认识了HTML、CSS、JavaScript 三个朋友 一 起 工 作：HTML搭框架，CSS变漂亮，JavaScript加互动。它 们是做 网页 的基础 工 具。 做出了投票 网 站 你可以分享给同学、朋友， 大 家 一 起 用 。
15. 回家可以做什么？💡 编程学习不应该只停留在课堂上！回家后，你可以继续练习，把今天学的知识 用 起来。这 里 有 一 些有趣的项 目 创意，快来试试吧！ 给同学投票 👥 做 一 个班级投票系统：最受欢迎同学、最佳运动员、学习 小 能 手 ……让 全班 一 起参与投票！ 给动漫 角色 投票 🎬 把疯狂动物城换成你喜欢的动漫： 火 影、海贼王、宝可梦……为你的偶 像拉票！ 做家务积分表 📝 每做 一 次家务点 一 次按钮，积分累积。爸爸妈妈 一 定会夸你既懂事 又 会 编程！ 做倒计时器 ⏰ 距离周末还有 几 天？距离 生日 还有多久？ 用 程序 自 动计算时间！ 把今天学的 用 起来，在实践中进步！遇到问题就是学习的机会，不要放弃。
16. 继续学习的资源 📚 编程之旅才刚开始！想要继续学习、变得更厉害？这 里 有 一 些特别适合 小 朋友的编程 网 站和资源，都是免费的哦！ Scratch 入 门 课程 Scratch 不 用 敲代码， 用 拖拽积 木 的 方 式编程！可以 做游戏、动画，超级有趣。全球 几 千万 小 朋 友都在 用 。 学习 Web 开发 Mozilla 为 Web 开发的纯新 手 提供编写 网 站的基本 技巧， 而非 意在让你从“新 手 ”变成“专家”，但 能让你从“新 手 ”变得“熟练”。 计算机编程 Khan Academy 你可以边玩边学JavaScript、HTML/CSS和 SQL。这 里 有详细的视频教程，每 一 步都有 反馈，帮你更快掌握编程 小 技巧！ 每天练习15-30分钟， 比一 次学很久效果更好。
17. 有奖提问 🎁
18. HTML 能做什么？ 请从以下选项中选出正确答案： A. 实现 网页 互动 B. 美化 网页 样式 C. 搭建 网 页 结构
19. CSS 能做什么？ 请从以下选项中选出正确答案： A. 搭建 网页 结构 B. 美化 网页 样式 C. 实现 网 页 互动
20. JavaScript 能做什么？ 请从以下选项中选出正确答案： A. 实现 网页 互动 B. 搭建 网页 结构 C. 美化 网 页 样式
21. 让按钮变成圆 角 ，需要哪个朋友的帮助？ 请从以下选项中选出正确答案： A. HTML B. CSS C. JavaScript
22. 在 网页 上显示 一 张图 片 ，需要哪个朋友的帮助？ 请从以下选项中选出正确答案： A. HTML B. CSS C. JavaScript
23. 点击"赞"按钮，点亮爱 心 ，需要哪个朋友的帮助？ 请从以下选项中选出正确答案： A. HTML B. CSS C. JavaScript