导图社区 JS基础Day1
这是一篇关于JS基础Day1的思维导图,JS是一种运行在客户端的编程语言,实现人机交互效果。
编辑于2024-01-18 10:20:27JS基础Day1
JS介绍
JS是什么?
是一种运行在客户端的编程语言,实现人机交互效果
JS的组成
ECMAScript
规定了js的基础语法核心知识
比如:变量、分支语句、循环语句、对象等等
Web APIs
DOM:操作文档,比如对页面元素进行移动、大小、添加、删除等操作
BOM:操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
作用
网页特效(监听用户的一些行为让网页做出对应反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台数据,渲染到前端)
服务端编程(node.js)
JS书写位置
行内JS
内部JS
直接写在html文件里面,用script标签包住
规范:script标签写在</body>上面
扩展:alert(“你好,js”)页面弹出警告对话框
外部JS
代码写在以.js结尾的文件里
语法:通过script标签,引入到HTML页面里
JS怎么写
注释
单行注释
符号://
作用://右边这一行代码会被忽略
快捷键:ctrl+/
块注释
符号:/**/
作用:在/*和*/之间的所有内容都会被忽略
快捷键:shift+alt+a
结束符
作用:使用英语;代表语句结束
实际情况:实际开发中可写可不写,浏览器可以自动推断语句的结束位置(不加)
JS输入输出语法
输出语法
document.write('要输出的内容')
作用:向body内输出内容
注意:如果输出内容写的是标签,也会被解析成网页元素
alert("输出内容")
作用:页面弹出警告对话框
console.log("控制台打印")
控制台输出语法,程序员调试使用
输入语法
prompt(“请输入您的姓名:”)
作用:显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字
字面量
JS查询权威网站MDN
变量
变量是什么?
计算机中用来存储数据的‘容器’,简单理解是一个盒子
变量的作用
用来存储数据
变量的基本使用
变量声明
要使用变量,首先需要创建变量(也成为声明变量或定义变量)
语法:let 变量名
声明变量由两部分构成:声明关键字、变量名(标识)
变量赋值
定义一个变量后,你就能够初始化他。在变量名之后跟上一个‘=’然后是数值(注:通过变量名来获得变量里的数据)
也可以在声明变量的时候直接完成赋值操作,这种操作也称为变量初始化
更新变量
变量赋值后,还可以通过简单的给他一个不同的直来更新他(注:let不允许多次声明一个变量)
变量案例:交换变量的值
核心思路:使用一个临时变量,用来做中间存储
声明多个变量
变量赋值后,还可以通过简单的给他一个不同的值来更新他
语法:多个变量中间用逗号隔开
说明:看上去代码长度更短,但并不推荐这样做。为了更好地可读性,请一行只声明一个变量
变量的本质
内存:计算机中存储数据的地方,相当于一个空间
变量本质:是程序在内存中申请的一块用来存放数据的小空间
变量的命名规则与规范
规则:必须遵守,不遵守报错(法律层面
不能用关键字
有特殊含义的字符,JS内置的一些英语词汇
只能用下划线,字母,数字、$组成,且数字不能开头
字母严格区分大小写,如Age和age是不同的变量
规范
起名要有意义
遵守小驼峰命名法:第一个单词首字母小写,后面每个单词首字母都大写,如:userName
变量拓展-let和var的区别
var声明
可以先使用 再声明(不合理)
var声明过的变量可以重复声明(不合理)
比如变量提升、全局变量、没有块级作用域等等
变量扩展-数组
声明语法
let 数组名 = [数据1,数据2...数据n]
数组是按顺序保存,所以每个数据都有自己的编号
数组可以存储任意类型的数据
取值语法
数组名[下标]
术语
元素:数组中保存的每个数据都叫数组元素
下标:数组中数据的编号
长度:数组中数据的个数,通过数组的length属性获得
常量
常量的基本使用
概念:使用const声明的变量称为“常量”
使用场景:当某个变量永远不会改变时,就可以使用const来声明,而不是let
命名规范:和变量一致
常量使用:const G = 9.8
注意:常量不允许重新赋值,声明的时候必须赋值(初始化)
小技巧:不需要重新赋值的数据使用const
数据类型
JS数据类型整体分为两大类
基本数据类型
number 数字型
数学中学到的数字,整数、小数、正数、负数统称为数字类型
注:JS是弱数据型,变量到底属于哪种类型,只有复制之后才能确认Java十强数据型 例如 int a = 3 必须是整数
数学运算符
包括内容
+ 求和
- 求差
* 求积
/ 求商
% 求余数
执行优先级
乘、除、取余优先级相同
加减优先级相同
乘、除、取余优先级大于加、减
使用()可以提升优先级
NaN
NaN代表一个计算错误。他是一个不正确的或者一个未定义的数学操作所得到的结果
NaN是粘性的。任何对NaN的操作都会返回NaN
string 字符串型
定义
通过单引号、双引号、反引号包裹的数据都叫字符串,单双引号本质上没有区别,推荐使用单引号
注意事项
无论单双引号都必须成对使用
单双引号可以互相嵌套,但不能自己嵌套自己
必要时可以使用转义符\,输出单双引号
字符串拼接
场景:+运算符可以实现字符串的拼接
模版字符串
使用场景
拼接字符串和变量
没有其之前,要拼接变量比较麻烦
语法
``(反引号)
内容拼接变量时,用${}包住变量
document.write(`大家好,我叫${name},今年${age}岁`)
boolean 布尔型
表示肯定或者否定时在计算机中对应的是布尔类型数据他有两个固定的值true和false
undefined 未定义型
未定义是比较特殊的类型,只有一个值undefined
只声明变量,不赋值的情况下,变量默认值为undefined,一般很少直接为某个变量赋值为undefined
开发时经常声明一个变量,等待传过来的数据。如不知道这个数据是否传递过来,可检查此变量是否为undefined,可判断用户是否有数据传递过来
null 空类型
JS中的null仅仅是一个表示‘无’‘空’或‘值未知’的特殊值
与undefined的区别
undefined表示没有赋值
null表示赋值了,但内容为空
开发中的使用场景
官方解释:把null作为尚未创建的对象
大白话:将来有个变量里存放的是一个对象,但对象还没有创建好,可以先给个null
检测数据类型
typeof
作为运算符:typeof x(常用写法)
函数形式:typeof(x)
注:有括号和没有括号,得到的结果是一样的,所以直接使用运算符的写法
引用数据类型
object 对象
类型转换
为什么需要类型转换
JS是若数据类型:JS不知道到底是属于哪种数据类型,只有赋值后才清楚
坑:使用表单、prompt获取过来的数据默认是字符串类型,此时不能直接进行加法运算
此时需要转变变量的数据类型
隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换
规则
+号两边只要有一个是字符串就会将另一个转换为字符串
除了+以外的算术运算符比如-*/都会把数据转成数字类型
缺点
转换类型不明确,靠经验才能总结
小技巧
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串
显示转换
编写程序时过度依靠系统内部的隐式转换是不严谨的,因为隐式转换规律不清晰,大多是靠经验总结的规律。为了避免隐式转换带来的问题,通常根据逻辑需要对数据进行显式转换
概念:自己写代码告诉系统该转换成什么类型
转换为数字型
Number(数据)
转成数字类型
如果字符串中内容有非数字,转换失败时结果为NaN即不是一个数字
NaN也是number类型的数据,代表非数字
parselnt(数据)
只保留整数
parseFloat(数据)
可以保留小数