HTML 5 學習心得

#第二週

圖片切換導論

今天想分享的是設計圖片切換導覽的過程以及一些自己的心得分享

#右邊就是我製作的一個相冊，共3張圖片

這一期會用到新的指令

#如果我解釋的不清楚，可以點擊各欄目的標題～～

<script> 和 </script>

<div> 和 </div>

<button> 和 </button>

function

var

if/ else if/ else

這是我做的版本

我們先從<body>的部分開始

  • div (division/section) 指的是一個選區範圍，我將這個div 取名為 “ABC"，並在裡面放了一個圖片資源，【<img src="】（image source） + 【一個圖片網址】 + 【" width ="100%">】（通過設定width或height為 XX%，照片就會按照比例尺來改變圖片的長或寬）
  • 電腦讀完head裡的東西以後，就會順序執行body裡的每個程式，我們在body下的第一行就放上圖片鏈接，目的是在別人點進我們的網頁後，就先看到我們放在網頁的第一張照片
  • 接下來幾步我們所設計的程式，就是要通過替換這個div裡的圖片網址來達成切換照片的目的
  • 創建兩個可以按的按鈕，一個是“上一張照片” 按鈕，一個是“下一張照片” 按鈕
  • 當遊覽者點擊“Previous”這個按鈕時，電腦就會執行"javascript:f1(-1)“，這個指令，這個指令說明的是：套用Javascript語言指令中 f1 指令集裡的功能，並回傳（指傳給這個指令）一個值（這裡回傳 -1）給 f1
  • “Next” 這個按鈕的功能如同上述的一樣，只是他它回傳的值是 +1

點進網頁 > 看到第一張圖片 > 選擇“上一張” 或 “下一張”

這是目前已經完成的部分，接下來我們要做的就是根據遊覽者的要求，設計一組方程式，完成圖片切換功能

  • <script>顧名思義就是指跟 JavaScript 有關，用來引用或者嵌入可執行的腳本（Script File)
  • 今天所使用到的指令都會放在這個script裡面去執行，倘若今天我們把指令放在script外面的話，電腦會無法識別我們所輸入的東西。script就像一個“宣告”或者“定義”，告訴電腦這個部分是使用有關script的語言，電腦就會從<script>這一行讀到</script>，並且用script的語言去翻譯它並執行。
  • 在這裡我們先設立一個script欄位，放在<head>裡【養成一個習慣，方便閱讀】
  • var（variable）是指變數，跟其他電腦語言存入變數的方式一樣，在這裡我使用兩個變數，一個是c 一個是a 。變數c 是我的記數器，用來記錄目前照片是播放第幾張（初始值我設0；0指的就是第一張，1指的是第二張以此類推）
  • 變數a 是我的用來存放圖片網址的矩陣空間，用方跨號 ”[ ]" 來表示我的元素有哪些，var a = [ ' 網址1 ' , ' 網址2' , '網址3' ]，
  • #一對單引號裡放一組網址，不同的網址之間用逗號分開（電腦無法自己區分開這些網址，如果不這麼做，到時候程序就會無法正常運行）
  • 變數c 我放在function 上面，而變數a 我放在function 裡面（有目的的，稍後解釋）
  • function是一個很活很常用的一個指令，我們可以通過function的架構來設計一組自己的方程，然後帶入到程式中去使用，在這裡我要設計一個會自動切換圖片且切至最後一張時會自動跳轉回第一張照片的“回圈（circle）功能”，就行我們用手機或電腦瀏覽相片一樣
  • 第一步我先創建一個空間，放我的圖片網址（變數a；承接上一個步驟）
  • 第二步，數數字；如果今天電腦看到 C出來的值為 1，那電腦就幫我把照片替換成 第二照片（0指的是第一張照片，1指的是第二張照片，以此類推）
  • 通過之前我們在button那邊預選設置好的回傳值，通過簡單的數學加減運算來告訴電腦現在要放第幾張照片
  • 假設現在是第一張照片（c 的值為0），按下button後回傳的值為+1，那麼c 現在新的值為+1【0+1=1】，電腦放第二張照片。若接著下一個回傳值也是+1，那現在c 的值會變成 2【1+1=2】，電腦就放第三張照片
  • 同理如果現在顯示的是第三張照片（c = 2），按下上一張的按鈕後，回傳回來的值是 -1，所以c 的值就變成1【2+ (-1) = 1】。這樣，跳轉上或下一張照片的重要指數 "c" 就設定完成了

#圖片中的x就是我們回傳值儲存的位子，然後套用在公式【c = c +x】裡

那麼按照上述的方法，如果今天我是在第一張照片（c=0)，我再按下”上一張”（回傳值為-1）那c 的值豈不是變成 -1 【 0 + (-1) = -1】，會有什麼結果？？

#電腦無法正確顯示出照片～～

所以這就是我們要解決的，這裡我們要使用 if 指令，來解決這個問題

  • If 這個指令集是指當我們預設的條件達到時，執行相對應的指令，例如：如果下雨（條件），就打開雨傘（執行的動作）
  • 在這裡我設定的是：如果c 的值小於0，我就把照片替換成第三張圖【a[2]】，並把記數器A（變數c）調整成2；如果c 的值大於2，我就把照片替換成第一張圖【a[0]】，並把記數器A（變數c）調整成0，通過這樣的設定，就能把第一張圖片跟最後一張圖片鏈接起來，完成迴圈
  • 其他情況時就執行else裡面的指令
  • 在if 這裡指令集裡，他的處理順序為：if > else if > else

替換

替換的動作要如何實現？？？？

  • document.getElementById(" id名字 ").innerHTML = '<img src="' + a[c] + '" width="100%">'
  • document.getElementById(" id名字 ") ；通過搜尋Id來招待我們要的document，接著用 "."（這個點很重要！！！）來表示下一步指令
  • document.getElementById.innerHTML；選擇裡面的內容
  • '<img src="' + a[c] + '" width="100%">'； 在HTML裡我們可以使用單引號或雙引號和加號來組合一個字串。”AB” + ”CD“ 出來的結果為ABCD。
  • 因為我們知道如果要想顯示圖片，程式的開頭及結尾都是都是用同一種寫法（<img src=" 及" width="100%">）唯一不一樣的就是中間的圖片地址，在矩陣裡我們可以用 a[0], a[1], a[2] 來表示不同的元素（圖片網址），只要我們能更改方括裡的數字，就能實現表達不同的照片，這就是為什麼當初要設立記數器的原因。

但電腦完成一次替換的動作後，電腦就會等待並重新執行function裡的程序。還記得一開始說的，為什麼計數器A（變數C）不可以放在function裡嗎？？因為如果放在function裡，沒執行完一次function指令後，電腦就會重置c的值變成0，假設現在是第2張圖片（c為1），重置以後c變回0，出來的結果就是照片無法像我們當初預想的那樣切換。

這就是最終結果

還記得做這個的時候，因為一個小小的符號錯誤，在那邊debug了很久很久，寫程式真的是要很小心很小心... 平常的練習也很重要...