javascript

目录

• 一、JavaScript简述
  • JavaScript历史
  • Ecmascript
  • js的引入方式
• 二、JavaScript基础
  • 变量
  • 基础规范
  • 常量和标识符（变量）
  • 数据类型
• 三、Ecmascript运算符
  • 1.算数运算符
  • 2.逻辑运算符
  • 3.赋值运算符
  • 4.等性运算符
  • 5.关系运算符
  • 6.完全相等
• 四、控制语句
  • if
  • switch
  • for
  • while
  • try catch异常处理
• 五、JavaScript的对象
  • String对象
    • 创建
    • 属性方法
  • Array对象
    • 创建
    • 方法、属性
  • Date对象
  • 创建
    • 方法
  • Math对象
  • Function对象
    • 创建
    • 使用
    • 内置对象arguments
    • 匿名函数
• 六、BOM
  • 方法
• 七、DOM
  • DOM节点
  • 寻找节点
    • 1.直接查询
    • 2.导航节点查询
  • 节点操作
    • 1.节点操作
    • 2.属性操作
    • 3.标签对象的value
    • 4.标签对象的class
    • 5.style修改css
• 八、事件DOM
  • 事件类型
  • 绑定事件方式
  • 事件
    • 1.onload：
    • 2. onsubmit:
• 九、扩展
  • 作用域与词法分析

一、JavaScript简述

JavaScript历史

Netscape和Sun公司基于livescript开发的脚本语言，命名为JavaScript。
随后ECMA定义了Ecmascript规范，Web浏览器都按照Ecmascript作为JavaScript实现的基础。

Ecmascript

Ecmascript是个标准，一个完整的JavaScript(简称js)由三部分内容组成：

ECMA: 定义js的基础语法（包括：语法、类型、语句、关键字、保留字、运算符、对象）
DOM（文档对象模型）: document object model（整合js、css、html）
BOM（浏览器对象模型）: Browser object moedl（整合js、浏览器）

js在开发中多数情况是给予对象的（面向对象的）

js的引入方式

js的引入方式与css类似，有2种方式：
1.直接在html的标签中编写：

<script>
        alert('this is alert')
</script>

2.在html的标签引入js文件

<script src="js.js"></script>

二、JavaScript基础

变量

js的变量是是弱类型，不同变量间无需手动类型转换就可以进行运算（js自动转换），所以说js 是一门相当随便的语言；
而python 是一门强类型语言，不同变量相互操作前需要类型转换。
1.声明变量时不用声明变量类型，使用var关键字：

var a;

2.一行可以声明多个变量，并且可以是不同类型：

var name=“bob”, age=20,flag=true;

3.声明变量时 可以不用var. 如果不用var 那么它是全局变量
4.量命名,首字符只能是字母、下划线、$美元符 三选一，且区分大小写，x与X是两个变量
5.变量名命名方式：

Camel:
var myTestValue = 0;
Pascal:
var MyTestValue = 0;
匈牙利类型:将变量数据类型小写字母写在Pascal前
var iMmyTestValue = 0;

基础规范

1 每行结束可以不加分号. 没有分号会以换行符作为每行的结束
2 注释 支持多行注释和单行注释. /* */ //
3 使用{}来封装代码块

常量和标识符（变量）

js中变量算是标识符中的一部分

常量：直接在程序中出现的数据值

标识符：

1.由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
2.常用于表示函数、变量等的名称
3.例如：_abc,$abc,abc,abc123是标识符，而1abc不是
4.JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符

数据类型

js数据类型分为基本数据类型(Number、String、Boolean、Null、Undefined)和引用数据类型(object)

1.数字类型（Number）

js中不区分整型和浮点型，都采用64位符点格式存储

其中16进制和8进制数的表示：

16进制数据前面加上0x，八进制前面加0

2.字符串（String）

字符串常量首尾由单引号或双引号括起
字符串中部分特殊字符必须加上右划线
常用的转义字符 \n:换行 ':单引号 ":双引号 \:右划线

3.布尔型（Boolean）

Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0，所以在js中

true + 1 = 2
false + 1 = 1

4.Null和Undefined

Undefined 类型

Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。

当函数无明确返回值时，返回的也是值 "undefined";

var x;  //声明的变量未初始化

console.log(x);  //打印x
console.log(typeof x);  //打印x数据类型
	
//结果：
//undefined  //默认值
//undefined	//数据类型


console.log(typeof y);
	
//结果：
//Uncaught ReferenceError: y is not defined

Null类型

undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

var y = null;
console.log(y);
console.log(typeof y);

//结果：
// null
// object

5.数据类型转换

JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型
变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换

数字 + 字符串：数字转换为字符串

数字 + 布尔值：true转换为1，false转换为0

字符串 + 布尔值：布尔值转换为字符串true或false

6.强制类型转换

函数parseInt： 强制转换成整数

//数字转int
document.write('<div>' + parseInt(6.12) + '</div>');
//字符串转int
document.write('<div>' + parseInt('6.12') + '</div>');
document.write('<div>' + parseInt('12a') + '</div>');
document.write('<div>' + parseInt('a12') + '</div>');
document.write('<div>' + parseInt('1a2') + '</div>');

//结果：
// 6
// 6
// 12
// NaN
// 1

函数parseFloat： 强制转换成浮点数

函数eval： 将字符串强制转换为表达式并返回结果

7.类型查询函数(typeof)

ECMAScript 提供了 typeof 运算符来判断一个值是否在某种类型的范围内。可以用这种运算符判断一个值是否表示一种原始类型：如果它是原始类型，还可以判断它表示哪种原始类型。

console.log(typeof("test" + 3));
console.log(typeof(null));
console.log(typeof true);
console.log(typeof(true + 1));
console.log(typeof(true - false));

//结果：
// string
// object
// boolean
// number
// number

三、Ecmascript运算符

1.算数运算符

加(＋)、 减(－)、 乘(*) 、除(/) 、余数(% ) 加、减、乘、除、余数和数学中的运算方法一样

1.自增（++）、自减（--）
变量在前：先返回结果，再执行自增(或自减)
变量在后：先执行自增(或自减)，再返回结果

var x=2;
console.log(x++);
var x=2;
console.log(x--);
var x=2;
console.log(++x);
var x=2;
console.log(--x);

//结果：
// 2
// 2
// 3
// 1

一元加减法：

var a = 1;
a = -a;  //a=-1
console.log(typeof (a));
var c = "10";
console.log(typeof (c));
c = +c;    //类型转换
console.log(typeof (c));

//结果：
// number
// string
// number

var d = "hello";
d = +d;
alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
alert(typeof(d));//Number

NaN参与的所有的运算都是false,除了!=

var n = NaN;

console.log(n > 3);
console.log(n < 3);
console.log(n == 3);
console.log(n == NaN);
console.log(n != NaN);

//结果：
//false
//false
//false
//false
//true

2.逻辑运算符

等于 ( == )
不等于( != )
大于( > )
小于( < )
大于等于(>=)
小于等于(<=)
与 (&&)
或(||)
非(!)

1.逻辑 AND 运算符(&&)

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。

如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：

如果某个运算数是 null，返回 null。 
如果某个运算数是 NaN，返回 NaN。 
如果某个运算数是 undefined，返回undefined。 

2.逻辑 OR 运算符(||)

与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值

3.赋值运算符

=

4.等性运算符

执行类型转换的规则如下：

如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。 
如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。 
如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。 
如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。 

在比较时，该运算符还遵守下列规则：

值 null 和 undefined 相等。 
在检查相等性时，不能把 null 和 undefined 转换成其他值。 
如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。 
如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。 

5.关系运算符

1.比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
2.比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

字符串比较，只比较开头字母B和a，字母 B 的字符代码是 66，字母 a 的字符代码是 97,如下：

var bResult = "Blue" < "alpha";
alert(bResult); 

//结果：
//true

数字和字符串比较

字符串“25”和“3”，两个运算数都是字符串，所以比较的是它们的字符代码（"2" 的字符代码是 50，"3" 的字符代码是 51），如下：

var bResult = "25" < "3";
alert(bResult); 
//输出:
//true

字符串 "25" 将被转换成数字 25，然后与数字 3 进行比较，如下：

var bResult = "25" < 3;
alert(bResult); 
//输出:
//false

6.完全相等

console.log('3' == 3); //相等
console.log('3' === 3); //完全相等
//结果：
//true
//false

四、控制语句

if

if(表达式){

}else{

}

switch

switch(表达式){
	case value1: 语句1；break；
	case value2: 语句2；break；
	case value3: 语句3；break；
	default:语句4；
}

for

for (i=0;i<10;i++){

}

while

while (条件){

}

try catch异常处理

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

主动抛出异常thow Error（“...”）

五、JavaScript的对象

JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象

String对象

创建

1.变量=“字符串”
2.字符串对象名称=new String（“字符串”）

//字符串创建
var str = "hello world";
var str1 = new String("hello world");

属性方法

//字符串信息
str.length
str.toLowerCase()
str.toUpperCase()
str.trim()

//字符串查询
str.charAt(3)
console.log(str.indexOf("o", 3)); //查询字符串的索引值，从索引为3开始向后寻找
console.log(str.lastIndexOf("l")); //查找最后一个符合要求的字符串
console.log(str.match("hello")[0]);
console.log(str.search("l"));

//字符串处理
console.log(str.substr(2, 5)) //5截取长度，
console.log(str.substring(2, 5)) //5结束索引，顾头不顾尾
console.log(str.slice(2, 5)) //切片，顾头不顾尾
console.log(str.slice(2)) //切片，从2取到位
console.log(str.replace("o", "XM"))//替换，只替换第一个
console.log(str.split(" "))//空格分隔，变为数组
console.log(str.concat(str1))//拼接字符串

Array对象

创建

三种方式：

//1
var arr = [1, 2, 3];

//2
var arr1 = new Array("a", "b", "c");

//3
var arr2 = new Array(3); //当创建数组中只有1个数字，表示创建了一个长度为3的数组
	arr2[0] = "abc"
	arr2[1] = "kkk"

方法、属性

//join
console.log(arr.join(":"));//拼成字符串

//concat
arrX = arr2.concat(arr1)//拼成数组
console.log(arrX);
console.log(arrX.toString())//转换为字符串

//排序：reverse、sort
//reverse:颠倒原数组元素顺序
console.log(arr2.reverse());
//sort:按照首字的asc码顺序排列，并不是按照数字大小排序
arr3 = [21, 3, 40, 100];
console.log(arr3.sort()); //结果：[100, 21, 3, 40]
//如果想按照数字大小排序，需要自定义函数
function mysort(x, y) {
    return x - y;
}
console.log(arr3.sort(mysort));//结果：[3, 21, 40, 100]

//切片：效果和string的slice一样
console.log(arr1.slice(1,2));//返回结果是数组

//删除、插入
arr4 = arr1.splice(1,1,'ok','fine')//第一个1表示开始位置索引，第二个1表示删除数组的个数，ok和fine表示要插入的元素；可以不插入元素，就表示删除元素
console.log(arr4)//["b"]
console.log(arr1)//["a", "ok", "fine", "c"]

//push、pop
//这俩方法模拟栈操作
//push是将value值添加到数组arr的结尾
arr.push(4,5)
console.log(arr)//[1, 2, 3, "push"]
arr.push([6,87])
console.log(arr)//[1, 2, 3, "push", Array(2)]
//pop是将数组arr的最后一个元素删除
arr.pop()

//shift、unshift
//unshift是将value值插入到数组x的开始
//shift是将数组x的第一个元素删除
arr.unshift(4,5)
arr.unshift([6,7])
console.log(arr)//[Array(2), 4, 5, 1, 2, 3]
arr.shift()
console.log(arr)//[4, 5, 1, 2, 3]

js中的数组特性:
1: js中的数组可以装任意类型,没有任何限制.
2: js中的数组,长度是随着下标变化的.用到多长就有多长.

Date对象

创建

//1
var d1 = new Date();

//2
var d2 = new Date("2012/12/12 12:12:12");
console.log(d2.toLocaleString())//2012/12/12 下午12:12:12

方法

getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

//设置日期和时间
setDate(day_of_month)       设置日
setMonth (month)                 设置月
setFullYear (year)               设置年
setHours (hour)         设置小时
setMinutes (minute)     设置分钟
setSeconds (second)     设置秒
setMillliseconds (ms)       设置毫秒(0-999)
setTime (allms)     设置累计毫秒(从1970/1/1午夜)

Math对象

Math.abs(x)    返回数的绝对值。
exp(x)    返回 e 的指数。
floor(x)对数进行下舍入。
log(x)    返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。

Function对象

可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return
Function 类可以表示开发者定义的任何函数。

function func(x) {
    return Math.abs(x);
}

创建

var 函数名 = new Function("参数1","参数n","function_body");

js的函数加载执行与python不同，它是整体加载完才会执行，所以执行函数放在函数声明上面或下面都可以：

使用

function func1(a,b){

    alert(a+b);
}

    func1(1,2);  //3
    func1(1,2,3);//3
    func1(1);    //NaN
    func1();     //NaN

		func1.length //获取函数参数个数
    //只要函数名写对即可,参数怎么填都不报错.

-------------------面试题-----------
 function a(a,b){
    alert(a+b);
}

   var a=1;
   var b=2;
   a(a,b)

内置对象arguments

类似python中的*arg

//存放参数
function add(a, b) {

    console.log(a + b);//3
    console.log(arguments.length);//2
    console.log(arguments);//[1,2]

}
add(1, 2)

    ------------------arguments的用处1 ------------------
//接收任意参数
function nxAdd() {
    var result = 0;
    for (var num in arguments) {
        result += arguments[num]
    }
    alert(result)

}

nxAdd(1, 2, 3, 4, 5)

     ------------------arguments的用处2 ------------------
//限制函数参数传入
function f(a, b, c) {
    if (arguments.length != 3) {
        throw new Error("function f called with " + arguments.length + " arguments,but it just need 3 arguments")
    }
    else {
        alert("success!")
    }
}

f(1, 2, 3, 4, 5)

匿名函数

// 匿名函数
    var func = function(arg){
        return "tony";
    }

// 匿名函数的应用
    (function(){
        alert("tony");
    } )()

    (function(arg){
        console.log(arg);
    })('123')

六、BOM

所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.

方法

//alert、confirm、prompt
	x = alert('alert object');
	console.log(x); //返回undefined
	y = confirm('confirm object');
	console.log(y); //确认返回ture、取消返回false
	z = prompt('prompt');
	console.log(z); //确认返回输入内容、取消返回null

//open、close
	open("http://www.baidu.com","小百度","with=600px,height=800,resizable=no");//弹出新页面
	close();//关闭原始页面

//setInterval、clearInterval
    function func() {
        console.log('hello');
    }

    s_obj= setInterval(func,1000);
    clearInterval();
    
//setTimeout、clearTimeout
    function func() {
        console.log('hello');
    }
    var t_obj=setTimeout(func,5000); //5秒后执行func
    clearTimeout(t_obj);
    
//scrollTo
    scrollTo(100,500); //将窗口滚动到内容是100,500位置   

七、DOM

HTML Document Object Model（文档对象模型）
HTML DOM 定义了访问和操作HTML文档的标准方法
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

DOM节点

节点分类4类

document：整个文档是一个文档节点 
element:每个 HTML 标签是一个元素节点 
text:包含在 HTML 元素中的文本是文本节点 
attribute:每一个 HTML 属性是一个属性节点

寻找节点

1.直接查询

通过id名、标签名、name名、class名

document.getElementById(“id名”);
document.getElementsByTagName(“p”);
document.getElementsByName(“name名”);
document.getElementsByClassName(“class名”);

var ob1 = document.getElementById("ta");//返回标签对象
   console.log(ob1);
   var ob2 = document.getElementsByTagName("a");//返回数组
   console.log(ob2[0]);
   var ob3 = document.getElementsByName("tp");//返回数组
   console.log(ob3[0]);
   var ob4 = document.getElementsByClassName("d1");//返回数组
   console.log(ob4[0]);

2.导航节点查询

在已知节点的基础上寻找其他节点,但是，js中没有办法找到所有的兄弟标签。

//parentElement:寻找父节点标签元素
var ob2 = document.getElementsByTagName("a");
    var p = ob2[0].parentElement;
    console.log(p);

//children:所有子标签
var ob4 = document.getElementsByClassName("d2");
    var p = ob4[0].children;//返回数组
    console.log(p);

//firstElementChild:第一个子标签元素
var p = ob4[0].firstElementChild;//返回标签对象

//lastElementChild:最后一个子标签元素
var p = ob4[0].lastElementChild;

//nextElementtSibling:下一个兄弟标签元素
var p = ob2[0].nextElementSibling;

//previousElementSibling:上一个兄弟标签元素
var ob4 = document.getElementsByClassName("d1");//返回数组
    p = ob4[1].previousElementSibling;
    console.log(p)

节点操作

1.节点操作

//创建节点：
var tag = document.createElement("input");
    tag.setAttribute('type', 'text');

//追加到子节点最后
    ob4[1].appendChild(tag);
    
//插入到节点中ob2[1]之前
	  ob4[1].insertBefore(tag,ob2[1]);

//删除元素，通过父元素调用
ob4[1].removeChild(ob2[1])

//替换节点
var tag = document.createElement("input");
    tag.setAttribute('type', 'text');
    ob4[1].replaceChild(tag,ob2[1]);

2.属性操作

//获取文本节点：
console.log(ob4[1].innerText) //qq
console.log(ob4[1].innerHTML) //<a>qq</a>

//属性操作
ob4[1].setAttribute('id','d3')
ob4[1].getAttribute('class')
ob4[1].removeAttribute("id")

3.标签对象的value

标签input、select、textarea标签对象都可通过value属性值获取值

input和textarea的value存储输入的内容
select的value存储着option的value值，selectedIndex存储着option的索引值（从0开始）

4.标签对象的class

    var t1 = document.getElementsByClassName("dd");
    console.log(t1[0].className);//查询class的值
    t1[0].classList.add('c1');//向class添加c1
    t1[0].classList.remove('dd');//删除dd

5.style修改css

var a1 = document.getElementById('x')
    a1.style.color="red";

八、事件DOM

事件类型

onclick : 单击对象调用
ondbclick : 双击对象调用

onfocus : 元素失去焦点
onblur : 元素失去焦点
onchange : 表单内容被修改

onload : 元素加载完毕

onselect : 文本被选中
onsubmit : 确认按钮被点击

//keyboard事件
onkeydown:
onkeyup:
onkeypress:
*StringCharCode:asc码变字符

//鼠标事件
onmouseover:移入元素
onmouseout:移出元素  - 除了给元素绑定该事件意外，还会给子元素绑定事件
*cursor:pointer:鼠标变小手
onmouseleave:离开元素  - 只给元素绑定该事件意外，不会给子元素绑定事件
onmousedown:点击
onmousemove:拖动

绑定事件方式

1.在元素中通过属性绑定

<div id="div" onclick="foo(this)">click</div>
<script>
    function foo(self) {
        console.log(self);         //这里是self
        self.style.color = "red";
    }
</script>

2.在js中通过元素对象.绑定

<div id="div">click</div>
<script>
    var tag = document.getElementById("div");
    tag.onclick = function () {
        console.log(this);         //这里是this
        this.style.color = "red";
    }
</script>

事件

1.onload：

页面内容被加载完成这个属性触发

<body onload="fun()">
</body>

2. onsubmit:

用于form表单提交触发校验输入内容,当校验失败后，可以阻止表单提交server

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () { //body加载完毕执行事件
            var ele = document.getElementById("form");
            ele.onsubmit = function (e) {
                alert("false");
                //阻止方式1
                return false;
                //阻止方式2
                e.preventDefault();
            }
        }

    </script>

</head>
<body>
<form id="form">
    <input type="text">
    <input type="submit" value="click">

</form>
</body>
</html>

3.传播事件：stopPropagation
子元素存在事件，其父元素也存在事件，当触发子元素的事件时有可能触发父元素事件，为了避免此类情况，可在自元素js中增加:元素对象.stopPropagation()

document.getElementById("id2").onclick=function(e){
	alert("false");
	e.stopPropagation(); //阻止事件向外层div传播.
}

九、扩展

作用域与词法分析

1.变量的作用域是在声明时决定的而不是调用执行时决定；

预编译只声明变量，执行时给变量赋值

2.词法分析过程：

active object(活动对象)

当函数调用的前一瞬间,先形成一个激活对象,叫Avtive Object, AO,并会分析以下3个方面的东西:

1:参数

2:局部变量声明

3:函数声明表达式

函数内部无论是使用参数,还是使用局部变量,都到AO上找.

<script>
    var a = 8;
    function foo() {
        console.log(a); //undefined
        var a =10;
        console.log(a); //10
    }
    foo()
</script>