CS50 讀書會討論

{%hackmd @e_Me9JgsS1y8VahM1nF7wg/BJjvy76jn %} #####  ######  [c 語言線上編譯]: https://www.onlinegdb.com/online_c_compiler [作業]: https://cs50.harvard.edu/x/2023/labs/1/ [cs50.h]:https://vscode.dev/github/cs50/libcs50/blob/main/src/cs50.h [cs50 doc]:https://manual.cs50.io/ ######  [第 0 週：Scratch 圖形編程]:https://www.bilibili.com/video/BV1DA411Y7jk?p=1 [UTF-8 - 1]:https://roykwokcode.medium.com/unicode-%E8%88%87-utf-8-%E7%9A%84%E9%97%9C%E4%BF%82-1c9b7a0b7c29 [UTF-8 - 2]:https://davidhu0903ex3.pixnet.net/blog/post/468848723-utf-8-%E7%B7%A8%E7%A2%BC%E6%A0%BC%E5%BC%8F%E4%B9%8B%E7%B0%A1%E5%96%AE%E8%AC%9B%E8%A7%A3 [字符轉換器]:https://www.rapidtables.org/zh-TW/convert/number/hex-to-ascii.html [進位轉換器]:https://dec.0123456789.tw/ ######  [第 1 週：C 语言]:https://www.bilibili.com/video/BV1DA411Y7jk?p=2 [CS50 Sandbox]:https://sandbox.cs50.io/ [0:31:00]:https://www.bilibili.com/video/BV1DA411Y7jk?p=2&t=1856.3 [C float]: https://www.njarts.cn/a_jiaoyu/202109/515905.html [int main(void) return 0, 1]:https://stackoverflow.com/questions/16610814/why-does-main-have-to-return-an-int ######  [第 2 週：Array, Sort, Big O]:https://www.bilibili.com/video/BV1DA411Y7jk?p=3 [JS arrays vs strings]:https://stackoverflow.com/questions/45803829/memory-overhead-of-typed-arrays-vs-strings ######  [第 3 週：演算法]:https://www.youtube.com/watch?v=4oqjcKenCH8 ######  [第 4 週：C 字符指針、記憶體管理]:https://www.bilibili.com/video/BV1DA411Y7jk?p=4 [What does the asterisk mean after a filename when you type `ls -l`?]:https://superuser.com/questions/178786/what-does-the-asterisk-mean-after-a-filename-when-you-type-ls-l [C 語言程式的記憶體配置概念教學]:https://blog.gtwang.org/programming/memory-layout-of-c-program/ [Q&A - stack & heap]:https://lalalah.pixnet.net/blog/post/30697480 ######  [第 5 週：Data Structure]:https://youtu.be/X8h4dq9Hzq8 ######  [第 6 週：Python]:https://youtu.be/5Jppcxc1Qzc ######  [第 7 週：sql]: https://youtu.be/zrCLRC3Ci1c ######  [第 8 週：web]: https://youtu.be/alnzFK-4xMY *** # ＃課程資源 [正片]:https://youtu.be/IDDmrzzB14M?list=PLhQjrBD2T380F_inVRXMIHCqLaNUd7bN4 [作業]:https://cs50.harvard.edu/x/2023/ [local cs50.h]:https://github.com/cs50/libcs50 [HackMD 教學]:https://hackmd.io/features-tw [別猶豫了，來修 CS50 吧！]:https://blog.techbridge.cc/2017/11/11/cs50/#:~:text=CS50%20%E5%80%BC%E5%BE%97%E6%8E%A8%E8%96%A6%E7%9A%84%E5%8F%A6%E5%A4%96,%E5%AD%B8%E5%88%B0%E4%B8%80%E4%BA%9B%E6%96%B0%E6%9D%B1%E8%A5%BF%E3%80%82 [中文導讀]:https://youtube.com/playlist?list=PLeWlPscCzV-emSo2phZqStPZ0UDKzKu8s [CS 50 中英字幕 - bilibili]:https://www.bilibili.com/video/BV1DA411Y7jk [YT CS50 2021]:https://youtu.be/wZhGNrdOGjQ?list=PL_1HhoDfdxDqxtfzjXaz7uKWq536GeZnr [CS50 2022 Week3]:https://www.youtube.com/watch?v=4oqjcKenCH8 [check50]:https://github.com/cs50/check50 ## [正片] | [作業] - [cs50 doc] | [CS50 Sandbox] | [local cs50.h] | [check50] - :::spoiler **其他** - [HackMD 教學] - [cs50 doc] - :::spoiler 片源： - [別猶豫了，來修 CS50 吧！] - [中文導讀] :100: - [CS 50 中英字幕 - bilibili] - [YT CS50 2021] - [CS50 2022 Week3] ::: - :::spoiler **每週目標｜輪流執行** 1. 討論課程內容 - 問題寫在Hackmd - 討論下週是否要寫作業 2. 寫作業 - [c 語言線上編譯] | [CS50 Sandbox] - [作業](舊) - [cs50.h] - [cs50 doc] ::: ::: *** # [第 0 週：Scratch 圖形編程] > [1. Input -> black box -> output](#1-Input--gt-black-box--gt-output) > [2. 資訊的原理：電腦是如何處理數字、字符、圖像和影片](#2-%E8%B3%87%E8%A8%8A%E7%9A%84%E5%8E%9F%E7%90%86%EF%BC%9A%E9%9B%BB%E8%85%A6%E6%98%AF%E5%A6%82%E4%BD%95%E8%99%95%E7%90%86%E6%95%B8%E5%AD%97%E3%80%81%E5%AD%97%E7%AC%A6%E3%80%81%E5%9C%96%E5%83%8F%E5%92%8C%E5%BD%B1%E7%89%87) > [3. Divide and conquer](#3-Divide-and-conquer) > [4. 介紹 Scratch](#4-%E4%BB%8B%E7%B4%B9-Scratch) ## 1. Input -> black box -> output ## 2. 資訊的原理：電腦是如何處理數字、字符、圖像和影片 ### byte - bit = 0 || 1 - 1 byte = 8 bits ### ASCII code - 8 bits | 1 byte - 最多 256 種字符 - 表達英文和數字 - `65` 當大寫 A - 文本一次就是傳一個 byte ，表達通常會捨去開頭的 0 。 - 根據檔案屬性，讓電腦分辨顯示數字、文字、或顏色 ### Unicode - 1 ~ 4 bytes - Utf-8 是一個特別版 - 第一個 byte 決定該字符，使用幾個 byte 編碼 - REF：[UTF-8 - 1] | [UTF-8 - 2] - 工具：[字符轉換器] | [進位轉換器] ## 3. Divide and conquer - 電話簿找某個人問題。 - 一頁一頁翻法：所需時間跟電話簿名字數量正相關，名字數量多一倍，時間就要多一倍。 - 一直分半查找法：所需時間跟電話簿名字數量是 log n ，名字數量多一倍，查找次數多一次而以。 ## 4. 介紹 Scratch - 圖形化 coding 介面 - [Scrach](https://scratch.mit.edu/) *** # [第 1 週：C 语言] > MurMur: > 1.bilibli 這集超級卡頓。 > 2.似乎要用到課程的 lib。[CS50 Sandbox] > 3.C語言作業連結：https://docs.cs50.net/2019/x/psets/1/index.html ## 風格寫法 - 更快 vs 更好懂 ([0:31:00]) - 之後幾週會講到風格寫法問題，現在要求先照老師的方式寫。 - 現在手機電腦處理能力基本上都是一秒十億以上的任務，如果寫法會增加運算時間但卻能增加閱讀性，也沒關係。 - 多安：認同概念但還是需要評估一下吧？ - C 習慣 main 放上面，所以在 main 底下的 function 要在 main 上面放原型，告訴電腦這個 function 存在。 ## C 筆記： > [1. 縮寫](#1-%E7%B8%AE%E5%AF%AB%EF%BC%9A) > [2. printf](#2-printf) > [3. 編譯](#3-%E7%B7%A8%E8%AD%AF) > [4. 浮點數](#4-%E6%B5%AE%E9%BB%9E%E6%95%B8) > [5. 溢出](#5-%E6%BA%A2%E5%87%BA) > [6. Scope](#6-Scope) ### 1. 縮寫： - printf: print with format - clang: c language - a.out: assembler output （組譯器輸出） ### 2. printf - 名詞 **placeholder** --> 例如："%s" - 不能 'string'，只能 "string" - 全部都要寫 placeholder 也太累了吧 - char* 待研究。為啥 int 不用像 char 分成 * 與否？ - 只有第一個參數可以放 placeholder。可以想像成 printf 就是印出第一個參數，只是 placeholder，會用後面依序的參數替換。 - 以下兩者輸出一樣 ```c= #include <stdio.h> int main() { char* name = "BayChi"; int age = 13; printf("%s%s%s%i","Hello World\n",name,"\n",age); return 0; } ``` ```c= #include <stdio.h> int main() { char* name = "BayChi"; int age = 13; printf("Hello World\n%s\n%i",name,age); return 0; } ``` - :::spoiler 「補充」printf 的格式有四种 (Tingyu)： 1. printf("字符串\n"); ```c= int main(void) { printf("Hello World!\n"); // \n表示换行 return 0; } ``` 其中\n表示换行的意思。它是一个转义字符，前面在讲字符常量的时候见过。其中 n 是“new line”的缩写，即“新的一行”。此外需要注意的是，printf 中的双引号和后面的分号必须是在英文输入法下。双引号内的字符串可以是英文，也可以是中文。 2. printf("输出控制符"，输出参数); ```c= int main(void) { int i = 10; printf("%d\n", i); /*%d是输出控制符，d 表示十进制，后面的 i 是输出参数*/ return 0; } ``` 这句话的意思是将变量 i 以十进制输出。那么现在有一个问题：i 本身就是十进制，为什么还要将 i 以十进制输出呢？因为程序中虽然写的是 i=10，但是在内存中并不是将 10 这个十进制数存放进去，而是将 10 的二进制代码存放进去了。计算机只能执行二进制 0、1 代码，而 0、1 代码本身并没有什么实际的含义，它可以表示任何类型的数据。所以输出的时候要强调是以哪种进制形式输出。所以就必须要有“输出控制符”，以告诉操作系统应该怎样解读二进制数据。如果是%x就是以十六进制的形式输出，要是%o就是以八进制的形式输出 3. printf("输出控制符1 输出控制符2…", 输出参数1, 输出参数2, …); ```c= int main(void) { int i = 10; int j = 3; printf("%d %d\n", i, j); return 0; } ``` 输出控制符 1 对应的是输出参数 1，输出控制符 2 对应的是输出参数 2……编译、链接、执行后我们看一下输出结果：10 3 4. printf("输出控制符非输出控制符"，输出参数); 这实际上就是上面那个例子。这时候会有一个问题：到底什么是“输出控制符”，什么是“非输出控制符”？很简单，凡是以%开头的基本上都是输出控制符。 ::: ### 3. 編譯 - `clang test.c`： - 有編譯階段的 bug 會跳出錯誤訊息，編譯成功則沒有任何訊息 - 編譯 test.c 檔案，未指定檔案名稱，則產生 a.out 檔案 - 輸入指令 `./a.out` 即可執行 - 現在編譯完是否是產生 a.out？ <kbd><img src="https://i.imgur.com/xcAyUq8.png" /></kbd> - `clang -o <filename> test.c` - 指定輸出編譯檔案名稱為 `<filename>` - 輸入指令 `./<filename>` 執行 - `make <filename>` 指令集合： - 課堂使用： ```shell $ clang -fsanitize=signed-integer-overflow -fsanitize=undefined -ggdb3 -O0 -std=c11 -Wall -Werror -Wextra -Wno-sign-compare -Wno-unused-parameter -Wno-unused-variable -Wshadow test.c -lcrypt -lcs50 -lm -o test ``` - 朋友使用： `gcc`、`-O0 -std=c11`、`-j 9` - 編譯時做哪些檢查，應該都是自己下指令設定的(如. 檢查是否有未使用的變數) - 待研究：下指令 `-Wno-unused-variable` ，卻沒有警告未使用的變數([1:06:00](https://www.bilibili.com/video/BV1DA411Y7jk?p=2&t=3960.1)) - 引用 library 編譯時也需要告知有引用 ```c // EX. 引用 cs50.h // #:告知 clang 此部分須預先處理 #include <cs50.h> ``` ```shell # 編譯需加入 "-lcs50" $ clang test.c -lcs50 -o test ``` ### 4. 浮點數 - `float` & `double` - `printf("%f)`：印出浮點數 - `printf("%.3f)`：只取 3 位小數 - 注意精準需求：科學、金融 ..等 - REF：[C float] ### 5. 溢出 - int: 32 bit - double: 64 bit - 加法超過當初變數宣告的容量時，就會歸零後重計。 ### 6. Scope - C 的變數有 scope ，範圍就是宣告時外面第一個大括號。 - 在 scope 外，電腦就無法存取那個變數。 ## 作業 [Problem Set 1](https://cs50.harvard.edu/x/2021/psets/1/) - [cs50.h document](https://manual.cs50.io/) - [int main(void) return 0, 1] - Here int contains two value either 0 or 1. 0 means your program successfully executed ,where 1 means termination of program with some error. And this value is returned to OS. # [第 2 週：Array, Sort, Big O] > [0. 問題集中地](#0-%E5%95%8F%E9%A1%8C%E9%9B%86%E4%B8%AD%E5%9C%B0) > [1. C 語言處理過程](#1-C-%E8%AA%9E%E8%A8%80%E8%99%95%E7%90%86%E9%81%8E%E7%A8%8B) > [2. Error message](#2-Error-message) > [3. Coding style](#3-Coding-style) > [4. Array](#4-Array) ## 0. 問題集中地 - 聽不太清楚此問題（[0:11:29](https://www.bilibili.com/video/BV1DA411Y7jk?p=3&t=689.1)） - Ｑ：如何知道整個 lib 只用到 printf？ - Ａ：不是在預處理階段，是在 linking 時，沒去使用到 - 所以編譯組譯都還是會把整包都做翻譯？造成浪費？ - 他有說是整包（[00:11:53]) > 有時候庫很大的話，你會獲得比所需更多的代碼。這些 0 和 1 從來不會被 CPU 使用。 ## 1. C 語言處理過程 - 現在常直接統稱全過程為 **「編譯」** - pre-processing --> compiling --> assembling --> linking - 預處理 --> 編譯 --> 組譯（汇编） --> 鏈結（链接） - REF：[WIKI](https://zh.wikipedia.org/zh-tw/%E7%B7%A8%E8%AD%AF%E5%99%A8) > 原始碼（source code）→ 預處理器（preprocessor）→ 編譯器（compiler）→ 組譯程式（assembler）→ 目的碼（object code）→ 連結器（linker）→ 執行檔（executables） ## 2. Error message - 可以自製指令，客製化錯誤訊息（如 `help50`） ```shell $ help50 make test ``` ## 3. Coding style - 可以自製指令，檢查 coding style ```shell $ style50 test.c ``` - 使用有意義的數字 - 例如當我的含義是「從 1 數到 100」： O 則使用 `for(let i = 1; i <= 100; i++)` X 不使用 `for(let i = 0; i < 100; i++)` - `main` 放在一開頭才是好的設計（[0:39:53](https://www.bilibili.com/video/BV1DA411Y7jk?p=3&t=2393.4)） - 自己寫的 function 放在 main 下面，要記得在 main 上面聲明其原型。 - `Magic Number` --> `CONST`（[0:46:30](https://www.bilibili.com/video/BV1DA411Y7jk?p=3&t=2790.9)） - `Magic Number`：未命名，但一直出現的數字 - 常數，習慣在最外層選告(global) ## 4. Array - `string` - `string` = 由 `char` 組成的 `array` - JS 中，n 個字的 string、n 個項目的 array，是否所佔空間差不多？([JS arrays vs strings]) - `strlen`：string length - string 最後一個 byte 為 “00000000”，以告知為結尾，標示為 `\0`(null character) `EX. "test" --> test\0` ```c= char *x = "test"; printf("%s, ", x[3] == '\0' ? "T" : "F"); printf("%s, ", x[4] == '\0' ? "T" : "F"); printf("%s, ", x[5] == '\0' ? "T" : "F"); // F, T, F printf("%s, ", x[4] == 0 ? "T" : "F"); // T printf("%s, ", x[4] == NULL ? "T" : "F"); // Error ``` - 還可以印出超出該 string 範圍的內容？！ - 應該是記憶體存的下一個吧，老師有說 CPU 是不知道長度的。 - 對啊，是下一個的。只是它不會防呆，還給你抓後面的內容。 ```c= char *x = "test"; printf("%c, ", x[5]); // 會印出記憶體中 "test" 之後的內容 ``` - casting - explicit casting ```c= char *x = "abc"; int y = (int) x; int y0 = (int) x[0]; printf("y: %i\n", y); // y: 4370506 (x 位址？) printf("y0: %i\n", y0); // y0: 97 (ASCII) ``` - implicit casting ```c= char *x = "abc"; int y0 = x[0]; printf("y0: %i\n", y0); // y0: 97 (ASCII) printf("x[0]: %c, %i\n", x[0], x[0]); // x[0]: a, 97 ``` *** ## 5. 其他 - linux `man`:可以將任何的文件都加入 man 查詢？ - `main` 的參數 - 第一個參數( n )：指令後的參數數量 - 第二個參數( p )：指令後的參數們 (p 從 1 開始算，因為 0 是 `./main`) ```c= int main(int n, string p[]) { if(n > 1) printf("%s\n", p[1]); else printf("Hi~\n"); } ``` ```shell $ ./main Hello Ocup Hello ``` - main 預設 return 0，代表正常 - 可以自己編寫回傳的 (數字：錯誤) 配對 - `echo`: 輸出給它的參數顯示到輸出中。 - `$?`: 是顯示最後命令的退出狀態，0表示沒有錯誤，其他表示有錯誤。 ```c= int main(int n, string p[]) { if(n > 1) return 0; else return 1; } ``` ```shell $ ./main $ echo $? 1 $ ./main Hi $ echo $? 0 ``` ## 6. Algorithm - Merge sort - 當兩者皆為`sorted array` ，才能以 O(n) time 合成`sorted array` - 步驟 ```txt= // EX. [8, 3, 4, 5, 1, 2, 6, 7] --> [1, 2, 3, 4, 5, 6, 7, 8] // 拆 [8, 3, 4, 5, 1, 2, 6, 7] // unsorted [8, 3, 4, 5] [1, 2, 6, 7] // unsorted [8, 3] [4, 5] [1, 2] [6, 7] // unsorted [8] [3] [4] [5] [1] [2] [6] [7] // sorted // 合 [8] [3] [4] [5] [1] [2] [6] [7] // sorted [3, 8] [4, 5] [1, 2] [6, 7] // sorted [3, 4, 5, 8] [1, 2, 6, 7] // sorted [1, 2, 3, 4, 5, 6, 7, 8] // sorted ``` - O(n x log(n)) ## 7. 作業 Problem Set > 寫多少算多少 ### [Readability](https://cs50.harvard.edu/x/2021/psets/2/readability/#readability) - 再研究範例： ```txt Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversation?" (Grade 8) ``` ### [Caesar](https://cs50.harvard.edu/x/2021/psets/2/caesar/) ### [2 - Substitution] ### 語法補充： - 若運算後會轉型，則必須在運算前，先進行轉型 ```c= // A. 結果為先以原型別(int)運算，再轉型為 float int x = 3; int y = 5; float z = x / y; // 0.000000 // B. 一開始就定義為 float float x = 3; float y = 5; float z = x / y; // 0.600000 // C. 運算前轉為 float（認為此方法為佳） int x = 3; int y = 5; float z = (float)x / (float)y; // 0.600000 ``` - string 轉 int - `atoi`: ASCII to integer ```c= #include <stdlib.h> string myString = "123"; int myNumber = atoi(myString); ``` # [第 3 週：演算法] 問題：給一陣列，請找出特定數字有無在陣列裡面。 ### 集中問題 - 「紅色用來表示 RAM 」是通用的表示法？ - ### Algorithm #### Linear search ``` for i from 0 to n -1 if 50 is behind doors[i] return true return false ``` #### Binary search 注意：陣列有先排序過 ``` if no doors left return false if 50 is behind doors[middle] return true else if 50 < doors[middle] Search doors[0] through doors[middle -1] else if 50 > doors[middle] Search doors[middle + 1] through doors[n - 1] ``` #### Big-O 只是用來方便表達某個演算法的表現(upper bound)。O(n) O(n/2) 將資料筆數加大後，其次數/時間的圖都會長的差不多（都是一條斜線)，但是那兩個跟 O(log~2~ n)就完全不一樣。相同地，O(1) 與 O(1000) 也是一樣，因為是一個固定的值。幾種經典演算法時間複雜度的表現，由高至低： 1. O(n^2^) 2. O(n log n) 3. O(n) // linear search 4. O(log n) // binary search 5. O(1) #### Omega 用來表達某個演算法最樂觀的情況(lower bound)。 1. Ω(n^2^) 2. Ω(n log n) 3. Ω(n) 4. Ω(log n) 5. Ω(1) // linear search & binary search #### Theta Θ - 如果有複雜度 upper bound 和 lower bound 剛好一樣，就可以用 Θ - everything break down to Θ 1. Θ(n^2^) 2. Θ(n log n) 3. Θ(n) // ex: 數班上有幾個學生 4. Θ(log n) 5. Θ(1) ### Sorting #### seletion sort 從第 0 個開始檢查到結尾，記住最小的，然後最小的跟本次開頭的交換。下一次從上次檢查的開頭的下一個個開始檢查。(影片中4跟5沒交換？) 次數：(n-1)+(n-2)...1 = n(n-1)/2 - T(n): - O(n^2^) - Ω(n^2^) - Θ(n^2^) - S(n):O(1) #### Bubble sort 從第 0 個開始檢查，檢查這個和下個，下個比這個小就互換這兩個，一直到最後一個的上一個。下一次從第 0 個開始檢查到上次檢查最後一個的上一個。如果跑一次檢查完全不用交換，則結束。次數：(n-1) * (n-1) - T(n): - O(n^2^) - Ω(n) - S(n):O(1) #### Merged sort 排序左邊的資料，排序右邊的資料。 Merge: 左右各拿第一個出來比較，比較小的塞入新陣列。重複到沒有資料為止。 - T(n): - O(n log n) - Ω(n log n) - Θ(n log n) - S(n):O(n) ### Recusion ### 實作新的 array 宣告方式 ```C int numbers[] = {1, 2, 3} ``` 查詢 main 回傳什麼值 ``` $ echo $? ``` 自定義 type ## [作業](https://cs50.harvard.edu/x/2022/weeks/3/) ### [Lab 3: Sort](https://cs50.harvard.edu/x/2022/labs/3/) > [解答](https://youtu.be/LtmAU_hXUKQ) - time 你的程式 - 會紀錄執行時間。 - 執行結果 | | sort1 | sort2 | sort3 | | ------------- | ---------- | ---------- | ------ | | sorted5000 | 0.045s | 0.046s | 0.078s | | sorted10000 | 0.087s | 0.088s | 0.212s | | sorted50000 | **0.421s** | 0.425s | 3.636s | | random5000 | 0.112s | 0.046s | 0.076s | | random10000 | 0.385s | 0.092s | 0.215s | | random50000 | 8.959s | **0.430s** | 3.633s | | reversed5000 | 0.106s | 0.047s | 0.078s | | reversed10000 | 0.328s | 0.091s | 0.214s | | reversed50000 | 6.520s | **0.426s** | 3.717s | - sort1 - bubble sort - 因為 sorted data 可以 O(n) 後直接 quit - sort2 - merge sort - 因為是 Θ(n log n) ，不管哪種情況跑出來的結果都會大致相同。 - sorted data: 跟 sort1 相比有點奇怪？與 sort1 跑了幾次 sorted50000，時間都差不多。正負0.01秒 - sort3 - selection sort - 因為是 Θ(n^2) - Ω(n^2)，相比其他兩種排序方法，資料就算是 sorted 也要花最久的的時間。 ### [Problem Set 3](https://cs50.harvard.edu/x/2022/psets/3/) - plurality: - runoff: - 投錯名字直接 return 也太慘，前面的人都白投了？所以我參照 plurality 讓他再寫一次 - 我就投廢票 *** # [第 4 週：C 字符指針、記憶體管理] ## 0. 問題集中地 - TODO: 再研究看看 `get_string` 原始碼如何操作不固定長度的字串(malloc?) - 最後一句要想一下「遞迴函數就是透過這樣的機制來執行的」 > 堆疊區段（stack segment）用於儲存函數的區域變數，以及各種函數呼叫時需要儲存的資訊（例如函數返回的記憶體位址還有呼叫者函數的狀態等），每一次的函數呼叫就會在堆疊區段建立一個 stack frame，儲存該次呼叫的所有變數與狀態，這樣一來同一個函數重複被呼叫時就會有不同的 stack frame，不會互相干擾，遞迴函數就是透過這樣的機制來執行的。 - ## 1. 其他 - 英文 > `~`: tilde > `*`: asterisk, star > `#`: hash - cli 中檔案名稱格式如 `filename*` ，其為執行檔 > REF: [What does the asterisk mean after a filename when you type `ls -l`?] - debug - check50 - debug50 - watch - `main return 0` - 沒有 return，則預設 return 0 - return 0 以外的都是 error，默認 return 1 - 可自己定義不同的 return code ，對應到不同 error - 在各種條件下 return 非 0 int，以避免產生 segfault - Segmentation fault (segfault) - means: You touched memory you should not have. Or something went wrong and you did not detect it. - 開頭： - 十進位：無 - 二進位：`0b`, `0B` - 八進位：`0o`, `0O` - 十六進位：`0x`, `0X` ## 2. 語法 - `strcmp(strA, strB)` - string compare - 字串之間的比較 - 回傳 int ( ASCII(strA) - ASCII(strB) ) ```c= // EX strcmp("a" ,"a"); // 0 strcmp("a" ,"b"); // -1 strcmp("b" ,"a"); // 1 strcmp("c" ,"a"); // 2 strcmp("zzzza" ,"zzzzb"); // -1 strcmp("zzzzb" ,"zzzza"); // 1 strcmp("zzzzc" ,"zzzza"); // 2 ``` - `malloc(n)` - memory allocates - 分配 n byte 的記憶體給我 ```c= // EX #include <stdlib.h> char *strA = "abc"; int size = strlen(strA + 1) * sizeof(char); char *strB = malloc(size); // sizeof(char) === 1 // Error: char *strC; *strC = "asd"; ``` - `sizeof()` - 記憶體大小 - 單位 byte ```c= sizeof(int); // 8 int x = 1; sizeof(x); // 8 ``` - `strcpy()` - string copy - `&var` - - `scanf()` - `printf()` 反義 ```c= int n; scanf("%i", &n); printf("%i\n", n); ``` - string 需要先聲明用來儲存字串所需的空間 - TODO: 再研究看看 `get_string` 原始碼如何操作不固定長度的字串 ```c= char str[3]; scanf("input: %s", str); printf("output: %s\n", str); ``` ```shell $ ./file input: abc output: abc // 超出所聲明的空間，可能運氣好，那些空間還空著，則沒出錯 $ ./file input: abcde output: abcde // 非常長，可能就會出現 segfault 錯誤，但我自己用 sandbox 出現的錯誤訊息跟影片不同，如下圖 $ ./file input: abcabcabcabcabcabcabcabcabcabcabcabcabcabcabc // 空白似乎就是 0，結果就被視為結尾 $ ./file input: abc as output: abc $ ./file input: a c output: a $ ./file input: 中文同 output: 中文同 ``` ![](https://i.imgur.com/fUzp6PZ.png) ## 3. pointer [3 - 1:45:00] ```c= void swap(int *a, int *b) { printf("%i, %p, %p\n", *a, a, &a); int tmp = *a; // tmp = 1 *a = *b; // x的位址的值 = 2 *b = tmp; // y的位址的值 = 1 } int main(void) { int x = 1; int y = 2; printf("1: %p & %p --> %i & %i\n", &x, &y, x, y); swap(&x, &y); printf("2: %p & %p --> %i & %i\n", &x, &y, x, y); return 0; } // 1: 0x7fff18421728 & 0x7fff18421724 --> 1 & 2 // *a: 1, a: 0x7fff18421728, &a: 0x7fff184216f8 // 2: 0x7fff18421728 & 0x7fff18421724 --> 2 & 1 ``` ## 4. memory - [C 語言程式的記憶體配置概念教學] - [Q&A - stack & heap] - 高低記憶體位址 - 可下指令來研究記憶體位址 ```shell $ size <filename> ``` - 是否低記憶體位址會排列較有秩序的意思？ > High memory is memory which is not permanently mapped in the kernel's address space. (Low memory is the opposite: it is always mapped, so you can access it in the kernel simply by dereferencing a pointer.) - `heap`: EX. C `malloc`, C++ `new` - ![](https://i.imgur.com/QnV4kgI.png) - 測試： - TODO: 這裡範例的位址數字亂掉了，應該有些要不同（找時間再重弄一次） ```c= // 1. // text data bss dec hex filename // 206948 13136 8983096 9203180 8c6dec test #include <stdio.h> #include <cs50.h> int main(void) { return 0; } ``` ```c= // 2. // text data bss dec hex filename // 206948 13136 8983096 9203180 8c6dec test #include <stdio.h> #include <cs50.h> int a = 1; // data int main(void) { return 0; } ``` ```c= // 3. // text data bss dec hex filename // 206948 13136 8983096 9203180 8c6dec test #include <stdio.h> #include <cs50.h> int main(void) { static int y = 1; // data return 0; } ``` ```c= // 4. // text data bss dec hex filename // 206948 13136 8983096 9203180 8c6dec test #include <stdio.h> #include <cs50.h> int main(void) { int b; return 0; } ``` ```c= // 5. // text data bss dec hex filename // 206948 13136 8983096 9203180 8c6dec test #include <stdio.h> #include <cs50.h> int main(void) { int b; b = 1; return 0; } ``` - ## 5. 自定義 type - string 是 char 的 array 那表達上怎麼不是 ```C char s[]="Hello"; ``` 而是 ```C char *s = "Hi!"; ``` - 一樣意思 - 這樣代表什麼意思？ ```C string j = "Hello!"; printf("j address: %p\n", j); // j address: 0x10020ff7d printf("j: %p\n", &j); // j: 0x16fbf36a0 ``` j 是 pointer 變數 &j 是 pointer 的地址 - 跟教學的不一樣 ```C string t = "abc"; string u = "abc"; printf("%s: %p\n", t, t); // abc: 0x1047dbf51 printf("%s: %p\n", u, u); // abc: 0x1047dbf51 printf("%i\n", t == u); // 1 char *w = "abce"; char *x = "abce"; printf("%c: %p\n", *w, w); // a: 0x1044bbf90 printf("%c: %p\n", *x, x); // a: 0x1044bbf90 printf("%i\n", w == x); // 1 ``` - Q: 兩種字串的宣告的差異。因為初步查的資料，如果要用去個別修正第幾個字，[要用 array 那種宣告](https://stackoverflow.com/questions/8716714/what-is-the-meaning-of-bus-error-10-in-c)。 ``` char *s = "abc"; char s[] = "abc"; ``` - `typedef`: type define ```c= // file1: struct.h typedef struct { char *name; char *dorm; } student; // file2: struct.c #include <struct.h> int main(void) { student s1; s1.name = "Ocup"; s1.dorm = "A"; } ``` *** ## [valgrind](https://valgrind.org/) 協助查看程式是否有造成 memory 明顯錯誤的工具。 ```sh valgrind ./your-program ``` ## Pointer Arithmtic 對 pointer 做加法，電腦會依據存的型別，自動跳下一個 memory 位置。開發者可以不會去考慮每個 type 需要佔據的記憶體大小。 ```C= int numbers[] = {2, 4, 6, 8}; printf("%i\n", *numbers); // 2 printf("%i\n", *(numbers + 1)); // 4，一次跳 4 個 bytes 拿到 4 printf("%i\n", *(numbers + 2)); // 6 printf("%i\n", *(numbers + 3)); // 8 ``` ## # Homework ### ## [Lab4](https://cs50.harvard.edu/x/2022/labs/4/) ```shell $ check50 --local cs50/labs/2022/x/volume ``` - ~~`fwrite()`之後～`fclose()`之前，file 沒有真正被寫入~~ - ~~`fread()`之後，要在切換到其他 process 之前`fwrite()`。例如若在中間插入一個`sleep()`會造成異常~~ 這樣跑沒問題嗎？ ```c= fread(header,sizeof(uint8_t),HEADER_SIZE,input); fwrite(header,sizeof(uint8_t),HEADER_SIZE,output); fread(&header,sizeof(uint8_t),HEADER_SIZE,input); fwrite(&header,sizeof(uint8_t),HEADER_SIZE,output); ``` ### ## [Week4 P1 Filter-Less](https://cs50.harvard.edu/x/2022/psets/4/filter/less/) ```shell $ check50 --local cs50/problems/2022/x/filter/less ``` - [BMP (Bitmap) (.bmp)](https://blog.lusw.dev/posts/bitmap-file-structure.html) - 做四捨五入前，須先轉型為`float`（可用偷吃步直接與 float 進行運算會自動轉型） - 有些運算的結果會超出 255，須再依照規定做換算 - 例如 sepia 規定超過 255 則以 255 計 - TODO: blur: 思考是否有方法可以不用多複製一份檔案 ### ## [Week4 P1 Filter-More](https://cs50.harvard.edu/x/2022/psets/4/filter/more/) ```shell $ check50 --local cs50/problems/2022/x/filter/more ``` - 只比 Week4 P1 Filter-Less 多一個 edges() ### ## [Week4 p2 Recover](https://cs50.harvard.edu/x/2022/psets/4/recover/) ```shell $ check50 --local cs50/problems/2022/x/recover ``` - 刪除檔案只是讓電腦忘記檔案在哪裡 - `JPEGs`格式: - 前 3 bytes 固定是 `0xff 0xd8 0xff` - 第 4 byte 是`0xe0`或`0xef` - 開頭必為：`ffd8ffe` --> `1111 1111 1101 1000 1111 1111 1110` --> `255 216 255 224` | `255 216 255 239` - 需注意可能遇到其他偶然湊成該序列的情況 - 數位相機通常用 `FAT file system` 來存圖片 - `FAT file system`: “block size” is 512 bytes - 例如 1,048,576 bytes 跟 1,048,575 bytes 的圖片，都使用 2048 blocks (1048576 ÷ 512 = 2048) - `slack space`: 閒置空間，上述存法浪費的空間，通常鑑定人員可從此下手來查看是否有可疑資料 - 第一張圖片並非從 card.raw 的起始點開始 - TODO:Q 不明原因 check50 的 memory leak 不通過 - TODO:Q 該如何設計一個 function 能回傳指標，且不必使用`malloc()`，或是該在何處`free()`？ ```c= // EX. // 使用 char *filename = malloc(8); 不知該在何處使用 free() // 使用 char filename[8]; 方式會導致回傳的 type 錯誤 char *gen_filename(int num) { char *filename = malloc(8); // char filename[8]; sprintf(filename, "%03i.jpg", num); return filename; } ``` --- # [第 5 週：Data Structure] ## 0. 問題集中地 - 如何知道某塊 mem 非垃圾？ - linked list 不能 binery search，是否能各種 sort？ ## 1. C 語法 - `struct node` = `Node` - 為了在 struct 內部使用 self type ```c typedef struct node { int data; struct node *next; } Node; ``` - `node->next` = `(*node).next` - `free` 是把該位址釋放出來，而不是把該變數釋放出來，所以只需 free 其中一個 ```c x = y; free(x); // 不必再 free(y) ``` ## 2. 資料結構 ### First-In-First-Out, FIFO enqueue: 將資料加在 queue 尾端。 dequeue: 將資料從 queue 前端移除。 ### 陣列宣告及分配記憶體如果直接宣告，將無法再增加元素進陣列： ```c int list[3]; // 使用 stack ``` 用 malloc 可以動態分配記憶體 free ： ```c // -- int *list = malloc(3 * sizeof(int)); // 使用 heap ，可以要求更多空間 // 在C語言中，當使用malloc函數動態分配記憶體時，如果系統無法分配足夠的記憶體，就會返回一個null指針，表示分配失敗。 if (list == NULL) { printf("Memory allocation failed\n"); exit(1); } ``` 自己寫陣列新增元素，需要先宣告一個 tmp array ，再把原來的 list 一個一個 copy 進 tmp，。嫌麻煩可以直接使用 realloc: ```c int *list = malloc(3 * sizeof(int)); list[0] = 1; list[1] = 2; list[2] = 3; //使用realloc重新分配記憶體大小 int *tmp = realloc(list, 5 * sizeof(int)); if (tmp == NULL) { // // 也要檢查是否有 realloc 是否成功 printf("Memory allocation failed\n"); exit(1); } list = tmp; list[3] = 4; list[4] = 5; //使用list指針進行操作 ``` > 為什麼老師在宣告 tmp 下面，在假如 tmp 宣告失敗時，要 free(list)? 連帶想釐清 OS 在 program 啟動後，會不會紀錄這個 program 所有用到的記憶體位置？ ### Linked List 由節點（node）組成，每個節點包含了一個值（value）和一個指向下一個節點的指針（next）。使用 Linked List 時，需要創建一個指向 List 開頭的「head」指針。使用 NULL 當作結尾。定義 ```C typedef struct node { // 之所以要再寫一次 node ，是因為 node 在下面使用時還沒宣告，所以這邊要先宣告一次。 int number; // 節點存儲的值 struct node *next; // 指向下一個節點的指針 } node; ``` [新增 Linked List 的第一個 node](https://youtu.be/X8h4dq9Hzq8?t=3477) ```C // 1. 宣告一個 pointer 並清空原始裡面的值，當作 Linked List 的 head node *list = NULL; // 2. 宣告 pointer 、分配一個 node 大小的記憶體、將這個 node 記憶體位置寫進 pointer。 node *n = malloc(sizeof(node)); // 3. 賦值 (*n).number = 1; // 找到 pointer 指的東西（node），進到 node 結構裡面找到 number ，並賦值 1 。 n -> number = 1; // 同上，這是一種語法堂 // 4. 補上結尾 n -> next = NULL; // 5. 將 n 指的東西給 list list = n; ``` [新增第二個 node](https://youtu.be/X8h4dq9Hzq8?t=3783) ```C // 1. 宣告 pointer 、分配一個 node 大小的記憶體、將這個 node 記憶體位置寫進 pointer。 node *n = malloc(sizeof(node)); // 2. (DeRef)找到 pointer 指的東西（node），進到 node 結構裡面找到 number ，並賦值 2 。 n -> number = 2; // 3. 補上結尾 n -> next = NULL; // 4. 賦值第二個 node 的 next，值是 list 所指的 node 位置。 n -> next = list; // 5. 再把 n 指的位置交給 list list = n; ``` 上面實作 push 元素時，是將元素新增在最前面。 ![](https://i.imgur.com/bmYSyxd.png) #### 時間複雜度 linked list的時間複雜度可以根據具體實現方式而有所不同(新元素是以開頭插入還是以結尾連接)。查詢：O(n) 排序？AI給的答案 - Insertion Sort: O(n^2) - Selection Sort: O(n^2) - Merge Sort: O(n log n) - Quick Sort: O(n log n) ### Binary Search Tree 可以做 Binary Search 的 Tree 結構。定義 ```C typedef struct node { // 之所以要再寫一次 node ，是因為 node 在下面使用時還沒宣告，所以這邊要先宣告一次。 int number; // 節點存儲的值 struct node *left; // 指向左節點的指針 struct node *right; // 指向右節點的指針 } node; ``` 是否是 balance 的 tree 會決定操作時的時間複雜度。 ### Dictionaries Key, value。 O(n/k), k 分出來的組數，上課的例子就是 k = 26(A ~ Z)。要根據 n 去設計 k 要多大，以及設計 hash function 讓 input 資料可以平均分派在 hash table 裡。 ### Tries 字典樹 O(k), k 為給定的字串長度空間複雜度超高 # [第 6 週：Python] ## 0. 問題集中地 - class 的 instance 存在哪裡？ - heap ![](https://i.imgur.com/xf7RtEW.png) - python 的 len() 以什麼方式取得長度，是否紀錄長度屬性？還是每次呼叫都再計算一次？ - list、str、tuple 有長度屬性紀錄 - set、dict 每次重算 ![](https://i.imgur.com/KVkA73X.png) ## 1. python - function 只要在真正 call 之前定義好即可，不必在其他使用到的 function 前定義 ```python # 不行 def fn(): fn1() fn() def fn1(): print("123") # 可以 def fn(): fn1() def fn1(): print("123") fn() ``` - 需自己轉 type ### Functions #### range ```py range(5) # 返回 [0, 1, 2, 3, 4] range(1, 5) # 返回 [1, 2, 3, 4] range(0, 10, 2) # 返回 [0, 2, 4, 6, 8] range(10, 0, -1) # 返回 [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] ``` #### input 要注意 input 回傳的是字串。 ```py num = int(input("Please enter your age: ")) ``` #### print 參數 end 可以設定更改原本結尾預設是換行的行為 ```py print("Hello,", end='') print("World!", end='') print("My", end='') print("name", end='') print("is", end='') print("Alice.") // Hello,World!MynameisAlice. ``` ### Issues #### Truncation Python 也是有尾數會被截斷問題。 ```python x = int(input("x: ")) // 1 y = int(input("y: ")) // 3 z = x / y print(z) // 0.3333333333333333 ``` #### Floating Point Imprecision Python 也是要注意浮點數運算時的精度問題。 ```python x = int(input("x: ")) // 1 y = int(input("y: ")) // 3 z = x / y print(f"{z: .50f}") // .33333333333333331482961625624739099293947219848633 ``` #### ~~Integer Overflow~~ Python 不會有這個問題，但要注意效能。 ### Try Catch ```python try: x = int(input("Please enter a number: ")) except ValueError: print("Oops! That was not a valid number. Please try again...") ``` # [第 7 週：SQL] - `.schema` 命令，它會顯示出所有表的定義，包括表名、列名、數據類型以及約束等信息。 `NUMERIC` 可以存儲整數、浮點數或者十進制數，並且能夠保留小數點後任意位數的精度，因此非常適合於存儲需要高精度計算的數據，如財務數據或科學計算結果等。 `REAL` 類型是一個浮點數類型，可以存儲 8 字節的 IEEE 浮點數。它可以存儲任意小數位數的數字，但在精度方面可能存在一些誤差。 NUMERIC 类型比 REAL 类型更加精确，但在存储和计算方面需要更多的资源。因此，在使用这两种类型之前，需要根据应用程序的需求和计算要求来选择合适的类型。 ## 0. Q & A - 輸入`sqlite> .schema`後，才出現`.db`檔案 (40:00) - 為什麼可以排列整齊？(46:30) - 可對以下進行設定 ```shell sqlite> .mode column sqlite> .header on sqlite> .width 10 20 10 ``` - 如何重複使用暱稱？(51:25) - `PRIMARY KEY(id)` - 多個 Table 是什麼意思？(1:43:00) - index 是 B-Tree (1:49:00) - python print 用 `f` 比用 `?` 更容易受到駭客攻擊？ - `BEGIN TRANSACTION`, `COMMIT`, `ROLLBACK` ## 1. SQL 語法  - 基本關鍵字 - C：`CREATE` `INSERT` - R：`SELECT` - U：`UPDATE` - D：`DELETE` `DROP`  - 常用關鍵字 - `AVG`, `COUNT`, `DISTINCT`, `LOWER`, `MAX`, `MIN`, `UPPER`... - 常用修飾 - `WHERE`, `LIKE`, `ORDER BY`, `LIMIT`, `GROUP BY`...  - 建立 TABLE ```sql # EX. CREATE TABLE employees ( id INTEGER PRIMARY KEY, name TEXT, age INTEGER, position TEXT ); CREATE TABLE favorites ( Timestamp TEXT, language TEXT, problem TEXT ); ```  - 新增 - 新增一筆資料到一個 Table ```sql # EX. 新增 {name:'Bob', age:37, position:'Engineer'} 到 TABLE employees INSERT INTO employees (name, age, position) VALUES ('Bob', 37, 'Engineer'); # 如果允許 NULL 可以省略一些欄位 # EX. 新增 {name:'Bob', age:37} 到 TABLE employees INSERT INTO employees (name, age) VALUES ('Bob', 37); ```  - 查詢 - 查詢一個 Table 中所有資料 (`*`) ```sql SELECT * FROM employees; ``` - 查詢一個 Table 中某個欄位的所有資料 ```sql SELECT name FROM employees; ```  - 常用功能 - `COUNT` ```sql # EX. 查詢 employees 中，計算總共有幾筆資料 sqlite> SELECT COUNT(*) FROM employees; 6 # EX. 查詢 employees Table 中，計算有幾筆資料有 age 欄位 sqlite> SELECT COUNT(age) FROM employees; 4 ``` - `DISTINCT` ```sql # EX. 查詢列出 employees Table 中，position 欄位的所有實例 sqlite> SELECT DISTINCT(position) FROM employees; Manager Engineer ``` - 可以結合使用 ```sql # EX. 查詢 employees Table 中，計算 position 欄位的所有實例數目 sqlite> SELECT COUNT(DISTINCT(position)) FROM employees; + ------------------------- + | COUNT(DISTINCT(position)) | + ------------------------- + | 2 | + ------------------------- + ``` - 可以調整輸出時 Header 的暱稱 ```sql # EX. 將 COUNT(DISTINCT(position)) 取一個暱稱 n sqlite> SELECT COUNT(DISTINCT(position)) AS n FROM employees; + - + | n | + - + | 2 | + - + ``` ## 2. SQLite - 輕量級的嵌入式關聯式資料庫管理系統 ![](https://i.imgur.com/L8Hm9Xc.png) - 簡易建立一個 SQLite ```shell # 建立 DB 並進入 sqlite 模式 $ sqlite3 dbName.db sqlite> ``` - 查詢已存在的 schema ```shell # show 出所有已存在的 schema，包含空白縮排ＸＤ sqlite> .schema ``` - 範例 ![](https://i.imgur.com/MkhDC7L.png) - Data type - `BLOB`, `INTEGER`, `NUMERIC`, `REAL`, `TEXT` ## 3. 注意 - 末尾需加上分號`;` (可能有些 DBMS 可以不加分號) - 如`SELECT`等 SQL 關鍵字，並不一定要大寫，但好習慣是保持大寫，以便做區分閱讀 - 有手動新增較大 id 的資料，下次自動產生 id，會在當前最大 id 的下一號 - EX. 手動新增 id:9 ，下次自動生成的會排在 id:10，即使中間有空號 ![](https://i.imgur.com/XJtACbJ.png) ![](https://i.imgur.com/OWmnXvM.png) - `UPDATE`, `DELETE`沒設定查詢條件時，會將整個 Table 的所有資料進行操作 # [第 8 週：Web] Transmission Control Protocol(TCP) cURL: connecnt to URL / [Client for URL](https://en.wikipedia.org/wiki/CURL) Server 其實是指軟體，它收到 requests 會回 response。輸入網址會變超連結其實是各家軟體實作的。 Submit form 後，form 會將資料用 query string 的方式帶到 action 屬性指定的 URL 。 ## 0. Q & A - 一般多人視訊會怎麼做？多人互連？還是多人跟 server 連？ - 使用 HTTP，若該網站只使用 HTTPS，會返回 301（永久移動）並告知他的 Location 是 HTTPS。而瀏覽器看到會自動幫你再送一次 HTTPS 的請求 - TODO:Q 要手動設定嗎？ ## 1. Web - TCP：辨認 port，例如 80 - HTTP、443 - HTTPS - Http-Server：處理將 TCP/IP 與 HTTP 結合使用 (57:00) - Ephemeral port (臨時埠) (1024 ～ 65535) - client 向 server 發請求，進行 TCP 三方交握時，OS 會自動分配臨時 port - server 接下來與 client 溝通，就會傳回到 client 的那個 port ## 2. Issue # [第 10 週：Emoji] P set 2 是什麼？第一名的是天才嗎？ ~~是正妹（但看起來有點蘿莉貌）~~ ## Emoji [Unicode Consortium](https://unicode.org/consortium/consort.html) 主要有三個 projects: 1. Encoding character 2. Localization Resources - Common Locale Data Repository(CLDR): 目的是為了解決不同語言和文化之間的本地化差異，提供標準化的數據集，使軟件開發人員能夠更容易地開發支持多語言和多地區的應用程序。CLDR的數據是通過對不同地區的本地專家進行調查和研究來獲得的，並且定期進行更新和維護。 3. Programming library - ICU是基於Unicode標準和CLDR項目開發的，它提供了一個豐富的API和工具，使軟件開發人員能夠更容易地開發支持多語言和多地區的應用程序。右邊留言好慘 # Cybersecurity 4-character password: 94^4 = 78,074,896 種組合 8-character password: 94^8 = 6,095,689,385,410,816 種組合 (quadrillion) 網路安全是一種比較的概念。 Ransomware 是一種惡意軟體（malware），也被稱為勒索軟體。它的攻擊方式是透過植入計算機或行動裝置中，加密或鎖定被感染裝置中的檔案或系統，進而勒索受害者支付贖金（ransom）來解鎖或解密被封鎖的檔案或系統。

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.