JavaScript基礎知識總結

本文轉載自查看原文 2020-07-17 18:22 490 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
　　我們用chrome(谷歌瀏覽器)

網頁、網站和應用程序

　　網頁：單獨的一個頁面

　　網站：一些列相關的頁面組成到一起

　　應用程序：可以和用戶產生交互，並實現某種功能。

演示JavaScript的強大

　　http://naotu.baidu.com/

　　https://codecombat.com/

　　https://ide.codemao.cn/

　　需要FQ

　　https://developers.google.com/blockly/

　　blockly迷宮

　　https://blockly-games.appspot.com

　　blockly迷宮不需要FQ

　　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);

　　作業：

求1-100之間所有數的乘積
求1-100之間所有奇數的和
計算1-100之間能3整除的數的和
計算1-100之間不能被7整除的數的和
// 講解思路。如果不會寫程序，可以先把數學公式准備好
本金10000元存入銀行，年利率是千分之三，每過1年，將本金和利息相加作為新的本金。計算5年后，獲得的本金是多少？
有個人想知道，一年之內一對兔子能繁殖多少對？於是就築了一道圍牆把一對兔子關在里面。
已知一對兔子每個月可以生一對小兔子，而一對兔子從出生后第3個月起每月生一對小兔子。
假如一年內沒有發生死亡現象，那么，一對兔子一年內（12個月）能繁殖成多少對？（兔子的規律為數列，1，1，2，3，5，8，13，21）

　　continue和break

　　　　break:立即跳出整個循環，即循環結束，開始執行循環后面的內容（直接跳到大括號）

　　　　continue:立即跳出當前循環，繼續下一次循環（跳到i++的地方）

　　案例：

　　作業：

　　　　求1-100之間不能被7整除的整數的和（用continue）

　　　　求200-300之間所有的奇數的和（用continue）

　　　　求200-300之間第一個能被7整數的數（break）

調試

　　過去調試JavaScript的方式

　　　　alert()

　　　　console.log()

　　斷點調試

　　　　斷點調試是指自己在程序的某一行設置一個斷點，調試時，程序運行到這一行就會停住，然后你可以一步一步往下調試，調試過程中可以看各個變量當前的值，出錯的話，調試到出錯的代碼行即顯示錯誤，停下。

　　調試步驟

　　調試中的相關操作

　　tips: 監視變量，不要監視表達式，因為監視了表達式，那么這個表達式也會執行。

　　　　1.代碼調試的能力非常重要，只有學會了代碼調試，才能學會自己解決bug的能力。初學者不要覺得調試代碼麻煩就不去調試，知識點花點功夫肯定學的會，但是代碼調試這個東西，自己不去練，永遠都學不會。

　　　　2.今天學的代碼調試非常的簡單，只要求同學們記住代碼調試的這幾個按鈕的作用即可，后面還會學到很多的代碼調試技巧。

數組　　

　　為什么要學習數組

　　　　之前學習的數據類型，只能存儲一個值(比如：Number/String。我們想存儲班級中所有學生的姓名，此時該如何存儲？

　　數組的概念

　　　　所謂數組，就是將多個元素（通常是同一類型）按一定順序排列放到一個集合中，那么這個集合我們就稱之為數組。

　　數組的定義

　　　　數組是一個有序的列表，可以在數組中存放任意的數據，並且數組的長度可以動態的調整。

　　通過數組字面量創建數組

　　獲取數組元素

　　　　數組的取值

　　遍歷數組

　　　　遍歷：遍及所有，對數組的每一個元素都訪問一次就叫遍歷。

　　　　數組遍歷的基本語法：

　　數組中新增元素

　　　　數組的賦值

　　案例

函數

　　為什么要有函數

　　　　如果要在多個地方求1-100之間所有數的和，應該怎么做？　　

　　什么是函數

　　　　把一段相對獨立的具有特定功能的代碼塊封裝起來，形成一個獨立實體，就是函數，起個名字（函數名），在后續開發中可以反復調用函數的作用就是封裝一段代碼，將來可以重復使用

　　函數的定義

　　　　函數聲明

　　　　函數表達式

　　　　特點：

　　　　　　函數聲明的時候，函數體並不會執行，只要當函數被調用的時候才會執行。

　　　　　　函數一般都用來干一件事情，需用使用動詞+名詞，表示做一件事情 tellStory sayHello等

　　函數的調用

　　　　調用函數的語法：

　　　　特點：

　　　　　　函數體只有在調用的時候才會執行，調用需要()進行調用。

　　　　　　可以調用多次(重復使用)

　　　　代碼示例：

　　函數的參數

　　　　為什么要有參數

　　　　語法：

　　　　形參和實參

　　　　　　1.形式參數：在聲明一個函數的時候，為了函數的功能更加靈活，有些值是固定不了的，對於這些固定不了的值。我們可以給函數設置參數。這個參數沒有具體的值，僅僅起到一個占位置的作用，我們通常稱之為形式參數，也叫形參。

　　　　　　2.實際參數：如果函數在聲明時，設置了形參，那么在函數調用的時候就需要傳入對應的參數，我們把傳入的參數叫做實際參數，也叫實參。

　　　　案例

　　　　　　求1-n之間所有數的和

　　　　　　求n-m之間所有數額和

　　　　　　圓的面積

　　　　　　求2個數中的最大值

　　　　　　求3個數中的最大值

　　　　　　判斷一個數是否是素數　　　

　　函數的返回值

　　　　當函數執行完的時候，並不是所有時候都要把結果打印。我們期望函數給我一些反饋（比如計算的結果返回進行后續的運算），這個時候可以讓函數返回一些東西。也就是返回值。函數通過return返回一個返回值

　　　　返回值語法：

　　　　函數的調用結果就是返回值，因此我們可以直接對函數調用結果進行操作。

　　　　返回值詳解：

　　　　　　如果函數沒有顯示的使用 return語句，那么函數有默認的返回值：undefined

　　　　　　如果函數使用 return語句，那么跟再return后面的值，就成了函數的返回值

　　　　　　如果函數使用 return語句，但是return后面沒有任何值，那么函數的返回值也是：undefined

　　　　　　函數使用return語句后，這個函數會在執行完 return 語句之后停止並立即退出，也就是說return后面的所有其他代碼都不會再執行。

　　案例

　　　　求階乘

　　　　求1!+2!+3!+…+n!

　　　　求一組數中的最大值

　　　　求一組數中的最小值　

　　arguments的使用

　　　　JavaScript中，arguments對象是比較特別的一個對象，實際上是當前函數的一個內置屬性。也就是說所有函數都內置了一個arguments對象，arguments對象中存儲了傳遞的所有的實參。arguments是一個偽數組，因此及可以進行遍歷

　　案例

　　函數其它　　　　

　　　　匿名函數

　　　　　　匿名函數：沒有名字的函數

　　　　匿名函數如何使用：

　　　　關於自執行函數（匿名函數自調用）的作用：防止全局變量污染。　　　

　　自調用函數

　　　　匿名函數不能通過直接調用來執行，因此可以通過匿名函數的自調用的方式來執行

　　函數是一種數據類型

　　函數作為參數

　　　　因為函數也是一種類型，可以把函數作為兩一個函數的參數，在兩一個函數中調用

　　函數做為返回值

　　　　因為函數是一種類型，所以可以把函數可以作為返回值從函數內部返回，這種用法在后面很常見。

　　代碼規范

作用域

　　作用域：變量可以起作用的范圍　

　　全局變量和局部變量

　　　　全局變量

　　　　　　在任何地方都可以訪問到的變量就是全局變量，對應全局作用域

　　　　局部變量

　　　　　　只在固定的代碼片段內可訪問到的變量，最常見的例如函數內部。對應局部作用域(函數作用域)

　　塊級作用域

　　　　任何一對花括號（｛和｝）中的語句集都屬於一個塊，在這之中定義的所有變量在代碼塊外都是不可見的，我們稱之為塊級作用域。在es5之前沒有塊級作用域的的概念,只有函數作用域，現階段可以認為JavaScript沒有塊級作用域.　

　　詞法作用域

　　　　變量的作用域是在定義時決定而不是執行時決定，也就是說詞法作用域取決於源碼，通過靜態分析就能確定，因此詞法作用域也叫做靜態作用域。

　　在 js 中詞法作用域規則:

　　　　函數允許訪問函數外的數據.

　　　　整個代碼結構中只有函數可以限定作用域.

　　　　作用域規則首先使用提升規則分析

　　　　如果當前作用規則中有名字了, 就不考慮外面的名字

　　作用域鏈

只有函數可以制造作用域結構， 那么只要是代碼，就至少有一個作用域, 即全局作用域。凡是代碼中有函數，那么這個函數就構成另一個作用域。
如果函數中還有函數，那么在這個作用域中就又可以誕生一個作用域。

將這樣的所有的作用域列出來，可以有一個結構: 函數內指向函數外的鏈式結構。就稱作作用域鏈。

預解析

　　JavaScript代碼的執行是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器執行JavaScript代碼的時候，分為兩個過程：預解析過程和代碼執行過程

　　預解析過程：

　　　　1.把變量的聲明提升到當前作用域的最前面，只會提升聲明，不會提升賦值。

　　　　2.把函數的聲明提升到當前作用域的最前面，只會提升聲明，不會提升調用。

　　　　3.先提升var，在提升function

　　JavaScript的執行過程

　　全局解析規則　　　　

　　　　函數內部解析規則　

　　　　變量提升

　　　　　　　　定義變量的時候，變量的聲明會被提升到作用域的最上面，變量的賦值不會提升。

　　　　　　函數提升

　　　　　　　　JavaScript解析器首先會把當前作用域的函數聲明提前到整個作用域的最前面

對象

　　為什么要有對象

　　什么是對象

　　JavaScript中的對象

　　事物的特征在對象中用屬性來表示。

　　事物的行為在對象中用方法來表示。

對象字面量

　　字面量：11 ‘abc’ true [] {}等

　　思考：

對象創建方式

　　對象字面量

　　new Object()創建對象

　　工廠函數創建對象

　　自定義構造函數

屬性和方法

new關鍵字

　　構造函數，是一種特殊的函數。主要用來在創建對象時初始化對象，即為對象成員變量賦初始值，總與new運算符一起使用在創建對象的語句中。

　　　　1.構造函數用於創建一類對象，首字母要大寫。

　　　　2.構造函數要和new一起使用才有意義。

　　new在執行時會做四件事情

this詳解

JavaScript中的this指向問題，有時候會讓人難以捉摸，隨着學習的深入，我們可以逐漸了解
現在我們需要掌握函數內部的this幾個特點
    1. 函數在定義的時候this是不確定的，只有在調用的時候才可以確定
    2. 一般函數直接執行，內部this指向全局window
    3. 函數作為一個對象的方法，被該對象所調用，那么this指向的是該對象
    4. 構造函數中的this其實是一個隱式對象，類似一個初始化的模型，所有方法和屬性都掛載到了這個隱式對象身上，后續通過new關鍵字來調用，從而實現實例化

對象的使用　　

　　遍歷對象的屬性

　　　　通過for…in語法可以遍歷一個對象

　　刪除對象的屬性

簡單類型和復雜類型的區別

　　基本類型又叫做值類型，復雜類型又叫做引用類型

　　值類型：簡單數據類型，基本數據類型，在存儲時，變量中存儲的是值本身，因此叫做值類型。

　　引用類型：復雜數據類型，在存儲是，變量中存儲的僅僅是地址（引用），因此叫做引用數據類型。

　　堆和棧

　　注意：JavaScript中沒有堆和棧的概念，此處我們用堆和棧來講解，目的方便理解和方便以后的學習。　

　　基本類型在內存中的存儲

　　復雜類型在內存中的存儲

　　基本類型作為函數的參數

　　復雜類型作為函數的參數

　　思考：

//1. 
var num1 = 10;
var num2 = num1;
num1 = 20;
console.log(num1);
console.log(num2);

//2. 
var num = 50;
function f1(num) {
    num = 60;
    console.log(num);
}
f1(num);
console.log(num);

//3. 
var num1 = 55;
var num2 = 66;
function f1(num, num1) {
  num = 100;
  num1 = 100;
  num2 = 100;
  console.log(num);
  console.log(num1);
  console.log(num2);
}

f1(num1, num2);
console.log(num1);
console.log(num2);
console.log(num);