程式導師計畫 4th / 第十週複習整理心得


老樣子前情提要

之前的心得可以看 這篇 ,上次結束後到現在差不多就是一個月,儘管如此我還是落後(謝囉,三四週的我自己),因此這次也是簡單附上筆記和自我檢討簡答,並集中隨便紀錄這一個月的學習心得。

所以我到底學了什麼

  1. HTML 與 CSS
  2. DOM 以及 JavaScript 如何與網頁互動
  3. 前端利用 Ajax 與後端串接
  4. PHP 與 MySQL

少到爆筆記

[Week6] 給自己看的 HTML 基礎
這篇其實根本也沒整理完,就意識到「這不是可以悠閒整理筆記的時刻了」,於是果斷放棄這個月所有的筆記。

[week9] 給自己看的 PHP 和 MySQL 溝通
上述策略除了因為第一次學 PHP 和 MySQL ,又有聽說這個禮拜的作業很難,乾脆選感覺最基本的實作記錄下來。個人認為這份筆記的 CP 值非常高,之後課程教到類似功能前,都會先暫停影片看著這份筆記刻出來,熟練到最後真正實作作業時連筆記都不用打開了。

r3:0 異世界網站挑戰 Lv. 11 ~ 15 攻略
純粹只是還沒有人做過,所以想做一做順便證明我有破關(

自我檢測簡答

第六週:前端基礎 HTML 與 CSS

  • P1 你知道 HTML 是在做什麼的
    HTML 全名是 Hyper Text Markup Language 超文本標記語言,它並不是一個程式語言。主要用於規劃網頁架構,通過標籤定義網頁的原始內容。

  • P1 你知道如何使用有語意的(semantic)標籤
    語意化標籤的目的是為了讓標籤(Tag)更具意義,以加強文件的結構化,讓搜尋引擎更清楚了解。例如早期分段都只用 <div> ,現在卻多了 <header><main><footer> 之類的,雖然效果顯示上一樣,不過更方便回頭 debug 或溝通。

  • P1 你知道基本 SEO 的概念
    我忘記了,面試前回頭看。

  • P1 你知道 CSS 是什麼
    資料來源:MDN
    跟 HTML 一樣,CSS 既非標準程式語言,也不是標記語言, 而是一種風格頁面語言(style sheet language):它能讓你在 HTML 文件中的元素(element)上套用不同的頁面樣式(style)。

  • P1 你知道 inline、block 跟 inline-block 的區別
    參考資料: 前端基礎:CSS盒模型(box model)
    block 表示什麼屬性都可以調,是 <div><h1><p> 等標籤的預設屬性,同時也表示元素本身會占滿整行。
    inline 就可和其他元素並排,是 <span><a> 的預設屬性,但無法調整寬高和上下邊距,padding 的上下可以調整,但不會影響到其他元素。
    但如果想要並排又想調整上下,就可以使用 inline-block ,它也是 <botton><input><select> 的預設屬性。值得注意的是,使用 inline-block 時元素和元素中的空白也會被顯示,若想刪掉只要刪掉空白或在空白處使用附註連接就好。

  • P1 你知道什麼是 box model
    參考資料: 前端基礎:CSS盒模型(box model)
    盒模型是指在 CSS 中,將每個元素視為一個盒子(BOX),再針對該盒子做調整。由內至外依序是:content → padding → border → margin。
    值得注意的是,因為預設上除了 content 以外的都是往外長,因此若調整外面三個會影響整體大小,解決方法之一是用減法,例如就把 width 設成 56 ,但這樣一來要多算一次很麻煩,而且要是 PM 忽然想把 border 設成 13 怎麼辦。因此會採取另一個屬性: box-sizing:border,設定 width 和 height 時就會將 padding 和 border 一起算進來了~

  • P1 你知道 position 的所有屬性及其差別
    大概知道。可以的話之後來整理 FLEXBOX FROGGY 和補充影片的筆記。

  • P2 你知道 :hover, :before, :after
    :hover 是滑鼠點上去之後的效果。
    :before 是放在元素之前的東西和效果。
    :after 是放再元素之後的東西和笑果。
    設置 before 和 after 可減少重複性設定同樣內容。

  • P2 你知道 :nth-child 的各種用法
    同上兩題。

  • P2 你熟悉 CSS selector,可以輕鬆選到想選到的元素
    同上嗚嗚。

第七週:前端基礎 JavaScript

  • P1 你知道 JavaScript 跑在網頁上跟跑在 Node.js 上差在哪裡
    資料來源:看起來是同學的筆記
    因為執行環境不同,可以執行的 function 會不同。 JavaScripts 本身有規範一些可以用的東西,例如 var 宣告變數或 else if 進行判斷。但也有一些不是本身規範的,就看各個執行環境各自支援什麼了,比如說兩者雖然都可以跑 console.log 但其實是各自提供的這樣。

  • P1 你知道 DOM 是什麼
    資料來源:Day03-深入理解網頁架構:DOM
    DOM 的全名是 Document Oject Model 文件物件模型,就是將 HTML 內各種標籤定義成物件,方便和 JavaScript 溝通。被定義的物件們會成為樹狀結構例如下圖:

    透過 DOM ,我們可以使用 JavaScript 改變網頁介面、監聽事件並做出反應,以及和伺服器交換資料。

  • P1 你知道如何用 JavaScript 操控 DOM 物件
    進度岌岌可危,列最常用的就好:

    element = document.querySelector(<css selector>)
    
  • P1 你知道如何幫一個按鈕加上 event listener

    <元素>.addEventListener('事件', callbackfunction)
    
  • P1 你知道捕獲與冒泡是什麼
    事件傳遞依照順序會經過三個階段:

    1. CAPTURING_PHASE,也就是大家說的捕獲階段
    2. AT_TARGET
    3. BUBBLING_PHASE,也就是冒泡階段
      以下的圖可以解釋三者順序:

      在監聽事件時的第三個參數可加階段(true = 捕獲階段、 false = 冒泡階段)。值得注意的是,不管程式寫的順序為何,傳遞機制都會是先發生捕獲再冒泡,只有 AT_TARGET 會被寫的順序影響。
  • P1 你知道什麼是事件代理(delegation)
    想像要製作一個 todolist ,如果一條一條監聽,程式碼就會變得很複雜,而且也無法替新增的 item 增加監聽。
    與此同時,當我們點到 target 時,也會觸發到上層的元素。因此我們可以利用事件傳遞機制,進行事件代理(event delegation),解決以上問題。
    例如在 todolist 中,我們只要將監聽器掛在 item 們的上一層,當監聽器偵測到再往下看是誰被點擊並做出反應就好,這樣新增的 item 也可以被監聽到。

  • P2 你知道怎麼用 JavaScript 更改元素的 style

    <選到元素>.style.<屬性>=<預改變結果>
    

    要注意屬性不能使用特殊符號如 -,因此可以用:

    <選到元素>.style[margin-top]=10px;
    
  • P2 你知道 preventDefault 與 stopPropagation 的差異
    event.preventDefault() 是阻止預設行為發生。預設行為例如 subnit 被按下去預設就會送出表單,或是 a 按下去就會觸發超連結。
    event.stopPropagation() 則是阻止事件傳遞,和傳遞順序有關,如果在哪個階段加上 .stopPropagation() 就不會再傳遞給下個節點,但該節點的事件還是會被觸發,如果全都要阻止可用 e.stopImmediatePropagation()

第八週:前端基礎串 API

參考資料:同源政策

  • P1 你知道什麼是 API
    API 全名為 Application Programming Interface,中文翻譯為「應用程式介面」。簡單來說就是交換資料的管道。
    舉例來說好了,今天你進到一家拉麵店,要如何和廚房說你要什麼品項?因為你已經來過很多次了,所以走到拉麵販賣機前點餐,而 這個販賣機就是 API 。你和廚房可以透過販賣機溝通(使用 API),你開店的時候別人也可以從販賣機點餐(提供 API)。

  • P1 你知道什麼是 Ajax
    Ajax 的全名是 Asynchronous JavaScript and XML ,任何和伺服器非同步交換資料都可以叫做 Ajax 。(早期是用 XML 交換,但現在比較常用 JSON)
    一般來說程式碼由上往下按照順序跑,如果中間某行跑太久,後面就必須要等。用去拉麵店點餐舉例,同步就是點完餐(送完 request)後,必須站在原地排隊等餐點(response),非同步則是點完後可以拿張號碼牌回座位先做其他事情,等餐點到了再去拿就可以了。
    在 JavaScript 中,可以使用 回呼函式(callback function) 來達成。回呼函式是指能藉由參數通往另一個函式的函式,因此只要設定拿到 response 後再呼叫這個函式,就不用傻傻待在原地等。

  • P1 你知道從網頁前端呼叫 API 與在自己電腦上寫程式呼叫的差異
    從網頁前端發送 request ,因為多了一層安全性考量,因此會受到同源政策(確認雙方都願意交換資料)的規範。但第四周的 node.js 直接送到 server ,不會經過瀏覽器,也就沒有問題。

  • P1 你知道什麼是同源政策(Same-origin policy)
    同源政策(Same-origin policy)規範了哪寫資源可以跨源存取,哪些會受到限制。其中同源的意思是相同網域、通訊協定和連接埠號,基本上兩者若非同源,則要額外設定 CORS 。

  • P1 你知道如何存取跨網域的資源(CORS)
    想要開啟跨來源請求,必須在 Response Header 設定 Access-Control-Allow-Origin ,規範哪些網域可存取。在 request 這邊又分為簡單請求和預檢請求。

  • P1 你知道什麼是 JSON
    JSON 全名 JavaScript Object Notation ,以純文字的方法儲存資料,樣子和 JS 中物件很像,只是不管是 key 還是 value 都要用雙引號 " 框起來,而整體是個字串。

  • P2 你知道什麼是 JSONP 及其原理
    JSONP 是 JSON with Padding
    因為考量安全性,透過瀏覽器取得 API 必須遵守同源政策(Same-origin policy,CORS),也就是說除非特別設定,否則不同網域之間無法分享 API (會發 request ,但 response 會被瀏覽器擋下來不給 JavaScript)。
    不過有些標籤不被此規範,例如 <img><scipt> 。JSONP 就是將資料包進 function 中並放在 <scipt> 下,其他人就可以直接使用。

第九週:後端基礎 PHP 與 MySQL

  • P1 你知道 PHP 是什麼
    PHP(Hypertext Preprocessor)是一種可以結合資料庫的動態網頁開發語言。動態網頁和靜態網頁的差別,在於靜態網頁是直接將檔案丟給瀏覽器,但動態網頁則是先由伺服器跑完結果後,再將結果傳給瀏覽器。

  • P1 你知道前端與後端的差別
    使用者可以看的到的部分都是前端,像是新增網頁和設計;後端則是負責和資料庫溝通。
    用 Google 表單類比的話,我們在填寫表單時回答的問題是前端負責;如果設計者針對大家的回應開一個試算表,那麼和這個試算表溝通就是後端的工作。
    當然大部分的功能需要前後端合力才能達成,例如用搜尋引擎時,前端負責接收我們輸入的關鍵字,交給後端去資料庫中尋找,並回傳結果給前端,最後由前端顯示結果。

  • P1 你知道什麼是資料庫
    一般來說網頁的資料會被存在一個檔案中,但當網頁一大就難管理,而資料庫系統就是專門處理資料的程式,提供專門的語法操作資料庫。

  • P1 你了解基本的 SQL 語法,包括 Select、Insert Into、Delete 與 Update / 你能夠寫出基本的 CRUD 應用
    左轉筆記 給自己看的 PHP 和 MySQL 溝通

  • P1 你知道什麼是 Session / 你知道什麼是 Cookie / 你知道 Session 與 Cookie 的差別
    瀏覽器每次發出 Request 的時候都是無狀態的,也就是說除非特別標記,否則伺服器不會記得對方上次的紀錄(例如登入資訊)。而 Session 就是為了處理這個問題出現的,其中 Cookie 就是一種 Session 的方法。
    Cookie 的資料保存方式有點像集點卡,資料由使用者(瀏覽器)端保存,每次消費(發 Request)帶給店家(伺服器)就可使用點數。
    實際上 Cookie 是個文字檔,以下流程用登陸資訊為例,第一次登入成功後伺服器就會透過 Response Header 給瀏覽器一份 Cookie 。之後存在 Cookie 裡的登陸資料由瀏覽器保管,下次對同個伺服器發出 Request 時自動帶上 Request Header 中,只要還沒過期而且符合設定的 Domain ,伺服器就知道是上次那個使用者了。
    相對的,Session 的資料存在伺服器端,再給瀏覽器一組 token 存在 Cookie 中。就像是電子會員卡,每次會員只要去消費,出示卡片或 ID ,店家就可以從資料庫中得到資料。這樣做的好處是使用者不容易竄改資料,比較安全。

寫在後面的事

今晚,我想來點沒說過的

故事開始於在 NGO 工作的朋友的一則邀約:

「我們下週和這裡有合作的活動。你最近也在學程式,要不要來看看?」

隨訊息附上好想工作室的活動連結。

八月底在台北的實體聚會自由交流時間,我一開始超尷尬不知道要找誰聊天,緊張地傳訊息給朋友——「找長得最好看的啊 XD」靠北喔,都什麼時候還在跟我講幹話。好險後來跑幾趟根本沒上的廁所後,開始可以正常和人類說話了 XD 最後離開前得知原來除了志揚助教以外,課程內的其他學生也有被其他學程式的管道拒絕過的經驗。

細數某個年紀前的我嚮往的角色,幾乎都是主角,連最喜歡的顏色也一定要是紅色。年幼的我,太早就知道要崇拜雖然還是有煩惱,但問題還是都會迎刃而解,而且被大家所愛著的人們。

隨便舉個例,主角就絕對不會被好想工作室拒絕。

逐漸體認到自己不可能成為主角,或其實只是放棄成為主角後,我開始著迷於任何不平滑的東西。關注並蒐集這些瑕疵,會讓我感到溫暖。一方面是知道自己不孤單,另一方面我平時習慣懷疑自己的自我懷疑(既然會懷疑,應該就表示不夠喜歡,或是自己不夠堅強了吧)。所以得知別人失敗掙扎卻持續努力的故事,對我來說可能是暗黑版雞湯吧——原來沒自信也是正常的,不是只有特定樣子才能成為自己想要的模樣——並由此產生更多動力。

因此我非常非常感謝不只是這次實體聚會,而是曾經讓我看到些微破綻卻又閃閃發光的人們。

得到了那麼多,我又該以什麼回饋呢?想來想去可能只有把類似的故事說出來了。以下,我會盡力不帶給各位情緒負擔的講述事情經過:

我決定要學習程式設計後,曾經報名過好想工作室的 Backend Camp ,面試完後得到回家作業要架設環境。但我前前後後做了一個禮拜才達成,因此被委婉拒絕了,對方希望我能調整好心態。

之所以之後完全閉口不談,最主要還是因為不知道現在的我,到底「調整好心態」了沒。(不是,先讓我講其他東西,最後會把這部分收回來請先不要關掉 orz)

迷茫,但還是要繼續追進度

從上次寫完複習心得並宣稱要追進度到現在,其實也差不多才過了一個月,得知這個訊息的我大驚,現在這是進入精神時光屋了嗎 XD (是說原來精神時光屋是外面的時間才過幾秒,外面感覺像是好幾千年,我之前一直以為是反過來 www)

原來之前 Podcast 說的:「想說要努力找個平衡,結果調整調整,回過神來課程就結束了。」是真的!因為一直有新的學習刺激,反而沒辦法停下來休息,尤其我又落後兩週多。(順帶一提,雖然非常怨懟之前三四週因為腰痛就擺爛的我,但說不定這個有點落後的距離反而是適合我的 XD)

我記得 Podcast 的結論是,面對不斷變動的外在,必須保持動態平衡。果然,擁有彈性是非常重要的。

連對自己心態的評價也必須保持彈性。

像是,我真的喜歡程式設計嗎?

面試好想工作室的時候,對方非常非常在意這個點,他們說不希望浪費彼此的時間才發現我不喜歡程式設計。我也蠻同意的,畢竟誰都希望和有熱情的人共事。

但我其實不知道自己到底喜不喜歡,我無法做出連我自己都無法確定的承諾。

退幾步看,到底怎麼樣算是喜歡一件事情?問了很多人之後歸納出幾點操作型定義:純粹做的時候會很開心、就算沒有其他好處也會去做、會猶豫這件事就代表不喜歡。彷彿「喜歡」是純粹不帶任何目的,而且自然而然,只差沒有不證自明了。

——那我應該沒有喜歡過任何東西吧。

長期要求自己應該要對萬事萬物保有開放性和好奇心,得出這個結論後我消沉了好一陣子,無法釋懷自己其實是個沒熱情的人。就連現在看到討論區很認真討論學到的技術的老師同學和助教,只要稍微鬆懈沒有他們那麼投入,就會馬上把自己打入「你看看你,也沒有那麼喜歡這個啊」的範圍。

一直到很後來才知道,這種事情不是非黑即白。

體會到這件事,是因為最近把《排球少年》的動畫撿回來。第一個瞬間是清水學姊說,她一開始也不是非常喜歡排球,是邊做球經邊喜歡上的;另外是超沒幹勁的月島問木兔「排球有趣嗎?」被反嗆:「那只是你不夠強而已。等你能夠做到(下略境界),就是你喜歡排球的起點。」

原來這樣子也可以稱作喜歡嗎?原來除了「熱情就寫在基因裡面,因此就算沒有成就感也可以堅持下去」以外,還有很多很多種喜歡的樣子嗎!

講了超多廢話

懶的轉場了(喂),來說點實際的體悟,反正我目前體會到三種策略:

  1. 不要想那麼多,停止虐待自己,先去試試看
  2. 成就感很重要,可以造成學習動機正向迴圈
  3. 知道「要去哪裡」也超重要,程式設計是解決問題的過程

CSS 和 HTML 之亂

國小的時候非常熱衷於奇摩部落格和無名小站的 CSS 裝飾(天啊其實是黑歷史,好險他們現在都關了……),因此第六週學的時候一直有種「同學你有點眼熟」的既視感 XD

相較前幾週的 JS ,這週的入門門檻確實大大降低了,但切版真的沒有盡頭,好像永遠都有更好的方法,這時候就要勇敢大喊「我就爛!」然後趕快進入下一個工作。另一個比較困擾的是命名,因為兩邊的命名會互相影響,中途要改名就會把自己弄得很混亂,另外如果和檢討影片的命名不同對照起來也會有點抖,也常常不知道這個區塊該叫甚麼名字,好想成為命名大師喔可惡。最後為了錯亂,我會先在紙上畫好每個區塊叫什麼,並且規定自己一口氣切好全部的版,第六週和第九週作業都試了這個方法,覺得腦袋比較清晰,而且一次做完感覺很爽。

進入 PHP 後,因為沒有用任何框架,大家都在喊變得超複雜。但我覺得這種完全不依靠其他人(雖然程式設計照理來說依靠了其他很多人,是個漂流到荒島上就毫無用處的專長,但先忽略這部分啦 XD)獨自架起留言板的感覺真的很爽(詞彙貧乏)

隔空和小明握手

看文章 白話 Session 與 Cookie:從經營雜貨店開始 的雜貨店舉例時腦中警鈴大響:事情哪有那麼簡單!?

年初在補習班做行政櫃台的兼職,最苦手的工作之一就是下課時看到家長來接,要廣播提醒學生下樓。因為我也是超級大臉盲和金魚腦,就做了各種 excel 表格和筆記幫助我對照學生的名字、年級、今天補什麼和教室分機號碼,但最後卻被說不如多詢問幾次記在腦袋裡,要能做到不靠任何東西記起來。

雖然現在回想起來陰影面積還是有點大,但反正每個人都有擅長和不擅長的事。這份工作給我的幾個體悟:比起一口氣和四百個學生都有點認識,我比較喜歡且擅長只和少少幾個人深交;再來就是我就是不擅長只用腦袋記名字和認臉,現在才會需要在這裡學程式設計吧。現在想想當初用表格整理學生資料方便查詢,是否也有點像用程式解決問題。

不只是為了私人困擾,在學習的時候知道自己「幹嘛學這個」對我來說也是蠻重要的。比如說 API 對我來說就一直是有點浮在空中的東西,一直到上次去小樹屋才聽到助教說 API 之後會用在前後端溝通,才覺得比較踏實一點。

第九週的留言板架起來後很快樂的貼給朋友,朋友問:「你是買榜嗎?怎麼下面那麼多人說生菜好可愛?」

我:才沒有,因為這是我做的,我就把預設內容改成「生菜好可愛!」了。不然你以為我幹嘛學寫程式 XD

朋友:????好喔。

還記得一開始的邀約嗎?

現在的我真的調整好了嗎?

我還是不知道,反正現在的我就是這個樣子,你們都看到了。我現在學得蠻快樂的,還想繼續再走一段路。

我打下「可惜我那天有事,改天來去看看~」,送出。

180天成為工程師






Related Posts

ES6 相關筆記

ES6 相關筆記

Gatsby初試啼聲

Gatsby初試啼聲

Airflow 動手玩:(六)Airflow with Kuberentes Executor

Airflow 動手玩:(六)Airflow with Kuberentes Executor



Comments