目標 BOM編程 window和document對象 window對象的屬性和方法 document對象的屬性和方法 JavaScript中對象的分類 1. 瀏覽器對象：window對象 2. window對象，這個對象的屬性和方法通常被統稱為BOM（Browser Object Model，瀏覽器 ...
目標
- BOM編程
- window和document對象
- window對象的屬性和方法
- document對象的屬性和方法
JavaScript中對象的分類
- 瀏覽器對象：window對象
- window對象，這個對象的屬性和方法通常被統稱為BOM（Browser Object Model，瀏覽器對象模型）
- 常用的屬性
status 瀏覽器狀態欄中顯示的臨時消息
screen 屏幕和顯示性能的信息
history 訪問過的 URL 的信息
location 當前 URL 的信息
document 瀏覽器視窗中的HTML文檔- 常用的方法
alert ("提示信息")
confirm("提示信息“)
close ( )
setTimeout() document對象
getElementsByTagName()
getElementById()
getElementsByName()事件
事件概念與分類
事件是發生在頁面上的動作。
- 事件分類
- 頁面事件
- 鍵盤事件
- 滑鼠事件
- 表單事件
添加事件
- 靜態綁定
- 動態綁定
事件流
事件流:：指事件冒泡的過程
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>
<!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 = "¥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>
