第五次上課心得

這次上課會使用到Tabletop.js，它可以讀取試算表的資料，再顯示在網頁上。
Google 的試算表可以發佈一個唯讀版給別人看，
Tabletop.js就可以透過程式讀取試算表的資料，再變成json的格式。
雖然用Tabletop.js看起來好像很快，但其實它會根據電腦的運作速度回應我們，所以不算是即時回應。

首先Tabletop.js會跟google請求要資料，那key是代表試算表的名字，google收到請求後，就會callback，把試算表的資料傳回來。
然後就可以用另一個function用for迴圈來抓取資料。
再加上之前所用技巧來將資料顯示在網頁上面。
這次作業是把上次的作業用雲端資料庫😂顯示：
https://jsfiddle.net/id506507/npzatjqt/5/

第四次上課心得

這次上課使用到Materialize，它是一個素材的框架，可以很方便的去寫一個網頁。
它可以將網頁RWD化，可以在手機或電腦上看網頁。
首先可以下載網頁的zip檔就可以使用，這次上課有用到幾個html的元素，下面會介紹每一個元素。

1. link


link是定義檔案與外部資源的關係，可以將CSS的style sheet連接到檔案裡面，就不會寫在html檔案裡面。
2. nav


nav可定義一個導覽列。就是在網頁頂端的一行。
3. ul


ul 是指unordered list，是定義無序列表。而ul裡面要夾一個<li>...</li>才能正常使用。
4. material icon


有時候在網頁裡會有需要用到icon，所以google有幫我們畫了一些icon，我們可以直接換html裡的程式碼就可以換icon了，不用特別去下載圖片，非常方便。
5. Cards


Cards是一個非常方便的方法去顯示網頁的內容，就像有一個漂亮的框框去顯示網頁的內容。
6. grid


網頁可以分為12個column，因為RWD的關係，所以我們不能將內容固定為px，所以我們改class裡的數字來修改它的大小，而s是代表小的裝置，m是代表中型以上的裝置。
如果class裡面寫了"s12 m4"的話，就代表小的裝置佔了12個column，中型以上的裝置佔4個column。
7. footer


footer是定義網頁的頁腳，包含檔案的作者、版權信息、聯繫信息等等。
8. color


它可以定義網頁的顏色，透過改變class裡面的參數就可以改變顏色，我們可以用網頁所提供的Color Palette去修改參數。
9. 迴圈


當我們發現我們某幾段程式長得非常像，我們就可以使用for 迴圈把程式化簡。

最後，這是我這次的作業：https://jsfiddle.net/e7zn7ytv/1/

第三次上課心得

這次上課主要是講陣列(全域變數，區域變數)、CSS(id,padding,box shadow)，
可以將上一次寫的類相簿功能寫得更好。

╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣

1. 陣列
陣列是一組相同型態的連續變數，它們使用同一個變數名稱，就像一個只有一個column的matrix。所以我們可以放很多東西在陣列裡面。而陣列是從0開始，所以跟一般從1開始不一樣。

2. 全域變數
每個變數都有自己的生命周期，有些是由程式開始到結束都存在著，有些只會在函式執行的時候生存。所以當我們想在整個程式使用某一個變數，就要把那個變數宣告為全域變數。
3. 區域變數
它只能在特定的地方或函數使用，函數結束後就會被釋放，其他函數並不能使用。
4. CSS
CSS是用來決定網頁的顏色、字型、排版等顯示特性。它可以自己獨立成一個檔案。有需要的話再把它連結到網頁裡面。

• id
如果我們只想改變特定的區域，而不是改變所有區域，便可使用id來選擇特定的區域，這樣便不會影響其他區塊的顯示。
• padding
  
  padding是內邊距，是物件跟邊界的距離，修改內邊距就可以讓版面變得更好看。
• box-shadow
  

  box-shadow可以在框內添加陰影，可以凸顯特定區域的內容。

以上的元素都可以使用"px"，"%" 去調整它的大小。

╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣

最後是一個加強版的類相簿功能： https://jsfiddle.net/Lzw6r5a9/21/
用了if去控制照片的切換，不會出現錯誤，也有用CSS把頁面弄得好看一點。

第二次上課的心得

這一次上課主要是介紹JavaScript的document.getElementById()
因為有不少標籤，例如<p>、<div>是可以自定id，
便可以用document.getElementById()將一些程式碼放在某一個指定id的地方。
這樣子就可以製作一個簡單的動態網頁。

╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣

可以用一個簡單的例子解釋一下這個東西：

這個是一個HTML碼，<p></p>是paragraph的意思，這個paragraph的ID是demo，而paragraph裡會出現「Click the button!」這段文字。而<script></script>裡面的內容就是要改變段落裡面的內容。
「document.getElementById("demo").innerHTML = "Hello World";」這一句是要把Hello World這個HTML碼放在demo所在的位置，就是「Click the button!」的位置。所以只要我們按下按鈕，網頁就會執行myFunction()這個程式，把「Click the button!」換成「Hello World」。所以用這個方法便可以做出一個簡單動態網頁。

╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣

然後，可以寫一個類相簿的功能來練習一下：
https://jsfiddle.net/21f6edp2/3/
裡面有4張照片，可以通過「上一張」、「下一張」來換照片。