如何写好JS

JS 操作浏览器发生变化的属性和方法

JS书写位置

行内式:直接把代码书写在标签身上
a 标签:书写在 href 属性上
非 a 标签:书写在行为属性上

内嵌式:把代码书写在一个 script 标签对内
内嵌式 JS 代码, 不需要依赖任何行为, 打开页面就会执行

外链式:把代码书写在一个 .js 文件内

JS定义变量

变量:在程序运行过程中, 保存一个中间值使用
var num=100
是赋值的意思, 指的是把一个数据给到一个变量里面保存

总结

在程序运行过程中, 保存一个中间值使用
变量的书写 var num = 100
一个变量只能保存一个值\

变量只能由数字字母下划线美元符组成
变量不能由数字开头
严格区分大小写
不能使用关键字
尽可能使用一些有意义的单词或者拼音

JS数据类型转换

转数值

Number();2. parseInt();3. parseFloat();

...
<script>
  // 准备一个变量, 赋值为字符串类型内容
  var s1 = '100.234'
  console.log(s1)
  console.log(typeof s1)
  
  // 使用 parseInt() 方法进行一下转换
  var n1 = parseInt(s1)
  console.log(n1)
  console.log(typeof n1)

 // 使用 parseFloat() 方法进行一下转换
 var n2 = parseFloat(s1)
 console.log(n2)
 console.log(typeof n2)

 </script>
 ...

转字符串

String();2. toString();

转布尔

Boolean();

…
<script>

// 依次转换一下五个为 false 的内容
console.log(Boolean(0))
console.log(Boolean(NaN))
console.log(Boolean(‘’))
console.log(Boolean(undefined))
console.log(Boolean(null))

</script>
…

案例：回到顶部栏

确认需求 :

滚动条滚动超过临界点，顶部通栏显示,否则隐藏
滚动条滚动超过临界点，顶部通栏显示,否则隐藏
点击回到顶部按钮，滚动条滚动回到顶部

布局结构 :

需要一个顶部通栏标签和一个回到顶部按钮标签
让页面超过浏览器可视窗口高度
设置顶部通栏样式，默认是在超出页面的

代码逻辑 :

给浏览器绑定滚动事件, 实时获取浏览器卷去的高度
判断卷去的高度决定隐藏还是显示
给回到顶部按钮绑定点击事件

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  height: 3000px;
}

.header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
  background-color: skyblue;

  transition: top .5s linear;

  position: fixed;
  top: -80px;
  left: 0;
}

.goTop {
  width: 50px;
  height: 50px;
  background-color: pink;
  font-size: 20px;
  text-align: center;
  line-height: 25px;
  color: #fff;

  position: fixed;
  bottom: 50px;
  right: 50px;

  display: none;
}
</style>
</head>
<body>
<div class="header">顶部通栏</div>
<div class="goTop">回到顶部</div>

<script>
// 1. 获取元素
var header = document.querySelector('.header')
var goTop = document.querySelector('.goTop')

// 2. 绑定滚动事件
window.onscroll = function () {
  // 2-1. 获取浏览器卷去的高度
  var height = document.documentElement.scrollTop || document.body.scrollTop

  // 2-2. 判断卷去的高度
  if (height >= 300) {
    // 显示
    header.style.top = '0px'
    goTop.style.display = 'block'
  } else {
    // 隐藏
    header.style.top = '-80px'
    goTop.style.display = 'none'
  }
}

// 3. 绑定点击事件
goTop.onclick = function () {
  // 3-1. 让页面滚动回到顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
</script>
</body>
</html>

JS三大原则

各司其责

JS，深色和浅色两种浏览模式实现优化代码实现

HTML/CSS/JS各司其责
应当避免不必要的由JS直接操作样式
用class来表示状态
纯展示类交互寻求零JS方案

HTML部分：

<body>
<input id="CheckBox" type="checkbox" /> 
<div class="modeBtn">  
<label for="CheckBox"></label> 
</div>  
</body>

CSS部分：

<style>
#CheckBox:checked + .content {  
background-color: black;  
color: white;  
transition: all 1s;
}  

#CheckBox {  
display: none; 
}
</style>

总结

HTML负责结构，CSS负责样式，JavaScript负责交互。有助于保持代码的可维护性和扩展性。
免直接使用JavaScript来操作样式，而是通过CSS的选择器和类来控制样式。
虽然有直接使用class来表示状态，但通常使用class来添加、移除特定的样式，以反映元素的状态。
点击复选框时的样式改变是通过CSS完成的，没有用到JavaScript，仅通过CSS实现纯展示类的交互效果。

通过合理的结构和样式管理，能够在不依赖大量JavaScript代码的情况下实现简单的用户界面交互。

JavaScript三大原则上 | 青训营