網頁動態表格(dynamic table)

 <html>  
 <head>  
 <script>  
 function insert()  
 {  
      var table=document.getElementById("myTable");  
      var text = document.createTextNode('test');  
      var row = table.insertRow();  
      var column1 = row.insertCell(0);  
      var column2 = row.insertCell(1);  
      column1.appendChild(text);  
      column2.innerText = "column2";  
 }  
 function del()  
 {  
      var table=document.getElementById("myTable");  
      table.deleteRow();  
 }  
 </script>  
 </head>  
 <body>  
 <table id="myTable" border="1">  
  <tr>  
   <td>1</td>  
   <td>book</td>  
  </tr>  
 </table>  
 <br>  
 <button type="button" onclick="insert()">Insert</button>  
 <button type="button" onclick="del()">Delete</button>  
 </body>  
 </html>  

網頁動態選單製作

利用css的display屬性, 達成動態隱藏或展示選單的效果

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

 <html>  
 <head>  
 <style>  
 #child {  
      display: none;  
 }  
 </style>  
 <script type="text/javascript">  
      function changeChildStatus() {  
           var childUl = document.getElementById('child');  
           if(childUl.style.display == 'block'){  
                childUl.style.display = 'none'  
           }else{  
                childUl.style.display = 'block'  
           }  
      }  
 </script>  
 </head>  
 <body>  
      <ul id="parent">  
           <li>child:  
                <ul id="child">  
                     <li>apple</li>  
                     <li>kiwi</li>  
                </ul>  
           </li>  
           <li>banana</li>  
           <li>tomato</li>  
      </ul>  
      <button type="button" onclick="changeChildStatus()">hide/show child</button>  
 </body>  
 </html>  

用JQuery 或是 DOM 建立element

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<script src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">

function addOption(){
    
    var myComboBox = document.getElementById("myComboBox");
    var myOption = document.createElement("option"); 
    myOption.innerHTML = " Hello ";
    myComboBox.appendChild(myOption);
    
}

function addOptionByJq(){
    var myOption = document.createElement("option"); 
    myOption.innerHTML = " Hello by JQ ";
    $("#myComboBox").append(myOption)
    
    
}

</script>



<select id="myComboBox"></select>

<br>

<button onclick="addOption()">add a new option by dom manipulation</button>

<br>

<button onclick="addOptionByJq()"> add a new option by Jquery</button>

</body>
</html>

ReferenceJQuery append

Div and span introduction (介紹Div 和 span )

Div : 常常被使用在把一整個group的元件(elements), 套用到同一個css .:
Span: 則是使用在內部小部分元件上, 套用個別的css, 以下的例子結合div和span使用的方式 Reference :w3schools

ArrayList 用法

import java.util.ArrayList;
import java.util.List;

public class CollectionsDemo {

    public static void main(String[] args) {
        List list = CollectionsDemo.getStudentList();
        for (int i = 0; i < list.size(); i++) {
            System.out.println(((Student) list.get(i)).getID());
        }
    }

    private static List getStudentList() {
        List list = new ArrayList();
        list.add(new Student(1));
        list.add(new Student(2));
        return list;
    }

}

class Student {
    int id;

    Student(int id) {
        this.id = id;
    }

    public int getID() {
        return this.id;
    }
}

Javascript version, You can use array.pop() to remove elements.

 <html>  
 <head>  
 <script language = "javascript">  
 var array = [];  
 array.push(1);  
 array.push(1);  
 array.push(1);  
 </script>  
 </head>  
 <body>  
      <script language = "javascript">  
           alert(array.length);  
      </script>  
 </body>  
 </html>  

行程安排應用程式

Html input tag usage(Html input標籤的使用方式)

input元件可以使用在form標籤裡面, 用來宣告允許使用者輸入資料的方法.

以下列出一些常用的input type的輔助attributes 的用法:

input type可以為
button,
checkbox,
hidden(一個隱藏的input 欄位),
password(密碼欄位,在此欄位的文字都會被mask起來.),
radio,
reset(所有表單欄位內的資料,會被設回預設值.),
submit(把欄位內的資料傳送到server),
text(一個可以給使用者輸入文字的欄位,預設可輸入20個字)



參考自W3C網站

Create JavaScript Object(創建JavaScript 物件)

建立一個Student class, 擁有name這個property,以及getName這個方法.


然後依據Student這個class,實體化出一個Student物件.


在這裡要注意到的地方是, 因為Student有預設的Constructor(建構子),需要丟入一個參數


做為name這個屬性的值,否則的話會列印出undefined.




下面是另一個創立物件,物件的屬性和方法的寫法:



第三個創立物件,物件的屬性和方法的寫法: