javascript
JavaScript基础语法（一）
目錄
前言
js變量
數(shù)據(jù)類(lèi)型
數(shù)據(jù)類(lèi)型轉(zhuǎn)換
傳送門(mén) ——>?JavaScript基礎(chǔ)語(yǔ)法（二）、JavaScript之?dāng)?shù)組與函數(shù)（三）、JavaScript之對(duì)象（四）、JavaScript階段二之Web APIs
前言
歷史：布蘭登.艾奇（1961~），在1995年中利用10天完成了JavaScript的設(shè)計(jì)
JavaScript是世界上最流行的語(yǔ)言之一，是一種運(yùn)行在客戶(hù)端的腳本語(yǔ)言（ Script是腳本的意思)腳本語(yǔ)言：不需要編譯，運(yùn)行過(guò)程中由js解釋器(js 引擎）逐行來(lái)進(jìn)行解釋并執(zhí)行。現(xiàn)在也可以基于Node.js技術(shù)進(jìn)行服務(wù)器端編程
解釋型與編譯型語(yǔ)言
JS屬于解釋型語(yǔ)言。
計(jì)算機(jī)不能直接理解任何除機(jī)器語(yǔ)言以外的語(yǔ)言，所以必須要把程序員所寫(xiě)的程序語(yǔ)言翻譯成機(jī)器語(yǔ)言才能執(zhí)行程序。程序語(yǔ)言翻譯成機(jī)器語(yǔ)言的工具，被稱(chēng)為翻譯器。
- 翻譯器翻譯的方式有兩種:一個(gè)是編譯，另外一個(gè)是解釋。兩種方式之間的區(qū)別在于翻譯的時(shí)間點(diǎn)不同
- 編譯器是在代碼執(zhí)行之前進(jìn)行編譯，生成中間代碼文件
- 解釋器是在運(yùn)行時(shí)進(jìn)行及時(shí)解釋，并立即執(zhí)行(當(dāng)編譯器以解釋方
js作用
- 表單動(dòng)態(tài)校驗(yàn)（密碼強(qiáng)度檢測(cè)）(JS產(chǎn)生最初的目的)
- 網(wǎng)頁(yè)特效
- 服務(wù)端開(kāi)發(fā)(Node.js)（現(xiàn)在前后端通吃了）
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物聯(lián)網(wǎng)(Ruff)
- 游戲開(kāi)發(fā)(cocos2d-js)
我們都知道前端三大件為html，css，js，js用來(lái)實(shí)現(xiàn)業(yè)務(wù)邏輯和頁(yè)面控制，相當(dāng)于實(shí)現(xiàn)人的各種動(dòng)作
瀏覽器執(zhí)行JS的過(guò)程
瀏覽器分成兩部分∶渲染引擎和JS引擎
- 渲染引擎∶用來(lái)解析HTML與CSS，俗稱(chēng)內(nèi)核，比如chrome瀏覽器的blink，老版本的webkit
- JS引擎：也稱(chēng)為JS解釋器。用來(lái)讀取網(wǎng)頁(yè)中的JavaScript代碼，對(duì)其處理后運(yùn)行，比如chrome 瀏覽器的V8
瀏覽器本身并不會(huì)執(zhí)行JS代碼，而是通過(guò)內(nèi)置JavaScript引擎(解釋器)來(lái)執(zhí)行S代碼。JS引擎執(zhí)行代碼時(shí)逐行解釋每一句源碼（轉(zhuǎn)換為機(jī)器語(yǔ)言），然后由計(jì)算機(jī)去執(zhí)行，所以JavaScript 語(yǔ)言歸為腳本語(yǔ)言，會(huì)逐行解釋執(zhí)行。
即瀏覽器通過(guò)JS引擎將js這種高級(jí)語(yǔ)言逐行轉(zhuǎn)換為計(jì)算機(jī)能識(shí)別的機(jī)器語(yǔ)言
js組成
?ECMAScript是由ECMA國(guó)際（原歐洲計(jì)算機(jī)制造商協(xié)會(huì)）進(jìn)行標(biāo)準(zhǔn)化的一門(mén)編程語(yǔ)言，這種語(yǔ)言在萬(wàn)維網(wǎng)上應(yīng)用廣泛，它往往被稱(chēng)為JavaScript或JScript，但實(shí)際上后兩者是ECMAScript語(yǔ)言的實(shí)現(xiàn)和擴(kuò)展。
?
?ECMAScript : ECMAScript規(guī)定了JS的編程語(yǔ)法和基礎(chǔ)核心知識(shí)，是所有瀏覽器廠商共同遵守的一套JS語(yǔ)法工業(yè)標(biāo)準(zhǔn)。我們接下來(lái)學(xué)習(xí)的就是JavaScript語(yǔ)法。
?即 js =?ECMAScript(基礎(chǔ)語(yǔ)法) + DOM + BOM 組成
JS寫(xiě)法
js寫(xiě)法有三種
- 行內(nèi)式，即直接寫(xiě)在html元素中
- 內(nèi)嵌式也寫(xiě)在html頁(yè)面中，只不過(guò)用<script>xxx</script>進(jìn)行包裹
- 外部式，通過(guò)<script src='js.js'></script>將外部的js文件進(jìn)行引入
?js注釋
<script>//單行注釋/*多行注釋*/ </script>- html注釋：<!-- xxxx -->
- php注釋：//
- python注釋： #
JS輸入輸出語(yǔ)句
為了方便信息的輸入輸出，JS中提供了一些輸入輸出語(yǔ)句，其常用的語(yǔ)句如下∶
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>js練習(xí)</title> </head> <body><script>//這是一個(gè)輸入框prompt("請(qǐng)輸入年齡");//alert彈出警示框，展示給用戶(hù)的alert('計(jì)算的結(jié)果是');//console.log，給程序員測(cè)試用的console.log('我是程序員能看到的');</script> </body> </html>彈出輸入框?
?console.log
js變量
var age;? ? ? //聲明一個(gè)名稱(chēng)為age的變量，變量名區(qū)分大小寫(xiě)- var是一個(gè)JS關(guān)鍵字，用來(lái)聲明變量( variable變量的意思)。使用該關(guān)鍵字聲明變量后，計(jì)算機(jī)會(huì)自動(dòng)為變量分配內(nèi)存空間，不需要程序員管
- age是程序員定義的變量名，我們要通過(guò)變量名來(lái)訪問(wèn)內(nèi)存中分配的空間
?聲明變量并賦值，稱(chēng)為變量的初始化
<script>var name = "cc";console.log(name); //控制臺(tái)輸入變量值 </script>?案例1：
瀏覽器彈出輸入框，用戶(hù)輸入內(nèi)容后將該內(nèi)容進(jìn)行彈窗
<script>var name = prompt('請(qǐng)輸入姓名');alert(name); </script>?同時(shí)聲明多個(gè)變量時(shí)，只需要寫(xiě)一個(gè)var，多個(gè)變量名之間使用英文逗號(hào)隔開(kāi)。
var age = 10,name = 'zs', sex = 2;?案例2——兩變量值交換
需要一個(gè)臨時(shí)變量作為緩沖
<script>var temp;var apple1 = "青蘋(píng)果";var apple2 = "紅蘋(píng)果";temp = apple2;apple2 = apple1;apple1 = temp;console.log(apple1); //輸出紅蘋(píng)果console.log(apple2); //輸出青蘋(píng)果 </script>數(shù)據(jù)類(lèi)型
在計(jì)算機(jī)中，不同的數(shù)據(jù)所需占用的存儲(chǔ)空間是不同的，為了便于把數(shù)據(jù)分成所需內(nèi)存大小不同的數(shù)據(jù)，充分利用存儲(chǔ)空間，于是定義了不同的數(shù)據(jù)類(lèi)型。
變量是用來(lái)存儲(chǔ)值的所在處，它們有名字和數(shù)據(jù)類(lèi)型。變量的數(shù)據(jù)類(lèi)型決定了如何將代表這些值的位存儲(chǔ)到計(jì)算機(jī)的內(nèi)存中。JavaScript是一種弱類(lèi)型或者說(shuō)動(dòng)態(tài)語(yǔ)言。這意味著不用提前聲明變量的類(lèi)型，在程序運(yùn)行過(guò)程中，類(lèi)型會(huì)被自動(dòng)確定。像python一樣不需要聲明變量類(lèi)型
在代碼運(yùn)行時(shí)，變量的數(shù)據(jù)類(lèi)型是由JS引擎根據(jù)=右邊變量值的數(shù)據(jù)類(lèi)型來(lái)判斷的，運(yùn)行完畢之后，變量就確定了數(shù)據(jù)類(lèi)型。
JavaScript擁有動(dòng)態(tài)類(lèi)型，同時(shí)也意味著相同的變量可用作不同的類(lèi)型:
- var x = 6;? ? ? ? ? ? ? ? ? ? ? //x為數(shù)字類(lèi)型
- var x? = "Bi11";? ? ? ? ? ? ?//×為字符串類(lèi)型
1. 數(shù)據(jù)類(lèi)型分類(lèi)
JS把數(shù)據(jù)類(lèi)型分為兩類(lèi)：
- 簡(jiǎn)單數(shù)據(jù)類(lèi)型（ Number, string，Boolean , Undefined，Null )
- 復(fù)雜數(shù)據(jù)類(lèi)型( object)
在js中八進(jìn)制前面加0，十六進(jìn)制前面加0x
- lnfinity ，代表無(wú)窮大，大于任何數(shù)值
- -Infinity，代表無(wú)窮小，小于任何數(shù)值
- NaN ，Not a number，代表一個(gè)非數(shù)值
typeof 輸出數(shù)據(jù)類(lèi)型
<script>var age = '12';console.log(typeof age); //輸出string </script>2 isNaN
判斷是否非數(shù)字，是數(shù)字返回false，不是返回true
console.log(isNaN(12)); //返回false3. 字符串型
字符串使用單引號(hào)或者雙引號(hào)包裹，因?yàn)镠TML標(biāo)簽里里面的屬性使用的是雙引號(hào)，所以js推薦使用單引號(hào)
4. 字符串轉(zhuǎn)義符
類(lèi)似HTML里面的特殊字符，字符串中也有特殊字符，我們稱(chēng)之為轉(zhuǎn)義符。轉(zhuǎn)義符都是\開(kāi)頭的，常用的轉(zhuǎn)義符及其說(shuō)明如下:
?5. 字符串長(zhǎng)度
獲取字符串的長(zhǎng)度 length
<script>var uname = "sdfsfddsf df ";console.log(uname.length); </script>python中是len(字符串)
6. 字符串拼接
- 多個(gè)字符串之間可以使用＋進(jìn)行拼接，其拼接方式為 字符串＋任何類(lèi)型=拼接之后的新字符串 。即拼接的字符中只要有字符串類(lèi)型，那么拼接后就是為字符串類(lèi)型
- 拼接前會(huì)把與字符串相加的任何類(lèi)型轉(zhuǎn)成字符串，再拼接成一個(gè)新的字符串
數(shù)字相加，字符相連
同樣，字符串與變量相連也是用+號(hào)，'我今年'+age+'歲了'
7. 布爾型 Boolean
布爾類(lèi)型有兩個(gè)值: true和false ，其中 true表示真(對(duì))，而false表示假(錯(cuò))。布爾型和數(shù)字型相加的時(shí)候，true的值為1 ，false的值為0。
console.log (true + 1);? ? // 2 console.log(false + 1) ;? ?//?18. Undefined和Null
一個(gè)聲明后沒(méi)有被賦值的變量會(huì)有一個(gè)默認(rèn)值undefined(如果進(jìn)行相連或者相加時(shí)，注意結(jié)果}
null為空值，即什么值都沒(méi)有，比如 null+1，值就為1
數(shù)據(jù)類(lèi)型轉(zhuǎn)換
1. 轉(zhuǎn)換為字符串
?加號(hào)拼接字符串的方式也稱(chēng)為隱式轉(zhuǎn)換
?2. 轉(zhuǎn)換為數(shù)字型
<script>console.log(parseInt('3.14')); //取整，輸出3console.log(parseInt('3.99')); //取整，輸出3console.log(parseInt('120px')); //120，會(huì)去掉px這個(gè)單位console.log(parseFloat('3.23')); //不會(huì)取整，數(shù)字原樣輸出console.log(Number('3.14')); 不會(huì)取整，數(shù)字原樣輸出 </script>?3. 轉(zhuǎn)換為布爾型
Boolean()，將其他類(lèi)型轉(zhuǎn)換為布爾型，結(jié)果為true或者false
<script>console.log(Boolean(2)); //輸出trueconsole.log(Boolean(0)); //false </script>標(biāo)識(shí)符
標(biāo)識(shí)(zhi)符：就是指開(kāi)發(fā)人員為變量、屬性、函數(shù)、參數(shù)取的名字
感謝黑馬程序員分享的web前端視頻：https://www.bilibili.com/video/BV1ux411d75J?p=14
總結(jié)
以上是生活随笔為你收集整理的JavaScript基础语法（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 同步助手 java_八大手机平台全覆盖
- 下一篇： Spring---浅谈IOC