這是在網路上無意發現的邏輯思維訓練課程，看時所做的筆記。

條件關係推理

充分條件：

如果 A，則一定 B；如果非 A，不一定非 B。

A 是導致 B 的原因，只要 A 出現 B 就一定會出現。這時 A 就是 B 的充分條件。只要滿足 A，B 就一定會出現。A 和 B 之監視一個必然的因果關係
但是如果這時是非 A，也就是 A 如果沒有出現，也不一定非 B，意思是說我們沒有辦法透過非 A 推理出非 B。道理也就是說產生 B 的原因可能會很多，不見得只有 A，可能還有其他。如果沒有 A 也還有其他的原因，而導致 B 的產生。因此當 A 不存在的時候我們不可以賭定說 B 也不會存在，因為產生 B 的原因有很多，A 只是一個原因，所以 A 是 B 的充分條件。

這是在網路上無意發現的邏輯思維訓練課程，看時所做的筆記。

類比只是邏輯思維的一部分，後續的邏輯推理似乎常會出現在徵探或推理小說的情節中，以前常看日本的推理小說，但總是隨著書中小說重要人物的推演，自己心裡雖然會猜測，但也大多是憑感覺，其實應該自己也有條理的推理，才真的能夠訓練自己的推理和邏輯能力啊！

矛盾關係推理

矛盾關係推理就是利用矛盾關係的形式，來找出正確的答案。兩者之間像是 A 命題和 B 命題不能同時成立，例如像是小狗睡著了 VS 小狗沒睡著，互相矛盾，怎可能小狗睡著，同時又沒睡著？
以上兩個是「對立」的存在，也就不可能同時存在兩者。所以會是「一真一假」或是「一對一錯」。

這是在網路上無意發現的邏輯思維訓練課程，看時所做的筆記。

一直以為自己的邏輯不好，其實這句話本身就很不合邏輯，因為我們怎麼知道我們的邏輯「是不好的」？如何去判定邏輯不好？邏輯是什麼？透過這幾支影片的理解、推敲，才知道原來邏輯是可以訓練的，也因為可以訓練，所以「以為自己的邏輯不好」也不是一定的或永久的，還是可以透過方法，把自己覺得不夠好的方式學習進步。

的確從學程式以來，發現自己想事情的方是有些改變，好像比較可以輕易的去推敲或理解一些事。

以下為筆記內容：

邏輯

邏輯是可以訓練的。
智商包含：記憶力、類比能力、想像力。
智商卓越的人表現在：記憶力、學習能力、分析能力。

有時候在設計網站的時候，如果多一些輕量小技巧，就可以增加網站的質感，此篇記錄有可能會用到的一些 CSS 小技巧，來幫忙點綴網頁。

網頁上文字選取時的反白顏色

一般網頁上的文字在選取時預設是淺藍色的底與白色的字，我們可已透過 CSS 的選擇器來設定和網站風格相搭配的顏色。如果要針對某個樣式來設定，也是可以的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

::selection {
background: #76b852;
color: #fff;
}
::-moz-selection {
background: #76b852;
color: #fff;
}
img::selection {
background: transparent;
}
img::-moz-selection {
background: transparent;
}

以此記錄，將來會陸續增加…。

RWD (responsive web design）中文為「響應式設計」簡單來說就是網頁會依照我們使用的載具(電腦、平版、手機)的螢幕大小與螢幕的像素密度不同，而顯示指定的圖片圖像。
而針對 RWD 中的網頁圖像的處理，我們稱為是響應式圖片(responsive image)，使用 JS 或是 CSS 都可以操控要顯示的圖像，但使用具有語義性的 HTML 方法與屬性，可以讓瀏覽器原生就支援這個功能。

如果只是把一張圖片以<img>包起來，如<img src="paris.png">，那麼在手機或是在桌上型電腦上瀏覽時都會出現「同一張」paris.png的圖片。使用同意張圖片，卻要給不同的載據顯示，可能造成的問題會是在大螢幕瀏覽這張圖時解析度可能不夠、在手機上瀏覽這張圖時，會因為過大而顯示很慢。這時依照載具的條件不同，來載入相對應的圖像就變得很重要。

HTML 提供了多個方法與屬性，讓我們可以在「響應式設計」上更彈性，以下是幾個常用的屬性。

title: HTML figure 標籤的用法
date: 2020-11-02 00:42:24
categories: ‘HTML’
tags: [‘HTML’]
—#

通常我們在處理許多條列式的內容時，常會使用 List 的方式去排列文字或圖形，但如果每一個 <li> 的內容太過繁瑣，就會顯的有些零散，尤其是含有圖片或是影片的內容列表，會包含圖片的標題、圖說、作者介紹等等零碎資訊，這個時候 <figure> 便可派上用場。

<figure> 是 HTML5 增加的語義化標籤。figure 的英文解釋可以是數字、人物、圖形甚至輪廓，但在 HTML 裡，個人偏向解釋為「含有資訊的區塊輪廓」，就像我們在美術館觀賞一幅畫作，旁邊總會有一個解說牌，說明畫作的標題、作者、尺寸、年份與媒材，我們可以把畫作和解說牌當成是一組的 figure，而解說牌的標題當成是 <figure> 的子元素 <figcaption> ，這也很像我們在閱讀雜誌時，圖片總是會有圖說，來更詳細的解說圖片。

網站載入的速度不只會影響使用者體驗，也會影響 SEO，因為網頁載入的速度也是 Google 搜尋排序的一個指標，進而影響排名，也因為載入速度同時影響網站的排名和使用者體驗，所以更不該忽視。

但怎麼知道我們的網站效能？這個有一個小小燈塔圖形的 Chrome 外掛工具，就是一個超好用的網站速度優化工具：SEO Lighthouse 它可以幫上我們！

Lighthouse 是什麼？有什麼用途？

燈塔工具(Lighthouse)是 Google Chrome 的擴充應用程式，是一個網路開發者(Web developer)的工具，主要功能是針對網頁的性能做詳細與全面的分析(包含網頁載入速度)，並產生分析報告，報告上會有詳細的分析結果與如何優化改善的建議，以及每個頁面的各種數據和指標的表現。

有時候在學習的時候，最怕就是遇到一個問題越解越混淆的狀況，原本只是一個小小的問題，卻越發不可收拾，努力了幾個小時決定上網問人，好險都能在好心人的幫助下，釐清自己的一些觀念。

今天試著接 API ，對於教學範例的 API 都是結構較於單純的 JSON ，自己上網找到想接的巴黎開放數據，資料結構卻很複雜，包了好幾層物件、陣列，在一一抓出來後在迴圈的使用上又有點生疏，然後在休息的時候找到一個範例，剛好講到處理 JSON 的一些方法，然後就照著範例丟到瀏覽器的開發工具，然後無限迴圈就開始了。

先來釐清幾件事：
MDN JSON.parse() 方法把會把一個 JSON 字串轉換成 JavaScript 的數值或是物件。

MDN JSON.stringify() 方法將一個 JavaScript 物件或值轉換為 JSON 字串

throw -> 扔出

前幾天和 Mentor 討論程式時，他使用了 throw new Error 來測試，覺得學到新的東西了，所以來記錄一下。
通常我們在捕捉錯誤時會使用try, catch的方式，但如果使用throw new Error是製造了一個錯誤，然後試著自己捕捉錯誤的方法。

throw new Error(‘error message’);
這是實例化寫法，是JavaScript規範所推崇的的寫法。需要注意的是 throw 拋出去的可以是單純的字串，也可以是物件，也就是說會有key 和 value。也因此如果在throw後面加字串就不能依物件的屬性名稱來捕捉錯誤，而會單純捕捉到我們定義的字串錯誤訊息。

1
2
3
4
5
6
7
8
9
10
11
12

// try, catch, finally
try {
  console.log('1. try 從這裡開始跑');
  // 在這裡故意放個不是語法的單字
  testerror;
  console.log('2. try 的結尾但不會跑到這裡');
} catch(error){
  console.log('3. 錯誤發生', error.stack); // .stack 會印出出錯的位置
} finally {
  console.log('4.無論如何會跑到這裡');
}
console.log('5. 程式最後面的位置');

執行結果

1
2
3
4

1. try 從這裡開始跑
VM10:7 3. 錯誤發生 ReferenceError: testerror is not defined at <anonymous>:4:3
VM10:9 4.無論如何會跑到這裡
VM10:11 5. 程式最後面的位置

假設我們有個物件，當我們要檢查這個物件是不是存在某個屬性存不存在時，就可以throw來自定義錯誤訊息

1
2
3
4
5
6
7
8
9
10
11
12

let json = '{ "age" : 42}'
try {
  const user = JSON.parse(json) // 轉成正確JSON格式
  if(!user.name) {
    throw new SyntaxError('資料不齊全：沒有name')
  }
  console.log(user.name); // 如果有就印出來
} catch(error){
  console.log('JSON error: ',error.message );
  console.log('JSON error: ',error.name ); // 印出錯誤的名稱會是 SyntaxError
}
// JSON error:  資料不齊全：沒有name

https://www.youtube.com/watch?v=cFTFtuEQ-10

使用 throw 創建一個錯誤實例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 拋出的地方 創建錯誤實例
function testNumber(Number) {
  try {
    // doSomething
  } catch(error) {
      throw new Error('not Number')
  }
}
// 捕獲此錯誤
try {
    testNumber(Number)
} catch(error) {
    error.message === 'not Number'
    // doSomething
    console.log('error.message :', error.message)
}

所以捕獲的時候捕獲到的也是一個對象，這樣一個對象與parse excel failed字符串比較顯然是不正確的。
那麼該怎麼去捕獲這個error message呢？
通過對《JavaScript高級程序設計(第三版) 》對於拋出錯誤的學習我們可以了解到：

在拋出的Error對像中有一個被廣泛支持的屬性：name、message。
name：用來存儲錯誤的類型，在ECMA-262定義了七種錯誤類型：Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。詳情見：try-catch語句
message：用來存儲error message，就是你new Error()時候穿進去的參數
到此，上面的問題應迎刃而解。

throw new Error(); 這是創建一個錯誤實例，創造一個錯誤類型拋出。
throw error 是拋出錯誤。

函式也是一個物件，所以也會有它的方法，需要以物件的方式調用，

1
2
3
4
5
6
7

function fun() {
  console.log('我是fun函式');
  console.log(this);
}

fun.call(); // 我是fun函式
fun.apply(); // 我是fun函式

剛開始接觸程式時，常常把fun和fun()搞混，其實這兩者是不同的，fun指的是這個函式本身，函式在 Javascript 裡是物件型別，所以fun也是一個物件。fun()指的是呼叫這個函式。

使用函式的方法call()和apply()都必須以物件的方式調用，且會執行此函式。當我們使用fun(),fun.call()和fun.apply()時，都會執行fun()此函式，但有什麼不同？
使用函式的call()和apply()方法可修改 this，因為可以將一個物件，指定為這兩個方法的第一個參數，如果沒使用這兩個方法，單純執行函式，函式的 this 是 window。

1
2
3
4
5
6
7
8
9

function fun() {
  console.log(this);
}

let obj = {};

fun(); // Window
fun.call(obj); // {}
fun.apply(obj); // {}

1
2
3
4
5
6
7
8
9
10
11
12

function fun(a, b) {
  console.log('a = ' + a);
  console.log('b = ' + b);
  //alert(this);
}

var obj = {
  name: 'obj',
  sayName: function () {
    alert(this.name);
  },
};

call()和 apply()

• 這兩個方法都是函式物件的方法，需要通過函式物件來調用
• 當對函式調用 call()和 apply()都會調用函式執行
• 在調用 call()和 apply()可以將一個物件指定為第一個參數
  此時這個物件將會成為函式執行時的 this
• call()方法可以將實參在物件之後依次傳遞
• apply()方法需要將實參封裝到一個陣列中統一傳遞

this 的情況：

• 以函式形式呼叫時，this 永遠都是 window
• 以方法的形式調用時，this 是調用方法的物件
• 以構造函式的形式調用時，this 是新創建的那個物件
• 使用 call 和 apply 調用時，this 是指定的那個物件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//fun.call(obj,2,3);
fun.apply(obj, [2, 3]);

var obj2 = {
  name: 'obj2',
};

/*fun.apply();
	fun.call();
	fun();*/

//fun.call(obj);
//fun.apply(obj);

//fun();

//obj.sayName.apply(obj2);

這題的重點是 add()出現兩次！雖然程式是一行行跑的，但是因為 JS 的 hoisting 特色，所以所有的函式都會優先被提升，而在提升的規則裡，如果有重複的變數或函式，後面的會覆蓋前面的，所以第一個add()基本上是無效的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var x = 1,
var y = (z = 0);

function add(n) {
  return (n = n + 1);
}

y = add(x); // 2

function add(n) {
  return (n = n + 3);
}

z = add(x); // 4

arguments所依據的是實參而不是形參。

1
2
3
4
5
6
7

// A
function foo(x) {
  console.log(arguments);
  return x;
}

foo(1, 2, 3, 4, 5);

1
2
3
4
5
6
7
8

// B
(function foo(x) {
  console.log(arguments);
  return x;
})(1, 2, 3, 4, 5;)


foo(1, 2, 3, 4, 5);