顯示具有 HTML 標籤的文章。 顯示所有文章
顯示具有 HTML 標籤的文章。 顯示所有文章

2014年3月10日 星期一

102-2 Lab7,8 Using browsers for programming

一、

標準表示式：[A-Za-z0-9]

二、

要求出現某樣表示式：(?=.*[])

(?=.*[])這段於法又稱做「右合樣 (Positive Lookahead)」，右合樣（或左合樣）語法所佔用的寬度為 0，也就是說這段語法本真不會佔用比對的字元，僅僅只是 Regular Expression 中的一種「判斷式」而已，右合樣 (Positive Lookahead)會判斷右邊緊接著的字元是否符合比對條件，如果符合條件才會繼續比對下去。

Ex(?=.*\d)只會用來判斷該字串有沒有出現數字，所以使用上述不用考慮順序問題。


參考資料：Will Will Web
張貼者： 於 沒有留言:
標籤： ,

2014年3月3日 星期一

102-2 Lab6 Using Chorme

使用Chrome 開發人員工具，檢查
中原大學
Youtube
Udacity
三個網站，找出網頁下載過程中，最耗時的前三個元件（請列出檔名）

 1.叫出開發人員工具
  • 在Chrome按下F12 
  • 快速鍵：「Ctrl+Shift+I」 
  • 對網頁按滑鼠右鍵，選擇檢查元素 
  • 自訂及控制→工具→開發人員工具
2.找出耗時Element
  1. 點Network
  2. 點Name上面的圓圈，開始記錄
  3. 排序選擇Time(Latency)
  4. 若無紀錄全部的Element則重新整理網頁

如附圖



張貼者： 於 沒有留言:
標籤： ,

2013年10月24日 星期四

102-1_Lab15 Hand code a form

助教悲劇補充：現在依然無法判斷大小

<html>
<title>lab14</title>
<body>
<form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()">
<input name="q" type="text"  /><br />
<input name="send" type="submit" value="search" />
</form>
</body>
<script>

  var floatReg =/^([+-]?)[1-9]\d*(\.\d*)?,([+-]?)[1-9]\d*(\.\d*)?$/;
//funtion外宣告可以全域使用
var str=",";
f1=f.q.value.indexOf(str);
f2=f.q.value.length;
latitude=f.q.value.substring(0,f1);
longitude=f.q.value.substring(f1+1,f2);
y=parseInt(latitude);
x=parseInt(longitude);
//alert(y);
//alert(x);
//alert(y>90);
//alert(x<180);
//alert(y>90||x>180);
function check(){
if(!floatReg.test(f.q.value)){
alert("It's not correct format");
   f.q.value="";
   document.f.q.focus();
   return false;
}
}
 document.write(Date());
</script>
</html>
張貼者： 於 沒有留言:
標籤： ,

2013年10月21日 星期一

102-1_Lab13

張貼者： 於 沒有留言:
標籤： ,

2013年10月14日 星期一

102-1_Lab12 Change an image by moving the mouse

<img src ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMLHfEEgNYDFrU9Ula0Uka8uKzfQgrzcLfZ9cvNWySdYK2ia7FN2UXXYnpJd1lb6hgGWPWT5QOmPZb0law4NjhqizXa8RASzX7AvoTXmN7dh8PuU4rh9G_RfrO1wQiTpfnTWtUebm4Gdo/s320/DSC_1795.JPG" onmouseover="mOver(this)" onmouseout="mOut(this)" >

<script>
function mOver(obj)
{

obj.setAttribute("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjuKSUhjEjG0IXijdpJdTBhemp4LkzjB80Mj6JZaJFbfjbZxepAcD9vN_ShNEdiJ8Mg_aaGiiCTzURbWhUeJKiMRL4uae0ilXuff7GuCuv4z8-o5fjEQGztZTCNORtMqeOY6q9YyNgpJl8/s320/DSC_1772.JPG");
}

function mOut(obj)
{
obj.setAttribute("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMLHfEEgNYDFrU9Ula0Uka8uKzfQgrzcLfZ9cvNWySdYK2ia7FN2UXXYnpJd1lb6hgGWPWT5QOmPZb0law4NjhqizXa8RASzX7AvoTXmN7dh8PuU4rh9G_RfrO1wQiTpfnTWtUebm4Gdo/s320/DSC_1795.JPG");
}
</script>

主要為切換兩個事件
mouseover & mouseout

張貼者： 於
標籤： ,

2013年10月7日 星期一

102-1_Lab7,9：Using browsers for programming

原程式碼：
<html>
     <head>
</head>
<Title>Password Regex</Title>
     <body id="body">
      <form action="javascript:void(0);" id="exampleForm">
        Password:<input type="password" id="examplePass" name="Enter password" />
<input type="submit" />
  </form>
  </body>
    <script language="javascript">
document.getElementById("exampleForm").onsubmit = function(){
var passwordRegex = /^[A-Za-z\d]{6,}$/;
if(!passwordRegex.test(document.getElementById("examplePass").value)){
   console.log("Regex didn't match");
var notify = document.getElementById("notify");
if(notify === null){
   notify = document.createElement("p");
notify.textContent = "Passwords need to above 6 words!";
notify.id = "notify";
var body = document.getElementById("body");
body.appendChild(notify);
}
}
};
    </script>    
</html>

Sol of lab7 condition：/^[A-Za-z\d]{6,}$/
(至少要一大寫英或小寫英或數字、超過6字)
Sol of lab9 condition：/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{6,}$/
(至少一數字、一小寫英、一大寫英、一特殊字元("_"底線除外)、超過6字)

Sol of lab9 condition：/^(?=.*\d)(?=.*[\W_]).{6,}$/
(至少一數字、一特殊字元、超過6字，大小寫英可有可無)
"\W"為不包含大小寫A-Z和0~9和"_"
"\w"則剛好和\W完全相反
所以取特殊字元必須使用大寫"\W"(此時底線除外)
最後把底線加入："[\W_]"


第二版程式碼：

<html>
     <head>
</head>
<TITLE>exam the password</TITLE>
     <body id="body">
      <form method="POST" action="form-handler.php" onsubmit="return checkForm(this);">
               <p>Username: <input type="text" name="username"></p>
               <p>Password: <input type="password" name="pwd1"></p>
               <p>Confirm Password: <input type="password" name="pwd2"></p>
               <p><input type="submit"></p>
            </form>
</body>
<script type="text/javascript">

  function checkPassword(str)
  {
    var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{6,}$/;
//  /^[A-Za-z\d]{6,}$/至少要一大寫英或小寫英或數字、超過6字
//  /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{6,}$/ 至少一數字、一小寫英、一大寫英、一特殊字、超過6字
    return re.test(str);
  }
  function checkForm(form)
  {
    if(form.username.value == "") {
      alert("Error: Username cannot be blank!");
      form.username.focus();
      return false;
    }
    re = /^\w+$/;
    if(!re.test(form.username.value)) {
      alert("Error: Username must contain only letters, numbers and underscores!");
      form.username.focus();
      return false;
    }
    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(!checkPassword(form.pwd1.value)) {
        alert("The password you have entered is not valid!");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("Error: Please check that you've entered and confirmed your password!");
      form.pwd1.focus();
      return false;
    }
    return true;
  }
</script>
</html>

參考資料：1、2、3、4、5、6

張貼者： 於 沒有留言:
標籤： ,

2012年12月15日 星期六

lab32 九九乘法2

承lab31
在body中加入

<input value="show 9*9Table" onclick="buildTable()"
 type="button">
此input Attribute
結果如下

張貼者： 於 沒有留言:
標籤： ,

2012年12月3日 星期一

lab31 九九乘法

1.首先複製
<html>
<head>
<title>lab11</title>
<script>
function buildTable(){
docBody = document.getElementsByTagName("body").item(0)
myTable = document.createElement("TABLE")
myTable.id ="TableOne"
myTable.border = 1
myTableBody = document.createElement("TBODY")
for (i = 0; i < 3; i++){
row = document.createElement("TR")
for (j = 0; j < 3; j++){
cell = document.createElement("TD")
cell.setAttribute("WIDTH","50")
cell.setAttribute("HEIGHT","50")
textVal = "Cell" + i + "_" + j
textNode = document.createTextNode(textVal)
cell.appendChild(textNode)
row.appendChild(cell)
}
myTableBody.appendChild(row)
}
myTable.appendChild(myTableBody)
docBody.appendChild(myTable)
}
window.onload = buildTable
</script>
</head>
<body>
<br>
</body>
</html>

到<script></script>裡
改變"i"、"j"範圍以及陳述式textVal = i + "*" + j +"="+ i*j
最後結果如下

Q：此次lab依照參考資料修改能節省不少時間，只要注意table的範圍(>=)就可以輕鬆達成。
張貼者： 於 沒有留言:
標籤： , ,

lab30 Creat Image using DOM



一開始照打
<meta content ="text/html; charset=-8859-1" http-equiv="content-type">
<title>lab10</title>
<script>
function build()
{
myImg=document.createElement("IMG")
myImg.setAttribute("id","imageOne")
myImg.setAttribute("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMLHfEEgNYDFrU9Ula0Uka8uKzfQgrzcLfZ9cvNWySdYK2ia7FN2UXXYnpJd1lb6hgGWPWT5QOmPZb0law4NjhqizXa8RASzX7AvoTXmN7dh8PuU4rh9G_RfrO1wQiTpfnTWtUebm4Gdo/s320/DSC_1795.JPG")
docBody = document.getElementsByTagName("body").item(0)
docBody.appendChild(myImg)
}
window.onload=build</script>

再來把window那行刪掉
在<<script>></script>之前補上
<input value="show image" onclick="build()" type="button">
結果如下


Q：這次lab的參考是圖片，所以照著打時容易打錯字或大小寫有錯，所以debug非常耗時，最後才發現在Kompozer底下可以進入debug模式節省時間。
張貼者： 於 沒有留言:
標籤： , ,

Lab29 Lab Form and Action

1.CGI(Common Gateway Interface)意為一種連結主機端與伺服器端並且能夠存取檔案的一種介面，另外它也可根據使用者的輸入要求自動產生HTML的格式資料


2. 內容是
<form action="https://maps.google.com/maps?q=24.9586,+121.24114" method="get" name="f">
<input name="f" type="text" /><br />
<input name="send" type="submit" value="搜尋" />
</form>

結果為：




此篇參考

Q：在form裡面因為是用google的搜尋引擎(name="f")，所以一開始無法立即搜尋會先跳到google地圖首頁，最後改成google的指定變數name="q"就可以在部落格內或是html檔馬上搜尋。
張貼者： 於 沒有留言:
標籤： , ,

Lab28 Hand code a form



圖(一)當form之Method為GET時的搜尋結果


圖(二)當form之Method為POST時的搜尋結果
經過查詢後，此結果的原因為當使用的Method為GET時，資料會經由Request.QueryString獲取，意為把得到的資料經由編碼加在URL網址後面(所以資料在網址就看得出來)，而使用POST時網址不會改變，資料由message-body傳送，且不能由Request.QueryString，所以上圖(二)會出錯。而針對POST比GET安全這點，抓取封包時兩者的資料依然都看得到，只是GET比較明顯，另外GET的傳輸有上限，使用POST能傳遞較大量的資料尤其是連續性的如音樂或影像檔。



Q：一開始對這lab的用意不是很清楚，經過老師和google大大解說後才比較明白兩者的差別。

參考資料1、參考資料2、參考資料3
張貼者： 於 沒有留言:
標籤： , ,
訂閱： 文章 (Atom)