Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【進度報告】week 8 - 前端基礎(三) #42

Open
7 tasks
heidiliu2020 opened this issue Oct 21, 2020 · 0 comments
Open
7 tasks

【進度報告】week 8 - 前端基礎(三) #42

heidiliu2020 opened this issue Oct 21, 2020 · 0 comments

Comments

@heidiliu2020
Copy link
Owner

第八週(08/03 ~ 08/09):前端基礎串 API

用 JavaScript 與後端溝通

  • P1 你知道什麼是 API
  • P1 你知道什麼是 Ajax
  • P1 你知道從網頁前端呼叫 API 與在自己電腦上寫程式呼叫的差異
  • P1 你知道什麼是同源政策(Same-origin policy)
  • P1 你知道如何存取跨網域的資源(CORS)
  • P1 你知道什麼是 JSON
  • P2 你知道什麼是 JSONP 及其原理

2020.8.9 D59 第八週:前端基礎(三)

今日進度

  1. 檢討 week7 作業
  2. mark 同學的經驗分享:
  1. 好用資源:how to manage HTML DOM

明日計畫

  1. 複習 week8 課程內容
  2. week8 作業

感受

今天其實沒什麼進度,算是給自己一個放鬆日。看完 week7 的參考範例,就差不多可以休息了XD

看到留言板功能覺得好酷啊!!之後的自己也能夠做出來嗎?!想想就覺得很興奮!期待!!!

日常

最近偶爾會和親友更新近況,聊到自己參加了程式導師實驗計畫,目前每天都在學習寫程式。好奇的人就會問說上課需要多少錢,聽到收費制度似乎都感到不可思議XD 在課程結束後兩個月內沒找到工作就免費,聽起來也太佛,「就算找到也說你沒找到不就好了?」確實也聽過有人開玩笑這麼說。

打從知道這個計畫起,就覺得 Huli 對這方面非常隨興,讓大家自由心證,鼓勵自主性,也總會強調沒有強制性。總之,為了能夠付錢給 Huli(?)我會好好努力的。


2020.8.10 D60 第八週:前端基礎(三)

今日進度

  1. week7 PR 發生衝突,解決中QQ
  2. 參考範例:hw2 FAQ 頁面

明日計畫

  1. 寫 week8 作業
  2. 閱讀輕鬆理解 Ajax 與跨來源請求

感受

昨天才剛看到同學經驗分享,如果不小心把作業刪掉該怎麼辦之類的,沒想到今天就換自己遇到了……因為在 PR 要 merge 時發生衝突,就想說重置 week7 作業,重新上傳一次,結果弄到現在不知為何作業就不見了,天吶,怎麼會這樣!!

這是什麼莫非定律.....快崩潰了,希望今天能夠解決QQ

【12:32 更新】

太可怕ㄌ,一看到作業不見的瞬間直冒冷汗XDDDD

但作業並不是不見了,只要把它找回來就好。所以就在 GitHub 上的 commit 紀錄中尋找失落的作業(?)之所以會發生 conflict,可能是因為自己寫作業到一半時,想到應該要先把 week6 修改的部分給 commit,然後把 week7 作業先重置過,完成 merge 再繼續寫作業。

如此這般,可能有少改到檔案什麼的,導致在提交 week7 時發生衝突。但後來發現不該急著重置,應該先找出發生衝突的檔案,然後修改完後再次 commit,結果被我越搞越複雜,還差點把作業給弄丟,真的嚇爛QQ 有再重新發了 PR,希望這次能夠順利 merge…

2020.8.11 D61 第八週:前端基礎(三)

今日進度

  1. week8 hw3
  2. 閱讀:輕鬆理解 Ajax 與跨來源請求
  3. week7 參考範例:hw3 todo list

明日計畫

  1. 繼續 week8 作業
  2. 複習之前整理的筆記 [week 8] 傳送資料的方式 & 瀏覽器的限制

感受

沒想到昨天因為發生衝突再重新 PR 花了比想像中久的時間XD
真的沒事不要亂來,要好好按照步驟做,不然看到程式碼都不見了會被嚇死QQ 總之順利完成第七週作業了!明天再來把參考範例提到要注意的地方給整理進去。

總覺得這幾天步調變慢了,雖然說適時的放鬆也很重要,但想再找回之前那股衝勁。明天要和朋友打球和聚餐,在充電之後繼續努力!

學習紀錄

看完 todo list 參考範例,想到在火球術還是 HTML 標籤的部分,也有提到輸入值的安全性問題,必須使用跳脫(escape)來取代特殊符號:

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

參考連結:Can I escape html special chars in javascript?

現在還蠻慶幸自己沒有放棄思考,跑去先看參考範例,總覺得自己再消化過後想到的寫法,和範例還是不太一樣,但思考模式還是蠻接近的!能夠實作後再看過範例,更能夠釐清觀念的感覺。


2020.8.12 D62 第八週:前端基礎(三)

今日進度

  1. 完成 week8 hw1
  2. 整理 Ajax 相關筆記

明日計畫

  1. 繼續 week8 作業
  2. 看 week9 課程簡介

待辦事項

  1. 修改 week7 作業,補充參考範例提到的觀念

感受

不知道是不是第四週 API 被怕到(?)能夠清楚感受到在逃避寫作業這件事情。應該有很大因素,是自己把難度想像的很高很困難,總之正在努力克服這件事情,做好心理準備,繼續面對作業QQ

很想趕快進入第九週啊!!PHP 是心目中想要進入的公司會使用的程式語言,在全世界上的使用率非常高。前陣子找了職缺類型,就覺得這是必須掌握的技術,如果自己想要抵達理想的目標。

有看到這篇:Day 1. PHP教學: 寫程式真的不難,從零開始�也可以,用寶可夢作為情境解說還蠻有趣的,等進入下一周時再來好好研究。

日常

今天早上打排球,才八點半的太陽就有夠烈,肥宅果然還是適合晚上或室內運動吧……下午還去了貓咖啡廳!補充滿滿的貓能量,滿足。和朋友臨時決定去 101 登觀景台,原來在 9 月底前門票只要 150 元,還不用人擠人,讚讚。


2020.8.13 D63 第八週:前端基礎(三)

今日進度

  1. week8 hw1 切版
  2. week9 課程介紹
  3. BE101 - 環境建置、PHP基礎

明日計畫

  1. 繼續 week8 hw1
  2. BE101 - 資料庫基礎、Table 表格基礎

感受

今天在 hw1 切版遇到一些問題,發現左邊的文字標題沒辦法對齊排列,正在研究應該如何解決。還以為會切版會蠻快的,感覺是蠻基本的問題QQ 需要再更熟悉架構與樣式。總之希望睡前能夠先把版切完,明天繼續處理 API 串接部分!

今天補番了嗎

因為上班其實可以邊聽音樂(?)今天就聽了是在哈囉世界 σ ゚∀ ゚) ゚∀゚)σ EP2,結果聽到助教在笑時似乎都能腦補出這個顏文字,真的很歡樂XD

覺得每日進度有個固定結尾還蠻不錯的,剛好最近吃飯時也會配日劇或動畫,決定每天節錄幾句喜歡的台詞!最近在看的是「遅咲きのヒマワリ(遲開的向日葵)」,幾乎每集都會被擊中心臟的感覺,也從中獲得了些許力量。目前看到一半,但第三話的結尾看到差點在辦公室哭出來QQ

自分が望む場所にいられるとは限らない。(不是每個人都能夠留在自己憧憬的地方。)
でも、誰だって、その場所で頑張っている。(但不管是誰,都在眼前這個地方奮鬥著。)
誰かに認めてもらいたくて、(想被人肯定,)
誰かに必要とされたくて、(想被人需要,)
誰かに愛されたくて。(想被人愛。)


2020.8.14 D64 第八週:前端基礎(三)

今日進度

  1. 完成 week8 hw1
  2. BE101 - 資料庫基礎

明日計畫

  1. 完成 week8 hw2
  2. BE101 - Table 表格基礎、MySQL 語法基礎

感受

今天繼續進行 hw1,感覺好像快完成了卻又差一點點,不知道該如何處理拿到的值,又把 ajax 的影片重看幾次,希望睡覺前能夠完成。還有時間的話也想切 hw2 的版,白天(上班時)有稍微構思該如何切,串接 API 的部分應該還需要一些時間熟悉。

今天補番了嗎

突然想到自己還沒聽是在哈囉 EP1,今天(也在上班時)來補聽個,沒想到進度心得被唸到了,原來真的會查關鍵字嗎!XD

也是直到最近幾年,漸漸意識到社交也是需要透過練習的。也許有些人天生就具備這項才能,但自己很明顯不是那塊料吧?大學時期,其實有擔任類似領導的角色,但總會覺得自己做得不夠好,「如果能…應該可以…要是當初…」等等。習慣在事後檢討自己,卻遺忘自己實際做了什麼事情,覺得都是微不足道的小事,陷入自我懷疑的迴圈。

畢業之後,偶然和以前同學聊天,才回想起原來當初曾做過這些、那些事情阿,其實也不是那麼一無是處嘛(?)應該可以再對自己更有自信一點的,漸漸有意識地,希望能再一點一點建立自信心。

「想成為有自信的人」,或許也是這個原因吧?總會很憧憬那些眼神閃耀著光芒的人,似乎和助教提到所謂「清爽的人」有幾分相似。也想到當初為什麼會報名這個計畫,想要肯定自己,想要被肯定,最單純的原因或許就是如此呢。

對了!最後還提到排球少年,最近漫畫完結了真的超失落QQ 大學時開始打排球,對漫畫情節非常有共鳴,尤其是看到角色的成長過程,那種感動與振奮是難以形容的,期待明年動畫第四季!

バレーは!常に上を向くスポーツだ!!!
(排球!是永遠向上看的運動啊!!!)


2020.8.15 D65 第八週:前端基礎(三)

今日進度

  1. 繼續 week8 hw2
  2. 看完參考範例 hw1 並修改

明日計畫

  1. 提交 week8 作業
  2. 前進第九週!

感受

進行切版的同時,也一邊查 CSS 屬性的用法,例如超過限制字數、是否換行、半透明背景等等。一旦開始切版似乎就會沉浸在其中,一天就這麼過了(?)

接著進行 JS 部分,感覺和課堂範例有幾分相似,但需要考慮 header 憑證問題,還在研究應該要怎麼帶入參數。

雖然今天沒有推第九週進度,但感覺似乎能完成第八週作業,目標是今天能夠完成,希望睡前能夠搞定。

今天補番了嗎

想推薦自己最喜歡的一部日劇《Unnatural(法醫女王)》,其實自己是年初才看完這部,看完瞬間榮登心目中第一名。

女主角石原里美的演技不用說,其他演員的演出也都非常到位。劇情節奏恰到好處,以類似單元劇的形式,探討各種社會議題。還有總是適時登場的主題曲 - 米津玄師 MV「Lemon」,每每聽到這首曲子搭配劇情,總會忍不住落下眼淚QQ 有時間一定要來重刷幾次!

絶望?絶望している暇があったら、うまいもん食べて寝るわ。
(絕望?有時間絕望的話,還不如去吃頓美食然後睡個好覺呢。)


2020.8.16 D66 第八週:前端基礎(三)

今日進度

  1. week8 hw2 修改切版部分、JS 進行中
  2. 整理 CSS 切版筆記

明日計畫

  1. 完成 week8 作業
  2. 繼續 BE101

感受

而我們仍舊痛苦並快樂的向前邁進著。

以為切版順利完成但其實沒有,結果就是今天還在修改切版部分。有點不知該如何使用一開始切的版來帶入數據,可能是拿取資料時,因為當初命名或切版不當,或是根本拿錯資料,導致程式碼看起來很亂,所以就先找了範例進行修改,然後才繼續 JS 部分。

修改紀錄:

  • 盡量簡化程式碼,不要包太多層(多餘的區塊)
  • 在結尾放「只有寬度沒有內容」的區塊,可幫助調整排版
  • view hight:瀏覽器可顯示區域的高度
    例如:min-height: 100vh;(設定最小高度為瀏覽器顯示高度)
  • 在 li 使用 flex 盒子並設定 align-items: stretch;,可使 li 的高度佔滿整個區塊
  • 【待修正】RWD:把 nav 的選項改成下拉式選單

大概看過範例影片,作業二沒有一步一步帶著做真的會有點惶恐XD 雖然知道是遲早要學會自己去摸索串接 API,果然卡住的過程還是好痛苦啊!!!總之仍在努力中。

今天補番了嗎

這個周末因為家裡有事,其實沒有太多空閒時間,於是乎找了上個月補完的《響け!ユーフォニアム(吹響吧!上低音號)》。從第一二季到劇場版,至始至終環繞在一個議題:「努力,是什麼呢?」。

有種與神作相見恨晚的感覺,要是當初能夠在去宇治之前,乖乖把這部補完就好了,啊啊、好想出國玩耍……但今年的忍耐都是為了將來(雖然主要是疫情影響)。劇中的演奏曲目,雖然青鳥也很難以取捨,但果然還是最喜歡第一季的マーチ《プロヴァンスの風》,當初聽到覺得超有氣勢,當作 BGM 特別振奮人心呢。

私は頑張れば何かがあるって信じてる。それは絶対無駄じゃない。
(我相信只要努力一定會留下些什麼。這絕對不是沒有意義的。)

2020.8.17 D67 第八週:前端基礎(三)

今日進度

  1. week8 hw2
  2. BE101- Table 表格基礎、MySQL 語法基礎

明日計畫

  1. 檢討 week8 作業
  2. 繼續 BE101
  3. 整理筆記

感受

終於……串出來了……(吐血)

已經試著把程式碼都依照範例去修改,卻還是遲遲讀取不到資料,想說為什麼會請求失敗,結果發現……只是因為 API 的網址多加了個 stream!天吶這也太蝦了吧???真不敢相信一個晚上又這麼過去了Orz

一直串不出來真的會喪失鬥志,懷疑一切都是第四周的自己所造的孽,當初沒學好現在加倍奉還回來了,可惡QQ 總而言之,雖然還有細微地方需要修正,但終於要完成第八週了,睡前要提交作業。

明天前進第九週!果然還是沒辦法運用到複習週來複習XD 好多東西要補,一想到這些還是難免會心急,總之先慢慢把進度跟上吧,希望能早點開始練習建留言板。

今天補番了嗎

遲開的向日葵 05,揪心。

少しずつやっていけばいい。(慢慢去做就行了。)
自分のいる場所で、できることを。(去做當下所能做的事。)
少しずつ知っていけばいい。(漸漸去了解就行了。)
その町のことを、大切に思う人のことを。(瞭解這個地方,瞭解想珍惜的人。)

朋友推薦的直播看流星雨(?)

8月末までまだまだ #ペルセウス座流星群2020 星空ライブカメラ 長野・木曽観測所から配信中 The Perseids LIVE streaming from Kiso , JAPAN

一打開就看到滑過好幾顆,趕緊許個願望壓壓驚。


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant