JavaEE-5-JavaScript&DOM
引言
JavaScript是一门嵌入式编程语言,主要是用于开发交互式的html页面（比如轮播图、定时弹广告、注册检测等），它是嵌入到html中，而且这个语言不需要编译,直接用浏览器就可以运行。
我们学习一门新的编程语言：
常量/变量
数据类型
if,switch
循环for,while
函数
事件
事件和函数绑定
js中的分类:
ECMAScript：js的核心语法
BOM:浏览器对象（代表整个浏览器）
DOM:Document Object Model.浏览器中的元素和内容
1、引入JavaScript的两种方法
-
内嵌式:
必须在一个标签<script>的开始和结束标签之间写
<script type="text/javascript">
写js代码
</script>
JS代码写在<head>标签中
-
外联式:
写在另外一个文件,但是文件的后缀必须为.js
在HTML中通过<script>标签引入刚刚写的js文件
假设我们已经写了一个aa.js的外部js文件
<script type="text/javascript" src="外部js的路径" charset="utf-8">
//不能再次写代码
</script>
2、JavaScript基本语法
变量的命名规则：和java基本类似
变量的声明：
-
在java中: 数据类型 变量名; int a;
-
在JavaScript中:
var 变量; //注意: 在js中变量如果没有赋值 默认值 undefined赋值: a.定义变量同时赋值 var a = 10; b.先定义后赋值: var a; a=10;a="abc";
数据类型（弱类型语言：赋什么值，这个变量它就是什么类型）:
基本类型:
a.Undefined 只有一个值 undefined,当定义变量并且不赋值的时候,默认值就是undefined
b.Null 只有一个值 null,空值,但是在ECMAScript中把他们定义成了相等
c.Boolean，有两个值 true 和 false
d.Number，表示任意数字 1 10000000000 3.13 3.13456732345678 J
e.string,表示字符串,在js中字符串必须用""或者''引起来
引用类型:
也是一种叫做类(class),但是我们一般不会自己创建对象,而是直接使用
JS已经给我们准备好的对象,
所以说JS是基于对象,而不是面向对象
这里的输出就是这个age变量的引用类型
3、运算符:
- 算术运算符和逻辑运算符（与&&或||非!）：和java一模一样
- 比较运算符:
"=="：称为值等,只比较两个数据的值,不考虑类型 比如
var a = "10"
a==10 //输出值为true，因为值一样
"==="：称为全等，即比较类型 也比较数值, 比如
var a = "10"
a===10 //这是false,因为类型不一样
4、把其他类型的变量转换成Boolean类型
可以把其他其他类型的变量转换成Boolean类型的值，对应的转换关系如下：
转换规则
-
Tip：Boolean类型如果参与运算,那么true转成1，false 转成0，然后参与运算
等性运算
- Tip：上面NaN==NaN，输出是false，原因是NaN代表“不是一个数字”，双等于号比的是里面的值，这个NaN可能指的是‘A’也可能是'B'，所以显然不一定相等
5、JavaScript基本操作:
alert(内容/变量); //以消息提示框的形式弹出内容或者变量的值- JavaScript中的函数:
function 函数名(参数列表){
函数体;
}
- 调用的格式:
函数名(实际参数);
函数也是写在<script>
Tips：
- 参数列表中，只需要写参数名，如果多个参数用逗号相隔
- 函数和java中的方法一样,不调用不运行
- 函数调用的时候,可以传递任意个实际参数，如果实际参数的个数小于形式参数个数 那么多出来的形式参数默认值为undefined，如果实际参数的个数大于形式参数个数 那么自动忽略多余的实际参数
- JavaScript中没有重载这个概念，如果函数名一样，后面定义的函数会覆盖前面定义的函数，也就说在前面定义的函数相当于没写
本文内容：
`#点击事件
·#控制表单提交
·#正则表达式使用
·#定时器
·#修改CSS样式
1、绑定点击事件
当用户点击"submit"按钮时 会发生"表单提交事件"
如何绑定？
案例
注意这里
onsubmit绑定的就是一个JavaScript的函数，而这个点击监听器是包含在<form>标签中的属性。同时，我们发现绑定点击事件不是绑定在
<form>的子标签上，而是直接绑定在<form>标签上！！！这个点击事件应该是自动寻找子标签中type="submit"的元素，然后自动绑定的。
Tip：JavaScript中如果某一个代码写错了，是没有错误提示的！！！所以最好是写一个小功能就立马进行测试。
2、返回值控制
显然这里的是一个发生在表单<form>中的点击事件，虽然这里绑定了点击事件，但是实际上只要点击这个
image.png
注意绑定点击事件的时候是
onsubmit="return tijiao()"，这里是返回tijiao()这个函数的返回值。同时我们在
function tijiao()中return true;这个自然就是反映到onsubmit="return tijiao()"中就是onsubmit="true"，此时的效果是什么？
效果是该表单被成功提交！！！
如果是onsubmit="false"，那么此时的效果是什么？
效果是该表单没有被提交！！！
3、获取到<form>表单中的子标签的对象
相当于Android中的findViewById，这个代码是：
var inputElement = document.getElementById("uname");
var username = inputElement.value; //对获取到的元素对象进行下一步操作
4、JavaScript正则表达式使用
有如下几种正则表达式使用方法
-
var b = "需要判断规则的字符串".matches(/^正则表达式$/);
如果b是true 满足规则 如果b是false 不满足规则 -
/^正则表达式$/.test("需要判断规则的字符串");[推荐]
5、定时器
引言
window对象是BOM中的内置对象,这个对象又称为全局对象，是用于在html页面中弹出一个对话框的效果
window.setInterval(code,millisec);
//这个代码的含义就是循环执行这个code，间隔时间是自己设置的millisec的时间
code:代码段，可以是：
a. "正常js代码"
b. 函数名
millisec:时间间隔,单位是毫秒
这段代码的意思：设置一个定时器,这个定时器每隔millisec毫秒会触发一次,每次都会执行code代码段（window对象可以不写,直接调用setInterval方法也可以,但是不建议不写）
定时器
setInterval和setTimeout：
- 设置定时器：
setInterval(code,毫秒值);//周期定时器,反复周期执行，调用这个方法会返回一个id值，这个id用于取消定时器用
setTimeout(code,毫秒值);//一次性定时器,只会执行一次，调用这个方法会返回这个定时器的id值，这个id用于取消定时器用 - 取消定时器：
clearInterval(你要取消的定时器的id);//取消周期定时器
clearTimeout(你要取消的定时器的id);//取消一次写定时器
6、修改一个<>标签的样式属性值
注意是样式属性值（即是用CSS写在<style>中那部分属性值），这部分属性值修改方法如下：
obj.style.属性 //获得指定“属性”的值
obj.style.属性=值 //给指定“属性”设置内容
- Tip1：如果是用HTML写的属性值，直接
obj.属性=···即可 -
Tip2：很多样式的值是string类型的，不是Number类型的！！
代码示例1
代码示例2
注意这里，window.onload代表的就是整个页面加载完成之后的监听器。这里的代码综合运用了5、6两个小节的内容。
但是这里你会发现最终的效果是无法让div扩大四倍的！！！！！！
为什么？因为这里var h和var w得到的是string类型的（即“100px”）！！！所以我们需要先进行类型转换：
类型转换
然后后面赋值的时候也要进行改变：
加"px"字样
这样就可以了
7、关于表单标签的内容和事件触发
获取HTML某个标签的内容
- 标签对象
···.innerHTML获取到该标签的内容，开始标签和结束标签之间的都是内容
使用innerHTML更改标签内容
注意里面甚至可以直接写<h1>这种标签，JavaScript会自动对这个进行解析
有关事件的触发事件:
- onsubmit：提交按钮点击后 触发的表单提交事件
- onblur：失去焦点事件,本来鼠标是选择该标签的，然后选中了别的标签的时候
-
onfocus：获取焦点事件,本来鼠标是选择别的标签，然后选中了该标签
function部分
<body>中标签部分代码
8、何为BOM（浏览器对象）？
BOM是浏览器对象，可以认为是你打开浏览器的时候，里面的大的那种范围的元素，里面分为：
window对象，全局函数，之前讲过的有
setInterval，setTimeout，onload方法，除此之外，还有：
alert(); //提示信息弹出框-
confirm()://提示信息框(具有确定和取消按钮)
当你点击确定时返回true，当你点击取消时返回false -
prompt()://可以输入信息的提示框(具有确定和取消按钮)
当你点击确定时，返回您输入的信息，当你点击返回时，返回null
navigator: 导航（做浏览器开发的经常用）
screen:屏幕对象
history:浏览记录对象
这个就是管理我们浏览页面的时候的“前进”、“后退”的那个
示例
location:当前浏览的网页地址
下面讲DOM:
1、JavaScript响应事件&修改便签中内容
JavaScript中的一些事件：
-
onload：页面加载完毕事件
window.onload = function(){};
<body onload="init()">
-
onmouseover：鼠标移入事件 -
onmouseout：鼠标移出事件
- Tip：
标签对象.innerHTML = "内容";//修改标签中内容(内容可以是标签,也可以是文本,也可以是混合体)
2、在表单<form>上绑定JavaScript事件
- 方法一：
<input type="text" 事件名="函数1();函数2()"> //这里会依次触发函数1,函数2 - 方法二：
var input对象 = document.getElementById("对应的id");
input对象.事件名 = 函数1;
input对象.事件名 = 函数2; //只会触发函数2
只会触发函数2！！！！
使用方法二绑定：
示例
如上是两种绑定方法，示例图片中用的是第二种。同时，还用到了##1中的onmouseover监听器，绑定了当onmouseover监听器被触发就执行over()事件。但是这里注意是over，而且只会执行第二个out()
使用方法一绑定
示例代码1
示例代码2
注意这里相当于是在便签对象中对这个监听器进行绑定
附录：关于注释
- HTML的注释标签：
<!-- -->
- CSS的注释标签：
/* */
- JS的注释标签：
/* */ 注释代码块
// 注释单行
