一,JavaScript基础知识。初识JavaScript，变量var和let，变量提升（var和let的区别），常量（const），标识符，注释，引入方式和输出方式-CSDN博客

DOM操作：js可以读取，修改，添加，或者删除网页上面的html元素/css元素，从而动态的改变页面的内容和结构；
BOM操作：js可以访问或者控制浏览器的窗口，标签页，导航栏等浏览器级别的功能；
事件处理：js可以监听用户的行为，比如点击，滚动，键盘输入并且对这些时间做出响应，实现和用户的交互；
异步请求：通过ajax等网络请求技术，js可以在不重载整个页面的前提下完成和服务器的互动，获取服务器数据，从而动态的更新网页部门内容。

最后：如果以人来举例，html是它的骨架，css是它的衣服，那么js就是让这个人动起来，具有交互性的关键。

2，学习了javascript对不同知识区域的影响

前端：js作为前端三剑客之一，也是最核心最重要的部分，属于必学范畴。他前端人员最核心也是最主要的编程语言，没有之一。同时也是后期学习大型框架如vue，react的核心根基。

后端：后端人员主要的工作职责就是负责编写API。但是熟悉的运用js对确保这些API能被前端正确的接收和使用非常重要。

前后端交互：前端通过ajax，fetch，axios等发送网络请求到后端，并处理后端返回的响应，如果后端不了解js，就无法完全理解前端对于api的期望和修去，比如数据格式，错误处理，分页，排序等；
跨域请求：当前端和后端部署在不同更多域上，浏览器会处于安全的考虑阻止跨域请求。js可以通过cors跨域资源共享技术处理这种跨域请求。后端也需要相应的配置cors策略，如果后档不了解js，就会导致api无法被前端正确使用；
调试和测试：通过js来优化api的性能，如何减少请求次数，如何有效的处理大量数据，并且在api设计中做出相应的优化；
协作与沟通：开发过程中，前后端开发人员需要紧密协作与沟通。了解js可以是后端的人员更好的有效的和前端人员交流，理解需求和问题，并共同的寻找解决方案。

大数据：在大数据处理和可视化领域，js也发挥的重要作用。尤其实在结合像帆软（FineReport）这种大型的报表工具时。

数据交互：js可以通过网络请求像服务器发送请求，以异步的方式获取分析完毕的数据，这些数据通常是json格式，非常适合用作表白的数据源；
数据处理：获取到数据之后，在js这边也可以通过js编程语言里面的数据计算来对数据进行筛选，排序，聚合等，以进一步满足报表展示的需求。当然js还是可以处理复杂的数据转换和计算，让报表展示的更加灵活与准确；
动态报表。利用js，可以创建动态报表，这些报表能够根据用户的交互（点击，选择，滑动）等来动态更新展示的数据。
自定义组件：帆软报表等大型报表工具都支持自定义组件的开发，通过js，我们在使用这些报表工具的时候，就可以更加灵活自由的发挥报表工具最大的作用。
大屏展示：在大屏数据时候，通过js编写负责的数据驱动动画，实时数据更新，交互式图表。结合css和html，可以创建出视觉效果震撼，信息传达高效的大屏报表。
性能优化：大数据的数据通常非常庞大，我们可以通过js在前端展示的时候，实现数据懒加载，DOM优化，事件委托等，最大化提高报表的加载速度和响应。

3,js和es的区别

javascript 是一门脚本语言。而ecmascript 是js的标准化规范。js是es的扩展语言。包含了es规范定义的所有内容，并可能包含额外的浏览器和环境特定的API。

js通过document,element对象实现对dom的维护，以及window对象对bom的维护；

而es则不需要这些特定的对象，它主要关注原因了的核心语法和基本对象。

4,JavaScript的版本

97年第一代；
98年第二代；
99年第三代；
07年第四代；
09年第五代；
15年第六代
至今

二,语句

JavaScript程序的执行单位是行。也就是一行一行的执行，一般情况下，一行就是一个语句。

var name='张三';

语句以分号结尾，一个很好表示一个语句的结束。

三,标识符

在JavaScript种，标识符是用来给变量，函数，属性等命名的字符串。标识符的命名规则需要遵循以下规范

首字符：首字符必须是字母，下划线，或者美元符号，不允许以数字开头；
后续字符：可以是字母，下划线，美元符号，数据；
区分大小写：js种的标识符是对大小写敏感的，比如Num和num就会视同两个不同的标识符；
保留字：不能使用js的保留字比如var ，let，const，function，class，if，else等作为标识符；
中文也可以作为标识符出现，但是不推荐，因为后期转换的时候可能出现不可预测的bug；

保留字：

JavaScript 有一些保留字，不能用作标识符： arguments 、 break、 case 、 catch 、 class 、 const 、 continue 、 debugger 、 default、 delete 、 do 、 else 、 enum 、 eval 、 export， extends、false 、 finally 、 for 、 function 、 if 、 implements 、 import、 in 、 instanceof

interface 、 let 、 new 、 null 、 package、 private 、 protected 、 public 、 return 、 static 、 super、 switch 、 this 、 throw 、 true 、 try 、 typeof 、 var 、 void、 while 、 with 、 yield 。

四,变量

在javascript种，变量是一种用于存储信息的容器。
可以使用变量来存储数字，文本（字符串），布尔值（true/false），数组，对象，函数等。
javascript是一种动态类型语言，意味不需要声明变量类型，变量的类型会在赋值的时候自动确定。

1，var声明变量

在es5之前的版本中，var是声明变量的唯一方式。它声明的变量会提升到作用域的顶部。即所谓的变量提升。正是由于这个特性，所以现在尽量推荐使用let和const来提上变量。

var name='张三';
var age=18;
var ai_hao=['美食','旅游'];

2,let声明变量

在es6之后引入。用于声明块级作用域的局部变量。这意味着在声明let变量的时候，它只在声明的代码块内，也就是大括号{}内有效。

let a=1;
let b=2;
for(let a=1;a<5;a++){
    循环体
}

let变量声明之后，后续修改赋值的时候，不需要再重复声明

let bbb1=111;
console.log(bbb1,'我是在声明之后访问的')
//let bbb1=2;  这句会报错
bbb1=2;
console.log(bbb1,'我是在声明之后访问的')

五，变量提升

在javascript中，变量提升是一种机制，它指的是无论变量在那个位置声明，都会被提升到最顶部。这意味着声明部分会被提升到作用域的顶部。但是赋值操作还是在原来的位置。

最直接体现在for循环中：

是用var，声明，外面依旧可以访问到值且值是最后一次的值；

for(var i=0;i<5;i++){
    console.log('我是内部的',i)
}
console.log('我是外面的',i)

使用let声明。外面就无法访问了，内部访问也是当前循环的值，不会忍受变量提升

for(let j=0;j<5;j++){
    console.log('我是内部的',j)
}
console.log('我是外面的',j)

示例二。在声明前访问和声明后访问 let和var的区别

console.log(bbb,'声明的前面访问的');
var bbb=111;
console.log(bbb,'我是在声明之后访问的')


console.log(bbb1,'声明的前面访问的');
let bbb1=111;
console.log(bbb1,'我是在声明之后访问的')

let声明的变量的值没有经过变量提升，所以在赋值之前，是无法读取到它的的值的。

变量提升带来的弊端

可能导致逻辑错误，由于变量提升，如果在变量声明之前访问它，他不会是undefined的，如果在初始化之前访问它，值回事undefined。这会导致难以追踪的逻辑错误；
可读性和维护型降低：变量提升使代码实际执行顺序和编写顺序不一致，这降低了代码的可读性和维护性，未来的我们在阅读代码的时候，可能不容易理解变量的实际作用域和生命周期。
难以发现的bug：在大型或者复杂的项目中，由于变量提升，可能会出现一些难以发现的bug。特别当多个函数或者模块共享一个全局变量的时候，变量提升可能会导致意料不到的错误和行为。

总结：

在了解了变量提升的概念和后果之后，对于编写清晰，规范，可维护的js代码非常重要。所以最好推荐使用let或者const来声明变量，以避免变量提升带来的问题，并享受他们提供的块级作用域和不可重新赋值（const）带来的好处

六,常量

常量是编程中用于存储固定不变值的标识符

再javascript中，常量使用const关键字声明，一旦常量被赋予了一个值，它的值就不能在被改变。

示例

const MAX_AGE=100;

常量命名推荐使用大写字母。单词之间采用下划线分割，用于区分变量。

变量名通常使用小写字母，单词，他们之间驼峰命名法。

常量的特点：

不可变性。一旦常量被赋值，其值就不能在被修改，如果修改还常量的值，javascript会抛出错误；
块级作用域。和let类似，const声明的常量也是块级作用域，即他们声明的只再他们的代码内部有效。

常见的常量示例

// 数字常量 比如整数或者和浮点数
const PI=3.1415926
const MIN_AGE=18


// 字符串的常量
const ROOT_NAME='root';

//布尔常量
const IS_VALUE='true';

常量的运用场景

存储程序中不会改变的值，比如数学常数，配置参数等；
提高代码的可读性和维护性，通过有意义的常量名来代替硬编码的数字或者字符串。
防止程序再运行过程中不小心修改重要值，从而提高程序的健壮性。

七,引入js文件的三种方式

1,嵌入script标签。

<body>
<!--1，嵌入的方式-->
<script>
 console.log(num);
var num = 10; // 结果是什么呢？
</script>
</body>

2,引入本地js文件

文件名的路径可以是绝对路径，也可以是相对路径。推荐使用相对路径。

<script src="2-1js.js"></script>

<!--推荐把引入到容器的后面-->
<div>
  引入js
</div>
<script src="2-1js.js"></script>
</body>

3，引入网络js文件

<!--  第三种引入方式 应用网络的js代码-->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

八,注释

源码中的注释，是不被引擎所解释的，它的作用是对代码进行解释。

javascript提供注释的写法：一种格式单行注释，以// 起头；另一种是多行注释，放在 /**/之间

// 我是单行注释

/*
我是
多行
注释
哈哈
*/

嵌入再html文件中的注释

比如给我们这一段script标签脚本的总注释

<!--推荐把引入到容器的后面-->
<div>
  引入js
</div>
<!--我是上面这个div容器的js代码注释-->
<script src="2-1js.js"></script>
</body>

九,输出方式

javascript有很多种输出方式。都可以让我们更直观的看到程序运行的结果

1,显示在控制台

console.log('要输出的内容')

2,显示在网页上面

document.write('显示在网页上面')

3,弹出对话框显示

在浏览器弹出一个对话框，然后把要输出的内容展示出来，alert就是把要输出的内容首席按转为字符串，然后输出出来

alert('我以弹出对话框的形式展示出来内容')

十，思维导图

1，javascript简介

2，语句，标识符，变量，常量

3，引入方式，注释，输出方式

学习：知识的初次邂逅

复习：知识的温故知新

谢谢观看~