JavaScript的BOM程式設計，事件-第4章

達叔小生發表於2018-08-02
JavaScript程式設計事件

標題圖

目標

  • BOM程式設計
  • window和document物件
  • window物件的屬性和方法
  • document物件的屬性和方法

JavaScript中物件的分類

  1. 瀏覽器物件：window物件
  2. window物件，這個物件的屬性和方法通常被統稱為BOM（Browser Object Model，瀏覽器物件模型）

window.png

  • 常用的屬性
status 瀏覽器狀態列中顯示的臨時訊息 
screen 螢幕和顯示效能的資訊
history 訪問過的 URL 的資訊
location 當前 URL 的資訊
document 瀏覽器視窗中的HTML文件
  • 常用的方法
alert ("提示資訊")
confirm("提示資訊“)
close ( )
setTimeout()

document物件

getElementsByTagName()
getElementById()
getElementsByName()

事件

事件概念與分類

事件是發生在頁面上的動作。

  • 事件分類
  1. 頁面事件
  2. 鍵盤事件
  3. 滑鼠事件
  4. 表單事件

新增事件

  1. 靜態繫結
  2. 動態繫結

事件流

事件流:：指事件冒泡的過程

DOM實驗

原效果

原效果

插入效果


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>

<body>
    <table border="1" cellpadding="0" cellspacing="0" id="myTable">
           <tr>
               <td width="200px">Row1cell1</td>
               <td width="200px">Row1cell2</td>
           </tr>
           <tr>
               <td>Row2cell1</td>
               <td>Row2cell2</td>
           </tr>
           <tr>
               <td>Row3cell1</td>
               <td>Row3cell2</td>
           </tr>
    </table>
    <input type="button" value="插入新行" onclick="insert()">

    <script type="text/javascript">
    function insert(){
        var NewRow = document.getElementById("myTable").insertRow(0);
        var x = NewRow.insertCell(0);
        var y = NewRow.insertCell(1);
        x.innerHTML = "新行 Cell1";
        y.innerHTML = "新行 Cell2";
    }
    </script>
</body>
</html>

image.png

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>Examples</title> 
<meta name="description" content=""> 
<meta name="keywords" content=""> 
<link href="" rel="stylesheet"> 
</head> 
<body> 
<input type="button" value="刪除第一個圖片" onclick="del()"><br> 
<img src="[images/del_1.jpg](images/del_1.jpg)" id="first"> 
<img src="[images/del_2.jpg](images/del_2.jpg)"> 
<script type="text/javascript"> 
function del(){ 
var delNode = document.getElementById("first"); 
if (delNode) { 
document.body.removeChild(delNode); 
}; 
} 
</script> 
</body> 
</html>

圖片

圖片

圖片


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">

</head>
<style type="text/css">
    .title{
        background: gray;
        text-align: center;
    }
</style>

<body>
    <table border="1" cellpadding="0" cellspacing="0" id="myTable">
        <tr>
            <td width="200px">書名</td>
            <td width="200px">價格</td>
        </tr>
        <tr>
            <td>看得見風景的房間</td>
            <td align="center">￥30.00</td>
        </tr>
        <tr>
            <td>60個瞬間</td>
            <td align="center">￥32.00</td>
        </tr><br>
    </table>
    <input type="button" value="增加一行" onclick="addRow()">
    <input type="button" value="刪除第二行" onclick="delRow()">
    <input type="button" value="修改標題" onclick="updateRow()">

    <script type="text/javascript">
    function addRow(){
        var lengths = document.getElementById("myTable").rows.length;
        var index;
        if (lengths >= 2) {
            index = 2;
        }else{
            index = 1;
        }
        var newRow = document.getElementById("myTable").insertRow(index);
        var coll = newRow.insertCell(0);
        coll.innerHTML = "幸福從天而降";
        var col2 = newRow.insertCell(1);
        col2.innerHTML = "&yen;18.5";
        col2.align = "center";
    }
        
    
    function updateRow(){
        var uRow = document.getElementById("myTable").rows[0];
        uRow.className = "title";
    }
    function delRow(){
        document.getElementById("myTable").deleteRow(1);
    }
    </script>
</body>
</html>

圖片

圖片


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body >
    <div id="div1"></div>

    <form action="" name="form1">
        <input type="text" name="input1">
        <input type="button" value="stop" onclick="s()">
        <input type="button" value="start" onclick="ss()">
    </form>
    <script type="text/javascript">
    var time=null;
    function disp(){
        var date=new Date();
        var str=date.toLocaleString();
        document.form1.input1.value=str;
        
        var div1=document.getElementById("div1");
        div1.innerHTML=str;
    }

    function s(){
        window.clearInterval(time);
    }
    function ss(){
        time=window.setInterval("disp()",1000);
        
    }
    </script>

</body>
</html>

結語

送❤

相關文章