JavaScript第一天

簡介

image

JavaScript 是世界上最流行的語言之一，是一種運(yùn)行在客戶端的腳本語言（Script 是腳本的意思）
腳本語言：不需要編譯贝搁，運(yùn)行過程中由 js 解釋器( js 引擎）逐行來進(jìn)行解釋并執(zhí)行
現(xiàn)在也可以基于 Node.js 技術(shù)進(jìn)行服務(wù)器端編程

JavaScript的作用

表單動(dòng)態(tài)校驗(yàn)（密碼強(qiáng)度檢測）（ JS 產(chǎn)生最初的目的）
網(wǎng)頁特效
服務(wù)端開發(fā)(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物聯(lián)網(wǎng)(Ruff)
游戲開發(fā)(cocos2d-js)

瀏覽器執(zhí)行 JS 簡介

image

瀏覽器本身并不會執(zhí)行JS代碼，而是通過內(nèi)置 JavaScript 引擎(解釋器) 來執(zhí)行 JS 代碼 芽偏。JS 引擎執(zhí)行代碼時(shí)逐行解釋每一句源碼（轉(zhuǎn)換為機(jī)器語言）雷逆，然后由計(jì)算機(jī)去執(zhí)行，所以 JavaScript 語言歸為腳本語言污尉，會逐行解釋執(zhí)行。

JS 的組成

image

ECMAScript

ECMAScript 是由ECMA 國際（原歐洲計(jì)算機(jī)制造商協(xié)會）進(jìn)行標(biāo)準(zhǔn)化的一門編程語言十厢，這種語言在萬維網(wǎng)上應(yīng)用廣泛，它往往被稱為 JavaScript或 JScript捂齐，但實(shí)際上后兩者是 ECMAScript 語言的實(shí)現(xiàn)和擴(kuò)展蛮放。

image

ECMAScript：規(guī)定了JS的編程語法和基礎(chǔ)核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業(yè)標(biāo)準(zhǔn)奠宜。

DOM——文檔對象模型

文檔對象模型（DocumentObject Model包颁，簡稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)記語言的標(biāo)準(zhǔn)編程接口压真。通過 DOM 提供的接口可以對頁面上的各種元素進(jìn)行操作（大小娩嚼、位置、顏色等）

BOM——瀏覽器對象模型

瀏覽器對象模型(Browser Object Model滴肿，簡稱BOM) 是指瀏覽器對象模型岳悟，它提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對象結(jié)構(gòu)。通過BOM可以操作瀏覽器窗口贵少，比如彈出框呵俏、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等滔灶。

JS 初體驗(yàn)

JS 有3種書寫位置普碎，分別為行內(nèi)、內(nèi)嵌和外部录平。
1麻车、行內(nèi)式

<input type="button" value="點(diǎn)我啊" onclick="alert('點(diǎn)我干哈')">

可以將單行或少量 JS 代碼寫在HTML標(biāo)簽的事件屬性中（以 on 開頭的屬性），如：onclick
注意單雙引號的使用：在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號
可讀性差斗这，在html中編寫JS大量代碼時(shí)动猬，不方便閱讀；
引號易錯(cuò)涝影，引號多層嵌套匹配時(shí)枣察，非常容易弄混；
特殊情況下使用
2燃逻、內(nèi)嵌式

  <script>
        // alert('歡迎來到王者峽谷')
        console.log('你在哪里')
    </script>

可以將多行JS代碼寫到 script 標(biāo)簽中
內(nèi)嵌 JS 是學(xué)習(xí)時(shí)常用的方式

3.外部JS文件

<script src="../../js/my.js"></script>

利于HTML頁面代碼結(jié)構(gòu)化序目，把大段 JS代碼獨(dú)立到 HTML 頁面之外，既美觀伯襟，也方便文件級別的復(fù)用
引用外部 JS文件的 script 標(biāo)簽中間不可以寫代碼
適合于JS 代碼量比較大的情況

JavaScript注釋

單行注釋

//
/* adada*/

JavaScript輸入輸出語句

image

變量的使用

變量的聲明
變量的賦值

//  聲明變量  
var age; //  聲明一個(gè) 名稱為age 的變量

var 是一個(gè) JS關(guān)鍵字猿涨，用來聲明變量( variable 變量的意思 )。使用該關(guān)鍵字聲明變量后姆怪，計(jì)算機(jī)會自動(dòng)為變量分配內(nèi)存空間葱色，不需要程序員管
age 是程序員定義的變量名坚芜，我們要通過變量名來訪問內(nèi)存中分配的空間
賦值

age = 10;
var age  = 18;  // 聲明變量同時(shí)賦值為 18

同時(shí)聲明多個(gè)變量

var name = 'zhansan', age=18, sex = 1;

變量命名規(guī)范

由字母(A-Za-z)、數(shù)字(0-9)、下劃線(_)英融、美元符號( $ )組成，如：usrAge, num01, _name
嚴(yán)格區(qū)分大小寫光稼。var app; 和 var App; 是兩個(gè)變量
不能以數(shù)字開頭坤次。 18age 是錯(cuò)誤的
不能是關(guān)鍵字、保留字揪胃。例如：var璃哟、for、while
變量名必須有意義喊递。 MMD BBD nl → age
守駝峰命名法随闪。首字母小寫，后面單詞的首字母需要大寫骚勘。myFirstName

數(shù)據(jù)類型的分類

JS 把數(shù)據(jù)類型分為兩類：

簡單數(shù)據(jù)類型（Number,String,Boolean,Undefined,Null）
復(fù)雜數(shù)據(jù)類型（object)

image

交換變量和判斷數(shù)字

  <script>
        var name1 = '張三';
        var name2 = '李四';
        var temp;
        temp = name1;
        name1 = name2;
        name2 = temp;
        console.log(name1);
        console.log(name2)
        // 判斷 一個(gè)變量 非數(shù)字 是數(shù)字false  不是true
        console.log(isNaN(12))
        console.log(isNaN('老師真帥'))
    </script>

字符串長度和字符串拼接铐伴、布爾型Boolean

 <script>
        var str = '李濟(jì)帥嗎';
        alert(str.length);
        var str2 = '真的嗎';
        alert(str+str2);
        alert(true + 1);
        alert(false + 1);
    </script>

Undefined和 Null
一個(gè)聲明后沒有被賦值的變量會有一個(gè)默認(rèn)值undefined ( 如果進(jìn)行相連或者相加時(shí)，注意結(jié)果）
一個(gè)聲明變量給 null 值，里面存的值為空（學(xué)習(xí)對象時(shí)盛杰，我們繼續(xù)研究null)

var  varible;
console.log(varible)
console.log('nihao' +varible);
console.log(12 + varible);
console.log(true +varible);
var vari = null;
console.log(vari)
console.log('nihao' +vari);
console.log(12 + vari);
console.log(true +vari);

image

獲取變量數(shù)據(jù)類型

typeof 可用來獲取檢測變量的數(shù)據(jù)類型

<script>
        var num = 10
        console.log(typeof num) // number
        var str = 'hehe'
        console.log(typeof str) // string
        var flag = true
        console.log(typeof flag) // boolean
        var vari = undefined
        console.log(typeof vari) // undefined
        var vari2 = null
        console.log(typeof vari2) // object

        var age = prompt('請輸入您的年齡');
        console.log(age)
        console.log(typeof age)

    </script>

轉(zhuǎn)化為字符型

 <script>
        var num = 1000
        // 1
        var str = num.toString()
        console.log(str)
        console.log(typeof str)
        // 2
        console.log(typeof String(num))
        // 3
        str =  num + ''
        console.log(typeof  str)
    </script>

轉(zhuǎn)化為數(shù)字型

 <script>
        var num = '3.64';
        var res = parseInt(num) // 取整
       console.log(res)
       console.log(typeof res)
       console.log(parseInt('120px')) // 120
       console.log(parseInt('rem120px')) // nan
       console.log(parseFloat('2.23')) // nan
        var haha = Number('121')
       console.log(typeof  haha) 
    </script>

作者：method
鏈接：http://www.reibang.com/p/fce2e2e364f5
來源：簡書
著作權(quán)歸作者所有挽荡。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處即供。