---
# System prepended metadata

title: Week10 六到十週心得與解題心得
tags: [2020十一月第三周, Lidemy心得, 進度筆記, BE101, PHP]

---

# Week10 六到十週心得與解題心得
###### tags: `BE101` `PHP` `2020十一月第三周` `進度筆記` `Lidemy心得`

***

## 第六週 : 很多的標籤   

除了 HTML 基礎的成對標籤外，學到了用最新的 HTML 格式，了解瀏覽器可能有自定義渲染效果，所以我們要告訴瀏覽器有關HTML 的標準，從顯示文章資訊的 `<h1>內容</h1>` 、 `<p> 文字分段 </p>` 和文字內外的分組 `<span>` 以及 `<div>` ...等，到搜尋引擎的優化方式、瀏覽器開發工具(dev tool) 的教學使用，其實蠻多東西。   

而 CSS Selector 更是我覺得我最弱的地方，甚至還有假的 pseudo-Class : hover 、 pseudo-elemennt : before & after的使用，並了解 CSS 有權重類似分數的計算方式，以及 border 和 outline 邊框 、 margin(外邊距) 、 超級多的文字屬性等非常紮實，然後盒模型更是貫穿了整個主題，再到使用 Zeplin 來做設計稿和色碼的解讀，並實際做了新拖延運動報名表單和咬一口廚房的頁面，坦白說我從這週就開始很沒有信心，然後一直去讀金魚都能懂的網頁設計入門。

----------------------------------   

## 第七週 : JS 套在網頁上   

這週開始學著用 JS 做 UI 、 事件和抓資料，來學檔案物件模型並操控 DOM 物件，並學著用 JS 跟 CSS 互動和抓取或插入刪除元素、改變文字，並學習用事件監聽和表單送出前觸發事件來處理網頁 JS ，和阻止密碼送出的預設行為，了解事件傳遞機制的順序並且可以停止回傳事件，以及使用者的資料是如何存在 Cookie 中，變成動態網頁，並從作業中學著做代辦事項清單、餐廳 FAQ 頁面，以及表單驗證，這週開始非常複雜，我試著了解老師和同學的作業，並模仿了一下...。   

----------------------------------   

## 第八週 : 前端串接 API   

這週很努力的要學...但也是開始學習變慢的一週，發現自己進度真的很慢。  

- Client 與 Server 做溝通。  
- Server 的 Response 可以是 .html 、 JSON 、 JS 。  

### 1 - .html
![](https://i.imgur.com/78doWHP.png)   

- ==如果 Response 是 .html 檔案的話，是平常瀏覽器在做的事情。==   

- 如重新整理頁面的時候，瀏覽器幫 User 發一個 Request 到這個頁面網址。    

- 這網址回傳的 Reponse 就是 User 看到的視覺化頁面本身。    

- 平常用瀏覽器就是 Client 跟 Server 溝通。  

### 2 - JSON
- Server 的 Response 也可以是 JSON 格式檔案。  
- 如之前用過的 https://reqres.in/api/users ， 會發一個 GET 的 Request 到 https://reqres.in/api/users 。  
- 而其 Response 就是回應酬載 : {"page":1,"per_page":6,"total":12,"total_pages":2,"data"... 。   

![](https://i.imgur.com/MhmO2D0.png)   

### 3 - JS  
- JS 透過瀏覽器發Request 得到 Response 。  

努力要學透過表單傳遞資料，以及網頁前後端如何傳資料，和學習用 AJAX (Asynchronous JavaScript and XML) - 傳資料；了解如何用 XHR 物件的方式來存取伺服器資料，這樣不用刷新頁面來中斷使用者的操作和瀏覽體驗；還有跨來源資源共用 (Cross-Origin Resource Sharning, CORS) 與同源政策的區別，整個網址都不同就是是不同源，相同 Domain 、 相同網域就是同源；CORS 則是為了解決不同源的進入方法，如有時要去其他 Server 串接資料，因此跨來源就要在 Response 加個 Header:。     

第八週的作業也非常精彩，餐廳抽獎活動，學著用 API 照機率回傳不同四種獎項，然後我試著照胡立老師的教學，去刻著 Twitch API 頁面，來顯示最熱門的五個遊戲，但這部分真的也很不簡單...發現我自己真的很拖延。  

----------------------------------  

## 第九週 : Session 與 Cookie 

除了資料庫的種類、學習 PHP 基礎語法，和 Apache (Server 端) 的資料庫新增資料實作結構設定，再實作一個可以跟資料庫串接資料的 PHP ， 然後抓 XAMPP 的網址與資料夾結構相同的規則，知道 Apache 內是幫我們跑 php 端的指令外，並且將刻出來的頁面上傳到老師的資料庫，並使用網址呈現這個留言板頁面； 留言板頁面，這部分我真的是做得不太好，花了太多時間在 PHP 與 MySQL 如何跟資料庫連線，作業那邊我自己也是抓很久才把資料庫的 GET 與 POST 弄好在留言板上，也沒有問大家怎麼做，從第六週開始逐步下滑，直到第十一週和第十二週卡在課程接近尾聲的現在，坦白說真的很沒自信能實現當初希望轉職的目標...  