JavaWeb学习的第六天(JavaScript之ECMAScript详解)

一、JavaScript的发展历程

1. 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C--	,后来更名为:ScriptEase
2. 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
3. 1996年,微软抄袭JavaScript开发出JScript语言  C#  2000 
4. 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)  
注意:
1.JavaScript是由三部分组成,今天先对ECMAScript进行解析
2.JavaScript与Java没有联系,只是因为当时请来了sun公司的专家进行修改,所以在基础语法上与Java类似
3.JavaScript是一门前端的脚本语言

二、JavaScript的定义和作用

1.什么是JavaScript??

JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)
脚本语言:不需要编译,边执行边翻译
Java语言:需要先翻译成字节码class文件,才能够执行

2.如何使用JavaScript

1.先定义一个html文档,然后在文本的任意位置输入下面内容
<script>
	alert(123)
</script>
2.在外部先新建一个JavaScript(abc.js)文档,然后在里面键入alert(123),然后再html中输入<script src="abc.js"></script>

3.注意的小细节

小细节1:必须这样闭合<script></script>,不能写成<script/>
小细节2:<script type="text/javascript"></script> -->type=""可以不用写,因为默认就是这种属性

不同于Java,js单行注释:ctrl+/   js多行注释:ctrl+shift+/
js的注释和html的注释完全不一样:html的注释:<!-- -->

4.JS的变量定义

4.1 js的变量定义:需要使用统一的关键字var,可以给它赋任意类型的值
4.2 变量的本质:内存中的一小块内存空间,在Java中必须明确类型,也就是明确内存空间的大小,在js中并没有定义类型,只定义了变量,不会出问题
4.3 java语言是静态语言(强类型语言)--针对内存占用,一定义一个类型就已经明确了所占的内存空间的大小
4.4 js是动态语言(弱类型语言)---var没有定义数据类型,它可以自由的从各种类型之间转换

4.5 i=10 alert(i) js语法并不严谨,没有定义var,但是也可以正常执行,这是由浏览器导致的

5.使用和不使用var的区别

5.1 局部变量和全局变量,在函数内部定义了变量,这个变量是局部变量;
5.2 但是不用var,无论在什么位置使用都是全局变量(设计上的巨大bug),会出现变量穿透,在js的最前面加'use strict'

6.定义的变量统一用var,可以赋哪些类型的值??

6.1 数据类型:ECMAScript有5种原始类型
	undefined  未定义,定义了一个变量,没有给它赋值,它的数据类型就是Undefined
	null  空对象的占位符,Null运算完后是object类型,js上设计上的一个bug
	boolean
	number
	string  没有字符类型和字符串类型的区分,都是String类型,可以使用双引单引
	typeof运算符:获取变量的类型
6.2 引用类型:用一个变量去接收一个对象 var i=new Date();它是object类型

7.JS的运算符

7.1 算术运算符:+-*/% ++ --和Java中的算术运算符没有区别,它有设计缺陷:var i=-"abc"也没有问题  alert(i)  NaN var i=-"123",作为一个字符串类型,也可以打印出-123
7.2 赋值运算符:+= *= -= /=和Java中的赋值运算符没有区别
7.3 比较运算符:== != > < >= <= 得出true or false
	  1.重点关注比较运算符的 ==等于 ===全等于的区别
		var a=10;
		var b="10";
		alert(a==b) -->true,  ==的比较方式:先比较类型,如果类型不一致,先进行类型的转换,然后再进行比较
		alert(a===b) -->false,  ===的比较方式:先比较类型,如果类型不一致,直接返回false
	  2.NaN(不是数字的数字类型)和任意类型比较都是false,NaN和NaN类型比较也是false,它本身就是一个bug
7.4 逻辑运算符:&& || !
		细节var a=1;  var b=true;  a&&b(true) 0&&true(0):bug
		在java里面不能进行逻辑运算(不是两边都是表达式),但是在js里面可以进行逻辑运算
		在js里面进行逻辑运算先进行类型的转换,再进行逻辑运算
		0或NaN代表的是假 1代表的是真  true:1  false:0
		var a="abc";  var b=true;  ""&&true(false)
		除了空字符串,其它的逻辑运算都为true
		
		undefined null都为false  所有的对象都为true
		var a=new Date();
		判断对象是否为空
		if(a){
		    alert(); //insert into code
		}
7.5 三元运算符:var i=10; i>10?i:10;  if else switch for循环和java没有区别

8.ECMAScript函数

8.1 W3C给出的函数定义:var function_name=new function(arg1,arg2...,function_body)

8.2 Java中的函数
		public void method1(int a,int b){
		    //函数体
		}

8.3 JS中的函数(如果方法体中的代码很多)
		1.定义函数的第一种方式 优点:方便 缺点:可读性太差,不利于维护
			var method1=new Function("a","b","alert(a)");
		2.定义函数的第二种方式
			function method2(a,b,c){
			    alert(a+b+c);
			}
		3.定义函数的第三种方式:函数名变成了一个变量
			var method3= function(a,b,c){
			    alert(a+b+c);
			}
8.4 为什么用一个变量去接收函数??
	 	1. ECMAScript Function对象(类)
		2. JS中的函数(方法)function都是对象,对象method3有属性和方法
		3. method3.toString(); method3.length;对象的length属性,length代表的函数中写的参数的个数
		4. 写代码经常犯一个错:method3():方法调用  method3:方法的对象
	
8.5 方法上虽然声明了参数,但是没有传参数,也可以运行!!
8.6 JS中函数声明的参数和最终调用的时候传递的参数的个数并不需要一一对应,形参定义了一个,但是实参传了两个,并不会忽略后的实参,解决实参和形参不一致的方法:通过arguments
		function method2(a){
		    alert(arguments.length);
		    alert(arguments[0]);  //arguments是一个数组,可以通过下标接收全部的参数
		}
		method2(1,2,3,4,5,6)
8.7 JS中定义方法对象的时候不需要声明返回类型,在方法中可以直接返回结果
		function method2(a,b){
		    return a+b;
		}
		var c=method2(1,2);
8.8 JS的方法注意事项:JS的方法本质上是一个对象 --> method:方法的对象  method():方法调用

9.JS的常用对象,不完全面向对象,提供了常用的API

9.1 Array
	创建数组的三种方式
	   var array=new Array();
	   var array=new Array(5);//指定长度并没有太多意义
	   var array=new Array("张三","李四","王五");
	   {}在JS里面有特殊的含义:JS中的一类专门的对象JSON
	简易写法 var array=["张三","李四","王五"]
	给数组元素赋值:角标赋值 array[0]=1 array[1]=2
	遍历数组取值:通过fori  在控制台打印:console.log(array[i]),浏览器开发者工具:F12-->console  Network-->监测请求



9.2 Boolean对象


9.3 Date:用于处理日期和时间的对象


9.5 Number:原始数值的包装类 Number.NaN new Number(100).toString(16);//将十进制100转换成16进制

9.6 Math对象 Math.PI;//3.141592653589793 Math.ceil(1.25)//2 random();//0-1的小数产生一个1-100之间的随机数Math.random()*100; [0,100) Math.floor(Math.random()*100)+1 [1,100]


9.7 String对象 var b="bianyiit"; b.length/8



9.8 RegExp:正则对象 表单校验:检验字符串的格式要求

1 正则对象的两种创建方式
	var reg=new RegExp("\\w"); reg.test(b);//字符串中必须要包含字符 A-Z a-z 0-9 _
	var reg=new RegExp("^[a-z]{6,16}$");
	var reg=/[a-z]/;
2 语法:
	1.完整的去匹配某个字符,只要含有a/b/c就会返回true /[abc]/
	2.[^abc]---查找任何不在方括号之间的字符
	3.匹配多个字符--匹配包含“ab”这个字符串的内容  var reg=/[a][b]/
	4.n+ 匹配任何包含至少一个n的字符串  var reg=/[a-zA-Z0-9]/  var reg=/[a-z]+/
	5.n{X}匹配包含X个n的序列的字符串。 var reg=/[a-z]{4}/
	需求:完整匹配字符串是否满足6-16的字符串
	6.n{X,Y}匹配包含X或Y个n的序列的字符串。 var reg=/[a-z]{6-16}/ 一下就找到了这个字符串
	7.^n匹配任何开头为n的字符串。 var reg=/^[a-z]{6-16}/
	8.n$匹配任何结尾为n的字符串。 var reg=/^[a-z]{6-16}$/  从字符串的开始位置匹配到结束位置
3 总结:
	1.正则对象创建的方式有两种
	2.方法
	    exec检索字符串中指定的值。返回找到的值,并确定其位置。
	    test检索字符串中指定的值。返回 true 或 false。
	3.语法
4 需求:校验字符串是否满足163邮箱格式
	[email protected]  前面的邮箱用户名必须是6-16位单词字符 最后必须是.com结尾
	var x="[email protected]";
	var reg=/^[0-9a-zA-Z_]{6,16}@163.com$/;
	reg.exec(x);-->["[email protected]", index: 0, input: "[email protected]", groups: undefined]
	
	var reg=/^[0-9a-zA-Z_]{6,16}@(qq|163).com$/;
	abc代表的是一个字符串 abc  而[abc]代表一个范围 a/b/c

三、教大家如何使用浏览器编写JavaScript脚本

1.在IDEA里面创建一个Html页面,在这个页面中写js脚本代码
2.打开任意一个浏览器,按F12/Fn+F12,打开浏览器开发者模式
3.找到Console,进入浏览器开发者的控制台,在这里可以直接写js脚本,浏览器会自动编译执行

发布了73 篇原创文章 · 获赞 11 · 访问量 2449

猜你喜欢

转载自blog.csdn.net/weixin_43908333/article/details/103551508