JavaScript基礎知識總結
宣告:本文摘抄自:https://blog.csdn.net/qq_39043923/article/details/89204263
JavaScript基礎
瀏覽器說明
瀏覽器是指可以顯示網頁伺服器或者檔案系統的HTML檔案內容，並讓使用者與這些檔案互動的一種軟體。
通俗的講:可以顯示頁面的一個軟體,
國內網民計算機上常見的網頁瀏覽器有，QQ瀏覽器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度瀏覽器、搜狗瀏覽器、獵豹瀏覽器、360瀏覽器、UC瀏覽器、傲遊瀏覽器、世界之窗瀏覽器等，瀏覽器是最經常使用到的客戶端程式。
常用的五大瀏覽器核心：chrome，firefox，Safari，ie，opera
網頁、網站和應用程式
網頁：單獨的一個頁面
網站：一些列相關的頁面組成到一起
應用程式：可以和使用者產生互動，並實現某種功能。
演示JavaScript的強大
http://naotu.baidu.com/
https://codecombat.com/
https://ide.codemao.cn/
需要翻牆
https://developers.google.com/blockly/
blockly迷宮
https://blockly-games.appspot.com
blockly迷宮不需要翻牆
https://blockly.uieee.com/
JavaScript介紹
JavaScript是什麼
HTML CSS
JavaScript 程式語言 流程控制
Netscape在最初將其指令碼語言命名為LiveScript，後來Netscape在與Sun合作之後將其改名為JavaScript。JavaScript最初受Java啟發而開始設計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規範也借自Java。JavaScript與Java名稱上的近似，是當時Netscape為了營銷考慮與Sun微系統達成協議的結果。Java和JavaScript的關係就像張雨和張雨生的關係，只是名字很像。
Java 伺服器端的程式語言
JavaScript 執行在客戶端(瀏覽器)的程式語言
JavaScript是一種執行在***客戶端*** 的***指令碼語言***
JavaScript的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
JavaScript現在的意義(應用場景)
JavaScript 發展到現在幾乎無所不能。
1.網頁特效
2.服務端開發(Node.js)
3.命令列工具(Node.js)
4.桌面程式(Electron)
5.App(Cordova)
6.控制硬體-物聯網(Ruff)
7.遊戲開發(cocos2d-js)
JavaScript和HTML、CSS的區別
1.HTML：提供網頁的結構，提供網頁中的內容
2.CSS: 用來美化網頁
3.JavaScript: 可以用來控制網頁內容，給網頁增加動態的效果
JavaScript的組成
ECMAScript - JavaScript的核心
ECMA 歐洲計算機制造聯合會
網景：JavaScript
微軟：JScript
定義了JavaScript的語法規範
JavaScript的核心，描述了語言的基本語法和資料型別，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關
BOM - 瀏覽器物件模型
一套操作瀏覽器功能的API
通過BOM可以操作瀏覽器視窗，比如：彈出框、控制瀏覽器跳轉、獲取解析度等
DOM - 文件物件模型
一套操作頁面元素的API
DOM可以把HTML看做是文件樹，通過DOM提供的API可以對樹上的節點進行操作
JavaScript初體驗
CSS：行內樣式、嵌入樣式、外部樣式
JavaScript的書寫位置
寫在行內
寫在script標籤中
寫在外部js檔案中，在頁面引入
注意點
引用外部js檔案的script標籤中不可以寫JavaScript程式碼
計算機組成
軟體
應用軟體：瀏覽器(Chrome/IE/Firefox)、QQ、Sublime、Word
系統軟體：Windows、Linux、mac OSX
硬體
三大件：CPU、記憶體、硬碟 – 主機板
輸入裝置：滑鼠、鍵盤、手寫板、攝像頭等
輸出裝置：顯示器、印表機、投影儀等
變數
什麼是變數
變數是計算機記憶體中儲存資料的識別符號，根據變數名稱可以獲取到記憶體中儲存的資料
為什麼要使用變數
使用變數可以方便的獲取或者修改記憶體中的資料
如何使用變數
var宣告變數
變數的賦值
同時宣告多個變數
同時宣告多個變數並賦值
變數在記憶體中的儲存
變數的命名規則和規範
規則 - 必須遵守的，不遵守會報錯
由字母、數字、下劃線、$符號組成，不能以數字開頭
不能是關鍵字和保留字，例如：for、while。
區分大小寫
規範 - 建議遵守的，不遵守不會報錯
變數名必須有意義
遵守駝峰命名法。首字母小寫，後面單詞的首字母需要大寫。例如：userName、userPassword
下面哪些變數名不合法
案例
1.交換兩個變數的值
2.不使用臨時變數，交換兩個數值變數的值
資料型別
簡單資料型別
Number、String、Boolean、Undefined、Null
Number型別
數值字面量：數值的固定值的表示法
110 1024 60.5
進位制
浮點數
浮點數的精度問題
數值範圍
數值判斷
NaN：not a number
NaN 與任何值都不相等，包括他本身
isNaN: is not a number
String型別
‘abc’ “abc”
字串字面量
‘程式猿’，‘程式媛’, “程式猿NX”
思考：如何列印以下字串。
我是一個"正直"的人
我很喜歡"前端’程式猿’"
轉義符
字串長度
length屬性用來獲取字串的長度
字串拼接
字串拼接使用 + 連線
1.兩邊只要有一個是字串，那麼+就是字串拼接功能
2.兩邊如果都是數字，那麼就是算術功能。
Boolean型別
Boolean字面量： true和false，區分大小寫
計算機內部儲存：true為1，false為0
Undefined和Null
undefined表示一個聲明瞭沒有賦值的變數，變數只宣告的時候值預設是undefined
null表示一個空，變數的值如果想為null，必須手動設定
複雜資料型別
Object
獲取變數的型別
typeof
字面量
在原始碼中一個固定值的表示法。
數值字面量：8, 9, 10
字串字面量：‘程式設計師’, “大前端”
布林字面量：true，false
註釋
單行註釋
用來描述下面一個或多行程式碼的作用
多行註釋
用來註釋多條程式碼
資料型別轉換
如何使用谷歌瀏覽器，快速的檢視資料型別？
字串的顏色是黑色的，數值型別是藍色的，布林型別也是藍色的，undefined和null是灰色的
轉換成字串型別
toString()
String()
拼接字串方式
num + “”，當 + 兩邊一個操作符是字串型別，一個操作符是其它型別的時候，會先把其它型別轉換成字串再進行字串拼接，返回字串
轉換成數值型別
Number()
parseInt()
parseFloat()
+，-0等運算
轉換成布林型別
Boolean()
0 ‘’(空字串) null undefined NaN 會轉換成false 其它都會轉換成true
操作符
運算子 operator
5 + 6
表示式 組成 運算元和操作符，會有一個結果
算術運算子
一元運算子
一元運算子：只有一個運算元的運算子
5 + 6 兩個運算元的運算子 二元運算子
++ 自身加1
– 自身減1
前置++
後置++
猜猜看
總結
前置++：先加1，後參與運算
後置++：先參與運算，後加1
上面兩個理解後，下面兩個自通
前置-- ：先減1，後參與運算
後置-- ：先參與運算，後減1
邏輯運算子(布林運算子)
關係運算符(比較運算子)
賦值運算子
= += -= *= /= %=
運算子的優先順序
表示式和語句
表示式
一個表示式可以產生一個值，有可能是運算、函式呼叫、有可能是字面量。表示式可以放在任何需要值的地方
語句
語句可以理解為一個行為，迴圈語句和判斷語句就是典型的語句。一個程式有很多個語句組成，一般情況下;分割一個一個的語句
流程控制
程式的三種基本結構
順序結構
從上到下執行的程式碼就是順序結構
程式預設就是由上到下順序執行的
分支結構
根據不同的情況，執行對應程式碼
迴圈結構
迴圈結構：重複做一件事情
分支結構
if語句
語法結構
案例：
求兩個數的最大數
判斷一個數是偶數還是奇數
分數轉換，把百分制轉換成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A
作業：
判斷一個年份是閏年還是平年
閏年：能被4整除，但不能被100整除的年份 或者 能被400整除的年份
判斷一個人的年齡是否滿18歲(是否成年)
三元運算子
案例：
是否年滿18歲
從兩個數中找最大值
switch語句
語法格式:
案例：
顯示星期幾
素質教育（把分數變成ABCDE）千萬不要寫100個case喲
布林型別的隱式轉換
流程控制語句會把後面的值隱式轉換成布林型別
案例
迴圈結構
在javascript中，迴圈語句有三種，while、do…while、for迴圈。
while語句
基本語法：
程式碼示例：
案例：
列印100以內 7的倍數
列印100以內所有偶數
列印100以內所有偶數的和
作業：
列印100以內的奇數
列印100以內的奇數的和
do…while語句
do…while迴圈和while迴圈非常像，二者經常可以相互替代，但是do…while的特點是不管條件成不成立，都會執行一次。
基礎語法：
程式碼示例：
案例：
for語句
while和do…while一般用來解決無法確認次數的迴圈。for迴圈一般在迴圈次數確定的時候比較方便
for迴圈語法：
執行順序：1243 ---- 243 -----243(直到迴圈條件變成false)
1.初始化表示式
2.判斷表示式
3.自增表示式
4.迴圈體
案例：
列印1-100之間所有數 求1-100之間所有數的和 求1-100之間所有數的平均值 求1-100之間所有偶數的和 同時求1-100之間所有偶數和奇數的和 列印正方形 // 使用拼字串的方法的原因 // console.log 輸出重複內容的問題 // console.log 預設輸出內容介紹後有換行 var start = ''; for (var i = 0; i < 10; i++) { for (var j = 0; j < 10; j++) { start += '* '; } start += '\n'; } console.log(start); 列印直角三角形 var start = ''; for (var i = 0; i < 10; i++) { for (var j = i; j < 10; j++) { start += '* '; } start += '\n'; } console.log(start); 列印9*9乘法表 var str = ''; for (var i = 1; i <= 9; i++) { for (var j = i; j <=9; j++) { str += i + ' * ' + j + ' = ' + i * j + '\t'; } str += '\n'; } console.log(str);
作業：