Posts

在 javascript 用 regular expression 為金額加上千位數分隔符號

 為了方便使用者快速判斷金額,所以想加上千位數分隔符號。例如: 3000 --> 3,000 3000000 --> 3,000,000 搜尋資料後,結論: 如果數字有小數點的話,可以用  const amount = '3000.00' amount.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',') 參考資料: Javascript之數值千分位符號(Comma)的顯示 如果沒有小數點的話,可以用  const amount = '3000' amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',') 參考資料: [Javascrpt]轉換數字成含千分位的文字   不過這個鬼畫符的語法我完全看不懂,查資料的時候一度不肯相信這是真正的程式碼呢⋯⋯因緣際會在讀書會中,得到 Helix 同學提示的關鍵字「 regular expression」,決定試著弄懂,「amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',')」到底是什麼意思。 一、 String.prototype.replace() - MDN 範例:我不小心把 world 拼成 word,想要把句子裡所有的 word 都替換成  world。 const text = 'Hello word! Hello word!' console.log(text.replace('word', 'world')) 結果印出 Hello world! Hello word! 很不幸地,只有第一個錯字有替換,其他錯字都被放生了。如果想要替換全部的 word,就要這樣寫: const text = 'Hello word! Hello word!' console.log(text.replace( /word/ g , ' world ')) ...

Chrome Dev Tools 中的 element.style 是什麼

Image
 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 全部覆寫或清空

書單

 科技與社會 數位時代的人權思辨:回溯歷史關鍵,探尋人類與未來科技發展之道 因果革命 物聯網生存指南: 5G世界的安全守則 唐鳳:我所看待的自由與未來 Google地圖革命: 從Google地圖、地球、街景到「精靈寶可夢GO」的科技傳奇內幕 切莫為惡:科技巨頭如何背叛創建初衷和人民 Instagram崛起的內幕與代價:以及它如何改變了文化、商業、科技、媒體,與我們每一個人 Networks of Outrage and Hope: Social Movements in the Internet Age, Edition 2 溝通 你想通了嗎?:解決問題之前,你該思考的6件事 從需求到設計:如何設計出客戶想要的產品(十週年紀念版) 溫伯格的軟體管理學套書(1-4卷) Google模式: 挑戰瘋狂變化世界的經營思維與工作邏輯 心理安全感的力量: 別讓沉默扼殺了你和團隊的未來 MIT最打動人心的溝通課: 組織心理學大師教你謙遜提問的藝術 理解 錯失恐懼:從心理、人際、投資到求職,讓10億人深陷的焦慮陷阱 帶腦去上班 程序開發心理學 (銀年紀念版溫伯格技術思想三部曲) 我如何真確理解世界:漢斯.羅斯林的人生思辨 真確: 扭轉十大直覺偏誤,發現事情比你想的美好 知識的假象: 為什麼我們從未獨立思考? 技術 改變世界的九大演算法:讓今日電腦無所不能的最強概念 Clean Code -- Udemy 資訊安全 碼書:編碼與解碼的戰爭 The Complete Cyber Security Course : Hackers Ex...

「軟體開發實務入門」學習心得

 我在 2020 年 12 月參加了 AlphaCampe 學期 2 -2:軟體開發實務入門,學習用 AJAX串接 API、用 MVC 架構 將程式碼模組化,以及控制程式的流程。 (這份心得是用課程中建議的  ORID 的架構寫的)

rest parameters 和閉包

 事情是這樣的: 我參加了AlphaCame 學期 2-2(2020 年 12 月開課),課程教我們製作一個翻牌配對點數的遊戲:把一副撲克牌,牌背朝上擺好。每次只能翻開兩張牌,如果翻開的牌點數不一樣 (只看點數,不看花色),一秒後會蓋牌;如果翻開的牌點數一樣,分數加十分。所有的牌都配對完後,遊戲結束。 See the Pen 學期2-2_A15_Memorizing Game by Flora ( @rossignol ) on CodePen . 原本的教案,appendWrongAnimation 函式如下: appendWrongAnimation(...cards) {     cards.map(card => {       card.classList.add('wrong')       card.addEventListener('animationend', event =>         event.classList.remove('wrong'), { once: true })     })   } 我改成下列這樣(修改處以粗體標示): appendWrongAnimation(...cards) {     cards.map(card => {       card.classList.add('wrong')       card.addEventListener('animationend', event =>          card .classList.remove('wrong'), { once: true })     })   } 當翻開的兩張牌點數不一樣,就會呼叫這個 appendWrongAnimation 函式,幫那兩張牌的外框加上閃爍的特效(在 CSS 中有設定 .wrong 的特效 ),動畫跑完後再把那兩張牌的 class name 改...

重複註冊相同的 eventListener,會發生什麼事?

 事情是這樣的: 我加入了 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...

浮點數計算

 二進制和十進制轉換過程中,產生的誤差範例: 0.1 + 0.2 = 0.30000000000000004 100 / 3     = 33.333333333333336 1/3 * 100 = 33.33333333333333 相關參考資料: 重新認識 JavaScript: Day 03 變數與資料型別 JavaScript 浮點數陷阱及解法 只有1%的Python 程式設計師搞懂過浮點數陷阱 IEEE-754 Floating Point Converter