JavaScript 基础相关

1、JavaScript 简介

JavaScript是一种基于客户端浏览器，基于对象、事件驱动式的脚本语言，具有跨平台性。JavaScript 是嵌入到 web 界面中的解释性语言，也和所有脚本语言一样是动态解释执行的，不需要进行预编译。JavaScript 是一种弱类型变量语言，在使用变量前无需声明，由解释器在运行时检查其数据类型。

2、JavaScript 的运用

JavaScript的实现由两种：

1、在 HTML 中通过 <script> </script> 标签嵌入到<body> 或<head> 部分。格式如下：

<head>
    <script> 
        javaScript 代码部分
    </script>
</head>

2、将 JavaScript 代码提出到一个单独的 . js 文件中，通过 <script > 标签的 src 属性引用到HTML 的 <body> 或<head> 部分中，格式如下：

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

3、JavaScript 的 <script>标签相关属性

type 属性。指定该元素内包含的脚本语言类型，通常是 text/javascript 。
src 属性。指定外部 js 文件的路径。
charset 属性。指定外部脚本文件所用的字符集。只能和 src 属性一起用。常用的为 charset= "utf-8" ，以此来实现中文。
defer 属性。指定脚本是否延迟执行。
async 属性。指定脚本是否异步执行。

defer 属性和 async 属性又来提升 JavaScript 的性能。下面详细介绍一下：

defer 推迟脚本执行属性:

defer 属性指定了推迟脚本执行。用法为：< script type="text/javascript" src="defer.js" defer > </script>

浏览器在执行时，默认按着从上到下的顺序执行，当引入的 .js 文件在 head 位置时，如果 js 代码中存在对 body 中标签的操作，因为 js 文件先加载，所以在执行到时未找到操作的位置，于是报错。而添加了 defer 属性后，就会自动的等到所有的HTML内容加载完毕后执行 js 文件，此时 js 文件已经获得了所要操作的 HTML 元素，所以可以正常执行。同个一个例子来加深一下理解：

<!DOCTYPE html>
<html>
	<head>
		<script src="defer.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="demo"></div>
	</body>
</html>

defer.js 的内容如下：

var tg =document.getElementById("demo");
tg.innerHTML = "测试文字";
tg.style.backgroundColor ="#fff";

上述代码中档浏览器从上到下解析到位于<head>标签的 <script .../>元素时，浏览器就会停止继续解析、执行 HTML 页面，而是根据<script .../>元素的 src 属性下载对应的 JavaScript 脚本文件，并解析执行。但是问题来了，在浏览器执行 JavaScript 脚本文件时，此时浏览器还没有去解析 HTML 页面后面的内容，它还不知道 HTML 中 id 为 demo 元素，所以

var tg =document.getElementById("demo"); 语句并不能真正的起到作用，所以出现错误。

传统的解决办法可以将 <head> 中的<script .../>元素移动到 <body .../> 元素的最后面，也就是浏览器从上到下加载完所有 HTML 后才加载到 .js 文件，此时可以自然可以获得 id = “demo” 的元素，执行正确。

此外的解决办法就是使用 defer 属性了，defer 属性会告诉浏览器必须整个页面载入完成之后、解析完毕再执行<script .../>元素中的脚本，因此也可以达到效果。 defer 的格式为：<script src="defer.js" type="text/javascript" defer> </script>。

注意：

defer 属性只能作用于外部脚本文件，他对于 <script .../> 元素内嵌的脚本不起作用。

async 异步执行脚本属性：

浏览器 HTML 页面的元素解析是从上到下的，如果页面上出现 <script .../>元素，浏览器将会解析并指定 <script .../>元素导入的脚本文件，并且在脚本文件执行完之前，浏览器都不会解析处理 <script .../>元素之后的内容。

那么问题来了，假设出现一种极端情况， <script .../>元素导入的脚本文件非常耗时，造成浏览器无法向下执行，那么此时页面将会长时间显示一片空白，带来很不友好的体验。此时就需要用到 async 异步执行脚本属性来解决这个问题了。

指定 async 属性的 <script .../> 元素会启动新线程、异步执行 <script .../> 元素导入的脚本文件，浏览器与会继续向下解析，处理页面内容。

4、JavaScript 变量

JavaScript 是一种弱类型的脚本语言，使用变量前，可以不用预先定义，直接使用。JavaScript 由两种方式来引入变量：

隐式定义：直接给变量赋值。如：a =" hello world !" ;
显式定义：使用 var 关键字定义变量。如： var a ; var b = " 中国 " ；

注意：JavaScript 的变量是区分大小写的， var abc ；和 var Abc ；是两个不同的变量。

JavaScript 支持自动类型转换，并且类型转换功能强大。如

var a ="3.14";
b = a + 2;
c = a - 2;

上面代码中 a 的类型为字符串，因为字符串可以用 “+” 作为连接运算符，所以系统自动将数值转换成字符串类型，并进行字符串连接运算，所以 b =“ 3.142 ”；而字符串因为不支持 “ - ” 减法运算，所以系统自动将字符串转换成数值处理，因此 c = 1.14 。

各种类型自动类型转换结果如表所示：

也可以通过强制类型转换实现。

toString()：将布尔值、数值等转换成字符串。
parselin()：将字符串、布尔值等转换成整数。
parseFloat()：将字符串、布尔值等转换成浮点数。

JavaScript 的变量分为全局变量和局部变量两种，两者的作用范围不同。全局变量作用域为整个全局范围，而局部变量只能作用在函数中。全局变量在定义时有两种：1、定义在全局范围，用 var 声明；2、不使用 var ，直接定义。当局部变量和全局变量同名时，局部变量覆盖全局变量。这时存在一个问题，那就是变量的提升问题。

变量提升问题：

<script type="text/javascript">
	//定义全局变量
	var demo ="全局变量";
	function test(){
		document.writeln(dmeo + "<br />");
		//定义demo局部变量，其作用范围为整个函数内
		var demo ="局部变量";
		document.writeln(dmeo + "<br />");
	}
	test();
</script>

上述代码在执行的结果为：

undefined

局部变量

第一条输出的不是“全局变量”，而是 undefined 。这就是变量的提升引起的。变量提升就是指变量声明总是会被解释器“提升”到函数体的顶部，也就是说上面代码中定义的 demo 局部变量，在函数中被解释器提升到函数体的顶部，但是并没有赋值，而是单纯的类似在函数体顶部声明 var demo；所以在函数体中局部变量覆盖了全局变量，但是因为没有赋值，所以为 undefined 。

值得注意的是JavaScript 变量的提升甚至不用定义变量的语句真正执行，在要在函数中包括了定义变量的语句，该变量声明就会被提升到函数体的顶部。

新增的 let 变量

JavaScript 中var 定义的变量存在一些问题：

var 定义的变量没有块作用域。如在 for 循环体外仍可以访问到循环体中的变量。
var 定义的全局变量会自动添加全局 window 对象的属性。即定义全局变量 demo，则通过 window.demo 可以访问到。
var 定义的变量会提前装载。

let 关键字解决了上述的所有问题。

let定义的变量解决提前装载的问题：

<script type="text/javascript">
	//定义全局变量
	var demo ="全局变量";
	function test(){
	    document.writeln(demo + "<br>");
		//定义demo局部变量，其作用范围为整个函数内
		let demo ="局部变量";
		document.writeln(demo + "<br>");
	}
	test();
</script>

程序中定义了全局变量 demo ，然后 test() 函数中使用 let 定义了同名的 demo 变量，此时局部变量 demo 覆盖了全局的 demo 变量，由于使用 let 定义的变量不会提前装载，因此 test() 函数在使用 let 定义局部变量 demo 之前访问 name 变量会导致错误。这一点和 var 定义变量有所不同，这就是 let定义的变量解决提前装载的问题。

5、JavaScript 基本数据类型

JavaScript 的数据类型有 5 种：

数值类型：包含整数或浮点数。
布尔类型：只有 true 和 false 两个值。
字符串类型
undefined 类型：专门来确定一个已经创建但是没有初值的变量。
mull 类型：用于表明某个变量的值为空。

1.数值类型

数值类型包含整数和浮点数，浮点数在操作时需要注意精度的问题，一般比较两个浮点数是否相等需要用两个数的差来判断，差小于某个标准时认为两个浮点数相等。

数值类型也支持科学计数法，格式为：1.22e5，1.22E5。两者都表示 1.22 乘以 10的 5 次方。

JavaScript 也支持十六进制和八进制数，十六进制数以 0x 或 0X 开头，八进制数以 0 开头。

当数值变量的值超出了其表数范围，则出现两个特殊值：Infinity (正无穷大)和 -Infinity(负无穷大)。

2.字符串类型

JavaScript 的字符串必须用单引号或者双引号括起来。

JavaScript 以 String 内建类来表示字符串，String 类包含了一些列的方法来操作字符串。具体方法如下：

charAt():获取字符串特定索引处的字符
charCodeAt()：返回字符串中特定索引处的字符对应的Unicode值
length：返回字符串长度（一个中文算一个字符）
toUpperCase()：转换成大写字母
toLowerCase()：转换成小写字母
indexOf()：返回字符串中特定字符串第一次出现的位置
lastIndexOf()：返回字符串中特定字符串最后一次出现的位置
substring()：返回字符串的某个子串
slice()：返回字符串的某个子串，比substring()更强，可以是负数参数
match()：使用正则表达式搜索目标子字符串，返回匹配的字符串
search()：使用正则表达式搜索目标子字符串，返回匹配的索引值
concat()：将多个字符串拼成一个字符串
split()：将某个字符串分隔成多个字符串，可以指定分隔符
replace()：将字符串中某个子串以特定字符串代替

3.undefined 和 null

undefined 类型的值只有一个undefined ，表示某个变量不存在，或者没有分配值，也可以表示对象的属性不存在。

null 表示变量的值为空。

undefined 与 null 之间的差别比较微妙，如果不进行精确比较，很多时候undefined 和 null 可以相等，即 undefined==null

为真。但是精确比较下 null 和 undefined 就不相等了，即 undefined === null 则为假。