碼上未來IT培訓(xùn)老師直接接聽

400-029-09** 400-029-0997 轉(zhuǎn) 36015
查看完整號碼
掃碼撥號
微信掃碼撥號

AI大模型全棧開發(fā)|前端基礎(chǔ)：JavaScript基礎(chǔ)-表達(dá)式

2025/4/29 0:16:22

前端基礎(chǔ)JavaScript基礎(chǔ)表達(dá)式課程前言Course...

前端基礎(chǔ)JavaScript基礎(chǔ)表達(dá)式

課程前言Course Introduction同學(xué)們，歡迎來到《JavaScript基礎(chǔ)-表達(dá)式》的學(xué)習(xí)！JavaScript，作為當(dāng)今最流行的編程語言之一，不僅在網(wǎng)頁開發(fā)中占據(jù)核心地位，還在服務(wù)端、桌面應(yīng)用、游戲開發(fā)等領(lǐng)域展現(xiàn)出強大的生命力。這節(jié)課程將為你奠定堅實的基礎(chǔ)。讓我們一起開啟這段充滿挑戰(zhàn)與樂趣的學(xué)習(xí)旅程吧！一編程語言概述

CodingFuture

1.1編程

讓計算機解決問題而編寫代碼的過程。1.2計算機語言分類

機器語言：二進(jìn)制指令（0和1），如 0=00000000，1=00000001。

匯編語言：英文縮寫的硬件操作指令（如 stepi、info register ebx）。

高級語言：C、PHP、Java、JavaScript等，需通過翻譯器轉(zhuǎn)換為機器語言。

二計算機基礎(chǔ)

CodingFuture

2.1計算機組成

硬件如：CPU、硬盤、內(nèi)存、主板等。軟件如：瀏覽器、QQ等。2.2數(shù)據(jù)存儲

計算機內(nèi)部使用二進(jìn)制 0 和 1來表示數(shù)據(jù)。 所有數(shù)據(jù)，包括文件、圖片等最終都是以二進(jìn)制數(shù)據(jù)（0 和 1）的形式存放在硬盤中的。硬盤、內(nèi)存都是保存的二進(jìn)制數(shù)據(jù)。2.3數(shù)據(jù)存儲單位

bit<byte<kb<GB<TB<pb<eb<zb<yb<bb<nb<db<cb<xb<span="">位(bit)：1bit可以保存一個0或者1（最小的存儲單位）字節(jié)(Byte)：1Byte=8b（1Byte可以保存一個英文字母或者是1個數(shù)字，漢字是2個字節(jié)）千字節(jié)（KB）：1KB=1024B兆字節(jié)（MB）：1MB=1024KB吉字節(jié)（GB）：1GB=1024MB太字節(jié)（TB）：1TB=1024GB2.4程序運行

代碼從硬盤加載到內(nèi)存，CPU執(zhí)行內(nèi)存中的代碼。

三JavaScript基礎(chǔ)

CodingFuture

3.1JavaScript簡介

創(chuàng)始人：布蘭登·艾奇（Brendan Eich），JavaScript是客戶端腳本語言。

3.2JavaScript的作用

表單動態(tài)校驗（密碼強度檢測）（JS產(chǎn)生最初的目的）網(wǎng)頁特效服務(wù)端開發(fā)(Node.js)桌面程序(Electron)游戲開發(fā)(cocos2d-js)3.3HTML/CSS/JS 的關(guān)系

html：網(wǎng)頁的基本結(jié)構(gòu)css：網(wǎng)頁樣式美化js：網(wǎng)頁的行為瀏覽器分成兩部分：渲染引擎和JS引擎渲染引擎：用來解析HTML與CSS,俗稱內(nèi)核，比如chrome瀏覽器的blink,老版本的webkitJS引擎：也稱為JS解釋器。用來讀取網(wǎng)頁中的JavaScript代碼，對其處理后運行，比如chrome瀏覽器的V83.4JS 的組成1.ECMAScript：Javascript基礎(chǔ)語法由ECMA 國際（ 原歐洲計算機制造商協(xié)會）進(jìn)行標(biāo)準(zhǔn)化的一門編程語言，這種語言在萬維網(wǎng)上應(yīng)用廣泛，JavaScript是 ECMAScript語言的實現(xiàn)和擴展。ECMAScript：規(guī)定了JS的編程語法和基礎(chǔ)核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業(yè)標(biāo)準(zhǔn)。2.DOM：文檔對象模型文檔對象模型（DocumentObject Model，簡稱DOM），是W3C組織推薦的處理可擴展標(biāo)記語言的標(biāo)準(zhǔn)編程接口。通過 DOM 提供的接口可以對頁面上的各種元素進(jìn)行操作（大小、位置、顏色等）3.BOM：瀏覽器對象模型瀏覽器對象模型(Browser Object Model，簡稱BOM) 是指瀏覽器對象模型，它提供了獨立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)。通過BOM可以操作瀏覽器窗口，比如彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等。四代碼書寫與注釋

CodingFuture

4.1書寫位置

1.行內(nèi)式（不推薦）：可讀性差， 在html中編寫JS大量代碼時，不方便閱讀引號易錯，引號多層嵌套匹配時，非常容易弄混<input type="button" value="點我試試" onclick="alert("Hello World")" />2.內(nèi)嵌式：可以將多行JS代碼寫到script標(biāo)簽中內(nèi)嵌JS是學(xué)習(xí)時常用的方式<script>alert("Hello World~!");</script>3.外部JS文件：利于HTML頁面代碼結(jié)構(gòu)化，把大段JS代碼獨立到HTML頁面之外，既美觀，也方便文件級別的復(fù)用引用外部JS文件的script標(biāo)簽中間不可以寫代碼適合于JS代碼量比較大的情況<script src="my.js"></script>4.2JavaScript注釋

單行注釋方式：//用來注釋單行文字（快捷鍵ctrl+/）多行注釋方式：/* */用來注釋多行文字（默認(rèn)快捷鍵alt+shift+a）五JavaScript輸入輸出語句

CodingFuture

為了方便信息的輸入輸出，JS中提供了一些輸入輸出語句，其常用的語句如下：方法說明歸屬alert(msg)瀏覽器彈出警示框瀏覽器console.log(msg)瀏覽器控制臺打印輸出信息瀏覽器prompt(info)瀏覽器彈出輸入框，用戶可以輸入瀏覽器注意：alert() 主要用來顯示消息給用戶，console.log() 用來給程序員自己看運行時的消息。六變量

CodingFuture

6.1定義

內(nèi)存中存儲數(shù)據(jù)的標(biāo)識符。6.2使用

1.聲明：var age;var是一個JS關(guān)鍵字，用來聲明變量(variable變量的意思)。age是程序員定義的變量名，我們要通過變量名來訪問內(nèi)存中分配的空間2.賦值：age = 10;【=】用來把右邊的值賦給左邊的變量空間中，此處代表賦值的意思3.初始化：var age = 18;*變量語法擴展*1.更新變量：var age = 18;age = 81;2.同時聲明多個變量：同時聲明多個變量時，只需要寫一個 var， 多個變量名之間使用英文逗號隔開。var age = 10, name = "zs", sex = 2;3.聲明變量特殊情況：

6.3命名規(guī)范

由字母(A-Za-z)、數(shù)字(0-9)、下劃線(_)、美元符號($)組成，如：usrAge,num01, _name嚴(yán)格區(qū)分大小寫：var app; 和var App;是兩個變量不能以數(shù)字開頭：18age是錯誤的不能是關(guān)鍵字、保留字，例如：var、for、while變量名必須有意義。遵守駝峰命名法：首字母小寫，后面單詞的首字母需要大寫。關(guān)鍵字和保留字：1.關(guān)鍵字：是指 JS本身已經(jīng)使用了的字，不能再用它們充當(dāng)變量名、方法名。包括：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 等。2.保留字：現(xiàn)階段版本未使用，但以后版本可能會作為關(guān)鍵字使用，所以也要避免使用這些保留字（goto）當(dāng)標(biāo)識符。七數(shù)據(jù)類型

CodingFuture

7.1簡介

在計算機中，不同的數(shù)據(jù)所需占用的存儲空間是不同的，為了便于把數(shù)據(jù)分成所需內(nèi)存大小不同的數(shù)據(jù)，充分利用存儲空間，于是定義了不同的數(shù)據(jù)類型。7.2變量的數(shù)據(jù)類型

JavaScript 是一種弱類型或者說動態(tài)語言。這意味著不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定：var age = 10; // 這是一個數(shù)字型var userName = "碼上未來"; // 這是一個字符串7.3數(shù)據(jù)類型的分類

JS 把數(shù)據(jù)類型分為兩類：簡單數(shù)據(jù)類型（Number,String,Boolean,Undefined,Null）復(fù)雜數(shù)據(jù)類型（Object, Array, function)簡單數(shù)據(jù)類型（基本數(shù)據(jù)類型）JavaScript 中的簡單數(shù)據(jù)類型及其說明如下：簡單數(shù)據(jù)類型說明默認(rèn)值Number數(shù)字型，整型和浮點型，24、24.1、24.00Boolean布爾型，true、false、等價于1和0falseString字符串，"張三"，表示文本""Undefinedvar a; 聲明了，但是沒賦值，此時結(jié)果就是undefinedundefinedNullvar a = null；把null值賦予給了a，后面課程會詳細(xì)講到什么是nullnull數(shù)字型 Number：1.JavaScript 數(shù)字類型既可以保存整數(shù)，也可以保存小數(shù)(浮點數(shù)）。var age = 21;var Age = 21.3747;var PI = 3.1415926532.數(shù)字型范圍：JavaScript中數(shù)值的*大和最小值*大值：Number.MAX_VALUE這個值為：1.7976931348623157e+308最小值：Number.MIN_VALUE，這個值為：5e-324console.log(Number.MIN_VALUE);console.log(Number.MAX_VALUE);3. 數(shù)字型三個特殊值：Infinity ，代表無窮大，大于任何數(shù)值-Infinity ，代表無窮小，小于任何數(shù)值NaN ，Not a number，代表一個非數(shù)值4. isNaN：用來判斷一個變量是否為非數(shù)字的類型，返回true或者false

var userName = "andy";var isOk = isNaN(userName);console.log(isOk); // true ，"andy"是一個非數(shù)字字符串型 String：字符串型可以是引號中的任意文本，其語法為雙引號 【""】和單引號【"】var strMsg = "我愛北京天安門~"; // 使用雙引號表示字符串var strMsg2 = "我愛吃豬蹄~"; // 使用單引號表示字符串// 常見錯誤var strMsg3 = 我愛大肘子; // 報錯，沒使用引號，會被認(rèn)為是js代碼，但js沒有這些語法因為HTML標(biāo)簽里面的屬性使用的是雙引號，JS這里我們更推薦使用單引號。1. 字符串引號嵌套：JS可以用單引號嵌套雙引號，或者用雙引號嵌套單引號(外雙內(nèi)單，外單內(nèi)雙)var strMsg = "我是"高帥富"程序猿"; // 可以用""包含""var strMsg2 = "我是"高帥富"程序猿"; // 也可以用"" 包含""http:// 常見錯誤var badQuotes = "What on earth?"; // 報錯，不能 單雙引號搭配2. 字符串轉(zhuǎn)義符：類似HTML里面的特殊字符，字符串中也有特殊字符，我們稱之為轉(zhuǎn)義符。轉(zhuǎn)義符解釋說明\n換行符，n是newline的意思\ \斜杠 \"" 單引號""雙引號\ttab縮進(jìn)3. 字符串長度：字符串是由若干字符組成的，這些字符的數(shù)量就是字符串的長度。通過字符串的length屬性，可以獲取整個字符串的長度。var strMsg = "我是帥氣多金的程序猿！";alert(strMsg.length);4. 字符串拼接：多個字符串之間可以使用【+】進(jìn)行拼接，其拼接方式為 字符串+任何類型=拼接之后的新字符串拼接前會把與字符串相加的任何類型轉(zhuǎn)成字符串，再拼接成一個新的字符串//1.1 字符串 "相加"alert("hello" + " " + "world"); // hello world//1.2 數(shù)值字符串 "相加"alert("100" + "100"); // 100100//1.3 數(shù)值字符串 + 數(shù)值alert("11" + 12); // 1112【+】號總結(jié)口訣：數(shù)值相加 ，字符相連5. 字符串拼接加強：console.log("小明" + 18); // 只要有字符就會相連var age = 18;console.log("小明age歲啦"); // 這樣不行哦console.log("小明" + age)布爾型Boolean：布爾類型有兩個值：true和false，其中true表示真（對），而false表示假（錯）。布爾型和數(shù)字型相加的時候，true的值為1 ，false的值為 0。console.log(true + 1); // 2console.log(false + 1); // 1Undefined：一個聲明后沒有被賦值的變量會有一個默認(rèn)值undefined ( 如果進(jìn)行相連或者相加時，注意結(jié)果）var variable;console.log(variable); // undefinedconsole.log("你好" + variable); // 你好undefinedconsole.log(11 + variable); // NaNconsole.log(true + variable); // NaNNull：一個聲明變量給null值，里面存的值為空（學(xué)習(xí)對象時，我們繼續(xù)研究null)var vari = null;console.log("你好" + vari); // 你好nullconsole.log(11 + vari); // 11console.log(true + vari); // 17.4獲取變量數(shù)據(jù)類型

獲取檢測變量的數(shù)據(jù)類型，typeof可用來獲取檢測變量的數(shù)據(jù)類型var num = 18;console.log(typeof num) // 結(jié)果 number不同類型的返回值類型類型類型Stringtypeof"小白""string"Numbertypeof 18"number"Booleantypeof true"boolean"Undefinedtypeof undefined"undefined"Nulltypeof null"object"7.5數(shù)據(jù)類型轉(zhuǎn)換

使用表單、prompt 獲取過來的數(shù)據(jù)默認(rèn)是字符串類型的，此時就不能直接簡單的進(jìn)行加法運算，而需要轉(zhuǎn)換變量的數(shù)據(jù)類型。通俗來說，就是把一種數(shù)據(jù)類型的變量轉(zhuǎn)換成另一種數(shù)據(jù)類型，通常會實現(xiàn)3種方式的轉(zhuǎn)換：轉(zhuǎn)換為字符串類型轉(zhuǎn)換為數(shù)字型轉(zhuǎn)換為布爾型轉(zhuǎn)換為字符串方式說明案例toString()轉(zhuǎn)成字符串var num=1；alert(num.toString());String()強制轉(zhuǎn)換轉(zhuǎn)成字符串var num=1；alert(String());加號拼接字符串和字符串拼接的結(jié)果都是字符串var num=1；alert(num+"我是字符串");三種轉(zhuǎn)換方式，更多第三種加號拼接字符串轉(zhuǎn)換方式， 這一種方式也稱之為隱式轉(zhuǎn)換。var a = 123;console.log(typeof String(a))//stringconsole.log(typeof (a.toString()))//stringvar c = a + "123"console.log(typeof c)//string轉(zhuǎn)為數(shù)字型方式說明案例parselnt(string)函數(shù)將string類型轉(zhuǎn)成整數(shù)數(shù)值型parselnt("78")parseFloat(string)函數(shù)將string類型轉(zhuǎn)成浮點數(shù)數(shù)值型parseFloat("78.21")函數(shù)Number()強制轉(zhuǎn)換函數(shù)將string類型轉(zhuǎn)成數(shù)值型Number("12")js隱式轉(zhuǎn)換(-*/)利用算術(shù)運算隱式轉(zhuǎn)換為數(shù)值型"12"-0parseInt()轉(zhuǎn)換注意點:如果帶有小數(shù)，轉(zhuǎn)換時去掉小數(shù)，但不是四舍五入特性：如果第*個為數(shù)字則繼續(xù)解析，直到遇到字符停止解析var str = "123";str = parseInt(str)console.log(typeof str)//numberconsole.log(str)//123console.log(parseInt("碼上未來"))//NaNvar num = parseInt("123.456")console.log(num)//123 會舍棄小數(shù)點var num1 = parseInt("123abc456")console.log(num1)//123 遇到abc這種字符就停止解析,后面有數(shù)字也不解析了parseFloat()轉(zhuǎn)換注意點:與parseInt（）一樣，但是可以保留小數(shù)。var str1 = "123.456";str1 = parseFloat(str1)console.log(typeof str1)//numberconsole.log(str1)//123.456Number()轉(zhuǎn)換注意點：如果轉(zhuǎn)換的內(nèi)容可以轉(zhuǎn)換成數(shù)字，那么就直接返回這個內(nèi)容的數(shù)字如果不可以轉(zhuǎn)換比如是string類型文本，返回NaN如果在內(nèi)容中出現(xiàn)小數(shù)，那么小數(shù)會保留如果內(nèi)容為空，那么轉(zhuǎn)換為0；var str2 = "";str2 = Number(str2)console.log(typeof str2)//numberconsole.log(str2)//123console.log(Number(""))//0隱式轉(zhuǎn)換是我們在進(jìn)行算數(shù)運算的時候，JS 自動轉(zhuǎn)換了數(shù)據(jù)類型console.log("6" + "2")//62 字符串拼接console.log("6" - "2")//4 隱式轉(zhuǎn)換console.log("6" * "2")//12 隱式轉(zhuǎn)換console.log("6" / "2")//3 隱式轉(zhuǎn)換console.log("6" % "2")//0 隱式轉(zhuǎn)換轉(zhuǎn)換為布爾型方式方式方式Boolean()函數(shù)其他類型轉(zhuǎn)成布爾值Boolean("true");代表空、否定的值會被轉(zhuǎn)換為 false ，如 ""、0、NaN、null、undefined其余值都會被轉(zhuǎn)換為 trueconsole.log(Boolean("")); // falseconsole.log(Boolean(0)); // falseconsole.log(Boolean(NaN)); // falseconsole.log(Boolean(null)); // falseconsole.log(Boolean(undefined)); // falseconsole.log(Boolean("小白")); // trueconsole.log(Boolean(12)); // true

結(jié)言陳詞Closing statement恭喜你完成了《JavaScript基礎(chǔ)-表達(dá)式》的學(xué)習(xí)！在這門課程中，我們從編程語言的基礎(chǔ)概念出發(fā)，逐步深入到JavaScript的核心知識。這些知識是JavaScript學(xué)習(xí)的基石，也是你邁向更高級編程技能的第一步。學(xué)習(xí)編程是一個循序漸進(jìn)的過程。今天的課程只是冰山一角，未來你將接觸到更多JavaScript的高級特性，請繼續(xù)保持對學(xué)習(xí)的熱情。未來的編程之路可能會充滿挑戰(zhàn)，但只要堅持不懈，你一定會收獲滿滿的成就感！下期課程預(yù)告：JavaScript基礎(chǔ)-運算符和流程控制碼上未來為同學(xué)們安排統(tǒng)一答疑掃碼添加微信領(lǐng)取詳細(xì)課程大綱

微信號:CodingFuture2020

The CodingFuture&The Future is Already Here<<<  END >>>

添加微信咨詢
夏老師 @大連碼上未來IT培訓(xùn)

資深職業(yè)咨詢規(guī)劃師

微信號：155******12

立即咨詢

“大連碼上未來IT培訓(xùn)”是碼上未來科技(大連)有限公司在教育寶平臺開設(shè)的店鋪，若該店鋪內(nèi)信息涉嫌虛假或違法，請點擊這里向教育寶反饋，我們將及時進(jìn)行處理。

機構(gòu)評分

環(huán)境：5.0師資：5.0服務(wù)：5.0效果：5.0

公示信息

店鋪名稱：大連碼上未來IT培訓(xùn)

單位名稱：碼上未來科技(大連)有限公司

賬號名稱：mswl（158******92）

所屬城市：遼寧大連

入駐時長：6年

在線客服：在線聊

微信咨詢

返回頂部