W5
第五堂
課程內容
- nchu-mis-html5-blogger(JS教學)→"這個解析網址參數例子"→複製test2的head部分
- 目標：從網頁1連結到網頁2
- 在網頁1的網址後面加上? = 在read more後連結到網頁2→<a href="2nd.html"?變數1=常數1&變數2=常數2&變數3=常數3...>→網頁2網址=網頁1網址?變數1=常數1&變數2=常數2&變數3=常數3......→呼叫變數後，常數組成網頁2
- <a href="2nd.html">網址</a>→另開新視窗為2nd.html
- <a href="test2.html"?a=1&b=2&c=3...>網址</a>
- Var x/y/z=decodeURLComponent(GetUrlVar("a/b/c")) ; alert(x+y+z)→宣告x/y/z為變數a/b/c，再將x+y+z的內容alert到嵌入式警示視窗
- 網頁2網址=1st html網址?a=1&b=2&c=3→if為中文(網址內不可有中文)，會先encode(編碼將中文字以編碼形式儲存)再decode(解碼)
- 上週作業的圖片加上商品頁連結
- '<a href="test2.html?pid=' + i + '"><img src="' + pictures[i] + '"></a>'; → 連結要與陣列內變數i同步
- 陣列內文""內可直接用html語法改變字型
- GOMAJI內文可能是用google blogger編輯完轉換成html語法再儲存為字串
- *用notepad++時，如要複製別的網頁內容，而其中已經有中文字，要去Encoding改成UTF-8-BOM才可正常運作
課堂心得
今天的目標是將上禮拜作業的每張商品card連結到我們目標的商品介紹頁面，這功能特重要，之後作專題基本上一定會用到。一開始我們先用"herf加上?變數=常數"這東西來讓test1的網址後面多幾個變數，醬就可以用呼叫變數後的常數內容組成第二個網頁(test2)，接著為了要讓每張商品圖片都能連結到各自的介紹頁面，因此必須加上陣列，有成功！這次上課還試著分別用圖片和整張card來連結，但差別其實只是在於herf的位置~
老師說可以開始想期末要做甚麼網頁，我其實早就想好，我想幫爸媽公司作個網頁，兩個人創業到現在一直沒有一個網站，雖然應該只能是最陽春的那種而且還不一定能成功，但也算是一個目標吧，希望就算課程結束後我還能一樣有興趣透過各種管道好好學，總有一天真能好好做個能看的網頁嘿。
- 課堂練習網址(test1)：https://jsbin.com/xazikeboka/edit?html,output
課堂練習(test2)：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// 取得網址裡的參數
function GetUrlVar(VarName)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + VarName + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return results[1];
}
</script>
</head>
<body>
<div id="demo"></div>
<script>
var intros=['平假日皆可抵用100元消費金額',
'超飽煲豪華澎派套餐',
'<h2>平假日皆可抵用<strong>100元消費金額</strong></h2><img src="https://picdn.gomaji.com/products/o/395/259395/259395_1_2.jpg">'];
//先取得網址裡的參數
var X = decodeURIComponent(GetUrlVar('pid'));
document.getElementById("demo").innerHTML= intros[X];
</script>
</body>
</html>
留言
張貼留言