Web前端之——JavaScript基础
最近在一家公司工作了，本来面试的是后端开发，但是前端这一块没有专门的人去负责，要后端负责一部分，框架是用我们的Vue框架，不过我没学过就是了，所以需要先从最基本的JavaScript先学习一遍吧~
本文介绍以下几部分内容:
- JavaScript是什么？
- JavaScript在HTML中的运用
- JS的语言基础
这篇随笔主要是先简单介绍下JavaScript，在不详细了解其技术细节的情况下，我们先最快速度的让页面效果展示起来~
第一部分：JavaScript是什么？
首先大家其实都很了解，JavaScript和Java并没有多少关联，它的语言祖先和Java也许有点关联，但是目前来说JavaScirpt和Java语言的关联性并不大了，所以大家不用担心Java的强语言特性的繁琐同样在JavaScirpt上。
JavaScript（以下简称为JS）是一门用来与页面交互的脚本语言，它有三个组成部分:
- ECMAScript:这是由ECMA-262规定的核心功能(这是一种语言标准序号，过个眼熟就行)。
- DOM：文档 对象 模型，提供的是页面内容交互的接口，也就是JS用来操控页面的方法。
- BOM：浏览器 对象 模型，提供的是和浏览器交互的接口，也就是浏览器操作的方法。
其中DOM和BOM是非常关键的功能，JS有了这两种核心功能也是各种框架所围绕的重点:什么框架能更加轻松可靠的编辑文档内容？
但是我们还需要说明下，JavaScript到底为什么会诞生?
为什么JavaScript会诞生？
曾经我们的页面是存放于服务器中的，我们用户去访问网站时会访问网络服务器，它会在内部计算、查询数据……最终渲染页面发给我们用户，这点听上去非常合理，宛如食堂打饭，阿姨打了一份两荤两素一碗汤我们坐下来就可以吧唧吧唧开始吃了，但是！随着科技不断发展，家家百兆光纤入户，智能手机、平板电脑pad、智能手表等等，智能设备实在是太多啦！人们有各种各样的设备(未来一定有能上网的智能马桶圈！)去访问服务器，用以往的方式去给用户计算、查询最终渲染页面的方式让服务器不堪重负，即便增加了N台服务器、开发或者优化技术以及投入大量的资金去改善这些问题，依旧不能预计下一阶段网络客户端会不会再次爆炸式增长，所以我们聪明的前辈们开创出了一种全新的方式去给服务端肩负——开发客户端资源。
每一台智能设备都有一定的计算能力，天生就是一台性能十足的Computer，那么为什么不将一部分计算的任务交给客户端呢？服务器只需负责查询任务就行了，而客户端将接收客户端的核心数据，再根据这些数据进行渲染页面，这样服务器只需要接收客户端请求就可以了。通过这种方式服务端只需要考虑如何增加自身的并发量耐受力，而不需要考虑对页面的各种繁琐处理了。
JavaScirpt的目的就是为了减少服务端的任务量，让客户端分担工作任务。
第二部分：HTML中的运用
Java Script 插入HTML的主要方法是使用<script>元素。这个元素是由网景公司创造出来的，它有八个属性：
- async: 异步加载，可选，表示应该立即下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
- charset: 可选。使用src属性指定的代码字符集。属性很少使用，很多浏览器表示无视。
- crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。corssorigin="anonymous"配置请求不必设置凭据标志。corssorign="use-credntials"设置凭据标志。出站会携带凭据
- defer:延迟加载，可选，表示脚本可以延迟到文档被完全解析和显示后执行。只对外部脚本有效。IE7以及更早的浏览器对行内脚本也可以使用这个属性
- integrity:可选，允许对比接收到的资源和指定的加密签名以验证子资源完整性（SRI,Subresource Integrity)。如果接收到的资源和前面与这个属性的指定前面不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络CDN不会提供恶意内容
- language：废弃，表示代码块中的脚本语言，目前脚本语言已经统一
- src：可选，外部路径，表示代码块的外部文件。
- type：可选，替代language，表示代码块中的脚本语言内容类型（MIME类型）。按照管理，这个值始终是"text/javascript"，尽管已经废弃了"text/javascript"和"text/ecmascript"。JavaScriptMIME类型通常是"application/x-javascript"，不过给type属性这个值通常可能导致脚本被忽略。在非IE浏览器中有效的值通常还有"application/javascript"和"application/ecmascript"。
如果这个值是module，则代码会被当作ES6模块，而且只有这个时候代码才能出现import和export关键字。
使用<script>方式有两种，一种是网页内嵌入，一种是外部导入。
1.行内导入：
<body>
<script>
function sayScript() {
console.log("hi,JavaScript!");
}
</script>
<script>
sayScript()
</script>
</body>代码说明:<script>包裹的就是JS的代码块了，function代表我们要声明一个函数了，后面的是函数名，console.log()代表在浏览器的控制台输出，接下来我们直接调用sayScript()这个方法时他就会在控制台上打出我们想要字符串了。注意哦，如果需要调用函数必须加括号！
2.外部导入
<script src="1.Fimport.js"></script>
<script>
sayScript()
</script>src代表的是JS文件的外部路径，它在文件内部声明了sayScript()这个方法，在我们使用各种框架时，绝大部分会使用这种方式从外部导入框架
标签位置
那么我们会在什么地方声明、导入JS文件\语法呢？
首先JS文件是通过从上到下的顺序来进行导入的，所以你写的JS代码必须存放在外部引入的框架的下面，其次在导入JS文件在最最顶部，那么会在JS文件下载完毕后才会渲染页面，所以我们推荐：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导入JS</title>
</head>
<body>
<h1>初次见面！请多多关照！</h1>
<!-- JS引入/声明 在页面加载完毕之后-->
<script>
sayScript()
</script>
<script src="1.Fimport.js"></script>
</body>
</html>将JS文件延后加载可以在感官上加快页面的加载，否则网络不好的情况下没有加载完JS文件可能会导致页面一片空白，这样的操作可能让网络不好的情况下页面呈现出渲染过程中丑陋的骨架状态，而不是一片空白。但是至少让用户感受到了页面反馈。
第二部分 语言基础
JS的语言是让初学者欢呼，而资深程序员头疼的语法，首先它是弱语言类型，你可以通过各种方法声明、赋值：
var message = "hi!"
let message2 = "hi!"
const message3 = "hi!"var 是最常用的一种声明变量操作符，它会"自动推断"变量的类型，它的特点就是声明后会将变量附着到windows（也就是浏览器对象）上面去，你可以在页面的任何地方调用它，似乎非常的方便？但是我必须得说：越是广泛的方法，使用起来麻烦反而更多。var的缺点就是太过方便了，容易滥用
let 和var使用方法差不多，但是let并不会在声明后附着在windows上面，同时它不允许出现相同命名的声明，也不会有var自动提升的特性，变量声明在那个位置就不会存在于上方作用域。它的限制相比于var 要多一点，但是正是施加了限制才能保证代码运行的安全，程序员能更快的排除错误。
const ES6时出现的操作符，它是最严格的声明操作符了，它的特点就是必须声明变量的初始变量，从而避免了"undefined"未定义这种奇葩类型的出现。所以特别严格的特性const成为了ES6首选声明操作符，不过要想驾驭它还是需要下一点功夫。
基本类型：
JS一共有六种简单数据类型和一种复杂数据类型:
| 类型 | 说明 |
| undefined | 变量的类型、值均未定义(类型无法推断) |
| Null | 变量的值未定义 |
| Boolean | 布尔值 |
| Number | 数字 |
| String | 文本字符串 |
| Symbol | 符号 |
| Object | 对象，不属于以上六种基本类型的都是Obeject |
*题外话，其中undefined和Null 另外还有一种值叫做NaN(Not a Number，Number计算错误所产生的异常值)，一种语言中竟然有两种空值，这也是让JS风评不好的原因之一，许多人认为JavaScript是没有经过谨慎设计的语言，在此基础上TypeScript是更好的商业实践，它加强了类型声明，不过JS仍然是你学习的基础。
1.Undefined类型介绍
这是一种遗憾的类型，它是var 和 let声明时没有对这个变量赋值导致它并没有初始化，JS弱语言特性可以自动推断变量，但是你没有初始化的话真是巧妇难为无米之炊，所以会变成Undefined，所以在声明变量时一定要声明以下几种类型哦！
let abc;
var abc;
//禁止直接使用未初始化变量!2.Null类型
这是被程序员称为"百万价值"的类型！他就是声明了类型对象是一个空指针，它的初始化类型就是Null，以便应对未来对象的赋值，如果你去比较它和Unfefined的对象是否相同，那么你会得到结果是true。所以这个值对象非常令人迷惑甚至恼火！只有在特定条件下才会给变量赋予这种值。
let message = null;
message = getMessage();
//调用一个方法，这个方法假设是会返回一个字符串，等下我们要判断它下。
if(message){
//如果这个方法获取成功了，就会赋值给message变量，否则如果是null值会判断为false
console.log("说明收到消息了")
}3.Boolean类型
Boolean类型是我们最常见的类型之一，它只有true、false两种，但是在JS中它有很多可转换的类型:
注意！布尔值是区分大小写的，因此True和False是有效的标识符，而不是布尔值。
|
数据类型 |
转换为true |
转换为false的值 |
|
Boolean |
true |
false |
|
String |
非空字符串 |
""（空字符串） |
|
Number |
非零数值 |
0、NaN |
|
Object |
任意对象 |
null |
|
Undefined |
N/A (不会转化为true) |
undefined |
所以你如果你使用if去判断一个空值、0值、空字符串、未定义会产生false判断。
4.Number类型
Number采用 IEEE 754格式表示整数和浮点值（某些语言中也叫双精度值）。不同的数值类型相应的也有不同的数值字面量格式。
//普通10进制直接写出
let num = 55
// 整数也可以用八进制或者十六进制字面量表示，对于八进制，第一个数字必须是0，然后是相应的八进制数字（0~7）。
// 如果字面量中包含的数字超出了有效范围，则会忽略前缀0 ，当作十进制
let num = 070 八进制的56
let num = 079 十进制的79
let num = 08 十进制的8
// 十六进制必须是真正的数值前缀0x（区分大小写)然后是十六进制数字（0~9以及a~f）。十六进制数字中字母大小写均可。下面是几个例子
let num = 0xA 十六进制10
let num = 0x1f 十六进制31
// 浮点数数值中必须包含小数点，而且小数点后面必须至少有一个数字。虽然小数点前面不必有整数，但推荐加上。
let floatNum1 = 1.1
let floatNum2 = .1 有效，但不推荐
// 因为浮点数所占内存空间是整数的两倍，所以ES总是相反设法的让数值变为整数
let floatNum1 =1. 会被当做整数
let floatNum2 = 10.0 会被当作整数。
// 同时允许科学计数法表示
let floatNum = 3.125e7 表示31250000
//浮点数的精确度最高17个小数，但在算数计算中达不到精确，例如0.1+0.2得到的不是0.3
if （a +b == 0.3){
console.log("等于0.3"）;
}
// false，等于0.3000000000000000004
//这种问题的原因还是IEEE754数值的错误。 5.String 类型
String（字符串）类型表示零或多个16位Unicode字符序列。字符串可以使用双引号（")、单引号、或者反引号表示。注意，开头的引号必须和结尾的是一种，否则报错。
// 字符串对象是无法修改的，必须重新赋值!
let lang = "JAVA"
lang = lang + "script" 模板字符串
ES6 新增了使用模板字面量定义字符串的能力。与使用双引号或单引号不同，模板字面量保留换行字符，可以跨行定义字符串。
模板的引号和我们平常使用的不同，它是反引号，在键盘上Tab键左上方:
let myMultString = "frist line\nsecond line"
let myMultString2 = `frist line
second line`
//（注意这里的反引号）
console.log(myMultString）;
//frist line
//nsecond line
console.log(myMultString2）;
//frist line
//nsecond line同时你可以使用这种方式进行插值
// 字符串插值通过${}中使用一个JS表达式实现
let value = 5
let exponent = "second"
let interp =
`${value} to the ${exponent} + power is ${ value * value}`
// ${}中可以使用JS表达式功能非常强大:
fun cap(word){
return `${word[0].toUpperCase()}${ word.slice(1)}';
}
console.log(`${cap('hello') , ${cap('world')}};
//Hello World6.Symbo类型使用较少，Object类型会在之后的介绍中出现，它两个本身实际上只需要了解即可。
Object类型包括了数组、散列，它们都几个基本方法，了解即可:
1.constructor : 用于创建当前对象的函数。在前面的例子中，这个属性值就是 Object（）函数。
2.hasOwnProperty(propertyName):用于判断当前对象实例（不是原型）上是否存在给定的属性。要检查的属性名必须时字符串（如 o.hasOwnProperty("name"))或符号。
3.isPrototypeOf(object):用于判断当前对象是否为另一个对象的原型。
4.propertyIsEnumerable(propertyName):用于判断给定的属性是否可以使用，for-in语句每枚举。与hasOwnProperty（）一样，属性名必须是字符串。
5.toLocaleString():返回对象的字符串表示。
6.toString(): 返回对象的字符串表示。
7.valueOf（）：返回对象对应的字符串、数值或布尔值表示。通常与toString（）的返回值相同。
那么今天最简单的JS介绍就结束了，我会在接下来的时间更新重点内容。
浙公网安备 33010602011771号