[轉職軟體工程師、自學程式語言] Landing Page & Bootstrap & CSS3 第一章 : Introduction 第二章 : Primitive Types 第三章 : Object Types

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/

我們今天講的主題是, Landing Page & Bootstrap & CSS3,大綱如下


第一章 : Introduction

第二章 : Primitive Types

第三章 : Object Types

第四章 : Primitives vs Objects

第五章 : Exressions & Control Flows

第六章 : Built in Functions & Methods

第七章 : DOM & Event Handling

第八章 : Tricky Parts "this" & Closure

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/



第一章 : Introduction

image

HTML : 建立內容以及 element 結構 ( 我們可以視為名詞s )

CSS : 讓這些 element 看起來如,調整樣式 ( 我們可以視為形容詞 )

Javascript : 讓這些 element 跟 user 做 interact ( 我們可以視為動詞 )



看一個例子如何實際的 run Javascript

image


js 要放在 head 的最下面,這樣會確保它 html 已經 load 完後才run js

image


window 就是這個網頁 html 已經 load 完了,它跑完後就會 run js

image

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/



第二章 : Primitive Types

Variables 就是設定變數,會有 Variables name 和 Variables value (Number、String、Boolean)

image


typeof 會可以知道你的變數是什麼 type

image


Type 有分兩種 Type

5 primitive types : Number、String、Boolean、Undefined、null

2 object types : Object、function

image


Number

NaN 是正負無限大無限小的意思,也不知道是哪個

image


String

image


Boolean

Short-circuit evaluation

&& (and) : 兩邊有一邊是 false 那它最後結果就會是 false,它會先看左邊,左邊是 false 那右邊不管是甚麼它都會是 false,右邊它連計算都不會計算

| | (or) : 兩邊只要一個 true,那答案就會是 true

image



image

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/



第三章 : Object Types

在下面的例子於 JavaScript 我們稱之為 JSON,var user = {

裡面就放你在這個Objects預計放什麼東西,其實就是 Variables name 和 Variables value 

而中誇號 [ ] 開頭是一種特殊的 objects,叫做 array 陣列

而還有一個 function () {

         }

}

若要使用 name 的值的話,就用 user.name

image


什麼是 object,(Arrays,dates,regexps)

他們的 type 通通都是 Object

array 可以使用 list 的方式呈現

也可以使用 new 來呈現一個 array

arr[引索] : 陣列的第幾項的值

arr.length : 陣列長度

而 dates 則只能使用 new 來呈現一個 dates

regexps 可以 replace 取代裡面某個部分

/ab+/i : a 然後緊接著出現 b,+ 的意思是一次以上,i 則是我們不 case 大寫還是小寫

ig 則是不 case 大寫還是小寫之外,還有整個字串都 match 很多次,不是只 match 第一次

所以它先找到 abb,然後繼續往後再找到 ab,將這些都 replace 為 x,就呈現新的 string 為'xc xc'

re.test 則是知道是否有上述的 match,就呈現 true

image


Function 是另一種 type,嚴格說起來它也是一種 object,只是它是一種特殊的 object

因為太特殊就變成自己一個 type,它擁有 object 所擁有的東西,只是它多了一個東西,就是它可以被 call

可以將 function 放入一個 Variable ,add

也可以不用給 add() 值,然後使用 arguments[引索],告訴他我要取第幾個值

high-order function 它是吃一個 function

例如你要寫一個 function 它要去對 array 去做操作,然後對每一個 element 做這操作一變

對每一個 array 裡面的 element 我都去把這個 element 帶去 f 裡面,f 就是一個 function

image


Function 還可以被當成 Methods 來使用

在任何的 function 裡我都可以寫這個 this 這個 key word

當你今天在一個 function 裡面寫 this 的時候,那這個 this by default 就代表 window,假設你這 window 裡面沒有name 的話,那你 output 出來的就是 'Hi, I am undefined' ,有 name 的話 undefined 它就會變成那個 name 的名字

然後你也可以使用一個object (JSON),然後 call greet

當我今天call greet的時候,這個this.name,就會代表這個user Object,就是Bob

因此秀出來就是 'Hi,I am Bob'

這個 this 執行的不是一個 window,而是一個 object 那這就是所謂的 Method

image


Function 也可以把它當 Constructors 來用

Constructors 顧名思義就是給 object 一個初始值

我們通常在給 initialize 初始值的這種 Function 前面的第一個字為大寫 User,可以讓人知道這個是用來當 Constructors

如果今天你要多個 objec t那使用 Constructors 就不用寫到很多重複的 code

image


如何去區分 object

就如下面所示,.constructor 可以去找到當初寫的是屬於什麼 function

就是可以用 .constructor 對任何一個 object 去的到它的 constructor 是誰

image


Static Methods 

那些 method 不會使用到 this 的,就把它寫在 contructor 裡面

大家通常都這樣寫,如下

image

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/


第一章 : Introduction

第二章 : Primitive Types

第三章 : Object Types

第四章 : Primitives vs Objects

第五章 : Exressions & Control Flows

第六章 : Built in Functions & Methods

第七章 : DOM & Event Handling

第八章 : Tricky Parts "this" & Closure

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/


痞客邦 : https://warlimit.pixnet.net/blog?utm_source=PIXNET&utm_medium=navbar&utm_term=my_blog

隨意窩 : https://blog.xuite.net/warlimit/blog

Blogspot : https://warlimit.blogspot.com

如果您喜歡我的文章,請幫我在下方拍手區按圓圈圈裡的拍手圖案5次!
我將得到 Likecoin 的回饋:)

回饋由 Likecoin 基金會出資,您只要註冊/登入帳號(fb、google帳號都可以註冊,不超過1分鐘),按五次左鍵,可以贊助我的文章且完全不會花到錢!若願意成為讚賞公民那是十分感激。
支持創作,正向交流:)

留言

這個網誌中的熱門文章

如何開始 Podcast 製作教學 5大步驟 ! 不需任何成本方法

[Udemy推薦課程] Day 2 The Web Developer Bootcamp 2021 [轉職軟體工程師,自學程式語言]

2021年一夜致富,市值60億美元, 什麼是以太坊經典 ETC