JS基础核心语法（1）

JS的简介

视图（view） 服务器（server） 数据库（mysql mongodb sqlserver redus）
接收数据 处理数据 存储数据
欧洲计算机制造商协会（ECMA) :定义了其标准化为ECMAscript
js和Java的关系：模仿java设计的。其继承类型不同，js是基于原型对象的继承链。不需要编译，由解释器直接执行

JS的组成

1. ECMAScript JS的核心语法
2. DOM（文档对象模型) Documenr Object Module) 树的形式 操作节点
3. BOM (浏览器对象模型 ) Browser Object Module) 对浏览器进行刷新和前进后退 操作浏览器

JS的特点

1. 脚本语言
   基于对象和事件驱动，定义为弱语言类型 不会强制要求数据类型
2. 不需要编译
   依赖于浏览器运行解析 利用解释器解释执行 浏览器JS的解析引擎（V8笔试）
3. 类似于java 面向对象的语言
   本身也可以创建对象及调用对象的操作
4. 跨平台性
   与操作环境无关，只依赖于浏览器进行解释执行

JS的使用

1. 行内js 普遍出现在事件的绑定上
   hhhh// 浏览器默认事件（链接事件）
   console 控制台输出
   alert 弹窗输出
   onclick
2. 嵌入式JS script标签
   标签之间写代码，每个用分号隔开
3. JS的引入式

<script src=""></script>    
//以下的console.log均不会执行
<script src>
    console.log("代码执行");
</script>
<script src=''>
 console.log("代码执行");
</script>
<script src="./js/test.js">
 console.log("代码执行");
</script>

注意：没有 src 属性的脚本(即不是内联脚本，async 和 defer 属性会被忽略。)
src： 判断其是否为引入式代码，如果有src 属性，则为引入式，其引入式之间的代码不会执行
由上往下执行， 一般放在之前。 因为js要访问dom的节点的话，必须放在后面才行。而且head标签中会先加载并解析完成所有的JS才能加载页面，导致页面加载变慢。
当我们向页面中引入一个js文件时，浏览器在看到脚本标签声明时需要执行以下步骤：
暂停HTML文档解析器 --> 创建新请求以下载脚本 --> 在脚本完全下载后立即执行脚本 --> 执行结束后，继续解析HTML文档
解析过程：导致脚本下载时间过长，用户无法与页面交互，页面的加载时间过长。要看到整个页面被解析完，需要所有脚本都被下载和完全执行

defer 等待body加载完再加载这份js
async 等待一会儿Body，再执行这份js（同步异步的概念）
这两个属性均是让浏览器知道脚本可以与文档解析器过程并行下载，从而不阻塞页面的渲染

区别：
    下载 async 脚本后，浏览器将暂停文档解析器，执行脚本并继续解析文档。
        解析文档  -->  下载脚本  -->  暂停解析 -->   执行脚本 -->  恢复解析
async 脚本在完全下载后立即执行，加载和渲染后续文档元素的过程将和 JS 脚本的加载与执行并行进行(异步)，因此它们的执行顺序可能
与页面中显示的顺序不同。建议尽可能使用async，加载 JavaScript 的过程中页面就不会重新绘制，否则，浏览器在不具有这些特性的。
script 标签后就不会重绘任何东西（消除渲染阻塞资源）
    defer: 只有当解析器完成其工作时，才会执行 defer 脚本。
        解析文档  -->  下载脚本  -->  执行脚本   （该过程不会停止文档解析）
defer 脚本保证执行顺序。它是等到页面渲染完毕，所有脚本下载完成，在 DOMContentLoaded 事件前按照脚本的在文档中的顺序执行。
注意：默认情况下，注入页面动态的脚本是异步的。但是，如果需要，可以将 async 属性设置为 false。
const script = document.createElement('script')
script.src = '/path/to/script.js'
script.async = false
document.head.appendChild(script)
总结：
1. 关于 defer，我们还要记住的是它是按照加载顺序执行脚本的
2. 标记为 async 的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。
3. async 对于应用脚本的用处不大，因为它完全不考虑依赖(哪怕是最低级的顺序执行)，不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。

（版权声明：本文为CSDN博主「lio_zero」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_46267040/article/details/125370214）

JS的输出

1. 浏览器窗口弹窗

<script>
//顶层对象window
window.alert('浏览器提示/警告窗口');
var res=window.prompt('浏览器输入框');
    console.log(res);   //确认：空字符串；取消：null
var res=window.confirm('浏览器确认框');
    console.log(res);   //确认：true 取消：false
//均会首先弹出浏览窗口，再弹出对应的窗口
</script>

2. 页面内容

<script>
document.write('啊啊啊啊');
documenr.write('<br/>');   //能够识别标签
document.write('<p style="color:red;">dfdads</p>');
<div class='box'>写一些内容</div>
//document操作
console.log(document.querySelector('.box').innerHTML);
documenr.querySelector('.box').innerHTML = '蝴蝶花和东方航空';     
//通过选择器去查询   innerHTML为DOM操作
</script>

3. 浏览器控制台

<script>
console.log('日志信息');
console.dir('描述信息');
    function fn() {
        console.log(111);
    }
    console.log(fn);
    console.dir(fn);//不常用

console.clear(); //清除控制台
console.error('错误信息');  
console.warn('警告信息');
console.table({name:'名字',age:18});  //表格信息
</script>

JS的调试

1. 用console.log调试 （代码少的时候，用于思考错误在哪）
   报错会阻塞程序执行
   null 空对象指针
   parameter 参数
2. debugger; 断点调试 （代码多的时候用这个）
3. 借助VScode
4. 浏览器控制台中的Sources 可设置breakpoint

JS的语法规范

空格
变量或标识符中间不能用空格
变量需要定义，否则会报错
注释
单行注释 ctrl + /
多行注释 alt + shift + a
大小写
xhml中大小写会报错
JS会严格区分大小写（敏感）
函数定义的一个工具块，当使用的时候就调用下
function num(n) { } function num()

报错类型

1. 未定义
2. 函数未声明

标识符

标识符包含变量、函数、参数的名字
定义规则

1. 数字、字母、下划线、$、组成
2. 不能是数字开头
3. 严格区分大小写
4. 见名知意
5. 不能使用关键字和保留字
6. 名字过长要用驼峰命名或下划线，不能是中划线

<script>
var num;   //定义变量未赋值
cosole.log(num); //undefined
var a,
    b=9;
var c= d=e=100;
//预编译
console.log(a);
a=8;
console.log(a);

var a=b=c=9;
//声明var=a   a=b   b=c  c=9    只有a被var声明了
</script>

JS的执行代码过程：

1. 语法检查
2. 产生window对象
3. JS预解析
   将var声明的变量提升为window的属性，值为undefined。
   将function声明的函数提升为window的属性 值为函数体
4. 执行非var非function的代码
   （此处过程不完整，后面章节补充）

有无var关键字声明变量的区别

1. 有var声明会经过预解析，但无var声明，当代码执行到这一行时，才会自动将该变量变为window的属性（自动的将该变量变为var声明的）

var b=3;
d=20;
console.log(delete b);  //false
console.log(delete d);//true

2. 有var声明的变量 delete操作符不能删除，无var的变量delete 操作符可以删除
3. 严格模式下，如果变量没有var关键字会报错