欢迎来到js通关指南(第一章)-引子
1. 什么是编程
编程就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。 计算机程序，就是计算机所执行的一系列指令的集合,而我们就是要通过高级的拟人化的语法来实现计算的的指令集合,通俗来讲就是告诉计算机要干什么。
2. 计算机/软件的基本构成
计算机由硬件和软件组成 硬件: 输入/输出设备 cpu 硬盘 内存 软件: 系统软件和应用软件 注意：上面说的计算机是所有能执行代码的设备 手机 ATM 黑莓/服务器等
3. 什么是计算机语言
计算机语言就是人与计算机通信的语言 计算机语言有 机器语言/汇编语言和高级语言三大类
1.机器语言
计算机的存储单元只有0和1两种状态，因此一串代码要让计算机“读懂”，这串代码只能由数字0和1组成。 像这种由数字0和1按照一定的规律组成的代码就叫机器码，也叫二进制编码. 一定长度的机器码组成了机器指令，用这些机器指令所编写的程序就称为机器语言
优点: 代码能被计算机直接识别，不需要经过编译解析 直接对硬件产生作用，程序的执行效率非常高 缺点: 程序全是些0和1的指令代码，可读性差，还容易出错， 不易编写(目前没有人这样开发)
2.汇编语言：符号语言(汇编)
为了解决机器语言的缺陷，人们发明了另外一种语言--汇编语言, 这种语言用符号来代替冗长的、难以记忆的0、1代码。(mov/push指令，经过汇编器，汇编代码再进一步转成0101) 优点: 像机器语言一样，可以直接访问、控制计算机的各种硬件设备; 占用内存少，执行速度快; 缺点:
第一，不同的机器有不同的汇编语言语法和编译器，代码缺乏可移植性,也就是说，一个程序只能在一种机器上运行，换到其他机器上可能就不能运行 第二，符号非常多、难记 即使是完成简单的功能也需要大量的汇编语言代码，很容易产生BUG，难于调试;应用场景
应用场景 操作系统内核、驱动程序、单片机程序;
3.高级语言
最好的编程语言应该是什么?自然语言, 而高级语言,就是接近自然语言,更符合人类的思维方式 跟和人交流的方式很相似,但是大多数编程语言都是国外发明的,因为都是接近于英文的交流方式
优点: 简单、易用、易于理解，请语法和结构类似于普通英文; 远离对硬件的直接操作，使得一般人经过学习之后都可以编程，而不用熟悉硬件知识;一个程序还可以在不同的机器上运行，具有可移植性; 缺点: 口程序不能直接被计算机识别需要经编译器翻译成二进制指令后，才能运行到计算机上; 种类繁多:JavaScript、C语言、C++、C#、Java、0bjective-C、Python等;
4.编程语言和标记语言的区别
编程语言 有很强的逻辑和行为是主动的标记语言不向计算机发出指令，通常用于格式化和连接，是用于展示和读取的是被动的。
5.js语言简介
js 是一门基于原型,头等函数的语言,是一门多范式的语言,他支持面向对象程序设计,指令式办成,以及现在非常流行的函数式编程。
javascript语言的起源 这里不写太深有兴趣的可以看这个链接 JavaScript的起源 - 掘金 (juejin.cn)
JavaScript诞生于1995年，当时主要是处理网页的前端验证 如，用户长度，密码长度，邮箱格式 现在也可以做动态效果，动态游戏
Javascript 是运行在客户端的脚本语言， 脚本语言不需要编译 运行过程中由js解释器 js引擎逐行进行解释并执行 现在也可以基于node.js技术进行服务器端编程
Js的作用 1 表单验证（密码强度检测） 2网页特效 dom bom 3服务端开发 nodejs express koa egg.js 4桌面程序 Electron 5app Cordova 6控制硬件 -物联网 Ruff 7游戏开发coco2d-js web开发 原生 Vue React Angular 移动端开发 ReactNative Weex uniapp Flutter 小程序开发 微信 支付宝 uniapp taro 等
StackOverflow 的创建者 JeffAtwood 2007年就曾提出Atwood定律， Any application that can be written in JavaScript ， will eventually be written in JavaScript 任何一个可以用js实现的应用最终都会使用js实现，当然在2024年的今天仿佛rust 在重构js工程工具
6 js的运行环境
浏览器环境，览器分为两部分 渲染引擎和js引擎
渲染引擎：用来解析HTML 和CSS，俗称内核 比如chrome浏览器的blink 老版本的webkit主要作用是解析html和css的
我们经常会说:不同的浏览器有不同的内核组成
Gecko:早期被Netscape和Mozilla Firefox浏览器浏览器使用
Trident:微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink
Webkit:苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用
Blink:是Webkit的一个分支，Google开发，目前应用于GoogleChrome、Edge、Opera等
等等..
事实上，我们经常说的浏览器内核指的是浏览器的排版引警:口排版引擎(layout engine)，也称为浏览器引擎(browser engine)、页面渲染引擎(rendering engine)或样版引擎.
那么，JavaScript代码由谁来执行呢?
JavaScript引|擎 Js引擎：也称js解释器，用来读取网页中的JavaScript代码，对其处理后运行如chrome的v8 浏览器本身不会执行js代码而是需要内置JavaScript引擎来执行js代码 js引擎执行代码时逐行解释每一句源码，后转为机器语言然后又计算机执行，这种所以JavaScript语言归为脚本语言回逐行解释执行
为什么需要JavaScript引擎呢? 我们前面说过，高级的编程语言都是需要转成最终的机器指令来执行的; 事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行,以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行
运行环境
比较常见的JavaScript引擎有哪些呢?
口 SpiderMonkey:第一款JavaScript引擎，由Brendan Eich开发(也就是JavaScript作者);
口 Chakra:微软开发，用于IT浏览器;
口 JavaScriptCore:WebKit中的JavaScript引擎，Apple公司开发
口 V8:Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出;
口 等等...
注意: 很多移动端都是使用JavaScriptCore的,node里面也是使用V8进行解析js的
7. 浏览器内核和js引擎的关系
这里webkit内核举例, 主要有两部分组成,一个是WebCore,另一个是JavaScriptCore webCore: HTML解析,布局渲染等工作, JavaScriptCore: 解析执行JavaScript代码
8. JS的组成
1. ECMAScript
JavaScript基础语法和核心知识（所有浏览器都必须遵守的一个标准） 注意: 这里js 是遵循了ECMAScript 但是这个规范只是规范了这个语言,而js还有一些用于操作页面和浏览器的API也就是DOM BOM 这个不在于ECMA的规范之中(导致后面每个浏览器不同兼容极其困难)
2.BOM 和DOM
DOM:页面文档对象模型 对页面的元素进行操作。大小/位置颜色。。。
BOM:浏览器对象模型 对浏览器窗口进行操作，比如弹出对话框/控制浏览器跳转/获取分辨率等。
9. JS的组成js的特点
1他是一门解释型语言
2 类似于C/JAVA的语法结构
3 是一门动态语言
4 基于原型的面向对象
js 设计时要就与平台无关, 就是在计算机运行不受凭他约束 ,一次编译到处运行 ,
10. JavaScript运行顺序
JavaScript是一种描述性脚本语言，是一种解析语言，由浏览器动态解析，不同种类的浏览器不同版本浏览器对于js的解析有着细微的差别，不同浏览器的js解析引擎效率也有高低 当浏览器执行到一段 JavaScript 代码时，通常会按从上往下的顺序执行这段代码。这意味着你需要注意代码书写的顺序。
10.1 js的执行过程
第一部分
解析过程，也称预编译期。主要工作就是对于js的代码中声明的所有变量和函数进行预处理。注意的是，再此进行处理的仅是声明函数，而对于变量的处理仅是声明，并开辟出一块内存空间，不进行赋值操作。
第二部分
执行过程，在执行过程中，浏览器的js引擎对于每个代码块进行顺序执行，如果有外部引用的js,且js有相互关联，此时就要注意，不同js的引入顺序，如果声明代码块在调用代码块后调用则将不会达到预期的效果。
总的来说，Js的执行分为两部分，解析过程和执行过程。解析时按照代码块，一段一段进行解析，执行时按照代码块顺序逐行执行，解析一个代码块，执行一个代码块。
因为是解释性语言，所以js如果在解析过程有错误，则不会提示，也可以理解为js不会出现编译错误，但如果出现了运行时错误，出现错误一下的所有javascript代码将不会继续执行。
10.2 解释与编译
作为程序员，你或许听说过这两个术语：解释（interpret）和 编译（compile）。
解释型语言中，代码自上而下运行，且实时返回运行结果。代码在由浏览器执行前，不需要将其转化为其他形式。代码将直接以文本格式（text form）被接收和处理。
编译型语言需要先将代码转化（编译）成另一种形式才能运行。比如 C/C++ 先被编译成汇编语言，然后才能由计算机运行。程序将以二进制的格式运行，这些二进制内容是由程序源代码产生的。
JavaScript 是轻量级解释型语言。浏览器接受到 JavaScript 代码，并以代码自身的文本格式运行它。技术上，几乎所有 JavaScript 转换器都运用了一种叫做即时编译（just-in-time compiling）的技术；当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。尽管如此，JavaScript 仍然是一门解释型语言，因为编译过程发生在代码运行中，而非之前。
10.3 服务器端代码 和客户端代码
在 web 开发时。客户端代码是在用户的电脑上运行的代码，在浏览一个网页时，它的客户端代码就会被下载，然后由浏览器来运行并展示。这就是客户端 JavaScript。
而服务器端代码在服务器上运行，接着运行结果才由浏览器下载并展示出来。流行的服务器端 web 语言包括：PHP、Python、Ruby、ASP.NET 以及...... JavaScript！JavaScript 也可用作服务器端语言，比如现在流行的 Node.js 环境。
10.4 动态代码和静态代码
“动态”一词既适用于客户端 JavaScript，又适用于描述服务器端语言。是指通过按需生成新内容来更新 web 页面 / 应用，使得不同环境下显示不同内容。服务器端代码会在服务器上动态生成新内容，例如从数据库中提取信息。而客户端 JavaScript 则在用户端浏览器中动态生成新内容，比如说创建一个新的 HTML 表格，用从服务器请求到的数据填充，然后在网页中向用户展示这个表格。两种情况的意义略有不同，但又有所关联，且两者（服务器端和客户端）经常协同作战。
没有动态更新内容的网页叫做“静态”页面所显示的内容不会改变。
10.6 如何向页面添加JavaScript
使用script 进行内部和外部引入js代码
如:
内部
<script>
// 在此编写 JavaScript 代码**
</script>
外部
<cript src="script.js" async></script>
注意 :在标准中不允许使用单标签使用script 虽然有的浏览器支持,但是最好不要这么写
内联 JavaScript 处理器
有时候你会遇到在 HTML 中存在着一丝真实的 JavaScript 代码。它或许看上去像这样
<button onclick="createParagraph()">点我呀</button>
这样的代码比较耦合,虽然也可正常使用但是不方便维护
10.7 添加JavaScript的时机
在web前端开发中js 的引用往往是对页面进行操作,而当页面还没有加载出来时候,js给html 添加事件就会出现问题,而且当浏览器执行(解析)到js时候会阻塞html和css的渲染
解决方案1
将js 放在文档体底部
解决方案2
使用async属性,当浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。但是这样脚本的运行次序就无法控制，只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立，且不依赖于本页面的其它任何脚本时，async 是最理想的选择。
解决方案3使用defer
添加 defer 属性的脚本将按照在页面中出现的顺序加载
10.8 script 标签的属性
async 异步下载 会立即下载再延迟到DOMContentLoaded 事件前执行 只对外部文档有效 非顺序
chaset 编码字符集
crossorigin COrs 设置
defer 延迟到文档执行完毕后执行 顺序
integrity 校验资源完整性一般用于CDN
language 弃用 远古时期可以使用VB等脚本
src 要下载/执行的js 文件位置
type 代表 文件的MIME类型
MIME是多用途互联网邮件扩展,用户服务器传输的文件类型
如 application/x-javascript || application/javascript 就是 js 类型
在js 执行中,需要 预处理再执行而且在js代码被计算完成之前页面的内容不会被加载也不会被显示(因为js是一种阻断式语言)
在js脚本中不应该出现 字符串形式的 ,否则会被识别成js 闭合标签 ,应该写成</script> 使用\ 进行转义
如果一个引入外部js 的标签内部包含js代码将不会被执行
如:
<script src=”./a.js”>
console.log(“你好”) //不会被执行
</script>
在 script 引入外部资源时, js额文件扩展名不是必须为.js 因为浏览器不会校验/检查js的文件扩展名, 这样服务器就可以使用脚本动态生成JavaScript代码,或者将扩展的js 转为js
如 ts jsx 转译为JavaScript
js在使用外部脚本时如果src 是个 完整的url 会发一个get 请求 这个是不受同源策略影响的,但是他返回被执行的js受限制也手http https 协议的限制 可以使用integrity 去防范
js 会按照script 的引入顺序执行
因为后面js 要使用前面js 需要注意顺序
10.9 添加动态脚本
创建script 标签
加入 src 属性=”url”
script.async =false
在body appendChild
默认这种方式添加的script 是带有async 属性的
所以在appendChild前要 script.async =false
内部文件和外部文件
内部js 可以有好的提升性能,这个尤其是在移动端特别明显
外部js 在多个页面都请求这个页面时候 浏览器会给他缓存下来节约性能
nosctipt标签
在浏览器不支持js 或则用户关闭了js脚本时候才会出现,
如
<noscrtpt>
您的浏览器不支持JavaScript
</noscript>
10.10 浏览器的预加载器与文档模式
预加载器是提升网络利用率, 改善脚本 对其他资源文件阻塞的
浏览器解析到js产生阻塞时候,会有另一个轻量级的解释器,去浏览剩下的资源,但是他只会下载如(图片,文件…)
预加载器只能检测HTML标签中的url 无法检索动态添加的url
但是可以使用lazyload/postpone 即用户可见后下载来影响预加载器
文档模式
混杂模式 IE非标准
标砖模式 部分标准
准标准 比部分标准更多一些符合标准
HTML和CSS是不区分大小写的虽然有规范但是执行的不好
js是有大小写区分的
注意在HTML引入js
如
<div onclick =”getName”> </div>
onclick 可以不区分大小写
但是方法 getName 一定要区分
还有 在html 使用 data-name 自定义属性
这里的name和attrs无论是大写还是小写在js中都会是小写
10.11 注释与输入输出
单行注释 //我是注释
多行注释 /* 我是注释 */
文档注释
/*
* @param {string} name 姓名**
*/
function sayHello(name){
console.log(name
}
文档注释主要是单独在js文件中使用的
它的好处是可以对函数进行解释比如上面的文档注释就表示 sayHello这个函数需要一个参数,参数类型是string 来表示姓名这个变量
11. 输出
输出
alert(msg) //浏览器弹出警告框
Console.log(msg)//浏览器控制台打印输出信息
console.log(a,b,c)//可以通过逗号进行多个输出
Promp(info)//浏览器弹出输入框，用户可以输入
document.write("123)//向body中输出一个内容
js 可以写在方法中（不方便维护）
如：
<button onclick=“alert（‘123’）”>点击</button>
也可以写在 a标签中
<a href=”javascript:alert(“123”)”>点击</a>
<a href=”javascript:;”>点击</a>常用于控制a标签点击完不跳转。
