一、 3个javaScript的作用

JavaScript表单验证，减轻服务器压力
页面特效
交互效果

只有熟悉JavaScript的作用我们才能够正在的理解和使用JavaScript，才能够熟悉，为啥要学习JavaScript，学习了，对于写前端代码有什么效果和作用。

1.JavaScript表单验证，减轻服务器压力

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

QQ通信时，QQ客户端在局域网内，当你打开QQ登录到QQ服务器时，通过外网，你的客户端与QQ服务器建立了一个长连接。你可以用netstat-bn 看到此连接的状态是 establish。登录时必须验明真身，不是什么人都可以连接到服务器，而且是需要绑定手机号等等一些可以证实真实身份的凭证。这使得一个用户只能注册一个账号（也有注册早的人，当时上网的人数较少，服务器没有提出这么严格的要求，所以现在也存在某些用户拥有多个QQ账号的情况），登录Id。再如百度网盘，百度网盘是一种虚拟的存储空间，注册账号会自动分配2T的网络存储空间，假设每人注册n个账户，那么一个人理论上可以2*n T的容量，当n趋于无穷大时，服务器还可以工作嘛？？如果人数基数再大一些呢？？显然在对服务器发送连接请求时，验证身份，限制注册用户的数量，可以减轻服务器的压力。

2.页面特效

提供一个实时时钟的例子，通过JavaScript中内置的Date对象调用时间，动态实时的改变检测时间，并显示在网页上面。下面两张是效果图，很炫酷，每次时间改变都会有小球碰出来。

如果有需要的可以联系我，可以提供大家动态的实时时钟代码。

3.交互效果

交互效果也是JavaScript的一大作用之一，对于程序员来说特别重要的，这里直接给出效果图和配上代码。

// An highlighted block
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<script>
		//第一种：先定义变量，再赋值
			var num1;
			num1 = 2;
		//第二种: 定义变量的同时赋值
			var num2 = 3.5;
		//第三种: 直接赋值	
			num3 = 4;
		//打印到控制台，通过内置的console和其方法log
		console.log("num1=" +num1,"num2="+num2,"num3="+num3);
		</script>
	</body>

</html>

二、 5种JavaScript特点

弱类型
解释型语言
区分大小写
脚本语言
浏览器解析
深刻的理解5种特点有助于我们理解JavaScript代码，使得我们编写带代码和读别的源码时，知道所以然，提高效率，更有自己的逻辑和条理性。

1. 弱类型

变量没有确定的类型，类型可变，变量类型只与当时值类型有关
JavaScript中定义变量是通过var（variable-变量），通常有三种定义的方式分别如下代码所示：
第一种：先定义变量，再赋值
var num1;
num1 = 2;
第二种: 定义变量的同时赋值
var num2 = 3.5;
第三种: 直接赋值
num3 = 4;

// An highlighted block
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
		//第一种：先定义变量，再赋值
			var num1;
			num1 = 2;
		//第二种: 定义变量的同时赋值
			var num2 = 3.5;
		//第三种: 直接赋值	
			num3 = 4;
		//打印到控制台，通过内置的console和其方法log
		console.log("num1=" +num1,"num2="+num2,"num3="+num3);
		</script>
	</body>
</html>

验证JavaScript是一个弱类型语言，使用函数typeof是一个单目运算符（操作的数目只有一个，如自增/减运算符++，–），下面附上代码：

// An highlighted block
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
		//定义一个String的数据类型
		var str = "I Love you my friend!";
		//打印str的数据类型
		console.log(typeof str);
		//对str赋值为number数据类型
		str = 10;
		//打印str的数据类型
		console.log(typeof str);
		//对str赋值为Boolean数据类型
		str = false;
		//打印str的数据类型
		console.log(typeof str);
		//对str赋值为object数据类型（javaScript中数组为object类型)
		str = [1,5,6];
		//打印str的数据类型
		console.log(typeof str);
		//定义个未赋值的数据类型
		var num;
		//打印str的数据类型
		console.log(typeof num);
		</script>
	</body>
</html>

效果图片：

2. 解释型语言

在JavaScript域内从上向下依次解析，边解析边执行（开发中的技巧：当引用别人的JavaScript文件时，应当放在自己写的JavaScript代码之前）
这里例举一个实例，验证在JavaScript语言是从上往下依次执行的，假设先在控制台输出一个未定义的变量会是什么情况呢？？只有两种情况：1.是可以打印出来，2.是不可以打印出。答案：当然是不能打印，并且系统会报错。如下图所示：

3.区分大小写

直接上代码检测一下，还是建议各位小伙伴，能够使用代码自己敲一下到底是不是这么回事。这里我贴上代码，和实验的效果图。

// An highlighted block
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
		//定义不同的变量a和A一个小写，一个大写
			var a = 10;
			var A = 100;
		//控制台打印a和A
		console.log("a = "+a," A = "+A)	
		</script>
	</body>
</html>

效果图

4.脚本语言

脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。
脚本语言（Script languages,scripting programming languages,scripting languages）是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。

5.浏览器解析

三、 5大JavaScript基本数据类型

1. undefined数据类型（undefined值 == null值，指的是未赋值的变量）
2. number数据类型
3. boolean数据类型
4. String数据类型
5. object数据类型（null值，数组，内置对象，自定义对象，function函数）

JavaScript只有这几种数据类型，由于JavaScript是一种弱类型语言，所以他们之间的数据类型可以相互的转换，上面在介绍弱类型的时候2.1中已经介绍过，这里不过多的赘述。还是继承以往的风格，我们直接上代码和效果图，看看到底是不是这么回事呢。看过一些博客，有些说是6种，这里我把function归结到object类中，是因为function是object的子类，具体来说，函数是“可调用对象”。但是function对象与普通对象相比，其内部有一个[[Call]]方法，用来表示这个对象是可调用的，typeof操作符在判断Object时，如果内部实现了[[Call]]方法,就返回function。
代码：

// An highlighted block
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
		//定义一个变量
		var num;
		//打印str的数据类型
		console.log(typeof num);
		//验证null==undefined
		console.log(num == null)//值等，类型不等（null为object类型，undefined为undefined类型）
		//定义一个String的数据类型
		var str = "I Love you my friend!";
		//打印str的数据类型
		console.log(typeof str);
		//对str赋值为number数据类型
		str = 10;
		//打印str的数据类型
		console.log(typeof str);
		//对str赋值为Boolean数据类型
		str = false;
		//打印str的数据类型
		console.log(typeof str);
		/*
		 * 1. 数组
		 * 2. null
		 * 3. 内置对象（date，Math）
		 * 4. 自定义对象
		 * 5. function是一个特殊的对象
		 */
		//1.数组
		str = [1,5,6];
		//打印str的数据类型
		console.log(typeof str);
		//定义个未赋值的数据类型
		//2.null
		console.log(typeof null);
		//3.内置对象
		console.log(typeof Date);
		console.log(Date instanceof Object);//Date对象是一个function其父类型为object所以是object类型
		//4.自定义类型
		//将str变量赋值为一个自定义对象类
		str = {name:"张三",age:15,profession:"学生"};
		console.log(typeof str);
		
		//function函数
		//定义一个function函数
		function basicType(){
			
		}
		console.log(typeof basicType);
		console.log(basicType instanceof Object);//显示true说明是一个object类型
		</script>
	</body>
</html>