JS笔记

JavaScript

基础介绍

1、什么是JavaScript？

• 与HTML页面进行交互
• 是一种脚本语言
• 是一种解释型语言

注意： java和JavaScript没有任何关系

2、JavaScript组成部分

• ECMAScript：他是整个JavaScript的核心，包含（基本语法、变量，关键字，保留字，数据类型，语句函数等等）
• DOM：文档对象模型，包含的是整个HTML页面模型
• BOM:浏览器模型对象，包含的是整个浏览器的相关内容

ECMAScript

1、JavaScript语法

• 区分大小写
• 变量是弱类型的（任何数据类型都是使用var来定义的）
• 结尾的分号可有可无（建议写上）
• 注释与java相同

2、JavaScript的变量
变量属于弱类型，可以不用声明，统一使用var来定义
注意：定义变量的时候不要使用关键字和保留字

3、JavaScript数据类型
原始数据类型：
         string,number,boolean,null,undefined
引用数据类型：

• 数组：Array
• 波尔值：Boolean
• 时间：Date
• 数学：Math
• 数字：Number
• 字符串：String
• 正则表达式：ReqExp

4、JavaScript运算符
运算符与java大体一致。但是需要注意等性运算符
注意： == ：他在作比较的时候会自动进行类型转换
            === ：他在做比较的时候不会进行自动转换

5、JavaScript语句
与java基本一致
注意： 唯一区别：java中switch(){}中只能接收byte，short，int，char，String，枚举，而JavaScript中switch(){}中可以接收任意原始数据类型

DOM对象

文档对象模型，包含(整个 html 页面的内容)

• Document:整个html文件都成为一个document文档
• Element:所有的标签都是Element元素
• Attribute：标签里面的属性
• Text：标签中间夹着的内容为text文本
• Node:document、element、attribute、text统称为节点node.

1、document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

后面两个方法获取之后需要遍历！
注意：
以下两个方法很重要，但是在手册中查不到！
创建文本节点：document.createTextNode()
创建元素节点：document.createElement()

2、Element对象

我们所认知的html页面中所有的标签都是element元素。

属性/方法	描述
element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.firstChild	返回元素的首个子节点。
element.getAttribute()	返回元素节点的指定属性值。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.lastChild	返回元素的最后一个子元素。
element.setAttribute()	把指定属性设置或更改为指定值。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。

3、Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute。

BOM对象

浏览器模型对象，操作与浏览器相关的内容

1、Windows对象

Windows对象表示的是浏览器打开的窗口
Windows对象方法：
setInterval():它有一个返回值，主要是提供给 clearInterval 使用。
setTimeout():它有一个返回值，主要是提供给 clearTimeout 使用。
clearInterval():该方法只能清除由 setInterval 设置的定时操作
clearTimeout():该方法只能清除由 setTimeout 设置的定时操作

2、Location对象

Location对象包有关当前URL的相关信息

3、History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History对象方法：

历史页面：使用 location 页面(把 href 属性值改为当前的 history) History 页面代码：

<input type="button" value=" 返回上一个页面 " onclick="javascript:history.back()"/>

go(参数)
参数：-1 返回上一个历史记录页面；-2 返回上上一个历史记录页面，1 进入下一个历史记录页面。
让按钮点击失效：

οnclick=”javascript:void(0)”

4、Navigator对象

Navigator 对象包含有关浏览器的信息。(该对象开发中不怎么常用)

Navigator对象属性：

5、Screen对象

Screen 对象包含有关客户端显示屏幕的信息。(该对象开发中不怎么常用)

6、事件

• onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
• onclick/ondblclick:鼠标单击和双击事件
• onkeydown/onkeypress：搜索引擎使用较多
• onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
• onmouseover/onmouseout/onmousemove：购物网站商品详情页。
• onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
• onchange:当用户改变内容的时候使用这个事件(二级联动)

内置对象

JavaScript的内置对象包括：
Array，Math，Boolean，Date，Number，String，RegExp

1、Array对象

数组的特点：
长度可变！数组的长度=最大角标+1
方法：弹出一个值：pop();添加一个值：push();长度：length 注意 没括号

2、Boolean对象

如果value 不写，那么默认创建的结果为false

3、Date对象

getTime()：返回 1970 年 1 月 1 日至今的毫秒数。
使用时机： 解决浏览器缓存问题

4、Math和Number

不用new，可以直接.就使用
和java基本一致

5、String对象

match()	找到一个或多个正则表达式的匹配。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。

例：

<script>
	var str = "-a-b-c-d-e-f-";
	var str1 = str.substr(2,4);//-b-c
	//alert(str1);
	
	var str2 = str.substring(2,4);//-b
	alert(str2);
</script>

6、RegExp对象

正则表达式对象

test	检索字符串中指定的值。返回 true 或 false。

全局函数

全局属性和函数可用于所有内建的 JavaScript 对象

关于编码和解码的一组方法：

<script>
	var str = "张三";
	//alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
	//alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
	
	//alert(decodeURI(encodeURI(str)));//张三
	//alert(decodeURIComponent(encodeURIComponent(str)));//张三
	
	var str1 = "http://www.itheima.cn";
	//alert(encodeURI(str1));//http://www.itheima.cn
	//alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn
	
	//alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
	//alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn
	
	var str2 = "alert('abc')";
	//alert(str2);
	eval(str2);
</script>