發表文章

目前顯示的是 1月, 2023的文章

Dummy Project - 社群網站

圖片
     Dummy Project -  製作社群網站的前端頁面: 程式碼參考資料:    作品頁面      GitHub 製作流程: 功能描述 - 按照API資料庫顯示用戶 - 點選More顯示用戶的詳情 - 使用分頁器顯示 - 使用名字關鍵字搜尋用戶 - 加好友 - 好友分頁可以檢視已經加入的好友 - 可以移除好友 切版 Bootstrap模塊選用 這邊會需要用到以下模塊.  也可以直接在Bootstrap網站中搜尋關鍵字 Nav Bar - 用來做首頁與好友分頁的切換 Search Bar - 搜尋功能.  有些會合併到Nav Bar.  需要搜尋inline forms Card - 用來顯示每個用戶的頭像與名字後面會附加其他功能: 詳情 與 加好友 Pagination - 也有人稱為paginator.  分頁器 Modal - 彈出對話框.  用來顯示詳情 Javascript A. 渲染User List     1.  使用Ajax將API的用戶資料抓到 model.users中     2.  定義DOM節點 - 要渲染用戶清單位置      3. 製作view.renderUserList( ){ } 來渲染用戶頁面 使用 Template literals 的方式進行渲染      4.   在axios時 執行view.renderUserList(model.users) 因為這邊抓取資料式Ajax (非同步)           所以在外面執行的話, model.users還是空的      5. 渲染後調整一下margin. 以及Modal內容 B. 顯示詳情 Show Modal      1. 配對按鈕與Modal    參考範例          按鈕加上...
張貼留言
閱讀完整內容

Javascript - Event Loop

圖片
  Javascript - Event Loop 江湖在走, EvenLoop 要懂. 開始用JavaScript嘗試為世界做些什麼之前, 先把Event Loop弄懂可以讓作品更討喜 這次參考的學習資料是 youtube - JSconf的教學影片, 連結如下 Review and respect to: https://www.youtube.com/watch?v=8aGhZQkoFbQ 結論: 最重要的就是實際應用啦 透過影片裡面的例子可以知道 什麼是該去避免跟如何避免 趕時間的朋友可以花5分鐘 把下面精簡過的內容讀過一次 有時間的朋友建議把上面連結的影片看完 真的很有時間的朋友可以先看過我的說明後再去看連結的影片... 名詞介紹: RunTime: 這邊指的針對javascript的運作環境 Single Threaded: Javascript是單線程的程式語言, 主程式碼(main)會被安排到要執行                                       的 堆疊中 (stack).  而且一次只會做一件事情. Stack : 程式會從底部開始進行堆疊, 而是從最上方開始逐個執行, 執行完後從stack移除 Heap :   被物件占用的記憶體 Web API: 可以簡單理解為瀏覽器以及其背後的伺服器 Task Queue: 這邊可以想像為是一個等待區域. 準備好很多事情要放入Stack裡面去做.                             但是TaskQueue很有人性, 它會等Stack手上是空著的時候才會丟任務進去.                     ...
張貼留言
閱讀完整內容

Dummy Project - POS機 (API & DOM Application)

圖片
Dummy Project - POS機 (API & DOM Application) 完成作品:  POS機 參考資料:  GitHub Page 前期規畫 一開始可以先用個心智圖 描繪一下大概會有哪些步驟 可以按照自己的規劃進行作業 等實作完成後   再回來看看當初那些 地方沒有考慮到 我個人覺得這是一個不錯的練習 VScode前置作業 創建HTML , css, js檔案 HTML中打入 html E5讓VScode導入初始範本 貼入套件連結 到 Bootstrap 首頁搜尋CDN (Content Delivery Network)即可找到 <head> 貼上 bootstrap的 css link <body> 貼上axios → main.js → bootstrap.js 這些連結 HTML (main.html) 1. 切版 2. 一開始先把HTML該放的元素都放進去.  之後可以使用dummy的資料預覽完成品的樣子 3. 到bootstrap找可套用的 Card 元素  4. 使用dumy資料完成頁面. 圖片可以隨便挑一張圖片. 也可以用參考資料中的src 5. 微調到滿意. 調整一下spacing, 字體大小, 按鈕顏色這些的. 不想調整也可以不調整 6. 很大部分的HTML後面會被main.js渲染調. 等將temlplate copy過去之後, 可以把     原本的HTML刪掉, 留個註解假裝高手. 7. 弄到這邊差不多就可以放著了     等main.js需要用特定元素的時候再過來看或是修改就好 8. 比較需要注意的是加到購物車的按鈕會用到 三元運算子 做邏輯判斷.     強烈建議看一下MDN.  這東西好酷 css.檔案只有一段. 就是把body加個padding 15px比較好看一點 也可以直接找Bootstrap中 padding 的語法寫在HTML裡面.  這樣就不用style.css這個檔案了 product list的部分 使用bootstrap的card模板做修改 這邊注意的是因為bootstrap中 row一行有12個單...
張貼留言
閱讀完整內容