JavaScript基础

概念

一门客户端脚本语言

运行在客户端浏览器中的。每一个浏览器都有Javascript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了
功能
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript发展史

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验，命名为：C– ，后来更名为ScriptEase
1995年，Netscape公司，开发了一门客户端脚本语言：LiveScript。后来，请来sun公司的专家，修改LiveScript，命名为JavaScript
1996年，微软抄袭JavaScript开发出JScript
1997年，ECMA(欧洲计算机制造商协会)，ECMAScript，就是所有客户端脚本语言的标准。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

ECMAScript：客户端脚本语言的标准

基本语法

与html结合方式

内部JS，执行顺序和代码顺序有关
1
2
3
<script>
alert("hello world");
</script>
外部JS
1
<script src="js/a.js"></script>
注释
单行注释
多行注释
1
2
3
4
5
//单行注释

/*
多行注释
*/
数据类型
原始数据类型(基本数据类型)
- number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）
- string：字符串。”abc” ‘abc’
- boolean:true/false
- null:一个对象为空的占位符
- undefined:未定义。如果一个变量没有初始化值，则会默认赋值为undefined。
引用数据类型：对象

变量

Java是强类型语言，而JavaScript是若类型语言。

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定的类型的数据。
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法：

1 2	var num = 1; document.write(num+"<br>");

运算符，注意点

在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动的将运算数进行类型转换
- string转number：按照字面意思抓还。如果字面值不是数字，则转为NaN。

流程控制语句

if…else…
switch
while
do…while
for
基本对象
Function对象
创建：
var fun = new Function(形式参数列表，方法体);//不常用
function 方法名称(形式参数列表){方法体}
var 方法名 = function(形式参数列表){方法体}
1
2
3
function fun(a,b){
alert(a+b);
}
属性：
length:代表方法的形参数量

特点：

方法定义时，形参的类型不用写；
方法是一个对象。如果定义名称相同的方法，会覆盖。
在JS中，方法的调用只与方法的名称有关，和方法的参数无关

在方法声明中有一个隐藏的内置对象，arguments，封装所有的实际参数。

//求任意个数的和
function add(){
    var sum = 0;
    for(var i = 0; i < arguments.length; i++){
        sum += arguments[i];
    }
    return sum;
}

调用：

方法名称(实际参数列表);

Array：数组对象

创建：

var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];

方法：

join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push( ):向数组的尾部添加一个或更多元素，并返回新的长度

特点：

JS中，数组元素的类型是可变的
JS中，数组的长度是可变的

Math

创建：

Math对象不用创建，直接使用。Math.方法名

方法：

random():返回一个0到1之间的随机数，包含0不包含1
cell(x):对数进行向上舍入
floor(x):向下舍入
round(x):四舍五入

属性：PI

RegExp：正则表达式对象

正则表达式：定义字符串组成规则。

单个字符：

[a-z] [a] [ab] [0-9]
特殊符号代表特殊含义的单个字符
\d：单个数字字符，0-9
\w：单个单词字符，a-z，A-Z，下划线

量词符号

? 表示出现0次或一次
* 表示出现0次或多次
+ 出现一次或多次
{m,n} 表示m<=数量<=n
{,n}，最多n次
{m,}，最少m次

开始结束符号
- 开始：^
- 结束：$

创建：

var reg = new RegExp(“正则表达式”);
var reg = /正则表达式/;

方法：

test(参数)：验证指定的字符串是否符合定义的规范

BOM

概念：Browser Object Model 浏览器对象模型，将浏览器各个组成部分封装成对象。

组成：

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

Window对象

特点：

Window对象不需要创建可以直接使用，window.方法名()
window引用可以省略。方法名();

方法：

与弹出窗口有关的方法
- alert()：显示带有一段消息和一个确认按钮的警告框
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框（用户点击确定返回true，取消返回false）
- prompt()：显示可提示用户输入的对话框，返回值是获取用户输入的值。
与打开关闭有关的方法
- close():关闭浏览器窗口,谁调用关谁
- open(“URL”)：打开新窗口，返回一个新的window对象
与定时器有关的方式
- setTimeout()：在指定的毫秒数后调用函数或计算表达式
- clearTimeout()：取消由setTimeout方法设置的timeout
- setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
- clearInterval()：取消setInterval方法设置的timeout

setTimeout()参数：

js代码或者方法对象
毫秒值

setInterval()参数同上，但是是循环定时器，前者是一次性定时器。

上述二者都会返回一个id，可以传入相应的clear方法来取消定时器。

Location：地址栏对象

创建：

window.location
location

方法：

reload():重新加载当前文档，刷新

属性：

href：设置或返回完整的URL

DOM

概念

Document Object Model 文档对象模型

将标记语言的各个组成部分封装成对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

W3C DOM 标准被分为3个不同的部分

核心DOM–针对任何结构化文档的标准模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象，其他5个对象的父对象
XML DOM–针对XML文档的标准模型
HTML DOM–针对HTML文档的标准模型

Document：文档对象

创建：在html dom 模型中可以使用window对象来获取

window.document
document

方法：

获取Element对象：

getElementById():根据id属性值获取元素对象。id属性值一般是唯一
getElementByTagName():根据元素名获取元素对象们。返回值是一个数组
getElementByClassName():根据Class属性值获取元素对象们，返回的是一个数组。
getElementByName():根据name属性值获取元素对象们，返回的是一个数组。

Node节点对象

特点：所有dom对象都可以被认为是一个节点
方法：

CRUD dom树：
- appendChild():向节点的子节点列表的结尾添加新的子节点
- removeChild():删除（并返回）当前节点的指定子节点
- replaceChild():用新节点替换一个子节点

事件监听机制

概念：某些组件被执行了某些操作后，触发某些代码的执行。

事件：某些操作，如：单击，双击，键盘按下了，鼠标移动了

事件源：组件。如：按钮，文本输入框…

监听器：代码

注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发，讴歌监听器的代码。

常见的事件

点击事件
- onclick：单击事件
- ondblclick：双击事件
焦点事件
- onfocus：元素获得焦点
- onblur：元素失去焦点
加载事件
- onload：一张页面或一副图像完成加载
鼠标事件：
- onmousedown：鼠标按钮被按下
- onmouseup：鼠标按键被松开
- onmousemove：鼠标被移动
- onmouseover：鼠标移到某元素之上
- onmouseout：鼠标从某元素移开
键盘事件：
- onkeydown：某个键盘按键被按下。
- onkeyup：某个键盘按键被松开。
- onkeypress：某个键盘被按下并松开
选择和改变
- onchange：域的内容被改变
- onselect：文本被选中
表单事件
- onsubmit：确认按钮被点击
- onreset：重置按钮被点击