啊啊學語

賣家上架商品時，可以展示商品圖片。表單原本只能填寫圖片網址。 現在要改成可以直接上傳圖片。 form 表單可以上傳圖片 前端 form 標籤屬性加上 enctype="multipart/form-data" 若沒有加的話，enctype 預設使用 application/x-www-form-urlencoded，這樣的話： 後端只收得到檔案名稱： request.form.get('field_name') 是檔案名稱 收不到檔案內容： request.files.get('field_name') 是 None input 標籤，改成 type="file" ，前端防呆加上 accept=".jpg,.jpge,.png,.gif" 後端 驗證檔案副檔名 驗證檔案大小 將圖片存在伺服器 後端收到的檔案，資料型態是 werkzeug.datastructures.FileStorage ，可以用 save 方法，把檔案存到指定檔案，目前是存在 static/product_images/ 資料夾。 為了避免不同使用者，不約而同上傳同樣名稱的檔案，我用 uuid 作為新的檔案名稱，再加上副檔名。 前端會用 /static/product_images/<string:filename> 這個網址請求圖片資源。 目前圖片的網址，透露了後端是用什麼資料夾結構儲存圖片資源。但路由和真正的檔案位置其實是可以分開的，設定好路由，在路由中帶入檔名，然後用 flask.send_from_directory 就可以指定從哪個資料夾取出檔案，這樣一來，網址就不會暴露檔案位置了。 commit: feat: user can upload product picture 將圖片存在 imgur 伺服器目前部署在 heroku 上。因為 heroku 的免費方案，有 the maximum slug size is 500 MB 的限制，所以要把圖片都存在伺服器有困難。因此想改成存在 imgur 上。 imgur api 官網 推薦...

 Chrome Dev Tools 中的 element.style，指的是下圖紅框中的東西 就我目前查到的資料，element.style 中的設定，來自兩個地方： 在 html 中設定 style 在 javascript 中設定 style element.style 中的設定，會覆蓋掉原本在 css 中做的設定。如果在做 css 設定時加上 ! important，就不會被覆蓋掉。但是強烈建議避免使用 ! important，因為會蓋過原本「當兩個 style 互相衝突的時候，哪個 style 會優先被套用」的權重計算，增加 debug 的難度。 可以觀察底下這個簡單的 範例 ： See the Pen element.style example by Flora ( @rossignol ) on CodePen . 在 html 中設定 style="color: blue;" 在 javascript 中設定 style.backgroundColor = "yellow" 在 css 中設定： .hi {   border: 3px solid pink;   color: red;   background-color: red; } 參考資料： What is element.style and why is it overriding my css settings?  - stackoverflow How do I find the origin source of an element.style? i.e. Which JS or jQ file is injecting it. I want to fix, not override - stackoverflow  When Using !important is The Right Choice 用 JavaScript 把 element.style 全部覆寫或清空

 事情是這樣的： 我加入了 AlphaCamp 的學期 2-1：JavaScript 前端開發課程（2020 年 11 月班），有一份作業，是要讓籃球隊計分板的計分按鈕，具備加減分的功能。 我首先利用 displayPlayerList() 函數，將每個球員的得分狀況更新到網頁上，然後再為網頁上的計分按鈕加上計分功能。觀摩其他同學繳交的作業時，我發現一份很特別的作業：有位同學把按鈕的計分功能封裝在 displayPlayerList() 的函數裡了，程式碼如下： See the Pen 學期2-1_A21Q1: 彩子的計分版：按鈕功能 _觀摩同學作業 by Flora ( @rossignol ) on CodePen . 這個寫法啟發了我，讓我好奇一件事：如果我執行了許多次 displayPlayerList()，那麼，在 dataPanel 這個元素上，到底會註冊幾個 eventListener？ 我猜測，如果執行了 n 次 displayPlayerList()，就會註冊 n 個 eventListener 的話，那麼，點擊一次加分鈕就會加 n 分，而點擊一次減分鈕就會扣 n 分。我著手驗證這個猜測，結果是，不管我執行幾次 displayPlayerList()，每次點擊都只會 +1 或 -1；但是每次點擊，DevTools 的 console 上跳出來的警告訊息數量，會隨著 displayPlayerList() 執行次數增加而增加。這究竟意味著什麼？執行 displayPlayerList() 的次數，跟 eventListener 註冊的數量之間到底是什麼關係？ 因為完全不知道該如何自己解開謎題（我試著用「eventListener count」搜尋，跳出一些「怎麼用 eventListener 計算點擊次數」的討論串，然後我就放棄用這組關鍵字尋找答案了），所以我直接留言請問助教大神。 助教大神直接找來文件 EventTarget.addEventListener() - MDN （我這才發現，自己完全沒意識到，這種時候可以去查文件），在 Multiple identical event listeners 這個小節裡提到，針對同一個 EventTarget ，無法重複註冊相同的 EventListe...

 <!DOCTYPE html> <html> <head> <meta charset=UTF-8>                          <meta name="viewport" content="width=device-width, initial-scale=1"> <title>                   </title>                     <!--在 head 末端引入 js 檔案-->                     <script type="text/javascript" src="檔案網址"></script>  </head> <body>                     <!--在 body 末端引入 js 檔案-->                     <script type="text/javascript" src="檔案網址"></script>   </body> </html>

JavaScript 語法觀念 寫 JavaScript 的推薦習慣 Operator precedence and associativity, grouping and short-circuiting  - MDN coding style： JavaScript Standard Style Guide  中，比較重要的規範： 2 格縮排 字串使用單引號 沒有未使用的變數 沒有分號 關鍵字後加空白 函式名稱後加空白 永遠使用 === Airbnb JavaScript Style Guide Google JavaScript Style Guide Idiomatic JavaScript Style Guide JavaScript: The Good Parts JavaScript 的 Reference 遊戲 深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？ 小心地雷 重新認識 JavaScript 系列 JavaScript 全攻略：克服 JS 的奇怪部分 JavaScript 常見大坑與細節 JavaScript: typeof operator 浮點數計算 型別強制轉換（coercion），範例： 3 < 2 < 1  // true  (3 < 2 是false，為了計算 false < 1 的值，false 轉換成 0) 1 + '2'  // '12'  (數字 1 轉換成字串 1) JavaScript Type Conversion - W3S JavaScript-Equality-Table  (==, ===, if() ) Equality comparisons and sameness  (==, ===, Object.is, SameValueZero) - MDN 繪製流程圖 Draw.io Google Drawing 程式碼編輯器（text editor） Visual Studio Code： 我的 Visual Studio Code 設定 Sublime Text Atom Vim Emacs Brackets WebStorm...