文章目錄
- JavaScript基礎第01天
- 1 - 編程語言
- 1.1 編程
- 1.2 計算機語言
- 1.3 編程語言
- 1.4 翻譯器
- 1.5 編程語言和標記語言區別
- 總結
- 2 - 計算機基礎
- 2.1 計算機組成
- 2.2 資料存盤
- 2.3 資料存盤單位
- 2.4 程式運行
- 3 - 初始JavaScript
- 3.1 JavaScript 是什么
- 3.2 JavaScript的作用
- 3.3 HTML/CSS/JS 的關系
- 3.4 瀏覽器執行 JS 簡介
- 3.5 JS 的組成
- **ECMAScript**
- **DOM——檔案物件模型**
- **BOM——瀏覽器物件模型**
- 3.6 JS 初體驗
- 4 - JavaScript注釋
- 4.1 單行注釋
- 4.2 多行注釋
- 5 - JavaScript輸入輸出陳述句
- 6 - 變數的概念
- 6.1 什么是變數
- 6.2 變數在記憶體中的存盤
- 7 - 變數的使用
- 7.1 宣告變數
- 7.2 賦值
- 7.3 變數的初始化
- 7.4 變數語法擴展
- 7.5 變數命名規范
- 8 - 資料型別
- 8.1 資料型別簡介
- 8.3 獲取變數資料型別
- 8.4 資料型別轉換
- 9 - 解釋型語言和編譯型語言
- 9.1 概述
- 9.2 執行程序
- 10 - 關鍵字和保留字
- 10.1 識別符號
- 10.2 關鍵字
- 10.3 保留字
- JavaScript基礎第02天
- 1 - 運算子（運算子）
- 1.1 運算子的分類
- 1.2 算數運算子
- 1.3 遞增和遞減運算子
- 1.4 比較運算子
- 1.5 邏輯運算子
- 1.7 運算子優先級
- 2 - 流程控制
- 2.1 流程控制概念
- 2.2 順序流程控制
- 2.3 分支流程控制
- 2.4 三元運算式
- 2.5 switch分支流程控制
- 6rem 適配方案2
- 移動端WEB開發之回應式布局
- 1.0 回應式開發原理
- 1.1 回應式開發原理
- 1.2 回應式布局容器
- 2.0 bootstrap的介紹
- 2.1Bootstrap簡介
- 2.2 bootstrap優點
- 2.3 版本簡介
- 2.4bootstrap基本使用
- 2.5 bootstrap布局容器
- 2.6 bootstrap柵格系統
- 3.0 阿里百秀案例制作
- 3.1 技術選型
JavaScript基礎第01天
1 - 編程語言
1.1 編程
- 編程：
- 就是讓計算機為解決某個問題而使用某種程式設計語言撰寫程式代碼，并最終得到結果的程序，
- 計算機程式：
- 就是計算機所執行的一系列的指令集合，而程式全部都是用我們所掌握的語言來撰寫的，所以人們要控制計算機一定要通過計算機語言向計算機發出命令，
1.2 計算機語言
-
計算機語言指用于人與計算機之間通訊的語言，它是人與計算機之間傳遞資訊的媒介，
-
計算機語言的種類非常的多，總的來說可以分成機器語言，匯編語言和高級語言三大類，
-
實際上計算機最終所執行的都是 機器語言，它是由“0”和“1”組成的二進制數，二進制是計算機語言的基礎，
1.3 編程語言
編程語言：
可以通過類似于人類語言的“語言”來控制計算機，讓計算機為我們做事情，這樣的語言就叫做編程語言（Programming Language），編程語言是用來控制計算機的一系列指令，它有固定的格式和詞匯（不同編程語言的格式和詞匯不一樣），必須遵守，如今通用的編程語言有兩種形式：匯編語言和高級語言，
| 語言型別 | 說明 |
|---|---|
| 匯編語言 | 匯編語言和機器語言實質是相同的，都是直接對硬體操作，只不過指令采用了英文縮寫的識別符號，容易識別和記憶， |
| 高級語言 | 高級語言主要是相對于低級語言而言，它并不是特指某一種具體的語言，而是包括了很多編程語言，常用的有C語言、C++、Java、C#、Python、PHP、JavaScript、Go語言、Objective-C、Swift等， |
1.4 翻譯器
高級語言所編制的程式不能直接被計算機識別，必須經過轉換才能被執行，為此，我們需要一個翻譯器，翻譯器可以將我們所撰寫的源代碼轉換為機器語言，這也被稱為二進制化，
1.5 編程語言和標記語言區別
| 語言 | 說明 |
|---|---|
| 編程語言 | 編程語言有很強的邏輯和行為能力，在編程語言里, 你會看到很多 if else 、for 、while等具有邏輯性和行為能力的指令，這是主動的， |
| 標記語言 | 標記語言（html）不用于向計算機發出指令，常用于格式化和鏈接，標記語言的存在是用來被讀取的, 他是被動的， |
總結
- 計算機可以幫助人類解決某些問題
- 程式員利用編程語言撰寫程式發出指令控制計算機來實作這些任務
- 編程語言有機器語言、匯編語言、高級語言
- 高級語言需要一個翻譯器轉換為計算機識別的機器語言
- 編程語言是主動的有很強的邏輯性
2 - 計算機基礎
2.1 計算機組成
2.2 資料存盤
- 計算機內部使用二進制 0 和 1來表示資料，
- 所有資料，包括檔案、圖片等最終都是以二進制資料（0 和 1）的形式存放在硬碟中的，
- 所有程式，包括作業系統，本質都是各種資料，也以二進制資料的形式存放在硬碟中，平時我們所說的安裝軟體，其實就是把程式檔案復制到硬碟中，
- 硬碟、記憶體都是保存的二進制資料，
2.3 資料存盤單位
大小關系：bit < byte < kb < GB < TB<.....
- 位(bit)： 1bit 可以保存一個 0 或者 1 （最小的存盤單位）
- 位元組(Byte)：1B = 8b
- 千位元組(KB)：1KB = 1024B
- 兆位元組(MB)：1MB = 1024KB
- 吉位元組(GB): 1GB = 1024MB
- 太位元組(TB): 1TB = 1024GB
2.4 程式運行
計算機運行軟體的程序：
1. 打開某個程式時，先從硬碟中把程序的代碼加載到記憶體中
2. CPU執行記憶體中的代碼
注意：之所以要記憶體的一個重要原因，是因為 cpu運行太快了，如果只從硬碟中讀資料，會浪費cpu性能，所以，才使用存取速度更快的記憶體來保存運行時的資料，（記憶體是電，硬碟是機械）
3 - 初始JavaScript
3.1 JavaScript 是什么
- JavaScript 是世界上最流行的語言之一，是一種運行在客戶端的腳本語言 （Script 是腳本的意思）
- 腳本語言：不需要編譯，運行程序中由 js 解釋器( js 引擎）逐行來進行解釋并執行
- 現在也可以基于 Node.js 技術進行服務器端編程
3.2 JavaScript的作用
- 表單動態校驗（密碼強度檢測） （ JS 產生最初的目的 ）
- 網頁特效
- 服務端開發(Node.js)
- 桌面程式(Electron)
- App(Cordova)
- 控制硬體-物聯網(Ruff)
- 游戲開發(cocos2d-js)
3.3 HTML/CSS/JS 的關系
3.4 瀏覽器執行 JS 簡介
瀏覽器分成兩部分：渲染引擎和 JS 引擎
瀏覽器本身并不會執行JS代碼，而是通過內置 JavaScript 引擎(解釋器) 來執行 JS 代碼 ，JS 引擎執行代碼時逐行解釋每一句原始碼（轉換為機器語言），然后由計算機去執行，所以 JavaScript 語言歸為腳本語言，會逐行解釋執行，
3.5 JS 的組成
-
ECMAScript
? ECMAScript 是由ECMA 國際（ 原歐洲計算機制造商協會）進行標準化的一門編程語言，這種語言在萬維網上應用廣泛，它往往被稱為 JavaScript或 JScript，但實際上后兩者是 ECMAScript 語言的實作和擴展，
? ECMAScript：規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準，
更多參看MDN: MDN手冊
-
DOM——檔案物件模型
? 檔案物件模型（DocumentObject Model，簡稱DOM），是W3C組織推薦的處理可擴展標記語言的標準編程介面，通過 DOM 提供的介面可以對頁面上的各種元素進行操作（大小、位置、顏色等）
-
BOM——瀏覽器物件模型
? 瀏覽器物件模型(Browser Object Model，簡稱BOM) 是指瀏覽器物件模型，它提供了獨立于內容的、可以與瀏覽器視窗進行互動的物件結構，通過BOM可以操作瀏覽器視窗，比如彈出框、控制瀏覽器跳轉、獲取解析度等，
3.6 JS 初體驗
JS 有3種書寫位置，分別為行內、內嵌和外部，
- 行內式
<input type="button" value="點我試試" onclick="alert('Hello World')" />
- 可以將單行或少量 JS 代碼寫在HTML標簽的事件屬性中（以 on 開頭的屬性），如：onclick
- 注意單雙引號的使用：在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號
- 可讀性差， 在html中撰寫JS大量代碼時，不方便閱讀；
- 引號易錯，引號多層嵌套匹配時，非常容易弄混；
- 特殊情況下使用
-
內嵌式
<script> alert('Hello World~!'); </script>- 可以將多行JS代碼寫到 script 標簽中
- 內嵌 JS 是學習時常用的方式
-
外部JS檔案
<script src="my.js"></script>- 利于HTML頁面代碼結構化，把大段 JS代碼獨立到 HTML 頁面之外，既美觀，也方便檔案級別的復用
- 參考外部 JS檔案的 script 標簽中間不可以寫代碼
- 適合于JS 代碼量比較大的情況
4 - JavaScript注釋
- flex子專案占的份數
- align-self控制子項自己在側軸的排列方式
- order屬性定義子項的排列順序（前后順序）
4.1 單行注釋
為了提高代碼的可讀性，JS與CSS一樣，也提供了注釋功能，
JS中的注釋主要有兩種，分別是 單行注釋 和 多行注釋，
單行注釋的注釋方式如下：
// 我是一行文字，不想被 JS引擎 執行，所以 注釋起來
// 用來注釋單行文字（ 快捷鍵 ctrl + / ）
4.2 多行注釋
多行注釋的注釋方式如下：
/*
獲取用戶年齡和姓名
并通過提示框顯示出來
*/
/* */ 用來注釋多行文字（ 默認快捷鍵 alt + shift + a ）
快捷鍵修改為： ctrl + shift + /
vscode → 首選項按鈕 → 鍵盤快捷方式 → 查找 原來的快捷鍵 → 修改為新的快捷鍵 → 回車確認
5 - JavaScript輸入輸出陳述句
為了方便資訊的輸入輸出，JS中提供了一些輸入輸出陳述句，其常用的陳述句如下：
| 方法 | 說明 | 歸屬 |
|---|---|---|
| alert(msg) | 瀏覽器彈出警示框 | 瀏覽器 |
| console.log(msg) | 瀏覽器控制臺列印輸出資訊 | 瀏覽器 |
| prompt(info) | 瀏覽器彈出輸入框，用戶可以輸入 | 瀏覽器 |
- 注意：alert() 主要用來顯示訊息給用戶，console.log() 用來給程式員自己看運行時的訊息，
6 - 變數的概念
6.1 什么是變數
白話：變數就是一個裝東西的盒子，
通俗：變數是用于存放資料的容器， 我們通過 變數名 獲取資料，甚至資料可以修改，
6.2 變數在記憶體中的存盤
本質：變數是程式在記憶體中申請的一塊用來存放資料的空間，類似我們酒店的房間，一個房間就可以看做是一個變數，
7 - 變數的使用
- 變數的宣告
- 變數的賦值
7.1 宣告變數
// 宣告變數
var age; // 宣告一個 名稱為age 的變數
-
var 是一個 JS關鍵字，用來宣告變數( variable 變數的意思 )，使用該關鍵字宣告變數后，計算機會自動為變數分配記憶體空間，不需要程式員管
-
age 是程式員定義的變數名，我們要通過變數名來訪問記憶體中分配的空間
7.2 賦值
age = 10; // 給 age 這個變數賦值為 10
- = 用來把右邊的值賦給左邊的變數空間中 此處代表賦值的意思
- 變數值是程式員保存到變數空間里的值
7.3 變數的初始化
var age = 18; // 宣告變數同時賦值為 18
// 宣告一個變數并賦值， 我們稱之為變數的初始化，
7.4 變數語法擴展
-
更新變數
? 一個變數被重新復賦值后，它原有的值就會被覆寫，變數值將以最后一次賦的值為準，
var age = 18; age = 81; // 最后的結果就是81因為18 被覆寫掉了 -
同時宣告多個變數
? 同時宣告多個變數時，只需要寫一個 var， 多個變數名之間使用英文逗號隔開，
var age = 10, name = 'zs', sex = 2; -
宣告變數特殊情況
情況 說明 結果 var age ; console.log (age); 只宣告 不賦值 undefined console.log(age) 不宣告 不賦值 直接使用 報錯 age = 10; console.log (age); 不宣告 只賦值 10
7.5 變數命名規范
規則：
- 由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name
- 嚴格區分大小寫，var app; 和 var App; 是兩個變數
- 不能 以數字開頭， 18age 是錯誤的
- 不能 是關鍵字、保留字，例如：var、for、while
- 變數名必須有意義， MMD BBD nl → age
- 遵守駝峰命名法，首字母小寫，后面單詞的首字母需要大寫，myFirstName
推薦翻譯網站： 有道 愛詞霸
8 - 資料型別
8.1 資料型別簡介
-
為什么需要資料型別
? 在計算機中，不同的資料所需占用的存盤空間是不同的，為了便于把資料分成所需記憶體大小不同的資料，充分利用存盤空間，于是定義了不同的資料型別，
簡單來說，資料型別就是資料的類別型號，比如姓名“張三”，年齡18，這些資料的型別是不一樣的， -
變數的資料型別
? 變數是用來存盤值的所在處，它們有名字和資料型別，變數的資料型別決定了如何將代表這些值的位存盤到計算機的記憶體中，JavaScript 是一種弱型別或者說動態語言，這意味著不用提前宣告變數的型別，在程式運行程序中，型別會被自動確定：
var age = 10; // 這是一個數字型 var areYouOk = '是的'; // 這是一個字串? 在代碼運行時，變數的資料型別是由 JS引擎 根據 = 右邊變數值的資料型別來判斷 的，運行完畢之后， 變數就確定了資料型別，JavaScript 擁有動態型別，同時也意味著相同的變數可用作不同的型別：
var x = 6; // x 為數字
var x = “Bill”; // x 為字串
- 資料型別的分類
JS 把資料型別分為兩類：
- 簡單資料型別 （Number,String,Boolean,Undefined,Null）
- 復雜資料型別 （object)
### 8.2 簡單資料型別
簡單資料型別（基本資料型別）
JavaScript 中的簡單資料型別及其說明如下：
- 數字型 Number
? JavaScript 數字型別既可以保存整數，也可以保存小數(浮點數），
```js
var age = 21; // 整數
var Age = 21.3747; // 小數
-
數字型進制
最常見的進制有二進制、八進制、十進制、十六進制，
// 1.八進制數字序列范圍：0~7 var num1 = 07; // 對應十進制的7 var num2 = 019; // 對應十進制的19 var num3 = 08; // 對應十進制的8 // 2.十六進制數字序列范圍：0~9以及A~F var num = 0xA;現階段我們只需要記住，在JS中八進制前面加0，十六進制前面加 0x
-
數字型范圍
JavaScript中數值的最大和最小值
-
最大值：Number.MAX_VALUE，這個值為： 1.7976931348623157e+308
-
最小值：Number.MIN_VALUE，這個值為：5e-32
-
-
數字型三個特殊值
-
Infinity ，代表無窮大，大于任何數值
-
-Infinity ，代表無窮小，小于任何數值
-
NaN ，Not a number，代表一個非數值
-
-
isNaN
用來判斷一個變數是否為非數字的型別，回傳 true 或者 false
var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ，21 不是一個非數字
var usrName = "andy";
console.log(isNaN(userName));// true ，"andy"是一個非數字
-
字串型 String
? 字串型可以是引號中的任意文本，其語法為 雙引號 “” 和 單引號’’
var strMsg = "我愛北京天安門~"; // 使用雙引號表示字串 var strMsg2 = '我愛吃豬蹄~'; // 使用單引號表示字串 // 常見錯誤 var strMsg3 = 我愛大肘子; // 報錯，沒使用引號，會被認為是js代碼，但js沒有這些語法? 因為 HTML 標簽里面的屬性使用的是雙引號，JS 這里我們更推薦使用單引號，
-
字串引號嵌套
? JS 可以用單引號嵌套雙引號 ，或者用雙引號嵌套單引號 (外雙內單，外單內雙)
var strMsg = '我是"高帥富"程式猿'; // 可以用''包含"" var strMsg2 = "我是'高帥富'程式猿"; // 也可以用"" 包含'' // 常見錯誤 var badQuotes = 'What on earth?"; // 報錯，不能 單雙引號搭配 -
字串轉義符
? 類似HTML里面的特殊字符，字串中也有特殊字符，我們稱之為轉義符，
? 轉義符都是 \ 開頭的，常用的轉義符及其說明如下：
轉義符 解釋說明 \n 換行符，n 是 newline 的意思 \ \ 斜杠 \ ’ ’ 單引號 " ”雙引號 \t tab 縮進 \b 空格 ，b 是 blank 的意思 -
字串長度
? 字串是由若干字符組成的，這些字符的數量就是字串的長度，通過字串的 length 屬性可以獲取整個字串的長度，
var strMsg = "我是帥氣多金的程式猿！"; alert(strMsg.length); // 顯示 11 -
字串拼接
-
多個字串之間可以使用 + 進行拼接，其拼接方式為 字串 + 任何型別 = 拼接之后的新字串
-
拼接前會把與字串相加的任何型別轉成字串，再拼接成一個新的字串
//1.1 字串 "相加" alert('hello' + ' ' + 'world'); // hello world //1.2 數值字串 "相加" alert('100' + '100'); // 100100 //1.3 數值字串 + 數值 alert('11' + 12); // 1112- + 號總結口訣：數值相加 ，字符相連
-
-
字串拼接加強
console.log('pink老師' + 18); // 只要有字符就會相連 var age = 18; console.log('pink老師age歲啦'); // 這樣不行哦 console.log('pink老師' + age); // pink老師18 console.log('pink老師' + age + '歲啦'); // pink老師18歲啦- 經常會將字串和變數來拼接，變數可以很方便地修改里面的值
- 變數是不能添加引號的，因為加引號的變數會變成字串
- 如果變數兩側都有字串拼接，口訣“引引加加 ”，刪掉數字，變數寫加中間
-
-
布爾型Boolean
? 布爾型別有兩個值：true 和 false ，其中 true 表示真（對），而 false 表示假（錯），
? 布爾型和數字型相加的時候， true 的值為 1 ，false 的值為 0，
console.log(true + 1); // 2 console.log(false + 1); // 1 -
Undefined和 Null
? 一個宣告后沒有被賦值的變數會有一個默認值undefined ( 如果進行相連或者相加時，注意結果）
var variable; console.log(variable); // undefined console.log('你好' + variable); // 你好undefined console.log(11 + variable); // NaN console.log(true + variable); // NaN? 一個宣告變數給 null 值，里面存的值為空（學習物件時，我們繼續研究null)
var vari = null; console.log('你好' + vari); // 你好null console.log(11 + vari); // 11 console.log(true + vari); // 1
8.3 獲取變數資料型別
-
獲取檢測變數的資料型別
? typeof 可用來獲取檢測變數的資料型別
var num = 18; console.log(typeof num) // 結果 number -
字面量
? 字面量是在源代碼中一個固定值的表示法，通俗來說，就是字面量表示如何表達這個值，
- 數字字面量：8, 9, 10
- 字串字面量：‘黑馬程式員’, “大前端”
- 布爾字面量：true，false
8.4 資料型別轉換
? 什么是資料型別轉換？
? 使用表單、prompt 獲取過來的資料默認是字串型別的，此時就不能直接簡單的進行加法運算，而需要轉換變數的資料型別，通俗來說，就是把一種資料型別的變數轉換成另一種資料型別，通常會實作3種方式的轉換：
轉換為字串型別
轉換為數字型
轉換為布爾型
-
轉換為字串
- toString() 和 String() 使用方式不一樣，
- 三種轉換方式，更多第三種加號拼接字串轉換方式， 這一種方式也稱之為隱式轉換，
-
轉換為數字型（重點）
- 注意 parseInt 和 parseFloat 單詞的大小寫，這2個是重點
- 隱式轉換是我們在進行算數運算的時候，JS 自動轉換了資料型別
-
轉換為布爾型
-
代表空、否定的值會被轉換為 false ，如 ‘’、0、NaN、null、undefined
-
其余值都會被轉換為 true
console.log(Boolean('')); // false console.log(Boolean(0)); // false console.log(Boolean(NaN)); // false console.log(Boolean(null)); // false console.log(Boolean(undefined)); // false console.log(Boolean('小白')); // true console.log(Boolean(12)); // true
-
9 - 解釋型語言和編譯型語言
9.1 概述
計算機不能直接理解任何除機器語言以外的語言，所以必須要把程式員所寫的程式語言翻譯成機器語言才能執行程式，程式語言翻譯成機器語言的工具，被稱為翻譯器，
- 翻譯器翻譯的方式有兩種：一個是編譯，另外一個是解釋，兩種方式之間的區別在于翻譯的時間點不同
- 編譯器是在代碼執行之前進行編譯，生成中間代碼檔案
- 解釋器是在運行時進行及時解釋，并立即執行(當編譯器以解釋方式運行的時候，也稱之為解釋器)
9.2 執行程序
類似于請客吃飯：
編譯語言：首先把所有菜做好，才能上桌吃飯
解釋語言：好比吃火鍋，邊吃邊涮，同時進行
10 - 關鍵字和保留字
10.1 識別符號
標識(zhi)符：就是指開發人員為變數、屬性、函式、引數取的名字，
識別符號不能是關鍵字或保留字，
10.2 關鍵字
關鍵字：是指 JS本身已經使用了的字，不能再用它們充當變數名、方法名，
包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等，
10.3 保留字
保留字：實際上就是預留的“關鍵字”，意思是現在雖然還不是關鍵字，但是未來可能會成為關鍵字，同樣不能使用它們當變數名或方法名，
包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等，
注意：如果將保留字用作變數名或函式名，那么除非將來的瀏覽器實作了該保留字，否則很可能收不到任何錯誤訊息，當瀏覽器將其實作后，該單詞將被看做關鍵字，如此將出現關鍵字錯誤，
JavaScript基礎第02天
1 - 運算子（運算子）
1.1 運算子的分類
? 運算子（operator）也被稱為運算子，是用于實作賦值、比較和執行算數運算等功能的符號，
JavaScript中常用的運算子有：
- 算數運算子
- 遞增和遞減運算子
- 比較運算子
- 邏輯運算子
- 賦值運算子
1.2 算數運算子
-
算術運算子概述
概念：算術運算使用的符號，用于執行兩個變數或值的算術運算，
-
浮點數的精度問題
? 浮點數值的最高精度是 17 位小數，但在進行算術計算時其精確度遠遠不如整數，
var result = 0.1 + 0.2;//結果是：0.30000000000000004 console.log(0.07 * 100);//結果是：7.000000000000001? 所以：不要直接判斷兩個浮點數是否相等 !
-
運算式和回傳值
? 運算式：是由數字、運算子、變數等以能求得數值的有意義排列方法所得的組合
? 簡單理解：是由數字、運算子、變數等組成的式子
? 運算式最終都會有一個結果，回傳給開發者，稱為回傳值
1.3 遞增和遞減運算子
-
遞增和遞減運算子概述
? 如果需要反復給數字變數添加或減去1，可以使用遞增（++）和遞減（ – ）運算子來完成，
在 JavaScript 中，遞增（++）和遞減（ -- ）既可以放在變數前面，也可以放在變數后面，放在變數前面時，我們可以稱為前置遞增（遞減）運算子，放在變數后面時，我們可以稱為后置遞增（遞減）運算子， 注意：遞增和遞減運算子必須和變數配合使用， -
遞增運算子
-
前置遞增運算子
++num 前置遞增，就是自加1，類似于 num = num + 1
使用口訣：先自加，后回傳值
var num = 10; alert(++num + 10); // 21-
后置遞增運算子
num++ 后置遞增，就是自加1，類似于 num = num + 1
使用口訣：先回傳原值，后自加
var num = 10; alert(10 + num++); // 20 -
1.4 比較運算子
-
比較運算子概述
? 概念：比較運算子（關系運算子）是兩個資料進行比較時所使用的運算子，比較運算后，會回傳一個布林值（true / false）作為比較運算的結果，
-
等號比較
console.log(18 == '18'); // true console.log(18 === '18'); // false
1.5 邏輯運算子
-
邏輯運算子概述
? 邏輯運算子是用來進行布林值運算的運算子，其回傳值也是布林值，后面開發中經常用于多個條件的判斷
-
邏輯與&&
? 兩邊都是 true才回傳 true，否則回傳 false
-
邏輯或 ||
? 兩邊都是 true才回傳 true，否則回傳 false
-
邏輯非 ！
? 邏輯非（!）也叫作取反符，用來取一個布林值相反的值，如 true 的相反值是 false
var isOk = !true; console.log(isOk); // false -
短路運算（邏輯中斷）
? 邏輯元素父左邊的運算式值可以確定結果時，就不再繼續運算右邊的運算式的值;
-
邏輯與
? 語法： 運算式1 && 運算式2
- 如果第一個運算式的值為真，則回傳運算式2 - 如果第一個運算式的值為假，則回傳運算式1
-
console.log( 123 && 456 ); // 456
console.log( 0 && 456 ); // 0
console.log( 123 && 456&& 789 ); // 789
```
- 邏輯或
? 語法： 運算式1 || 運算式2
- 如果第一個運算式的值為真，則回傳運算式1
- 如果第一個運算式的值為假，則回傳運算式2
```js
console.log( 123 || 456 ); // 123
console.log( 0 || 456 ); // 456
console.log( 123 || 456 || 789 ); // 123
```
### 1.6 賦值運算子
? 概念：用來把資料賦值給變數的運算子，
```js
var age = 10;
age += 5; // 相當于 age = age + 5;
age -= 5; // 相當于 age = age - 5;
age *= 10; // 相當于 age = age * 10;
1.7 運算子優先級
- 一元運算子里面的邏輯非優先級很高
- 邏輯與比邏輯或優先級高
2 - 流程控制
2.1 流程控制概念
? 在一個程式執行的程序中，各條代碼的執行順序對程式的結果是有直接影響的，很多時候我們要通過控制代碼的執行順序來實作我們要完成的功能，
? 簡單理解：流程控制就是來控制代碼按照一定結構順序來執行
? 流程控制主要有三種結構：順序結構、分支結構、回圈結構
2.2 順序流程控制
2.3 分支流程控制
- 分支結構
? JS 語言提供了兩種分支結構陳述句：if 陳述句、switch 陳述句
-
if 陳述句
- 語法結構
// 條件成立執行代碼，否則什么也不做 if (條件運算式) { // 條件成立執行的代碼陳述句 }陳述句可以理解為一個行為，回圈陳述句和分支陳述句就是典型的陳述句，一個程式由很多個陳述句組成，一般情況下，會分割成一個一個的陳述句， -
if else陳述句（雙分支陳述句）
-
語法結構
// 條件成立 執行 if 里面代碼，否則執行else 里面的代碼 if (條件運算式) { // [如果] 條件成立執行的代碼 } else { // [否則] 執行的代碼 } -
執行流程
-
-
if else if 陳述句(多分支陳述句)
-
語法結構
// 適合于檢查多重條件， if (條件運算式1) { 陳述句1； } else if (條件運算式2) { 陳述句2； } else if (條件運算式3) { 陳述句3； .... } else { // 上述條件都不成立執行此處代碼 } -
執行邏輯
-
2.4 三元運算式
-
語法結構
運算式1 ? 運算式2 : 運算式3; -
執行思路
- 如果運算式1為 true ，則回傳運算式2的值，如果運算式1為 false，則回傳運算式3的值
- 簡單理解： 就類似于 if else （雙分支） 的簡寫
2.5 switch分支流程控制
-
語法結構
switch( 運算式 ){
case value1:
// 運算式 等于 value1 時要執行的代碼
break;
case value2:
// 運算式 等于 value2 時要執行的代碼
break;
default:
// 運算式 不等于任何一個 value 時要執行的代碼
}
- 關鍵字 switch 后面括號內可以是運算式或值， 通常是一個變數
- 關鍵字 case , 后跟一個選項的運算式或值，后面跟一個冒號
- switch 運算式的值會與結構中的 case 的值做比較
- 如果存在匹配全等(===) ，則與該 case 關聯的代碼塊會被執行，并在遇到 break 時停止，整個 switch 陳述句代碼執行結束
- 如果所有的 case 的值都和運算式的值不匹配，則執行 default 里的代碼
**注意： 執行case 里面的陳述句時，如果沒有break，則繼續執行下一個case里面的陳述句，**
- switch 陳述句和 if else if 陳述句的區別
- 一般情況下，它們兩個陳述句可以相互替換
- switch...case 陳述句通常處理 case為比較確定值的情況， 而 if…else…陳述句更加靈活，常用于范圍判斷(大于、等于某個范圍)
- switch 陳述句進行條件判斷后直接執行到程式的條件陳述句，效率更高，而if…else 陳述句有幾種條件，就得判斷多少次，
- 當分支比較少時，if… else陳述句的執行效率比 switch陳述句高，
- 當分支比較多時，switch陳述句的執行效率比較高，而且結構更清晰，
# 移動web開發之rem布局
### 1 rem基礎
#### 1.1 rem單位
rem (root em)是一個相對單位，類似于em，em是父元素字體大小，
不同的是rem的基準是相對于html元素的字體大小，
比如，根元素（html）設定font-size=12px; 非根元素設定width:2rem; 則換成px表示就是24px，
/* 根html 為 12px /
html {
font-size: 12px;
}
/ 此時 div 的字體大小就是 24px */
div {
font-size: 2rem;
}
rem的優勢：父元素文字大小可能不一致， 但是整個頁面只有一個html，可以很好來控制整個頁面的元素大小，
### 2 媒體查詢
#### 2.1 什么是媒體查詢
媒體查詢（Media Query）是CSS3新語法，
+ 使用 @media查詢，可以針對不同的媒體型別定義不同的樣式
+ @media 可以針對不同的螢屏尺寸設定不同的樣式
+ 當你重置瀏覽器大小的程序中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
+ 目前針對很多蘋果手機、Android手機，平板等設備都用得到多媒體查詢
#### 2.2 媒體查詢語法規范
+ 用 @media開頭 注意@符號
+ mediatype 媒體型別
+ 關鍵字 and not only
+ media feature 媒體特性必須有小括號包含
@media mediatype and|not|only (media feature) {
CSS-Code;
}
1. mediatype 查詢型別
? 將不同的終端設備劃分成不同的型別，稱為媒體型別
2. 關鍵字
? 關鍵字將媒體型別或多個媒體特性連接到一起做為媒體查詢的條件，
+ and：可以將多個媒體特性連接到一起，相當于“且”的意思，
+ not：排除某個媒體型別，相當于“非”的意思，可以省略，
+ only：指定某個特定的媒體型別，可以省略，
3. 媒體特性
每種媒體型別都具體各自不同的特性，根據不同媒體型別的媒體特性設定不同的展示風格，我們暫且了解三個，
注意他們要加小括號包含
?
4. 媒體查詢書寫規則
注意： 為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣代碼更簡潔
?
?
### 3 less 基礎
#### 3.1 維護css弊端
CSS 是一門非程式式語言，沒有變數、函式、SCOPE（作用域）等概念，
+ CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的，
+ 不方便維護及擴展，不利于復用，
+ CSS 沒有很好的計算能力
+ 非前端開發工程師來講，往往會因為缺少 CSS 撰寫經驗而很難寫出組織良好且易于維護的 CSS 代碼專案，
#### 3.2 Less 介紹
Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴展語言，也成為CSS前處理器，
做為 CSS的一種形式的擴展，它并沒有減少CSS的功能，而是在現有的CSS語法上，為CSS加入程式式語言的特性，
它在CSS 的語法基礎之上，引入了變數，Mixin（混入），運算以及函式等功能，大大簡化了 CSS 的撰寫，并且降低了 CSS的維護成本，就像它的名稱所說的那樣，Less可以讓我們用更少的代碼做更多的事情，
Less中文網址：[http://](http://lesscss.cn/)[less](http://lesscss.cn/)[css.cn/](http://lesscss.cn/)
常見的CSS前處理器：Sass、Less、Stylus
一句話：Less是一門 CSS 預處理語言，它擴展了CSS的動態特性，
Less安裝
①安裝nodejs，可選擇版本(8.0)，網址：<http://nodejs.cn/download/>
②檢查是否安裝成功，使用cmd命令（win10是window+r 打開運行輸入cmd） ---輸入“node –v”查看版本即可
③基于nodejs在線安裝Less，使用cmd命令“npm install -g less”即可
④檢查是否安裝成功，使用cmd命令“ lessc -v ”查看版本即可
Less 使用之變數
變數是指沒有固定的值，可以改變的，因為我們CSS中的一些顏色和數值等經常使用，
@變數名:值;
+ 必須有@為前綴
+ 不能包含特殊字符
+ 不能以數字開頭
+ 大小寫敏感
@color: pink;
Less 編譯 vocode Less 插件
Easy LESS 插件用來把less檔案編譯為css檔案
安裝完畢插件，重新加載下 vscode，
只要保存一下Less檔案，會自動生成CSS檔案，
Less 嵌套
// 將css改為less
#header .logo {
width: 300px;
}
#header {
.logo {
width: 300px;
}
}
如果遇見 （交集|偽類|偽元素選擇器） ，利用&進行連接
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
Less 運算
任何數字、顏色或者變數都可以參與運算，就是Less提供了加（+）、減（-）、乘（*）、除（/）算術運算，
/Less 里面寫/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/生成的css/
div {
border: 15px solid red;
}
/*Less 甚至還可以這樣 */
width: (@width + 5) * 2;
+ 乘號（*）和除號（/）的寫法
+ 運算子中間左右有個空格隔開 1px + 5
+ 對于兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
+ 如果兩個值之間只有一個值有單位，則運算結果就取該單位
### 4 rem適配方案
1.讓一些不能等比自適應的元素，達到當設備尺寸發生改變的時候，等比例適配當前設備，
2.使用媒體查詢根據不同設備按比例設定html的字體大小，然后頁面元素使用rem做尺寸單位，當html字體大小變化元素尺寸也會發生變化，從而達到等比縮放的適配，
技術方案：
1.less+rem+媒體查詢
2.lflexible.js+rem
總結：
兩種方案現在都存在，
方案2 更簡單，現階段大家無需了解里面的js代碼，
#### 4.1 rem實際開發適配方案1
①假設設計稿是750px
②假設我們把整個螢屏劃分為15等份（劃分標準不一可以是20份也可以是10等份）
③每一份作為html字體大小，這里就是50px
④那么在320px設備的時候，字體大小為320/15就是 21.33px
⑤用我們頁面元素的大小除以不同的 html字體大小會發現他們比例還是相同的
⑥比如我們以750為標準設計稿
⑦一個100*100像素的頁面元素在 750螢屏下， 就是 100/ 50 轉換為rem 是 2rem*2rem 比例是1比1
⑧320螢屏下， html字體大小為21.33 則 2rem= 42.66px 此時寬和高都是 42.66 但是寬和高的比例還是 1比1
⑨但是已經能實作不同螢屏下 頁面元素盒子等比例縮放的效果
總結：
①最后的公式：頁面元素的rem值 = 頁面元素值（px） / （螢屏寬度 / 劃分的份數）
②螢屏寬度/劃分的份數就是 htmlfont-size 的大小
③或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字體大小
### 5 蘇寧首頁
蘇寧首頁地址 ：[蘇寧首頁](m.suning.com)
1、 技術選型
方案：我們采取單獨制作移動頁面方案
技術：布局采取rem適配布局（less + rem + 媒體查詢）
設計圖： 本設計圖采用 750px 設計尺寸
2、搭建檔案結構
3、設定視口標簽以及引入初始化樣式
4、設定公共common.less檔案
- 新建common.less 設定好最常見的螢屏尺寸，利用媒體查詢設定不同的html字體大小，因為除了首頁其他頁面也需要
- 我們關心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
- 劃分的份數我們定為 15等份
- 因為我們pc端也可以打開我們蘇寧移動端首頁，我們默認html字體大小為 50px，注意這句話寫到最上面
6rem 適配方案2
手機淘寶團隊出的簡潔高效 移動端適配庫
我們再也不需要在寫不同螢屏的媒體查詢，因為里面js做了處理
它的原理是把當前設備劃分為10等份，但是不同設備下，比例還是一致的，
我們要做的，就是確定好我們當前設備的html 文字大小就可以了
比如當前設計稿是 750px， 那么我們只需要把 html 文字大小設定為 75px(750px / 10) 就可以
里面頁面元素rem值： 頁面元素的px 值 / 75
剩余的，讓flexible.js來去算
github地址：https://github.com/amfe/lib-flexible
總結：
因為flexible是默認將螢屏分為10等分
但是當螢屏大于750的時候希望不要再去重置html字體了
所以要自己通過媒體查詢設定一下
并且要把權重提到最高
VSCode px 轉換rem 插件 cssrem
因為cssrem中css自動轉化為rem是參照默認插件的16轉換的所以需要自己配置
移動端WEB開發之回應式布局
1.0 回應式開發原理
1.1 回應式開發原理
就是使用媒體查詢針對不同寬度的設備進行布局和樣式的設定，從而適配不同設備的目的，
設備的劃分情況：
- 小于768的為超小螢屏（手機）
- 768~992之間的為小屏設備（平板）
- 992~1200的中等螢屏（桌面顯示幕）
- 大于1200的寬屏設備（大桌面顯示幕）
1.2 回應式布局容器
回應式需要一個父級做為布局容器，來配合子級元素來實作變化效果，
原理就是在不同螢屏下，通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實作不同螢屏下，看到不同的頁面布局和樣式變化，
父容器版心的尺寸劃分
- 超小螢屏（手機，小于 768px）：設定寬度為 100%
- 小螢屏（平板，大于等于 768px）：設定寬度為 750px
- 中等螢屏（桌面顯示幕，大于等于 992px）：寬度設定為 970px
- 大螢屏（大桌面顯示幕，大于等于 1200px）：寬度設定為 1170px
但是我們也可以根據實際情況自己定義劃分
2.0 bootstrap的介紹
2.1Bootstrap簡介
Bootstrap 來自 Twitter（推特），是目前最受歡迎的前端框架，Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷，
中文網 官網 推薦網站
框架：顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權在框架本身，有預制樣式庫、組件和插件，使用者要按照框架所規定的某種規范進行開發，
2.2 bootstrap優點
- 標準化的html+css編碼規范
- 提供了一套簡潔、直觀、強悍的組件
- 有自己的生態圈，不斷的更新迭代
- 讓開發更簡單，提高了開發的效率
2.3 版本簡介
2.x.x：停止維護,兼容性好,代碼不夠簡潔，功能不夠完善，
3.x.x：目前使用最多,穩定,但是放棄了IE6-IE7，對 IE8 支持但是界面效果不好,偏向用于開發回應式布局、移動設備優先的WEB 專案，
4.x.x：最新版，目前還不是很流行
2.4bootstrap基本使用
在現階段我們還沒有接觸JS相關課程，所以我們只考慮使用它的樣式庫，
Bootstrap 使用四步曲：
-
創建檔案夾結構
?
-
創建 html 骨架結構
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>?
-
引入相關樣式檔案
<!-- Bootstrap 核心樣式--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">?
-
書寫內容
直接拿Bootstrap 預先定義好的樣式來使用
修改Bootstrap 原來的樣式，注意權重問題
學好Bootstrap 的關鍵在于知道它定義了哪些樣式，以及這些樣式能實作什么樣的效果
2.5 bootstrap布局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 或者.container-fluid 容器，它提供了兩個作此用處的類，
.container
- 回應式布局的容器 固定寬度
- 大屏 ( >=1200px) 寬度定為 1170px
- 中屏 ( >=992px) 寬度定為 970px
- 小屏 ( >=768px) 寬度定為 750px
- 超小屏 (100%)
.container-fluid
- 流式布局容器 百分百寬度
- 占據全部視口（viewport）的容器，
2.6 bootstrap柵格系統
Bootstrap提供了一套回應式、移動設備優先的流式柵格系統，隨著螢屏或視口（viewport）尺寸的增加，系統會自動分為最多12列，
柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中，
- 按照不同螢屏劃分為1~12 等份
- 行（row） 可以去除父容器作用15px的邊距
- xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
- 列（column）大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列
- 每一列默認有左右15像素的 padding
- 可以同時為一列指定多個設備的類名，以便劃分不同份數 例如 class=“col-md-4 col-sm-6”
柵格嵌套
柵格系統內置的柵格系統將內容再次嵌套，簡單理解就是一個列內再分成若干份小列，我們可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-*
元素內，
<!-- 列嵌套 -->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">小列</div>
<div class="col-sm-6">小列</div>
</div>
</div>
列偏移
使用 .col-md-offset-* 類可以將列向右側偏移，這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin），
<!-- 列偏移 -->
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4 col-lg-offset-4">2</div>
</div>
列排序
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序，
<!-- 列排序 -->
<div class="row">
<div class="col-lg-4 col-lg-push-8">左側</div>
<div class="col-lg-8 col-lg-pull-4">右側</div>
</div>
回應式工具
為了加快對移動設備友好的頁面開發作業，利用媒體查詢功能，并使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容，
3.0 阿里百秀案例制作
3.1 技術選型
方案：我們采取回應式頁面開發方案
技術：bootstrap框架
設計圖： 本設計圖采用 1280px 設計尺寸
專案結構搭建
Bootstrap 使用四步曲：
-
創建檔案夾結構
-
創建 html 骨架結構
-
引入相關樣式檔案
-
書寫內容
container寬度修改
因為本效果圖采取 1280的寬度， 而Bootstrap 里面 container寬度 最大為 1170px，因此我們需要手動改下container寬度
/* 利用媒體查詢修改 container寬度適合效果圖寬度 */
@media (min-width: 1280px) {
.container {
width: 1280px;
}
}
:heartpulse::heartpulse::heartpulse:
```python
print("如果文章對你有用，請點個贊唄O(∩_∩)O~")
System.out.println("如果文章對你有用，請點個贊唄O(∩_∩)O~");
cout<<"如果文章對你有用，請點個贊唄O(∩_∩)O~"<<endl;
💗💗💗
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294238.html
標籤：其他
上一篇：JavaScript-陣列
下一篇：Javascript筆記大全03