Java学习笔记之JS

什么是JS？

JavaScript。是web开发中不可缺少的脚本语言，不需要编译就能运行（解释型语言）。它“寄生”在html体内，随网络传输到客户端，在浏览器里运行。

JS的作用

前端开发：
HTML：负责页面的显示
CSS: 负责显示的效果
JS： 让页面跟用户交互
和用户交互，实现页面的动态效果
- 操作浏览器：用户做某些操作，让js操作浏览器 前进一步，退后一步，弹窗，刷新页面等
- 操作网页： 用户做某些操作，让js操作网页，操作网页样式，操作标签内容，操作属性

js的组成

网景 NetScape  网景浏览器  火狐浏览器   LiveScript  Microsoft JScript IE   ECMA  ECMAScript

• ECMAScript：规定了js的基本语法规范
• BOM：Browser Object Model，浏览器对象模型。js可以调用BOM对象，来操作浏览器
• DOM：Document Object Model，文档对象模型。js可以调用DOM对象，来操作网页

在HTML中引入JS
内部引入：

<script>
	alert();
</script>

外部引入：

<script src="js的路径"></script>

1.基本语法

变量定义

• js里一切变量定义都是：var
• js是弱类型语言：声明变量时，不需要声明类型。
• js是动态类型语言：一个变量的类型是可变的

数据类型

• number：数字类型
• boolean：布尔类型
• string：字符串类型
• object：对象类型，null值也是属于object类型
• undefined：未定义类型

运算符说明：
== 和 ===
==： 比较值
===： 比较值和类型

-*/`：

• 如果是数字，正常运算
• 如果不是数字，js会尝试转换成数字再运算
• 如果转换不成功，结果是NaN
• 如果除数是0，结果是Infinity

流程控制语句

• js也有：if, else, else if, while, switch, for
• 特殊的是：if判断时，false, 0, "", null, undefined是false，其它是true

2.函数

普通函数

//1.定义一个普通函数
function 函数名(形参1, 形参2, ...){
    //函数体
    //如果需要返回值，就return；否则就不return
}
//2.调用 一个普通函数
var result = 函数名(实参1，实参2, ...);

匿名函数

//1. 把匿名函数赋值给一个变量，通过变量名调用匿名函数
var fn = function(a, b){
    return a+b;
}
var result = fn(1, 2);

//2. 把匿名函数作为另外一个函数的实参
setInterval(function(){
    alert();
},  2000);

//以下是不太常用的写法
var fn = function(){
        alert();
    };
setInterval(fn, 2000);
setInterval("fn()", 2000);

注意事项：

• js的函数没有重载： 同名函数只有最后一个生效
• 形参个数和实参个数无关： 在函数里可以使用arguments来得到所有的实参数组

3.事件

事件的概念

• 事件源：被监听的对象（哪个对象上发生的动作或者状态变化），通常是html标签
• 事件(监听器)：用于监听事件源状态变化的组件，由js提供的不同的事件（监听器），用于监听不同的状态变化
• 响应行为：监听到事件源状态变化、或者发生了动作，要执行的代码，我们自己编写

常见的事件

事件(监听器)	描述，监听什么
onclick	监听鼠标监听
ondbclick	监听鼠标双击
onsubmit	监听表单提交了，事物源是表单
onchange	监听域内容改变，通常用于监听下拉框的选项变化
onload	监听加载完成，通常用于监听浏览器加载完了页面
onfocus	监听获取焦点（光标）
onblur	监听失去焦点（光标）
onkeydown	监听键盘按键按下
onkeyup	监听键盘按键弹起
onkeypress	监听键盘按键按下或按住
onmousedown	监听鼠标按键按下
onmouseup	监听鼠标按键弹起
onmouseover	监听鼠标移入
onmouseout	监听鼠标移出
onmousemove	监听鼠标移动

三.bom对象

1.bom对象介绍

• BOM：Browser Object Model，浏览器对象模型，这些对象提供了操作浏览器的方法
• 目的：让js代码调用bom对象的方法，来操作浏览器
• 有哪些bom对象：
  • window：浏览器窗口对象，是其它bom对象的顶级对象
  • location：浏览器地址对象，可以实现网页跳转。window.location，可以简写成location
  • history：浏览器历史记录对象，可以实现历史记录切换。window.history
  • screen：浏览器的屏幕显示信息对象，可以操作浏览器窗口大小、位置、颜色等信息 window.screen
  • navigator：浏览器信息对象，只读的。可以获取浏览器的内核、版本、操作系统等信息 window.navigator

2.window对象
让浏览器弹窗

方法	参数	返回值	说明
aleert(String)	提示信息内容	无	普通弹窗
confirm(String)	提示信息内容	boolean	确认弹窗
prompt(string)	提是信息内容	string/null	输出弹窗

让浏览器开启定时器

方法	参数	返回值	说明
setInterval(fn,ms)	fn：函数对象 ms:间隔毫秒值	number:定时器的id	开启执行多次的定时器
clearInterval(id)	id:定时器的Id		清除定时器
setTimeOut(fn,ms)	fn:函数对象 ms:延迟毫秒值	number:定时器的id	开启执行一次的定时器
clearTimeOut	id:定时器的id		清除定时器

• 执行多次的定时器

//开启
var id = setInterval(function(){}, 2000);
//清除
clearInterval(id);

执行一次的定时器

//开启
var id = setTimeout(function(){}, 2000);
//清除
clearTimeout(id);

3.location对象
herf: 获取/设置网址
reload(): 刷新当前页面

4.history对象
forward(): 前进一步
back(): 后退一步
go(n): n，整数，切换n步

四.dom对象

dom

• dom：Document Object Model，文档对象模型，dom对象提供了操作网页的方法
• 作用：操作网页的

dom树

网页被加载到内存中后，网页上所有的标签、属性、文本全部都会转换成节点对象，然后按照层级结构形成一个树形结构，这棵树叫dom树

2.使用dom获取标签

方法	说明	参数	返回值
getElementsById	根据id获取对象	标签的id	Element
getElementsByName	根据标签name获取对象	标签的name	Element(类)数组
getElementByTagName	根据标签名称获取对象	标签名称	Element(类)数组
getElementsByClassName	根据标签class获取标签对象	标签的clas	Element(类)数组

创建标签
document对象提供了创建标签的方法
注意：创建的标签不会立即生效，需要插入到 dom树中
创建标签:createElement(“标签名称”)
插入标签：appendChild(element) ： 指定要插入的标签element
删除标签: remove()

小结：

• 能够获取到标签对象
  • document.getElementById()
  • document.getElementsByName()
  • document.getElementsByTagName()
  • document.getElementsByClassName()
• 能够创建标签、插入标签、删除标签
  • 创建：document.createElement("标签名称")。创建出来的标签不会生效，必须要插入到dom树里
  • 插入：父标签对象.appendChild(子标签对象)
  • 删除：标签对象.remove()
• 能够获取和设置标签体内容
  • 获取标签体内容：var inner = 标签对象.innerHTML
  • 设置标签体内容：标签对象.innerHTML = "新的标签体内容"
    • 是覆盖式设置
    • 如果设置了html代码，代码会生效
      3.使用dom操作属性

方法	说明	参数	返回值
getAttribute(attriName)	获取属性值	属性名称	属性值
setAttribute(attriName,attrValue)	设置属性值	属性名称，属性值
removeAttribute(attriName)	删除属性	属性名称

4.正则表达式
创建正则表达式对象

var reg1 = /正则表达式/;   //直接量方式
var reg2 = new RegExp("正则表达式"); //对象形式

使用正则表达式校验字符串格式

方法	描述	FF	IE
compile	编译正则表达式	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置	1	4
test	检索字符串中指定的值。返回 true 或 false	1	4

js里正则表达式的语法
方括号： 用于匹配一个字符

元字符：用于简化某些[] 的写法

量词：