JavaScript 學習（一） 瞭解JavaScript
前言：最近專案比較緊，有點小壓抑，不知道什麼時候才能結束這無聊的工作，於是想著學習一點新的知識，前段時間學習了Html標籤，以及CSS樣式，感覺收穫不是很大，所以就以記錄的形式來進行學習，也方便我們這群小白一起進步，此外如果對Kotlin也感興趣的童鞋，希望你關注我的文章哦，文章的結尾都會附加上視訊連結（視訊並非本人錄製），讓我們一起奮鬥吧！
目錄
一、瞭解JavaScript
1.概念
JavaScript 是一種具有面向物件能力的、解釋型的程式設計語言。是基於物件和事件驅動並具有相對安全性的客戶端指令碼語言。
2.使用方式
① 確定物件
② 確定屬性
③ 確定事件
④ 用js實現功能
舉例說明（體驗JS的神奇）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <title>體驗JavaScript的神奇</title> <style> #div1,#div2{background-color: antiquewhite ;width: 100px;height: 50px;border: 1px solid #666 ;font-size: 10px;display: none} #div2{display: block} </style> </head> <body> <input type="checkbox" onmouseover="div1.style.display='block'" onmouseout="div1.style.display='none'">十天內免登陸 <div id="div1"> 跟我一起來體驗JS的神奇... </div> <div id="div2"> 我是div2 </div> </body> </html>
在demo中遇到的問題：
1.id換成class 不能達到效果也就是說 id+style+屬性+屬性值 可以 ； class+style+屬性+屬性值不可以；
2. style="visibility: hidden"與 display: none 的區別
style="visibility: hidden" 隱藏後不釋放佔用的頁面空間
display: none 隱藏後釋放佔用的頁面空間
知識延伸：
visibility屬性值及代表含義
| visible | 預設。元素框是可見的。 |
| hidden | 元素框不可見，但仍然影響佈局。 |
| collapse | 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。 |
display(前三個常用)
| 值 | 描述 |
|---|---|
| none | 此元素不會被顯示。 |
| block | 此元素將顯示為塊級元素，此元素前後會帶有換行符。 |
| inline | 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。 |
| list-item | 此元素會作為列表顯示。 |
| run-in | 此元素會根據上下文作為塊級元素或內聯元素顯示。 |
| compact | 此元素會根據上下文作為塊級元素或內聯元素顯示。 |
| marker | |
| table | 此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。 |
| inline-table | 此元素會作為內聯表格來顯示（類似 <table>），表格前後沒有換行符。 |
| table-row-group | 此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。 |
| table-header-group | 此元素會作為一個或多個行的分組來顯示（類似 <thead>）。 |
| table-footer-group | 此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。 |
| table-row | 此元素會作為一個表格行顯示（類似 <tr>）。 |
| table-column-group | 此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。 |
| table-column | 此元素會作為一個單元格列顯示（類似 <col>） |
| table-cell | 此元素會作為一個表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會作為一個表格標題顯示（類似 <caption>） |
3.JavaScript 特點：
(1).一種解釋性執行的指令碼語言。 同其他指令碼語言一樣，JavaScript也是一種解釋性語言，其提供了一個非常方便的開發過程。JavaScript的語法基本結構形式與C、C++、Java十分類似。但在使用前，不像這些語言需要先編譯，而是在程式執行過程中被逐行地解釋。JavaScript與HTML標識結合在一起，從而方便使用者的使用操作。
(2).一種基於物件的指令碼語言。 其也可以被看作是一種面向物件的語言，這意味著JavaScript能運用其已經建立的物件。因此，許多功能可以來自於指令碼環境中物件的方法與指令碼的相互作用。
(3).一種簡單弱型別指令碼語言。 其簡單性主要體現在：首先，JavaScript是一種基於Java基本語句和控制流之上的簡單而緊湊的設計，從而對於使用者學習Java或其他C語系的程式語言是一種非常好的過渡，而對於具有C語系程式設計功底的程式設計師來說，JavaScript上手也非常容易；其次，其變數型別是採用弱型別，並未使用嚴格的資料型別。
(4).一種相對安全指令碼語言。 JavaScript作為一種安全性語言，不被允許訪問本地的硬碟，且不能將資料存入伺服器，不允許對網路文件進行修改和刪除，只能通過瀏覽器實現資訊瀏覽或動態互動。從而有效地防止資料的丟失或對系統的非法訪問。
(5).一種事件驅動指令碼語言。 JavaScript對使用者的響應，是以事件驅動的方式進行的。在網頁（Web Page）中執行了某種操作所產生的動作，被稱為“事件”（Event）。例如按下滑鼠、移動視窗、選擇選單等都可以被視為事件。當事件發生後，可能會引起相應的事件響應，執行某些對應的指令碼，這種機制被稱為“事件驅動”。
(6).一種跨平臺性指令碼語言。 JavaScript依賴於瀏覽器本身，與操作環境無關，只要計算機能執行瀏覽器，並支援JavaScript的瀏覽器，就可正確執行，從而實現了“編寫一次，走遍天下”的夢想。
因此，JavaScript是一種新的描述語言，其可以被嵌入到HTML檔案中。JavaScript語言可以做到響應使用者的需求事件（例如表單的輸入），而不需要任何的網路來回傳輸資料。所以當一位使用者輸入一項資料時，此資料資料不用經過傳給伺服器（server）處理再傳回來的過程，而直接可以被客戶端（client）的應用程式所處理。
4.發展歷史：
| 時間 | 公司 | 發展 | 貢獻 |
| 1992 | Nombas | 嵌入式指令碼語言cmm，後改名ScripEase | 起源 |
| 1995 | Netscape(網景)與Sun | 為了解決像伺服器提交資訊之前的驗證 開發出了LiveScript 後改名JavaScript | 誕生 |
| 1997 | Netscape、Sun、微軟、Borland等 | 標準化ECMAScript | 標準化 |
| 1998 | 微軟 | 山寨打敗了原創 JScript 成為標準 | 標準 |
| 1999- | 1999年後 都是基於JScript |
5.JavaScript組成
1.核心（ECMAScript）
2.文件物件模型（Dom）
3.瀏覽器物件模型（Bom）
6.視訊連結
密碼：uztr