跟着月影学 JavaScript|青训营笔记(切换白天和黑夜1)

111 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天。

写好js的原则:各司其职

  • html负责内容
  • css负责样式
  • js负责行为

明确js负责的是行为之后,课堂上举出了实现白天模式和黑夜模式切换的三组代码。(本文只做第一组代码的笔记)

代码一

使用到了html、css和js共同实现效果。

HTML部分

image.png

使用了简单的 headermain结构。
其中 header 部分书写了标题和一个用于切换黑夜和白天的按钮。main部分书写了图片和文字部分内容。

CSS部分

image.png

  1. overflow:hidden声明的效果如图,点击尝试overflow属性

image.png 即超出边框的内容完全隐藏,也不设置滚动条。

2.box-sizing:border-box tells the browser to account for any border and padding in the values you specify for an element's width and height.点击尝试box-sizing属性

image.png

3.background:transparent声明:使背景透明。(该属性可以不设置,默认属性值就是透明
4. 使用了div.pic img {width: 100%;}使图片以及段落部分内容都呈现与bodyhtml标签等宽。

js部分

image.png

  • 网课中讲到这部分代码是通过指定到HTML部分中的button,并确立一个点击事件
  • 使用if判断HTML中的button是不是太阳的标记。
    • 如果是太阳的标记,改变背景颜色为黑色,文字颜色为白色,并且改变标记为月亮标记;
    • 如果不是太阳标记,就改变背景颜色为白色,文字颜色为黑色,标记改为太阳标记。
  • 最终通过这个点击事件和if判断来实现白天和黑夜的切换。
  1. getElementById() 是一个js函数,用于指定文档中的元素。

image.png js开始对btn常量进行了定义,const后定义的是常量,只能赋值一次且不能重新进行声明。
此处网课中讲到是用btn指定到HTML中的

  1. addEventListener():该方法将事件处理程序附加到元素。

  2. 匿名函数(即js中没有名字的函数)还有另一种我们称之为箭头函数的写法,箭头函数使用 () => 代替 function ()

补充:js的三种声明

  1. var 声明一个变量,可选初始化一个值。

  2. let 声明一个块作用域的局部变量,可选初始化一个值。

  3. const 声明一个块作用域的只读常量。

此版本的优缺点

  1. 这个版本中js部分较简单,初学者只需要理解DOM API,就能够书写出这样一个js。
  2. js部分结构比较冗杂不够简洁。
  3. 白天到夜晚的改变属于样式的改变,js负责的是行为,样式应该由css负责,不符合各司其职的标准,因此不能算作是一份好的js代码。