- 很高心您打开了本篇博客;
- 本篇博客是JavaScript专栏 笔记梳理 的第一篇;
- 主要作用:学习和复习JavaScript语言,为前端/后端/大数据项目提供基石;
- 主要内容:js介绍,标识符,变量var和let,变量提升(var和let的区别),引入js的方式,注释,输出方式等。
目录
一,初识JavaScript
1,JavaScript简介
javascript是一种轻量级的脚本语言。所谓脚本语言,是指不具备开发操作系统的能力,而只是用来编写控制其他大型程序的‘脚本’。
javascript是一种嵌入式语言。它本身提供的核心语法并不算很多,通常用来做一些数学和逻辑运算。
javascript简称js。 它也是一种具有函数邮箱的轻量级,解释性,即时编译型的编程语言。它最初是作为开发web页面的脚本语言而闻名。它的核心语法相对简洁,但是通过与其他技术如HTML,CSS,DOM,BOS等集成,就可以实现复杂的web应用程序。
2,为什么要学习javascript
1,js操作浏览器的能力
js可以操作浏览器,这点是任何语言都无法与之匹敌的。所以js在web应用程序上面得天独厚,享有无上的荣光。
javascript设计的初衷就是为了增强网页的互动性。它可以与浏览器直接互动,操作浏览器的行为,包括但不限于:
- 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 、 instanceofinterface 、 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,引入方式,注释,输出方式
学习:知识的初次邂逅
复习:知识的温故知新
谢谢观看~