W3C三剑客——JavaScript基础快速入门（一）基本语法结构

1.JavaScript历史故事

1990年底，欧洲核能研究组织（CERN）科学家 Tim Berners-Lee，在全世界最大的电脑网络——互联网的基础上，发明了万维网（World Wide Web），从此可以在网上浏览网页文件。最早的网页只能在操作系统的终端里浏览，也就是说只能使用命令行操作，网页都是在字符窗口中显示，这当然非常不方便。

1994年10月，NCSA 的一个主要程序员 Marc Andreessen 联合风险投资家 Jim Clark，成立了 Mosaic 通信公司（Mosaic Communications），不久后改名为 Netscape。这家公司的方向，就是在 Mosaic 的基础上，开发面向普通用户的新一代的浏览器 Netscape Navigator。

Netscape 公司很快发现，Navigator 浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为。当时，网速很慢而且上网费很贵，有些操作不宜在服务器端完成。比如，如果用户忘记填写“用户名”，就点了“发送”按钮，到服务器再发现这一点就有点太晚了，最好能在用户发出数据之前，就告诉用户“请填写用户名”。这就需要在网页中嵌入小程序，让浏览器检查每一栏是否都填写了。

1995年，Netscape 公司雇佣了程序员 Brendan Eich 开发这种网页脚本语言。Brendan Eich 有很强的函数式编程背景，希望以 Scheme 语言（函数式语言鼻祖 LISP 语言的一种方言）为蓝本，实现这种新语言。

1995年5月，Brendan Eich 只用了10天，就设计完成了这种语言的第一版。它是一个大杂烩，语法有多个来源。

• 基本语法：借鉴 C 语言和 Java 语言。
• 数据结构：借鉴 Java 语言，包括将值分成原始值和对象两大类。
• 函数的用法：借鉴 Scheme 语言和 Awk 语言，将函数当作第一等公民，并引入闭包。
• 原型继承模型：借鉴 Self 语言（Smalltalk 的一种变种）。
• 正则表达式：借鉴 Perl 语言。
• 字符串和数组处理：借鉴 Python 语言。

为了保持简单，这种脚本语言缺少一些关键的功能，比如块级作用域、模块、子类型（subtyping）等等，但是可以利用现有功能找出解决办法。这种功能的不足，直接导致了后来 JavaScript 的一个显著特点：对于其他语言，你需要学习语言的各种功能，而对于 JavaScript，你常常需要学习各种解决问题的模式。

2.Java与JavaScript的关系

• 实际上，Java与JavaScript并没有什么太大的关系，甚至设计者本人Brendan Eich十分地讨厌Java的笨重语法结构。
• Java 语言需要编译，而 JavaScript 语言则是运行时由解释器直接执行。
• Java是静态的语言，而JavaScript是一门动态语言。
• 至于为什么取名为JavaScript，是因为Netscape 的程序员大多都是Java的信徒，而且Java当时正处于火热阶段，所以取名JavaScript纯粹只是为了蹭一下Java的热度

3.JavaScript 与 ECMAScript 的关系

1996年8月，微软模仿 JavaScript 开发了一种相近的语言，取名为JScript（JavaScript 是 Netscape 的注册商标，微软不能用），首先内置于IE 3.0。Netscape 公司面临丧失浏览器脚本语言的主导权的局面。

1996年11月，Netscape 公司决定将 JavaScript 提交给国际标准化组织 ECMA（European Computer Manufacturers Association），希望 JavaScript 能够成为国际标准，以此抵抗微软。ECMA 的39号技术委员会（Technical Committee 39）负责制定和审核这个标准，成员由业内的大公司派出的工程师组成，目前共25个人。该委员会定期开会，所有的邮件讨论和会议记录，都是公开的。

1997年7月，ECMA 组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript。这个版本就是 ECMAScript 1.0 版。之所以不叫 JavaScript，一方面是由于商标的关系，Java 是 Sun 公司的商标，根据一份授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 已经被 Netscape 公司注册为商标，另一方面也是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

ECMAScript 只用来标准化 JavaScript 这种语言的基本语法结构，与部署环境相关的标准都由其他标准规定，比如 DOM 的标准就是由 W3C组织（World Wide Web Consortium）制定的。

ECMA-262 标准后来也被另一个国际标准化组织 ISO（International Organization for Standardization）批准，标准号是 ISO-16262。

4.现在JavaScript版本

• 现在大多数开发使用的都是ES6版本，但是大部分浏览器支持的还是ES5的版本
• 但这并不影响我们的学习，后期前端工程可以通过Webpack技术打包转化为ES5可以兼容的版本

ECMAScript6（简称ES6）是于2015年6月正式发布的 JavaScript 语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言

5.快速入门

• 如何使用JavaScript？
• 熟悉Js的基本语法
• 了解js的基本数据类型
• 了解js的引用数据类型
• 理解js中对象的概念
• 了解函数与闭包
• 熟悉掌握DOM相关
• 了解BOM相关
• 了解 Ajax 异步通信

5.1JavaScript如何使用

• JavaScript的应用场景
  • Js最先被人们认知的应用一般都是网页脚本，W3C三剑客，JS控制的恰巧是网页的行为
  • 除此之外可能还有人知道它可以拿来做一些后端语言应用
  • 还可以拿来安卓应用的开发，也会用到JS
  • 微信小程序中也有JS的身影
  • 甚至，在做嵌入式开发，单片机也看到了JS的身影
  • …
  • 太强了吧！
• 那么我们在Web网页开发中该如何使用Js呢？
  • 第一种使用方式：在Html中通过Script标签,在Script标签内部来写js代码
  • 第二种使用方式：通过Script标签引入外部JS文件，注意：一但该Script标签用来引入外部JS文件，那么该标签内部将不能再写js代码，即使写了也不会生效

<script>
        alert("hello JavaScript");
</script>

<SCript src="../js/Hello.js"></SCript>

5.2 第一行js代码

• alert(内容); // 弹出消息提示框

• 注意在Js中每条语句都要以 ; 结尾，在Js中没有编译，如果语法错误，要打开浏览器的控制窗口（按F12）找到Console进行查看

• JS的注释与Java基本一致

<script>
        alert("hello JavaScript");  // alert(内容)是一个函数，其会生成一个弹窗弹出消息
</script>

5.3 js中的变量定义

• var 关键字
• Js是弱类型的语言，对量类型要求比较宽松
• 写啥就是啥类型
• JS数据类型：
  String 字符
  Number 数字
  Boolean 布尔
  Null 空值
  Undifine 未定义
  Object 对象
• console.log(内容) 该函数可以帮助我们在浏览器的控制台输出内容，相当于print
• typeof关键字可以用来查看数据的类型

/* 
				JS数据类型：
				String   字符
				Number   数字
				Boolean  布尔
				Null     空值
				Undifine 未定义
				Object   对象
			 
			 */
			
			var str = "hello";
			var abc = "abc";
			var num = 123456;
			
			console.log(typeof str);
			console.log(typeof num)
			
			console.log(Number.MAX_VALUE); //number最大值
			console.log(Number.MAX_VALUE * Number.MAX_VALUE); //Infinity 无穷大  类型Number
			console.log(Number.MIN_VALUE);  // number 正数最小值
			console.log(str *abc);   //NaN  --> not a Number  类型Number
			
			
			var a,b;
			a=0.1;
			b=0.2;
			console.log(a+b);  //小数计算会有精度问题
			
			a=123;
			b=321;
			console.log(a+b);
			
			
			/* 
			 Boolean 布尔
			 true 真  false 假
			 */
			var bool = true;
			console.log(typeof bool);
			
			
			/* 
			Null 和 Undefine
			 
			 Null 只有一个值 null 当检测其类型时会返回Objec
			 
			 */
			
			var nu=null;
			var und = undefined;
			
			console.log(typeof nu);
			console.log(typeof und);

• 扩展

			// alert("hello JavaScript");  //警告提示框
			// document.write("hello JavaScript");  //向body中写入文本
			// console.log("helloconsole");         //向控制台输出内容
	

• 标识符规范

/* 
			标识符
			1.由 数字、字母、_、$组成
			2.不能以数字开头
			3.不能是ES中的关键字，和保留字符
			4.一般使用驼峰命名法，首字母小写
			
			所有我们可以自主命名的都是标识符，例如：变量名、函数名、属性名
			 */
			
			var a=1;
			console.log(a);
			document.write(a);
			//alert(a);

5.4数据类型转换

1. 调用toString() 方法，转换成字符串
   -toString不会影响原来的变量，但是会产生一个新的字符串
   -null 和 Undefine 没有toString()方法

2. 调用String()函数
   -对于Number和Boolean而言是直接调用 tostring方法；
   -对于Null和Undefine而言是加 改为引号赋值

• 将其他类型转换成Number类型

1. 使用Number()函数
   – 字符串转Number时会判断是否为数字，如果为非数字则会输出NaN，如果是空串则转化为0
   – Boolen 转Number, true—> 1 false —> 0
   – Null 转Number，转化成0
   – Undefine 转Number —> NaN
2. ParseInt()、ParseFloat函数
   – 会自动解析字符串中的有效数字，将数字部分提取出来并进行转换，从左至右取到非数字位为止
   – praseFloat可以获取字符串中有效的小数

	/* 
	 强制类型转换
	 1.调用toString() 方法，转换成字符串
	 -toString不会影响原来的变量，但是会产生一个新的字符串
	 -null 和 Undefine 没有toString()方法
	 
	 
	 2.调用String()函数
	 
	 -对于Number和Boolean而言是直接调用 tostring方法；
	 -对于Null和Undefine而言是加 改为引号赋值
	 
	 */
	
	var a;
	a = 12345;
	
	a = a.toString();
	console.log(a);
	console.log(typeof a);
	
	a = true;
	a = a.toString();
	console.log(a);
	console.log(typeof a);
	
	a = null;
	//a.toString();   //报错
	
	a = undefined;
	//a.toString();  // 报错
	
	
	
	/* 
	 将其他类型转换成Number类型
	 
	 1.使用Number()函数
	 -- 字符串转Number时会判断是否为数字，如果为非数字则会输出NaN，如果是空串则转化为0
	 -- Boolen 转Number, true---> 1 false ---> 0
	 -- Null 转Number，转化成0
	 -- Undefine 转Number ---> NaN
	 
	 
	 2.ParseInt()、ParseFloat函数
	 -- 会自动解析字符串中的有效数字，将数字部分提取出来并进行转换，从左至右取到非数字位为止
	 -- praseFloat可以获取字符串中有效的小数
	 
	 
	 */

• 调用Boolean()函数；
  – 数字转Boolean 除了0和NaN其他都是true
  – 字符串转Boolean 除了空串其余都是true
  – Null、Undefine 转Boolean —> false

			var a;
			a = 0x123;  // 0x开头表示16进制数
			console.log(a);
			
			a = 020;  // 以0开头的数字表示8进制
			console.log(a);
			
			 
			//a = 0b12;  // 以0b开头表示二进制数，但不是所有浏览器都支持，比较少使用
			//console.log(a);

			a = "020";
			//parseInt(a);  //部分浏览器会将其当做八进制进行解析故需要传入第二参数
			a = parseInt(a,8);
			console.log(a);


		/* 
		调用Boolean()函数；
		-- 数字转Boolean 除了0和NaN其他都是true
		-- 字符串转Boolean 除了空串其余都是true
		-- Null、Undefine 转Boolean ---> false
		 */

5.5运算符

• 算术运算符和typeof运算符

  1. typeof运算符 ----> 获取数据类型，返回值为一个字符串

2. 算术运算符 +、-、*、/、%
   【当对非数字类型进行运算时会自动将其转化为数字类型再进行计算，任何数字和NaN计算都得NaN
   若是两个字符串相加则是字符串拼接操作，任何类型数据和字符串做加法都会转化为字符串然后做拼接操作】
   【若是做- 、 / 、 *操作则会全部转化为数字类型再做运算操作】

/* 
		 1. typeof运算符   ----> 获取数据类型，返回值为一个字符串
		 2. 算术运算符 +、-、*、/、%  
			【当对非数字类型进行运算时会自动将其转化为数字类型再进行计算，任何数字和NaN计算都得NaN
			 若是两个字符串相加则是字符串拼接操作，任何类型数据和字符串做加法都会转化为字符串然后做拼接操作】
			【若是做- 、 / 、 *操作则会全部转化为数字类型再做运算操作】	 
		 */	
		
		var a;
		a = NaN;
		a = a + "";
		console.log(a);
		console.log(typeof a);
			
		a = 123;
		a = a - "1";
		console.log(typeof a);
		console.log(a);

• 一元运算符

/* 
				1. + 、 -
				+ 不会对数值产生影响
				- 取相反数
			 
			 */
			var a = -1;
			a = +a;
			console.log(a);
			console.log(typeof a);
			
			a = -a;
			console.log(a);
			console.log(typeof a);
			
			a = "-1";
			a = -a;
			console.log(a);
			console.log("字符串的-操作："+typeof a);
			
			a = true;
			a = -a;
			console.log(a);
			console.log(typeof a);

• 条件运算符

			/* 
			条件运算符：
			 
				--语法
				条件语句?语句1:语句2	
				如果条件判断为true则执行语句1；否则执行语句2,或者返回；
				如果判断条件为一个非布尔值则会进行布尔值类型转换再做判断；
			 
			 */
			
			// true?alert("此时为true！"):alert("此时为false");
			// false?alert("此时为true"):alert("此时为false");
			
			var a = 20;
			var b = 40;
			var c = 50;
			var max;
			// a>b?alert("a大"):alert("b大");
			// max = a > b ? a : b;
			// console.log(max)
			
			// 不推荐使用，不方便阅读
			max = a>b?a>c?a:c:b>c?b:c;
			console.log(max);

• 逻辑运算符

• 逻辑运算符与Java一致 && 、||、 ！

	
		var a = 1 || 2;

		console.log(a);  //1 前者
				
		a = 1 && 2;
		console.log(a); //2 后者
		
		a = !1;
		console.log(a); // false 取反
			
		a = 1 || 2 && 3;  // &&优先级更高
		console.log(a);  //1
		

• 比较运算符

1. == 判等，会自动进行类型转换，只比较数值
2. != 不等，会自动进行类型转换，之比较数值
3. === 全等，比较数值和类型
4. !== 不全等，比较数值和类型

var a = 1;
			console.log(a=="1"); // true
			console.log(a!="1"); // flase
			console.log(a==="1"); // flase
			console.log(a!=="1"); // true

     - 自增运算符**i++，++i**,自减运算符 **i--，--i**
     - 其他运算符将在下列章节中具体用到时介绍

5.6if语句与prompt()函数

1. javascript中的if语句与Java中一本一致

2. prompt()函数，会弹出一个带可输入文本框的提示框；

/* 
		 1.javascript中的if语句与Java中一本一致
		 2.prompt()函数，会弹出一个带可输入文本框的提示框；
		 
		 
		 案例：
		 成绩 > 90 优
		 成绩 > 80 良
		 成绩 > 70 中
		 成绩 > 60 及格
		 其他 不及格
		 */
		
		var sorce;
		
		sorce = prompt("请输入你的成绩：");
		while(true){
		if(sorce > 100 || sorce < 0)
		{
			sorce = prompt("输入有误，请从新输入：");
		}
		else{
		if(sorce > 90)
		{
			document.write("评级:优");
		}else if(sorce > 80){
			document.write("评级:良");
		}else if(sorce > 70){
			document.write("评级:中");
		}else if(sorce > 60){
			document.write("评级:及格");
		}else{
			document.write("评级:不及格");
			}
			break;
		}
		}

5.7Switch语句

• switch多分支语句，JavaScript的switch语句更为开放和灵活，输入的值限制明显减少，而且灵活高效

	/* 
			switch多分支语句：
			 */
			var sorce;
			sorce = prompt("请输入成绩：");
			
			/* 实现方式一 */
			// switch(parseInt(sorce/10))
			// {
			// 	case 6 :
			// 	case 7 :
			// 	case 8 :
			// 	case 9 :
			// 	case 10 :
			// 	alert("合格");break;
			// 	default:
			// 	alert("不合格");
			// 	break;
			// }
			
			/* 实现方式二： */
			
			switch (true){
				case sorce>=60:
					alert("合格");
					break;
				default:
					alert("不合格");
					break;
			}

5.8Unicode编码（了解）

• 编码表了解，链接跳转

5.9循环语句

• JavaScript的循环有四种
• while循环
• do … while循环
• for循环
• 增强for循环
• 四种循环与Java中用法基本一致。
• 具体用法链接跳转至以前JavaSE篇博客

5.10 对象的概念

对象分类：

1.内建对象：
- 由ES标准中定义的对象，在任何ES的实现中都可以使用
- 比如，Math、String、Number、Boolean、Function、Object…

2.宿主对象：

• 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
• 比如DOM 、BOM

3.自定义对象：

• 由开发人员自己定义的对象

• 创建对象：
  使用new关键字调用函数，是构造函数constructor
  构造函数是专门用来创建对象的函数
  使用typeof检查对象时返回Object

• 增加属性与修改属性请查阅下列代码：

/* 
			对象分类：
			 1.内建对象：
			 - 由ES标准中定义的对象，在任何ES的实现中都可以使用
			 - 比如，Math、String、Number、Boolean、Function、Object...
			 
			 2.宿主对象：
			 - 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
			 - 比如DOM 、BOM
			 
			 3.自定义对象：
			 - 由开发人员自己定义的对象
			 
			 */
			
			
			/*
			 创建对象：
			 使用new关键字调用函数，是构造函数constructor
			 构造函数是专门用来创建对象的函数
			 使用typeof检查对象时返回Object
			 */
			var obj = new Object();
			// console.log(obj);  //{}
			// console.log(typeof obj); //object
			
			/* 
			给对象添加属性 
			 */
			
			obj.name = "孙悟空";
			// console.log(obj);
			obj.gender = "男";
			obj.age = 300;
			console.log(obj);  // {"age":300,"gender":"男","name":"孙悟空"}
			
			/* 
			 读取属性
			 object.属性
			 如果读取对象中没有的属性不会报错，返回undefined
			 */
			console.log(obj.name); // 孙悟空
			console.log(obj.hello); // undefined
			
			
			/* 
			 修改属性：
			 obj.属性名 = 新值
			 */
			obj.name = "猪八戒";
			console.log(obj.name);
			
			/* 
			 删除对象属性 delete obj.属性名
			 */
			delete obj.name;
			console.log(obj.name);

• 向对象中添加一个属性
• in运算符

var obj = new Object();
			
			/* 
			向对象中添加一个属性
			属性名：
			- 对象的属性名不强制要求遵守标识符规范，但是我们要尽量按标准去命名
			- 如果要使用特殊符号来命名不能采用  对象.属性名 的方式来操作
			- 需要使用另一种添加属性的方式来添加以及操作语法  obj["属性名"] = 值；
			 
			 obj["属性名"] 这种方式[]中可以直接传入一个变量，会自动去变量里的值
			 */
			
			obj["123"] = 789;
			console.log(obj);
			console.log(obj["123"]);
			
			/* 
			对象的属性值可以适任何数据类型包括Object 
			 */
			obj.obj = new Object();
			obj.obj.name = "你好，我是对象的对象";
			
			console.log(obj);
			console.log(obj.obj.name);
			
			/* 
			 in 运算符
			 - 可以检查一个对象中是否含有指定的属性，如果有返回true，没有则返回false
			 - 语法：  "属性名" in 对象
			 */
			
			console.log("test2" in obj);
			console.log("123" in obj);

• 对象字面量，创建一个对象

/* 
			对象字面量，创建一个对象
				
			 */
			
			var obj = {};
			console.log(obj);
			console.log(typeof obj);
			
			
			/* 
			 使用字面量的方式创建对象时可以直接添加属性
			 */
			
			var obj2 = {name:"猪八戒",age:800,hight:"185"};
			console.log(obj2);
			console.log(typeof obj2);

对象内存解析