站長阿川

站長阿川

前端＆後端工程師，希望建立一個優質的技術討論區。
註冊於2022年11月28日
  發表了 167 篇貼文
  新增了 714 則留言
  貼文共 80,859 次瀏覽
全部留言
歡迎串 Part.5 👋👋👋

Welcome~ 期待看到你的成長～

Git 入門上手教材：第1課 ── 學會 git 初始化

寫得很好，順利完成！

分享職場小菜雞所遇到的狀況

有點奇怪，實務上很少看過有人這樣做 但我想了一下，理論上，這樣做，應該也是可以 網站還是能跑，應該是 OK 的

JavaScript 系列十：第7課 ── 學習 node 匯入/匯出模組

readline和readlinine-sync同時載入的問題，看不太懂 可以單獨發一篇發問？ 最好附上一小段範例程式碼，大家會更清楚

JavaScript 系列十：第7課 ── 學習 node 匯入/匯出模組

中文顯示問題，之前有人分享 https://codelove.tw/@hung/post/jaljmx 試試看

JavaScript 系列十：第7課 ── 學習 node 匯入/匯出模組

寫得很好，順利完成！

JavaScript 系列十：第4課 ── 把 node 非同步設計改寫為同步設計

之前有人分享 https://codelove.tw/@hung/post/jaljmx 試試看

紀錄入職第2週心得

加油，哈哈 php 的問題也可以多多上來發問，我很熟

分享職場小菜雞所遇到的狀況

回答問題四：你搞錯 `PWA(Progressive Web Apps)` 的意思了，你再去多查一下 PWA 的定義 你說的只是專案在不同頁面對於 Vue 導入程度的問題 你當然可以某些頁面用 Vue 寫，某些頁面只用 jQuery，這沒有問題，也算常見 但請先跟合作的同事溝通一下，大家稍微討論一下，就可以去做了

分享職場小菜雞所遇到的狀況

回答問題二：HTTP GET 發出的請求，會出現在網址上 使用 HTTP POST，就不會出現在網址上，試試看吧 如果還是覺得不順，單獨發一篇文章，把使用情境完整描述，大家幫你看看怎麼改良

分享職場小菜雞所遇到的狀況

回答問題一：你提到的各個工具，應該通通都可以解決裝置差異的問題 關於導入方式，各種套件，通常還是會針對「純瀏覽器」環境提供導入方式，多翻閱文件找找看吧 比方說，看看這個 PostCSS，一樣可以一行導入 https://www.jsdelivr.com/package/npm/postcss

分享職場小菜雞所遇到的狀況

回答問題三：關於 `navigator.geolocation` 這應該是很單純的功能，目前我看不出哪邊出錯了 這手機上有打開「GPS」功能嗎？該不會沒打開吧？ 手機上那個「GPS」位置相關的圖示，有亮起來？

分享職場小菜雞所遇到的狀況

先回答最後一個問題：公司不使用現代流行工具，而是只用 jQuery 我必須說，貴公司工作方式「非常過時」，我猜團隊中的工程師年紀都比較大，風格老派 如果只是其中幾個專案這麼老派，那就算了，如果所有專案都這樣寫 對你的職業生涯「有不利影響」，長此以往，會很沒競爭力 你提到的工具 Vue.js、Tailwind、SCSS、webpack 都是現在流行且必學的工具 應該盡可能多去使用並且累積經驗 不過，第一份工作，怎樣都能學到東西，所以目前沒關係 但是大概 6-9 個月之後，當你覺得該學的都學完時，可以考慮換工作，因為確實需要跟著趨勢走

Git 分支問題

換個方法吧，把第二個分支的檔案名稱改掉 `index.html` 改成 `page2.html` 之類的 然後把兩個分支合併 之後在 github page 後面加上網址 `/page2` 應該就行了吧！ 試試看？

Git 分支問題

你要的功能應該做不到喔 可以設定要用哪個分支，但不能同時顯示 https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

歡迎串 Part.5 👋👋👋

沒問題，多多發問吧！ 等你開始上班再來回饋社群！ 👌

Git 分支問題

兩個分支都在上面了 分支名稱按下去就會看到了 https://github.com/pchun2330/Project/tree/Project-2 試試看吧！

JavaScript 系列三：練習6 ── dropdown 下拉式選單

寫得很好，順利完成！

關於CSS的BFC創建條件有些不明白之處

如果想看不使用 float 的寫法 可以使用 jsffidle 寫一段 float 的效果 貼上來論壇發問，我們用 flexbox & position 改寫給你看

關於CSS的BFC創建條件有些不明白之處

我真的從來沒聽過 BFC、IFC、GFC、FFC 這些名詞欸 你說的那些問題 效果 現在都用 flexbox 跟 position 就能輕鬆解決 如果還是希望搞懂這段，建議你先跳過 先往後學習 之後有時間 再回頭慢慢研究

關於CSS的BFC創建條件有些不明白之處

深入研究這個 不如直接開始寫一些小頁面試試看？ 這邊有免費課程 https://codelove.tw/@howtomakeaturn/course/Ja6JaO

關於CSS的BFC創建條件有些不明白之處

我實務上沒聽過有人討論 BFC 也沒聽過這個術語，好像用不太到這個觀念

關於CSS的BFC創建條件有些不明白之處

我晚點來研究一下 先說一點 feedback：現在幾乎都不會用到 `overflow: auto;` 了欸 以前排版可能偶爾會用到，現在幾乎都不會用到這屬性 通常用 flexbox 或是 position 就可以做到同樣效果

JavaScript 系列十：第2課 ── 用 node 讀取檔案內容

寫得很好，順利完成！

初來乍到

你好 很好的提問 看了你目前的技能包 我認為你的準備方向大致沒錯 很好 但是缺了一項：資料庫操作 你需要補上 MySql / MariaDB 或者 NoSql 的技能 --- 請試著做一個包含 CRUD 動作的網站 也就是 create/read/update/delete 行為 比方說部落格 然後有完整 CRUD 功能 或者是樓上說的 TODO 工具 不要小看 CRUD 實務上 以接案公司來說 大多數後端需求 就只是一堆 CRUD 任務而已 很單純 --- 最後 迷惘的話 打開徵才網站 試著找找看哪些是你的目標 看看人家徵才條件 有缺的話補一補 還有問題可以再多多上來發問 這樣就對了！

紀錄入職第一週心得

可以，直接發佈新貼文，方便大家一起回答

紀錄入職第一週心得

第一份工作最重要的事情：能讓自己有進步的感覺 學習、成長最重要，其他次要 因為工作都可以再換，軟體工程師流動率本來就很高

工作上遇到CSS權重的問題

很好的提問，我單獨寫一篇 https://codelove.tw/@howtomakeaturn/post/L3Q9d3

給OOP初學者的建議：先搞懂「資料跟行為在一起」就好，其它的慢慢來

因為多數工程師，對於各種業界觀念，其實都是一知半解的 這就會導致你遇到的狀況，就是實在看不懂那些人在講什麼 這狀況很正常，能真正把各種觀念，深入淺出說明的人，其實不多

歡迎串 Part.4 👋👋👋

歡迎加入！ 有任何問題也歡迎多多提問、讓大家一起討論、教學相長！

JavaScript 系列七：第2課 ── 體驗一下 Reactivity 的效果與便利

寫得很好，順利完成！

JavaScript 系列八：第3課 ── 分帳應用程式

Very good！很棒的 UI！順利完成！

JavaScript 系列十：第1課 ── 安裝 node 環境

寫得很好，順利完成！

JavaScript 系列三：練習5 ── collapse 折疊效果

寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

Git 入門上手教材：第7課 ── 學會處理 git 衝突

很棒！就是這樣！順利完成！

紀錄入職第一週心得

別擔心，剛開始都是這樣，很正常～ 環境設定，就是多查詢、多研究，即可～ 有不懂的觀念＆工具都可以多多上來發問～

紀錄入職第一週心得

環境設定的東西，可以多做一點筆記~ 未來遇到類似狀況，就不會花那麼久~

紀錄入職第一週心得

剛轉職都是這樣，很正常~ 把不懂的東西紀錄一下，找時間一個一個研究，幾週內就會顯著改善~

西元 2023 年了，還值得花時間學 Dreamweaver 嗎？簡單分享幾個觀點

歡迎他也來多多發問、參與討論 本站需要更多人氣～

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

Git 入門上手教材：第7課 ── 學會處理 git 衝突

很棒！就是這樣！順利完成！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

寫得很好，順利通過！

JavaScript 系列十：第7課 ── 學習 node 匯入/匯出模組

寫得很好，順利完成！

使用 readline-sync 套件 VSCode 亂碼 (windows)

很棒的分享 繼續保持 造福後人！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利完成！

🎉🎉🎉 恭喜 birdie 順利轉職＆給新入行者的簡單建議 🎉🎉🎉

還 ok 我指導過大多數半路出家轉職 第一份工作都是3xk ~ 40k左右 工作前三～五年 大家都進步很快 薪資成長空間也很快 一開始 能學得到東西最重要

🎉🎉🎉 恭喜 birdie 順利轉職＆給新入行者的簡單建議 🎉🎉🎉

社會上什麼類型的公司都有 有些太傳統，那麼也許不適合去那兒學新技術

🎉🎉🎉 恭喜 birdie 順利轉職＆給新入行者的簡單建議 🎉🎉🎉

Dreamweaver 簡單觀點，已發布，請參考

🎉🎉🎉 恭喜 birdie 順利轉職＆給新入行者的簡單建議 🎉🎉🎉

問吧，都會變成大家討論、集思廣益的素材～

JavaScript 系列三：練習3 ── modal 互動視窗元件

寫得很好，順利完成！

JavaScript 系列三：練習2 ── toast 吐司元件

寫得很好，順利完成！

JavaScript 系列三：練習1 ── alert 示警元件

寫得很好，順利完成！

分享最近面試心得

very good~

最新 js 教材上線：玩玩看 Node，做做看老派 CLI 應用程式

@birdie2019 @hung @superyngo 來寫寫看 可打下 node 基礎，對未來大量 js 工具的使用都有幫助～

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

Git 入門上手教材：第4課 ── 學會 git 重置指令

不太對，checkout 可以在不同歷史版本間切來切去，不太像「下一步」

Git 入門上手教材：第2課 ── 學會 git 基本指令

謝謝分享！滿奇怪的，我猜，可能是作業系統的關係！可能微軟的作業系統會這樣！

Git 入門上手教材：第7課 ── 學會處理 git 衝突

很棒！就是這樣！順利完成！

如何隱藏api key?

就我所知，這好像沒辦法欸 google map 的 javascript library api key 難免會出現在瀏覽器端，應該沒辦法隱藏 只能從 google 管理面板那邊，設定「限定 HTTP 網域」 然後這組 key 就只能在特定網站上有用 https://cloud.google.com/docs/authentication/api-keys?_ga=2.73517846.-502794744.1675381196&hl=zh-cn#securing_an_api_key

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

歡迎串 Part.3 👋👋👋

另外，關於網頁設計的 html / css / js，參考自學專區即可～

歡迎串 Part.3 👋👋👋

你好，很好的分享 我寫了一篇文章，簡單分享幾個觀點回應 https://codelove.tw/@howtomakeaturn/post/AqJ473

寫程式工作10年之後，對於2023的一些看法＆建議分享

你好 很好的提問 我認為那些媒體＆網紅 通通都在唬爛 簡單寫了一篇觀點：https://codelove.tw/@howtomakeaturn/post/Zq4Vd3 給你參考

JavaScript 系列八：第2課 ── 筆記應用程式

寫得很好，順利完成！ 樂趣、進步、成就感，才是最重要的！ 剛開始開發實務專案，程式碼亂很正常，經驗多了，自然就會改善！

JavaScript 系列二：第6課 ── 讀取與修改 DOM 元素的 style

寫得很好，順利完成！

Git 入門上手教材：第7課 ── 學會處理 git 衝突

很棒！就是這樣！順利完成！

Git 入門上手教材：第6課 ── 學會 git pull

很棒！就是這樣！順利完成！

寫程式工作10年之後，對於2023的一些看法＆建議分享

你是不是有一個留言發問，然後刪掉了？ 我寫一篇文章回答囉： https://codelove.tw/@howtomakeaturn/post/gqve0a

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

Git 入門上手教材：第5課 ── 學會連線 github

很棒！就是這樣！順利完成！

Git 入門上手教材：第4課 ── 學會 git 重置指令

很棒！就是這樣！順利完成！

Git 入門上手教材：第3課 ── 學會 git 版本切換

很棒！就是這樣！順利完成！

Git 入門上手教材：第2課 ── 學會 git 基本指令

很棒！就是這樣！順利完成！ --- 寫程式也是寫作的一種，工作行為跟作家非常相似！

Git 入門上手教材：第1課 ── 學會 git 初始化

很棒！就是這樣！順利完成！

甚麼是API?

很好的提問 我單獨寫一篇說明 請參考 https://codelove.tw/@howtomakeaturn/post/NxNBwx

甚麼是API?

很好的問題！這是程式設計中，幾乎每天都會用到的一個詞 API 全名是 Application Programming Interface，中文叫「應用程式介面」 簡單來說，就是程式跟程式彼此溝通的時候，對外開放使用的介面 打個比方，在硬體的領域來說，筆電的介面是鍵盤、滑鼠，要跟筆電互動，就是敲鍵盤、操作滑鼠 手機的介面是觸控式螢幕，電視的介面是遙控器 而在軟體工程領域、純軟體的領域，每個系統的介面是什麼？就由系統開發者自行決定 --- 以業界實務來說，我舉幾個每天都會用到的情境 ## 開發線上刷信用卡功能，金流功能由第三方廠商提供 後端工程師會說：金流廠商的 API 文件在哪呀？有提供哪些 API？他們有超商付款的 API 嗎？ ## 公司內部，前後端溝通 前端工程師會說：我這邊需要撈會員資料、訂單資料、產品資料，這幾組 API，你再開給我 ## 炒作加密貨幣的工程師，在跟交易所的客服聯絡 工程師：你們交易所有 API 嗎？驗證方式是什麼？我串你們 API 就可以自動交易了吧？ --- 實務上，大家常說的 API，有時候是指「功能規格」，有時候是指「實際可以呼叫、互動使用的網址」 要看前後文才能精準定義，但大家其實都看得懂 「使用 API」這個行為，我們通常會說「串 API」，也就是串接的意思 --- 以上，簡單說明，有沒有不清楚的地方？

JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class

寫得很好，順利完成！

JavaScript 系列二：第3課 ── 認識 for 迴圈

寫得很好，順利完成！

我要繼續寫一些新教材囉！

新教材已發佈～ 來寫寫看～

想請教javascript除了做網頁還能做什麼?

研發老人相關醫療產品的話，我直覺有幾個方向 ## 手機或者平板應用程式開發 有個簡單易用的程式，直接在常用的裝置上，會很棒 這樣的話，蘋果體系就是用 objective c 或者 swift 來寫 安卓體系就是用 java 或者 kotlin 來寫 ## 嵌入式裝置的程式開發 跟一些硬體搭配，通常好像會用 Java 來寫這類裝置的應用程式（這塊我比較不熟） --- 我認為，你可以先寫一些給老人用的簡單工具網頁，或者健康資訊追蹤手機 app 開始！

想請教javascript除了做網頁還能做什麼?

關於程式語言的資料型別 對於資料型別的理解，是程式設計師長遠來說需要培養的基本功 為了學習方便，可以先學弱型別，再學強型別，這沒問題，逐步加深對於「程式設計」的理解

想請教javascript除了做網頁還能做什麼?

很好的提問，簡單分享幾個方向 ## 網頁前端 javascript 是王者，這不用講 ## 網頁後端 `Node.js` `Express` 自己去找看看職缺 其實很多公司是用 js 在寫後端喔 ## 桌面應用程式 別懷疑，可以寫桌面應用程式，請查詢 `Electron` 框架 --- 除此之外，其餘領域，確實比較少用 javascript 語言喔！ 很多領域，還是 Python 或者 C 之類的，比較常使用

JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

寫得很好，順利完成！

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

寫得很好，順利完成！

MVC是一個巨大誤會

這是我2015年寫的文章，當時（2013-2014）面試時，常常被問到 MVC，我覺得很困擾 因為我發現幾乎所有人都不知道自己在講什麼，所以寫了篇文章闡述我對 MVC 的看法 2023年不知道還有沒有公司面試會問這個。順手轉貼分享一下

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

JavaScript 系列一：第7課 ── 認識巢狀結構

寫得很好，順利完成！

JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

寫得很好，順利完成！

JavaScript 系列五：第4課 ── 學會 AJAX 基本原理

寫得很好，順利完成！

JavaScript 系列五：第3課 ── 變數作用域、箭頭函式、ES6 語法

寫得很好，順利完成！

JavaScript 系列五：第2課 ── 學會 Local Storage 相關功能

寫得很好，順利完成！

JavaScript 系列六：第7課 ── 資料序列化

寫得很好，順利完成！

[好文分享] 太屌了吧！？用Class(類)製作Jquery的效果！

看起來，你有在寫系列文章的習慣！ 或許，我找時間開發功能，讓多篇文章可以串成一份系列文章，方便你寫作！

[好文分享] 太屌了吧！？用Class(類)製作Jquery的效果！

像這樣把現有的套件功能臨摹一次，是很好的學習方法！ 大家可以多多向這種態度看齊！

[好文分享] 太屌了吧！？用Class(類)製作Jquery的效果！

小網站、快速開發的話，jQuery 還是很好用的，我自己也經常使用！

我有個疑問

沒註冊的話，按下 save 之後，要記得複製網址。 註冊登入的話，比較好用。儲存之後可以在個人頁面找到。

HTML新標籤dialog簡化modal實作

looks good! 查了一下，各大瀏覽器也都已有支援！ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

JavaScript 系列五：第1課 ── 學會 Cookie 相關功能

寫得很好，順利完成！

JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

寫得很好，順利完成！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

兩個按鈕的訊息，弄相反囉～

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利完成！

還好有站長阿川

寫程式這個技能，不可能只依靠上課、讀書、聽課，就吸收進去 一定要大量的親自去寫、去完成，才有可能吸收 一開始找各種有趣的作業來寫 之後就可以自己發想、自己研發一些有趣的小專案 --- 祝：早日研發出「超猛醫療 IT 工具」

[心態分享] 新手學前端應該具備的心態：絕對不是謙虛，假謙虛的心態：做作又噁心！

別擔心，放輕鬆。身為開發者，專注在 1. 提升自己的研發能力 2. 提升自己的溝通能力 就對了 每個社群各自有一些習慣與優缺點，不用太在乎～

RWD 網頁設計入門：第5課 ── 能屈能伸，讓圖片適應各種螢幕

寫得很好，順利完成！

JavaScript 系列五：第1課 ── 學會 Cookie 相關功能

寫得很好，順利完成！

JavaScript 系列八：第1課 ── 碼表應用程式

寫得很好，順利完成！

JavaScript 系列七：第7課 ── 認識 Template Refs

寫得很好，順利完成！

JavaScript 系列四：第7課 ── TinyMCE 套件

寫得很好，順利完成！

JavaScript 系列三：練習7 ── carousel 輪播元件

寫得很好，順利完成！

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

寫得很好，順利通過！

分享最近面試心得

非常好的分享～ 簡單分享一些回饋～ --- 首先，你分享的六個 JS 面試小測驗，有五個我答不出來，只有第一題我看得出正確答案～ 再來，我前幾年有次去面試 senior 職缺的時候，白紙測驗，我連 for 迴圈都寫錯，我搞錯 `++` 是第二或第三個參數。最後我沒有被錄取，我一點都不在乎，因為我覺得這些都不重要～ 開發專案時，刷新畫面一下，或者 IDE 根本就會檢查的東西，我不會花費記憶力去想～ 我想說的是，不同公司對於面試方法的觀點天差地遠，認為哪些程式觀念重要的看法也差很多～ 四處看看，覺得有缺觀念就自學補充一下～ 但是，很多面試內容也未必有道理～不需要太受打擊，持續學習就是了～ --- 關於 class 與 this，以前端開發來說，大概 2015 年以前，工程師迫切渴望 JS 也可以寫 class 跟 this 2015 - 2020 終於可以了，大家用 JS 大量寫 OOP，不過呢，2021 之後，大家又迫切渴望擺脫 OOP 你從 vue 2 開始學 vue 3，就會發現 `this` 不見了，開發過程根本不寫 this 了 React 18 之後更是如此，大家開始鄙視 OOP 了～ 我想說的是，OOP 是一個重要觀念，需要知道一下，但也不用花太多時間專精～ 我幾年前有寫一篇 OOP 觀念文，給你參考：https://codelove.tw/@howtomakeaturn/post/GqPYzx --- 最後，以我研發的教材來說，我覺得應該不少「接案公司」會覺得畢業生是即戰力～ 不過「研發自家產品」的公司，應該不少會覺得基礎不夠扎實，覺得這套教材的畢業生不夠用～ 我可以理解，也可以預期大概會是這樣～ --- 以上，有遇到投緣的公司、把你當即戰力的公司，就儘早上班、賺錢、累積經驗～ 真的到處碰壁，就補充一下相關知識，這條路學無止盡～ 祝早日上班，有問題＆心得多多上來寫作分享～

歡迎串 Part.1 👋👋👋

Very good~! 慢慢來，熟悉程式語言的運作方式，需要一點時間 作業盡量自己寫，卡關再參考別人的，學習效果比較好 有非常多作業可以練習，你會慢慢抓到感覺的～ 有觀念實在想不通，就到討論區多多發問，因為「提問」也是「學習」很重要的技巧之一 加油囉～！

04/28 本週閒聊串 😁😁😁

很好的分享 哈哈 你可以單獨發一篇文章嗎？比較多人可以看到~ 我在那邊留言給你一些建議~👍👍

[前端學習] 用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！

我又看了幾篇文章 https://csplite.com/csp215/ 我目前感覺是：CSP 應該是支援度相當高，可以的話，也應該要設定的東西 Nuxt SSR 有支援，但 SPA 無解 至於類似框架的情況呢？ 以 React 體系的 Next 來說 https://csplite.com/csp251/ SSR 跟 SPA 都有支援 相關討論有很多：https://github.com/vercel/next.js/issues/256 --- 然後，這個可能可以看一下 https://github.com/victor-perez/nuxt-helmet

[前端學習] 用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！

哇，我又研究了一下，Nuxt 的 CSP 好像只有 SSR 會支援，SPA 的話沒辦法支援 https://github.com/nuxt/nuxt/issues/6592

[前端學習] 用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！

https://nuxtjs.org/docs/configuration-glossary/configuration-render/#csp 這個設定值，調整為 `true` 可以搞定嗎？

[前端學習] 用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！

嗨 Jordan，先別管 Apple 了，我研究了一下，現在絕大多數前端技術，應該都會支援 CSP 的！ 看一下這篇：https://stackoverflow.com/questions/58397934/are-we-forced-to-use-unsafe-inline-in-our-csp-when-using-vue-js > According to the Vue.js docs, the runtime build is fully CSP-compliant. > Nuxt is supporting a csp config to create hashes via webpack sent as header on dynamic SSR mode and meta elements otherwise (see https://github.com/nuxt/nuxt.js/pull/5354) 有試過這個方向嗎？

JavaScript 系列七：第1課 ── 認識 Vue 基本環境與 render state

寫得很好，順利完成！

04/28 本週閒聊串 😁😁😁

我這邊分享手邊幾個情報 ### 第一個是台灣獵人頭公司跟我分享的郵件 > 最近一切都還好嗎? 這次分享2023 Q2 Job Market Report，尤其是科技產業世界性的裁員潮，光是 2023 年 1 月，美國科技業裁員總數就突破 10 萬人。同樣受到全球經濟走緩影響，台灣人力市場也有類似波動。以科技產業為例，今年第一季所開出的職缺人數，與 2022 年第四季相比，少了約 50%。軟體業盤點人力、調整過剩人力。2023 年的整體人力市場將有別於 2022 年年初大量徵才的氛圍，進入穩紮穩打、檢視人力資源與配置的階段。 ### 第二個是我合作的美國接案公司寄給我的郵件 > All, > Given the current macroeconomic situation, we are reaching out with information that we hope will be helpful. Like many companies, Toptal clients are increasingly budget constrained. In addition, we have a larger number of talent indicating they are available for engagements, resulting in a more competitive market than ever before. ## 個人看法 我認為近期軟體工程師的機會＆收入 明顯是受影響了 但是呢 應該是以 senior 職缺的影響比較大 我認為 junior 的職缺應該還是很多 綜合起來 建議大家： 轉職的時候 穩紮穩打 目前工作不一定要先辭掉 確定有錄取再離職＆轉職 個人小觀點 😎

JavaScript 系列九:發表作業＆心得分享

Very good sharing! 感謝付費支持！ 😄😄😄

自學網頁の嬰兒教材：第7課 ── 視窗與更多元件：自己手作一個 Facebook 發文按鈕！

寫得很好，順利完成！

自學網頁の嬰兒教材：第3課 ── 網格系統：頁面分區塊排個版

寫得很好，順利完成！

JavaScript 系列九：第7課 ── 學習開發狀態複雜的 vue 元件

寫得非常好！成果非常優質！順利完成！ 歡迎到討論專區，發表作業＆心得分享！

[好文轉載]哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？

nice sharing! 前端框架的底層，就是類似這樣的東西～！

JavaScript 系列九：結語

# 通通完成的同學，請看這邊～ --- ## [給寫完 JavaScript 系列九的同學們：求職前的準備＆簡易指南](https://codelove.tw/@howtomakeaturn/post/k31dYx) ---

JavaScript 系列九：第6課 ── 學習用外部狀態管理 vue 元件

寫得很好，順利完成！

JavaScript 系列九：第5課 ── 學習 Vue 的 slots 觀念

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── 安裝：網頁突然好美美

寫得很好，順利完成！

自學網頁の嬰兒教材：第5課 ── 用力送出表單

寫得很好，順利完成！

自學網頁の嬰兒教材：第4課 ── 好用的表格

順利完成！

JavaScript 系列三：練習5 ── collapse 折疊效果

寫得很好，順利完成！

JavaScript 系列三：練習4 ── 表單驗證

寫得很好，順利完成！

JavaScript 系列三：練習3 ── modal 互動視窗元件

寫得很好，順利完成！

[前端學習] 用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！

@jordan 你之前是用什麼軟體掃描？有錯誤訊息可以參考嗎？ 大家一起研究一下，相關資安漏洞在哪邊！

[前端學習] 用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！

很好的問題！感謝 jordan 提出！ 這問題我也從沒想過，我想了一下，有點不懂為什麼用 js 改 css 算是資安漏洞？ 我研究了一下，會不會跟 css 可以執行 javascript 有關？ https://codepen.io/3n3a/pen/RwGKwrX

被廣告洗版了？

阻擋機器人在技術上有各種方法 各有優缺 不過就經營上考量 一開始什麼都不用 手動刪一刪就是

被廣告洗版了？

對我手動進資料庫刪掉而已 被洗是經營網站一定會遇到的事情 早晚而已哈哈

# JS油猴系列-遮蔽廣告(D卡未登入)腳本、自定義新增名單

很好的文章，我已拿來作為宣傳內容，分享到眾多公開社團！ https://www.facebook.com/groups/javascript.tw/permalink/5541848932583066/ https://www.facebook.com/groups/javascript.html.css.node/permalink/1816342628760240/ https://www.facebook.com/groups/f2e.tw/permalink/6002559003114748/

[前端學習] 用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！

很好的文章，我已拿來作為宣傳內容，分享到眾多公開社團！ https://www.facebook.com/groups/javascript.tw/permalink/5541848932583066/ https://www.facebook.com/groups/javascript.html.css.node/permalink/1816342628760240/ https://www.facebook.com/groups/f2e.tw/permalink/6002559003114748/

發文點子

很好的方向 我也很常寫這種 todo / 筆記類型的貼文

[資源分享] 裝爆的VScode擴充套件，人生沒有擴充套件就是黑白的！

很棒的分享，我在 VScode 主要也是裝一些 code syntax highlighting / fixer / prettier 輔助！ 另外有幾個不錯的，順便講一下 # Tabnine https://www.tabnine.com/ 這是 AI 輔助寫程式，有免費版，效果很好，我用半年之後，就升級付費版了！ # Auto Close Tag 寫 html 很方便 # Auto Rename Tag 寫 html 很方便 --- 簡單拋磚引玉！

JavaScript（九）—— 不想教你 Vue，只想讓你做酷炫元件 - 統整

很棒的分享！有發現好文章或者有心得/筆記分享，記得也多多上來寫文章交流！可順便練習寫作能力！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第3課 ── 網頁排版

很正常，慢慢來即可！ 寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

JavaScript 系列九：第4課 ── 學習 Vue 的 v-model 觀念

寫得很好，順利完成！

JavaScript 系列九：第3課 ── 學習 Vue 的 events 觀念

寫得很好，順利完成！

JavaScript 系列九：第2課 ── 學習 Vue 的 props 觀念

寫得很好，順利完成！

JavaScript 系列九：第1課 ── 學習 Vue 元件基本觀念

寫得很好，順利完成！

JavaScript 系列三：練習2 ── toast 吐司元件

寫得很好，順利完成！

JavaScript 系列三：練習1 ── alert 示警元件

寫得很好，順利完成！

JavaScript 系列二：第7課 ── 用 Selector API 選取元素

寫得很好，順利完成！

自學網頁の嬰兒教材：JavaScript（八）作業分享

寫得很好！很棒的分享！👍

JavaScript 系列八：第7課 ── 國家資訊與地圖應用程式

寫得很好，順利完成！

JS學習文章-IT邦優良系列文

great sharing!

給新手參考：前端專案的檔案架構範例

補充一些個人經驗：這些架構參考就好，有些資料夾一開始用不到的話，不用勉強加進去 覺得有必要時，再拆細就好了

JavaScript 系列八：第6課 ── 天氣查詢應用程式

寫得很好，順利完成！

JavaScript 系列八：第5課 ── 體重追蹤應用程式

寫得很好，順利完成！

JavaScript 系列八：第4課 ── 行事曆應用程式

寫得很好，順利完成！

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

寫得很好，順利完成！

JavaScript 系列一：第7課 ── 認識巢狀結構

寫得很好，順利完成！ 討論區已有人回覆，再試試看有沒有解決了！

自學網頁の嬰兒教材：第3課 ── 網頁排版

寫得很好，順利通過！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：JavaScript（九）作業分享

Very good sharing! 成果品質很高！

給寫完 JavaScript 系列九的同學們：求職前的準備＆簡易指南

論壇使用人數還是偏少 我再想想看有什麼方法，四處去招募一些新用戶 長期來說，希望論壇有更多互動、教學相長、也讓論壇內容更多，哈

JavaScript 系列七：第5課 ── 學習 Vue 事件處理的寫法

寫得很好，順利完成！

JavaScript 系列八：第3課 ── 分帳應用程式

Very good! 寫得很好，順利完成！

JavaScript 系列一：第3課 ── 修改 html 的內容

寫得很好，順利完成！

JavaScript 系列五：第1課 ── 學會 Cookie 相關功能

寫得很好，順利完成！

JavaScript 系列四：第7課 ── TinyMCE 套件

寫得很好，順利完成！

JavaScript 系列四：第6課 ── kenwheeler/slick 套件

寫得很好，順利完成！

JavaScript 系列四：第5課 ── xdan/datetimepicker 套件

寫得很好，順利完成！

JavaScript 系列四：第4課 ── jQuery 套件

這兩個連結打不開欸

JavaScript 系列四：第3課 ── Chart.js 套件

寫得很好，順利完成！

JavaScript 系列四：第2課 ── vanilla-lazyload 套件

寫得很好，順利完成！

JavaScript 系列四：第1課 ── autosize 套件

寫得很好，順利完成！

JavaScript 系列二：第7課 ── 用 Selector API 選取元素

寫得很好，順利完成！

JavaScript 系列一：第7課 ── 認識巢狀結構

寫得很好，順利完成！

[資源分享] 網頁設計丙級術科，相關教學影片

Great sharing!

JavaScript 系列七：第1課 ── 認識 Vue 基本環境與 render state

寫得很好，順利完成！

自學網頁の嬰兒教材：第7課 ── 視窗與更多元件：自己手作一個 Facebook 發文按鈕！

寫得很好，順利完成！

JavaScript 系列六：第7課 ── 資料序列化

畫面上，沒看到儲存按鈕欸

JavaScript 系列六：第6課 ── 認識 data model 的優點

寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

設計＆美感，再慢慢學即可 寫得很好，順利完成！

自學網頁の嬰兒教材：第6課 ── 表格、表單與按鈕：基本元素也漂亮

寫得很好，順利完成！

JavaScript 系列八：第2課 ── 筆記應用程式

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

JavaScript 系列九：第7課 ── 學習開發狀態複雜的 vue 元件

寫得非常好！成果非常優質！順利完成！ 歡迎到討論專區，發表作業＆心得分享！ 如果準備轉職的話，可參考我新寫的文章 https://codelove.tw/@howtomakeaturn/post/k31dYx

JavaScript 系列三：練習1 ── alert 示警元件

寫得很好，順利完成！

JavaScript 系列三：練習6 ── dropdown 下拉式選單

寫得很好，順利完成！

JavaScript 系列三：練習5 ── collapse 折疊效果

寫得很好，順利完成！

JavaScript 系列三：練習4 ── 表單驗證

寫得很好，順利完成！

RWD 網頁設計入門：第5課 ── 能屈能伸，讓圖片適應各種螢幕

寫得很好，順利完成！

JavaScript 系列三：練習3 ── modal 互動視窗元件

寫得很好，順利完成！

JavaScript 系列三：練習2 ── toast 吐司元件

寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── 導覽列：替訪客指點方向

寫得很好，順利完成！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利完成！

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

寫得很好，順利完成！

JavaScript 系列九：第7課 ── 學習開發狀態複雜的 vue 元件

寫得非常好！成果非常優質！順利完成！

自學網頁の嬰兒教材：第5課 ── 訊息框框：有話對你說

寫得很好，順利完成！

自學網頁の嬰兒教材：第4課 ── 卡片元件：又美又好用的元件

寫得很好，順利完成！

自學網頁の嬰兒教材：第3課 ── 網格系統：頁面分區塊排個版

寫得很好，順利完成！

JavaScript 系列六：第5課 ── 熟悉匿名函式

寫得很好，順利完成！

JavaScript 系列八：第1課 ── 碼表應用程式

寫得很好，順利完成！

JavaScript 系列七：結語

有機會多多到討論區參與討論、分享找到的文章、寫技術筆記、心得，會讓學習效果更好，可以持續進步哦！

JavaScript 系列七：第7課 ── 認識 Template Refs

寫得很好，順利完成！

JavaScript 系列七：第6課 ── 認識 Lifecycle Hooks 與 Watchers

寫得很好，順利完成！

JavaScript 系列七：第5課 ── 學習 Vue 事件處理的寫法

寫得很好，順利完成！

JavaScript 系列九：第6課 ── 學習用外部狀態管理 vue 元件

寫得很好，順利完成！

JavaScript 系列九：第6課 ── 學習用外部狀態管理 vue 元件

寫得很好，順利完成！

JavaScript 系列九：第5課 ── 學習 Vue 的 slots 觀念

寫得很好，順利完成！

JavaScript 系列九：第4課 ── 學習 Vue 的 v-model 觀念

寫得很好，順利完成！

JavaScript 系列九：第3課 ── 學習 Vue 的 events 觀念

寫得很好，順利完成！

RWD 網頁設計入門：第5課 ── 能屈能伸，讓圖片適應各種螢幕

打不開欸 好像沒公開

RWD 網頁設計入門：第4課 ── 頭條新聞在電腦上順序是中間，在手機上順序是最前面

順利完成！

RWD 網頁設計入門：第3課 ── 有些東西只在電腦顯示，有些東西只在手機顯示

順利完成！

RWD 網頁設計入門：第2課 ── 適應各種裝置的螢幕：流動的網格系統

順利完成！

發問-教學經驗的累積？或是說教學風格的培養？

參與 open source 是工程師重要的學習方式 我過去發佈過的專案在 https://github.com/howtomakeaturn 但是近幾年我比較少開源專案 --- 另外，我確實發表、上線過很多小網站 有些是我個人興趣，有些是與新創團隊合作 有些可以在這邊看到 https://www.pttweb.cc/user/poopoo888888?t=article --- 以上，供您參考 祝 Happy Coding!

發問-教學經驗的累積？或是說教學風格的培養？

你好 就跟學校老師有各種風格一樣 各種場景也有各種適合的教學方式 不需要費心去找到一個完美的教學方式 不存在的 就先專心在「替一些人提供價值」上面 先做 先上線就對了 就先設法幫到一些人 就對了

自學網頁の嬰兒教材：第1課 ── 安裝：網頁突然好美美

寫得很好，順利完成！

JavaScript 系列六：第1課 ── 認識 data model 與 render function

寫得很好，順利完成！

自學網頁の嬰兒教材：第3課 ── 網格系統：頁面分區塊排個版

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

寫得很好，順利完成！

JavaScript 系列七：第4課 ── 學習 Vue 迴圈的寫法

寫得很好，順利完成！

JavaScript 系列七：第3課 ── 學習 Vue 條件判斷式的寫法

寫得很好，順利完成！

JavaScript 系列七：第1課 ── 認識 Vue 基本環境與 render state

寫得很好，順利完成！

JavaScript 系列七：第2課 ── 體驗一下 Reactivity 的效果與便利

寫得很好，順利完成！

JavaScript 系列六：第7課 ── 資料序列化

寫得很好，順利完成！

JavaScript 系列六：第6課 ── 認識 data model 的優點

寫得很好，順利完成！

JavaScript 系列九：第5課 ── 學習 Vue 的 slots 觀念

寫得很好，順利完成！

JavaScript 系列九：第4課 ── 學習 Vue 的 v-model 觀念

寫得很好，順利完成！

JavaScript 系列九：第3課 ── 學習 Vue 的 events 觀念

寫得很好，順利完成！

JavaScript 系列九：第2課 ── 學習 Vue 的 props 觀念

寫得很好，順利完成！

JavaScript 系列九：第2課 ── 學習 Vue 的 props 觀念

寫得很好，順利完成！

JavaScript 系列九：第1課 ── 學習 Vue 元件基本觀念

寫得很好，順利完成！

JavaScript 系列九：第1課 ── 學習 Vue 元件基本觀念

寫得很好，順利完成！

JavaScript 系列八：第6課 ── 天氣查詢應用程式

寫得很好！網頁很漂亮！順利通過！

JavaScript 系列五：第6課 ── 學會 AJAX 與各種 HTTP 請求方法

寫得很好，順利完成！

JavaScript 系列一：第7課 ── 認識巢狀結構

寫得很好，順利完成！

JavaScript 系列一：第6課 ── 認識資料型態與轉換

寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── 導覽列：替訪客指點方向

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── 安裝：網頁突然好美美

寫得很好，順利完成！

JavaScript 系列八：第7課 ── 國家資訊與地圖應用程式

寫得很好，順利完成！

JavaScript 系列八：第5課 ── 體重追蹤應用程式

寫得很好，順利完成！

JavaScript 系列六：第5課 ── 熟悉匿名函式

寫得很好，順利完成！

JavaScript 系列六：第4課 ── 熟悉 render function

寫得很好，順利完成！

JavaScript 系列六：第3課 ── 認識匿名函式

我打開 文字怎都是白色的 你是用什麼瀏覽器？

JavaScript 系列六：第2課 ── 認識陣列操作

寫得很好，順利完成！

JavaScript 系列六：第1課 ── 認識 data model 與 render function

寫得很好，順利完成！

JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

視窗裡面文字用白色，乍看之下找不到

JavaScript 系列二：第7課 ── 用 Selector API 選取元素

寫得很好，順利完成！

JavaScript 系列二：第6課 ── 讀取與修改 DOM 元素的 style

寫得很好，順利完成！

JavaScript 系列二：第5課 ── 認識 onchange 事件

寫得很好，順利完成！

JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class

寫得很好，順利完成！

[資源分享] 超好用的擴充套件你還不裝？裝了人生直接逆襲，日子過得好舒服！！

很好的分享，我也分享幾個我安裝的 - Wappalyzer - 分析網站背後技術 - ColorZilla - 抓畫面色碼 - GoFullPage - 滾動網頁截圖 - UnDistracted - 社群媒體專心工具 - Chrome Notepad - 臨時打筆記

Svelte 程式範例：動手寫一個「蕃茄鐘工作法」小專案

元件檔案 `.svelte` 的格式，看起來跟 Vue 的 `.vue` 格式很像！轉換成本應該不高 目前乍看之下，除了拿掉 `Virtual DOM` 之外，不知道用起來差異比較大的地方有哪些

最新前端框架 Svelte：參考資源整理大全

稍微看了一下，最近在國外確實很紅，但我有點不懂 有使用過的朋友，能分享一下經驗嗎？

Javascript(二) 作業三 問題

在程式設計領域，`等號`的意義，跟在數學上不一樣 `=` 我們叫 `指派` `==` 才叫 `等於` 所以這段程式碼 ``` var text = ""; text = text + x; ``` 先把空字串指派到變數 `text` 接著把變數 `text` 的內容，加上變數 `x` 的內容（因為都是字串，所以是把兩個字串黏在一起） 然後把最新的內容，指派到變數 `text` 裡面

JavaScript 系列二：第3課 ── 認識 for 迴圈

寫得很好，順利完成！ --- 發問的話，請到討論區，統一在那邊討論喔！

自學網頁の嬰兒教材：第6課 ── 在自己電腦上寫網頁

寫得很好，順利完成！

JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

寫得很好，順利完成！

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

寫得很好，順利完成！

JavaScript 系列三：練習4 ── 表單驗證

寫得很好，順利完成！

JavaScript 系列五：第6課 ── 學會 AJAX 與各種 HTTP 請求方法

寫得很好，順利完成！

JavaScript 系列五：第3課 ── 變數作用域、箭頭函式、ES6 語法

寫得很好，順利完成！

JavaScript 系列五：第2課 ── 學會 Local Storage 相關功能

寫得很好，順利完成！

JavaScript 系列五：第5課 ── 學會 AJAX 錯誤處理

沒有錯誤處理喔～

JavaScript 系列五：第5課 ── 學會 AJAX 錯誤處理

寫得很好，順利完成！

JavaScript 系列五：第4課 ── 學會 AJAX 基本原理

寫得很好，順利完成！

JavaScript 系列五：第4課 ── 學會 AJAX 基本原理

寫得很好，順利完成！

JavaScript 系列五：第1課 ── 學會 Cookie 相關功能

寫得很好，順利完成！

JavaScript 系列八：第4課 ── 行事曆應用程式

寫得很好，順利完成！

求職疑問

網站上的自學課程讀完、作業寫完 再補充一點 git 知識、NPM 知識～ 就有足夠作品，能夠直接面試囉～ 初階前端工程師的工作，大多都可以處理了～

JavaScript 系列四：第4課 ── jQuery 套件

順利完成！

JavaScript 系列五：第3課 ── 變數作用域、箭頭函式、ES6 語法

寫得很好！順利通過！

JavaScript 系列四：第7課 ── TinyMCE 套件

寫得很好！順利通過！ 繼續保持！

JavaScript 系列四：第6課 ── kenwheeler/slick 套件

寫得很好！順利通過！

JavaScript 系列四：第5課 ── xdan/datetimepicker 套件

寫得很好！順利通過！

JavaScript 系列四：第3課 ── Chart.js 套件

寫得很好，順利完成！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利通過！

JavaScript 系列一：第7課 ── 認識巢狀結構

寫得很好，順利完成！ 繼續保持！

JavaScript 系列三：練習3 ── modal 互動視窗元件

寫得很好，配色很可愛，順利完成！

JavaScript 系列一：第6課 ── 認識資料型態與轉換

順利過關！

JavaScript 系列四：第4課 ── jQuery 套件

vanilla js 顏色沒有改變喔～

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

寫得很好，順利通過！

JavaScript 系列一：第4課 ── 基本的陣列操作

寫得很好，順利通過！

JavaScript 系列一：第3課 ── 修改 html 的內容

寫得很好，順利通過！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

寫得很好，順利通過！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利通過！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利通過！

自學網頁の嬰兒教材：第5課 ── 用力送出表單

寫得很好，順利通過！

請益-這樣子的coding遊戲是否能夠一人開發？會太具挑戰嗎？

稍微看了一下原始碼，沒幾行呀～ https://github.com/thomaspark/flexboxfroggy/blob/gh-pages/js/game.js 550 行而已，程式碼也不難讀 需要研究一下，這類遊戲的核心原理，你的問題應該就有答案 我也找時間研究一下～

JavaScript 系列五：第2課 ── 學會 Local Storage 相關功能

寫得很好！順利通過！

自學網頁の嬰兒教材：第6課 ── 在自己電腦上寫網頁

寫得很好，順利完成！ 這一課就是要練習自製 landing page，不用套件

JavaScript 系列四：第2課 ── vanilla-lazyload 套件

寫得很好，順利完成！

自學網頁の嬰兒教材：第4課 ── 好用的表格

OK，順利過關！

JavaScript 系列四：第1課 ── autosize 套件

寫得很好，順利完成！

自學網頁の嬰兒教材：第3課 ── 網格系統：頁面分區塊排個版

寫得很好，順利完成！

JavaScript 系列三：練習7 ── carousel 輪播元件

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第5課 ── 用力送出表單

寫得很好，順利通過！

自學網頁の嬰兒教材：第5課 ── 用力送出表單

寫得很好，順利通過！

自學網頁の嬰兒教材：第3課 ── 網頁排版

寫得很好，順利通過！

自學網頁の嬰兒教材：第4課 ── 好用的表格

OK，有看到囉！順利完成！

JavaScript 系列三：練習6 ── dropdown 下拉式選單

寫得很好，順利完成！

自學網頁の嬰兒教材：第4課 ── 好用的表格

網址我打不開欸

自學網頁の嬰兒教材：第4課 ── 好用的表格

OK，順利過關！

JavaScript 系列三：練習5 ── collapse 折疊效果

寫得很好！順利完成！

bootstrap問題

很好的問題 自己寫 css 掌握度最高，可以設計每個細節 但是實務上，通通自己寫，很沒效率 所以通常都會挑一款 css framework 來使用 畢竟開發專案通常是有商業目的，能快速、低成本做完，總是很划算的 不過，各種開發方式，終究都只是主觀意見 你當然可以選自己喜歡的方式，比方說，永遠堅持自己手寫 css 但是這樣一來，在需要團隊合作的時候，會遇到不少困難 以上，供參考

自學網頁の嬰兒教材：第2課 ── 導覽列：替訪客指點方向

沒問題，順利完成作業！ 你的提問非常好，請到「討論專區」發問，一起在那邊進行深入的討論＆回答！

自學網頁の嬰兒教材：第1課 ── 安裝：網頁突然好美美

沒問題，順利完成了！

自學網頁の嬰兒教材：第3課 ── 網頁排版

別擔心，順利通過本課要求了！排版方式有無限多種，找時間慢慢研究即可！

自學網頁の嬰兒教材：第3課 ── 網頁排版

別擔心，順利通過本課要求了！排版方式有無限多種，找時間慢慢研究即可！

[作業問題]HTML&CSS 第6課 Loading Page

往 Flexbox 這方向研究看看 現在實務上，很多排版，都通通使用 Flexbox 來完成

自學網頁の嬰兒教材：JavaScript（八）作業分享

作業完成度很好，設計也很好看！

切版示範－教你怎麼完成一個切板，完全新手導向，帶你從零到一！！

很棒的分享！

使用 inline-block 版面配置

路過補充一下： 現在因為各瀏覽器支援成熟了，版面配置大多都用 Flexbox 來排版了

[作業問題]HTML&CSS 第6課 Loading Page

在研究排版的時候，應該要一小塊一小塊研究 舉例來說，把這塊整個刪掉 ``` <div class="user"> <ul> <li><a href = "">Log in 登入</a></li> <li>|</li> <li><a href = "">Sign up 註冊</a></li> </ul> </div> ``` 就會發現，其實版面算整齊，並沒有太大問題 所以要從這一塊的寫法，開始研究、改寫

[作業問題]HTML&CSS 第6課 Loading Page

為了讓「登入、註冊」往右邊靠，你這樣寫 css ``` .user{ position: relative; top: -50px; left: 800px; line-height: 45px; } ``` 這種寫法，在螢幕寬度少於 800px 時，一定會破版，光是這邊的寫法就要先改

自學網頁の嬰兒教材：第6課 ── 在自己電腦上寫網頁

導覽列那些，的確比較難做 實務上，常常會直接用現成套件！ 所以沒問題，寫得很好，順利通過！

JavaScript 系列八：第3課 ── 分帳應用程式

Very good！很棒的 UI！順利完成！

JavaScript 系列八：第7課 ── 國家資訊與地圖應用程式

JavaScript 系列課程九，正在開發中，敬請期待！

JavaScript 系列八：第7課 ── 國家資訊與地圖應用程式

連寫七個專案，相信你對前端開發的興趣＆信心大增不少！也對 vue 基本用法充分瞭解了！ 歡迎到討論專區，發表作業＆心得分享！

JavaScript 系列八：第7課 ── 國家資訊與地圖應用程式

寫得很好，順利完成！

JavaScript 系列二：第7課 ── 用 Selector API 選取元素

很好！順利通過！

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

很好！順利完成！

JavaScript 系列八：第6課 ── 天氣查詢應用程式

OK，順利通過！

JavaScript 系列八：第6課 ── 天氣查詢應用程式

寫得很好！網頁很漂亮！順利通過！

JavaScript 系列八：第5課 ── 體重追蹤應用程式

寫得很好！順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

畫面整齊、漂亮，寫得很好！順利通過！

JavaScript 系列一：第4課 ── 基本的陣列操作

寫得很好，順利通過！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利通過！繼續保持！

自學網頁の嬰兒教材：第5課 ── 用力送出表單

OK，順利過關！

自學網頁の嬰兒教材：第5課 ── 用力送出表單

OK，順利過關！

JavaScript 系列三：練習2 ── toast 吐司元件

寫得很好，順利完成！

JavaScript 系列三：練習1 ── alert 示警元件

寫得很好，順利完成！

JavaScript 系列二：第7課 ── 用 Selector API 選取元素

有 bug，看我前面留言～

JavaScript 系列二：第6課 ── 讀取與修改 DOM 元素的 style

有 bug，多個待辦的時候，後面的已完成按鈕，點擊後，文字不對喔！

[作業問題] JavaScript系列八：第5課

OK 花了不少時間，我終於研究完了 主要問題出在這裡 ``` data() { return { weightChart: null, // ...others } }, ``` 放在 data 這邊的，會被引進 vue 的 reactivity 機制 但是，我們並不希望 weightChart 被 vue 監聽、自動更新 我們希望透過 `this.weightChart.update()` 手動更新，也就是我們自己管理相關 state，然後手動去觸發更新 這種情況，把 weightChart 移到 data 外面即可，就變成普通的物件屬性，不會具有 reactivity ``` weightChart: null, data() { return { // ...others } }, ``` 執行之後會發現，「新增」沒問題了，但是「刪除」依然有問題 繼續觀察程式碼，可能有關的是這裡 ``` this.weightChart = new Chart(this.$refs.weightChartDOM, { type: 'line', data: { labels: this.dates, datasets: [{ label: '體重', data: this.weights, borderWidth: 1 }] }, }); ``` labels 與 datasets 期待的是陣列資料 使用 `console.log(this.dates)` 觀察變數型別，會發現我們傳進去的是帶有 vue reactivity 功能的 data（vue 使用 proxy 實作） Chart.js 內部可能也有在監聽 `變數` 變化的機制，所以衝突 來試著把這邊的 reactivity 也拿掉。方法有很多種，我這邊用最土炮的一種：轉成 JSON 字串再轉回來 ``` this.weightChart = new Chart(this.$refs.weightChartDOM, { type: 'line', data: { labels: JSON.parse(JSON.stringify(this.dates)), datasets: [{ label: '體重', data: JSON.parse(JSON.stringify(this.weights)), borderWidth: 1 }] }, }); ``` 除此之外，在新增、刪除的最後 ``` this.weightChart.data.labels = this.dates this.weightChart.data.datasets[0].data = this.weights this.weightChart.update() ``` 也一併改掉，讓事情單純一點：我們都按照 Chart.js 期待的資料型態去傳 ``` this.weightChart.data.labels = JSON.parse(JSON.stringify(this.dates)) this.weightChart.data.datasets[0].data = JSON.parse(JSON.stringify(this.weights)) this.weightChart.update() ``` 大功告成！解決問題！ --- ### 備註一 就跟其他眾多解法一樣：以上這做法，也只算是 workaround 因為我們沒有興趣深入研究 Chart.js 監聽 labels 跟 datasets 的變化機制 （通常只有 senior developers 會在這時候想深入進去搞懂） 既然都是 workaround，就隨便找個方法搞定就是了，解法不一定很有道理（我們根本沒有100%搞懂） ### 備註二 proxy 型別，一般來說，會跟普通的資料型別相容 也就是說，通常把 vue reactivity 狀態，直接傳給第三方套件，根本沒問題！ 不需要這樣 JSON 轉來轉去的！這是一個剛好 vue 跟第三方套件衝突的特例！ ### 備註三 實務上，這種高互動的 UI library，都會自己出一套框架版本的，先處理掉地雷 實務上以使用框架版本為主，所以不會太常碰到這種需要 workaround 的情況（但偶爾還是會遇到） 本課的原意是故意不用框架版本，練習看看手動整合，沒想到真的踩到地雷 （但是也好，也是一種練習） ### 備註四 在前端框架領域，整合框架 `狀態` 與 `html 元件`、`第三方外部元件` 時，有兩種哲學 第一種哲學就是通通由框架處理好，這種元件稱之為 `controlled components`。開發元件時比較吃力，但使用元件時比較輕鬆 第二種哲學就是，自己手動管理外部元件的狀態，這種元件稱之為 `uncontrolled components`。開發元件時比較輕鬆，但使用元件時比較吃力 可以 google 搜尋 `controlled components vs uncontrolled components`，看不懂沒關係，有更多使用套件的經驗之後，會開始看懂我在講什麼

[作業問題] JavaScript系列八：第5課

看了幾篇 stackoverflow 大家的分享，都是使用 `workaround` 來描述解決方法 也就是這個 vuejs 跟 chartjs 的衝突，有點尷尬、難以漂亮解決 並不能根本解決，但能避開問題，有替代的解決方法

[作業問題] JavaScript系列八：第5課

看到這貼文，我研究了快一小時，我也卡關了，我也看不出為甚麼，哈哈 我 google 搜尋 `chartjs vue RangeError: Maximum call stack size exceeded` 發現這問題很多人遇到，算是一種地雷 會說是「地雷」是因為，光看你寫的程式碼，很合理，感覺根本沒什麼問題 但遇到的人都會耗上大量時間，才知道是 chartjs 底層或者 vuejs 底層有什麼「奇怪」的注意事項 程式開發就是這樣，有時候問題很不直觀。踩雷之後，就學個經驗，多踩就不怕了 我再找時間研究一下，有心得再跟大家說 （實務上，這種高互動的 UI library，都會自己出一套框架版本的，先處理掉地雷，實務上以使用框架版本為主）

JavaScript 系列五：第1課 ── 學會 Cookie 相關功能

寫得很好，順利完成！

JavaScript 系列二：第5課 ── 認識 onchange 事件

寫得很好，順利完成！

JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class

寫得很好，順利完成！

JavaScript 系列二：第3課 ── 認識 for 迴圈

寫得很好，順利完成！

自學網頁の嬰兒教材：第4課 ── 好用的表格

OK，順利過關！

自學網頁の嬰兒教材：第4課 ── 好用的表格

OK，順利過關！

JavaScript 系列八：第7課 ── 國家資訊與地圖應用程式

寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

畫面整齊、漂亮，寫得很好！順利通過！

JavaScript 系列八：第2課 ── 筆記應用程式

寫得很好！UI/UX 也很棒！順利完成！

JavaScript 系列八：第4課 ── 行事曆應用程式

寫得很好，順利完成！

JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

這是 jsfiddle 首頁，沒東西顯示喔～

JavaScript 系列八：第1課 ── 碼表應用程式

寫得很好！UI/UX 非常漂亮！順利完成！

JavaScript 系列八：第1課 ── 碼表應用程式

我打開是空白頁面，環境設定好像有問題

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

很好，順利完成！

JavaScript 系列一：第7課 ── 認識巢狀結構

寫得很好，順利完成！

自學網頁の嬰兒教材：第3課 ── 網頁排版

OK，順利通過！ 不需要一次通通搞懂，有機會再鑽研、練習更多即可！

18個超好用的css屬性，還不知道點進來就會知道！！

的確都是很好用的特別屬性！

擴充分享-垂直tab

chrome extension 值得玩一玩！

JavaScript 系列四：第7課 ── TinyMCE 套件

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第3課 ── 網頁排版

可以了，順利通過！ 不需要一次通通搞懂，有機會再鑽研、練習更多即可！

🔥🔥新功能測試上線：文章 API🔥🔥

關鍵字 `setup a personal blog with github pages` `github pages 教學`

資源分享-學習CSS最快速清晰的視覺筆記在這，馬上搞懂flex怎麼用！

Looks good!

JavaScript 系列四：第6課 ── kenwheeler/slick 套件

寫得很好，順利完成！

JavaScript 系列八：第3課 ── 分帳應用程式

寫得很好！遠超過本課所期待的標準！非常出色！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

別擔心，寫得很好！順利通過！ 發問的話，請在「討論專區」為主，我統一在那邊回答！

發問-自學課程標題命名問題

我把標題的前面，改成系列數字囉～

JavaScript 系列一：第6課 ── 認識資料型態與轉換

順利過關！

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

順利過關！

JavaScript 系列一：第4課 ── 基本的陣列操作

順利過關！

JavaScript 系列一：第3課 ── 修改 html 的內容

順利過關！

JavaScript 系列七：第7課 ── 認識 Template Refs

寫得很好，順利完成！

JavaScript 系列七：第6課 ── 認識 Lifecycle Hooks 與 Watchers

順利完成！

JavaScript 系列七：第5課 ── 學習 Vue 事件處理的寫法

順利完成！

JavaScript 系列七：第4課 ── 學習 Vue 迴圈的寫法

順利完成！

JavaScript 系列七：第3課 ── 學習 Vue 條件判斷式的寫法

順利完成！

JavaScript 系列七：第2課 ── 體驗一下 Reactivity 的效果與便利

順利完成！

JavaScript 系列七：第1課 ── 認識 Vue 基本環境與 render state

順利完成！

JavaScript 系列六：第7課 ── 資料序列化

寫得很好，順利完成！

JavaScript 系列六：第6課 ── 認識 data model 的優點

寫得很好，順利完成！

JavaScript 系列六：第5課 ── 熟悉匿名函式

寫得很好，順利完成！

JavaScript 系列六：第4課 ── 熟悉 render function

寫得很好，順利完成！

JavaScript 系列六：第3課 ── 認識匿名函式

寫得很好，順利完成！

JavaScript 系列六：第2課 ── 認識陣列操作

寫得很好，順利完成！

JavaScript 系列六：第1課 ── 認識 data model 與 render function

寫得很好，順利完成！

JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

寫得很好，順利通過！

發問-自學課程標題命名問題

很好的建議 我來設計一下新的命名！

JavaScript 系列六：第7課 ── 資料序列化

Hung 來加這個 line 社群 這是進度領先的同學群組 https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 我要在群組內了解一下大家狀況，才能設計後續課程教材

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利通過！繼續保持！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

寫得很好！順利通過！繼續保持！

JavaScript 系列四：第5課 ── xdan/datetimepicker 套件

寫得很好！順利通過！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好！順利通過！

JavaScript 系列五：第6課 ── 學會 AJAX 與各種 HTTP 請求方法

寫得很好！順利通過！

JavaScript 系列五：第5課 ── 學會 AJAX 錯誤處理

寫得很好！順利通過！

JavaScript 系列五：第4課 ── 學會 AJAX 基本原理

寫得很好！順利通過！

JavaScript 系列五：第3課 ── 變數作用域、箭頭函式、ES6 語法

寫得很好！順利通過！

JavaScript 系列五：第2課 ── 學會 Local Storage 相關功能

寫得很好！順利通過！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

RE: 請教切板問題－－切版觀念教學！實例code review！

很好的討論串！ 網頁排版的話，做法有很多種 關鍵字是 `多欄式排版 css` `css flexbox` `css grid`

JavaScript 系列五：第1課 ── 學會 Cookie 相關功能

寫得很好，順利完成！

JavaScript 系列四：第7課 ── TinyMCE 套件

寫得很好，順利完成！

JavaScript 系列四：第6課 ── kenwheeler/slick 套件

寫得很好，順利完成！

JavaScript 系列四：第5課 ── xdan/datetimepicker 套件

寫得很好，順利完成！

JavaScript 系列四：第4課 ── jQuery 套件

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第3課 ── 網頁排版

差一點喔，至少要做一點旁邊的「熱門文章」區塊 （有點混亂很正常，未來慢慢搞懂即可）

JavaScript 系列八：第2課 ── 筆記應用程式

寫得很好！樣式很漂亮，介面也很好用，順利完成！

JavaScript 系列四：第3課 ── Chart.js 套件

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第3課 ── 網格系統：頁面分區塊排個版

寫得很好，順利完成！

JavaScript 系列四：第4課 ── jQuery 套件

寫得很好，順利完成！

請益-關於架站

非常好的問題！簡單回答如下： 1) 純靜態的案子需求比較少，除此之外，客戶通常會想順便買一個好看的網域名稱 架在 github pages，網域無法設定，所以這方向我認為不太行 2) wordpress 是一個極度強大的 CMS 系統，可以用低成本完成非常多種的客戶需求 學習 wordpress 的唯一問題在於：專精之後，就變成 wordpress 工程師了 以開發者職業生涯來說，專精 php 或者 laravel 之類，比較全面。專精 wordpress，很多知識帶不走 3) 長期接案最好要有團隊，內含：開發者、設計師、專案管理（負責與客戶確認規格、避免做白工），三種專業 此外，這三人之一，至少要有一人願意跑業務、做銷售。組團隊、跑業務，都不是容易的事 4) 堅持要以開發者個人接案，則要經營好個人品牌、累積作品集、設法在網路上曝光，要願意推銷自己（寫文章、錄 podcast、拍影片，您需要選一個） 如果只想在台灣的外包網、臉書社團上面，看到案主發文，去爭取，就會陷入「紅海價格戰」，將只能拿到「極低的報酬」，並且會經常碰上「超無聊的案子」，做起來絕對不會滿意的 --- 以上，簡單分享

JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

寫得很好，順利完成！

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

很好，順利完成！

自學網頁の嬰兒教材：第2課 ── 導覽列：替訪客指點方向

寫得非常好！看起來已有業界水準！順利完成！

自學網頁の嬰兒教材：第1課 ── 安裝：網頁突然好美美

寫得很好！畫面非常漂亮～！順利完成！

JavaScript 系列四：第3課 ── Chart.js 套件

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

JavaScript 系列八：第1課 ── 碼表應用程式

成果品質極佳、UX 完整度極高、令人印象深刻。寫得很好，順利完成！

JavaScript 系列一：第3課 ── 修改 html 的內容

順利過關！

JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class

很好！順利完成！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

寫得很好，順利通過！

JavaScript 系列四：第2課 ── vanilla-lazyload 套件

寫得很好，順利完成！

JavaScript 系列八：第1課 ── 碼表應用程式

寫得很好，順利完成！

自學網頁の嬰兒教材：第5課 ── 用力送出表單

樣式很漂亮！順利完成！

自學網頁の嬰兒教材：第4課 ── 好用的表格

寫得很好，樣式很漂亮！

JavaScript 系列四：第1課 ── autosize 套件

寫得很好，順利完成！

[ JavaScript ] Class 是 Object 的工廠(1) - Property 和 Method

很好的分享！ 歡迎繼續多多分享！ OOP 用最簡化的定義來說，就是「狀態」跟「行為」放在一起 各種程式語言實作方法不同，但核心精神不變 此外，JavaScript 的實作稱為「prototype-based」，比較特別一點 最後就是，JavaScript 社群近年比較不注重 OOP 相關的 design pattern，轉向 FP 相關 concept 與 design pattern 為主，但各種 programming paradigm 都廣泛地學習，是很好的～ 👍👍👍

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

寫得很好，順利通過！繼續保持！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利通過！繼續保持！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利通過！繼續保持！

自學網頁の嬰兒教材：第3課 ── 網頁排版

別擔心，RWD 設計，超過本課規劃程度，可以之後再研究！ 寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：JavaScript（七）作業分享

Nice sharing!

表單動畫特效

可以試試看，是不是讓 UX 更符合欄位特性了？ 哈哈

表單動畫特效

wow! really great! 我的話，會再加上這個 ``` #username ~ label:hover { cursor: text; } ``` 這樣就讓 ux 更好、更順手了！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，配色也很好看，順利完成，繼續保持！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

灰色背景等等技術問題，請到討論專區發問喔！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

內容沒有樣式，這連結跟前一份作業一樣，是不是沒有按到儲存？

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class

差一點，匯出訊息的格式不對～

JavaScript 系列二：第3課 ── 認識 for 迴圈

`今日待辦：1. 洗衣服 2. 買文具 3. 去健身房` 要像這樣

JavaScript 系列二：第3課 ── 認識 for 迴圈

差一點，匯出訊息的格式不對喔！

JavaScript 系列三：練習7 ── carousel 輪播元件

寫得很好，順利完成！繼續保持！

JavaScript 系列三：練習6 ── dropdown 下拉式選單

寫得很好，順利完成！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

作業沒問題，順利通過！ 發問的話，請到討論專區，我在那邊回答為主，也可以讓別人一起參與討論！

JavaScript 系列七：第7課 ── 認識 Template Refs

JavaScript 系列課程八，正在開發中，敬請期待！

JavaScript 系列七：第7課 ── 認識 Template Refs

有感受到使用 Vue 框架來開發的魅力了嗎？ 歡迎到討論專區，發表作業＆心得分享！

JavaScript 系列七：第7課 ── 認識 Template Refs

寫得很好，順利完成！

JavaScript 系列七：第6課 ── 認識 Lifecycle Hooks 與 Watchers

順利完成！

JavaScript 系列七：第5課 ── 學習 Vue 事件處理的寫法

順利完成！

JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

寫得很好，順利完成，繼續保持！

資源分享-練手項目以及結構教學（新手適合！）

的確是日式簡約優雅的質感，很讚！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

ok 順利通過

資源分享-練手項目以及結構教學（新手適合！）

wow! very good!

JavaScript 系列七：第4課 ── 學習 Vue 迴圈的寫法

很好，順利完成！

JavaScript 系列七：第3課 ── 學習 Vue 條件判斷式的寫法

很好，順利完成！

JavaScript 系列三：練習5 ── collapse 折疊效果

寫得很好！順利完成！

JavaScript 系列七：第2課 ── 體驗一下 Reactivity 的效果與便利

寫得很好！順利完成！

JavaScript 系列七：第1課 ── 認識 Vue 基本環境與 render state

順利通過！

JavaScript 系列三：練習4 ── 表單驗證

很好的分享 有找到有趣技巧或者特效 都可以到討論區貼文 之後我會做「個人文章搜尋功能」 個人頁面就會變成個人知識資源庫~ 未來要查就很方便~

神奇的聊天機器人

很好的分享 大家可以多多分享一些對於學習有幫助的小資源 彼此幫助、找到高價值資訊

神奇的聊天機器人

ChatGPT 的出現，即便是軟體工程師，也感到震驚 大家可以多多利用，多請教問題，很有幫助

JavaScript 系列三：練習4 ── 表單驗證

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

關於編輯器　　抓取裡面文字 該怎麼做？

簡單講，你需要往存取背後 data model 的方向去研究 直接存取 html，會在每次 data model 被 render 成 UI 的時候，就覆蓋掉了

關於編輯器　　抓取裡面文字 該怎麼做？

補充幾個關鍵字：所見即所得（WYSIWYG）編輯器 在 github 找幾款開源的，會發現文章實際的 data model，會由套件在背後管理 要取得實際內容，要透過套件提供的 API 函式 如果it幫是用自家開發的套件，根本沒有對外公開函式 那就無法做到 可以觀察一下原始碼，如果有找到it幫的 WYSIWYG 編輯器用法 倒也是有可能可以做到

關於編輯器　　抓取裡面文字 該怎麼做？

像那樣複雜的編輯器 背後應該是運用了 data model + render function 的概念 也就是真正的文章資料結構，存在 js 環境中 html 只是 render 出來的外觀而已 然後無法從外部去存取那些公司設計的 data model 所以你提到的功能，應該是做不到的

練習設計版面

寫得很好，順利通過，繼續保持！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利通過！繼續保持！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

點擊「認識工廠」按鈕，沒有反應喔！

JavaScript 系列三：練習3 ── modal 互動視窗元件

很好，順利完成，繼續保持！

JavaScript 系列三：練習2 ── toast 吐司元件

很好，順利通過！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，樣式很漂亮！繼續保持！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

JavaScript 系列三：練習2 ── toast 吐司元件

有點小問題，看起來兩個吐司顏色一樣喔～ > 成功吐司請做成綠色 > 錯誤吐司請做成紅色

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利通過！繼續保持！

分享：<fieldset> 超厲害的html，不需要CSS寫很酷登入畫面

wow，看起來很酷！值得筆記 （我這幾年的實務經驗，還沒看過有人用這個，或許是被低估的元素！）

自學網頁の嬰兒教材：JavaScript（六）作業分享

very good 思維方式，更接近工程師一步了～ 後續會有更多課程＆練習，可以訓練思維，敬請期待～

HTML程式基礎練習(一)

very good~!

JavaScript 系列三：練習1 ── alert 示警元件

寫得很好，順利完成！繼續保持！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

發問-能不能做解讀代碼系列！？（內有題材之一：破解右鍵

我自己習慣的破解右鍵方式：在 dev tool 裡面有選項可以直接 disable javascript，哈哈

發問-能不能做解讀代碼系列！？（內有題材之一：破解右鍵

關於許願：暫時沒有這種安排，因為到處去讀別人程式碼，對我來說有點吃力 不過，如果你有發現感興趣的代碼片段，歡迎貼上來跟大家分享心得，我會參與討論 👍👍👍

發問-能不能做解讀代碼系列！？（內有題材之一：破解右鍵

> 不知道有沒有什麼名詞可以形容這個概念 就是把重複邏輯封裝成函式而已，我會說是 `DRY 原則` `避免 duplicate code` 這邊的 `抽象化（abstraction）` 很簡易，大概沒有特別名詞稱呼 更複雜的話，才會特別去命名為一個 design pattern 來稱呼

發問-能不能做解讀代碼系列！？（內有題材之一：破解右鍵

這段程式碼，看起來就是把所有相關 event 都移除掉了 雖然可以破解右鍵，但感覺很多網站，根本也就會功能故障了

發問-能不能做解讀代碼系列！？（內有題材之一：破解右鍵

很棒的分享！

JavaScript 系列六：第7課 ── 資料序列化

JavaScript 系列課程七，正在開發中，敬請期待！

JavaScript 系列六：第7課 ── 資料序列化

有感受到 data model + render function 開發方法的魅力了嗎？ 歡迎到討論專區，發表作業＆心得分享！

JavaScript 系列六：第7課 ── 資料序列化

寫得很好，順利完成！

JavaScript 系列六：第6課 ── 認識 data model 的優點

很好，順利完成！

JavaScript 系列六：第5課 ── 熟悉匿名函式

很好，順利完成！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利完成！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

謝謝提醒！我的確打錯字了，已更新～！

JavaScript 系列六：第4課 ── 熟悉 render function

寫得很好，順利完成！

JavaScript 系列六：第3課 ── 認識匿名函式

寫得很好！順利完成！

[ 作業問題 ] JavaScript（六）第3課

有興趣的話，可以研究一下 hoisting 這個現象 還是很困擾的話，我找時間寫文章說明

[ 作業問題 ] JavaScript（六）第3課

這是這個程式語言，設計失敗的地方 這是一個稱為 hoisting 的現象，我認為根本是 bug

[ 作業問題 ] JavaScript（六）第3課

把 var 改成 const 試試看 ``` for (const index in todos) { ```

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

很好的分享，我個人認為 css 難不倒你！ 遇到問題就多多到討論區發問吧！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

[ 作業問題 ] JavaScript（六）第3課

課程內容有一段 > 這邊多介紹一個 for in 的寫法，需要索引時可以用 就是在教這個～

[ 作業問題 ] JavaScript（六）第3課

非常好的問題～！ 把外面那個 for loop 改寫 before ``` for (var todo of todos) { ``` after ``` for (var index in todos) { var todo = todos[index]; ``` 像這樣，把 for of 改成 for in 就可以了～！ onclick 裡面不需要寫 for loop，可以直接使用 index 試試看吧！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

JavaScript 系列六：第2課 ── 認識陣列操作

沒錯！寫得很好，順利完成！

JavaScript 系列六：第2課 ── 認識陣列操作

這一課要改成：去更新 `var todos = []` 這個陣列的內容，更新完之後，再執行 `render()`

JavaScript 系列六：第2課 ── 認識陣列操作

但在 add() 函式內，之前都是直接找到元素 `.append()` 新元素進去，這樣是直接更新 DOM

JavaScript 系列六：第2課 ── 認識陣列操作

不是，id 跟 class 那些可以自由加

JavaScript 系列六：第1課 ── 認識 data model 與 render function

寫得很好，順利完成！

JS前端爬蟲-XMLHttpRequest後得到的資料，該怎麼拿

滿好的練習 另外，把做好的小東西，公開上線，找地方宣傳一下，會更好玩

JS前端爬蟲-XMLHttpRequest後得到的資料，該怎麼拿

載入更多文章，通常觀察一下 ajax 的參數，就可以做到，再試試看吧

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

很好，順利完成！

JavaScript 系列二：第7課 ── 用 Selector API 選取元素

寫得很好！順利通過！ 繼續保持！

JS前端爬蟲-XMLHttpRequest後得到的資料，該怎麼拿

你貼的那段 code 我直接在 console 跑會出現 ``` Uncaught ReferenceError: last is not defined at req.onload (<anonymous>:17:83) ```

JS前端爬蟲-XMLHttpRequest後得到的資料，該怎麼拿

針對不同網站的架構，爬蟲有的易寫，有的難寫 有沒有試過直接爬「列表」頁面呢？ https://meteor.today/board/sellphoto --- 此外，實務上寫爬蟲，幾乎都是由後端負責，比較少在前端負責

JavaScript 系列一：第7課 ── 認識巢狀結構

很好！順利完成！ 歡迎加入完成第一份系列課程的同學群組 https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g

JavaScript 系列一：第6課 ── 認識資料型態與轉換

很好！順利完成！

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

很好！順利完成！

JavaScript 系列一：第4課 ── 基本的陣列操作

很好！順利完成！

JavaScript 系列一：第7課 ── 認識巢狀結構

很好！順利完成！ 歡迎加入完成第一份系列課程的同學群組 https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g

JavaScript 系列一：第6課 ── 認識資料型態與轉換

很好！順利完成！

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

很好！順利完成！

JavaScript 系列一：第4課 ── 基本的陣列操作

很好！順利完成！

自學網頁の嬰兒教材：第5課 ── 用力送出表單

關於樣式與排版，有時間可以再多試試 持續遇到問題，可以把相關 jsfiddle，貼到討論區，讓大家幫你看一下 或直接在討論區發問，跟大家一起討論～

自學網頁の嬰兒教材：第5課 ── 用力送出表單

OK，順利過關！

討論－淺談html/js之關係以及，延伸至XSS

很好的分享！ 之後有人在網路上搜尋相關專有名詞，都有機會看到這串心得＆討論，造福無數後人！

討論－淺談html/js之關係以及，延伸至XSS

實務上來說，html 跟 js 程式碼，通通混在一起，當然會很難讀、很亂 不過，在 React 社群，大家所寫的 jsx，很多時候看起來又很像是把 html 跟 js 混在一起了 所以這個部份有點 tricky，在 React 社群，大家在乎的 separation of concerns 其實是「state 與 side-effects」而不是「行為與結構」 這相關的概念很進階，我這邊先不詳談，或許有機會再專文介紹

討論－淺談html/js之關係以及，延伸至XSS

UJS 這個名詞，我在前端社群其實沒有看過 查了一下，好像只有 Rails 社群會使用這個名詞 一般來說，軟體產業，比較常講 separation of concerns（關注點分離） 用來說明：將不同概念的程式部份，分開來，會讓程式比較好維護

JavaScript 系列二：第6課 ── 讀取與修改 DOM 元素的 style

很好，順利完成！

JavaScript 系列二：第5課 ── 認識 onchange 事件

很好，順利完成！

JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class

很好，順利完成！ 寫程式每天都會遇到 bug，這很正常，習慣就好！

製作wiki表單

無法喔 我沒用過 mediawiki 你到維基相關社團找工程師比較適合

製作wiki表單

有答案了，簡單分析如下 mediawiki 引擎，原生就有支援多份百科功能 https://superuser.com/questions/1034998/setting-up-mediawiki-to-host-more-than-one-wiki 新增多份百科的指令也有教學 https://www.mediawiki.org/wiki/Manual:Wiki_family 但都需要工程師手動一份一份安裝，沒有懶人包腳本 https://editthis.info/ 網站是自己寫 extension 來自動化上述過程 結論：這需要熟悉 mediawiki 的工程師才懂安裝 因為沒有現成的懶人包 需要跳下去 鑽研 mediawiki 的架構才有辦法做到 --- 幾個方向可以研究 首先 試著手動安裝出多份百科 熟悉這個過程 接著 學習 extension 開發 熟悉擴充功能的方法 最後 把 extension 串進安裝多份百科的流程 讓其自動化 就完成目標了

製作wiki表單

臉書有吧 我私人 Line 不想加喔 你可以加入網站上方的 telegram 跟 discord 社群

製作wiki表單

Ok 我臉書 approve 了

製作wiki表單

不用，我先研究一下，晚點跟你講 editthis.info 是怎麼做的

製作wiki表單

ok 我看到了 有 `Create a single wiki page` 跟 `Create a wiki site` 所以應該做得到 我找時間研究一下他們背後的原理好了！

製作wiki表單

我看了一下，一份 Mediawiki 應該就是一份百科 你想達成的效果，使用 Mediawiki 應該做不到喔

製作wiki表單

Mediawiki 的話，建出來的百科，可以讓大家「自由新增不同條目」 但是，應該不能讓大家「自由新增不同百科」 Mediawiki 設計出來的用途，應該就是一份百科 --- 你有在哪個地方、網站，看過你想達成的效果嗎？ 有現成範例，會比較好討論

JavaScript 系列二：第3課 ── 認識 for 迴圈

寫得很好，順利完成！

製作wiki表單

你好，你的網站，有連接資料庫了嗎？ 聽起來，你可以往 MySQL 這方向研究一下 用戶送出資料，將資料存進資料庫，接著再使用 PHP 把 wiki 呈現出來 你研究一下，有不懂的地方，歡迎繼續發問！

JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

寫得很好，順利完成！

自學網頁の嬰兒教材：JavaScript（五）作業分享

很好的分享！繼續保持！ 系列課程六，近期上線！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

很好的問題 結構與行為是否需要分離，取決於應用程式的複雜程度 小型應用程式，寫完即可，不用管這麼多最佳實踐 大型應用程式，實務上，因為正式開發會用 React 或 Vue html 跟 js 是不會混雜在一起的 --- 以上簡單回答。 更完整、進階的討論，可在討論區丟一篇獨立貼文發問，讓大家一起參與討論 我也可以在那邊，給出更深入的回答

# 想請益-改yt字幕樣式

我測試了一下了，因為是 setInterval，所以確實會跳動 試試看這段，效果更好一點 ``` $('style').append($('<div>').innerHTML=`<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet"> <style>span.ytp-caption-segment { font-family: Ma Shan Zheng !important; }</style>`) ``` 應該可以繼續優化 你再往這方向試試看？

自學網頁の嬰兒教材：第3課 ── 網頁排版

沒問題，順利通過！ --- 沒錯，這一課的確特別難 切版的方式五花八門，各種進階技巧很多 大致感覺有知道即可！

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

很好，順利完成！

自學網頁の嬰兒教材：第4課 ── 好用的表格

OK，順利過關！

自學網頁の嬰兒教材：第4課 ── 好用的表格

謝謝回報，已移除連結

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

此篇閒聊-關於這個網站以及關於站長（＋此站使用心得

謝謝支持 歡迎多多跟朋友推薦 讓這個論壇更熱鬧喔～ 梗圖倉庫是我2019年開發的作品沒錯，目前以個人專案形式在經營中～ 「工程師的缺德行為：叫朋友去學C/C++」一文，是我 2015 年的文章，文中皆是我個人經驗觀察～ --- 最後補充一點，你的學習方法沒有問題，作為職涯發展也是可行的 自己找到方法學習，不管是持續做有趣專案，或是什麼小眾方法，只要能持續前進、學習，就可以 方法不用跟別人一樣，也可以在業界有競爭力

# 想請益-改yt字幕樣式

我剛試了一下，看看我這張截圖 ![](https://i.imgur.com/yEGAdZg.png) 在 `span.ytp-caption-segment` 上面，使用 css 時加上 `!important` 強制覆蓋呢？如何？ 我測試好像就可以喔～

JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

與此同時，也歡迎到討論專區，發表作業分享！

JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

JavaScript 系列課程六，正在開發中，敬請期待！

JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

寫得很好，順利通過！

JavaScript 系列五：第6課 ── 學會 AJAX 與各種 HTTP 請求方法

寫得很好，順利通過！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！

[ 作業問題 ] - JavaScript 自學網頁の嬰兒教材：第6課

猜得好 不過，在前端領域，事件處理函式內， event 是代表當下事件的全域物件 所以不用傳進去，也可以直接用～

[ 作業問題 ] - JavaScript 自學網頁の嬰兒教材：第6課

問得很好，在 javascript 世界，關於非同步的事物，都會比較難一點點，要習慣一下 `fetch()` `then()` 就是在處理非同步 event 是代表「當下正發生的事件」的全域物件 fetch 的時候還在 onclick 事件當下沒錯 但 then 發生的時候 已經不是 onclick 事件當下了 `console.log(event)` 就會看到 undefined

JavaScript 系列五：第5課 ── 學會 AJAX 錯誤處理

寫得很好！順利過關！

JavaScript 系列五：第4課 ── 學會 AJAX 基本原理

寫得很好！順利過關！

JavaScript 系列五：第3課 ── 變數作用域、箭頭函式、ES6 語法

寫得很好！順利過關！

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

目前討論區使用者還不多 之後人變多，會開設不同的討論專區 子層回覆功能，也是人變多之後再設計 😁

JavaScript 系列五：第2課 ── 學會 Local Storage 相關功能

寫得很好！順利通過！

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

原始碼七千多行，這我查不下去了 到處加 alert 可以慢慢查出是哪邊開始沒執行 最後一個辦法就是 直接去 github repo 開 issue 發問，哈哈...

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

剛繼續實驗，把最後幾行加上 alert ``` alert('loaded!'); return html2canvas; }))); //# sourceMappingURL=html2canvas.js.map ``` 在一般網站，會跳出 alert 但在 IG 卻沒有跳出，所以根本沒執行到 卻也沒有任何 error message 真的是要慢慢去查 html2canvas 原始碼才能找到答案了...

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

原來如此 很有創意 我剛試了一下 的確在大多網站都可以用這招 在 IG 卻是 html2canvas undefined --- 在 dev console 直接拿 `window` 物件做一些修改 會看到 window 物件是會更新沒錯 但就是看不到 html2canvas 套件 感覺跟 html2canvas 的物件生成 design pattern 有關，不知哪邊跟 IG 的原始碼衝突到

想請益JS-cookie自動登入

歡迎多多貼文、多多參與討論，一起讓這個討論區越來越熱鬧 眾多貼文串，都是珍貴的知識庫，可以造福很多未來的新手、讓他們在上網搜尋時找到！

JavaScript 系列五：第1課 ── 學會 Cookie 相關功能

寫得很好！樣式也很漂亮！順利通過！

歡迎來到 CodeLove 討論區！我簡單介紹一下！

😄😄😄

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

html2canvas 官網範例都是用 npm 安裝 你是怎麼用 dev tool 直接載入的？

想請益JS-cookie自動登入

軟體工程領域，有時候就會類似這樣 一個罕見的行為、或者規格，沒什麼人討論 其實，可能就真的是 bug 而已，沒什麼道理，姑且就先避免這樣做就是了

想請益JS-cookie自動登入

另外，就算不使用外掛 dev tool 打開 -> Application -> Cookies -> 直接對著值按右鍵，也可以編輯

想請益JS-cookie自動登入

我剛實驗了一下，你在 dev tool 看 `Expires / Max-age` 那欄 本來那欄的時間都是正常的 你在 console 直接寫 JS 去更改 那欄的值會變成 `Session` 也就是網頁一關掉 值就不見了 我目前感覺這是一個 bug

自學網頁の嬰兒教材：JavaScript（四）作業分享

birdie 的確都寫得很漂亮！尤其是配色！

自學網頁の嬰兒教材：JavaScript（四）作業分享

很好的分享！繼續保持！ 系列課程五，即將上線！

JavaScript 系列一：第3課 ── 修改 html 的內容

過關！

JavaScript 系列一：第3課 ── 修改 html 的內容

過關！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

過關！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

過關！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

過關！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

通過！樣式很漂亮！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

正常的 可以不先管它 因為 jsfiddle 無法所有網頁功能都模擬 有些跟資訊安全相關的 像是網址跳轉功能 就會被擋

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

沒問題，寫得很好！作業順利通過！ 先不用擔心無意義程式碼 先讓程式能跑、效果有出來就好，程式碼品質可以在日後慢慢研究、改善

JavaScript 系列四：第7課 ── TinyMCE 套件

與此同時，也歡迎到討論專區發表「自學網頁の嬰兒教材：JavaScript（四）作業分享」

JavaScript 系列四：第7課 ── TinyMCE 套件

JavaScript 系列課程五，會在幾天內上線，也期待能看到你來寫每堂作業！

JavaScript 系列四：第7課 ── TinyMCE 套件

寫得很好，順利完成！

JavaScript 系列四：第6課 ── kenwheeler/slick 套件

寫得很好，順利完成！

JavaScript 系列四：第5課 ── xdan/datetimepicker 套件

寫得很好，順利完成！

JavaScript 系列四：第4課 ── jQuery 套件

寫得很好，順利完成！

JavaScript 系列四：第3課 ── Chart.js 套件

寫得很好，配色也很漂亮，順利完成！

初次轉職寫程式：作品集有用嗎？要做什麼作品？面試官會看嗎？

多多交流、一起進步！

謝謝版主跟各位的鼓勵 來分享個網站HTML5寫的虛擬drum-machine

的確 很多練習型小專案 太無聊 還是要有趣的練習 比較能引起人興趣學習、進步 這篇是一些人的作品集網站 做得很猛 https://codelove.tw/@tony/post/gqveaW --- 有幾個方向應該滿有趣 html 3D、html audio、WebGL 這些方向 可以看看 不然就是學習寫網頁遊戲 javascript web game engine 應該都滿有趣的 --- 另外可以常逛這個網站 https://www.producthunt.com/ 看看國外最近有哪些新專案上線 當作靈感

JavaScript 系列一：第7課 ── 認識巢狀結構

Hung 來加這個 line 社群 這是我開給完成第一份系列課程的同學群組 https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 我要在群組內了解一下大家狀況，才能設計後續課程教材

JavaScript 系列一：第7課 ── 認識巢狀結構

Birdie 來加這個 line 社群 這是我開給完成第一份系列課程的同學群組 https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 我要在群組內了解一下大家狀況，才能設計後續課程教材

JavaScript 系列一：第7課 ── 認識巢狀結構

Wei 來加這個 line 社群 這是我開給完成第一份系列課程的同學群組 https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 我要在群組內了解一下大家狀況，才能設計後續課程教材

JavaScript 系列一：第7課 ── 認識巢狀結構

Evon 來加這個 line 社群 這是我開給完成第一份系列課程的同學群組 https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 我要在群組內了解一下大家狀況，才能設計後續課程教材

練習JS路上好多挫折

加油 有心得多多上來分享 有問題也可以多多上來發問 跟大家討論

練習JS路上好多挫折

可以參考我之前的文章 https://codelove.tw/@howtomakeaturn/post/pxd06x 如果要學後端，可以先寫個部落格給自己用 用 php python nodejs 都可以，挑一個你喜歡的 慢慢來，慢慢學，慢慢做專案 有問題或心得都歡迎再上來跟大家討論

JavaScript 系列四：第2課 ── vanilla-lazyload 套件

寫得很好，順利完成！

JavaScript 系列四：第1課 ── autosize 套件

寫得很好，順利完成！

JavaScript 系列四：第2課 ── vanilla-lazyload 套件

第三課作業寫得出來嗎？會太難嗎？ 太吃力的話，我可以多補上一些提示、教學

自學網頁の嬰兒教材：JavaScript（三）作業分享

very good 很好的分享！

軟體工程師都應該養成寫部落格的習慣

直接在討論專區寫文章，也可以喔 寫好的貼文都會出現在個人頁面 等於是在寫部落格＆分享了！ 鼓勵大家多多寫作！

JavaScript 系列三：練習7 ── carousel 輪播元件

寫得很好！順利完成！ JavaScript 系列課程四，也要繼續保持喔！

JavaScript 系列一：第7課 ── 認識巢狀結構

寫得很好，順利完成！

JavaScript 系列三：練習6 ── dropdown 下拉式選單

寫得很好，順利完成！

JavaScript 系列三：練習5 ── collapse 折疊效果

寫得很好，順利完成！

JavaScript 系列四：第2課 ── vanilla-lazyload 套件

很好，順利完成！

JavaScript 系列四：第1課 ── autosize 套件

很好，順利完成！

JavaScript 系列三：練習4 ── 表單驗證

很好，順利完成，動畫很漂亮！

JavaScript 系列三：練習3 ── modal 互動視窗元件

很好，順利完成！

初學Javascript筆記

很好的分享！ 我認識滿多去 AC 順利轉職的 那邊教學品質不錯 我也有寫一些自學課程 可以互補 參酌使用 https://codelove.tw/courses 期待之後更多你的學習心得分享！ 有遇到問題都可以丟上來討論區，或者到 DC 聊天室，跟大家討論！

JavaScript 系列三：練習2 ── toast 吐司元件

很漂亮！順利完成！

JavaScript 系列三：練習1 ── alert 示警元件

設計很漂亮！順利完成！

JavaScript 系列二：第7課 ── 用 Selector API 選取元素

寫得很好！順利通過！ 期待在 JavaScript 系列課程三看到你！

JavaScript 系列二：第6課 ── 讀取與修改 DOM 元素的 style

寫得很好，順利通過！

JavaScript 系列一：第6課 ── 認識資料型態與轉換

很好，順利完成！

JavaScript 系列三：練習7 ── carousel 輪播元件

很好，動畫也做得很漂亮！完成！ JavaScript 系列課程四，也期待能看到你來寫每堂作業！

JavaScript 系列三：練習6 ── dropdown 下拉式選單

很好，通過！

JavaScript 系列三：練習5 ── collapse 折疊效果

很漂亮！動畫也很好看！通過！

JavaScript 系列二：第5課 ── 認識 onchange 事件

很好，順利完成！

JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class

很好，順利完成！

JavaScript 系列一：第7課 ── 認識巢狀結構

很好，順利完成！

自學網頁の嬰兒教材：JavaScript（一）作業分享

very good

JavaScript 系列三：練習4 ── 表單驗證

很好，順利完成！

JavaScript 系列三：練習3 ── modal 互動視窗元件

很好，順利完成！

JavaScript 系列三：練習2 ── toast 吐司元件

很好，順利通過！

JavaScript 系列三：練習1 ── alert 示警元件

很好，順利通過！

JavaScript 系列二：第3課 ── 認識 for 迴圈

差一點，匯出的時候，各項目之間要加一格「空白」，不然字都黏在一起不好讀

JavaScript 系列一：第6課 ── 認識資料型態與轉換

很好，順利完成！

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

很好！順利完成！

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

順利完成！

JavaScript 系列一：第4課 ── 基本的陣列操作

很好！順利完成！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

很好！順利完成！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

@陳婷 很好！順利完成！

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

差一點，跳出視窗的順序不對 要先跳出「招呼訊息」，再跳出「推銷訊息」才對

JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

很好，順利完成！ 其它補充： 刪除按鈕，那個確認視窗，有 bug，按下取消還是會刪除。`confirm` 用法要修正

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

很好，順利完成！樣式弄得很漂亮！繼續保持！ 其它補充： 其實可以不需要 `items` 陣列，就能完成任務了

JavaScript 系列二：第7課 ── 用 Selector API 選取元素

寫得很好！順利通過！程式碼品質也很好！ JavaScript 系列課程三，會在幾天內上線，也期待能看到你來寫每堂作業！

JavaScript 系列二：第6課 ── 讀取與修改 DOM 元素的 style

寫得很好，順利通過！

JavaScript 系列二：第5課 ── 認識 onchange 事件

寫得很好，順利通過！

JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class

very good

JavaScript 系列二：第3課 ── 認識 for 迴圈

very good

JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class

看到了，當兩個陣列元素相同的時候，`.indexOf` 會回傳第一個元素索引，所以會出錯。這 bug 只有在待辦事項有重複的時候，才會發生 你的新解法，可以解決問題 不過，如果按照我說的，根本不使用 `todoLists ` 陣列，也可以避免這個 bug

JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class

很好，作業順利完成！ 經測試，你的作業並沒有 bug 如果有關於陣列操作的更一般性問題，請直接到「討論專區」提出，並且描述清楚問題，最好附上範例程式碼 其它補充： 請參考我前一課的回覆，不需要 `todoLists` 陣列也可以

JavaScript 系列二：第3課 ── 認識 for 迴圈

很好，順利完成！ 其他補充： 為了匯出功能，你建立並且管理了一個 `todoLists` 陣列 其實並不需要這個陣列。直接在 DOM 找到清單，然後 for loop 去跑元素的 `.children` 陣列，就可以得到全部內容了

JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

很好，順利完成！

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

很好，順利完成！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

很好，順利完成！

JavaScript 系列一：第4課 ── 基本的陣列操作

@wei 很好，作業順利完成！

JavaScript 系列一：第3課 ── 修改 html 的內容

很好，順利完成！

JavaScript 系列一：第7課 ── 認識巢狀結構

補充一下，巢狀結構，因為閱讀困難，通常會用「空格縮排」來讓同層級的看起來「深度」一致 以你的程式碼來說，業界正式的縮排會像這樣 https://jsfiddle.net/krj61n5b/ 如何？看起來漂亮很多吧！

JavaScript 系列一：第7課 ── 認識巢狀結構

寫得很好！順利完成作業！ 樣式做得非常漂亮，幾乎是業界商用水準！ 同時也很好地示範了，使用「巢狀結構」的標準解決方法！ JavaScript 系列課程二，會在幾天內上線，也期待能看到你來寫每堂作業！

JavaScript 系列一：第7課 ── 認識巢狀結構

「煩請」的用法，我是參考這邊，教育部辭典 https://dict.revised.moe.edu.tw/dictView.jsp?ID=34889&la=0&powerMode=0

JavaScript 系列一：第7課 ── 認識巢狀結構

寫得很好！順利完成作業！ 同時也很好地示範了，完全不用「巢狀結構」的解決方法！ JavaScript 系列課程二，會在幾天內上線，也期待能看到你來寫每堂作業！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

很好！作業順利完成！

JavaScript 系列一：第3課 ── 修改 html 的內容

很好，順利完成！

JavaScript 系列一：第3課 ── 修改 html 的內容

很好，順利完成！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

差一點，「我要訂購」的按鈕，按下要跳出來歡迎訊息，不是工廠訊息

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

@yen 差一點，因為按鈕上的文字，作業要求是中文字

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

@HankSong 很好！順利完成！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

很好！作業順利完成！

JavaScript 系列一：第3課 ── 修改 html 的內容

很好，順利完成！

JavaScript 系列一：第6課 ── 認識資料型態與轉換

很好！正確更新！作業順利完成！

JavaScript 系列一：第6課 ── 認識資料型態與轉換

寫得很好！作業順利完成！ 這樣寫沒問題，不算是重複宣告！ 邏輯上來說，一定也只會進到 if / else 其中一個去宣告變數，所以也不會造成任何 bug

JavaScript 系列一：第6課 ── 認識資料型態與轉換

缺了「訂購數量」的欄位

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

寫得很好！作業順利完成！

JavaScript 系列一：第4課 ── 基本的陣列操作

很好，超乎預期，還有多做欄位驗證！作業順利完成！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

寫得很好！作業順利完成！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

很好！動畫效果也做得很好！作業順利完成！

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

寫得很好，程式碼很漂亮，樣式也很漂亮。模範級作業，順利完成！

JavaScript 系列一：第4課 ── 基本的陣列操作

寫得很好，樣式也弄得很漂亮，作業順利完成！

JavaScript 系列一：第3課 ── 修改 html 的內容

寫得很好，樣式也弄得很漂亮，作業順利完成！

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

很好！作業順利完成！ 這次的欄位，也一樣把樣式弄得很漂亮！繼續保持！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

很好！作業順利完成！ 樣式也弄得很漂亮！繼續保持！後續課程也要交作業喔！👍

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

很好！作業順利完成！ 要繼續保持喔！ 其它補充： 實務上，函式的內容，前面會加上縮排，比較好讀 請參考我課程內的範例，加上一些縮排，通常是用兩格或者四格縮排

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

很好！作業順利完成！ 感謝帶頭交作業！後續課程也要完成、交作業喔！👍 其它補充： 為簡單起見，本課程以 ES5 語法示範 像你的作業，用 ES6 宣告函式，實務上，通常是用 `const` 來宣告 因為這兩個函式不太需要動態修改，用 `const` 可以減少意外修改到而出錯的機率 不過，程式短短的，就沒差，不太會有問題。程式很多行的時候，凡是 `let` 宣告的，都有可能手誤改到

CSS 基本觀念：rem 跟 em 差在哪？何時該用哪個？有何注意事項？

我分享一下個人經驗： **我幾乎從來不使用 em，永遠都是用 rem 而已** 這樣單純很多，用 em 會有點亂

2023 前端框架比較：Svelte vs React，該學哪一個呢？

文章有些地方寫錯 1. JSX 是 React 內建的，不需要第三方套件支援 2. React 年紀至少八年了，不只三年 3. 實務上大量現成功能、UI 都需要依靠生態系，絕非本文說的「不太重要」

有時會看到 "use strict"，但有時又沒有，請問功能是？

這功能滿久了，是多年以前 ES5 的新功能 只要在檔案開頭，或者函數內部寫這行 ``` "use strict"; ``` 因為只是一串字串，所以一定跟現有程式相容 它會讓程式跑的時候，多做一些檢查，也就是嚴格模式 比如說 沒先宣告變數 就寫 foo = "bar" 就會報錯 嚴格檢查 可以減少 運作時 發生奇怪情況的機會

要怎麼用 jQuery 檢查一個元素有沒有顯示？

jQuery 有一個 is 方法可以用，試試看這樣 ``` $(element).is(":visible"); $(element).is(":hidden"); ```

如何從陣列中移除一個元素？

寫法有很多種 舊方法可以用 indexOf + splice ``` const array = [2, 5, 9]; console.log(array); const index = array.indexOf(5); if (index > -1) { array.splice(index, 1); } // array = [2, 9] console.log(array); ``` 或者用 filter ``` var value = 3 var arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(function(item) { return item !== value }) console.log(arr) // [ 1, 2, 4, 5 ] ``` ES6 寫法 ``` let value = 3 let arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(item => item !== value) console.log(arr) // [ 1, 2, 4, 5 ] ```

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

以上，總之，目前有的一些挫折感、黑箱的感覺，都很正常，找時間再慢慢研究、慢慢補起來觀念就對了！有問題再多多來論壇發問吧！

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

以上，簡單建議供您參考，之後有其他問題，都可以來討論區發文！加油！

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

速成班，普遍有這問題，內容太多，難以消化。 直接學 laravel + react，我認為99%的學員都會消化不良。 我建議你，如果一知半解沒關係，之後乖乖從 php + JavaScript 最土炮的寫法，慢慢補基本觀念，接著再把 laravel + react 逐漸認識起來。

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

但是，在一開始，以先找到工作、職位坐穩為主，所以先專心在前端即可。 之後可以挑喜歡的後端語言來學，python php 或直接用 nodejs 都可以。

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

對，我都會建議新手，之後有時間的話，開始學一些後端開發，這樣比較好玩，可以做自己專案，也比較瞭解整個生態系。

各位新朋友，來這串留言，簡單說一下最近在學的東西＆遇到的挑戰吧！

我帶頭吧！我最近在幫客戶引進 Quasar Framework，是 Vue 的框架！雖然我比較熟悉 React，但 Vue 也是還不錯的！順便看一下完整的前端框架，架構、哲學為何，覺得還不錯！跟大家一起加油！

寫出更好 JavaScript 的幾個實務技巧：新手推薦

很好的文章～！

熱門搜尋： c ci JavaScript 系列 JavaScript 系列 工程師 Java react jav . 嬰兒 測試 C 搜尋 hooks Node 自學網頁の嬰兒教材 local storage api this API html onclick 面試 javascript 英文 練習 OOP Git BASIC result Hook console 20 fetch birdi React jqu 系列五 Vue todo local birdie typescript ajax jquery HTML java hoisting angular 後端 原型 C/C 親手做個待辦事項小工具 windows 龜兔賽跑 Ai 亂碼 缺德行為 工程師的缺德行為 AI 取代 偽類 model REACT lissy93 給新手 react strict git 求職 JavaScript' LRU textarea 履歷 謝謝 123 接案 Python oop 阿川 文章 api 轉職 寫測試 長遠來說 待辦事項小工具 history Gpt glitch Toptal 20個 for callback C/C++ todolist for of email android mail svelte 2023
每日接收程式設計新知，軟體工程師們一起來學習！
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。