前端 Js

js誕生：https://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html 1.94年網景公司開發一款流行的瀏覽器，但那個時候瀏覽量只能顯示文字靜態圖片，不能與用戶交互，沒有表單、註冊登錄。 2.網景高層考慮方案一當時現有的語言Perl python：方案二 新出具備新功能的Java語言：方案三 新創造一種語言。 3.由於現有語言集成到瀏覽器中比較複雜。所以讓公司一個程序員發明新語言，這個程序員是函數式編程語言的信徒，最終發明出JavaScript語言，風格是函數式編程加簡化版的面向對象。 4.由於互聯網的發展，ie 、Chrome、瀏覽器流行。B/S架構程序流行，js被衆人學習和使用。 5.隨着網頁複雜，js暴露一些語言設計上的缺點。 6.爲了高效開發，js封裝jQuery 7.國際協會不斷地改進js的bug和嫁入新功能。從2000年到現在發佈了多個大版本，例如ECMAScript 4、5、6 簡稱es5 es6 es2018等。 8.node js橫空出世，特點不止可以操作瀏覽器，還可以操作電腦本地文件，解釋器非常快，異步10.js可以寫後端程序

適用瀏覽器控制檯：
Chrome右鍵-檢查 打開開發者工具/console

各門語言相通，js也有整形、浮點型、字符串、布爾、列表、map等基本數據類型和容器結構Chrome控制檯console中做練習。總結如下。
變量：可以先聲明在賦值，也可以聲明變量用於關鍵字var （variable） alert
undefined近似相當於python裏面的none。
var text=“hello” 字符串習慣雙引號括住。
node js中新增關鍵字let。使用方式跟var一樣。優點是變量作用域只負責當前文件。
z=true；布爾。小寫true false
容器結構：數組Array 鍵值對映射Map

var stus=new Arrey();
stus[0]=“小明”
var stus=new Array("小明”）；
var stus=[“小明”,"小紅”]
var stu=new Map();
stu.set(“name”,"小明”）
stu.get(“name”)

運算符：大部分與語言相似。
1+‘1’ ‘11’ js 回隱式轉型。
2==‘2 ’ true 號判斷值是否相等，包含隱式轉型情況。
2=‘2’ false ===不盡判斷值，還判斷類型。

事件：event 鼠標或熱鍵引發的動作，例如鼠標單擊、鼠標懸停。
常用事件：
onclick 單擊
ondbclick double 雙擊
onfocus 獲得焦點 當用戶點擊一個表單中的input框準備輸入時。
onblur 失去焦點 從一個表單中一個input框離開時。
onmouseover 鼠標移動某個元素上
onmouseout 鼠標移動出某個元素
onkeypress 鍵盤按鍵按下並鬆開

DOM 回顧2html圖例，引入以下概念。
DOM : document object model
文檔對象模型。整個網頁html標籤，下面有head、body標籤，body標籤下包含p、h1、img等。整個網頁是文檔樹。每一個元素是一個節點。body節點是p、h1節點的父節點，p節點就是body節點字節點child。

js操作dom場景：
動態彈出對話框，子網頁，改變樣式，改變菜單，增減交互體驗。
動態請求後端接口獲取信息，增加數據安全防爬去；
前後端分離，js負責跟後端交互數據。
js網頁特效
表單驗證

js選擇標籤常用方法：
document.getElementByld(“idname”)
返回一個節點
ocument.getElementsByClassName(“classname”);
document.createElement(“div”)創建新元素節點.appendChild(mydiv)