加入js

首先创建一个 script 元素。 此元素用于将 JavaScript 加载到 HTML 文件中。

<script src="./script.js"></script>

js 的位置

script 标签位于 HTML 的 head 中，这意味着你的代码在浏览器读取 HTML 之前运行，并且 document.querySelector() 将看不到该按钮 - 因为浏览器尚未处理它。


要解决此问题，将 script 元素移出 head 元素，并将其放置在 body 元素的末尾（就在结束标签 之前）。

控制台

开发者控制台是最强大的工具之一。 根据浏览器不同，可能需要通过按 F12 或 Ctrl+Shift+I 来打开它。 在 Mac 上，可以按 Option + ⌘ + C 并选择“控制台”。 也可以点击预览窗口上方的“控制台”按钮来查看我们的内置控制台。


开发者控制台将包含代码产生的错误，也可以使用它来查看代码中变量的值，这有助于调试。

变量关键字

如果不想给一个变量分配一个新的值， 最好是使用 const 关键字来声明这个变量，而不是使用 let 关键字来声明这个变量。 否则会指示 JavaScript 在你意外重新分配它时抛出一个错误。

DOM

JavaScript 使用文档对象模型（又称 DOM）与 HTML 交互。
DOM 是一个代表 HTML 的对象树。 可以使用 document 对象来访问 HTML，其代表你的整个HTML文档。

找到特定元素的一个方法是使用 querySelector() 函数。 querySelector() 方法需要一个 CSS 选择器作为参数，并返回与该选择器匹配的第一个元素。

button

button元素具有一个名为 onclick 的特殊属性，你可以使用它来确定当有人单击该按钮时会发生什么。

可以通过几种不同的方式访问 JavaScript 中的属性。 第一个是使用点符号。 用点表示法将按钮的 onclick 属性设置为函数引用 button1.onclick = goStore; innerText 属性控制 HTML 元素中显示的文本。

注释

单行注释

// I am a single-line comment

多行注释

/*I am a multi-line comment
*/

CSS

button {cursor: pointer;color: #0a0a23;background-color: #feac32;background-image: linear-gradient(#fecc4c, #ffac33);  # 线性渐变背景​​border:3px solid #feac32;
}

转义

将文本 Store 括在双引号中。 如果字符串已用双引号引起来，需要转义 Store 周围的引号。 可以使用反斜杠 \ 来转义它们。

函数参数

函数参数充当调用函数时传递给该函数的值的占位符。

对象

对象是存储键值对的非原始数据类型。
非原始数据类型是可变数据类型，不是 undefined、null、boolean、number、string 或 symbol。 可变意味着数据在创建之后可以被更改。

属性

对象与数组类似，不同之处在于你不是使用索引来访问和修改其数据，而是通过属性来访问对象中的数据。

属性由键和值组成。 键是属性的名称，值是属性中存储的数据。


如果对象的属性名称（键）中包含空格，则需要在名称周围使用单引号或双引号。


与数组值一样，对象属性用逗号分隔。

属性访问

访问对象的属性有两种方式：点表示法（.）和括号表示法（[]），类似于数组。

提前知道要访问的属性的名称时，可以使用点符号。 访问对象属性的第二种方法是括号表示法（[]）。
如果访问的对象的属性名称中包含空格，则需要使用括号表示法。

数组

数组中的值通过索引访问。 索引是数值，从 0 开始 - 这称为从零开始的索引。 arg[0] 将是 arg
数组中的第一个元素。这被称为括号表示法。

style 属性用于访问元素的内联样式，display 属性用于设置元素的可见性。

.includes() 方法确定数组是否包含元素，并将返回 true 或 false。

Math

JavaScript 中的 Math 对象包含数学常量和函数的静态属性和方法。
其中之一是 Math.random()，它生成一个从 0（含）到 1（不含）的随机数。
另一个是 Math.floor()，它将给定的数字向下舍入为最接近的整数。