加入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()，它將給定的數字向下舍入為最接近的整數。