JavaScript简单了解

 一、概述

(一)概念

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

(二)作用

可以动态的修改html代码和css代码。（修改的是本地内存当中的这一份）

(三)js的组成(理解)

网景公司 NetScape LiveScript  JScript   ECMA

1. ECMAScript

只规定的js的基本语法规范，是js 的核心

2. BOM

Borwser Object Model 浏览器对象模型。可以理解为把浏览器抽象封装成的对象。我们的js代码可以调用BOM对象的属性和方法，来操作浏览器。比如：网址跳转，历史记录切换。

3. DOM

Document Object Model文档对象模型。可以理解为把html文档抽象封装成的对象。我们的js代码可以调用doom对象的属性和方法，来操作html文档。比如：创建标签、删除标签、添加属性、删除属性、修改属性值等等。

(四)js的引入方式

1. 内部js

<script type="text/javascript">

alert();

</script>

2. 外部js

<script type="text/javascript" src="../js/my.js" ></script>

js代码位置的原则：在不影响页面显示效果的前提下，js代码越晚加载越好

二、基本语法规范(ECMAScript)

(一)变量定义

js是弱类型语言，所有变量定义都使用var来定义

(二)数据类型

js的数据类型分为两类：原始数据类型  和  引用数据类型

1. 基本数据类型

Ø boolean

Ø number

Ø string

Ø null: 空类型，只有一个值：null

Ø undefined: 未定义类型，只有一个值：undefined

2. 引用数据类型

js的引用数据类型只有9个，明天详细说

js使用关键字new创建对象: var date = new Date();

(三)运算符

js的运算符和java非常相似，这里列出来几个不同的：

1. ==和===  ==只比较值；===比较值和类型

2. &&和||   js里逻辑判断只有&&和||，而没有&和|

3. +-*/  如果有字符串，+表示拼串；如果有字符串-*/运算，js会先转换为数字再做运算

(四)逻辑语句

js的逻辑语句和java非常相似，也有if，if else, for, switch等等。不同的是if判断：

false，0，””，null,undefined，使用if判断结果都是false

(五)函数（重点）

1. 普通函数

定义：function 函数名称(形参,形参…){//js代码块}

调用 ：函数名称(实参,实参…)

2. 匿名函数

定义：function(形参,形参…){//js代码块}

调用：

把匿名函数赋值给一个变量，通过变量名调用函数

把匿名函数作为另外一个函数的实参传递进去

(六)事件（重点）

1. 先了解事件相关的几个概念

事件源：被监听的html标签对象

事件：在事件源上发生的某一类动作，比如：单击、双击

响应行为：事件发生后要执行一一段代码，通常使用函数封装

2. 常见的事件

onclick：单击事件

ondblclick：双击事件

onload：加载完成事件，一般用于监听页面加载完成

onsubmit：表单提交事件

onchange：域内容改变事件，一般用于select下拉框的选项发生变化

onfocus：获取焦点事件

onblur：丢失焦点事件

onkeydown：键盘按键被按下

onkeyup：键盘按键弹起

onkeypress：键盘按键被按下或按住

onmousedown：鼠标按键被按下

onmouseup：鼠标按键弹起

onmouseover：鼠标移入

onmouseout：鼠标移出

onmousemove：鼠标移动

3. 事件注册/事件绑定

<!--事件和响应行为嵌入到事件源中-->

<input type="button" value="按钮1" onclick="alert();"/>

<!--响应行为封装成函数，事件嵌入到事件源中-->

<input type="button" value="按钮2" onclick="showWin()"/>

<!--响应行为和事件  与  事件源完全分离，使用js动态绑定事件-->

<input type="button" value="按钮3" id="btn3"/>

window.onload = function(){

//从html文档里获取到btn3标签对象

var btn = document.getElementById("btn3");

//设置btn3标签对象的onclick属性，即绑定监听单击事件，然后赋值是响应行为

btn.onclick = function(){

alert("btn3");

}

/*btn.onclick = showWin;*/

}

 

三、BOM对象

(一)bom对象有哪些

1. window: 浏览器窗口对象，是所有bom对象的顶级对象

2. location: 浏览器地址信息对象，可以用来获取网址，更改网址（网址跳转）

3. history: 历史记录信息对象，可以进行历史记录的切换

4. navigator: 只读，浏览器信息对象，里边封装的浏览器的内核、版本，操作系统筀信息

5. screen:浏览器的屏幕显示信息对象，浏览器窗口的大小，位置，颜色信息等

(二)window对象

1. 弹窗方法

a) 普通弹窗alert()

b) 确认弹窗confirm()

c) 输入弹窗prompt()

三种弹窗方法都是阻塞方法

2. 定时器

a) 执行多次的定时器

定义：var timer = setInterval(函数对象, 间隔的毫秒值);

清除：clearInterval(timer);

b) 执行一次的定时器（延时器）

定义：var timer = setTimeout(函数对象, 延迟的毫秒值);

清除：clearTimeout(timer);

3. 全局方法

a) parseInt 转换为整数

b) parseFloat 转换为小数

c) eval 把字符串作为js代码来执行

(三)location对象

1. 获取当前页面的网址

var url = location.href;

2. 设置当前页面的网址（网址跳转）

location.href = “”;//在当前窗口打开新页面

window.open(“”);//在新窗口打开新页面

(四)history

后退一步：history.back();

前进一步： history.forward()

切换指定步数：history.go(n)

n是正整数，表示前进n步；如果n是负整数，表示后退n步

四、DOM对象

 

五、dom操作

(一)dom概述

DOM：DocumentObjectModel文档对象模型。html文档在被加载到浏览器内存当中后，会按照html的层级结构形成一棵“家谱树”，我们称之为“dom树”。而html文档里的标签、属性、标签体都会转换成dom树上的节点。

(二)dom操作

1．标签操作

(1)获取标签

getElementById(id值)，  返回一个Element元素对象

getElementsByName(name值)，返回一个Element元素的集合

getElementsByTagName(标签名称) ，返回一个Element元素的集合

getElementsByClassName(class名称) ，返回一个Element元素的集合

上边四个方法document对象可以用，Element对象也可以用。区别在于：document获取是从整个html文档内查找；而Element对象获取是从某一个标签内部查找。

(2)创建标签

var opt = document.createElement(“option”);

(3)插入标签

父标签对象.appendChild(子标签对象)   ----表示剪切

(4)删除标签

标签对象.remove();

2．属性操作

(1)获取属性值

var attrValue = 标签对象.attrName;

var attrValue =标签对象.getAttribute(“attrName”);

(2)设置属性值

标签对象.attrName = attrValue;

标签对象.setAttribute(attrName, attrValue);

(3)删除属性

标签属性.removeAttribute(attrName);

3．标签体操作

(1)获取标签体

var innerhtml = 标签对象.innerHTML;//获取标签体里的全部内容，包括标签

var innertxt = 标签对象.innerText;//获取标签体里的文本

(2)设置标签体

标签对象.innerHTML = “新的html代码”;

标签对象.innerText = “新的文本”;

六、引用数据类型

 

(一)Array数组

1．创建：var arr = [“a”, 1, true];

2．循环遍历

3．常用属性和方法

(1)常用属性：length

Ø 使用length属性获取数组的长度

Ø 使用length属性设置数组的长度

(2)常用方法：

Ø concat  合并数组

Ø join  把数组拼接成字符串

Ø reverse  颠倒数组里元素的顺序

(二)Date日期

1．创建日期对象

Ø 当前日期:var date = new Date();

Ø 指定日期:var date = new Date(年，月，日);//月从0开始

Ø 指定日期和时间:var date = new Date(年，月，日，时，分，秒);

2．常用方法

Ø getTime 获取毫秒值

Ø setTime 根据毫秒值设置日期

(三)Math数学工具类

不需要创建对象，直接使用其属性和方法即可

1．常用的方法

Ø abs:绝对值

Ø ceil:向上取整

Ø floor:向下取整

Ø round:四舍五入

Ø random:取随机数 [0,1)

(四)RegExp正则表达式

1．创建正则表达式对象

Ø var reg = new RegExp(“表达式”);

Ø var reg = /表达式/;

2．常用方法

Ø test(str):校验str是否符合正则表达式的格式