JavaScript 2

2-1 JavaScript - Window
a. Pop up a Confirmation window

   Example: When clicking on the hyperlink " Jump to 7.html", it hyperlinks a confirmation window.

CODE:
<body>
<a href="7.html" onclick="return confirm('確定連到 7.html');"> 連到 7.html</a>
</body>

Result:
b. prompt  a textbox window
      Example: Click on the button then pop up a window. You may type something in the textbox of the pop up window and click OK. Then the text you typed will appear under the button of the main page.


CODE:ENG
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

<script>
function go()
{
var str = prompt('Please type text', 'My text');    // The value 'My text' is as a default value
if (str != null)
document.getElementById('myinput').innerHTML = str;
}
</script>
  </head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <input type="button" name="button" id="button" value="button" onclick="go()" />
  </p>
  <p><span id="myinput"></span></p>
</form>
</body>

</html>

CODE:CHT
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

<script>
function go()
{
var str = prompt('請輸入字串', '我的字串');    // "我的字串" 在此為預設值
if (str != null)
document.getElementById('myinput').innerHTML = str;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <input type="button" name="button" id="button" value="按鈕" onclick="go()" />
  </p>
  <p><span id="myinput"></span></p>
</form>
</body>

</html>

Result:
PS：document.getElementById('myinput').innerHTML = str;
     Explanation: Put str into a HTML tag which ID is 'myinput' . The " put ...into" means put str between <> and </> . In other word is put str between initial tag and finish tag.
     這句話的意思是說：將 str 放到 id 叫做 'myinput' 的HTML標籤 "的裡面"，所謂的裡面是指 <> 與 </> 之間，也就是 "起始標籤" 與 "結束標籤" 之間。

 c. Set Timeout
Example: pop up a alert after 5 seconds

 CODE:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
       <script>
        setTimeout("alert('5 seconds has passed')" , 5000);
        // The second value 5000 milliseconds = 5 seconds.
      </script>
  </head>

<body>
An alert box will appear in 5 seconds
</body>

</html>

Result:

d. Countdown download 1 - button 
Example: To use the function setTimeout(), for other purpose. There is a counter appears at the main page starts to countdown 10 seconds. Once the times up, the counter becomes a button, Please click here. Then click the button, it will pop up another window says Hello. It usually uses as a download function on website.

 CODE:ENG
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

<script>
var i = 10;
function count()
{
    if (i > 0)
 {
    document.getElementById('button1').value= i;
    i = i - 1;
    setTimeout("count()", 1000);
 }
 else
 {
  document.getElementById('button1').disabled= false;
  document.getElementById('button1').value= "Please click here";
 }
}
</script>

<body>
<form id="form1" name="form1" method="post" action="">
  <input type="button" name="button" id="button1" value="10" onclick="alert('Hello')"/>
</form>
</body>
</html>

<script>
 document.getElementById('button1').disabled= true;
count();
</script>


CODE:CHT
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

<script>
var i = 10;
function count()
{
    if (i > 0)
{
  document.getElementById('button1').value= i;
  i = i - 1;
  setTimeout("count()", 1000);
}
else
{
document.getElementById('button1').disabled= false;
document.getElementById('button1').value= "請按鈕";
}
}
</script>

<body>
<form id="form1" name="form1" method="post" action="">
  <input type="button" name="button" id="button1" value="10" onclick="alert('Hello')"/>
</form>
</body>
</html>

<script>
 document.getElementById('button1').disabled= true;
count();
</script>

Result:



e. Countdown download 2 - Hyperlink 
Example: This is an extended application about the countdown download. It shows a countdown message which is different to the first one, a countdown button. When the time is up, it becomes a hyperlink. This is also very popular on many download websites.


CODE:ENG
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

<script>
var i = 10;
function count()
{
    if (i > 0)
{
  document.getElementById('dlmsg').innerHTML= "Please wait " + i + " seconds to download...";
  i = i - 1;
  setTimeout("count()", 1000);
}
else
{
  document.getElementById('dlmsg').innerHTML='<a href="001.html"> Click here download </a>';
}
}
</script>

<body onload="count()">
<span id="dlmsg"></span>
</body>

</html>

CODE:CHT
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

<script>
var i = 10;
function count()
{
    if (i > 0)
{
   document.getElementById('dlmsg').innerHTML= "請稍等 " + i + " 秒後開始下載...";
   i = i - 1;
   setTimeout("count()", 1000);
}
else
{
   document.getElementById('dlmsg').innerHTML='<a href="001.html"> 請按此下載 </a>';
}
}
</script>

<body onload="count()">
<span id="dlmsg"></span>
</body>

</html>

Result:




2-2. JavaScript -- form

a. onchange VS onblur  (Reference：JavaScript)

 Example:
     The alert pops up when type incorrect message, then return to the original text.

CODE:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

<body>

<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="text" name="mytext" id="mytext" onblur="alert('test');document.getElementById('mytext').focus();" />
    </label>
  </p>
  <p>
    <label>
      <input type="text" name="textfield" id="textfield" />
    </label>
  </p>
</form>

</body>

</html>

b.  checkbox 1
Example:
     How to use select all

CODE:ENG
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
<script>
function show()
{
var chk = document.getElementById('fruits1');
alert(chk.checked);
}

function checkall()
{
var i;
for (i=1;i<=3;i++)
document.getElementById('fruits' + i).checked = document.getElementById('chkall').checked;   

//checked is the attribute of the object. Which means the attribute of each fruit i will be the same attribute as the attribute of checked.
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>&nbsp;</p>
  <p>
    <label>
      <input type="checkbox" name="chkall" id="chkall" onclick="checkall()"/>
      Select All
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="fruits" id="fruits1" value="apple" />Apple
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="fruits" id="fruits2" value="banana" />Banana
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="fruits" id="fruits3" value="guava" />Guava
    </label>
  </p>
  <p>
    <input type="button" name="click" id="click" value="OK" onclick='show()'/>
  </p>
</form>

</body>
</html>


CODE:CHT
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
<script>
function show()
{
var chk = document.getElementById('fruits1');
alert(chk.checked);
}

function checkall()
{
var i;
for (i=1;i<=3;i++)
document.getElementById('fruits' + i).checked = document.getElementById('chkall').checked;   
//checked的意思是該物件的屬性。也就是每個 fruits i 的屬性，都會跟 'chkall'的 checked屬性一樣。
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>&nbsp;</p>
  <p>
    <label>
      <input type="checkbox" name="chkall" id="chkall" onclick="checkall()"/>
      全選
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="fruits" id="fruits1" value="apple" />蘋果
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="fruits" id="fruits2" value="banana" />香蕉
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="fruits" id="fruits3" value="guava" />芭樂
    </label>
  </p>
  <p>
    <input type="button" name="click" id="click" value="按鈕" onclick='show()'/>
  </p>
</form>
</body>
</html>

Result:


c.  checkbox 2

Example:
   The text will appear behind the checkbox you selected. You also can make the text appear at any place.

CODE:ENG
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

<script>
function show(sel)
{
var i;
for (i=1;i<sel.length;i++)
{
if (sel.options[i].selected)
document.getElementById('seltext').innerHTML = sel.options[i].value;
}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label>
    <select name="fruits" id="fruits" onchange="show(this)">
    <option>Please select</option>
      <option value="Apple">Apple</option>
      <option value="Banana">Banana</option>
      <option value="Orange">Orange</option>
    </select>
  </label>
  <span id="seltext"></span>
</form>

</body>

</html>

CODE:CHT
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

<script>
function show(sel)
{
var i;
for (i=1;i<sel.length;i++)
{
if (sel.options[i].selected)
document.getElementById('seltext').innerHTML = sel.options[i].value;
}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label>
    <select name="fruits" id="fruits" onchange="show(this)">
    <option>請選擇</option>
      <option value="蘋果">蘋果</option>
      <option value="香蕉">香蕉</option>
      <option value="柳橙">柳橙</option>
    </select>
  </label>
  <span id="seltext"></span>
</form>

</body>

</html>

Result:

d. checkbox 3
     2 layers checkbox. Once click OK then clear the selected data in the 2nd layer.

CODE:ENG
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

<script>
function chg(mycat)
{
var i;
var s;
allclear();
for (i=1;i<mycat.length;i++)
{
if (mycat.options[i].selected == true)
s = i;
}
var newsel =  document.getElementById('sel2');
if (s == 1)
{
var opt = new Option('Apple', 'Apple');
newsel.options.add(opt);
opt = new Option('Banana', 'Banana');
newsel.options.add(opt);
opt = new Option('Orange', 'Orange');
newsel.options.add(opt);
}
else if (s == 2)
{
var opt = new Option('Cola', 'Cola');
newsel.options.add(opt);
opt = new Option('Soda', 'Soda');
newsel.options.add(opt);
opt = new Option('Juice', 'Juice');
newsel.options.add(opt);
}
}
function allclear()
{
var i;
var newsel = document.getElementById('sel2');
for (i=newsel.options.length-1; i>=0; i--)
{
newsel.options.remove(i);
}

}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <select name="sel1" id="sel1" onchange="chg(this)">
        <option>Select</option>
        <option value="1">Fruit</option>
        <option value="2">Beverages</option>
      </select>
    </label>
    <label>
      <select name="sel2" id="sel2">
      </select>
    </label>
  </p>
  <p>
    <input type="button" name="button" id="button" value="OK" onclick="allclear()"/>
  </p>
</form>
</body>
</html>

CODE:CHT
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

<script>
function chg(mycat)
{
var i;
var s;
allclear();
for (i=1;i<mycat.length;i++)
{
if (mycat.options[i].selected == true)
s = i;
}
var newsel =  document.getElementById('sel2');
if (s == 1)
{
var opt = new Option('蘋果', '蘋果');
newsel.options.add(opt);
opt = new Option('香蕉', '香蕉');
newsel.options.add(opt);
opt = new Option('柳橙', '柳橙');
newsel.options.add(opt);
}
else if (s == 2)
{
var opt = new Option('可樂', '可樂');
newsel.options.add(opt);
opt = new Option('汽水', '汽水');
newsel.options.add(opt);
opt = new Option('果汁', '果汁');
newsel.options.add(opt);
}
}
function allclear()
{
var i;
var newsel = document.getElementById('sel2');
for (i=newsel.options.length-1; i>=0; i--)
{
newsel.options.remove(i);
}

}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <select name="sel1" id="sel1" onchange="chg(this)">
        <option>請選擇</option>
        <option value="1">水果</option>
        <option value="2">飲料</option>
      </select>
    </label>
    <label>
      <select name="sel2" id="sel2">
      </select>
    </label>
  </p>
  <p>
    <input type="button" name="button" id="button" value="按鈕" onclick="allclear()"/>
  </p>
</form>
</body>
</html>

Result:




e.  checkbox 4
     Don't need to click the "OK" button once you have selected the checkbox.

CODE:ENG
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

<body>
<form id="form1" name="form1" method="get" action="">
  <p>
    <label>
      <select name="page" id="page" onchange="document.getElementById('form1').submit();">
        <option>Select page</option>
        <option value="1">Page 1</option>
        <option value="2">Page 2</option>
        <option value="3">Page 3</option>
        <option value="4">Page 4</option>            
      </select>
    </label>
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit" />
  </p>
</form>
</body>
</html>

CODE:CHT
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

<body>
<form id="form1" name="form1" method="get" action="">
  <p>
    <label>
      <select name="page" id="page" onchange="document.getElementById('form1').submit();">
        <option>選擇頁數</option>
        <option value="1">第1頁</option>
        <option value="2">第2頁</option>
        <option value="3">第3頁</option>
        <option value="4">第4頁</option>
      </select>
    </label>
  </p>
  <p>   
    <input type="submit" name="button" id="button" value="送出" />
  </p>
</form>
</body>
</html>

Result:

Review
So sometimes you can use the combination of checkbox 4 + checkbox 3 to be your website function or use other different combinations to be a possibility.


張貼者： 於

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)