Int's blog

Javascript: 算數運算子

發表於 2022-06-15 更新於 2022-06-21 分類於 js-operator

算術運算子，簡單來說就是加減乘除。不過除了這幾個之外，還有其他可以使用，像次方之類的，這篇就會列出所有js中的算術運算子。

加法: +
- 就跟數學中的加法一樣
減法: -
- 就跟數學中的減法一樣
乘法: *
- 就跟數學中的乘法一樣
取商數: /
- js中的除法分成兩種，取商數和取餘數，這個就會回傳商數。
取餘數: %
- 這個不念percent，要念mod。會回傳除法的餘數，其實就是數學中的mod運算。
增加: ++
- 一元運算子，對變數做增加1。比如說
  1
  2
  3
  let a = 0;
  a++;
  console.log(a); //執行結果: 1

減少: –

一元運算子，對變數做減少1。

1
2
3

let a = 0;
a--;
console.log(a); //執行結果: -1

取負數: -
- 一元運算子，我自己覺得跟減法很像，不過前面的減法是二元運算子。
  1
  2
  let a = 1;
  console.log(-a); //執行結果: -1
加號: +
- 一元運算子，可以把不是數字的運算元改成數字。
  1
  2
  let a = true;
  console.log(+true); //執行結果: 1
指數運算子: **
- 用來運算指數的 a ** b 就是算a的b次方。
  1
  console.log(2**3); //執行結果: 8

[註] 一元運算子表示只需要一個運算元，二元表示要兩個運算元，三元表示三個，最多到三元。上述沒有特別標註的都是二元運算子，而三元之後會另外寫一篇。

Javascript: 比較運算子

發表於 2022-06-14 更新於 2022-06-21 分類於 js-operator

在賦值運算子篇中有提到常常被新手搞混的「==」，這篇就會來介紹和 == 同為比較運算子的成員。

大於: >
- 判斷左式是否大於右式，與數學中的大於無異。
小於: <
- 判斷左式是否小於右式，與數學中的小於無異。
等於: ==
- 判斷左右兩邊是否相等，相等回傳true，不相等回傳false，就和數學中的相等是一樣的，值得注意的是，因為js是弱型別語言，所以在使用時他會先幫你強制轉型，所以可以用來比較數字和字串，比如說:
  1
  console.lo(1 == '1'); //執行結果: true
  很酷吧，明明兩個型態不一樣，但內容一樣比較結果就是相等。
嚴格等於: ===
- 那如果我不想要他幫我強制轉型怎麼辦?我就是要判斷他是不是不同型別啊?那沒問題喔，js有提供另一種等於，叫做嚴格等於，就跟其他強型別語言中的 == 一樣，型別不同就會回傳false。
  1
  console.log(1 == '1');//執行結果: false
大於等於: >=
- 判斷左式是否大於等於右式，這裡也是不嚴格。
小於等於: <=
- 判斷左式是否小於等於右式，這裡也是不嚴格。
不等於: !=
- 和 == 類似，這是比較左右兩式是否不等，同樣也是不嚴格比較，所以數字和字串相比可能會得到與你預期不同的結果。
  1
  console.log(1 != '1');//執行結果: false
嚴格不等於: !==
- 你如果希望上面那段code得到true的結果就可以使用這個。
  1
  console.log(1 != '1');//執行結果: true
  這些就是全部的比較運算子，第一次接觸的js的時候常常因為不嚴格等於而遇到bug，所以大家在寫的時候最好多注意一下，不要犯了跟我一樣的錯。

Javascript: bit operator

發表於 2022-06-13 更新於 2022-06-21 分類於 js-operator

我們在前幾篇有介紹到邏輯運算子，這篇會來介紹新手很容易與邏輯運算子搞錯的位元運算子，其實我之前也有介紹過C的位元運算子，不過javascript能用的指令比C多了一些，就讓我們來看一下吧。

and: &
- 兩個位元都為1就設為1
or: |
- 其中一個位元為1就設為1
xor: ^
- 兩個位元不同就設為1
not: ~
- 位元為0設為1，位元為1設為0
zero fill left shift: <<
- 全部位元往左移動，空著的地方補0
signed right shift: >>
- 全部位元往右移動，但最右邊的會被推到最左邊(循環的概念)
zero fill right shift: >>>
- 全部位元往右移動，空著的地方補0

與C最不同的是，js提供了signed right shift，讓我們不用自己寫(話說前幾天考試才剛考如何用C寫出signed right shift XD)，算是相當方便，不過其他的部分就大同小異，重要的還是要注意這是針對位元來做邏輯運算，而不是對整個資料。

CSS: Reset

發表於 2022-06-12

在各大瀏覽器中，其實他們都有自己預設的css style，所以就算你不下css，你的HTML用瀏覽器打開時還是會有一些基本的css設定，但這些設定會因瀏覽器的不同而不同，為了讓你的網頁在不同瀏覽器都能有相同的css，就必須使用到css reset。

要使用css reset很簡單，最常見的做法就是去google搜尋css reset，就會有一堆網站跑出來給你複製code，比如說這個，你就可以將程式碼複製貼上到你的專案的css檔，這樣就完成css reset了。

我印象中還有其他方法，不過我目前只學到這個，等以後有學到其他的再來分享。

Javascript: 陣列函式(下)

發表於 2022-06-10 更新於 2022-06-15

我們在上篇介紹了forEach、filter、find、findIndex和map，這篇會來介紹其他常用的陣列函式。

slice():
- slice可以從給定的範圍複製一份新的array。
  1
  2
  3
  4
  5
  6
  let arr = [1, 2, 3, 4, 5];
  let newArr1 = arr.slice(2);
  let newArr2 = arr.slice(2, 4);
  
  console.log(newArr1);//執行結果:[3, 4, 5]
  console.log(newArr2);//執行結果:[3, 4]
  帶入slice中的第一個參數代表要從哪個索引值開始複製，第二個代表結束的索引值，不代第二個預設會是複製到array結束，如果帶入負數會從最後一個元素開始往前推，比如說-3就是倒數第三個。這裡要注意，複製範圍是含頭不含尾，所以可以看到newArr2只複製到索引值3的元素。

splice():

這個函式跟slice只差了一個字，導致我常常記錯。與slice不同，splice是用來插入或刪除元素，比較像是push跟pop的用法。

let arr = [1, 2, 3];
arr.splice(0, 1);
console.log(arr);//執行結果:[2, 3];

arr.splice(0, 0, 5);
console.log(arr);//執行結果:[5, 2, 3];

arr.splice(0, 1, 1);
console.log(arr);//執行結果:[1, 2, 3];

splice第一個參數代表開始的索引值，這裡跟slice一樣，第二個代表要移動幾步，比如說以執行結果1來說，我從索引值0移動了一步，移到了索引值1，接著用第三個參數的值取代掉移動到的前一個元素(一樣含頭不含尾的概念)，而結果1沒有第三個參數，所以執行出來後arr只剩下[2, 3]。雖然說可以做到刪除插入元素的結果，但我個人感覺整體邏輯是取代就是，拿執行結果2來說，不移動所以沒東西可以取代，就直接插入5這樣。最後，跟slice一樣，參數可以代負數，負數就代表從最後面開始算。

sort():

這個從名字就可以看出來是排序用的。

1
2
3

let arr = [1, 5, 6, 8, 4, 3];
arr.sort();
console.log(arr);//執行結果:[1, 3, 4, 5, 6, 8]

直接使用的話是由小排到大，如果是字串就按照ascii code來排，比較特別的是sort可以寫compare function來自訂排序方式。

 let arr = [2, 5, 1, 0];
 arr.sort(compare(b, a) {
   if ( a < b) {
     return -1;
   }
   if ( a > b) {
     return 1;
   }
   // a 必須等於 b
   return 0;
});
 
 console.log(arr); //執行結果:[5, 2, 1, 0]

a, b代表了陣列中的元素，他會依序去比較你帶入的參數，小於回傳-1，大於回傳+1，等於回傳0。像這裡我就把它改成由大排到小。

本次陣列函式介紹就差不多到這邊，雖然沒有列出所有的函式，但我認為我列出的已經是相對常用的了，希望大家會喜歡。

Javascript: 陣列函式(上)

發表於 2022-06-09 更新於 2022-06-15

我們在這篇文有提到陣列的基本性質介紹與簡單的賦值取值操作，這篇會來介紹可以用在陣列上的一些常用函式。

forEach():
- forEach有點像for迴圈，他會遍歷每個元素，用法如下。
  1
  2
  3
  4
  5
  6
  7
  8
  9
  let arr = [1, 2, 3];
  arr.forEach(function(item, index, arr){
  console.log(item);
  })
  /*執行結果為:
  1
  2
  3
  */
  有幾個特別的地方要注意，首先，括弧內要放入一個函式，再來，函式傳入的參數至少要有一個item，但後面的index，array可以視情況加，而他們分別代表當前元素的值、索引值與陣列本身，值得提醒的一點，item、index、array這三個參數名稱不是固定的，你可以改成a、b、c也沒差，但還是建議用方便辨識的方法來命名。
filter():
- 可以根據給的條件，回傳符合條件的元素陣列。
  1
  2
  3
  4
  5
  6
  7
  let arr = [1, 2, 3];
  
  let newArr = arr.filter(function(item){
  return item > 1;
  })
  
  console.log(newArr); //執行結果: [2, 3]
  以這段程式碼來說，return後就是我所設的條件，其中傳入的function與item就和forEach一樣。與forEach不同的是，filter不會修改到原本的arr，而是會建一個新的array，所以我才會又宣告一個newArr來接。
find():
- find跟filter很像，都會去尋找符合條件的元素並回傳，但find只會找第一個符合條件的，所以他回傳的是元素不是陣列。
  1
  2
  3
  4
  5
  6
  7
  8
  let arr = [1, 2, 3];
  
  let a = arr.find(function(item){
  return item > 1;
  })
  
  console.log(a); //執行結果: 2
findIndex():
- 從名稱可以看出來，這是用來找索引值的，而跟find相同，只會找符合的第一個元素。
  1
  2
  3
  4
  5
  6
  7
  8
  let arr = [1, 2, 3];
  
  let aIndex = arr.find(function(item){
  return item > 1;
  })
  
  console.log(aIndex); //執行結果: 1
  第一筆符合的是2，而2的index為1，所以結果為1。
map():
- map和forEach很像，唯一不同的是他會回傳新陣列。
  1
  2
  3
  4
  5
  6
  7
  let arr = [1, 2, 3];
  
  let newArr = arr.map(function(item){
  return item > 1;
  })
  
  console.log(newArr); //執行結果: [false, true, true]
  map遍歷了arr中每個元素，並根據條件做出判斷，1沒有小於1所以是false，2、3都大於1所以是true。
除了forEahc之外，其他三個都會回傳一個新的陣列，所以要記得加上return才不會出錯，下篇我會來介紹slice、splice等等。

CSS: 區塊元素與行內元素

發表於 2022-06-08 更新於 2022-06-15

在css中有許多元素，今天來介紹最常見的兩種元素: 區塊元素與行內元素。

區塊元素

語法

1	display: block;

想確認一個標籤預設是不是區塊元素，可以透過chrome瀏覽器的開發者工具觀看。如下圖以h1為例，找到user agent stylesheet就可以看到h1裡面有一行 display: block; 這代表了h1為區塊元素。

特性

會盡量佔滿整個版面:
如下圖所示，我寫了兩個h1標籤，並為他們的背景加上顏色，可以看到幾乎佔滿了整個版面，有些留白的部分示我為了方便觀看加上的margin(上下各2px)
會另起一行:
同上圖，我寫了兩個h1，但他們並沒有排在一起，而是各佔了一行

行內元素

語法

1	display: inline;

特性

常用於p段落內:
和區塊元素不同，行內元素會如下圖所示，這裡我使用了兩個a標籤，可以看到他跟h1不同，並不會另起一行，也不會佔滿整個版面，所以很常被拿來在p段落裡面使用。
無法設定寬高:
不論你增加多少寬高給行內元素，他都不會有任何改變，如果希望行內元素能夠有寬高，就要將它改成區塊元素，可以用display:block;來達成。

這篇介紹差不多到這，還有其他的常用元素，以後也會找機會介紹。

Javascipt: 陣列

發表於 2022-06-07 更新於 2022-06-15

在資料型態那篇有介紹到array這個型別，這篇就會詳細介紹array的基本使用方法與概念。

宣告

陣列宣告會用中括號來表示，而陣列的值會放在中括號中，陣列的值可以是其他資料型態，但是每個值都必須是相同型態。

// 空陣列
let arr1 = [];

// 數字陣列
let arr2 = [1, 2 ,3, 10];

//字串陣列
let arr3 = ["aaa", "bbb", "ccc"];

陣列的縮寫常會使用arr

取值

陣列有所謂的索引值，可以透過索引值取得對應的值，而索引值是從0開始，寫法如下

let arr = [100, 520, 891];

console.log(arr[0]); //執行結果: 100
console.log(arr[1]); //執行結果: 520
console.log(arr[2]); //執行結果: 891

賦值

如果想要更改arr中的內容，寫法也跟取值一樣，並使用賦值運算子。

let arr = [800, 900, 1000];

arr[0] = 1;
console.log(arr[0]); //執行結果: 1
console.log(arr); //執行結果: [1, 900, 1000]

可以看到arr第一個值(索引值0)變成了1。

新增

前面都只有針對已經有的值做處理，那如果我們想要增加一個元素進去該怎麼做?

push():

使用push可以在陣列最後面新增元素

1
2
3

let arr = [720, 800, 100];
arr.push(500);
console.log(arr); //執行結果: [720, 800, 100, 500]

unshift()”

使用unshift可以在陣列最前面新增元素

1
2
3

let arr = [720, 800 ,100];
arr.unshift(500);
console.log(arr); //執行結果: [500, 720, 800, 100]

刪除

有了新增，自然也會有刪除

pop():

與push相對，pop可以從陣列最後面刪除元素

1
2
3

let arr = [720, 800, 100];
arr.pop();
console.log(arr); //執行結果: [720, 800]

shift():

與unshift()相對，shift可以從最前面刪除元素

1
2
3

let arr = [720, 800, 100];
arr.shift();
console.log(arr); //執行結果: [800, 100]

取得長度

想取得當前陣列長度(意即有幾個元素)可以使用array.length。

1
2
3

let arr = [1, 2, 3];

console.log(arr.length) //執行結果: 3

以上述程式碼來看，我宣告的arr使有三個元素的陣列，所以arr.length的值就會是3。

基本操作就介紹到這邊，其他進階的array function會留到下一篇做講解。

Javascript: if判斷式

發表於 2022-06-06 更新於 2022-06-15

在javascript中，可以透過if判斷式來進行條件判斷，比如說判斷一個人年紀是否超過18，超過18才能買菸買酒。

語法

1
2
3

if(statement){
	/*your code...*/
}

以前面的例子來說就可以寫成:

1
2
3

if(age >= 18){
	console.log('可以買菸買酒');
}

else 判斷式

如果想對if以外的條件也做出處理，可以使用else

語法

if(statement){
	/*your code..*/
}
else{
	/*your code...*/
}

當條件符合if中的判斷式時，會執行if大括弧中的code，不符合會跳過if大括弧，執行else大括弧中的code。

以前面的例子來說:

if(age > 18){
	console.log('可以買菸買酒');
}
else{
	console.log('你未成年，不能買菸買酒');
}

if-else 判斷式

如果想要同時判斷多個條件，可以用if-else

語法

if(statement){
	/*your code...*/
}
else if(statement){
	/*your code...*/
}
else{
	/*your code...*/
}

我們用上面的例子，但這次多個條件判斷是否大於20歲來看看

if(age > 20){
	console.log('民法成年')
}
else if(age > 18){
	console.log('刑法成年')
    
}
else{
	console.log('未成年')
}

注意! if-else可以有很多個，但if跟else只能有一個，if只能在最前，else只能在最後，if-else 和 else 可以沒有。

if判斷式算是非常基本但是卻非常常被使用到的語法，紀錄下來和大家分享。

Javascript: 賦值運算子

發表於 2022-06-05 更新於 2022-06-21 分類於 js-operator

在javascript中，變數宣告後要給予變數值才能做進一步的運算或處理，這篇會來簡單介紹能夠給予變數值的賦值運算子。

語法

1	let a = 1;

沒錯，賦值運算子就是那個等於，上面這段程式碼的意思是把數字1存到a變數裡面，看起來與數學中的等於很相似，但是! 這也是新手常常會搞錯的地方，javascript中的等於要寫成「==」或是「===」。

很重要，js一個等號不是數學中的相等，一個等號是把值(數字、字串、陣列等)賦予給變數。

即使是老手偶爾也會打錯，所以要記得比較時不要用錯用成一個等號。