js(1) - BOM操作-buukle

1. js的定义及技术背景

javascript简称js，是目前web开发中不可缺少的脚本语言，js不需要编译即可运行（js的运行环境：浏览器内核中---浏览器内置js解析器---存在兼容性问题），“寄生”在html体内随网络传输到客户端的浏览器的内存中解析。
js是基于对象和事件驱动的脚本语言。

1.1 js的作用

js可以动态的修改html及css的代码（修改的是浏览器内存中的那一份代码）,对表单进行校验等

1.2 js的组成

1.2.1 ECMAScript

js的基本语法

1.2.2 BOM：Brower Object Model

浏览器对象模型，主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等

1.2.3 DOM：Document Object Model

文档对象模型，此处的文档暂且理解为html,html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后页面

1.3 js的引入方式

1.3.1 内部js：也就是在html源码中嵌入js代码，语法格式如下：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		//这里写js代码的逻辑部分
		</script>
	</head>

1.3.2 外部js：也就是将js代码单独写成一个js文件(扩展名是.js而不是.javascript),在 html代码中引入这个封装好的js文件，语法格式如下：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../xxx.js"></script>
	</head>

原则就是：在不影响页面功能的情况下js越晚加载越好.

2. js的基本语法

2.1 js变量定义遵循非严谨的数据类型, var 即可做变量声明的关键字;

2.2 js的数据类型

跟java一样，js的数据类型分为基本数据类型(原始数据类型)和引用数据类型

2.2.1 原始/基本数据类型：

数字类型：number
布尔类型：boolean
字符串类型：string
未定义类型：undefined
空类型：null

重要的转换：
数字字符串转数字
parseInt
parseFloat

2.2.2 引用数据类型：

与java一样，js中的对象都是引用数据类型，所以你也可以使用我们熟知new 来“造对象”
例如：
造一个上帝对象：var obj = new Object();
造一个字符串对象：var str = new String();
造一个日期对象：var date = new Date();

2.2.3 js的运算符

1）赋值运算符 var x = 5；
2）比较运算符大于,小于, 连等
3）逻辑运算符 && || js中是有双与和双或
4）算数运算符 + - * / %
5）三元运算符判断?(true)a:(false)b
与java的运算符一样，什么赋值运算符、逻辑运算符、运算运算符等等，其实不用把这些运算符都记住，写程序时自然会用就OK。下面说几个与java不一样的js运算符：
1）===：全等运算符，不仅值相等而且类型也要相等才会返回true
2）&& ||：逻辑运算符，js中只有双与和双或没有单与和单或
3）- * / : 算数运算符，js中数字字符串进可以进行数学运算但+法运算除外因为字符串本身具备加法运算就是连接字符串

2.2.4 js的逻辑语句

跟java一样，js也存在if、if-else、for、switch等逻辑语句，与java使用方式一致;

3. js的函数

js的函数是js非常重要的组成部分，js最常用的函数的定义方式有两种：

3.1 普通函数：

function 函数名(参数列表){
	// js逻辑代码
}
// 函数调用：函数名(实际参数);

// 例如：求和的函数
// 定义函数：
function plus(a,b){
	alert(a+b);
}
// 执行函数：plus(1,-1);
// 执行结果：0

3.2 匿名函数：

匿名函数也就是没有名字的函数
function(参数列表){
	//js逻辑代码
}

但是匿名函数没有办法直接调用，一般情况下匿名函数有两种使用场景：

3.2.1 第一种：将匿名函数赋值给一个变量，使用变量调用函数

定义函数并赋值给变量：var fn = function(参数列表){js逻辑代码}
调用函数：fn(实际参数);

3.2.2 第二种：匿名函数直接作为某个函数实际参数

例如：

	function xxx(数字类型参数，字符串类型的参数，函数类型的参数){
		//js逻辑代码
	}
	// 调用该函数：
	xxx(100,”abc”,function(){});

4. js的事件

4.1 定义概念

js的事件是js不可或缺的组成部分，要学习js的事件，必须要理解如下几个概念：

1）事件源：被监听的html元素

2）事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等

3）事件与事件源的绑定：在事件源上注册上某事件

4）事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装

4.2 常用的事件

事件名描述

onload 某个页面或图像被完成加载

onsubmit 当表单提交时触发该事件---注意事件源是表单form

onclick 鼠标点击某个对象

ondblclick 鼠标双击某个对象

onblur 元素失去焦点

onfocus 元素获得焦点

onchange 用户改变域的内容

onkeydown 某个键盘的键被按下

onkeypress 某个键盘的键被按下或按住

onkeyup 某个键盘的键被松开

onmousedown 某个鼠标按键被按下

onmouseup 某个鼠标按键被松开

onmouseover 鼠标被移到某元素之上

onmouseout 鼠标从某元素移开

onmousemove 鼠标被移动

5. BOM

5.1 理解

BOM（Browser Object Mode），浏览器对象模型(将客户端的浏览器抽象成一类对象)，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。
例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。在例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。当然除此之外，BOM对象不仅仅具备这些功能，让我们来学习吧。

5.2 js的BOM对象

1）Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。

2）Window对象,Window 对象表示一个浏览器窗口或一个框架。

3）Navigator对象，包含的属性描述了正在使用的浏览器

4）History对象，其实就是来保存浏览器历史记录信息。

5）Location对象，Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

5.3 Window对象

Window对象此处学习它的三个作用：

1）弹框的方法

提示框：alert(提示信息);
确认框：confirm(提示信息);
输入框：prompt(提示信息);

2）定时器

执行多次的定时器：setInterval
执行一次的定时器：setTimeout

3）全局方法

1）parseInt/parseFloat函数 ---- Integer.paseInt();
2）eval函数---特点：可以将字符串解析成js脚本

5.4 Location对象

location.href相当于在浏览器的地址栏中输入地址并敲回车~

js(1) - BOM操作