<a href="">按鈕</a>
a {
width: 100px;
height: 100px;
color: red;
}
a:hover{
color: blue;
}
transition
擺放在 a
a:hover
的差異:
放在 a
➡ 滑鼠移入、移開皆有動畫效果。
放在 a:hover
➡ 滑鼠移入有動畫效果,移開則沒有。
<a href="">按鈕</a>
a {
width: 100px;
height: 100px;
color: red;
}
a:hover{
color: blue;
}
transition
擺放在 a
a:hover
的差異:
放在 a
➡ 滑鼠移入、移開皆有動畫效果。
放在 a:hover
➡ 滑鼠移入有動畫效果,移開則沒有。
全域選擇器以星號 * 代表,適用於所有元素
如果要讓整個網頁都是相同字型,建議下在
body
還是*
好呢?
建議將 font-family
寫在 <body>
裡,而 css reset 的東西則寫在全域選擇器 *
因為 <body>
是 tag 選取器,而 tag 選取器的層級高於 * 選取器。
<div class="wrap">
<span>第一行</span>
<div>第二行</div>
<div>第三行</div>
</div>
當我們想選擇內容是 第二行
的 <div>
標籤時,可能會這樣寫:
.wrap .box div:nth-child(1){
color: red;
}
但這樣寫是無效的,:nth-child
選擇器的特性,會先在 .wrap
中先找到順序 1 的標籤,再去看標籤是否符合是 <div>
標籤。
所以正確寫法應改為:
.wrap .box div:nth-child(2){
color: red;
}
<div class="wrap">
<div class="item1">第一行</div>
<div class="item1">第二行</div>
<div class="item2">第三行</div>
<div class="item1">第四行</div>
<div class="item2">第五行</div>
</div>
當我們想選擇第二個 item2
的 class 時,可能會這樣寫:
.wrap .item2:nth-child(2){
color: red;
}
同理剛剛提到的 「先看順序」,所以這樣寫也是無效的!
參考:
]]>全域選擇器以星號 * 代表,適用於所有元素
如果要讓整個網頁都是相同字型,建議下在
body
還是*
好呢?
建議將 font-family
寫在 <body>
裡,而 css reset 的東西則寫在全域選擇器 *
因為 <body>
是 tag 選取器,而 tag 選取器的層級高於 * 選取器。
<div class="wrap">
<span>第一行</span>
<div>第二行</div>
<div>第三行</div>
</div>
當我們想選擇內容是 第二行
的 <div>
標籤時,可能會這樣寫:
.wrap .box div:nth-child(1){
color: red;
}
但這樣寫是無效的,:nth-child
選擇器的特性,會先在 .wrap
中先找到順序 1 的標籤,再去看標籤是否符合是 <div>
標籤。
所以正確寫法應改為:
.wrap .box div:nth-child(2){
color: red;
}
<div class="wrap">
<div class="item1">第一行</div>
<div class="item1">第二行</div>
<div class="item2">第三行</div>
<div class="item1">第四行</div>
<div class="item2">第五行</div>
</div>
當我們想選擇第二個 item2
的 class 時,可能會這樣寫:
.wrap .item2:nth-child(2){
color: red;
}
同理剛剛提到的 「先看順序」,所以這樣寫也是無效的!
參考:
]]>npm 是 Node Package Manager 的簡稱,內含各種 Javascript 套件可以下載,自己寫好的套件也能上傳上去提供其他人使用。
在裝過 node.js 時,npm 預設也會一起被安裝,可以在終端機輸入 npm -v
查看安裝版本
我們可以到 npm 上面搜尋想要安裝的套件,這次以 left_pad 這個套件作為示範。
先進入 left_pad 的 頁面,我們可以在頁面中找到安裝的指令:
(npm 後面的 i 指的是 install 的的簡寫),並開始進行安裝步驟。
在 .js
檔案內使用 require 來載入套件
var leftPad = require('left-pad')
// 可以不寫出完整路徑,系統會優先搜尋同層資料夾的套件,若找不到會再往父層資料夾搜尋
console.log(leftPad(123, 10, '0')
// 即可使用
(待補:npm install 單元)
接手別人專案時,可直接輸入 npm install
,直接安裝好紀錄在 package.json 內所用到的套件名稱們
npm 是 Node Package Manager 的簡稱,內含各種 Javascript 套件可以下載,自己寫好的套件也能上傳上去提供其他人使用。
在裝過 node.js 時,npm 預設也會一起被安裝,可以在終端機輸入 npm -v
查看安裝版本
我們可以到 npm 上面搜尋想要安裝的套件,這次以 left_pad 這個套件作為示範。
先進入 left_pad 的 頁面,我們可以在頁面中找到安裝的指令:
(npm 後面的 i 指的是 install 的的簡寫),並開始進行安裝步驟。
在 .js
檔案內使用 require 來載入套件
var leftPad = require('left-pad')
// 可以不寫出完整路徑,系統會優先搜尋同層資料夾的套件,若找不到會再往父層資料夾搜尋
console.log(leftPad(123, 10, '0')
// 即可使用
(待補:npm install 單元)
接手別人專案時,可直接輸入 npm install
,直接安裝好紀錄在 package.json 內所用到的套件名稱們
也就是 constant,代表這個數是不會變更的。
可以用於不想改變的變數,或是本來就不會改變的數值(例如:圓周率)
const PI = 3.14;
var 的作用域是整個 function 都能使用到 var 的變數
而在 ES6 新增的 let 和 const,則是塊級作用域
例如目前有個 function 是用 var 來設定變數:
function test() {
if (10 > 5) {
var a = 10
}
console.log(a)
}
test() // 結果即得到 10
因為 var 的生存作用域是整個 function 所以是可以得到結果的。
但如果把第三行換成 let a = 10
時,生存範圍就只會在 if
的 block 裡面,所以會取不到 a 的變數。
在學了 ES6 以後,盡量使用 let 而不使用 var,原因是作用域越小,才越不會干擾到其他因素,debug 時也會比較好 debug。
在 ES6 以前,如果要輸出多行字串或有許多字串要拼接的話,寫法非常繁複,如下:
舊寫法:
var str = '' + '\n' +
'hello' + '\n' +
'hey'
'hi'
console.log(str)
// 即得:
//
// hello
// hey
註:
'\n'
是換行字元的意思。
改成模板字串符以後:
let str = `
hello
hey
hi
`
console.log(str)
// 即可得到和舊版寫法一樣的結果
舊寫法:
let name = Mily
console.log('Hello, ' + 'my ' + 'name ' + 'is ' + name )
改成模板字串符以後:
let name = Mily
console.log(`Hello, my name is ${name}`)
在 ES6 以前,想要取得陣列的數值時,只能用這樣的寫法:
const arr = [1, 2, 3, 4]
var first = arr[0]
var second = arr[1]
var third = arr[2]
var fourth arr[3]
console.log(second, third)
現在 ES6 後可以寫成:
const arr = [1, 2, 3, 4]
var [first, second, third, fourth] = arr
console.log(second, third)
舊寫法:
const obj = {
name: 'Mily',
age: 25,
address: 'taiwan'
}
var name = obj.name
var age = obj.age
var address = obj.address
console.log(address)
ES6 解構後:
const obj = {
name: 'Mily',
age: 25,
address: 'taiwan'
}
var {name, age, adress} = obj
console.log(address)
也可以多層包覆下去解構哦!
現在有兩個陣列:
var arr = [1, 2, 3]
var arr2 = [4, 5, 6]
console.log(arr2)
// 即得 [4, 5, 6]
如果把 arr 放進 arr2 裡面
var arr = [1, 2, 3]
var arr2 = [4, 5, 6, arr]
console.log(arr2)
// 即得 [4, 5, 6, [1, 2, 3]]
接下來在 arr 前面加入展開運算符 ...
var arr = [1, 2, 3]
var arr2 = [4, 5, 6, ...arr]
console.log(arr2)
// 即得 [4, 5, 6, 1, 2, 3]
function add(a, b, c) {
return a + b + c
}
var arr = [1, 2, 3]
console.log(add(...arr))
// 即得 6
// 如果沒有加展開運算符,這題就得不出答案了
var arr = [1, 2, 3, 4]
var [first, ...rest] = arr
console.log(rest)
// 即得 [2, 3, 4]
var obj = {
a: 1,
b: 2,
c: 3
}
var{a, ...obj2} = obj
console.log(obj2)
// 即得 {b: 2, c: 3}
Spread Operator(展開)和 Rest Parameters(反向展開)的綜合範例:
var obj = {
a: 1,
b: 2
}
var obj2 = {
...obj, // 展開
c: 3
}
var (a, ...rest) = obj2
// 這裡的 ...rest 是反向展開
console.log(rest)
// 即得 {b:2, c: 3}
可以在 function 內加入預設的數值
(待補)
也就是 constant,代表這個數是不會變更的。
可以用於不想改變的變數,或是本來就不會改變的數值(例如:圓周率)
const PI = 3.14;
var 的作用域是整個 function 都能使用到 var 的變數
而在 ES6 新增的 let 和 const,則是塊級作用域
例如目前有個 function 是用 var 來設定變數:
function test() {
if (10 > 5) {
var a = 10
}
console.log(a)
}
test() // 結果即得到 10
因為 var 的生存作用域是整個 function 所以是可以得到結果的。
但如果把第三行換成 let a = 10
時,生存範圍就只會在 if
的 block 裡面,所以會取不到 a 的變數。
在學了 ES6 以後,盡量使用 let 而不使用 var,原因是作用域越小,才越不會干擾到其他因素,debug 時也會比較好 debug。
在 ES6 以前,如果要輸出多行字串或有許多字串要拼接的話,寫法非常繁複,如下:
舊寫法:
var str = '' + '\n' +
'hello' + '\n' +
'hey'
'hi'
console.log(str)
// 即得:
//
// hello
// hey
註:
'\n'
是換行字元的意思。
改成模板字串符以後:
let str = `
hello
hey
hi
`
console.log(str)
// 即可得到和舊版寫法一樣的結果
舊寫法:
let name = Mily
console.log('Hello, ' + 'my ' + 'name ' + 'is ' + name )
改成模板字串符以後:
let name = Mily
console.log(`Hello, my name is ${name}`)
在 ES6 以前,想要取得陣列的數值時,只能用這樣的寫法:
const arr = [1, 2, 3, 4]
var first = arr[0]
var second = arr[1]
var third = arr[2]
var fourth arr[3]
console.log(second, third)
現在 ES6 後可以寫成:
const arr = [1, 2, 3, 4]
var [first, second, third, fourth] = arr
console.log(second, third)
舊寫法:
const obj = {
name: 'Mily',
age: 25,
address: 'taiwan'
}
var name = obj.name
var age = obj.age
var address = obj.address
console.log(address)
ES6 解構後:
const obj = {
name: 'Mily',
age: 25,
address: 'taiwan'
}
var {name, age, adress} = obj
console.log(address)
也可以多層包覆下去解構哦!
現在有兩個陣列:
var arr = [1, 2, 3]
var arr2 = [4, 5, 6]
console.log(arr2)
// 即得 [4, 5, 6]
如果把 arr 放進 arr2 裡面
var arr = [1, 2, 3]
var arr2 = [4, 5, 6, arr]
console.log(arr2)
// 即得 [4, 5, 6, [1, 2, 3]]
接下來在 arr 前面加入展開運算符 ...
var arr = [1, 2, 3]
var arr2 = [4, 5, 6, ...arr]
console.log(arr2)
// 即得 [4, 5, 6, 1, 2, 3]
function add(a, b, c) {
return a + b + c
}
var arr = [1, 2, 3]
console.log(add(...arr))
// 即得 6
// 如果沒有加展開運算符,這題就得不出答案了
var arr = [1, 2, 3, 4]
var [first, ...rest] = arr
console.log(rest)
// 即得 [2, 3, 4]
var obj = {
a: 1,
b: 2,
c: 3
}
var{a, ...obj2} = obj
console.log(obj2)
// 即得 {b: 2, c: 3}
Spread Operator(展開)和 Rest Parameters(反向展開)的綜合範例:
var obj = {
a: 1,
b: 2
}
var obj2 = {
...obj, // 展開
c: 3
}
var (a, ...rest) = obj2
// 這裡的 ...rest 是反向展開
console.log(rest)
// 即得 {b:2, c: 3}
可以在 function 內加入預設的數值
(待補)
function 函數名稱(參數){
要執行的代碼
}
範例:
function myFunction(p1, p2) {
return p1 * p2; // 回傳 p1 * p2
}
console.log(myFunction(3, 5))
=> 即得 15
function 也是個資料型態,所以也可以這麼做:
function hello() {
console.log('hello')
}
-------------------------
var hello = function() {
console.log('hello')
}
以上兩種寫起來是差不多的,但還是有差別的
function 裡面也可以再包 function:
function print(anything) {
anything() // 2. 會得到 hello() 這個 function
}
function hello(){
console.log('hello') // 3. 最後結果
}
print(hello) // 1. 先看這行把 hello 傳進去
=> 最後結果即得 hello
function sayHello(name){
console.log('hello', name)
}
sayHello('Mily')
=> 即得 hello Mily
function double(x) {
return x * 2
}
var result = doubel(3)
console.log(result)
=> 即得 6
var a = 10
var b = '20'
var c = '20.201234'
console.log(a + 以下提及的函式)
Number(b)
console.log(a + Number(b))
:即會直接把字串轉成數字
parseInt(c, 多少進位)
console.log(a + parseInt(c, 多少進位)
:parseInt 印出來的值是整數(會去掉小數點),可以加上第二個參數,決定要多少進位,但也可以不寫
parseFloat()
console.log(a + parseFloat(c))
:可以完成印出包含小數點的數字
console.log(parseFloat(c).toFixed(n))
搭配上面的提到的parseFloat()
,在後面加上 .toFixed(n)
,並把 N
替換成想要顯示幾個小數點後面的數字出來,也可以不寫,不寫即會去掉所有小數點
toString()
數字轉字串
var a = 2
第一種:
a.toString()
// 直接輸入就好,不需要 console.log
第二種:
(a + '')
// 數字 + 字串會變成字串
Math.ceil(n)
無條件進位
Math.floor(n)
無條件捨去
Math.round(n)
四捨五入
Math.sqrt(n)
開根號
Math.pow(n 幾次方)
可以得到 n 的 __ 次方
Math.random()
得到隨機數字,範圍是 0<1
toUppercase()
把字串都變成大寫
var a = 'abc'.toUppercase()
console.log(a)
=> 即得 ABC
toLowercase()
把字串都變成小寫
影片:String 類型的內建函式
有些沒寫出來
join('字元')
在陣列中間加入東西
var arr = [1, 2, 3]
console.log(arr.join('!'))
=> 即得 1!2!3
map(函式)
在陣列中間加入東西
var arr = [1, 2, 3]
functiion double(x){
return x*2
}
console.log(arr.map(double))
=> 即得 [2, 4, 6]
---------------
或直接把函式寫在 console.log 裡面也可以
console.log(arr.map(functiion double(x){
return x*2
}))
=> 一樣即得 [2, 4, 6]
後面可以再加入 map,再去看影片
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
function 函數名稱(參數){
要執行的代碼
}
範例:
function myFunction(p1, p2) {
return p1 * p2; // 回傳 p1 * p2
}
console.log(myFunction(3, 5))
=> 即得 15
function 也是個資料型態,所以也可以這麼做:
function hello() {
console.log('hello')
}
-------------------------
var hello = function() {
console.log('hello')
}
以上兩種寫起來是差不多的,但還是有差別的
function 裡面也可以再包 function:
function print(anything) {
anything() // 2. 會得到 hello() 這個 function
}
function hello(){
console.log('hello') // 3. 最後結果
}
print(hello) // 1. 先看這行把 hello 傳進去
=> 最後結果即得 hello
function sayHello(name){
console.log('hello', name)
}
sayHello('Mily')
=> 即得 hello Mily
function double(x) {
return x * 2
}
var result = doubel(3)
console.log(result)
=> 即得 6
var a = 10
var b = '20'
var c = '20.201234'
console.log(a + 以下提及的函式)
Number(b)
console.log(a + Number(b))
:即會直接把字串轉成數字
parseInt(c, 多少進位)
console.log(a + parseInt(c, 多少進位)
:parseInt 印出來的值是整數(會去掉小數點),可以加上第二個參數,決定要多少進位,但也可以不寫
parseFloat()
console.log(a + parseFloat(c))
:可以完成印出包含小數點的數字
console.log(parseFloat(c).toFixed(n))
搭配上面的提到的parseFloat()
,在後面加上 .toFixed(n)
,並把 N
替換成想要顯示幾個小數點後面的數字出來,也可以不寫,不寫即會去掉所有小數點
toString()
數字轉字串
var a = 2
第一種:
a.toString()
// 直接輸入就好,不需要 console.log
第二種:
(a + '')
// 數字 + 字串會變成字串
Math.ceil(n)
無條件進位
Math.floor(n)
無條件捨去
Math.round(n)
四捨五入
Math.sqrt(n)
開根號
Math.pow(n 幾次方)
可以得到 n 的 __ 次方
Math.random()
得到隨機數字,範圍是 0<1
toUppercase()
把字串都變成大寫
var a = 'abc'.toUppercase()
console.log(a)
=> 即得 ABC
toLowercase()
把字串都變成小寫
影片:String 類型的內建函式
有些沒寫出來
join('字元')
在陣列中間加入東西
var arr = [1, 2, 3]
console.log(arr.join('!'))
=> 即得 1!2!3
map(函式)
在陣列中間加入東西
var arr = [1, 2, 3]
functiion double(x){
return x*2
}
console.log(arr.map(double))
=> 即得 [2, 4, 6]
---------------
或直接把函式寫在 console.log 裡面也可以
console.log(arr.map(functiion double(x){
return x*2
}))
=> 一樣即得 [2, 4, 6]
後面可以再加入 map,再去看影片
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
continue
語法可用來重新開始 while
、do-while
、for
、label
語法。
參考 MDN 資料:
白話解釋就是:如果 ... 就怎樣,否則 ... 就怎麼樣。
基本寫法:
if ( 條件 ) {
條件成立時,所運行的程式碼
} else {
條件不成立時,所運行的程式碼
}
如果有多個判斷式,可以寫成:
if ( 條件 1 ) {
條件 1 成立時,所運行的程式碼
} else if ( 條件 2 ){
條件 2 成立時,所運行的程式碼
}
最常使用的寫法:
var i = 1
while(i<=100) {
console.log(i)
i++
}
=> 即可印出 1 至 100
也有另一種寫法,是先執行程式,再判斷是否要做迴圈的寫法:
var i = 1
do {
console.log(i)
i++
} while(i<=100)
=> 即可印出 1 至 100
for (初始值; 終止條件; i 每一圈要做的事情){
要運行的程式碼
}
範例:
for (var i = 1; i<=100; i++){
console.log(i)
}
=> 即可印出 1 至 100
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
continue
語法可用來重新開始 while
、do-while
、for
、label
語法。
參考 MDN 資料:
白話解釋就是:如果 ... 就怎樣,否則 ... 就怎麼樣。
基本寫法:
if ( 條件 ) {
條件成立時,所運行的程式碼
} else {
條件不成立時,所運行的程式碼
}
如果有多個判斷式,可以寫成:
if ( 條件 1 ) {
條件 1 成立時,所運行的程式碼
} else if ( 條件 2 ){
條件 2 成立時,所運行的程式碼
}
最常使用的寫法:
var i = 1
while(i<=100) {
console.log(i)
i++
}
=> 即可印出 1 至 100
也有另一種寫法,是先執行程式,再判斷是否要做迴圈的寫法:
var i = 1
do {
console.log(i)
i++
} while(i<=100)
=> 即可印出 1 至 100
for (初始值; 終止條件; i 每一圈要做的事情){
要運行的程式碼
}
範例:
for (var i = 1; i<=100; i++){
console.log(i)
}
=> 即可印出 1 至 100
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
可以將變數想像成一個能夠裝東西的箱子,而這個箱子有一個名稱(如:box),裡面則有一些東西,而我們可以用幫箱子所取名的 box 來代指裡面儲存的東西。
如果想查詢變數是什麼型態可以用 typeof + 變數
來查詢。
範例:
console.log(typeof 30),即得 number
布林 boolean | 數字 number | 字串 string |
---|---|---|
true、false | 50 | "Hello"、'Hi' |
在 JavaScript 中,變數的 = 並不是指數學符號的 =,指的是賦值
var a = 0
a = a + 5 // 這句話可省略成:a + = 5
a = a - 5 // 這句話可省略成:a - = 5
a++(就是 a+=1),a-- 反之
注意,++ 放前面或放後面的意思是不同的
一個陣列裡面可以放很多性質相同的東西
var score = [50, 80, 30, 100]
// score = 陣列名稱
// [] = 陣列裡的物件
使用範例:
console.log(score[0]),即得 50
// 這裡的 [0] 是索引值,需特別注意陣列的索引值是從 0 開始
如果想找出陣列的長度可以使用 .length
(待補)
電腦在儲存小數點時沒有辦法真的很精準,所以會導致運算結果有些許誤差,詳情可以看 這篇 介紹
範例:
var a = 0.1 + 0.2
console.log(a == 0.3)
-----
結果會顯示 false
為什麼是 false 呢?
我們把 a 拆解來看:
console.log(a)
-----
電腦會顯示 0.3000000004
// 會有奇妙的誤差
因此在使用小數點時需特別注意,或盡量減少使用小數點
在提 == 和 === 前,先來這段程式碼:
var a = 10
console.log(a = 1)
以這段程式碼來說,程式解讀的順序會是
先跑 a = 1
再跑 console.log(a)
所以最後 console.log 會得到 1
那如果是這段程式碼:
var a = 10 == 10
console.log(a)
=> 得到 true
因為程式會先從右邊執行到左邊,10 == 10
為 true
,故 a = true
,但最好的方式還是自己用括弧框起來,如 var a = (10 == 10)
==
(一般相等)會先將值轉換成同個型別再比較,用來寫程式容易有 bug。
===
(嚴格相等)除了值以外,型態也一定要相同,否則會被視為不相等,強烈建議使用
=== 來寫程式就好。
console.log(0 == '0')
=> 得到 true
console.log(0 === '0')
=> 得到 false
console.log(0 == '')
=> 得到 true
console.log(0 === '')
=> 得到 false
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
可以將變數想像成一個能夠裝東西的箱子,而這個箱子有一個名稱(如:box),裡面則有一些東西,而我們可以用幫箱子所取名的 box 來代指裡面儲存的東西。
如果想查詢變數是什麼型態可以用 typeof + 變數
來查詢。
範例:
console.log(typeof 30),即得 number
布林 boolean | 數字 number | 字串 string |
---|---|---|
true、false | 50 | "Hello"、'Hi' |
在 JavaScript 中,變數的 = 並不是指數學符號的 =,指的是賦值
var a = 0
a = a + 5 // 這句話可省略成:a + = 5
a = a - 5 // 這句話可省略成:a - = 5
a++(就是 a+=1),a-- 反之
注意,++ 放前面或放後面的意思是不同的
一個陣列裡面可以放很多性質相同的東西
var score = [50, 80, 30, 100]
// score = 陣列名稱
// [] = 陣列裡的物件
使用範例:
console.log(score[0]),即得 50
// 這裡的 [0] 是索引值,需特別注意陣列的索引值是從 0 開始
如果想找出陣列的長度可以使用 .length
(待補)
電腦在儲存小數點時沒有辦法真的很精準,所以會導致運算結果有些許誤差,詳情可以看 這篇 介紹
範例:
var a = 0.1 + 0.2
console.log(a == 0.3)
-----
結果會顯示 false
為什麼是 false 呢?
我們把 a 拆解來看:
console.log(a)
-----
電腦會顯示 0.3000000004
// 會有奇妙的誤差
因此在使用小數點時需特別注意,或盡量減少使用小數點
在提 == 和 === 前,先來這段程式碼:
var a = 10
console.log(a = 1)
以這段程式碼來說,程式解讀的順序會是
先跑 a = 1
再跑 console.log(a)
所以最後 console.log 會得到 1
那如果是這段程式碼:
var a = 10 == 10
console.log(a)
=> 得到 true
因為程式會先從右邊執行到左邊,10 == 10
為 true
,故 a = true
,但最好的方式還是自己用括弧框起來,如 var a = (10 == 10)
==
(一般相等)會先將值轉換成同個型別再比較,用來寫程式容易有 bug。
===
(嚴格相等)除了值以外,型態也一定要相同,否則會被視為不相等,強烈建議使用
=== 來寫程式就好。
console.log(0 == '0')
=> 得到 true
console.log(0 === '0')
=> 得到 false
console.log(0 == '')
=> 得到 true
console.log(0 === '')
=> 得到 false
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
在 JavaScript 中,以下這些值會被當作是 false:
null
0
NaN
''
(空字串) undefined
true || true,即得 true
true || false,即得 true
3 || 10,即得 3
false || 5,即得 5
0 || 10,即得 10(數值 0 在 JavaScript 中會被當作 false)
false || 10,即得 10
### && = and(和)true && true ,即得 true
true && false ,即得 false
3 && 10,即得 10
10 && 3,即得 3
false && 3,即得 false
3 && false,即得 false
!true,即得 false
!false,即得 true
>> 右移 n 位
\<< 左移 n 位
懶人包:
\<< 可以想成乘以 2 的 n 次方
>> 可以想成除以 2 的 n 次方
10 << 1,得 20
10 << 3,得 80(這裡的 3 代表 2^3)
1 << 10,得 1024(這裡的 10 代表 2^10)
1024 >> 1,得 512
比起使用 * 這個符號,對於電腦來說二進位是電腦最原始的形式,所以使用位移運算子的效能會比較快。
(待補)
undefined = 宣告了,但未賦值
not defined = 尚未宣告
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
在 JavaScript 中,以下這些值會被當作是 false:
null
0
NaN
''
(空字串) undefined
true || true,即得 true
true || false,即得 true
3 || 10,即得 3
false || 5,即得 5
0 || 10,即得 10(數值 0 在 JavaScript 中會被當作 false)
false || 10,即得 10
### && = and(和)true && true ,即得 true
true && false ,即得 false
3 && 10,即得 10
10 && 3,即得 3
false && 3,即得 false
3 && false,即得 false
!true,即得 false
!false,即得 true
>> 右移 n 位
\<< 左移 n 位
懶人包:
\<< 可以想成乘以 2 的 n 次方
>> 可以想成除以 2 的 n 次方
10 << 1,得 20
10 << 3,得 80(這裡的 3 代表 2^3)
1 << 10,得 1024(這裡的 10 代表 2^10)
1024 >> 1,得 512
比起使用 * 這個符號,對於電腦來說二進位是電腦最原始的形式,所以使用位移運算子的效能會比較快。
(待補)
undefined = 宣告了,但未賦值
not defined = 尚未宣告
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
在一個專案確定上線後,如果中途遇到 Bug 想修正,或者想要新增功能時,如果直接在專案上修正或測試,可能會影響到使用者,最理想的方式是建立分支,並在分支測試及開發,最後確認沒問題再合併回原本的專案,就不會影響到使用者。
git branch + 名稱
:建立新的 Branch
git branch -v
:看目前有哪些 Branch
可簡寫指令成:
gb -v
git branch -d + 名稱
:可以刪除指定的 Branch
git checkout + branch名稱
:可以切換到指定的 Branch
git merge
:將 Branch 分支合併進 Master 版本
在使用 git merge
後可能會遇到提示寫說conflict
,代表兩個版本有衝突,解決方式是手動修改完成,存檔再 commit
即可。
git branch + 新 Branch 名稱
建立新的 Branchgit checkout
,切換到新的 Branchgit checkout
回原本的 Mastergit merge + 新 Branch 名稱
,把新的 Branch 合併回 Mastercommit
即可。(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
在一個專案確定上線後,如果中途遇到 Bug 想修正,或者想要新增功能時,如果直接在專案上修正或測試,可能會影響到使用者,最理想的方式是建立分支,並在分支測試及開發,最後確認沒問題再合併回原本的專案,就不會影響到使用者。
git branch + 名稱
:建立新的 Branch
git branch -v
:看目前有哪些 Branch
可簡寫指令成:
gb -v
git branch -d + 名稱
:可以刪除指定的 Branch
git checkout + branch名稱
:可以切換到指定的 Branch
git merge
:將 Branch 分支合併進 Master 版本
在使用 git merge
後可能會遇到提示寫說conflict
,代表兩個版本有衝突,解決方式是手動修改完成,存檔再 commit
即可。
git branch + 新 Branch 名稱
建立新的 Branchgit checkout
,切換到新的 Branchgit checkout
回原本的 Mastergit merge + 新 Branch 名稱
,把新的 Branch 合併回 Mastercommit
即可。(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
版本控制:把製作過程中的每個版本都保存下來。
版本控制主要分為 個人 或 團隊 的版本控制。
這可能是每個人從學生時期就學會的技能。
你可能會說:我真的沒學過耶!
來來來,我們先看張圖:
不管是什麼樣的檔案格式,是不是覺得似曾相識?
以前在交期末報告時,應該都曾有前前後後存了好幾個版本的經驗,其實這也算是版本控制的一種喔,但這樣進行版控的缺點是沒辦法清楚看見每個版本的差異性,時間久了也難以進行管理。
(待補圖)
Git 是一套能管理檔案版本,並達到做版本控制的程式,除了可以作為個人使用,也能用在多人協作上。
Git 紀錄的不是整份檔案,而是「檔案的異動」
Git 的優點:
首先,先建立一個需要版本控制的目錄,開始這次的使用 Git 練習。
git init
:初始化目錄,讓 Git 對這個目錄開始進行版本控制。
使用完這個指令後,主目錄裡面將會出現一個隱藏的 .git
目錄,裡面的內容是整個 Git 的精華,也是用這些內容來進行版本控制的。
如果這個目錄不想再使用 Git 控制呢?
只要把 .git
目錄刪除即可。
※ 注意:整個專案目錄內,任何檔案刪除都有辦法回朔,但誤把
.git
刪除就真的沒辦法了。
git status
:查詢當前目錄的狀態。
常使用的指令,建議有事沒事就可以使用這個指令確認狀態。
git add
:決定檔案是否進行版本控制。
假設目前有這些檔案:
code.js
note.txt
style.css
先把以上檔案移至目錄內,並輸入 git status
查詢狀態,即可得到這些檔案目前未被版本控制的訊息。
接下來輸入 git add code.js
,讓 code.js
加入版本控制並查看狀態,會發現檔案被分成兩個區域:
不小心忘記的話,CLI 畫面上很貼心的提示了如何加入或取消版本的指令:
取消版本控制:git rm --cached <檔案>
(補圖:git rm--cached)
如果不想要一個一個檔案慢慢輸入的話,可以輸入 git add .
,即可一口氣把目前所在目錄中的所有檔案都加入版本控制。
git commit
:新建一個版本
當專案都完成了以後,就可以輸入 git commit
開始建立第一個版本,輸入完會進入 Vim 編輯器,可以把比較長的 commit message 在 Vim 裡面輸入,如果不想進去 Vim 裡面,也可以直接輸入 it commit -m "想要輸入的 commit message"
。
完成後再輸入一次git status
確認狀態,即會發現不同之處。
(待補圖:git_commit_01和git_commit_01的Before&After圖)
只要有編輯過檔案,都要先輸入
git add
,再打git commit
指令完成版本控制。(重要)
只要有更新都要照下面的步驟完成:
git add <file>
或 git add .
git commit
+ 進入 Vim 裡面輸入 commit messagegit commit -m "想要輸入的 commit message"
(不進入 Vim)組合指令:
git commit -am '想要輸入的 commit message'
git log
:查看檔案詳細資訊。
輸入後會進入詳細資訊的畫面查看,內容包含:包含版本號碼、作者、提交時間、commit message,離開的話可以按 :q
離開
git log --oneline
:查看檔案重要資料。
這個指令和 git log
的差別是只會顯示 7 碼版本號碼、commit message。
如果玩過單機遊戲的應該都聽過 SL大法(Save、Load),git checkout
這個指令就是 Git 版的 Load 法(讀取紀錄),能夠輕鬆切換版本的重要指令。
git checkout + 版本號碼
:切換至指定版本git checkout master
:切換到最新版本.gitignore
:任何放在裡面的檔案都不會加到版本控制
使用方式:
.gitignore
檔案vim
打開 .gitignore
編輯git status
檢查此指令大多用來放置不重要的檔案,例如:作業系統相關檔案、使用者個人設定、電腦暫存檔等
git diff
:用來查看版本間的差異。
git init
.gitignore
,把不需加入版本控制的檔案先放入git add .
先把所有檔案加入版本控制git commit -am 'commit message'
如果有新增檔案:
要先輸入 git add <file>
,才打 git commit -am 'commit message'
如果只改現有檔案:
直接打 git commit -am 'commit message'
就好
輸入 git commit --amend
,會開啟 Vim 編輯模式,即可修改 commit message
git reset HEAD^
:回到上一個 commit,還原檔案狀態
可以在後面加上模式:
--soft
(完整指令:git reset HEAD^ --soft
)
這個指令的好處是,會保留檔案修改過的時候,但又能恢復到 commit 前(最常使用的做法)
--hard
(完整指令:git reset HEAD^ --hard
),代表強制回去上一個 commit,把剛剛反悔的 commit 當作沒發生過,修改的檔案也會恢復未修改的狀態(最極端的做法)
欲了解預設模式請參考:Git reset 的三種模式( soft mixed hard )比較
git checkout -- <file>
:還原檔案內容
git branch -m <新名稱>
git checkout <想抓下來的 branch 名稱>
發生某件事的時候通知我(例如:有人 push 時、有人 commit 時)
指令 | 說明 | 用法 |
---|---|---|
init | 初始化目錄 | git init |
status | 查詢當前目錄的狀態 | git status |
init | 決定檔案是否進行版本控制 | git add |
add | 初始化目錄 | git init |
(未完待續)
參考:
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
版本控制:把製作過程中的每個版本都保存下來。
版本控制主要分為 個人 或 團隊 的版本控制。
這可能是每個人從學生時期就學會的技能。
你可能會說:我真的沒學過耶!
來來來,我們先看張圖:
不管是什麼樣的檔案格式,是不是覺得似曾相識?
以前在交期末報告時,應該都曾有前前後後存了好幾個版本的經驗,其實這也算是版本控制的一種喔,但這樣進行版控的缺點是沒辦法清楚看見每個版本的差異性,時間久了也難以進行管理。
(待補圖)
Git 是一套能管理檔案版本,並達到做版本控制的程式,除了可以作為個人使用,也能用在多人協作上。
Git 紀錄的不是整份檔案,而是「檔案的異動」
Git 的優點:
首先,先建立一個需要版本控制的目錄,開始這次的使用 Git 練習。
git init
:初始化目錄,讓 Git 對這個目錄開始進行版本控制。
使用完這個指令後,主目錄裡面將會出現一個隱藏的 .git
目錄,裡面的內容是整個 Git 的精華,也是用這些內容來進行版本控制的。
如果這個目錄不想再使用 Git 控制呢?
只要把 .git
目錄刪除即可。
※ 注意:整個專案目錄內,任何檔案刪除都有辦法回朔,但誤把
.git
刪除就真的沒辦法了。
git status
:查詢當前目錄的狀態。
常使用的指令,建議有事沒事就可以使用這個指令確認狀態。
git add
:決定檔案是否進行版本控制。
假設目前有這些檔案:
code.js
note.txt
style.css
先把以上檔案移至目錄內,並輸入 git status
查詢狀態,即可得到這些檔案目前未被版本控制的訊息。
接下來輸入 git add code.js
,讓 code.js
加入版本控制並查看狀態,會發現檔案被分成兩個區域:
不小心忘記的話,CLI 畫面上很貼心的提示了如何加入或取消版本的指令:
取消版本控制:git rm --cached <檔案>
(補圖:git rm--cached)
如果不想要一個一個檔案慢慢輸入的話,可以輸入 git add .
,即可一口氣把目前所在目錄中的所有檔案都加入版本控制。
git commit
:新建一個版本
當專案都完成了以後,就可以輸入 git commit
開始建立第一個版本,輸入完會進入 Vim 編輯器,可以把比較長的 commit message 在 Vim 裡面輸入,如果不想進去 Vim 裡面,也可以直接輸入 it commit -m "想要輸入的 commit message"
。
完成後再輸入一次git status
確認狀態,即會發現不同之處。
(待補圖:git_commit_01和git_commit_01的Before&After圖)
只要有編輯過檔案,都要先輸入
git add
,再打git commit
指令完成版本控制。(重要)
只要有更新都要照下面的步驟完成:
git add <file>
或 git add .
git commit
+ 進入 Vim 裡面輸入 commit messagegit commit -m "想要輸入的 commit message"
(不進入 Vim)組合指令:
git commit -am '想要輸入的 commit message'
git log
:查看檔案詳細資訊。
輸入後會進入詳細資訊的畫面查看,內容包含:包含版本號碼、作者、提交時間、commit message,離開的話可以按 :q
離開
git log --oneline
:查看檔案重要資料。
這個指令和 git log
的差別是只會顯示 7 碼版本號碼、commit message。
如果玩過單機遊戲的應該都聽過 SL大法(Save、Load),git checkout
這個指令就是 Git 版的 Load 法(讀取紀錄),能夠輕鬆切換版本的重要指令。
git checkout + 版本號碼
:切換至指定版本git checkout master
:切換到最新版本.gitignore
:任何放在裡面的檔案都不會加到版本控制
使用方式:
.gitignore
檔案vim
打開 .gitignore
編輯git status
檢查此指令大多用來放置不重要的檔案,例如:作業系統相關檔案、使用者個人設定、電腦暫存檔等
git diff
:用來查看版本間的差異。
git init
.gitignore
,把不需加入版本控制的檔案先放入git add .
先把所有檔案加入版本控制git commit -am 'commit message'
如果有新增檔案:
要先輸入 git add <file>
,才打 git commit -am 'commit message'
如果只改現有檔案:
直接打 git commit -am 'commit message'
就好
輸入 git commit --amend
,會開啟 Vim 編輯模式,即可修改 commit message
git reset HEAD^
:回到上一個 commit,還原檔案狀態
可以在後面加上模式:
--soft
(完整指令:git reset HEAD^ --soft
)
這個指令的好處是,會保留檔案修改過的時候,但又能恢復到 commit 前(最常使用的做法)
--hard
(完整指令:git reset HEAD^ --hard
),代表強制回去上一個 commit,把剛剛反悔的 commit 當作沒發生過,修改的檔案也會恢復未修改的狀態(最極端的做法)
欲了解預設模式請參考:Git reset 的三種模式( soft mixed hard )比較
git checkout -- <file>
:還原檔案內容
git branch -m <新名稱>
git checkout <想抓下來的 branch 名稱>
發生某件事的時候通知我(例如:有人 push 時、有人 commit 時)
指令 | 說明 | 用法 |
---|---|---|
init | 初始化目錄 | git init |
status | 查詢當前目錄的狀態 | git status |
init | 決定檔案是否進行版本控制 | git add |
add | 初始化目錄 | git init |
(未完待續)
參考:
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
全名是 Graphical User Interface,是指用圖形方式顯示的電腦操作用戶介面,也是我們平常最常用來操作電腦的方式。若用更白話、簡單的方式來說,就像下圖一樣,我們要新增資料夾時,可以透過滑鼠點擊的方式來操作。
全名是 Command-Line Interface,是在 GUI 普及之前最廣泛運用的使用者介面,通常不支援滑鼠,而是利用鍵盤來輸入指令,電腦接收到指令後,將會執行。
在程式開發裡,有很多工具不會提供圖形介面,只能透過指令來操作。
pwd
:印出目前所在位置(Print Working Directory)ls
:印出目前資料夾底下的所有檔案(LiSt)ls-al
:列出詳細資料在ls
後面加上參數 -al
,會列出詳細資料,例如:檔案權限、檔案擁有者、檔案大小、最後修改時間、所有隱藏檔案。
cd
:切換資料夾(Change Directory)cd ..
:如果在cd
後面加上 ..
的話,則能夠回到上一層資料夾
clear
:清空終端機畫面想要清空畫面的時候可以輸入這個指令。
超方便!之前不知道這個指令卻又有強迫症想清空畫面,都用很笨的方法關掉再重開終端機。
man
使用說明書(MANual)舉例:輸入 man ls
後,會列出 ls
的詳細用法。
touch
:建立檔案或更改檔案時間當檔案「存在」時,輸入 touch
後,檔案修改時間將會更新。
當檔案「不存在」時,輸入 touch
後,將會新增檔案。
rm
:刪除檔案(ReMove)輸入 rm 檔案名稱
,即可刪除檔案。
這裡記得需輸入檔案格式,如:.txt、.jpg⋯等。
rm
只能刪除檔案,如果想刪除資料夾的話有幾種作法:
rmdir 資料夾名稱
:在 rm
後面加上dir
rm -r 資料夾名稱
:在 rm
後面加上空格
+-r
rm -r
指令會直接刪除資料夾及裡面的所有檔案。(慎用!)rm -f
即使檔案有保護機制會跳出確認訊息時,使用 rm -f
指令一樣會無視保護機制,直接刪除檔案。(超危險!) mkdir
:建立資料夾(Make DIRectory)輸入 mkdir 資料夾名稱
,即可建立資料夾。
mv
:移動檔案或改名(MoVe)移動檔案:
更改檔案名稱:
cp
:複製檔案(CoPy)指令:
cp
+原本檔案名稱
+新複製的檔案名稱
範例:cp test.txt test2.txt
如果要複製「資料夾」的話,要加上
-r
。
指令:cp
+-r
+原資料夾名稱
+複製的資料夾名稱
grep
: 抓取關鍵字指令:
grep
+關鍵字
+檔案名稱
使用情境示範:
有一個 hello.txt 的文字檔案,內含許多文字,今天我要找出關鍵字 oh
的話,該怎麼做呢?
輸入:
grep
+oh
+hello.txt
,即會顯示出擁有oh
這個關鍵字的所有字句。
wget
: 下載檔案非內建指令,需要先安裝。
指令:
wget
+想要下載的圖片網址或檔案網址
curl
: 送出 requestredirection
: 重新導向 input outputpipe
: 指令組合技Vim 是一款歷史悠久,並由 Vi 發展出來的文字編輯器,也是 Git 預設的編輯器。
雖然目前已有許多文字編輯器能夠使用,例如:VS Code、Sublime Text 等,但很多人在使用 Git 過程中,可能會不小心進入這個編輯器,而這個編輯器的使用方式相較其他文字編輯器來說比較特別,需要透過特定指令才能達到輸入文字、存檔,甚至是離開的動作。
Vim 至少有超過五種以上的模式能夠應用,這邊只簡單介紹三種最常使用的模式:
:q
:不存檔,直接離開
:q!
:不存檔,強制離開(當有修改不想儲存時)
:w
:存檔,但不離開
:!w
:強制存檔,但不離開
:w {name}
:存檔並命名為 name
,但不離開
:wq
:存檔並離開
:!wq
:強制存檔並離開
還有許多未提及的指令及模式可自行查閱。
參考:
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
全名是 Graphical User Interface,是指用圖形方式顯示的電腦操作用戶介面,也是我們平常最常用來操作電腦的方式。若用更白話、簡單的方式來說,就像下圖一樣,我們要新增資料夾時,可以透過滑鼠點擊的方式來操作。
全名是 Command-Line Interface,是在 GUI 普及之前最廣泛運用的使用者介面,通常不支援滑鼠,而是利用鍵盤來輸入指令,電腦接收到指令後,將會執行。
在程式開發裡,有很多工具不會提供圖形介面,只能透過指令來操作。
pwd
:印出目前所在位置(Print Working Directory)ls
:印出目前資料夾底下的所有檔案(LiSt)ls-al
:列出詳細資料在ls
後面加上參數 -al
,會列出詳細資料,例如:檔案權限、檔案擁有者、檔案大小、最後修改時間、所有隱藏檔案。
cd
:切換資料夾(Change Directory)cd ..
:如果在cd
後面加上 ..
的話,則能夠回到上一層資料夾
clear
:清空終端機畫面想要清空畫面的時候可以輸入這個指令。
超方便!之前不知道這個指令卻又有強迫症想清空畫面,都用很笨的方法關掉再重開終端機。
man
使用說明書(MANual)舉例:輸入 man ls
後,會列出 ls
的詳細用法。
touch
:建立檔案或更改檔案時間當檔案「存在」時,輸入 touch
後,檔案修改時間將會更新。
當檔案「不存在」時,輸入 touch
後,將會新增檔案。
rm
:刪除檔案(ReMove)輸入 rm 檔案名稱
,即可刪除檔案。
這裡記得需輸入檔案格式,如:.txt、.jpg⋯等。
rm
只能刪除檔案,如果想刪除資料夾的話有幾種作法:
rmdir 資料夾名稱
:在 rm
後面加上dir
rm -r 資料夾名稱
:在 rm
後面加上空格
+-r
rm -r
指令會直接刪除資料夾及裡面的所有檔案。(慎用!)rm -f
即使檔案有保護機制會跳出確認訊息時,使用 rm -f
指令一樣會無視保護機制,直接刪除檔案。(超危險!) mkdir
:建立資料夾(Make DIRectory)輸入 mkdir 資料夾名稱
,即可建立資料夾。
mv
:移動檔案或改名(MoVe)移動檔案:
更改檔案名稱:
cp
:複製檔案(CoPy)指令:
cp
+原本檔案名稱
+新複製的檔案名稱
範例:cp test.txt test2.txt
如果要複製「資料夾」的話,要加上
-r
。
指令:cp
+-r
+原資料夾名稱
+複製的資料夾名稱
grep
: 抓取關鍵字指令:
grep
+關鍵字
+檔案名稱
使用情境示範:
有一個 hello.txt 的文字檔案,內含許多文字,今天我要找出關鍵字 oh
的話,該怎麼做呢?
輸入:
grep
+oh
+hello.txt
,即會顯示出擁有oh
這個關鍵字的所有字句。
wget
: 下載檔案非內建指令,需要先安裝。
指令:
wget
+想要下載的圖片網址或檔案網址
curl
: 送出 requestredirection
: 重新導向 input outputpipe
: 指令組合技Vim 是一款歷史悠久,並由 Vi 發展出來的文字編輯器,也是 Git 預設的編輯器。
雖然目前已有許多文字編輯器能夠使用,例如:VS Code、Sublime Text 等,但很多人在使用 Git 過程中,可能會不小心進入這個編輯器,而這個編輯器的使用方式相較其他文字編輯器來說比較特別,需要透過特定指令才能達到輸入文字、存檔,甚至是離開的動作。
Vim 至少有超過五種以上的模式能夠應用,這邊只簡單介紹三種最常使用的模式:
:q
:不存檔,直接離開
:q!
:不存檔,強制離開(當有修改不想儲存時)
:w
:存檔,但不離開
:!w
:強制存檔,但不離開
:w {name}
:存檔並命名為 name
,但不離開
:wq
:存檔並離開
:!wq
:強制存檔並離開
還有許多未提及的指令及模式可自行查閱。
參考:
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
因為之後課程經常會使用 Command Line 來執行各種事情,在開始學習前,先將工具及基本環境建置完成。
這次總共安裝的工具為:
安裝 Git 的方法有幾種,我選擇的方法是按照 Git 官網 說明,利用 Homebrew 套件管理工具來進行安裝,Homebrew 安裝完畢後按照指示在終端機輸入 $ brew install git
,即完成 Git 安裝。
這邊要特別注意的是,如果安裝過程出現
git -bash: $: command not found
時,請記得把$
拿掉。
因為 Mac 本身內建的終端機樣式較少,所以可以自行斟酌是否要安裝其他 Terminal,安裝後的好處有:
這邊推薦使用的是 iTerm2,我的安裝方式是參考 超簡單!十分鐘打造漂亮又好用的 zsh command line 環境 來進行安裝,但因為文章比較舊,在安裝過程上有一些步驟需要更新,以下紀錄我所遇到的問題及解法:
在原文中安裝的步驟是寫:
# 先執行這行,才能用 homebrew 安裝字型。曾經執行過的人可以跳過這個指令
brew tap caskroom/fonts
# 安裝指令
brew cask install font-sourcecodepro-nerd-font
但實際運行 brew tap caskroom/fonts
這句時,卻會報錯出現 Error: caskroom/fonts was moved. Tap homebrew/cask-fonts instead.
解法:
brew tap caskroom/fonts
改成brew tap homebrew/cask-fonts
即可解決。
文中所提到若想安裝其他字型可輸入 brew cask search nerd
來搜尋,但此指令已不能再使用,需改為 brew search nerd
需先安裝完 oh-my-zsh 後,最後再安裝 zsh theme
我在安裝 zsh theme 時,卡了很久,一直不太懂編輯 ~/.zshrc
是什麼意思,後來才知道這是一個隱藏的檔案,需要先打開來,才能夠做設定。
開啟 ~/.zshrc
的方式有兩種:
Command ⌘ + Shift + .
,即可顯示出隱藏檔案 .zshrc
。open ~/.zshrc
,系統即會直接打開檔案。主題樣式可先到 Oh My Zsh Themes 選擇自己喜歡的主題,再打開 ~/.zshrc
,只要在 .zshrc 設定主題的那一行 ZSH_THEME="主題名稱"
修改成自己要的主題,就完成了。
以上問題皆排除後,即可完成基礎環境建置!
其他參考:
平常很少機會接觸終端機,這次在安裝的過程有點不知所措,一來是對終端機太不熟悉,二來是參考的文章較舊,有些指令已經失效,所以在執行過程時常搞不懂自己是在哪個環節出錯才會導致報錯。
還有一個讓腦袋打結的問題是,要安裝的東西太多了,搞不懂為什麼要安裝 Homebrew,zsh 和 oh-my-zsh 又是什麼東西?在執行的過程中因為是照著影片做,其實很多不解的問題,一直到把這篇筆記打完,才逐一去了解安裝的每個東西的特性是什麼及安裝的理由為何。
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy
因為之後課程經常會使用 Command Line 來執行各種事情,在開始學習前,先將工具及基本環境建置完成。
這次總共安裝的工具為:
安裝 Git 的方法有幾種,我選擇的方法是按照 Git 官網 說明,利用 Homebrew 套件管理工具來進行安裝,Homebrew 安裝完畢後按照指示在終端機輸入 $ brew install git
,即完成 Git 安裝。
這邊要特別注意的是,如果安裝過程出現
git -bash: $: command not found
時,請記得把$
拿掉。
因為 Mac 本身內建的終端機樣式較少,所以可以自行斟酌是否要安裝其他 Terminal,安裝後的好處有:
這邊推薦使用的是 iTerm2,我的安裝方式是參考 超簡單!十分鐘打造漂亮又好用的 zsh command line 環境 來進行安裝,但因為文章比較舊,在安裝過程上有一些步驟需要更新,以下紀錄我所遇到的問題及解法:
在原文中安裝的步驟是寫:
# 先執行這行,才能用 homebrew 安裝字型。曾經執行過的人可以跳過這個指令
brew tap caskroom/fonts
# 安裝指令
brew cask install font-sourcecodepro-nerd-font
但實際運行 brew tap caskroom/fonts
這句時,卻會報錯出現 Error: caskroom/fonts was moved. Tap homebrew/cask-fonts instead.
解法:
brew tap caskroom/fonts
改成brew tap homebrew/cask-fonts
即可解決。
文中所提到若想安裝其他字型可輸入 brew cask search nerd
來搜尋,但此指令已不能再使用,需改為 brew search nerd
需先安裝完 oh-my-zsh 後,最後再安裝 zsh theme
我在安裝 zsh theme 時,卡了很久,一直不太懂編輯 ~/.zshrc
是什麼意思,後來才知道這是一個隱藏的檔案,需要先打開來,才能夠做設定。
開啟 ~/.zshrc
的方式有兩種:
Command ⌘ + Shift + .
,即可顯示出隱藏檔案 .zshrc
。open ~/.zshrc
,系統即會直接打開檔案。主題樣式可先到 Oh My Zsh Themes 選擇自己喜歡的主題,再打開 ~/.zshrc
,只要在 .zshrc 設定主題的那一行 ZSH_THEME="主題名稱"
修改成自己要的主題,就完成了。
以上問題皆排除後,即可完成基礎環境建置!
其他參考:
平常很少機會接觸終端機,這次在安裝的過程有點不知所措,一來是對終端機太不熟悉,二來是參考的文章較舊,有些指令已經失效,所以在執行過程時常搞不懂自己是在哪個環節出錯才會導致報錯。
還有一個讓腦袋打結的問題是,要安裝的東西太多了,搞不懂為什麼要安裝 Homebrew,zsh 和 oh-my-zsh 又是什麼東西?在執行的過程中因為是照著影片做,其實很多不解的問題,一直到把這篇筆記打完,才逐一去了解安裝的每個東西的特性是什麼及安裝的理由為何。
(以上內容是我在 程式導師實驗計畫第四期 的學習紀錄,如有理解錯誤,歡迎糾正,謝謝:D)
資料來源:Lidemy