第十次上課心得

今日上課是學如何把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/

第三次上課心得

這次上課主要是講陣列(全域變數，區域變數)、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張照片，可以通過「上一張」、「下一張」來換照片。

第一次上課的心得

昨天是第一次上HTML 5的課，老師簡單教了一些編寫網頁的方法
老師教我們使用BEE free製作電子報，出來的效果也很好看，只要在網頁拉一拉，按幾下就可以跑出非常漂亮的電子報，而且可以直接把成品傳給別人，我完全沒有想過可以如此簡單的把電子報傳給別人。所以這是一個很好的工具去製作電子報，不需要用大量力氣去思考如何寫程式碼，不用想著如何套CSS把網頁變漂亮，這個真的是一個很方便的工具，我應該早一點修這門課😭

這次上課老師介紹了幾個HTML的標籤—div、a href、img src、p、button

1. <div>...</div>
這個標籤可以定義網頁的一個section或者是分區。通常會加上一些CSS或者使用id及class去改變那一個section的屬性。寫在div後的東西都會自動跳行，在新一行重新開始。例子：
<div style="color:#FF0000">
This is some text in a div element.
</div>
<p>This is some text.</p>


2. <a>
這個標籤是定義連接或錨點，是來導向另一個頁面。而href是<a>的其中一個重要的屬性，用來指示連結的目的地，而且可以設定如何打開另一個頁面，可以使用target來設定。
例子：
<a href="www.yahoo.com.tw" target="_blank">Visit Yahoo.com!</a>


3. <img>
這個是用來定義網頁中的圖片。其中src和alt是重要的屬性。src是用來定義圖片的地址，而alt是定義圖片的替代文字，在圖片沒有正常出現時會出現，也可以為盲人提供文字描述，建立無障礙網頁。另外也要一些屬性可以用來設定圖片，例如height，width。
例子：
<img src="helloworld.gif" alt="Hello World！" width="42" height="42">


4. <p>
這個是用來定義一個段落，瀏覽器會自動在其前後加入一些空白，也可以使用CSS設定空白的大小。
例子：
<p>This is some text in a very short paragraph</p>


5. <button>
這是用來定義一個按鈕，可以使用文本或圖片來當作按鈕，可以使用name屬性設定按鈕的名字，使用type屬性設定按鈕的類型(submit,reset)。
例子：
<button type="submit">Submit！</button>

以上是我所記得或學到的東西，寫在這裡作一個小小的記錄....還有交作業哈哈哈哈哈
以下是我寫這次心得的狀況：

第一次上課需要用到的東西

Hello World !!!!!

這是第一篇文章，不知道要打什麼哈哈

久違的blog😂😂😂

希望可以好好學HTML還有JavaScript

我的JavaScript真的超級爛QQ

加油!!