java學習與應用（4.2）-JavaScript、bootstrap

java學習與應用（4.2）–JavaScript、bootstrap

2020 年 2 月 23 日
筆記

基礎語法

JavaScript，弱類型腳本語言，增強交互和用戶體驗提高效率等。JavaScript=ECMAScript+JavaScript特有的內容（BOM對象+DOM對象） ECMAScript：與html結合：內部JS（script標籤定義，在html文檔內部，按位置先後執行），外部JS（script標籤引入src元素），注釋：當行//，多行/**/，數據類型：原始數據類型（基本，number[整數，小數，NaN not a number]，string，boolean，null，undefined），引用數據類型（對象）變數，var定義，開闢空間不定義類型。賦值可改變類型。document.write輸出，添加標籤<br>字元串換行。typeof(變數)關鍵字，列印數據類型（null是一個object的bug）。運算符，一元運算符：++，–，+-（正號,負號[可以將其他類型轉number，無法轉換為NaN]），算數運算符：+-*/%，賦值運算符=，+=，-=，比較運算符：>，>=，<，<=，==，!=，類型不同則轉換類型比較，===（不轉換類型比較）。

針對字元串，對象等，使用第二種方法更簡便可靠

邏輯運算符，&&（與，帶短路效果），||（或，帶短路效果），!（非，!!將其他類型轉為boolean[0,Nan,null,undefined等為假]）。三元運算符：?，等同其他問號冒號表達式

JS特殊語法：語句分號結尾，一行一條語句可以省略（不建議）。var定義時可省略，使用時為局部變數，不使用var聲明為全局變數（不建議）。流程式控制制語句：ifelse，switch（可接受任意原始數據在case中匹配），while，dowhile，for。

ECMA基本對象

Function對象：函數對象，創建：var fun = new Function(形參,方法體)，function 方法名{方法體}（方法名的形參類型，返回值類型省略），var 參數=函數定義。方法中的屬性有：length對象形參個數。函數同名會方法覆蓋，參數缺少或過多都能調用函數（不會重載）。 arguments內置對象屬性，接受函數的所有參數（傳入參數都會傳入該數組）。 Array數組對象，創建：var arr=new Array(元素列表/默認長度/空)，var arr=[元素列表]。特點：數組中的元素類型可變，數組長度可變（其它值為undefined）。屬性：length長度。方法：join方法按照指定分隔符將數組拼接為字元串。push尾部添加元素。 Boolean，布爾對象。Date日期對象，創建：var date = new Date()，方法：toLocalString()返回本地格式時間，getTime()獲取當前時間的毫秒值差。 Math對象，直接可用。屬性：PI圓周率等，方法：random返回隨機數[0,1)。ceil向上舍入，floor向下舍入，round四捨五入。 Number，String，原始數據類型的包裝對象。 RegExp正則表達式對象。表達式：[]單個字元，d單個數字，w單個單詞或數字，量詞符號：?0次或1次，*0次到多次，+1次或多次，{m,n}，m到n次（可預設m或n），^開始符號，$結束符號。正則對象創建：var reg=new RegExp("正則表達式")（轉義符號需要兩個斜杠），var reg = /正則表達式/，方法：test方法傳入字元串測試。 Global全局對象，不需要調用對象直接使用其方法，方法：encodeURI，decodeURI，encodeURIComponent（符合編碼轉換的字元更多），decodeURIComponent。url編碼解碼方法（UTF-8）。 parseInt將字元串轉為數字（和正號的區別在於其轉換前面的數字串轉為數字）。isNaN判斷值是否為NaN（NaN和其他任何值直接比較都為false）。eval方法將JS字元串轉換為JS腳本執行。

BOM、DOM

DOM：用於控制HTML文檔內容。獲取當前頁面標籤：document.getElementById("ID值")，通過ID獲取元素對象。修改標籤屬性值：XXX.屬性=新值。innerHTML屬性修改標籤體內容。事件：某些組件執行後觸發執行的程式碼，標籤上添加事件onclick屬性點擊執行js（也可以在js中獲取標籤對象，然後添加onclick事件）。 BOM（Browser Object Model瀏覽器對象模型）。window對象窗口，Location地址欄對象，History歷史記錄對象，Screen顯示器螢幕對象。Navigator瀏覽器對象。（Document對象為DOM）。 window對象不需要創建可以直接使用並省略window引用。方法：alert警告對話框，confirm確認取消對話框，prompt對話框。open打開瀏覽器窗口（可傳入url等），close關閉瀏覽器窗口（默認關閉本窗口，傳入其他窗口對象關閉指定窗口）。定時器setTimeout（傳入方法對象與毫秒值）定時執行，clearTimeout（取消），setInterval指定周期循環執行（返回標識），clearInterval取消循環執行（傳入標識）。獲取其它BOM對象（history，location，screen，navigator等），獲取DOM對象（document）。 Location對象，reload刷新方法，href獲取或修改地址欄路徑屬性並轉到。 History歷史記錄（當前窗口）對象，length屬性獲取歷史記錄數量，back方法後退，forward方法向前，go轉到指定歷史記錄介面。

DOM

DOM（Document Object Model文檔對象模型），分為核心DOM（Document文檔對象，Element元素對象，Attribute，Text，Comment，Node節點對象），XML DOM，HTML DOM。 Document對象：獲取（window.document、document），方法：獲取Element對象，getElementById，getElementByTagName獲取對應標籤對象數組，getElementByClassName、getElementByName獲取對象數組。 createAttribute（創建Id），createElement（創建標籤），createComment，createTextNode創建文本節點，傳入文本等。 Element對象，removeAttribute刪除屬性，setAttribute設置屬性。 Node對象，DOM對象作為節點，方法有：appendChild添加存在的節點，removeChild刪除節點，replaceChild替換，parentNode屬性獲取父節點（超鏈接點擊後會根據href值進行自動轉到，可能影響js執行效果，可以使用href中添加JavaScript:void(0)消除）

HTML DOM

HTML DOM：對標籤體內容的獲取，設置，追加使用innerHTML屬性，更方便修改和控制HTML內容。

控制樣式：獲取對象如div1後，使用如div1.style.border="xxx"，控制修改邊框。或使用div1.className.="css的標號"

事件

事件：事件從事件源中觸發後，執行已經註冊監聽（window.onload）的監聽器（程式碼）。單擊onclick，雙擊ondbclick，onblur失去焦點，onfocus獲取焦點，onload載入事件，onmouse的事件，onkey的事件，另外還有onchange，onselect的文本事件，onsubmit，onreset的表單事件

BootStrap

bootstrap前端框架（CSS和JS插件）。半成品軟體來自twitter。響應式布局（同一套頁面兼容不同解析度）。min為壓縮版。最終引入bootstrap.min.css，jquery-3.2.1.min.js，bootstrap.min.js。響應式布局：依賴於柵格系統（一行分12格，指定元素占格）。使用class元素控制，添加定義容器（container[留白寬度舒適]，container-fluid[寬度佔滿容器]），定義行（row），定義元素（col-設備代號-格子數目），定義多個元素樣式，以指定不同設備佔用格子數目。設備代號：xs手機，sm平板，md中等顯示器，lg大屏。超出寬度自動換行（單元素佔一行）。全局CSS樣式（見手冊）：按鈕btn-xxx。圖片完全佔比img-response，圓形，相框等。表格table-xxx。表單form-xxx（見手冊實例程式碼，class的設置需要閱讀）。組件：導航條navbar-xxx，漢堡按鈕和平鋪導航的設置，閱讀程式碼，修改和移植。翻轉導航條（反色等）。分頁條工具條，aria-xxx等，含禁用符號等效果，插件：輪播圖，carousel-xxx格式。見手冊樣例修改。