HTML 5 學習心得
HTML 5 學習心得
#第六週
#第六週
連接資料庫
連接資料庫
概念流程
概念流程
- 發布一個Google Sheet
- 用程式通過網絡來讀取文件
- 將文件導入我們的網頁當中
- 創建一個鏈接/按鈕來跳轉畫面
- 用上週學的方法,從網址中獲得指令,投放相對應的畫面
發布一個Google Sheet
發布一個Google Sheet
# 如果是使用Google Sheet的話,記得要將網頁發布(Publish) 到網絡中,這樣程式才能找到我們的資料
#Google Sheet裡的第一ROW只能用英文,不然程式不能成功讀取資料
發佈到網絡以後,要回到原來的編輯頁面內。將網址複製並保存起來,這個網址要保留到待會兒使用
發佈到網絡以後,要回到原來的編輯頁面內。將網址複製並保存起來,這個網址要保留到待會兒使用
如此,我們第一步準備資料的工作就完成了,在這裡只是做一個示範的例子,內容可以根據自己的需求做更換。『換湯不換藥』,接下來教的方法,根據自己的需求進行修正即可
用程式通過網絡來讀取文件
用程式通過網絡來讀取文件
套用網絡套件--Tabletop.JS
套用網絡套件--Tabletop.JS
網絡套件 tabletop.js 是一個用來讀取Google Sheet 的個程式,我們提供網址(上一部分保留下來的),程式便可從網址中獲得Sheet中資料
#將我們上一部分保留的網址,粘貼複製在第11排
Call back
Call back
- Call Back 在程式中類似一個回傳的功能,跟服務器要資料並不能保證服務器能第一時間回傳給我們
- Call Back的概念就像:當服務器(可能是Google Sheet等等)找到資料以後,通過我們所留下的聯繫方式(Call Back)把資料回傳給我們避免我們在線上一直等回复,而浪費資源
- 第13-17行,是tabletop.js 裡的指令集,使用方法和概念如圖顯示
完成!!!現在程式有了基本的讀取(從網絡讀取資料)並回傳(CallBack)資料的能力,下一步是要將資料整合進我們的系統,按設定呈現出來
將文件導入我們的網頁當中
將文件導入我們的網頁當中
#假設想要表示“標題3”,我們就設定data[2].title,就能表示出“標題3”了
#假設想要表示“標題3”,我們就設定data[2].title,就能表示出“標題3”了
到了這步,資料導入的部分就完成了,下一步是跟據我們個人的需求來運用資料庫裡的資料
創建一個鏈接/按鈕來跳轉畫面
創建一個鏈接/按鈕來跳轉畫面
- 在例子當中,我設置兩套裝置,兩套的效果皆為跳轉畫面,一個是用href 來跳轉,一個是button 來跳轉
- 當我點擊“日期四”時,畫面會跳轉到一個新的畫面,並顯示有關日期四個訊息
這部分會分成Part 1跟Part 2 來處理
這部分會分成Part 1跟Part 2 來處理
Part 1:
Part 1:
- 設置href 及 button
- 給它們設定好跳轉畫面的方向
#設成一個file
Part 2:
Part 2:
- 根據跳轉指令,投放相對應的畫面
- 兩個表示法:一個是用<p>,一個是<h>
#設成一個file
畫面一
畫面一
點擊“日期四”
畫面二
畫面二
點擊“日期四”後的畫面
PART 1
PART 1
#30.10.19.html 只是一個文件名,是自定義的(要設定成第 2Part的檔案名
為什麼到了31排才導入資料,而不是一開始就導入資料???
為什麼到了31排才導入資料,而不是一開始就導入資料???
- 因為每個服務器的響應速度(反應速度)不同;有的服務器快,有的服務器慢,越慢的服務器我們需要等更多的時間才能收到我們要的資料
- 為了避免當我們跟Google拿資料時,後半段的程式卻因需要Google的資料才能處理而暫停工作,我們先將後續的步驟處理完畢,才將Google的資料導入進來
- 以便應付網頁反應速度慢的網站
PART 2
PART 2
從網址中獲得指令,投放相對應的畫面
從網址中獲得指令,投放相對應的畫面
這一Part會用到上期學的知識點,建議先回顧上期內容再回來了解這一部分
跟上一個PART 內容相似,但我們這回要套用上期用的方程式
將網址中的參數decode出來,將參數套入程式中,最後再連上資料庫,放出相對應的資料/畫面
用getElemnet的方法將內容放入網頁
這一期的心得報告花了好長好長時間才寫完,接下來要開始篩選期中作業的題目跟內容了。上到這裡以後,雖然對網頁切換有更深一步的理解,但是目前所做的版本都是比較初階的版本,想看看下高級的網頁工程師如何從開始到結束設計一個網頁