JS初識

初識javascript

引導javascript

主要內容:css

學習目標:html

節數java

知識點node

要求web

第一節(js的前世此生)chrome

js簡介shell

瞭解編程

第二節(js的語法結構)數組

頁面引入js的幾種方式

瞭解

js輸出的幾種方式

瞭解

js的語法規則

瞭解

第三節(Javascript名詞解釋)

數字字面量

掌握

字符串字面量

掌握

常量

理解

第四節(Javascript變量命名規則(重點))

聲明變量

掌握

變量提高

掌握

變量的命名規則

瞭解

第五節(Javascript數據類型(重點))

基本數據類型

掌握

第六節(Javascript運算符(重點))

邏輯運算符

掌握

什麼是語言?

什麼是計算機語言?

機器語言,彙編語言,高級語言。

少兒編程語言

計算機存儲單位

計算機數據存儲是以「字節」(Byte)爲單位,數據傳輸是以大可能是以「位」(bit,又名「比特」)爲單位,一個位就表明一個0或1(即二進制),每8個位(bit,簡寫爲b)組成一個字節(Byte,簡寫爲B),是最小一級的信息單位。

1B(Byte字節)=8bit,

1KB (Kilobyte 千字節)=1024B,

1MB (Mega byte 兆字節 簡稱「兆」)=1024KB,

1GB (Giga byte 吉字節 又稱「千兆」)=1024MB,

1TB (Tera byte 萬億字節 太字節)=1024GB,其中1024=2^10 ( 2 的10次方),

1PB(Peta byte 千萬億字節 拍字節)=1024TB,

1EB(Exa byte 百億億字節 艾字節)=1024PB,

1ZB (Zetta byte 十萬億億字節 澤字節)= 1024 EB,

1YB (Yotta byte 一億億億字節 堯字節)= 1024 ZB,

1BB (Bronto byte 一千億億億字節)= 1024 YB,

**Javascript簡介
js的前世此生**

JavaScript一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,最先是在HTML網頁上使用,用來給HTML網頁增長動態功能。

動態:在運行時肯定數據類型。變量使用以前不須要類型聲明,一般變量的類型是被賦值的那個值的類型。

弱類:計算時能夠不一樣類型之間對使用者透明地隱式轉換,即便類型不正確,也能經過隱式轉換來獲得正確的類型。

原型:新對象繼承對象(做爲模版),將自身的屬性共享給新對象,模版對象稱爲原型。這樣新對象實例化後不但能夠享有本身建立時和運行時定義的屬性,並且能夠享有原型對象的屬性。

腳本語言:不須要編譯器編譯。

在1995年時,由Netscape公司的布蘭登·艾奇(Brendan Eich,1961年~),JavaScript的發明人,在網景導航者瀏覽器(Navigator)上首次設計實現而成。

因爲網景公司但願能在靜態HTML頁面上添加一些動態效果,因而叫Brendan Eich這哥們在兩週以內設計出了JavaScript語言。你沒看錯,這哥們只用了10天時間。

爲何起名叫JavaScript?緣由是當時Java語言很是紅火,因此網景公司但願借Java的名氣來推廣,但事實上JavaScript除了語法上有點像Java,其餘部分基本上沒啥關係。

Netscape在最初將其腳本語言命名爲LiveScript,後來Netscape在與Sun合做以後將其更名爲JavaScript。

Javascript的三個主要組成部分是:ECMAScript(核心),DOM(文檔對象模型),BOM(瀏覽器對象模型)。

和Java區別

js的特色

一、是一種解釋性腳本語言(代碼不進行預編譯)。

二、主要用來向HTML(標準通用標記語言下的一個應用)頁面添加交互行爲。

三、能夠直接嵌入HTML頁面,但寫成單獨的js文件有利於結構和行爲的分離。

四、跨平臺特性,在絕大多數瀏覽器的支持下,能夠在多種平臺下運行(如Windows、Linux、Mac、Android、iOS等

五、它是單線程編程語言

js在網頁中的應用

表單的驗證,放大鏡,添加購物車等

ECMAScript 和 JavaScript 的關係

​ 1996 年 11 月,JavaScript 的創造者Netscape公司,決定將 JavaScript 提交給標準化組織 ECMA,但願這種語言可以成爲國際標準。

​ 由於網景開發了JavaScript,一年後微軟模仿JavaScript開發了JScript,爲了讓JavaScript成爲全球標準,幾個公司聯合ECMA(European Computer Manufacturers Association)組織定製了JavaScript語言的標準,被稱爲ECMAScript標準

因此簡單說來就是,ECMAScript是一種語言標準,而JavaScript是網景公司對ECMAScript標準的一種實現。那爲何不直接把JavaScript定爲標準呢?由於JavaScript是網景的註冊商標。不過大多數時候,咱們仍是用JavaScript這個詞。若是你遇到ECMAScript這個詞,簡單把它替換爲JavaScript就好了。

因爲JavaScript的標準——ECMAScript在不斷髮展,最新版ECMAScript 6標準(簡稱ES6,有時也被稱爲ES2015)已經在2015年6月正式發佈了,因此,講到JavaScript的版本,實際上就是說它實現了ECMAScript標準的哪一個版本。

Javascript發展歷史

1995年12月4日 Netscape公司與Sun公司聯合發佈了JavaScript語言。

1996年03月 Navigator 2.0瀏覽器正式內置了JavaScript腳本語言。

1997年07月 ECMAScript 1.0發佈。

1998年06月 ECMAScript 2.0版發佈。

1999年12月 ECMAScript 3.0版發佈,成爲JavaScript的通行標準,獲得了普遍支持。

2007年10月 ECMAScript 4.0版草案發布

2009年12月 ECMAScript 5.0版正式發佈

2015年06月 ECMAScript 6正式發佈

各個主要瀏覽器內核和引擎

​ 一個完整的瀏覽器包含瀏覽器內核和瀏覽器的外殼(shell)。瀏覽器核心——內核分紅兩部分:渲染引擎和js引擎。

​ 瀏覽器內核主要指的是瀏覽器的渲染引擎,2013 年之前,表明有 Trident(IE),Gecko(firefox),Webkit(Safari chrome 等)以及 Presto(opera)。2013 年之後,谷歌開始研發 blink 引擎,chrome 28 之後開始使用,而 opera 則放棄了自主研發的 Presto 引擎,投入谷歌懷抱,和谷歌一塊兒研發 blink 引擎,國內各類 chrome系的瀏覽器(360、UC、QQ、2345 等等)也紛紛放棄 webkit,投入 blink 的懷抱。

​ 2015年微軟推出本身新的瀏覽器,原名叫斯巴達,後更名edge,使用edge引擎

edge瀏覽器仍然使用Chakra引擎

一、IE瀏覽器內核:Trident內核,也是俗稱的IE內核;

二、Chrome瀏覽器內核:統稱爲Chromium內核或Chrome內核,之前是Webkit內核,如今是Blink內核;

三、Firefox瀏覽器內核:Gecko內核,俗稱Firefox內核;

四、Safari瀏覽器內核:Webkit內核;

五、Opera瀏覽器內核:最初是本身的Presto內核,後來是Webkit,如今是Blink內核;

六、360瀏覽器、獵豹瀏覽器內核:IE+Chrome雙內核;

七、搜狗、遨遊、QQ瀏覽器內核:Trident(兼容模式)+Webkit(高速模式);

八、百度瀏覽器、世界之窗內核:IE內核;

九、2345瀏覽器內核:之前是IE內核,如今也是IE+Chrome雙內核;

經常使用的IDE介紹

IDE:集成開發環境(Integrated Development Environment )

Webstorm,visual studio code,sublime,atom,hbuilder,editplus,nodepad等

vscode的使用

js的語法結構

頁面引入js的幾種方式

第一種方式:內部方式

第二種方式:外部結構

第三種方式:行內方式

js輸出的幾種方式

一、使用 window.alert() 彈出警告框。

二、使用 document.write() 方法將內容寫到 HTML 文檔中。

三、使用 innerHTML 寫入到 HTML 元素。

四、使用 console.log() 寫入到瀏覽器的控制檯。

js的語法規則

一、分號是語句結束的標誌,分號不是必須的,咱們不建議這樣作,嚴格來講,語句要加上分號。

二、 js會忽略多個空格和換行。

三、字符集

utf-8:統一國際編碼,兼容各個國家的語言
gb2312/gbk:簡體中文編碼

big5:繁體中文編碼

四、變量區分大小寫

五、註釋

回顧一下html註釋:

回顧一下css的註釋:

/內容/

js的註釋語句

單行註釋://內容

多行註釋:/內容/

問:爲何要加註釋?

答:爲了方便別人也是爲了方便本身。

Javascript名詞解釋

在編程語言中,通常固定值稱爲字面量,如 3.14。給變量賦值時,等號右邊均可以認爲是字面量。英語叫作literals,有些書上叫作直接量。

數字字面量

25,98.23
var num = 92;

字符串字面量

‘123’,「Hello」

[12,2,3]

常量

什麼是常量?

常量:就是其值不能改變的。

怎樣定義一個常量?

const HOST = 「localhost」;

const也是塊級做用域

const聲明的常量必須初識化,而let聲明的變量不用

const實際上保證的,並非變量的值不得改動,而是變量指向的那個內存地址所保存的數據不得改動。對於簡單類型的數據(數值、字符串、布爾值),值就保存在變量指向的那個內存地址,所以等同於常量。但對於複合類型的數據(主要是對象和數組),變量指向的內存地址,保存的只是一個指向實際數據的指針,const只能保證這個指針是固定的(即老是指向另外一個固定的地址),至於它指向的數據結構是否是可變的,就徹底不能控制了

Javascript變量命名規則(重點)

聲明變量

變量是幹什麼的,是存儲數據的,那存儲什麼種類數據呢?

聲明變量使用關鍵字:var(variable)

你給它賦什麼類型的值,那麼這個變量就是什麼數據類型。

內存中堆區和棧區

單獨聲明

多個變量聲明,中間用逗號隔開

重複聲明

遺漏聲明

顯式聲明與隱式聲明區別

JS中變量聲明分顯式聲明和隱式聲明。

var name = 'muzidigbig';//顯式聲明

name = 'muzidigbig';//隱式聲明(爲全局對象(window)的一個屬性)

JavaScript 嚴格模式(use strict)

變量提高

變量必定要先聲明後使用,若是先使用後聲明,js的內部機制天然使變量提高。

let 和var 的區別

var: variable,它是可變的。

let: 塊做用域。

變量名的命名規則

變量的命名:變量是由字母、數字、下劃線、$ 組成,但第一個字符必須是字母或者是下劃線、$開頭。

$不建議使用,它可能會和其餘的框架語法衝突,或者是函數的名字衝突

一、JavaScript語言的標識符對大小寫敏感,因此a和A是兩個不一樣的標識符。

二、首字母能夠是任意字母以及美圓符號和下劃線。剩餘能夠是任意字母,美圓符號,下劃線和數字

三、不能使用javascript中的關鍵字(保留字)來命名變量

四、中文也能夠聲明變量,不建議使用它。

變量的命名方式

第一種命名:帕斯卡命名(大駝峯式命名

每一個單詞的首字符大寫

例如:UserName。

第二種命名小駝峯式命名

首個單詞的首字母小寫其餘後面單詞的首字母大寫

例如:

例如:userName

第三種命名匈牙利式命名

數據類型+單詞(變量名)

Integer+age

var Iage = 25;

String+address

var Saddress = 「西安」;

Javascript數據類型(重點)

數據類型分類:

在此基本的數據類型的基礎上又增長了一個基本數據類型:Symbol,Symbol 是 ES6 引入了一種新的原始數據類型,表示獨一無二的值。

打印變量的數據類型:typeof

請注意:

NaN 的數據類型是 number

數組(Array)的數據類型是 object

日期(Date)的數據類型爲 object

null 的數據類型是 object

未定義變量的數據類型爲 undefined

基本數據類型

數字類型(number)

c 語言中:

int(整數),float(單精度浮點型),double(雙精度浮點型),char(字符)

string(字符串)。

二進制(binary):0b101010101

八進制:0o2535

十六進制:0x69852

進制轉換:

toString():十進制轉換其餘的進制

parseInt():其餘的進制轉換十進制

最大值:MAX_VALUE

最小值:MIN_VALUE

浮點數不能比較

NaN:Not a Number:不是一個數值

一些特殊狀況(除數爲0,最大值變化)

布爾類型(boolean)

true(真),false(假),都是小寫的。

TRUE,FALSE,True,False:這些都不正確。

字符串類型(string)

字符串:加單引號或者是雙引號

字符串鏈接:使用的是+

模板字符串:

undefined

typeof undefined

null

typeof null

null == undefined

null和undefined的區別

一、類型不相等

二、強制類型轉換值不同

var re1 = Number(undefined);//NaN
var re2 = Number(null);//0

三、比較

null == undefined;//true
null === undefined;//false

引用類型(object)

Javascript運算符(重點)

算術運算符

+,-,,/,%(求餘數),++,–,*(求冪數-es7新增)

實例練習:

一元運算符

+(正),-(負數),++,–

兩數交換

比較(關係)運算符

,<,>=,<=,!=,!(不全等),,===(全等:值和類型都相等)

邏輯運算符

一、&&:邏輯與,全部運算操做數都爲真,運算結果才爲真

true && true;//true
false && true;//false
true && false;//false
false && false;//false

總結說明:

若是前面的表達式是true,就取後面的值,若是前面的表達式爲false,就取前面的值。

二、||:邏輯或,只要運算操做數其中一個爲真結果就爲真。

true || true;//true
false || true;//true
true || false;//true
false || false;//false

總結說明:

若是前面的表達式是true,就取前面的值,若是前面的表達式爲false,就取後面的值。

三、!:邏輯非,取反運算

例題:

console.log(10 && 'js');//js 
console.log(0 && 'abc');//0 
console.log(10 || 'js');//10 
console.log(0 || 'abc');//abc

怎樣輸出:true和false

console.log(Boolean(0) && Boolean('abc'));

短路問題:輸出結果是?

賦值運算符

=,+=,-=,*=,/=,%=

=:賦值

==:比較(等於)

===:比較(全等)

條件運算符(三目運算符)

表達式1?表達式2:表達式3

若是表達式1爲真(true),計算表達式2的值,若是爲假(false),計算表達式3的值。

等性運算符

Null==undefined;//true
Null===undefined;//false
true == 1;
false ==0;
NaN == NaN;//false
NaN !== NaN;//true

運算符的優先級

隱式類型轉換

強制類型轉換

Number():轉化成數值

只有純數字的才能轉換獲得真實數字。

布爾類型轉換爲Number:true 轉換爲一、false轉換爲0。

未定義類型轉換爲Number:underfind 轉換爲NaN

空類型轉換爲Number:null 轉換爲0

String():轉化成字符串

Boolean():轉化成布爾

總結說明:

1. NaN ,0 ,"", ‘’ ,underfind, null 轉換爲:false。

2. 正數,負數都是:true

3. 只要不是空字符串都是:true

parseInt():將字符串轉化爲整數

parseFloat():將字符串轉化爲浮點數

做業:

一、變量加var和不加var的區別

二、變量的提高

三、短路的應用

相關文章
相關標籤/搜索