一、html的代码和js的代码如何联系起来？？
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数
html元素--->用户操作元素（鼠标单击/键盘输入）--->html触发事件--->JS去监听事件--->执行JS代码
二、事件的基本用法
在html中触发事件然后去执行js代码的两种方式
第一种方式
<input type="button" value="普通按钮" onclick="alert('click')"/> -->onclick 鼠标点击某个对象
第二种方式
<script>
function method1(){
alert("click");
}
</script>
<input type="button" value="普通按钮" onclick="method1()"/>
三、html支持哪些事件？？
常用事件（重点）
3.1 onblur 元素失去焦点(163的邮箱，(输入邮箱)输入框获取焦点，点击其它地方，提示用户：“长度应为6-16位字符”)
<input type="text" onblur="method2()"/>
<script>
function method2(){
alert("输入框失去了焦点");
}
</script>
3.2 onchange 用户改变域的内容 (),元素内容发生了变化之后触发的事件
<input type="text" onchange="method3()"/>
<script>
function method3(){
alert("元素的内容发生了变化");
}
</script>
在输入内容时不会触发事件，并不会在输入内容时就触发事件，onchange一般不用在搜索框中
它一般用于下拉列表框中，当下拉列表的值发生改变了，就会触发事件
<select onchange="method3()">
<option>湖南</option>
<option>北京</option>
<option>天津</option>
</select>
3.3 onclick 鼠标点击某个对象 某个元素被点击之后再触发的事件
3.4 ondblclick 鼠标双击某个对象 某个元素被双击之后再触发的事件
3.5 onfocus 元素获得焦点(用的不多) 和 onblur 元素失去焦点是一对的
<input type="text" onfocus ="method4()"/>
<script>
function method4(){
alert("输入框获取了焦点");
}
</script>
3.6 键盘相关事件：onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开
3.7 onload 某个页面或图像被完成加载
<img src="图片的路径" onload="method5()"/>
<script>
function method5(){
alert("元素被完全加载");
}
</script>
3.8 onsubmit 表单被提交之后触发事件
<form action="demo1.html" onsubmit="method6()">
<input type="submit" value="提交表单"/>
</form>
<script>
function method6(){
alert("表单被提交");
}
</script>
JavaScript=ECMAScript(标准)+(BOM+DOM)(JS自己特有的东西，每一种脚本语言对BOM和DOM的支持都不一样)
四、BOM(浏览器对象模型 BrowserObjectModel)
4.1 BOM(浏览器对象模型 BrowserObjectModel)
BOM提供了可以与浏览器窗口进行互动的对象结构，将整个的浏览器的窗口封装成对象
然后在对象里面又包含了很多的对象（历史对象，网址对象，网页内容对象）
在js里面通过对象去操作组件
4.2 Window对象（最顶级的对象,当前网页的窗口，下面的对象都可以通过Window对象获取）
属性：
innerheight 返回窗口的文档显示区的高度。（内部body的宽和高）
innerwidth 返回窗口的文档显示区的宽度。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。 （整个页面的宽和高）
方法：
1.1 弹出框相关的方法
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
1.2 弹出框实例代码：
<input type="button" value="确定取消框" onclick="method1()"/>
<script>
function method1(){
confirm("显示的消息！！"); <!--会有一个返回值true/false-->
}
</script>
2.1 页面滚动的方法
2.2 scrollTo() 把内容滚动到指定的坐标。
<input type="button" value="置顶" onclick="method2()"/>
<script>
function method2(){
windows.scrollTo(0,0) <!--从最底部滚动到最顶部-->
}
</script>
2.3 scrollBy() 按照指定的像素值来滚动内容。
<input type="button" value="滚动指定像素" onclick="method3()"/>
<script>
function method3(){
windows.scrollBy(0,-200) <!--往上滚动了两百个像素-->
}
</script>
3.1 定时任务相关的方法：
3.2 setTimeout() 在指定的毫秒数后调用函数或计算表达式。
<input type="button" value="设置定时任务" onclick="method4()"/>
<script>
function method4(){
<!--此定时任务只会执行一次-->
var task_id = windows.setTimeout(task,3000);
var task_id = windows.setTimeout("task()",3000);
var task_id = windows.setTimeout(function (){alert("展示广告");},3000);
<!--清除定时任务-->
windows.clearTimeout(task_id)
}
function task(){
alert("展示广告");
}
</script>
3.3 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
<input type="button" value="设置定时任务" onclick="method5()"/>
<script>
<!--抽取成成员变量-->
var task_id;
function method5(){
task_id = windows.Interval()(function (){alert("展示广告");},3000);
<!--清除定时任务-->
windows.clearInterval(task_id);
}
</script>
实例：
<script>
<!--window对象的属性,获取其它的对象-->
window.navigator;
window,screen;
window.location;
...
<!--通过它获取的东西（属性和方法）都可以省略window-->
navigator;
screen;
location;
</script>
4.3 Navigator对象（浏览器对象）
属性：
appCodeName 返回浏览器的代码名。
appMinorVersion 返回浏览器的次级版本。
appName 返回浏览器的名称。 navigator.appName;-->"Netscape"
appVersion 返回浏览器的平台和版本信息。
browserLanguage 返回当前浏览器的语言。
4.4 Screen对象（屏幕对象）
属性：
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
pixelDepth 返回显示屏幕的颜色分辨率（比特每像素）。
4.5 History对象（<-- -->当前窗口的历史记录）
属性：
length 返回浏览器历史列表中的 URL 数量。
方法：
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。
4.6 Location对象（浏览器地址栏对象）
属性：
href 设置或返回完整的 URL。 location.href;-->"https://www.baidu.com/"
通过location的href属性进行页面的跳转
location.href="https://www.baidu.com"
协议 主机（IP） 端口号 URI ? 请求参数/查询参数（提交的数据）
protocol 设置或返回当前 URL 的协议。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
port 设置或返回当前 URL 的端口号。
pathname 设置或返回当前 URL 的路径部分。（URI）
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
方法：
刷新-->重新发送了一次请求（浏览器地址栏路径的请求），重新请求页面
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。
五、DOM(文档对象模型 DocumentObjectModel)
5.1 什么是DOM??
通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
5.2 DOM分类
Core DOM （核心DOM）
定义了一套标准的针对任何结构化文档的对象
XML DOM （XMLDOM）
定义了一套标准的针对 XML 文档的对象
HTML DOM （HTMLDOM）
定义了一套标准的针对 HTML 文档的对象。
5.3 文档对象模型图解
5.4 DOM对象--参考DOM树
1. Document 表示整个文档（DOM 树的根节点）
2. Element 表示 element（元素）元素
3. Attr 表示属性。
4. Text 表示元素或属性中的文本内容。
5. Comment 表示注释。
5.5 Document对象的部分方法
createAttribute(name) 创建拥有指定名称的属性节点，并返回新的 Attr 对象。
createElement() 创建元素节点。
getElementById() 查找具有指定的唯一 ID 的元素。
createTextNode() 创建文本节点。
5.6 Element对象的部分方法
getAttribute() 返回属性的值。
hasAttribute() 返回元素是否拥有指定的属性。
hasChildNodes() 返回元素是否拥有子节点。
removeAttribute() 删除指定的属性。
removeAttributeNode() 删除指定的属性节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
setAttribute() 添加新属性。
5.7 Attr对象的部分属性
name 返回属性的名称
ownerDocument 返回属性所属的根元素（document对象）。
textContent 设置或返回属性的文本内容。
value 设置或返回属性的值。
5.8 Text对象的部分属性和方法
data 设置或返回元素或属性的文本 6 1 9 Yes
length 返回元素或属性的文本长度
appendData() 向节点追加数据
deleteData() 从节点删除数据
insertData() 向节点中插入数据
replaceData() 替换节点中的数据
replaceWholeText() 使用指定文本来替换此节点以及所有相邻的文本节点
splitText() 把一个 Text 节点分割成两个
substringData() 从节点提取数据
5.9 举例说明DOM的用途和用法
创建一个js标签，在标签中创建一个函数，在函数中应用DOM中的一些对象属性和方法，给表格动态添加一行数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addRow() {
var tab_element = document.getElementById("tableID");
var tr_element = document.createElement("tr");
var td_element1 = document.createElement("td");
var td_element2 = document.createElement("td");
var td_element3 = document.createElement("td");
var text_node1 = document.createTextNode("1")
var text_node2 = document.createTextNode("zs")
var text_node3 = document.createTextNode("23")
td_element1.appendChild(text_node1);
td_element2.appendChild(text_node2);
td_element3.appendChild(text_node3)
tr_element.appendChild(td_element1)
tr_element.appendChild(td_element2)
tr_element.appendChild(td_element3)
tr_element.setAttribute("bgcolor","red");
tab_element.appendChild(tr_element);
}
</script>
</head>
<body>
<button onclick="addRow()">向表格中添加一行</button><br>
<table border="1px" width="500px" id="tableID">
<tr bgcolor="red">
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</table>
</body>
</html>
结果演示：
点击向表格中一行的按钮，这时在这个界面就会增加一行表格数据
继续添加，就会继续增加一行表格数据
