三、JavaScript
1、介绍
1、客户端的一个脚本语言
2、JavaScript是一个弱类型的语言，类型由赋值来决定
3、交互性：信息动态交互
4、安全性：不能直接访问本地磁盘
5、跨平台性
2、内容
2.1、js和html使用方式
1、两者方式二选一
2、如果都有，则按照顺序依次执行
1、方式一
1、写在head标签中
<head>
<script type="text/javascript">
alert("hello JavaScript!")
</script>
</head>2、方式二
1、通过在script标签中使用src标签引入，其他的js文件
<head>
<script type="text/javascript" src="1.js">
</script>
</head>2.2、变量
1、内容
（1）、typeof()：是js语言提供的员工函数，返回变量的数据类型
2、关系运算符
1、等于：== 只比较字面数值
2、全等于：=== 比较字面数值和变量类型比较
3、大于、小于、大于等于、小于等于和java中一致
3、逻辑运算
1、且运算 ：&&
2.、或运算：||
3、取反运算：！
4、JavaScript语言中，所有变量都可以作为一个boolean作为运算
5、和Java不同的地方
2.3、数组
1、定义方式
1、数组内容元素可以为多个不同类型的
2、格式
var arr = [];
arr[2]="abc";
//数组遍历
for(var i=0;i<arr.length;i++){
alert(i)
}3、当赋值时，数组会根据长度自动给数组扩容
4、跳过下标输入，则内容会自动填充
2.4、函数
1、方式一
1、格式
2、方式二
1、格式
注意：JavaScript中的重载会直接覆盖之前的函数
3、函数的arguments隐形参数（只存在function函数内）
1、在function不需要定义，可以直接获取所有参数的变量，叫隐形参数。
2、隐形参数像java中的可变形参一样，是一个数组，操作也类似
2.5、JS中的自定义对象（扩展内容）
1、Object形式的自定义对象
1、内容
2、例子
<script type="text/javascript">
<!-- Object自定义对象-->
var obj = new Object();
obj.name="牛马";
obj.fun =function (){
alert("我的名字是："+this.name);
}
obj.fun();
</script>2、{}花括号形式的自定义对象
1、内容
2、例子
// 花括号定义对象
var obj1 = {
name:"牛马",
age:10,
fun:function (){
alert("我的名字是："+obj1.name+" 我今年 :"+obj1.age+"岁了");
}
};
obj1.fun();2.6、js中的事件
1、介绍
1、事件：电脑输入设备与页面进行交互的相应。
2、事件的注册
1、事件的注册：告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
2、静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码。
3、动态注册事件：先通过js代码得到标签的dom对象，再通过dom对象.事件名=function(){}这种形式赋于事件响应后的代码。
4、动态注册事件的步骤
3、常用的事件
1、内容
2、onload：浏览器解析完页面就会自动触发的事件
（1）例子
<script type="text/javascript">
function onloadFun(){
alert("静态注册onload事件，所有代码");
}
onloadFun();
// 静态写法
window.onload=function (){
alert("动态注册的onload事件")
}
</script>3、onclick：单击事件
（1）例子
<head>
<script type="text/javascript">
<!-- 这个是静态页面-->
function onclickFun() {
alert("这个是一个静态的页面")
}
<!-- 动态注册写-->
window.onload = function (){
// 1获取标签对象
// document是js语言提供的一个对象
var btnObj = document.getElementById("btn01");
// 通过标签对象，事件名=function()
btnObj.onclick = function (){
alert("我是按钮二号而且我是动态页面")
}
}
</script>
</head>
<body>
<!--静态注册-->
<button onclick="onclickFun();">按钮</button>
<!--动态注册写-->
<button id="btn01">按钮2</button>
</body>4、onblur：失去焦点事件
（1）例子
<script type="text/javascript">
<!-- 静态注册失去焦点事件-->
function onblurFun() {
// console：是控制台对象，js语言提供，向浏览器的控制台打印输出
console.log("静态注册失去焦点")
}
// 动态注册onblur事件
//获取标签对象
window.onblur=function (){
var passwordObj = document.getElementById("password");
// 通过标签对象.事件名=function(){}
passwordObj.onblur=function (){
console.log("动态注册失去焦点事件")
}
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun()"><br/>
密码：<input id = "password" type="text"><br/>
</body>5、onchange:内容发生改变事件
（1）、例子
<script type="text/javascript">
<!-- 静态注册事件-->
function onchangeFun() {
alert("女神已经改变了");
}
// 动态注册事件
window.onload = function () {
var onchangeObj = document.getElementById("selectChange");
onchangeObj.onchange=function () {
alert("男神已经改变了");
}
}
</script>
</head>
<body>
<!--静态注册事件-->
请选着你心中的女神:
<select onchange="onchangeFun();">
<option>女神经病</option>
<option>桃乃木</option>
<option>小兰</option>
<option>二娃</option>
<option>柯南</option>
</select>
<!--动态注册事件-->
请选着你心中的男神:
<select id="selectChange" >
<option>女神经病</option>
<option>桃乃木</option>
<option>小兰</option>
<option>二娃</option>
<option>柯南</option>
</select>
</body>6、onsubmit：表单提交事件
（1）例子
<script type="text/javascript">
<!-- 静态注册事件-->
function onsubmitFun(){
alert("静态注册表单提交事件———发现不合法");
return false;
}
window.onload=function () {
var onsubmit= document.getElementById("form1");
onsubmit.onsubmit=function () {
alert("这是一个动态注册页面");
return false;
}
}
</script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit=" return onsubmitFun()">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" method="get" id="form1">
<input type="submit" value="动态注册"/>
</form>
</body>2.7、DOM模型
1、介绍
1、DOM：全称Document Object Model文档对象模型
2、把文档中的标签、属性、文本，转化成为对象来管理
3、图示
2、对Document对象的理解
1、Document管理了所有的HTML的
2、document是一种树结构的文档，有层级关系
3、它让我们把所有的标签都对象化
4、我们通过document访问所有的标签对象
5、理解：用类去记录该标签的内容
3、Document对象中的方法
1、内容
2、getElementByName
（1）是返回一个数组
3、getElementByTagName
（1）是按照指定标签来进行查询并返回集合
（2）根据html页面从上到下
4、createElement和append套用创建一个html标签
（1）例子
4、正则表达式语法
5、查询方法及注意事项
6、节点的常用属性和方法
1、节点就是标签对象
2、方法
3、属性
