由小專案學程式--Color Flipper
更新於 發佈於 閱讀時間約 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會員
65內容數
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現，文件更新往往跟不上新需求的更迭，犯錯的歷史總是不斷重演。因此，我改變了方式，蒐集從程式上、系統上的每一次異常處理過程，好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本，期待日後不管在工作上或交流上遇到難題，都能輕鬆地應答：有什麼難的，我都踩過。
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件，包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化，幫助開發者提高工作效率，適合希望深入瞭解前端開發和網站架構的讀者。
這篇內容，將透過實戰教學，來講解「滑鼠點方塊」的程式碼。包括如何測試遊戲、座標系統、自訂參數和內建參數、if else、and、遊戲的邏輯設計、程式碼解析。
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
在本章節中，我們將學習JavaScript的基本語法，包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言，應用範圍廣泛，包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Creative Coding 作品變化概念，有或沒有的差別，隨機性，色彩模式的調整...等
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處，我是在看完 Youtube 上 CS50 的課程，才理解到在不同的程式語言中，會因為語言的特性而有不同的系統，JavaScript 就是偏向比較特別的那一種。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件，包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化，幫助開發者提高工作效率，適合希望深入瞭解前端開發和網站架構的讀者。
這篇內容，將透過實戰教學，來講解「滑鼠點方塊」的程式碼。包括如何測試遊戲、座標系統、自訂參數和內建參數、if else、and、遊戲的邏輯設計、程式碼解析。
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
在本章節中，我們將學習JavaScript的基本語法，包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言，應用範圍廣泛，包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Creative Coding 作品變化概念，有或沒有的差別，隨機性，色彩模式的調整...等
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處，我是在看完 Youtube 上 CS50 的課程，才理解到在不同的程式語言中，會因為語言的特性而有不同的系統，JavaScript 就是偏向比較特別的那一種。