这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天。
写好js的原则:各司其职
- html负责内容
- css负责样式
- js负责行为
明确js负责的是行为之后,课堂上举出了实现白天模式和黑夜模式切换的三组代码。(本文只做第一组代码的笔记)
代码一
使用到了html、css和js共同实现效果。
HTML部分
使用了简单的 header
、main
结构。
其中 header
部分书写了标题和一个用于切换黑夜和白天的按钮。main
部分书写了图片和文字部分内容。
CSS部分
overflow:hidden
声明的效果如图,点击尝试overflow
属性
即超出边框的内容完全隐藏,也不设置滚动条。
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
属性
3.background:transparent
声明:使背景透明。(该属性可以不设置,默认属性值就是透明)
4. 使用了div.pic img {width: 100%;}
使图片以及段落部分内容都呈现与body
、html
标签等宽。
js部分
- 网课中讲到这部分代码是
通过指定到HTML部分中的button,并确立一个点击事件
。 - 使用
if
判断HTML中的button
是不是太阳的标记。- 如果是太阳的标记,改变背景颜色为黑色,文字颜色为白色,并且改变标记为月亮标记;
- 如果不是太阳标记,就改变背景颜色为白色,文字颜色为黑色,标记改为太阳标记。
- 最终通过这个点击事件和if判断来实现白天和黑夜的切换。
getElementById()
是一个js函数,用于指定文档中的元素。
js开始对
btn
常量进行了定义,const
后定义的是常量,只能赋值一次且不能重新进行声明。
此处网课中讲到是用btn
指定到HTML中的
-
addEventListener()
:该方法将事件处理程序附加到元素。 -
匿名函数(即js中没有名字的函数)还有另一种我们称之为箭头函数的写法,箭头函数使用
() =>
代替function ()
补充
:js的三种声明
此版本的优缺点
- 这个版本中js部分较简单,初学者只需要理解DOM API,就能够书写出这样一个js。
- js部分结构比较冗杂不够简洁。
- 白天到夜晚的改变属于样式的改变,js负责的是行为,样式应该由css负责,不符合各司其职的标准,因此不能算作是一份好的js代码。