0%

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

條件關係推理

充分條件:

如果 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 的發生,但 A 可能不是唯一的,因此 A 不存在的時候我們無法推理出 B 一定是不存在,但 A 存在時一定會有 B 。

舉例:
如果 A,則一定 B 如果非 A,不一定非 B
如果 Tracy 很忙,則她一定接不到電話 如果 Tracy 不忙,也不一定能接電話。

比要條件:

如果非 A,則一定非 B;但如果 A,則不一定 B。

想要產生 B 的結果,A 是必須要存在的。例如,A 可能是產生 B 的原因之一。假如我們滿足了 A1,A2,A3,A4 的條件,則會導致 B 的產生,那至時上述的 A1,A2,A3,A4 都是 B 的必要條件。因為缺一不可,缺一個都不行,因為這些條件都是必要與必須存在的。但是,如果我們單看其中某一個條件,例如 A1 存在,我們不能斷定會導致 B 的出現,A2 存再也不能斷定會導致 B 會存在,所以一個必要條件是不夠的,必須要多個的必要條件同時有,才會導致 B 的存在。
每一個條件的缺一不可就是必要條件。
特點是,缺了它不行,有了它也不見得會產生結果。

舉例ㄧ:
如果非 A,則一定非 B 但如果 A,則不一定 B
如果 Tracy 沒吃飯,則她一定沒力氣 如果 Tracy 吃過飯,也不一定有力氣
如果努力,也不一定會成功 如果不努力,就一定不會成功。

努力是必要條件,從來不是充分條件。

練習

只有認識錯誤,才能改正錯誤
以下各項都準確的表達了上述斷定的含意,除了:
A:除非認識錯誤,否則不能改正錯誤。
B:除非不認識錯誤,那麼不能更改錯誤。
C:如果改正錯誤,說明已經認識錯誤。
D:認識錯誤,是改正錯誤的必不可少的條件。
E:只要認識錯誤,就一定會改正錯誤。*

解答:認識錯誤勢必要條件,但不是充分條件。

後記

聽了重複的解說,有時會越來越混淆,覺得如果是用程式的方式思考會比較簡單一點,就是 || or 和 && and 的不同,像是充分條件就會是:

1
2
3
4
if (a == 0 || a == 1) {
// 其中一個條件都可以讓B出現
console.log(b);
}

比要條件就會是:

1
2
3
4
if (a == 0 && a == 1) {
// 每個條件都要有才可以讓B出現
console.log(b);
}

練習題的敘述有點在操控文字,也因為用詞的關係很容易混淆,這讓我想到有些法律條文,明明意思很簡單,但條文的用字卻讓人無法輕易瞭解是一樣的道理啊。

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

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

矛盾關係推理

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

舉例ㄧ:

莎士比亞的「威尼斯商人」中寫到,富家女鲍細雅品貌雙全,許多人想娶她,他依照父親的遺囑設計了一個謎題讓求婚者來猜,猜對就嫁給其人。
鲍細雅準備三個盒子,每個盒子上都貼有一句話,三個盒子其中一個放了鲍細雅的肖像照片,三個盒子上面分別是:

  • 金盒子:肖像不在此盒中。
  • 銀盒子:肖像在鉛盒中。
  • 鉛盒子:肖像不在此盒中。
    鲍細雅說,這三個盒子上的話,最多只有一句是真的。

我們先來假設這三個盒子上的話都是假的,所以:

  • 金盒子:肖像不在此盒中。 假的,所以肖像在此盒中。
  • 銀盒子:肖像在鉛盒中。 假的,所以肖像不在鉛盒中
  • 鉛盒子:肖像不在此盒中。假的,所以肖像在此盒中。

但是第二個銀盒子的假推敲結果是肖像不在鉛盒中。所以鉛盒子的話是真的,那麼肖像就最有可能在金盒子裡。

因為銀盒子和鉛盒子的話是互相矛盾的,一對一錯,一正一負。由此猜出這兩個盒子的話一定有一個真,有一個假,所以就被排除了,那剩下的就是金盒子了。

所以我們所說的假設三句話都是謊話也無法成立,所以就如同鲍細雅所說,只有一句是真的。

接著我們假設三個盒子的話都是真話,來推理:

  • 金盒子:肖像不在此盒中。 真的,所以肖像不在此盒中。
  • 銀盒子:肖像在鉛盒中。 真的,所以肖像在鉛盒中
  • 鉛盒子:肖像不在此盒中。真的,所以肖像不在此盒中。

銀盒子和鉛盒子的話仍是互相矛盾的,所以銀和鉛盒子都被排除。

這就是典型的矛盾關係推理。

舉例二:

珠寶店失竊,抓到了四個嫌疑犯,四人口供如下:

  • 甲:犯案的是丙
  • 乙:丁是犯案者
  • 丙:如果我作案,那麼丁是主犯
  • 丁:作案的不是我

四個口供中,只有一個是假的。如果上面的口供都是真的,那麼以下哪一項才是真的?

A: 說假話的是甲,作案的是乙。
B: 說假話的是丁,作案的是丙和丁。
C: 說假話的是乙,作案的是丙。
D: 說假話的是丙,作案的是丙。
E: 說假話的是甲,作案的是甲。

從四個人所說的話分析,先找出有兩相矛盾的「乙:丁是犯案者」和「丁:作案的不是我」,這兩者的話互相矛盾,所以會有一個人說假話,題目提示「口供中,只有一個是假的」,所以不是乙就是丁說假話。

我們先假設丁說的是假話,那麼丁說的是真話,因為只有一個是假話,其他兩個自然就是真話了,然後再來推敲其他三個說的都是真話的話,他們是指向誰作案。

「甲:犯案的是丙」、「乙:丁是犯案者」、「丙:如果我作案,那麼丁是主犯」推敲下來,就知道丁和丙都犯案。

後記

邏輯還真不是件容易理解的事情,要一步步推敲與驗證,現在想想好險自己不是辦案人員不然應該會很燒腦,而對於用矛盾關係推理的邏輯,居然可以輕易找出答案真的覺得好不可思議啊!

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

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

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

以下為筆記內容:

邏輯

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

類比

類比訓練: 父母說:你像條寄生蟲 你:懶、不能獨立生活(靠父母)、靠父母供給一切
寄生蟲:懶、不能獨立生存、靠宿主提供一切。 這樣類比之下特點都一樣,所以說「你像條寄生蟲」是成立的。

類比能力就是學習能力。

如何鍛鍊類比?

同質物品比較:例如兩個男人的穿著(外觀)
異質物品比較:例如玻璃與鑽石(內在) 關於變化的比較

演繹推理

從一般性的原理出發,推出某個特殊情況下的結論。

三段論:

  • M 是 P,大前提
  • S 是 M,小前提
  • S 是 P,結論
舉例ㄧ:
  • 所有的金屬都能導電:大前提
  • 銅是金屬:小前提
  • 同可以導電:結論
舉例二:
  • 所有的奇數都不能被 2 整除:大前提
  • 2 的 32 次方+1 是奇數:小前提
  • 2 的 32 次方+1 不能被 2 整除:結論
舉例三:
  • 三角函式都是週期函式:大前提
  • tana 三角函式:小前提
  • tana 是週期函式:結論

以程式的面向來舉例:

舉例ㄧ:
  • 大前提:document.write(“我是天才”); 這句語法可以在 body 標籤中增加刮號中的字串
  • 小前提:”<button>按鈕</button>” 是字串
  • 結論:因此 document.write(“”); 也可以在 body 中增加一個 button 的標籤
舉例二:
  • 大前提:所有增加到 body 中的標籤都會被瀏覽器解析
  • 小前提:<button>按鈕</button> 是一個標籤
  • button 標籤會被瀏覽器解析唯一個按鈕
最後結論:

透過 document.write(“…”); 可以控制頁面的內容。

這就是以類比的方式去舉一反三的得知,相同性質會有特性的方法。

而類比是最能夠讓人理解較複雜的解說工具,尤其在解說特別抽象的概念時,類比通常會使用日常的事物來比喻,也因為是日常的事物比喻,所以更能容易理解其概念。

有時候在設計網站的時候,如果多一些輕量小技巧,就可以增加網站的質感,此篇記錄有可能會用到的一些 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 提供了多個方法與屬性,讓我們可以在「響應式設計」上更彈性,以下是幾個常用的屬性。

Read more »

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

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

Read more »

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

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

Lighthouse 是什麼?有什麼用途?

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

Read more »

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

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

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

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

Read more »

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

1
2
3
4
5
6
7
function fun() {
console.log('我是fun函式');
console.log(this);
}

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

剛開始接觸程式時,常常把funfun()搞混,其實這兩者是不同的,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);

最近在學習的時候,常常遇到問題卻不知怎麼問人的窘狀,也發現自己常常把問題「複雜化」,而這個後果就是會讓自己如鬼打牆般轉不出來。程式設計最吸引我的一部份就是程式的結果或許一樣,但這中間的運作卻是多樣的,每次在看到其他人解出題來時,總會對於解題的方式感到讚嘆,自己不知要練多久才有那個程度。而也在透過「試著讀懂」其他人的程式碼的過程中又學習到許多。

在使用 Vue.js 的v-for時,需要使用v-bind:key='uniqueValue'去綁定一個唯一值,這樣可以讓 Vue 知道哪一個元素有變動而單一渲染,但是有時拿到的資料並沒有「唯一」值,如果使用陣列的索引值(index)當 key 的唯一值,會有因陣列的變動而索引值被改動的問題。如果後端給的資料沒有在每一筆資料裡給各唯一值,那麼只好自己生成,但是怎麼在 JSON 格式裡為每一個陣列裡的物間自動加上一對「鍵與唯一值」例如:

Read more »