來,讓我們特別關心轉職成功、上班大約半年的 @birdie2019 @JoeyLai 最近有學到新東西? 是否變得越來越有自信? 該不會想要跳槽去別間公司了吧? 隨時歡迎上來分享工作筆記 or 上來發問卡關問題~
工作了很多年,還是搞不太懂 promise、async/await 是什麼嗎?用這份作業包一次搞定觀念! https://codelove.tw/@howtomakeaturn/course/Pam6qL @hung @birdie2019 @superyngo 找時間來寫寫看~
https://codelove.tw/@howtomakeaturn/course/bap2xj 歡迎寫寫看作業~ 可加強 js 基本功~ 因為,學一點點後端,會讓「前端觀念更清楚」 也就是「基本功比普通前端工程師更強」 並且為更多 js 進階內容打下基礎~ --- @hung @birdie2019 @superyngo 找時間來寫寫看~
來,讓我們特別關心轉職成功、上班超過一個月的 @birdie2019 @JoeyLai 是否已掌握公司狀況? 是否變得越來越有自信? 最近有學到新東西? 隨時歡迎上來分享工作筆記 or 上來發問卡關問題~
來,讓我們特別關心剛轉職開始上班的 @birdie2019 @JoeyLai 本週是否有學到新東西? 是否有遇到什麼地方卡關? 隨時歡迎上來分享工作筆記 or 上來發問卡關問題~
首先恭喜,本站的最早一批學員之一 @birdie2019 順利找到工作上班啦~ 趁這機會,順便簡單分享幾個給新入行者的建議 ## 建議積極衝刺 9 - 18 個月 剛開始上班一定是手忙腳亂又緊張,建議前三個月拼一點,拿出「讓人印象深刻」的表現,先站穩職場,自己也比較有安全感 雖然一開始會覺得自己實在很弱,但是,利用業餘時間多讀技術文章,持續 9 -18 個月,會有巨大成長,到時回頭來看,連自己都會吃驚可以進步這麼多 新手工程師,前 3 - 5 年的薪水通常會快速成長,因為能力也會快速成長 除非公司真的很凹人、待遇真的很不滿意,否則剛入行,就先拼一下吧 ## 大小問題,多多上來發問 目前這論壇上的發問、討論內容,還是偏少 大家可以多多發問,我也需要這些提問,來當成寫作的靈感 不然我常常也不太知道大家想看什麼,我要寫哪些文章 就貼文發問吧! ## 養成筆記的習慣 可以用自己筆記本、部落格、或直接在這邊定期發文 有整理出一些東西、觀念,都可當成隨手筆記貼在這,未來要翻閱的時候,比較容易找到 心有餘力的話,定期寫學習心得分享,更好 這個習慣的重點在於:**溝通能力的訓練** 軟體工程師需要「極強的溝通能力」,寫作可以訓練這點 現在遠端工作越來越普及,「強大的寫作能力」也會對職涯很有幫助 所以要多多找機會寫作,本站的內容也都可透過 API 撈出來建立獨立的個人網誌 --- 以上,簡單分享,我希望能盡快看到第二、第三位順利轉職的同學出現喔~
04/28 週五 本週閒聊串 一週又要結束囉~ 各位本週有學到什麼新東西?有遇到什麼問題?技術觀念想不通?職涯有迷惘? 歡迎留言分享 😁😁😁 --- 特別要 cue 三位完成 JS 九系列的同學 @birdie2019 @hung @superyngo git / npm / vue 3 這些相關技能有開始找資料了嗎? 是否有地方卡關? 稍微準備一下,儘早開始投履歷面試看看吧 😁😁😁
為了促進討論方便 開發了 @用戶網址 功能,方便通知相關用戶,邀請別人參與討論~ 目前要把用戶網址每個字母都打對,未來有空再開發 auto-complete 功能~ 舉個例 可以這樣 cue 目前寫作分享最多的 @JsLover0018 希望他繼續分享更多用心的文章! 再舉個例 可以這樣 cue 目前完成九份 JS 系列的同學 @birdie2019 @hung @superyngo 這三位的 JS 能力 已經超過 90% 坊間速成 JS 班的畢業生~ 補充一些周邊技能,可以直接開始面試了~ --- 以上,歡迎多多使用這功能~
* [第1課 ── 碼表應用程式](https://replit.com/@birdiewu/Ma-Biao-Ying-Yong-Cheng-Shi-online-stopwatch?v=1) * [第2課 ── 筆記應用程式](https://replit.com/@birdiewu/Bi-Ji-Ying-Yong-Cheng-Shi-online-notepad?v=1) * [第3課 ── 分帳應用程式](https://replit.com/@birdiewu/Fen-Zhang-Ying-Yong-Cheng-Shi-online-split-the-bill?v=1) * [第4課 ── 行事曆應用程式](https://replit.com/@birdiewu/Xing-Shi-Li-Ying-Yong-Cheng-Shi-online-calendar?v=1) * [第5課 ── 體重追蹤應用程式](https://replit.com/@birdiewu/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1) 備註:如果第五課卡關,說不定你遇到跟我一樣的問題,可以參考[這裡的討論串](https://codelove.tw/@birdie2019/post/Ja69K3) * [第6課 ── 天氣查詢應用程式](https://replit.com/@birdiewu/Tian-Qi-Cha-Xun-Ying-Yong-Cheng-Shi-weather-in-taiwan?v=1) * [第7課 ── 國家資訊與地圖應用程式](https://replit.com/@birdiewu/Guo-Jia-Zi-Xun-Yu-Di-Tu-Ying-Yong-Cheng-Shi-world-map?v=1) 心得分享: JavaScript第八系列的作業跟前七個系列相比真的有挑戰性和困難度,此系列讓我進入到學習的陣痛期,不習慣、沒自信地摸索著,在網路上東看看西看看方法,文件重複看了好多次,code也拼拼湊湊完成每個作業的規格,遇到卡關的問題學著自己解決(除了第五課的問題外,那邊卡關兩天,最後終於揮白旗XD),想想有什麼辦法可以做或可以找哪方面的資料,我認為自己不是很聰明和邏輯好的人,剛開始覺得作業規格條件好困難,一直出現卡關的問題,現在回頭看其實我都挑戰完成了欸!雖然回去翻作業看還是有小瑕疵和待優化的地方,但還是恭喜自己終於完成了! _(:з」∠)_
https://replit.com/@birdiewu/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1  JS部分加上第46~49和55~58行無法更新圖表(官網提供的功能) 新增和刪除資料時,圖表無法跟著一起改變,只能重新整理網頁才會改變 不知道哪邊出了問題@@
## 課程目標 - 能夠寫出體重追蹤應用程式 ## 課程內容 找套件時,如果官方沒有提供特定框架的版本,通常會有開發者,自行包裝一個,分享給大家使用 搜尋 `how to use 套件名稱 in 框架名稱` 大概就找得到相關資源了 舉例來說,這款圖表套件,官方沒有提供框架版本 https://www.chartjs.org/ 但是社群就有人做好了 https://vue-chartjs.org/ --- 介紹一個網站 https://dribbble.com/ 業界設計師,經常在上面搜尋別人的成品、找靈感、分享靈感 除了在 google 搜尋關鍵字,也可以常常到 Dribbble 搜尋 --- 這一課來寫體重追蹤應用程式 關鍵字 `weight tracking` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下: - 這種程式應該要讓人註冊登入使用,需要後端配合,但我們簡化吧:免登入、把資料存在 local storage 就好 - 此程式能夠新增一筆體重資料,input 欄位有「體重」、「日期」 - 有清單列表顯示每一筆輸入的資料,按照日期排序。每筆資料旁邊有刪除按鈕 - 使用 Chart.js 將體重的走勢,用折線圖(Line Chart)呈現 - 請「不要」使用社群包裝的版本(vue-chartjs),學著自己在框架內導入套件 --- 提示:vue 跟 chart.js 整合的時候,有一個地雷!會導致 `RangeError: Maximum call stack size exceeded ` 要解決這個地雷,請參閱這邊的討論 https://codelove.tw/@birdie2019/post/Ja69K3 --- 做出以上功能,你就完成這次的課程目標了!
* [第1課 ── 認識 Vue 基本環境與 render state](https://jsfiddle.net/birdie2019/54pzj7w2/51/) * [第2課 ── 體驗一下 Reactivity 的效果與便利](https://jsfiddle.net/birdie2019/54pzj7w2/55/) * [第3課 ── 學習 Vue 條件判斷式的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/84/) * [第4課 ── 學習 Vue 迴圈的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/94/) * [第5課 ── 學習 Vue 事件處理的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/396/) * [第6課 ── 認識 Lifecycle Hooks 與 Watchers](https://jsfiddle.net/birdie2019/54pzj7w2/415/) * [第7課 ── 認識 Template Refs](https://jsfiddle.net/birdie2019/54pzj7w2/432/) 心得分享: 老樣子,一樣一開始措手不及,文件有些看很多次還是看不懂,一直試才慢慢了解 (但還是有不了解的地方),確實用Vue方便很多!程式碼部分少打逗號分號或括號對不起來的機率增加,如果作業過程跑不動說不定你跟我一樣遇到這個問題XD
簡單示範動畫效果:https://jsfiddle.net/birdie2019/bhdL4r7u/26/ 之前看國外網友的作品覺得作品裡的表單動畫好看,細讀了code,發現只需用HTML和CSS就能做到 主要用到: * [HTML <input> required 屬性](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input) * [CSS :required 選擇器](https://developer.mozilla.org/en-US/docs/Web/CSS/:required) * [CSS :focus 選擇器](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) * [CSS :valid 選擇器](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid) 了解他們的用法和關係,可以試試製作其他驗證動畫效果喔!
第1課 ── 認識 data model 與 render function https://jsfiddle.net/birdie2019/7haz6fLj/9/ 第2課 ── 認識陣列操作 https://jsfiddle.net/birdie2019/7haz6fLj/15/ 第3課 ── 認識匿名函式 https://jsfiddle.net/birdie2019/7haz6fLj/24/ 第4課 ── 熟悉 render function https://jsfiddle.net/birdie2019/7haz6fLj/30/ 第5課 ── 熟悉匿名函式 https://jsfiddle.net/birdie2019/7haz6fLj/34/ 第6課 ── 認識 data model 的優點 https://jsfiddle.net/birdie2019/7haz6fLj/39/ 第7課 ── 資料序列化 https://jsfiddle.net/birdie2019/7haz6fLj/61/ 心得分享: 一開始前面幾堂不知所措,腦袋很習慣想要更新DOM去修改資料, 後面比較熟悉這種方式,最後一堂課更能感受data model的優點, 跟原本的相比少了很多程式碼,也輕鬆很多!
按下刪除按鈕對映的todo要刪除 但我不知道該如何取得索引 作業目前卡在這裡(第27-33行)https://jsfiddle.net/birdie2019/7haz6fLj/19/
## 課程目標 能夠從陣列刪除元素 認識 for in 迴圈寫法 認識匿名函式(anonymous function) ## 課程內容 在 JavaScript 中,刪除陣列元素的方法,有超多種 這邊介紹一種根據索引刪除的方法 ``` var fruits = ["apple", "banana", "orange"]; var index = 1; var num = 1; fruits.splice(index, num) console.log(fruits) ``` `.splice()` 函式第一個傳索引,第二個傳要刪的數量,通常就傳 1 就好了(一次刪一個即可) 實務上,你就根據情況,隨便找一個能用的方式,來操作陣列就對了 --- 之前我們介紹過 for of 的寫法,很簡單好用 ``` var fruits = ["apple", "banana", "orange"]; for (const fruit of fruits) { console.log(fruit) } ``` 這邊多介紹一個 for in 的寫法,需要索引時可以用 ``` var fruits = ["apple", "banana", "orange"]; for (const index in fruits) { const fruit = fruits[index]; console.log(index); console.log(fruit); } ``` --- 最後來介紹匿名函式(anonymous function) 聽起來很玄,但其實就只是沒有名字的函式而已 以下是有名字的函式 ``` function hello1() { alert("hello1"); } var hello2 = () => { alert("hello2"); } ``` 以下是沒有名字的函式 ``` <button> hello </button> ``` ``` var button = document.querySelector('button'); button.onclick = () => { alert(123) }; ``` 動態宣告一個函式,然後直接指派、使用,就是匿名函式 在 JavaScript 中,很多時候,有些小任務,需要宣告新函式來用,但又懶得去設計命名那些的 這時候就可以用匿名函式來節省時間 雖然看起來有點不習慣、有點奇怪 但在實務上,非常多地方,其實都會用到匿名函式,算是 JavaScript 非常好用的一個功能、特性 ## 課後作業 接續上一課作業,這次來實作「刪除事項」 請更新 `render` 函式,讓 UI 看起來像這樣 ``` <ul> <li> <span>倒垃圾</span> <button>刪除</button> </li> <li> <span>繳電話費</span> <button>刪除</button> </li> <li> <span>採買本週食材</span> <button>刪除</button> </li> </ul> ``` 然後在過程中,動態產生 button 的時候,將 `.onclick` 屬性設定為一個 arrow function 這個 arrow function 不能直接更新 DOM,而是先去更新 data model,接著 render,用這種方式間接更新 DOM ``` deleteBtn.onclick = () => { // 請寫出此 arrow function 內容(更新 todos 陣列) render(); }; ``` --- 提示:由於 javascript 中 hoisting 的特性,for loop 拿到的索引,在裡面的 arrow function 中使用,很容易抓錯 關於索引一直拿不到的問題,請參閱這邊我跟 birdie 同學的討論 https://codelove.tw/@birdie2019/post/2anbka --- 做出以上功能,你就完成這次的課程目標了!
第1課 ── 學會 Cookie 相關功能 https://replit.com/@birdiewu/DarkvioletClutteredDigits?v=1 第2課 ── 學會 Local Storage 相關功能 https://jsfiddle.net/birdie2019/wkqbvhma/378/ 第3課 ── 變數作用域、箭頭函式、ES6 語法 https://jsfiddle.net/birdie2019/0akLh4r8/7/ 第4課 ── 學會 AJAX 基本原理 https://jsfiddle.net/birdie2019/5sfhbq8v/8/ 第5課 ── 學會 AJAX 錯誤處理 https://jsfiddle.net/birdie2019/5sfhbq8v/12/ 第6課 ── 學會 AJAX 與各種 HTTP 請求方法 https://jsfiddle.net/birdie2019/5sfhbq8v/15/ 第7課 ── 學會 AJAX 與 data attribute 的結合 https://jsfiddle.net/birdie2019/5sfhbq8v/23/ 心得分享: 做完本單元五的課程作業,覺得自己技術再提升一點(?! ) 模擬購物網站有點成就感(自己講XD) 但同時覺得要做出大規模的購物網站真的不容易! 因為資料好龐大( 像amazon或MOMO等等),自己還有好多要學~
https://jsfiddle.net/birdie2019/5sfhbq8v/15/ 作業如上,雖然完成此課作業的功能但有個問題 JS程式碼的部分,作業網址第30行和第36行部分 為什麼改成event.target就無法運作了?如圖下圖 
第1課 ── autosize 套件 https://jsfiddle.net/birdie2019/j69s8vdc/38/ 第2課 ── vanilla-lazyload 套件 https://jsfiddle.net/birdie2019/401xa29h/104/ 第3課 ── Chart.js 套件 https://jsfiddle.net/birdie2019/upLn7j1b/6/ 第4課 ── jQuery 套件 原生JS: https://jsfiddle.net/birdie2019/ebax340f/2/ jQuery: https://jsfiddle.net/birdie2019/eabr2jh3/7/ 第5課 ── xdan/datetimepicker 套件 https://jsfiddle.net/birdie2019/y7mzws6r/18/ 第6課 ── kenwheeler/slick 套件 https://jsfiddle.net/birdie2019/k6vgcod0/52/ 第7課 ── TinyMCE 套件 https://jsfiddle.net/birdie2019/m8dforLn/23/ --- 心得分享: 以上套件都蠻有趣的,尤其是Chart.js,在學習過程中一直讚嘆這套件好厲害! jQuery我覺得不錯,程式碼可以少打很多,但還是覺得學好JS很重要。 另外讀第三方套件文件內容都是英文,一開始讀有點措手不及,有些東西看不懂和不了解其意思,但動手試試看觀察變化,試個幾次就明白了,請勇於嘗試會發現很好玩。
練習1 ── alert 示警元件 https://jsfiddle.net/birdie2019/4ur1c7xf/34/ 練習2 ── toast 吐司元件 https://jsfiddle.net/birdie2019/fmc6b8ht/49/ 研究了一下setTimeout()用法,經過自己的消化吸收寫成筆記記錄下來 分享筆記:https://hackmd.io/@birdie/SJisAlTcs 另外發現display無法做transition的效果,改用opacity 練習3 ── modal 互動視窗元件 https://jsfiddle.net/birdie2019/9p3zsthL/17/ 練習4 ── 表單驗證 https://jsfiddle.net/birdie2019/bdavsur4/91/ 練習5 ── collapse 折疊效果 https://jsfiddle.net/birdie2019/dkncrv03/43/ 認識了scrollHeight屬性,建議可以用圖去搜尋會比較好理解這個屬性 也順便學了clientHeight和offsetHeight 練習6 ── dropdown 下拉式選單 https://jsfiddle.net/birdie2019/xb0ka495/44/ 研究window.onclick怎麼使用並認識了matches() 練習7 ── carousel 輪播元件 https://jsfiddle.net/birdie2019/t6uxb9df/30/ --- 此次教材心得分享: 一開始在腦袋裡會想很複雜,憑空亂想亂打code發現不是再刪掉再亂打,但其實不可能一下就到位,後來拿筆和紙先把需要的功能和自己的邏輯想法簡單的寫和畫下來,釐清自己現在需要怎麼做,方法有幾種,若這個方法不行,還可以用什麼方法可以做,這個方法看似很沒有效率,但真的對我幫助很大且完成此次所有作業。
你的轉職路上,還缺少一份自學作業包!寫完這幾包,直接拿作品去面試上班!
本學院另有附設一個 LINE 新手發問&交流群組!歡迎加入討論!