Skip to content

Latest commit

 

History

History
114 lines (80 loc) · 7.31 KB

2.md

File metadata and controls

114 lines (80 loc) · 7.31 KB
Raw

JavaScript 入门与 DOM 基础操作

恭喜你来到了第二站！现在我们要学会让网页「活」起来，赋予它交互能力。在这一节中，我们将学习 JavaScript 的基础知识，以及如何使用 JavaScript 操作 DOM 元素。

学习目标

  • 掌握 JavaScript 的基本语法
  • 了解在 JavaScript 中操作 DOM 元素的方式
  • 掌握如何使用 DOM API 获取页面元素、监听事件、修改元素内容属性等操作

学习提示

编程语言都是共通的。如果你之前学过其他编程语言，那么学习 JavaScript 会更加容易。如果你是刚开始接触编程，也不用担心，我们提供的学习资料会从基础开始，一步步带你学习。

如果你的校内课程有 C 语言课程，那么你可以参考 C 语言的学习经验，来学习 JavaScript。先学哪一个对学习另外一个都是有帮助的。

在学习前端的过程中，如果遇到不会的东西，可以去 MDN Web Docs 上搜索一下试一试，大部分问题都能在这里找到答案。

概念扫盲

以下概念了解即可，无需死记硬背。

  • JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等 —— JavaScript 就在其中。

学习资料

当遇到不懂的地方时，首先要尝试自己解决，可以去使用百度、谷歌等搜索引擎寻求帮助。具备利用搜索引擎解决自己问题的能力非常非常重要！如果还是不会，可以直接在群里提问。

JavaScript

  • 什么是 JavaScript，MDN Web Docs。
    • 重点关注「它到底可以做什么？」一节，其次关注「怎样向页面添加 JavaScript？」和「注释」。
    • 这个页面上的内容很多，无需全部理解。我们只需要了解 JavaScript 大致在干什么就行了，如果遇到不懂的地方，可以先跳过。
  • 选读：JavaScript 初体验，MDN Web Docs。
    • 这个页面上有一份简单的 JavaScript 代码示例，可以先看一下，不要求全部理解。
    • 在「示例 —— 猜数字游戏」一节中，还给出了解读任务需求的方法指引，这对以后处理各种需求会有帮助。
  • JavaScript 基本语法，网道。
  • 查找并解决 JavaScript 代码的错误，MDN Web Docs。
    • 这个页面上介绍了如何解读 JavaScript 代码的报错提示。
  • 数据类型，网道。
  • 数据类型转换，网道。
  • console 对象与控制台，网道。
    • 只需要掌握 console.log 的用法即可，其他的不必深究。
  • Date 时间库，网道。

DOM API

在这个阶段中，我们将会学到一些基础的 DOM 操作，更深层次的内容将会在后续的学习中逐渐展开。

  • API 是什么？
    • 大致了解即可。
    • 链接的标题跟实际页面的标题有出入，因为笔者觉得这篇文章的科普性质更强一些。
  • 获取页面元素的三种主要途径
  • Element 对象，网道。
    • 上面获取的元素就会以 Element 对象的形式返回。
    • 实际上会基于 Element 对象派生出很多其他的对象，比如 HTMLInputElement HTMLDivElement 等，这些做一些了解即可，每个对象都有自己的一些特殊属性和方法。
    • 重点关注 attributes className classList innerHTML innerText style 等属性以及其相关方法。
  • 事件监听器
    • 提示：不要再用 onclick onsubmit 这种老掉牙的方式绑定事件了，直接看使用 addEventListener 的教程吧！
    • addEventListener()
      • 常见事件：click scroll submit change input keydown keyup 等（根据英文应该能看出来是什么操作触发的）。
    • removeEventListener()
    • Event 对象
      • 实际上会基于 Event 对象派生出很多其他的事件对象，比如 MouseEvent KeyboardEvent 等，这些做一些了解即可。
      • 用的比较多的有 target、currentTarget preventDefault stopPropagation 等属性和方法。

作业

作业不可以修改模板中的代码内容，只能在 <script> 标签内补全相应代码。

一

请基于 demo1.html 进行修改，完成以下任务：

  1. 页面上的时间每秒更新一次。
  2. 鼠标移入 #blue 的时候 暂停时间的更新，并且有边框放大效果。
  3. 鼠标移出 #blue 的时候 继续时间的更新，CSS 样式还原。
  4. 点击定格按钮，#red 里面显示点击时候的时间。

效果图：

二

请基于 demo2.html 进行修改，并按照文件中的要求和效果图完成任务。

效果图：

三

请基于 demo3.html 进行修改，并按照文件中的要求和效果图完成任务。

效果图：

提交方式

请将代码提交至 west2-online-reserve/collection-frontends，提交方法可以参考该仓库中的说明。