碼字三年,《JavaScript百煉成仙》終于出版啦!

這是一本講解JavaScript編程語言的技術(shù)書籍,只不過,本書采用了一種全新的寫作手法。

如果你厭倦了厚厚的、如同字典般的編程書籍,不妨嘗試一下新的口味!

通過本書,你可以領(lǐng)悟到JavaScript的函數(shù)七重關(guān)秘籍;通過本書,你可以輕松學(xué)會(huì)使用jQuery作DOM對(duì)象;通過本書,你可以學(xué)會(huì)目前流行的Vue基礎(chǔ)語法;通過本書,你還可以學(xué)會(huì)新的ES6常用語法。

本書可作為JavaScript初學(xué)者入門的趣味讀物。

目錄

第1章 . 掌握J(rèn)avaScript基礎(chǔ)1

1.1初入宗門1

1.2直接量2

1.3變量的聲明3

1.4數(shù)據(jù)類型4

1.5基礎(chǔ)考核5

1.6葉老6

1.7對(duì)象數(shù)據(jù)類型8

1.8對(duì)象的取值11

1.9循環(huán)遍歷的奧妙13

1.10對(duì)象內(nèi)容的遍歷17

1.11外門小比20

1.12JavaScript運(yùn)算符21

1.13語驚座26

1.14秀27

1.15天秀29

1.16數(shù)組方法32

1.17蒂花之秀37

1.18函數(shù)七重關(guān)之一(函數(shù)定義)38

1.19JavaScript編譯原理42

1.20函數(shù)七重關(guān)之二(作用域)46

1.21函數(shù)七重關(guān)之三(參數(shù)傳遞)51

1.22函數(shù)七重關(guān)之(閉包)58

1.23函數(shù)七重關(guān)之五(自執(zhí)行函數(shù))62

1.24函數(shù)七重關(guān)之六(“new”一個(gè)函數(shù))64

1.25函數(shù)七重關(guān)之七(回調(diào)函數(shù))70

第2章 . 基礎(chǔ)考核73

2.1趙牛73

2.2林濤74

2.3變量和簡單數(shù)據(jù)類型76

2.4精度問題80

2.5化浮為整83

2.6函數(shù)的三大要義85

2.7add函數(shù)完成87

2.8函數(shù)調(diào)試90

2.9indeOf方法93

2.10replace方法97

2.11重新開始99

第3章 . jQuery和DOM105

3.1預(yù)備知識(shí)105

3.1.1HTML基本結(jié)構(gòu)105

3.1.2創(chuàng)建一個(gè)HTML文件108

3.1.3HTML排版標(biāo)簽109

3.1.4圖片標(biāo)簽113

3.1.5鏈接標(biāo)簽114

3.1.6table標(biāo)簽115

3.1.7表單元素121

3.1.8CSS基礎(chǔ)127

3.1.9jQuery簡介133

3.2簡南136

3.3jQuery選擇器137

3.4使用jQuery作DOM146

3.4.1查找元素146

3.4.2查找屬性148

3.4.3鏈?zhǔn)秸{(diào)用150

3.4.4創(chuàng)造新的元素153

3.4.5刪除和隱藏節(jié)點(diǎn)159

3.4.6jQuery作屬性161

3.4.7內(nèi)容作163

3.4.8遍歷和尋找節(jié)點(diǎn)170

第4章 . Vue的妙處173

4.1我要去做任務(wù)173

4.2壯士出征175

4.3Vue數(shù)據(jù)綁定175

4.4Vue第一式——簡單數(shù)據(jù)綁定179

4.5Vue第二式——靈活有趣的事件綁定186

4.5.1v-on監(jiān)聽事件186

4.5.2處理事件冒泡189

4.6Vue第三式——條件語句192

4.7Vue第四式——循環(huán)語句197

4.8Vue第五式——屬性綁定200

4.9Vue第六式——Vue組件開發(fā)201

4.10Vue第七式——計(jì)算屬性211

4.11Vue第八式——監(jiān)聽屬性213

4.12Vue第九式——過濾器217

4.13葉小凡的戰(zhàn)果220

第5章 . Vue cli項(xiàng)目223

5.1Nodejs安裝223

5.2使用npm發(fā)布模塊224

5.3使用npm安裝模塊229

5.4使用Vue-cli搭建項(xiàng)目231

第6章 . ES6語法238

6.1全新的變量定義238

6.2變量的解構(gòu)賦值239

6.3字符串升級(jí)242

6.4Proxy代理243

6.5強(qiáng)化后的數(shù)組245

6.5.1快速構(gòu)建新數(shù)組245

6.5.2新的數(shù)組方法246

6.5.3數(shù)組復(fù)制246

6.6強(qiáng)化后的函數(shù)247

6.7更加靈活多變的對(duì)象251

6.8promise對(duì)象和async函數(shù)252

后記256

試讀:
1 初入宗門
樂陽村,處于腳本大陸東部的邊緣地帶,民風(fēng)淳樸,村名日出而作,日落而息。這一日清晨,所有村民來到村莊的門口,正在為一個(gè)十五六歲的少年送別。只見那少年雖然身體瘦弱,可是目中綻放出異彩,身軀雖不壯實(shí),倒也挺拔。

“葉小凡,你是我們?nèi)迦说尿湴粒倌陙砦ㄒ灰粋€(gè)具備修行JavaScript甲等資質(zhì)的孩子!馬上會(huì)有千鶴派的大人來接你,今后你一定要認(rèn)真修行,給我們?nèi)宓娜藸幑?!?/p>

他叫葉小凡,幾天前通過了修行資質(zhì)的檢驗(yàn),符合修行JavaScript的資質(zhì)。

“千鶴派!”葉小凡眼前一亮,語氣中伴隨著激動(dòng),兩眼放光。千鶴派,在腳本大陸,已是數(shù)一數(shù)二的大門派,每一個(gè)宗門弟子都能夠修煉一種神奇的功法——JavaScript,修成之后,威力之大,足以翻山倒海,稱霸一方天地!

不多時(shí),天氣風(fēng)云變化,一道長虹降下,瞬間變?yōu)橐蝗恕K泶┮患嗌皴\衣服,腰間綁著一根白色蟠離紋革帶,一頭黑發(fā)如云發(fā)絲,有著一雙清澈明亮的眼眸,身形頎長,當(dāng)真是氣宇軒昂溫文爾雅。

“你就是葉小凡?”男子淡淡開口,神識(shí)一掃,驚訝地發(fā)現(xiàn),此子的修行資質(zhì)竟為甲等,眼中閃過一絲驚訝。

“在下林元青,千鶴派青山院掌尊,你既然通過了考核,具備修煉資質(zhì),即刻你隨我上山,不得有誤?!?/p>

葉小凡當(dāng)下便告別眾人,在林元青的術(shù)法之下,隨即化為一道長虹飛天而去。留下了一臉震撼的村民。

千鶴派分為三個(gè)大院,分別為青山院,綠水院,以及神秘的玄冰院。每個(gè)院都有一個(gè)掌尊,那林元青,赫然便是青山院的掌尊!掌尊地位之高,僅次于大長老,大長老之上,又有太上長老。幾乎只是兩三個(gè)呼吸的時(shí)間,林元青已經(jīng)帶著葉小凡,來到了千鶴派。葉小凡兩眼一花,仿佛上一刻還在村子口,下一刻就看到了千鶴派的閣樓。

“這里是?”葉小凡這一輩子都沒有見過如此宏偉的建筑,忍不住開口。一想到今后可以在這里修行,更是興奮。哈哈,我葉小凡今后一定能突破層層障礙,成就JavaScript一代大師!

“這里是千鶴派青山院?!绷衷嗾衼砥蛷?,給葉小凡隨意找了一個(gè)住處,又給了一卷功法,吩咐了幾句,似乎還有其他要事,就立即化為一道長虹離去了。

葉小凡拿起功法一看,赫然寫著“JavaScript基礎(chǔ)修煉要訣”幾個(gè)銀光大字,眼中放出異彩,一想到村中父老鄉(xiāng)親那期盼的眼神,便下定決心,不混出個(gè)名頭,絕不回去!

2 直接量
葉小凡的住處被安排在青山院西北角的一個(gè)房間里,雖不寬敞,倒也干凈。葉小凡兩眼露出振奮的眼神,隨便吃了點(diǎn)鄉(xiāng)親們準(zhǔn)備的干糧后,就立刻開始打坐修行。編程之修,重在積累,而非資質(zhì)。資質(zhì)雖然一樣重要,可是后天的努力一樣不可缺少。這些道理,葉小凡在還未上山之前,就已經(jīng)熟知!因此,即便是資質(zhì)平凡,只要肯下苦功,一樣可以修得正果!葉小凡雖然甲等資質(zhì),可依然不驕不躁,開始從“JavaScript基礎(chǔ)修煉要訣”第一頁開始學(xué)起。

修煉要訣第一章,直接量。

編程世界,所謂直接量,就是明面上可以見到的數(shù)據(jù)值。常見的直接量有數(shù)字,小數(shù),字符串。修行者,利用自身體內(nèi)的能量,凝結(jié)出一個(gè)個(gè)簡單的直接量。葉小凡目前修為較低,就連最基本的學(xué)徒境界都沒有,體內(nèi)能量薄弱,經(jīng)過多次嘗試,只能凝練出一些簡單的數(shù)字,比如10,20。忽然,葉小凡目光一閃,一個(gè)字符串在體內(nèi)形成!葉小凡細(xì)細(xì)感悟,原來是一個(gè)“Hello World” 字符串,葉小凡喜歡觀察,立馬發(fā)現(xiàn)了字符串和數(shù)字的不同。字符串的出現(xiàn),必然帶著雙引號(hào),被很好的包裹住,而數(shù)字則不同,就是光禿禿的一個(gè)10或者20,沒有雙引號(hào)。

“原來,字符串一定需要用雙引號(hào)包裹,那么單引號(hào)是否可行呢?”葉小凡重新運(yùn)氣,轉(zhuǎn)眼間,一個(gè)用單引號(hào)包裹的‘Hello World’就出現(xiàn)了。見此,葉小凡大喜,哈哈,原來單引號(hào)也可以。

"Hello World"
'Hello World'

突然,這兩個(gè)字符串和數(shù)字像是失去了依托,瞬間化為虛無。葉小凡一驚,心道,看來直接創(chuàng)造出來的字面量只是曇花一現(xiàn),無法持久,要是有一個(gè)什么東西把直接量裝起來就好了。

葉小凡收起心神,繼續(xù)閱讀“JavaScript基礎(chǔ)修煉要訣”,忽然,他眼前一亮。

“原來如此,直接量雖然只是曇花一現(xiàn),但是如果我能用var定義一個(gè)變量,再指向那個(gè)直接量,就能有保存數(shù)據(jù)的妙用!”

想到這里,葉小凡當(dāng)即催動(dòng)功法,定義了一個(gè)變量。

var a;
“成了!”,葉小凡開心的一拍手,心念一動(dòng),一個(gè)用雙引號(hào)包裹的“Hello World”字符串憑空出現(xiàn)。這一次,沒等字符串遁入虛無,葉小凡就立刻讓變量a指向了這個(gè)字符串。

var a;

a = "Hello World";
“嗯,有點(diǎn)麻煩,還不如直接并為一句?!毕榷x變量,然后指向一個(gè)字符串,這種操作分成了兩步,還是一步到位的好。就在葉小凡這么想的時(shí)候,代碼立刻發(fā)生了變化。

var a = "Hello World";
原來這也可以!

前言

JavaScript是一種輕量級(jí)的動(dòng)態(tài)編程語言,在誕生之時(shí),JavaScript并沒有受到人們的過多關(guān)注,但是誰也想不到,在大前端快速風(fēng)靡的今天,JavaScript已經(jīng)成為當(dāng)今編程世界中優(yōu)雅而不可或缺的一員。如果你是一名編程初學(xué)者,剛剛學(xué)習(xí)完HTML和CSS,那你就不得不接觸JavaScript了。剛開始,你會(huì)用jQuery操作DOM,切換頁面并寫一寫單擊事件,似乎覺得JavaScript也不過如此。然而,當(dāng)你在for循環(huán)里面寫了一個(gè)setTimeout函數(shù)后,意想不到的結(jié)果發(fā)生了,這時(shí)你才明白前端這“坑”,竟如此之深!

JavaScript就是這樣一種看起來簡單,卻又很難精通的編程語言。

也許你是一名想要學(xué)習(xí)JavaScript的“小白”,或者是工作多年的“程序猿”,甚至是已經(jīng)用Vue前端框架做過很多項(xiàng)目的“大?!?,但是不管怎樣,相信你在閱讀本書后,一定會(huì)有意外的收獲。你平時(shí)可能只知道該這樣寫業(yè)務(wù)邏輯,該那樣定義變量,否則就會(huì)報(bào)錯(cuò),這是多年的工作經(jīng)驗(yàn)給你帶來的寶貴財(cái)富。但在閱讀本書后,你可能就會(huì)在某些地方豁然開朗,哦,原來它的內(nèi)部是這樣運(yùn)作的!

本書的第1~3章講解JavaScript的基礎(chǔ)知識(shí),對(duì)于一些重要的知識(shí)點(diǎn),如json對(duì)象、函數(shù)、閉包等,更是用了近乎“變態(tài)”的篇幅進(jìn)行詳細(xì)闡述。再加上本書多數(shù)章節(jié)采用小說體講述知識(shí),可以使讀者學(xué)習(xí)起來不會(huì)覺得過于無聊,反而會(huì)饒有興趣。JavaScript的基礎(chǔ)知識(shí)尤為重要,可以說,學(xué)好了JavaScript的基礎(chǔ)知識(shí),后期再學(xué)習(xí)各種框架,就會(huì)變得游刃有余。

本書的第4章和第5章將介紹當(dāng)今的主流前端框架之一——Vue。只要讀者具備一定的JavaScript編程基礎(chǔ),學(xué)習(xí)Vue也會(huì)是比較輕松的。

一旦進(jìn)入前端行業(yè),你就會(huì)發(fā)現(xiàn),前端不僅是一堆事件的堆砌和數(shù)據(jù)的渲染。隨著B/S架構(gòu)的流行,網(wǎng)頁變得越來越復(fù)雜,這就導(dǎo)致JavaScript的代碼量越來越大。尤其是在編寫復(fù)雜的業(yè)務(wù)邏輯時(shí),由于需要頻繁調(diào)取后端接口,并在得到接口的返回值后才能進(jìn)行其他操作,因此如果接口與接口之間有連帶關(guān)系,大量的回調(diào)函數(shù)就會(huì)嵌套,從而使得代碼很容易產(chǎn)生意想不到的錯(cuò)誤。更可怕的是,這樣的代碼,在檢查時(shí)卻完全看不懂。這個(gè)時(shí)候,就可以使用promise對(duì)象和async函數(shù)了,這是ES6語法的知識(shí)點(diǎn),本書的第6章將會(huì)簡單介紹這些知識(shí)。

為了使讀者能夠開心愉悅地閱讀本書,本書多數(shù)章節(jié)采用玄幻小說的寫作風(fēng)格,書中的小故事可以讓讀者以全新的角度看待JavaScript?;蛟S你可以在葉小凡的修仙旅途中感悟到JavaScript的美感,從此在面對(duì)工作和學(xué)習(xí)中的JavaScript代碼時(shí),不再覺得這是一種負(fù)擔(dān),而是一種喜悅。

本書的編寫靈感來自于筆者的一次奇思妙想,因?yàn)樵谑忻嫔喜蝗菀渍也坏揭槐绢愃菩≌f的編程技術(shù)書籍,于是,本書就誕生了。本書不像傳統(tǒng)的技術(shù)書籍那般沉悶,而是像玄幻小說一樣,閱讀起來很有趣味性。讀者會(huì)發(fā)現(xiàn),原來JavaScript還可以這樣學(xué)。

如果你已經(jīng)準(zhǔn)備好了,那么請跟著葉小凡,開始享受這段開心愉悅的修煉旅途吧!

編者2020年8月

PS: 下面這個(gè)人不是我,冒充我,天天在我的文章下面評(píng)論,然后引流到他自己的公眾號(hào)。大家不要上當(dāng),他用了跟我一樣的名字和頭像!

image.png

他的簡書地址:http://www.itdecent.cn/u/f7046342b176 <== 假的

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容