由小專案學程式--Color Flipper
更新於 2020/06/25閱讀時間約 2 分鐘
在youtube上找尋前端的小專案來練習，就發現了這個不是很難，又可以讓我練習怎麼把javascript用在網頁裡的專案，於是就跟者影片做了一遍。當然，比起前一個寫遊戲的影片來說，可以說是輕鬆很多。雖然頁面呈現很漂亮，但不是我自己開發的，影片作者好心地把css的程式碼一起附在了github供下載，而我主要也是專注在透過javascript寫好的功能嵌入html達到我要的功能，下面大致說明一下是怎麼做到的。
小問題
習慣上我會把連結css檔案的標籤<link>以及連結javascript檔案的標籤<script>都放在<head>裡面，不過以這個專案來說，當執行javascript前必須要有DOM物件的生成，而這個DOM物件在<body>中，造成執行javascript時找不到東西而沒有變化，因此才把<script>標籤移到<body>內的末端。
功能實作概念
在頁面中生成一個按鈕，當滑鼠點擊按鈕時，頁面會變換顏色。
在第一個simple的版本中，事先把寫好的4種顏色放在list中，對應的index位置為0、1、2、3，當滑鼠點擊按鈕，執行寫好的function，function內容引入數學套件，控制取亂數的範圍為0~3之間的整數，並且回傳此數字在list中對應的顏色，改變html中的底色。
在第二個Hex的版本，隨機選取的範圍更改，而在這裡要先說明一下色碼的概念：
以程式中的顏色組成為（Ｒｅｄ, Ｇｒｅｅｎ, Ｂｌｕｅ），原色參與的程度介於數字0~255之間，也就是說顏色範圍在(0,0,0)~(255,255,255)。當然也可以用另一個比較常見的16進位表示法，即#000000~#FFFFFF，其中#表示後面顯示為16進位，16進位表示由0、1、2、....9、A、B、C....E、F。每兩個符號代表一個顏色，每個符號有16種可能，也就是16*16=256，與0~255是一樣的意義。
以程式中的顏色組成為（Ｒｅｄ, Ｇｒｅｅｎ, Ｂｌｕｅ），原色參與的程度介於數字0~255之間，也就是說顏色範圍在(0,0,0)~(255,255,255)。當然也可以用另一個比較常見的16進位表示法，即#000000~#FFFFFF，其中#表示後面顯示為16進位，16進位表示由0、1、2、....9、A、B、C....E、F。每兩個符號代表一個顏色，每個符號有16種可能，也就是16*16=256，與0~255是一樣的意義。
因此，第二個版本只是稍微修改一下程式，回傳#加上6個從0~F中挑選出來的符號，呈現到頁面上。
13會員
64內容數
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現，文件更新往往跟不上新需求的更迭，犯錯的歷史總是不斷重演。因此，我改變了方式，蒐集從程式上、系統上的每一次異常處理過程，好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本，期待日後不管在工作上或交流上遇到難題，都能輕鬆地應答：有什麼難的，我都踩過。
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
兒童性虐待的範疇較廣泛，其核心定義是透過暴力或脅迫使兒童進行性活動，而造成對他們的傷害，無論兒童是否意識到自己受到性虐待。
當兒童為了換取來自第三方、加害人或兒童本身的某件事物（如收益或好處，或甚至是對這些事物的承諾），而參與性活動，則這位兒童就是性剝削的被害人。
二十一世紀的現在，如果說講到可以外送的「速食」，你會想到什麼呢？
是有漢堡、薯條、炸雞、蛋塔的麥當勞或肯德基嗎？想必這時候腦袋裡瞬間閃過的都是常點的那些餐點，但現在講到速食或許我們能有更多選擇，而且顛覆我們的想像。
這次我們帶學生們來體驗的職業類群是食品跟餐旅學群，而負責讓我們體驗的店家則是位在高雄
俗話說好的開始是成功的一半。專案一開始也需要有個好的開頭，後續專案做起來才容易上軌道，而這個開頭就叫做啟動會議或是Kickoff meeting。
之前在「有理小姐的新家進行式」中，只有介紹裝潢前和設計師討論平面配置跟3D的過程，後來就沒有再介紹施工過程及裝潢結果。
這次有理將新家裝修過程一次公開，希望能幫助更多有同樣需求的朋友喔！！
文案作者的身價往往不是來自驚天動地的偉大作品，而是來自客戶累積的信賴感。而這樣的信賴感，來自你對於使用情境的理解、以及對作品內容的細心考量。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
兒童性虐待的範疇較廣泛，其核心定義是透過暴力或脅迫使兒童進行性活動，而造成對他們的傷害，無論兒童是否意識到自己受到性虐待。
當兒童為了換取來自第三方、加害人或兒童本身的某件事物（如收益或好處，或甚至是對這些事物的承諾），而參與性活動，則這位兒童就是性剝削的被害人。
二十一世紀的現在，如果說講到可以外送的「速食」，你會想到什麼呢？
是有漢堡、薯條、炸雞、蛋塔的麥當勞或肯德基嗎？想必這時候腦袋裡瞬間閃過的都是常點的那些餐點，但現在講到速食或許我們能有更多選擇，而且顛覆我們的想像。
這次我們帶學生們來體驗的職業類群是食品跟餐旅學群，而負責讓我們體驗的店家則是位在高雄
俗話說好的開始是成功的一半。專案一開始也需要有個好的開頭，後續專案做起來才容易上軌道，而這個開頭就叫做啟動會議或是Kickoff meeting。
之前在「有理小姐的新家進行式」中，只有介紹裝潢前和設計師討論平面配置跟3D的過程，後來就沒有再介紹施工過程及裝潢結果。
這次有理將新家裝修過程一次公開，希望能幫助更多有同樣需求的朋友喔！！
文案作者的身價往往不是來自驚天動地的偉大作品，而是來自客戶累積的信賴感。而這樣的信賴感，來自你對於使用情境的理解、以及對作品內容的細心考量。