Repo Story — JS Sort Visualization

來!先上 Demo☺️

正文開始!

是這樣的,當時我正苦惱著要選擇做什麼小專案的時候,正好看到了一位youtuber的影片:

如果你正苦惱著不知道要做什麼 project又沒有什麼 project的話,你或許可以嘗試看看使用 JavaScript實現排序可視化!

畢竟我最近也才剛學 JavaScript沒多久,不如就來挑戰看看吧。

其實一開始我對自己沒有保持多大信心:「可能會寫不出來,然後就以失敗告終吧,畢竟是第一次用JavaScript開發」,我這樣想。不過怎麼可以因為一點點的灰心就放棄呢!所以我還是硬著頭皮上了,畢竟我很想要增加我在github上面的repo數量。

結果一開始就被自己嚇到了,我以為我沒辦法打出什麼東西,沒想到效率居然比我想像中還快了好幾倍!一剛開始的確花了我不少時間,但是主要都是在修RWD、切版,都是著重在HTML、CSS。

不過,接下來我就遇到一個難關:要怎麼讓JavaScript以及HTML、CSS這三個語言完美的搭配在網站上呢?其實對於這個問題,我糾結了很久,一直想那個div裏面到底要怎麼打。直到我去上了那一次大號,一切的謎題都解開了(上大號真的很厲害···)。架完基本的網站架構後,重頭戲就開始了!也就是JavaScript這位主角,我想了一下要用哪些排序演算法,結果還是決定比較簡單的n平方的演算法,簡單暴力又不會太難寫。

大便是每個資工系學生的好朋友 👌

重點來了!有趣的是,原來完成排序可視化沒有我想像中這麼難!其實主要的流程想法就是:點下一步按鈕之後動一步的排序演算法就好!也就是做完一次swap就直接break!(是不是真的很簡單xD)。所以不到一天,我就把Bubble sort(泡沫排序法)跟Selection sort(選擇排序法)做完了!在接下來的半天,我又把Exchange sort(交換排序法)跟Insertion sort(插入排序法)完成了!所以真的沒有這麼困難!

到目前為止,這個repo也到一個段落,還算是有一點點內容了,至少把大一有可能會碰到的排序做完了,也算是給自己一個交代了吧(汗。

下一篇會跟大家介紹以上提到的四個sorting algorithms! 希望可以多多少少幫助到一些剛開始接觸排序的程式人們!

我的Github: Tsuen Hsueh

我的網站: Tsuen’s Webpage

--

--