HTML 5 學習心得

#第五週

創建網站的第一步

明白網頁網址

regular expression

  • 網頁網址的寫法並不是雜亂無章的，而是有規律性的，它們是按照Regular Expression (正規表示法) 來表示。
  • 正規表示法指的是使用單個字串來描述、匹配一系列符合某個句法規則的字串。
  • 在很多文字編輯器裡，正規表達式通常被用來檢索、替換那些符合某個模式的文字。
  • 這使得我們在一個網站下可以連接多個不同的子網站，我們僅僅需要改變參數，就可達到切換網頁內容的內容。

#正規表示式，我們現在可以暫時不用去深入理解它，久而久之我們就會慢慢的明白網頁的正規表示方法

為什麼要先懂正規表示式？因為今天學的就是通過改變網址裡的參數來達到切換網頁/網頁內容的效果

先看一組對照圖

#圖片中的網址，是我電腦的file location，這個網址是可以改變的

1號：file:///G:/HTML/materialize/Test-2.html?num=1

2號：file:///G:/HTML/materialize/Test-2.html?num=2

當參數不同時，展示出來的東西也會不同

概念如下：

這是這一周程式的範本

?num=XXX

  • "?" 在正規表示法裡可以被簡單理解成：匹配/宣告
  • “?num” ；表示在這個網站中代入一個參數 "num"
  • “?num=1”；將參數“num” 的值設為1

接著要引用JavaScript一個指令：

  • decodeURIComponent (將URI component 給decode掉/解碼掉），以及配合另一個function，這一個function 是用來取得網址裡的參數，我們可以將這段的程式先放在head裡
  • decode 方程式：

這樣一來就教會了電腦如何去識別網址中的參數，下一步就是要告訴電腦在不同的參數下所要執行的動作

執行

  • 有了前面一個步驟，電腦可以順利地從網址中讀取參數，我們現在要做的就是讓電腦去執行我們想要它做的
  • 在今天的例子當中，我要讓電腦按照我的指示，顯示一張圖片以及列印出一串數字

#以下是我的概念圖

  • 設立兩個空間，然後用get element的方法將想要顯示的圖片或者文字塞進去，再顯示出來

#執行替換/導入的方法，在第二週就提過了～～要回顧點這裡>>> 第二週

  • 所以，當我在網址中引用 ?num=1時，我電腦就會去尋找我們當初在設計程式時，num=1 的情況下要執行的指令，以此類推
  • 網址內沒有規定說只可以設置一個參數，我們可以根據我們的需求來設定我們參數的數量。

更好的去完善它

套用上一周Material CSS 以及之前學的<button>或者<href>，我們也可把網址加在裡面，讓它變成一個超連結～～

為什麼要拐彎抹角使用改變網址參數的方法來切換網頁，而不直接將另一個網頁的鏈接抄上來就好？

  • 未來我們在做網站時，我們的網頁都是在同一個網站框架下設計的，每個網頁的網址都有一個通用的字眼，而我們僅需要通過改變參數就可以達到在各網頁間的來回切換，且可以提升日後系統的擴充性
  • 1個參數如果代表1個資料，10個參數就代表10個資料，如果我們今天有一整個資料庫，並且我們給每個資料都設定好一個參數，這樣我們就可以按照瀏覽者的需求，叫出他想要的東西，一個完整的流程就產生了。

其他--Java script 的【Window Location】

  • window.location 用於獲得當前頁面的網址 (URL)，並把瀏覽器重定向到新的頁面。他的指令集有：
  1. window.location.hostname：回傳 web 主機的域名
  2. window.location.pathname：回傳當前頁面的路徑和文件名
  3. window.location.port： 回傳 web 主機的端口 （80 或 443）
  4. window.location.protocol： 回傳所使用的 web 協議（http: 或 https:）
  5. window.location.assign()：載入新文件

這一個指令很好用，以後我覺得會有用到它的地方

一套命名系統；快速讀取對應的檔案

受正規表示法的啟發，我現在在重新設計一套自己的檔案命名系統，將素材還有文檔鏈接。將檔案名設計成像正規表示法那樣的“規律性”，一來方便呼叫照片，二來方便我整理我所擁有的素材。經過測試，改變參數，使用for迴圈的方法確實可以實行。