發表文章

A24 - 切版挑戰:完成廣告系統(Q2)

Q1:你完成了什麼?花了多少時間?為什麼會做這些事?    1.這次實作完成table row點擊check box時修改樣式及table body的部份可以上下捲動這兩個部份。           2.總共花了約1小時40分鐘左右。           3.依專案的需求把網頁優化。 Q2:碰到什麼困難?如何解決?           在實作過程中碰到要如何取得input父層元素,查了MDN的說明可以使用parentNode的方法取得,但如果要取得多層一上就不斷串接parentNode才能取到該層的元素。 Q3:回頭檢視流程與成果時,哪些部分你覺得可能有改善的           程式碼的部份,使用parentNode取得多層以上的父元素必須用串接的方式應該會有個更好的寫法,目前查資料有另一個closest()的方法可以使用,但有一項限制就是該元素的class必須是單一的才有辦法取得,如果有多個使用相同class名稱的元素則無法使用,這部份還在尋找一個最好的方法來達到取得多層父元素的效果。            

A23 - 「自學經驗」回顧

          說到自學的案例,其實遇到蠻多次需要找資料或解決方案的狀況,因為幾乎每次在做(作業)實作練習的過程中,常遇到想要做的功能不知道語法、不知道怎麼下手或是遇到不會解的bug而卡關,只是碰到的狀況有些容易有些困難。          這學期讓我印象較為深刻的一次自學經驗是在實作(A13)毛小孩星球相片集的特效製作,在實作(A13)之前剛學完Grid排版及偽元素的應用,網頁排版上可能練習比較多次了所以沒有太大的問題,但使用偽元素做出特效的部份就是一項 挑戰,雖然前面教案也剛學過使用偽元素做漢堡排樣式及動畫特效,可是相片集是要實作邊框線條展開的特效,兩個特效呈現的方式是完全不同,頓時陷入不知道要如何下手的狀況,因此先查找教案的特效是如何實作,也一邊搜尋網路上相關的資料及類似的範例來參考,然後一步一步慢慢的嘗試把偽元素樣式做出來並搭配上動畫特效。          經過這次的經驗,發現偽元素及CSS動畫特效其實沒有想像中的難,有時候只是需要一點巧思,像這次在實作線條展開的動畫卡關,一部份的問題其實是我不知道如何用偽元素畫出邊框的樣式,進而影響動畫不知道要如何實作,後來是看了很多範例後才想到要怎麼製作邊框樣式,最後搭配上展開的特效才解決卡關的狀況。 透過每一次的自學不斷的累積經驗,相信寫程式的過程會越來越得心應手。

A15: 介紹你的專案(毛小孩星球)

  1.你為何會選擇這個專案?    這個專案主要是透過Grid system 實作練習RWD網頁的切版過程。 2. 你使用了什麼技術?     主要使用Html 及 CSS ,沒有套用任何套件及框架。 3.哪部分你相對能掌握?哪裡花了最多時間?     使用基本的media query 實作排版的部份都還能完成,最花時間的是轉場動畫的實作,對於動畫的使用還不是那麼熟悉,所以還需要花較多的時間練習。 4.過程中碰到什麼困難?又如何克服?(例如:查找網路文件)      在實作轉場動畫及使用偽原素上都有遇到卡關的狀況,有搜尋相關的資料及範例來 參考,然後研究出解決的方法。 5. 過程中你有對哪個前端技術有特別深刻的學習?      偽元素的使用是這次學習過程最深刻的部份,之前有看過相關的資料但一直沒有搞 懂如何實作出偽元素,這次專案除了學習外還特別做練習。      專案codepen連結:https://codepen.io/mirageapache/pen/GRGajEK

2-2 學習回顧

  OBJECTIVE 這個學期學到許多JavaScript的技能,尤其是Array的各種應用及函式的拆解,技術以外的是思考的訓練,寫虛擬碼、拆解功能讓邏輯更清楚在撰寫每項功能時的步聚。 REFLECTIVE 從實作過程中學到最多,只閱讀教案及觀看教學影片大部份都能理解教學的內容,但要實際的應用卻是另一回事,沒有真的動手做過一次沒辦法融會貫通,只是自己思考過才會真的內化成自己的知識。 INTERPRETIVE 繼續努力完成每一項實作,把教案的重點筆記起來,以後在復習或找資料能更快速得到解答。 DECISIONAL 持續學習,持續進步!

JavaScript Runtime (筆記)

圖片
  Calling Stack 用來保存「基本型態的資料」(比方來說 number, string…) JavaScript 用來排程(Execution Context)(決定什麼時候會做什麼事情) WEB APIs 透過瀏覽器的  window  物件可以用瀏覽器提供的方法 所以 JavaScript 本身沒有這些方法喔,只是接到了瀏覽器的 WEB API 所以才可以用它們 Callback Queue 這個零件負責保存「已經叫用」的 callback function。然後當 Calling Stack 空了的時候,Event loop 就會把排隊中的 callback function 傳給 Calling Stack ,以便執行 callback function 的任務。 Event Loop Event loop 顧名思義就是一個 loop,做的就是一直在觀察 Calling Stack 是否空了,如果空了就把排隊中的 callback 按照順序推進 Calling stack。  Event loop 一次只會推一個,當 Calling stack 空了它才會推另一個。 function multiply ( a , b ) { return a * b } function square ( n ) { return multiply ( n , n ) } function printSquare ( n ) { let squared = square ( n ) console . log ( squared ) } printSquare ( 4 ) 當在執行 JavaScript 的函式時,首先進入 stack 的會是這個檔案中全域環境的程式(這裡稱作  main );接著  printSquare  會被呼叫(invoke)因此進入堆疊(stack)的最上方;在  printSquare  中會呼叫  square()  因此  square()  會進入堆疊(stack)的最上方;同樣的, square  中呼叫了  mu...

PHP CodeIgniter加入RESTful功能,實作API網站

來源資料: http://xtony77.logdown.com/posts/247014-notes-php-codeigniter-join-the-restful-function CodeIgniter的RESTful功能可以用來輸出JSON或XML格式,對此可以提供API給手機APP使用。 套件: codeigniter-restserver 更正:CodeIgniter的RESTful功能可以拿來做一般網站的CRUD功能,之前誤以為只能產出JSON,其實改用 $this->load->view() 一樣可以產出網頁頁面 1. 將必要的3個檔案加到CI專案資料夾中。 application/libraries/Format.php application/libraries/REST_Controller.php application/config/rest.php 2. 更改預設輸出格式 在 application/config/rest.php 檔案裡面更改預設輸出格式,預設使用XML,而我個人是使用JSON格式。 $config['rest_default_format'] = 'json'; 3. Controller使用方式 require REST_Controller.php 檔案 Controller的class extends  REST_Controller require(APPPATH.'/libraries/REST_Controller.php'); class {ClassName} extends REST_Controller { .... } 4. Controller的function使用方式 這邊範例function叫做index,而function後面一定要接這4個其中一個: _get 、 _post 、 _put 、 _delete 輸出JSON要呼叫 $this->response ,JSON格式就看你的array怎麼寫 其他使用方式就跟原本的CodeIgniter操作蕾同,只是不會使用到view。 public function index_ge...