學期2-2 : Week 3 社群名單:自主實作 ORID

閱讀時間約 3 分鐘

Objective

這週為自己設定為禮拜六完成所有課程,同時為兩個小作品「社群名單」、「電影清單」增加至少一個教材要求以外的小功能。


Reflective

在「社群名單」的作業,除了加上search bar、add to favorites、pagination三個基本的功能外,z複習fontawsome的使用,增加了boostrap的 carousel ,並考量實際運用中我們會希望透過年紀、性別甚至地區篩選欲聯絡的朋友,但最後到禮拜五前竟然只做好了年紀與搜尋的篩選,就只能之後有空再來研究增加功能。
在進行性別篩選時,發現只是新增加一個篩選機制,除了學習<select>、<options>標籤與selectIndex的運用,也增加兩個不同的user陣列maleUser與femaleUser,產出要選擇全部user、男性user、女性user的函數 userChagendByGender ,但造成 renderPaginator(渲染分頁)、getUsersByPage (取得每頁要呈現的人的陣列),在searchForm這個監聽器裡面,所使用的陣列filteredName等一些原本的函式和陣列都需要做或多或少的改變,只能不斷的console來找到錯誤。在debug的過程中也發現,雖然之前教材不斷提到要拆解問題寫虛擬碼,但實際在撰寫程式時,真的也會發現自己仍忽略許多步驟,如對原本的程式碼不夠熟悉,在新增功能時期所謂牽涉到變數、函式甚至監聽器都是需要考慮的因素,關於這個問題我想也是自己需要加強的地方。

Interpretive

這週最挫折的是A13的作業,一開始把自己想的太厲害列了好多功能想要增加,但最後因為時間關係只有先寫好性別篩選與  照片輪播功能carousel。 但好像因為在思考A13如何撰寫時,有透過設定當前if條件式來選取要渲染html使用的男性女性陣列,在A14的作業我就運用同樣的觀念,建立一個當前變數看是card模式還是list模式,在透過if條件是選擇要渲染的html語法,呈現card模式的清單還是list模式的清單,大約一小時左右就完成作業。另外也回去看教材提供的model answer,好像是透過changeDisplayMode函式來決定現在的模式,與modeChangeSwitch這個事件來做模式切換的監聽,因為我是直接建立監聽card和list這兩個icon的dom節點,也就是建立兩個監聽器,教材是用icon上面的父節點做監聽,我想這是較好也較為簡潔的寫法,避免我們要新增的模式越來越多,我就要新增更多的監聽器。


Decisional

下週的課程設計看起來會是2-2最有挑戰性的一週,其實心裡也是怕怕的。除了翻牌設計的專案、github的使用,還有課程驗收能力的題目要完成,因為內容較多,這週在繳交作業時,應該不會要求自己在另外研究新功能,先以完成驗收題組與2-3選課引導為目標,完成寫完ORID筆記後如有時間,再針對作業進行優化。
avatar-img
2會員
15內容數
紀錄轉職路上的點點滴滴
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Blockcyber的沙龍 的其他內容
電影清單:前端體驗綜合實作 Objective Reflective Interpretive Decisional
Objective 因後面有幾個周末無法全空下時間學習,最近又因為專案開始進行常常會加班,為使課程可於期限內完成,為自己設定的目標就是在7/18學期2-2開始前至少完成一周的作業。現在看來至少是完成了最低的標準,並提前開始下週進度。 Reflective Interpretive
為什麼回來了? 重新開始 目前的規劃
電影清單:前端體驗綜合實作 Objective Reflective Interpretive Decisional
Objective 因後面有幾個周末無法全空下時間學習,最近又因為專案開始進行常常會加班,為使課程可於期限內完成,為自己設定的目標就是在7/18學期2-2開始前至少完成一周的作業。現在看來至少是完成了最低的標準,並提前開始下週進度。 Reflective Interpretive
為什麼回來了? 重新開始 目前的規劃
你可能也想看
Google News 追蹤
填寫志願時,不少人是參考網路資訊或親友意見、同儕相約、印象...糊里糊塗就「上榜」,虛度寶貴光陰。註   建議要先以自己有意願、有興趣、有能力的為主,高中職三年透過學習、實作、參加比賽、考取證照、參加各項活動而累積自信,成為更好的自己。   高分族群若無特殊原因建議選讀前2志願(高中或高職)
Thumbnail
Summer 將自己的數位成長學習系統進行整合與調整,運用 PAI系統 轉為專案形式,加上不同目的的客製化篩選、排序、圖示等資料庫可視化的呈現 ,讓課程、學習都能夠清晰明瞭。另外除了課程外,也融合自己的書籍閱讀、資訊整理搜集等,讓整個頁面更貼近屬於我自己的「數位成長學習」習慣。
Thumbnail
日期網友詢問一個多條件動態下拉式選單的設計,如下圖。 資料中有各種年齡層的目標對象可食用食物的資料分析,其中1代表該年齡層可以吃的食物、0代表不能吃的食物。 原PO想要根據這個資料來源製作一個下拉選單,當選擇該年齡層的目標對象時,下拉式選單分別於主食、肉類、葉菜類顯示可食用的食物名稱(原始資
Thumbnail
本文準要談申請大學第二階段甄選審查資料的準備方向,究竟要準備哪些審查資料?又要上傳哪些項目呢?
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
Thumbnail
EP.03 人事篩履歷 雖然標題看起來是篩選,但多數的人事招募工作有看到主動投遞的大概就是直接轉發用人單位主管,詢問這個要不要約。如果都沒有什麼主動投遞的,就如同前面所提,那就會根據用人主管的一些特定條件去搜尋,然後一次提供部分數量,再讓主管挑挑有沒有合適可以問的。這樣的一段工作對於招募來說相
Thumbnail
題目敘述 題目會給我們一組定義好的界面和需求,要求我們設計一個資料結構,可以滿足平均O(1)的插入元素、刪除元素、隨機取得元素的操作。 RandomizedSet() 類別建構子 bool insert(int val) 插入元素的function界面 bool remove(int val
Thumbnail
學期的開始,怎麼幫助學生做好時間規劃,展開一系列的學習? 可以運用Numbers工作表讓人一目瞭然的特性, 適合設計一張張學期生活規劃表, 帶領學生學習規劃生活、成為自己的主人。
填寫志願時,不少人是參考網路資訊或親友意見、同儕相約、印象...糊里糊塗就「上榜」,虛度寶貴光陰。註   建議要先以自己有意願、有興趣、有能力的為主,高中職三年透過學習、實作、參加比賽、考取證照、參加各項活動而累積自信,成為更好的自己。   高分族群若無特殊原因建議選讀前2志願(高中或高職)
Thumbnail
Summer 將自己的數位成長學習系統進行整合與調整,運用 PAI系統 轉為專案形式,加上不同目的的客製化篩選、排序、圖示等資料庫可視化的呈現 ,讓課程、學習都能夠清晰明瞭。另外除了課程外,也融合自己的書籍閱讀、資訊整理搜集等,讓整個頁面更貼近屬於我自己的「數位成長學習」習慣。
Thumbnail
日期網友詢問一個多條件動態下拉式選單的設計,如下圖。 資料中有各種年齡層的目標對象可食用食物的資料分析,其中1代表該年齡層可以吃的食物、0代表不能吃的食物。 原PO想要根據這個資料來源製作一個下拉選單,當選擇該年齡層的目標對象時,下拉式選單分別於主食、肉類、葉菜類顯示可食用的食物名稱(原始資
Thumbnail
本文準要談申請大學第二階段甄選審查資料的準備方向,究竟要準備哪些審查資料?又要上傳哪些項目呢?
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
Thumbnail
EP.03 人事篩履歷 雖然標題看起來是篩選,但多數的人事招募工作有看到主動投遞的大概就是直接轉發用人單位主管,詢問這個要不要約。如果都沒有什麼主動投遞的,就如同前面所提,那就會根據用人主管的一些特定條件去搜尋,然後一次提供部分數量,再讓主管挑挑有沒有合適可以問的。這樣的一段工作對於招募來說相
Thumbnail
題目敘述 題目會給我們一組定義好的界面和需求,要求我們設計一個資料結構,可以滿足平均O(1)的插入元素、刪除元素、隨機取得元素的操作。 RandomizedSet() 類別建構子 bool insert(int val) 插入元素的function界面 bool remove(int val
Thumbnail
學期的開始,怎麼幫助學生做好時間規劃,展開一系列的學習? 可以運用Numbers工作表讓人一目瞭然的特性, 適合設計一張張學期生活規劃表, 帶領學生學習規劃生活、成為自己的主人。