第十次上課心得

今日上課是學如何把YouTube的影片嵌入網頁裡面，

我們可以把影片的嵌入網址寫成function，當使用者按影片的名字，畫面就會顯示相對的影片。

第九次上課內容

今天上課是介始Google map的API，再配合傳參數的方法，在不同頁面顯示不一樣的地方

複製老師網頁上的程式碼，再修改網址的傳，就可以顯示不同的地址，在網址當中，

z=多少，是決定Google Map顯示哪一個層級，q是代表經緯度，

我們在網頁上把Google Map網址做成連結，當電腦使用者按連結，就會跳到Google Map的網頁，手機使用者的就會直接開啟Google Map的APP。

之後，我們可以再修改一下網址，有時候我們需要從資料庫讀出不同的經緯度，所以我們可以寫一個JavaScript來讀取不同的經緯度木我們可以把經緯度的2個值變成變數a,b，再用之前所學的document.getElementById，我們只要改變a,b的值，就可以顯示不同的地方。

除了改變經緯度外，我們還可以直接代入想顯示的地址，Google Map會自動把地址翻成經緯度。

當我們想把Google Map嵌在網頁裡面我們可以使用iframe，把網址換成Google map的網址，再加上&output=embed，就可以嵌入到網頁裡面。

如果我們要顯示起點跟終點，就可以使用saddr和daddr，代入地址或經緯度

Geolocation可以讓我們知道裝置的位置，但是我們很難得知裝置的位置，因為我們要透過電信業者的服務來進行定位，但一直開著定位，很快就會沒電，所以不會有人一直開著定位，所以我們很難得到裝置位置。

html的程式碼的navigator是代表現在使用的瀏覽器，再使用裡面showPosition的function，取得座標。

我們可以善用Google Map API，上面有很多範例程式碼，可以直接把地圖載入網頁中，再調整層級(zoom)、長度(height)，令地圖更適合網頁。

最後，我們可以利用傳參數，在瀏覽器輸入經緯度，就可以在地圖上顯示所輸入的地方。

第八次上次心得

今日繼續學習google 表單的使用

當網頁要讓用戶輸入資料，如果直接顯示Google表單，畫面會顯得非常奇怪，所以我們會把表單的元素抽出來，用自己定義的form來讓用戶輸入資料。

所以我們需要使用<form>...</form>，form的input type 有很多，例如是text,submit,password,checkbox

我們可以用參數的形式，把在網頁中的資料寫到Google表單上面。

首先，我們要取得預先填入的連結，把網址的&之後的entry名字放到自己的程式裡面。再綁定試算表，就可以把用戶所輸入的資料從自己的網頁傳到Google試算表裡面。

在網頁中，form裡面的action改成JavaScript的程式，這代表由程式接手處理資料。

而程式裡面的document的是代表整個html檔，要取出裡面forms的其中一個值就需要寫成:

document.forms[“form name”][“name”].value

再用字串的相加，把網頁跟資料相加，再用window.open把網址執行。

因為這樣的頁面還是太醜，所以要用materialize來美化網頁。

在materialize找到forms的程式碼後，就把自己的程式碼修改。

之後為了開發頁面相似，內容只有一點點不一樣，我們可以使用傳參數的方法，從表單抓資料，傳回網頁，再把資料顯示在網頁上，就不用重覆寫幾10個網頁，那是用一個網頁就可以顯示出想顯示的所有資料。

decodeURIComponent是把百分比的東西轉回去原本的字，不會把收不到原來的字。

第七次上課心得

今日繼績使用materialize來製作網頁，

在網頁封面可能需要會讓用戶選擇不同的功能，有些可能會用九宮格的頁面，也有可能是使用集合的方式顯示。

所以materialize提供一個Collection的功能，可以把我們所需要的功能列表顯示出來。

另外，現在不少APP會有快速的選單，所以網頁也可以增加側欄選單，materialize也有SideNav的程式碼，而它需要用到jQuery，而且jQuery的程式碼要放在html碼後面，不然會出現問題。

把程式碼放到html檔後，就可以修改程式碼，把side nav改成適合自己網頁的風格。

SideNav跟navbar一樣，也是使用<li></li>的元素，透過修改<li>...</li>的程式碼，把裡面的元素改成自己想要的功能。

要在網頁中顯示側欄選單，就需要用到<i>...</i>。而且不一定會在全屏幕的網頁版顯示出來，可能要縮少頁面的大小才會顯示。如果要在網頁版顯示側欄選單，就要在class裡面加上show-on-large。

另外，我們也會使用collapsible來顯示內容，這個功能也是使用<li>...</li>，而動態的效果需要javaScript來支持。值得注意的是，靜態顯示可以不用javaScript，但如果是需要寫取其他資料，是動態顯示資料的話就需要用到javaScript。

網頁也會用到頁數，因此，materialize有頁數顯示的功能。如果我們需要讀取大量資料，就會需要這個功能，但這個功能是不會寫死的，會根據資料庫資料的數目來動態計算需要多少頁數，再顯示在網頁上。

有時候，我們需要讀取資料庫的資料，但需要一些時間，所以一開始要Preload，當資料拿到手，到達網頁的時候，便可以把preload的程式碼覆蓋，顯示所需的資料，這個功能便可以提示使用者先等一下，資料會馬上顯示出來。

使用以上跟之前的功能就可以完成一個行動式網頁，也可以用其他方法把網頁包成APP，就可以為不同東西進行開發。

第六次上課心得

今日上課也是在延續資料庫的部份。

除了寫網頁的人可以對資料庫增加資料，用戶也可以增加資料，所以我們可以用Google表單來讓用戶填資料。但直接讓人進入資料庫就會很容易把之前的資訊外洩出去，也會被人看到，所以用表單讓用戶輸入是一個好方法。

Google表單並沒有跟試算表連在一齊，所以要在表單裡新增一個試算表，而且欄位是要英文，因為是中文的話，在寫程式上會有困難。

有表單之後就可以把表單美化，可以把banner換掉，也可以有不同形式的選項(核取方塊格、單選、簡答)。Google表單也可以新增圖片、說明文字、影片到表單裡面。

做好表單後，可以分享給別人，把回應的試算表共用，但是只能讓別人檢視。就可以讓別人新增複本，也不會更改到之前的資料。

—————————————————————

那現在就可以用試算表跟網頁連在一齊。

把這次的表單跟之前作業的試算表連接在一起，但記得要改「發佈到網路」的選項，要改成特定的表單。不然Tabletop.js就不能讀取資料，就會出現undfined的狀況。
這個是這次作業的程式碼：https://jsfiddle.net/oeft0pp9/1/
這是它的Google表單：https://docs.google.com/forms/d/12vDUGhJmcMbHiiuQt3SROU0fcbA_6axTU4u-Gyc8qnM/edit?usp=sharing
這是它的試算表：https://drive.google.com/open?id=1Sh_5cfcrXhROC642JTo9bD85jp1jD_HmptDZ6wdPwPU

第五次上課心得

這次上課會使用到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/