JavaScript
特性
- 脚本语言(运行过程中逐行解释)
- 基于对象(可创建、使用对象)
- 简单(数据类型没有严格要求)
- 动态性(不需要经过web服务器就可以对用户输入做出响应)
- 跨平台性
编写位置
1.写在html中<script>
标签中
2.写在外部的.js文件中,然后通过script标签引入
JavaScript的事件驱动
1.用户事件:用户操作,例如单击、鼠标移入、鼠标移出等
2.系统事件:由系统触发的事件,例如文档加载完成
常用的事件
onload
onclick
onblur
onfocus
onmouseover
onmouseout
BOM
Borwser Object Model浏览器对象模型
浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Windows对象是BOM的顶层对象,其他对象都是该对象的子对象
常用的对象(window的子对象)
document history location screen navigator farmes
DOM
Document Object Model 文档对象模型
document对象:window对象的一个属性,代表当前HTML文档,包含了整个文档的树形结构,获取documen对象的本质方法是:window.document。
元素查询
根据id值查询
document.getElementById(“id值”) 返回一个具体元素节点
document.getElementsByTagName(“标签名”) 返回元素节点数组
document.getElementsByName(“name值”) 元素节点数组
例如:
需求 :按下button按钮后,会出现字符
<%--
Created by IntelliJ IDEA.
User: dell
Date: 2020/10/9
Time: 13:29
To change this template use File | Settings | File Templates.
--%>
<%--需求 :按下button按钮后,会出现字符--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript">
// 当整个文档都加载完之后再执行函数中内容
window.onload = function () {
//1.获取按钮对象
var sayHello = document.getElementById("sayHello");
// alert(sayHello);
// 2.给按钮绑定单击事件
sayHello.onclick = function () {
// 弹出提示框
alert("Hello JavaScript");
}
}
</script>
</head>
<body>
<button id="sayHello">Say Hello</button>
</body>
</html>
这种方式则是通过JQurey方式,效果相同
<%--
Created by IntelliJ IDEA.
User: dell
Date: 2020/10/9
Time: 13:58
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JQuery</title>
<%-- 导库后不能再在这个标签中写东西--%>
<script type="text/javascript" src="jqurey/jquery-1.7.2(1).js"></script>
<script type="text/javascript">
// 相当于window.onload = function(){};
$(function () {
// 获取按钮对象并绑定事件
$("#sayHello").click(function () {
// 弹出
alert("hello javaScript");
})
})
</script>
</head>
<body>
<button id="sayHello">say Hello</button>
</body>
</html>