文章目录
JavaScript (应用)
JavaScript简述
是什么?
是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
做什么?
网页特效(监听用户的一些行为让网页作出对应的反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台的数据,渲染到前端)
服务端编程(node.js)
有什么?
ECMAScript:
规定了j5基础语法核心知识。比如:变量、分支语句、循环语句、对象等等
Web APIs:
DOM操作文档,比如对页面元素进行移动、大小、添加删除等操作
BOM操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
书写位置:
- 内部JavaScript
直接写在html文件里,用script标签包住
规范:script标签写在</body>
上面
注意:
我们将<script>
放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML。如果先加载的JavaScript期望修改其下方的HTML,那么它可能由于HTML尚未被加载而失效。
因此,将JavaScript代码放在HTML页面的底部附近通常是最好的策略。
- 外部JavaScript
代码写在以.js结尾的文件里
语法:通过script标签,引入到html页面中。
注意:
1.script标签中间无需写代码,否则会被忽略!
2.外部JavaScript会使代码更加有序,更易于复用,且没有了脚本的混合,HTML也会更加易读,因此这是个好的习惯。
- 内联JavaScript
代码写在标签内部
注意:此处作为了解即可,但是后面vue框架会用这种模式
注释
- 单行注释
符号://
作用://右边这一行的代码会被忽略
快捷键:ctrl+/
- 块注释
2符号:/* */
作用:在/* 和*/之间的所有内容都会被忽略
快捷键:shift+alt+A
输入与输出
输出
document.write('要输出的内容');
向body内输出内容
如果输出的内容写的是标签,也会被解析成网页元素
alert('要输出的内容');
页面弹出警告对话框
console.log('控制台打印');
控制台输出语法,程序员调试使用
输入
prompt('请输入您的姓名:');
显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字
变量
声明
要想使用变量,首先需要创建变量(专业说法:声明变量)
语法:
let 变量名
赋值
例:age=18
数组
声明语法
let数组名=[数据1,数据2,.·,数据n]
例
let names=['小明','小刚','小红','小丽','小米']
数组是按顺序保存,所以每个数据都有自己的编号
计算机中的编号从0开始,所以小明的编号为0,小刚编号为1,以此类推
在数组中,数据的编号也叫索引或下标
数组可以存储任意类型的数据
数组中数据的个数,通过数组的length属性获得
操作
查询
数组[下标]
添加
arr.push(元素1,元素2,···,元素n)
arr.unshift(元素1,元素2,···,元素n)
数组.push()方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度
arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头,并返回该数组的新长度
赋值
数组[下标]=赋值
删除
arr.pop()
arr.shift()
arr.splice(操作的下标,删除的个数)
数组.pop()方法从数组中删除最后一个元素,并返回该元素的值
数组.shift()方法从数组中删除第一个元素,并返回该元素的值
arr.splice(start,deleteCount)
start起始位置:指定修改的开始位置(从0计数)
deleteCount:表示要移除的数组元素的个数(可选的。如果省略则默认从指定的起始位置删除
到最后)
数据类型
基本数据类型
number 数字型
JavaScript中的正数、负数、小数等统一称为数字类型。
string 字符串型
通过单引号(“)、双引号(”)或反引号(`)包裹的数据都叫字符串,单引号和双引号没
有本质上的区别,推荐使用单引号。
单引号/双引号可以互相嵌套,但是不以自已嵌套自己
必要时可以使用转义符\,输出单引号或双引号
字符串拼接用" + "
模板字符串
符号 ``
例:
document.write(`大家好,我叫${
name},今年${
age}岁`)
boolean 布尔型
它有两个固定的值true和false,表示肯定的数据用true(真),表示否定的数据用false(假)。
undefined 未定义型
未定义是比较特殊的类型,只有一个值undefined.
什么情况出现未定义类型?
只声明变量,不赋值的情况下,变量的默认值为undefined,一般很少【直接】为某个变量赋值为undefined。
null 空类型
null表示值为空
null和undefined☒别:
1.undefined表示没有赋值
2.ul表示赋值了,但是内容为空
官方解释:把null作为尚未创建的对象
大白话:将来有个变量里面存放的是一个对象,但是对象还没创建好,可以先给个null
引用数据类型
object 对象
function 函数
array 数组
数据类型检测
- 控制台输出语句
可以看出数字型和布尔型颜色为蓝色,字符串和undefined颜色为灰色
- typeof 关键字来检测
例:
console.log(typeof age)
数据转换
使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。
隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:
+号两边只要有一个是字符串,都会把另外一个转成字符串
除了+以外的算术运算符比如·*/等都会把数据转成数字类型
注意:
+号作为正号解析可以转换成Number
如
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q6BOwOCZ-1675233216376)(C:\Users\时间机器\AppData\Roaming\Typora\typora-user-images\image-20230102134240980.png)]
显式转换
转换为数字型
Number(数据)
-
转成数字类型
-
如果字符串内容里有非数字,转换失败时结果为NaN(Not a Number)即不是一个数字
-
NaN也是number类型的数据,代表非数字
parselnt(数据)
只保留整数
parseFloat(数据)
可以保留小数
转换为字符型:
String(数据)
变量.toString(进制)
运算符
算术运算符
数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。
+:求和
-:求差
*:求积
/:求商
%:取模(取余数)开发中经常作为某个数字是否被整除
优先级
乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用)可以提升优先级
总结:先乘除后加减,有括号先算括号里面的
赋值运算符
赋值运算符:对变量进行赋值的运算符
已经学过的赋值运算符:=将等号右边的值赋予给左边。要求左边必须是一个容器
其他赋值运算符:
*=
%=
一元运算符
自增:
符号:++
作用:让变量的值+1
自减:
符号:-
作用:让变量的值-1
注意前后自增的差别
比较运算符
>
左边是否大于右边
<
左边是否小于右边
>=
左边是香大于或等于右边
<=
左边是否小于或等于右边
==
左右两边是否相等
===
左右两边是否类型和值都相等
!==
左右两边是否不全等
比较结果为boolean类型,即只会得到true或false
注意
- 字符串比较,是比较的字符对应的ASCI码
- 从左往右依次比较
- 如果第一位一样再比较第二位,以此类推
- NaN不等于任何值,包括它本身
- 尽量不要比较小数,因为小数有精度问题
- 不同类型之间比较会发生隐式转换
- 最终把数据隐式转换转成number类型再比较
- 所以开发中,如果进行准确的比较我们更喜欢==或者!=
=
和==
和==
怎么区别?
=
是赋值
==
是判断只要求值相等,不要求数据类型一样即可返回true
===
是全等要求值和数据类型都一样返回的才是true
开发中,请使用===
逻辑运算符
符号 | 名称 | 日常读法 | 特点 | 口决 |
---|---|---|---|---|
&& | 逻辑与 | 并且 | 符号两边都为true 结果才为true |
一假则假 |
|| | 逻辑或 | 或者 | 符号两边有一个 true就为true |
一真则真 |
! | 逻辑非 | 取反 | true变false false变true |
真变假,假变真 |
短路:只存在于&&和‖中,当满足一定条件会让右边代码不执行
符号 | 短路条件 |
---|---|
&& | 左边为false就短路 |
|| | 左边为true就短路 |
原因:通过左边能得到整个式子的结果,因此没必要再判断右边
运算结果:无论&&还是||,运算结果都是最后被执行的表达式值,一般用在变量赋值
运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++,–,! |
3 | 算数运算符 | 先*/%后± |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先&&后|| |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
语句
if
语句有三种使用:单分支、双分支、多分支
if的用法同C语言
三元运算符
- 其实是比if分支更简单的写法,有时候也叫做三元表达式
- 符号:?与:配合使用
- 语法:
条件?满足条件执行的代码:不满足条件执行的代码
- 一般用来取值
switch语句
语法
switch(数据){
case值1:
代码1
break
case值2:
代码2
break
default:
代码n
break
}
- switch case语句一股用于等值判断,不适合于区间判断
- switch case一般需要配合break关键字使用没有break会造成case穿透
循环
while循环
while(循环条件){
要重复执行的代码(循环体)
}
continue:结束本次循环,继续下次循环
break:跳出所在的循环
for循环
for(声明记录循环次数的变量;循环条件;变化值){
循环体
}
函数
函数:
function,是被设计为执行特定任务的代码块
说明:
函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包
裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。
声明
function 函数名(){
函数体
}
function 函数名(参数列表){
函数体
}
函数名命名规范
- 和变量命名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
- 命名建议:常用动词约定
动词 | 含义 |
---|---|
can | 判断是否可执行某个动作 |
has | 判断是否含义某个值 |
is | 判断是否为某个值 |
get | 获取某个值 |
set | 设置某个值 |
load | 加载某些放据 |
return返回数据
- 在函数体中使用return关键字能将内部的执行结果交给函数外部使用
- 函数内部只能出现1次return,并且return后面代码不会再被执行,所以return后面的数据不要换行写
- return会立即结束当前函数
- 函数可以没有return,这种情况函数默认返回值为undefined
变量的作用域
全局变量
函数外部let的变量,全局变量在任何区域都可以访问和修改
局部变量
函数内部let的变量,局部变量只能在当前函数内部访问和修改
块级变量
{}内部的let变量,let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问
注意
如果函数内部或者块级作用域内部,变量设有声明,直接赋值,也当全局变看,但是强烈不推荐
但是有一种情况,函数内部的形参可以看做是局部变量,
变量访问原则——作用域链
- 只要是代码,就至少有一个作用域
- 写在函数内的局部作用域
- 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用减
- 根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链
匿名函数
function() {
}
将匿名函数赋值给一个变量,并且通过变量名称进行调用我们将这个称为函数表达式
语法
let fn=function(){
//函数体
}
调用
fn()
目前没有使用场景,后期Web API会使用。
立即执行函数
场景介绍:避免全局变量之间的污染
语法:
//方式1
(function(){
console.log(11