JavaScript-1.基础

ECMAScript

ECMAScript是一种标准，而实现这一标准的是JavaScript。

JavaScript是1996年出生，1997年提交给ECMA International，因此才有了ECMAScript标准。

2015年ECMA-262发出第6个版本，简称ES6或者ES2015。

ECMAScript基于JavaScript，而JavaScript也是遵循ECMAScript，两者密不可分。

但是JS要比ES含义多得多，比如一个完整的JavaScript实现由以下三个不同部分组成：

ECMAScript：ECMAScript核心

DOM：文档对象模型

BOM：游览器对象模型

JavaScript

JavaScript基础

JavaScript在开发中基本都是基于对象也是面向对象操作对象

ES大致包含语法，类型，语句，关键字，保留字，运算符，对象（封装，基础，多态）基于对象的语言使用对象

引入方式

/*直接写在页面中*/
<script>
	alert('hello js')    
</script>

//引入其他文件
<script src="path/hello.js"></script>

变量

声明变量的时候，可以不使用var，如果不使用var就是全局变量

变量命名，首字母只能是（字母，下划线，$），变量区分大小写

变量遵循以下某条著名命名规范

canel标记法：首字母小写，接下来的字符开头都是大写开头例： myName

fascal标记法：首字母大写，接下来的字符开头都已大写开头例：MyName

匈牙利标记法：在以Fascal标记法命名的变量前附加一个小写字母(或小写字母序列)说明该变量类型

1	i表示整数，s表示字符串如Var iMyAge=18 , Var sMyName='zhuxy'

实例

1 2	var Name='zhuxuyue',iAge=20,Job='python'; console.log(Name,iAge,Job)

通常每行结束前可以不加;号，js默认以换行自动添加分号

注释使用\\或者\* *\来注释多行

代码块

在JS中使用{}来封装代码块

/*python中表示*/
if 2>1:
	return 2
def fn():
	return 123


/*js中表示*/
if (2>1) {
    alert(2)
}
function(){
}

示例

<script>
    function sayHello(){
    	var sHello = 'hello js';
    	document.write(<a href='www.baidu.com'>sHello</a>);
	}
	sayHello();		//也是需要调用才能执行
</script>

标识符

不能以数字开头的字符，数字，下划线，$符组成

_abc，$abc，abc，abc123都是标识符，1abc则不是

常用语表示函数，变量等名称

保留字

ecma v3标准保留的js关键字

1
2
3

break	case	catch	continue	default	delete	do	else	false	finally
for	function	if	in	instanceof	new	null	return	switch	this
throw	true	try	typeof	var	void	while	with

数据类型

number	//数字类型
null	//空
string	/*字符串 
		由unicode字符，数字，标点符号组成序列
		字符串常量首位由单引号或者双引号括起
		js中没有字符串类型
		常用特殊字符在字符串的表达：字符串中特殊字符必须加上右下划线\
			常用的转移字符：\n换行  \‘单引号  \"双引号  \\右下划线
		string数据类型使用:
			特殊字符使用方法效果
			unicode插入方法
				var str="\u4f60\u597d\nhello \"world\"";*/
undefined	/*undefined类似只有一个值，就是它本身，当变量未初始化时，该变量默认就是undefined
			当函数无明确返回时，返回的也是"undefined".定义没有返回值都是undefined*/
boolean	//*true	和	false。0是false，1是true
NAN		//not a number属于number的一种

运算符

+ - * / %
	/*加减乘除取余
	-除了表示减，还可以用于标识符
	+除了表示加，还可以用于字符串连接'abc'+'def'
++	//递增	i++ ===> i =i+i
--	//递减	i-- ===> i =i-i

/*注意：递增和递减运算符可以放在变量前，也可以放在变量后 --i 或 i--
var i = 2
console.log(++i);	先加，加完输出
console.log(i++);	先输出，在加
console.log(--i);	先减，减完输出
console.log(i--);	先输出，在减
++i	表示先加在输出
i++	表示先输出在加
*/

逻辑运算符

运算符	说明	运算符	说明
`==`	等于	`!=`	不等于
`>`	大于	`<`	小于
`>=`	大于等于	`<=`	小于等于
`&&`	与	II	或
`!`	非	-	-

示例:
1&&1 = 1	1||1 = 1
1&&0 = 0	1||0 = 1
0&&0 = 0	0||0 = 0
!0 = 1
!1 = 0

逻辑AND运算符&&
逻辑AND运算的运算符可以是任何类型，不止boolean值
	如果某个运算数不是原始的Boolean值，逻辑AND运算不一定返回Boolean值
	如果一个运算数是对象，另一个是boolean值，返回该对象
	如果两个运算数都是对象，返回是第二个对象
	如果某个运算数是null，返回null
	如果某个运算符是NaN,返回NaN
	如果某个运算符是undefined,返回undefined

逻辑OR运算符(||)
与逻辑AND运算符相似，如果某个运算数不是Boolean值，逻辑OR运算不一定返回Boolean值
	如果一个运算符是对象，并且该对象左边的运算数值均为false,则返回该对象
	如果两个运算数都是对象，返回第一个对象
	如果最后一个运算数是null,并且其他运算数值均为false，返回null
	如果最后一个运算数是NaN，并且其他运算数值为false，则返回NaN
	如果某个运算数是undefined，返回undefined
	
总结
	比较运算符 两侧如果一个是数字类型，一个是其他类型，会将其类型转换成数字类型
	比较运算符 测量如果都是字符串类型，比较高威的asc码，如果最高位相等，继续取第二位比较

控制语句

`if`，`else if`，`else` 语句

//语法
    if(..){
        ...
    }
    else if(..){
        ...
    }
    else {
        ...
    }

`switch`语句

//语法
switch (表达式){
    case	值1:语句1;	break;
    case	值2:语句2;	break;
    case	值3:语句3;	break;	//匹配到就直接退出，
    default: 语句4;			 //匹配不到就使用default，建议放到最后，不需要break
}

//示例
var week=3
switch(week){
    case 1:y="mon";break;
    case 2:y="tue";break;
    case 3:y="wed";break;
    case 4:y="thu";break;
    default: y="not defind";
}

`for`循环语句

//语法
<script>
    for (初始化;条件;增量){
        语句;
    }
</script>

//示例1
<script>
    for(var i=0;i<10;i++){
        document.write('welcome'+i+'<br>')
    }
</script>

//示例2
<script>
    var attr=[11,22,33];
	for (var i=0;i<3;i++){
    	document.write(attr[i]+'<br>');
	}
</script>

//示例3
<script>
    var attr=[11,22,33,44,55];
	for (var i=0;i<attr.length;i++){
    	document.write(attr[i]+'<br>');
	}
</script>


//示例4
<script>
    var attr=[11,22,33,44,55];
	for(i in attr){
    	document.write(attr[i]+'<br>')
	}
</script>
//这种方法在获取标签时会出现问题，看下面示例
<p>123</p>
<p>456</p>
<p>789</p>
<script>
    var eles_P = document.getElementsByTagName('p');	//getElementByTagName获取<p>标签
	for (i in eles_P){
    	console.log(i);
        console.log(eles_P[i]);	//这里通过for会出现length,item,namedItem
	}
</script>
//需要改成length来获取数据
<script>
    for(var i=0;i<eles_P.length;i++){
        console.log(eles_P[i])
    }
</script>

`while`循环

//语法
while (条件){
    语句1;
}

//示例:
var x = 0;
var i = 1;
while (x <= 100){
    x += i;
    i++;
}
console.log(x)

异常处理

//语法
try {
    console.log(x);
    throw Error('x not defined')	//从上往下运行，任何一个语句抛出异常，该代码结束运行
}
catch(e){			//如果try代码块抛出异常，catch代码块中代码就会执行，
    console.log(e); //e是局部变量，用来指定error对象或其他抛出异常
}
finally{
    console.log('finally');
}

throw ERROR('string');	//主动抛出异常

JavaScript内置对象

Object对象相关概念

由ECMAScript定义的本地对象，独立于宿主环境的ECMAScript实现提供的对象（Native Object）

由ECMAScript实现提供独立于宿主机环境的所有对象，在ECMAScript程序开始执行时出现，

开发者不必明确实例化内置对象，它已经被实例化，ECMA-262只定义了两个内置对象global和match（它们也是本地对象，根据定义每个内置对象都是本地对象）（Built-In Object）

由ECMAScript实现的宿主环境提供的对象，所有非本地对象都是宿主对象（Host Object）,

BOM和DOM都是宿主对象

Object对象：ECMAScript中所有对象都是由这个对象继承而来；Object对象中的所有属性和方法都会出现在其他对象中

ToString() 返回对象原始字符串表示

ValueOf() 返回适合该对象的原始值

对于很多对象该方法返回值都和ToString()返回值一样

内置对象

通常可以使用 typeof(object) 来显示对象类型

var Name='zhuxy'

console.log(typeof(Name))

数据对象	组合对象	高级对象
`Number` 数字对象	`Array`数组	`Object` 自定义对象
`String`字符串对象	`Math`数学对象	`Error`错误对象
`Boolean`布尔值对象	`Data`日期对象	`Function`函数对象
-	-	`RegExp`正则表达式对象
-	-	`Global`全局对象

String字符串对象

//创建String对象
	var Name='zandy'
	console.log(Name)
	//显示zandy
	var NameOne = new String('zandy')
	console.log(NameOne)
	//显示String{'zandy'}

//String属性
	length	//长度
	console.log(Name.length)
	//5

//String方法
	//编排方式
	italics()	//<i>
	bold()		//<b>
	anchor()	//<a>
	
	//大小写转换
	toLowerCase()	//小写字符串
	toUpperCase()	//大写字符串

	//获取指定字符
	charAt(index)	//返回指定位置字符
	charCodeAt(index)	//返回指定位置unicode字符

//String处理
	//获取
	substr(start,length)	//从start开始，获取length个字符
	substring(start,end)	//获取从start开始,end结束的字符
	slice(start,end)		//反向从start开始,end结束的字符

	//替换
	replace(findstr,tostr)	//替换findstr为tostr

	//分割
	split(bystr)	//以bystr进行分割

	//连接
	concat(string)

//String查询
	indexOf(findstr,index)	//返回正向索引位置
	lastindexOf(findstr,index)	//返回反向索引位置
	match(regexp)		//返回匹配的字符串
	search(regexp)		//返回找到字符串的首字符索引

Array数组对象

//创建数组对象
	var attr0 = [11,'zandy',[11,22],'zhuxy',{'Name':'zhuxyid'}];
	var attr1 = new Array(100,'test','2');
	var attr2 = new Array(2);	
	//这里是设置attr2的长度,可以写可以不写，如果调用length以这个为准，但是如果在attr2加入的超过定义的就以实际length为准
	var attr3 = new Array();

//一维数组
	attr2[1] = 11;
	attr2[2] = 'zandy';
	attr2[3] = '[11,22]';
	attr2[4] = 'zhuxy';
	attr2[5] = {'name':'zhuxyid'};
	attr2[0] = 'zhuxyid'
	for (var i=1;i<attr2.length;i++){
   	 console.log(attr2[i])
	}

//多维数组
	var attr4=new Array(5);
	for(var i=0;i<=6;i++){
        attr4[i]=new Array(2);
    }
	attr4[0][0]="周一";
	attr4[0][1]="MON";
	attr4[1][0]="周二";
	attr4[1][1]="TUE";
	console.log(attr4);
	//返回7个Array对象
	console.log(attr4.length);
	//长度为7
	console.log(attr4[0].length);
	//长多为2

//Array方法
	//获取
	slice(start,end)	//通过数组元素 开始和结束 获取数组
	splice(start,delete,value)
		start	//开始索引
		delete	//删除数组元素个数
		value	//在删除位置插入的数组元素

		//实例
		var a = [11,22,33,44,55];
		a.splice(1,2);	//显示11,44,55，从索引1到2删除2个
		a.splice(1,1);	//显示11,55,	  从索引1删除,删除1个
		a.splice(1,0,2,3)	//显示11,2,3,55	索引1开始删除0个插入2,3

	//进出栈
	push()		//末端入栈操作	返回长度
	pop()		//末端出栈操作	弹出数据
	unshift()	//首段入栈操作
	shift()		//首段出栈操作

	//连接
	join(bystr)		//返回有bystr连接数组元素组成的字符串
		//实例
		var attr1=[1,2,3,4];
		var str = attr1.join('-');
		console.log(str)
		//1-2-3-4

	toString()		//所有对象都有toString方法，转换成字符串**
	concat(value,..)//返回添加参数中元素后的数组,类似list的extend方法
		//实例
		var attr1=[1,2,3,4];
		var b = attr1.concat(11,22)
        console.log(b)
		//1,2,3,4,11,22

	//排序
	reverse()	//反向数组
	sort()		//正向数组,这里只是首字母排序

	//实现数字排序，实例
	var lst=[5,32,123,44,23,55,1,40,42]
	function sorted(x,y){
        if(x>y){
            return 1;
        }else if(x<y){
            return -1;
        }else{
            return 0;
        }
    }
	//或者
	function sorted1(x,y){
        return x-y;
    }
	console.log(lst.sort(sorted1))

Function函数对象

函数创建

//创建函数方法
//方法1
function Sum(x,y){
	return x+y
}
console.log(typeof(Sum))	//function
console.log(Sum(1,2))		//3
console.log(Sum('hello','js'))	//hello js
console.log(Sum.length)		//2
	
//方法2
sum = new Function("x","y","return x+y")
console.log(sum(1,2))

//在javascript中，调用函数在定义函数之上也可以使用，javascrpt是先加载js在调用

调用函数

//调用函数
function add(x,y,z){
	return x+y+z;
	}
console.log(add(1,2,3,4))	//返回6，如果多，js不会报错，有多少用多少，剩下的忽略
console.log(add(1,2))		//返回NAN，如果少，js不会报错，但是返回NAN
console.log(add(1,2,'123'))	//返回3123，两个参数相加，最后一个参数拼接
console.log(add(1,2,parseInt('1')))	//返回4
console.log(add(1,2,parseInt('123hello')))	//返回126
//parseInt()	是将字符串转换数字，如果是字符不转换

//也可以赋值调用
function fn(x,y){
	return x+y;
}
var a=1;
var b=2;
console.log(fn(a,b))	//返回3

//arguments		传入的对象都放在arguments里
function fn1(arg){
	var x=0
	for(var i=0;i<arguments.length;i++){
		x+=arguments[i]
	}
		console.log(x)
	}
fn1(1,2,3,4,5)	//返回21

匿名函数

//匿名函数
	//匿名函数通常不能放在定义函数之上，否则不能调用
	//func('hello');
	var func = function(arg){
		alert(arg)
	}
	func('hello')
	//相当于
	(function(arg){alert(arg);})('hello')

作用域

//示例
var x=10;
if(x=10){
    var x=12;
}else{
    var x=8
}
console.log(x)	//返回12

var x=10;
function fn(x){
    if(x=10){
        var y=12;
    }else{
        var y=8;
    }
    return y;
}
console.log(fn(10))	//返回12
console.log(x)		//返回10
console.log(y)		//Y is not defined不能找到函数体

嵌套作用域

//示例
var city='nj';
function func(){
    var city='sh';
    function inner(){
        var city='bj';
        console.log(city);
    }
    inner();
    console.log(city);
}
func()	//返回bj,在返回sh
console.log(city)	//返回nj
//类似python中闭包

var city='nj';
function Bar(){
    console.log(city)
}
function func(){
    var city='sh';
    return Bar
}
var ret=func()
ret()	//返回nj

BOM对象

游览器对象模型（Browse Object Models）

对游览器窗口进行访问操作，使用BOM，开发者可以移动窗口，改变状态栏中文本以及执行其他页面内容的动作

使javascript又有能力跟游览器交互。

BOM对象模型

Window对象

所有游览器对象都支持window对象

概念上来说：一个html文档相当于一个window对象

功能上来说：控制游览器窗口

使用上来说：window对象不需要创建，直接调用

//window方法：
//window默认是一个全局变量，可以不加window直接调用下面的方法
	alert()		//显示带有一段消息和一个确认按钮警告

	confirm()	//显示带有一段消息以及确认按钮和取消按钮的对话框，可以交互也可以赋值给其他变量，取消是false确认是true
		ret = confirm('满十八岁了么?')	//弹出框显示hello，如果取消是false，如果确认是true
		console.log(ret)

	prompt()	//显示可提示用户输入对话框以及确认和取消按钮，可交互
		ret = confirm('心情怎么样');
		console.log(ret)

	open('url')	//打开新的对话框
		open('http://www.baidu.com')

	close()		//关闭当前窗口
	
	setInterval(fun(),1000)	//按照指定的周期(毫秒)调用函数计算
	
	clearInterval()	//取消setInterval()设置的timeout
	
	setTimeout()	//在指定毫秒后调用函数

	clearTimeout()	//取消setTimeout()设置timeout
	
	scrollTo()		//将内容滚动到指定坐标

History对象

history对象包含用户（在游览器窗口中）访问过的url

history是window对象一部分，可通过window.history属性对其进行访问

length返回游览器历史列表的url数量

//history方法
	back()		//加载history列表中的前一个url
	forward()	//加载history列表中的下一个url
	go()		//加载history列表中某个具体页面

//实例
//history1.html
<a href="history2.html"> href>></a>
<button onclick="history.forward()">forward>></button>
<button onclick="hostory.go(1)">go>></button>

//history2.html
<button onclick="history.back()"> back </button><br>
<button onclick="history.go(-1)"> go </button><br>

//通常history用的不多

Location对象

Location 对象包含有关当前URL信息

Location对象是windows对象一部分，也可以通过window.location属性访问

//Location方法
	localtion.assign(URL)		//跳到URL,可以返回
	localtion.reload()			//刷新
	localtion.replace(newURL)	//跳到URL，不可用返回，替换了原来的url


//实例
function fn(){
    location.replace('http://www.baidu.com');
    //location.reload();
    //location.replace('http://www.baidu.com');
}
<button onclick="fn()">test</button>

ECMAScript

JavaScript基础

引入方式

变量

代码块

标识符

保留字

数据类型

运算符

逻辑运算符

控制语句

if，else if，else 语句

switch语句

for循环语句

while循环

异常处理

JavaScript内置对象

String字符串对象

Array数组对象

Function函数对象

函数创建

调用函数

匿名函数

作用域

BOM对象

Window对象

History对象

Location对象

`if`，`else if`，`else` 语句

`switch`语句

`for`循环语句

`while`循环