简介
JavaScript 是一种轻量级的编程语言(PHP都是弱语言),改善用户界面和用户体验。运行在客户端(浏览器)。服务端编程node.js:Node.js 主要用于服务器端,用于构建服务器应用、API、后端服务等。,当然HTML和CSS属于标记语言,三者(框架+外观装饰+功能交互)构成我们熟知的前端界面,JS使得我们的交互有大大的帮助。(轻量级交互弱类型脚本语言)
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
由两大部分组成
ECMAScript:规定js基础语法核心知识
eg:变量,分支语句,循环语句,对象等等
Web APIs:
DOM: 操作文档,比如对页面元素进行移动,大小添加删除等操作
BOM:操作浏览器,比如页面弹窗,检测窗口宽度,存储数据到浏览器等等
搜索资料等: https://developer.mozilla.org/zh-CN/ 👍
位置
内部js
必须被script标签包裹,且script标签要写在</head>标签里或者 </body>上面
外部js,和css类似,新建之后通过script标签引用到html当中即可。如果说引用之后,<script>内部在写内容是不会被执行的。
行内js;代码写在标签内部;
结束符
实际开发中,可写可不写,为了统一风格,要么每句都写,要么都不写分号;
输出输入语法
输出
语法一:
document.write("我是输出"); //像body内输出内容,如果写的是标签,也会被解析,比如document.write("<h2>我是标题<h2>");加了二级标题
语法二:
alert('内容') //页面弹出对话窗,警示框
console.log('控制台打印')
输入语法
语法一:
prompt("你好彭于晏,这是对话框"); //弹出对话框
<input type="button" value="ikun" onclick="alert('请上传你的ikun证明');" //这个是警示框
变量
简单理解计算机存储数据的“容器”,它可以让计算机有”记忆“。简单理解是一个盒子,这里并不是指的数据,它只是能存贮数据。变量用 let关键字来声明,然后用 = (赋值运算符)来赋值
let age;
age = 666; //=为赋值号,把666装到age这个变量"盒子"里面;这里的赋值为666;
alert(age); //输出
console.log(age); //打印
//这里直接一部到位,声明的同时直接赋值
let age = 454;
alert(age);
console.log(age);
let num = 180;
let name = "ikun"; //字符串别忘了加引号
alert(num); //输出
alert(name);
console.log(num); //变量名不加引号,控制台查看打印内容
console.log(name);
更新变量
更新变量
let num = 180;
num = 185; 直接覆盖,只能执行一个,此时控制台打印输出也会更新
//这里不是重新通过用 let 在声明一次,直接nun赋值即可,也就是说 let 不允许多次声明一个变量,比如这里的num
console.log(num); //变量名不加引号
*声明多个变量*
let age = 18,name = "菜kun"; //同时声明,中间用逗号隔开
// let age =18;
// let name = "菜kun"; 尽量分开较好一点,不提倡同时声明变量,因为可读性不好
alert(age);
alert(name);
console.log(age, name);
*实例*
//prompt('请输入姓名') //用户输入
let name = prompt("用户输入名子name"); //内部处理保存数据,声明一个变量,也就是"盒子",在盒子里面匹配
document.write(name); //打印输出内容
变量的本质以及命名规则
变量的本质
内存:计算机中存储数据的地方,相当于一个空间
变量本质:是程序在内存中申请的一块用来存放数据的小空间
规则
-
变量名必须以字母、下划线(_)或美元符号($)开头。后续字符可以是字母、数字、下划线或美元符号。
-
变量名区分大小写,这意味着变量名
myVariable
和myvariable
是不同的变量。 -
避免使用 JavaScript 的保留字(关键字)作为变量名。这些关键字包括
if
、else
、while
、for
、function
等等。使用这些关键字作为变量名会引发错误。
规范
-
使用有意义的变量名:变量名应该反映出其所代表的内容或用途,以提高代码的可读性。例如,使用
count
而不是c
来表示计数器。 -
采用驼峰命名法:在 JavaScript 中,通常使用驼峰命名法来命名变量,其中单词之间用大写字母开头。例如,
myVariableName
。这是一种常见的命名约定,有助于提高代码的可读性。 -
避免使用缩写:尽量避免使用过多的缩写,除非缩写是广泛理解的。使用完整的单词有助于降低代码的歧义性。
-
保持一致性:在整个项目中保持一致的命名约定是很重要的。如果你在某处使用了驼峰命名法,那么在整个项目中都应该遵循相同的约定。
-
使用有意义的前缀:在某些情况下,可以使用前缀来指示变量的类型或用途。例如,
strName
可能表示一个字符串类型的变量。 -
避免使用单个字符的变量名,除非这是一个临时的迭代变量。使用具有描述性的变量名可以提高代码的可维护性。
变量命名规则与规范
// 目标:能写出符合规范的变量名
规范:建议,不遵守不会报错,但不符合业内通识
1.规则
不能用关键字;比如有特殊含义的字符,js内置的一些英文词汇。例如:let,var,if,for等
只能用下划线,数字,字母,$组成,且数字不能开头
字母严格区分大小写,如Age和age是不同的变量
2.规范
js严格区分大小写; JavaScript 将大写字母和小写字母视为完全不同的字符,因此变量名、函数名、关键字和其他标识符必须按照大小写精确匹配
起名要有意义,遵守小驼峰命名法,第一个单词首字母小写,后面每个单词首字母大写。eg userName;
实践
实践:用户输入自己的名字,年龄,性别,在输出网页
let age = prompt("请输入你的年龄18"); //弹出输入框,输入年龄,用变量保存
// document.write(age);
let gender = prompt("请输入你的性别鸡"); //弹出输入框,输入性别,用变量保存
// document.write(gender);
let uname = prompt("请输入你的名字坤坤"); //弹出输入框,输入名字,用变量保存
document.write(age, gender, uname);
// 页面分别输出刚才保存的变量
交互两个变量
要求变量num1和变量num2的值互换;num1=80,num2=60;思路就是声明一个新的临时变量temp,从而形成一个可以交换的条件,最后console.log打印输出的就是 坤精,炒粉 从而实现互换;
let num1 = 坤神; //声明num1
let num2 = 炒粉; //声明num2
let temp;
temp = num1; //把num1给temp,从右给左,别搞混了,都是右边给左边
num1 = num2; //把num2给num1
num2 = temp; //把temp里的num1给num2,这样就完成了num1和num2交换
console.log(num1, num2);
let和var的区别
在 JavaScript 中,let
和 var
是用于声明变量的两个不同关键字,它们之间有一些重要的区别:
-
作用域区别:
var
声明的变量具有函数级作用域(function scope)。这意味着变量在声明它的函数内可见,但在函数外不可见。let
声明的变量具有块级作用域(block scope)。这意味着变量在包含它的块内(例如,if
语句、for
循环、函数等)可见,但在块外不可见。
function exampleScope() {
if (true) {
var varVariable = "I am var";
let letVariable = "I am let";
}
console.log(varVariable); // 可以访问
console.log(letVariable); // 无法访问(ReferenceError)
}
变量提升区别:
- 使用
var
声明的变量会存在变量提升(hoisting)的现象,即变量可以在声明之前被访问,但其值会是undefined
。 - 使用
let
声明的变量也存在变量提升,但在声明之前访问它们会导致ReferenceError
,因为它们没有初始化为undefined
,而是暂时性死区(Temporal Dead Zone,简称 TDZ)。
console.log(varVariable); // undefined
var varVariable = "I am var";
console.log(letVariable); // ReferenceError
let letVariable = "I am let";
重复声明区别:
- 使用
var
可以多次声明同一个变量而不会报错,后续声明会覆盖前面的声明。 - 使用
let
在同一作用域内重复声明同一个变量会引发语法错误。
var varVariable = "I am var";
var varVariable = "I am another var"; // 合法
let letVariable = "I am let";
let letVariable = "I am another let"; // 报错(SyntaxError)
总结:let
和 var
在作用域、变量提升和重复声明方面有显著的区别。一般来说,推荐使用 let
来声明变量,因为它具有更严格的作用域规则,可以减少潜在的错误。如果需要在整个函数内部或全局范围内使用变量,可以考虑使用 var
,但在现代 JavaScript 中,更常见的做法是使用 let
和 const
。
数组的基本使用
1:使用数组可以保存多个数据,下面有例子
2:数组字面量用 []中括号
数组是按顺序保存,所以每个数据都有自己的编号
计算机中的编号都是从0开始,所以爱困的编号是0,爱坤的编号是2...
在数组中,数据的编号也叫索引或下标
取值的语法:
数组名[下标or索引]
1.声明数组,
let arr = ["爱困", "爱坤", "菜坤"]; //使用规则,因为数组是有序排序的
2.使用数组,数组名[索引号],从0,爱困,1,爱坤...以此开始......
console.log(arr[0]); //在控制台打印0,爱困
数组取值案例
定义一个数组,里面存放星期一,星期二....等数据,在控制台输出:星期六,星期二
一些术语
// 元素:数组中保存的每个数据都叫数组元素
// 下标:数组中数据的编号
// 长度:数组中数据的个数,通过数组的length属性获得
数组长度 = 索引号or下标 + 1; //都是废话,都是从0开始的那可不+1吗
常量
常量的基本使用
概念:使用const声明的变量称为"常量"
使用场景:当某个变量永远不会改变的时候,就可以使用const来声明,而不是let
命名规范和变量一致
使用:
const kk = "jiji"; //const 常量声明;且声明赋值后不允许再次赋值
console.log(kk);
kk = "jiji"; //这里再次kk声明就会报错,和let一样;当然变量用var可以多次重复声明
console.log("kk");
//常量声明的时候必须赋值(初始化),不然会报错,因为const里面的值不能被修改,常量不允许重新赋值
// 因此,不需要重新赋值的数据使用const
const k //这里没有赋值就是错误
**总结**
let 现在实际开发变量声明方式
var 以前的声明变量的方式,会有很多问题
const 类似于let ,但是变量的值无法被修改
数据类型
js整体分为两大类:基本数据类型,引用数据类型
基本数据类型: js是弱数据类型,变量到底属于哪种类型,只有赋值之后,我们才能确认,java是强数据类型,例如 int a=3 那么这个赋值的必须是整数
number (数字型)
Number 数字类型 : 整数,小数,正数,负数
数字可以有很多操作,比如 乘法* ,除法/ ,加法+,减法—— 等等;数字运算符也叫算数运算符 ,主要包括,加减乘除,取余(求模%),
eg:
console.log(2+2)
console.log(1*1)
console.log(1/1)
console.log(4%2) //求余数
js运算的优先级按照高低进行,优先级相同时从左向右执行。乘,除,取余,优先级相同,加减优先级相同,乘除取余优先级大于加减,使用()可以提升优先级; 小学算数?
-: 求差
*: 求积
/:求商
% :取模(取余数),开发中经常作为某个数字是否被整除
实例
实例:用js计算圆的面积,要求有输出对话框
// 1,页面弹出输入框。 prompt()
// prompt('请输入圆的半径r')
let r = prompt("请输入圆的半径r"); //let声明变量r,prompt()弹出对话框
let re = 3.14 * r * r; //声明变量re结果
// 2,计算圆的面积 ,内部处理
document.write(re); //输出
// 3,页面输出
console.log(3.14 * r * r); //打印输出的话可加可不加
NaN代表一个计算错误,他是一个不正确的或者一个未定义的数学操作所得到的结果只要与他进行操作的都是返回的NaN
string (字符串型)
通过单引号(''),双引号(""),或反引号(`) 包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号
**注意事项**
无论单双引号一定要成对使用;
单双可以互相嵌套,但是不可以自己嵌套自己;(口诀:外双内单,或者外单内双);
必要时可以使用转义符"\",输出单引号或双引号
string 字符串类型
// 通过单引号(''),双引号(""),或反引号(`) 包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号
let str = "ikun";
let str1 = "kun";
let str2 = `中文`;
console.log(str2);
let nul = "124343"; //看上去是数字,但是引号包裹了就是字符串
let nu = ""; //这种是空字符串
console.log(nul);
console.log(nu);
console.log("str"); //这里加了引号在打印出来就不是一个变量了,而是一个字符串,就输出str,为不是str赋值的"ikun"
字符串拼接:字符串拼接的形式,"+"运算符可以实现字符串的拼接,口诀:数字相加,字符相连
console.log(1 + 1);
// console.log("ikun" + "kun"); //这里输出的是ikunkun,字符串拼接的形式,"+"运算符可以实现字符串的拼接,口诀:数字相加,字符相连
document.write("你是" + "ikun"); //输出你是ikun
let name = "你是";
let kk = "ikun";
document.write(name + kk); //let声明变量用+运算符连接,并输出变量的值,你是ikun
实例
实景;不推荐比较麻烦
let age = 18;
document.write("我今年" + 18); //要更改赋值的18,那么想生成我今年19,因为19是数值型,用+可以把字符串和数字拼接成字符串
document.write("我今年" + age); //用+拼接成了字符串直接输出"我今年18",此时页面输出我今年18,但是这样已经写死了,如果更改18的话,更快的是直接把变量连接起来,这样我们只要更改age的赋值,输出就会更新了
document.write("我今年" + age + "岁了"); //以此类推即可,用+连接字符串就行了,此时页面输出,我今年18岁了
document.write("我今年+age+岁了"); //变量一定不能加引号,此时这样更改只会输出我今年age岁了,应该用分号单独分开,就是下面这个
document.write("我今年" + age + "岁了");//实现了字符串的拼接,此时页面输出我今年18岁了
模板字符串
**模板字符串**
使用场景
拼接字符串和变量
在没有他之前,用拼接变量比较麻烦,虽然能解决问题,但是如果量大的话,容易出错,因此就用模板字符串。
语法:``(反引号)
内容拼接变量时,用${}包住变量
let age = 18;
document.write(`我今年${age}岁了`);//外面用反引号,里面用${变量名},这样就不用使用+拼接那么麻烦了
实例
要求:页面弹出对话框,输入名字和年龄,页面显示:大家好,我是ikun,练习时长**,喜欢**
let name = prompt("你是谁?"); //弹出对话框输入名字
let age = prompt("请输入练习时间");
let like = prompt("喜欢什么?");
document.write(`大家好,我是${name},练习时长${age},喜欢${like}`);
声明一个变量name,赋值的是prompt对话框属性,输出你是谁?下面两个变量同理,document.write()用模板字符串格式连接起来,这样根据输入的内容显示
boolean (布尔型)
表示肯定或否定时在计算机中对应的是布尔类型数据
他是两个固定的值true和false,表示肯定的数据用true(真),表示否定的数据用false(假)
true false 是布尔型字面量
console.log(3>4)
let isCool=false
console.log(isCool)
undefined (未定义型)
未定义是比较特殊的类型,只有一个值undefined
什么情况出现未定义类型?
只声明变量,不赋值的情况下,变量的默认值为undefined,一般很少[直接]为某个变量赋值为undefined;比如下面这个声明name变量,但是没有赋值,此时打印输出的就是undefined
null (空类型)
null开发中的使用场景:
当声明一个变量要存的是对象,但是目前没有,可以先用null代替;比如下面这个声明对象为空的时候,用typeof可以检测数据类型,他会返回'object'对象
官方解释:把null作为尚未创建的对象
大白话:将来有个变量里面存放的是一个对象,但是对象还没创建好,可以先给一个null
js中的null仅仅是一个代表'无','空'或'值未知'的特殊值,和未定义相反,声明但没赋值,null赋值了,但是内容为空
对比undefined(未定义型)和null(空类型)
console.log(undefined + 1); //NaN代表一个计算错误,他是一个不正确的或者一个未定义的数学操作所得到的结果只要与他进行操作的都是返回的NaN
console.log(null + 1); //这里空的+1 结果就是1
控制台输出语句和检测数据类型
控制台输出语句;
控制台语句经常用于测试结果来使用,可以看出数字型,和布尔型颜色一样,字符串和undefined颜色一样
通过typeof关键字检测数据类型
typeof运算符可以返回被检测的数据类型。它支持下面两种语法形式:
1.作为运算符“typeof **(常用的写法)
2.函数形式:typeof(*)
其实有没有括号,得到的结果是一样的,所以我们直接用运算符写法
类型转换
js当中prompt,以及单选框,复选框,多选框,表单获取回来的值默认的都是字符串型,比如例2就不能进行简单的加法运算。所以有风险然而我们声明的变量赋值的是数字,因此要进行数据类型转换
例1
例2
使用表单,prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算
console.log("10000" + "20000");//发工资的时候,如果是这样输出那输出的结果1000020000可想而知
此时需要转换变量的数据类型
通俗来说,就是把一种数据类型的变量转换成我们需要的数据类型
隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种称为隐式转换
规则:
+号两边只要有一个是字符串,都会把另外一个转为字符串
除了+号以外的算数运算符比如" -","*","/"等都会把数据类型转成为数字类型
console.log(2 + 2); //输出4
console.log(2 + "2"); //输出22
console.log(6 - 2);
console.log(6 - "6"); //-减号转换,直接运算输出
console.log(6 * "2"); //此时的字符串就发生了类型转换,会输出(6*'2'=)2
console.log("6" / 3); //此时的字符串就发生了类型转换,会输出(6/3=)2
console.log(+"123"); //特殊情况下加号当作正数,此时引号里面的数字当作数字型输出。
console.log(+"2332");
缺点:
转换类型不明确,靠经验才能总结
小技巧:
+号作为正好解析可以转换成数字型
任何数据和字符串相加结果都是字符串
显示转换
编写程序时过度依靠系统内部的隐式转换是不严谨的,因为隐式转换规律不太清晰,大多是靠经验总结的规律
为了避免隐式转换带来的问题,通常根据逻辑需要对数据进行显示转换
概念:
自己写代码告诉系统该转换成什么类型
转换为数字型
Number(数据)
转成数字类型
如果字符串内容里有非数字,转换失败时结果为NaN(Not a Number)既不是一个数字
NaN也是number类型的数据,代表非数字
parselnt(数据)
只保留整数
console.log(parseInt("12px")); //比如在设置像素的时候,我们只记录数字12不要px单位,如果不加parseInt他就会以字符串输出,加了之后就会输出数值整数部分12
parseFloat(数据)
console.log(parseFloat("12.6px")); //这里如果换成parseFloat就会输出全部包括小数部分
可以保留小数
let str = "123";
console.log(Number(str)); //输出123
let nub = prompt("请输入年龄");
console.log(Number(nub));
也可以放到变量后面位直接写;
let nub = Number(prompt("请输入年龄"));
console.log(nub);
let nub2 = +prompt("请输入年龄"); //这里使用隐式转换
console.log(nub2);
实例
要求:输入两个数字,计算两个数字的和,打印到页面中;
(这里要解决的是prompt输出的是字符串的形式,不然会输出eg:6+8=68,而不是14。我们要的是数字型的运算,因此这里需要进行数据类型转换,有两种方式,显性(Number)和隐性转换(+);
let nub1 = +prompt("请输入你的数字:"); //用户输入模块,输入数字存储到变量,用+进行隐性转换,也可以用Number
//let nub1 = Number(prompt("请输入你的数字:"));
let nub2 = +prompt("请输入你的数字:"); //这里使用显性转换,同理
//let nub2 = Number(prompt("请输入你的数字:"));
alert(`计算的和结果是:${nub1 + nub2}`);//输出,用模板字符串,更方便
console.log(nub1 + nub2); //打印输出,可加可不加
实践
-
通过
prompt
函数获取用户输入的商品价格、数量和收货地址,并将它们存储在变量price
、num
和address
中。在此过程中,使用了隐式转换+
来将用户输入的字符串转换为数字。 -
计算商品的总价并将其存储在变量
total
中。 -
使用模板字符串创建一个包含商品信息的表格,并将这个表格输出到文档中。
-
弹出两个提示框,一个显示商品价格和数量的总和,另一个显示收货地址。
// 使用 prompt 获取用户输入的价格,并将其转换为数字存储在变量 price 中
let price = +prompt("请输入价格");
// 使用 prompt 获取用户输入的数量,并将其转换为数字存储在变量 num 中
let num = +prompt("请输入数量");
// 使用 prompt 获取用户输入的收货地址,保存在变量 address 中
let address = prompt("请输入收货地址");
// 计算商品总价并将其存储在变量 total 中
let total = price * num;
// 使用模板字符串创建一个包含商品信息的表格,并输出到文档中
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米青春版PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}</td>
<td>${address}</td>
</tr>
</table>
`);
// 弹出提示框,显示商品价格和数量的总和
alert(`商品总价:${price + num}`);
// 弹出提示框,显示收货地址
alert(`收货地址:${address}`);
js演示
运算符
赋值运算符
比如让let num=6,num加8就是 num+=8,然后在输出;同理/=,和这个一样
let num3 = 6;
num3 /= 2;
console.log(num3); //输出2
能够使用赋值运算符简化代码
赋值运算符:对变量进行赋值的运算符
= 将等号右边的值赋予给左边,要求左边必须是一个容器
其他赋值运算符
+=
// let num = 1; //此时num里就是1
// num + 1; //这里虽然是1+1但是没地方输出
// console.log(num); //这里num还是第一个num的值,1,所以正确的应该是下面这个
// num = num + 1;
// console.log(num); //此时才会输出1+1=2的结果
//上面的虽然不错,但是可以采取赋值运算符来简化代码,如下所示,用'=+'
// let num = 1;
// num += 1; //等价于num=num+1
// console.log(num); //此时输出结果为2
// 同理每次想增加几,改变数字就行了
let num = 1;
num += 6; //每次增加6
console.log(num); //输出结果为7
自增运算符
一元运算符
能够使用一元运算符做自增运算
众多的js运算符可以根据所需表达式的个数,分为一元运算符,二元运算符,三元运算符
二元运算符
eg:
let num=10+20//比如这里进行加法运算,需要两个运算数才能做运算,因此是二元运算符
一元运算符
"+"这里是前面学的隐式转换符号,当然"-"负号也是
前面可以增加值得方法,但是还有更简便的,那就是自增运算符++
自增运算符++
作用让变量+1
自减--
作用:让变量-1
使用场景:经常用于计数来使用,比如进行10次操作,用它来计算进行了多少次了
1,前置自增 ++变量
let k = 1;
++k;
console.log(k);//作用相当于num+=1,但是自增(自减)的只能是+1
后置自增 变量++ 这种更好理解,变量++更直观了
let kk = 6;
kk++;
console.log(kk);//结果是7,作用相当于num+=1,但是自增(自减)的只能是+1
因此,前置自增和后置自增只能加1
let k = 2;
console.log(++k + 3); //这里自增2,也就是打印3+3的结果,所以最后输出为6
前置自增:先自加在使用(记忆口诀:++在前先加)
后置自增:先使用在自加(记忆口诀:++在后 后加)
let kk = 3;
console.log(kk++ + 3); //此时输出为6,因为后置执行的时候,KK++在console()里面就不是单独的一行代码,所以还是3,而前置执行就是自增,所以二者还是有区别的
此时的KK是3,先和3相加,先运算输出完毕后,kk在自加是6
注意:前置自增和后置自增独立使用时二者并没有差别,一般在开发中我们都是独立使用,一般在开发中我们都是独立使用,后置++更多;后面kk++,(变量++),后置自增会使用相对较多,并且都是单独使用
比较运算符
介绍:使用场景:比较两个数据大小,是否相等
>:左边是否大于右边
<:左边是否小于右边
>=:左边是否大于或等于右边
<=: 左边是否小于或等于右边
==: 左右两边是否相等
===: 左右两边是否类型和值相等
!==: 左右两边是否不全等
比较结果为boolean类型,即只会得到true或false
console.log(3 > 5);
console.log(3 >= 3);
console.log(2 == 2);
console.log(2 == "2"); //==会进行类型强制转换,会把字符串'2 ' ,转换成数字2,双等号只判断值,所以比较运算符有隐式转换
//console.log(2 - "2") 结果是0
console.log(2 === "2"); //===全等运算符,它不会进行类型转换,全等号判断 ,值,和数据类型都一样才行,因此判断是否相等,尽量是全等
console.log(NaN === NaN); //NaN不等于任何人,包括他自己
console.log(2 !== "2"); //!==是一个严格不相等的比较运算符,它不会进行类型强制转换。因此,它会比较两个操作数的值和类型,只有在值和类型都不相等时才返回true,这里的类型不相等,所以返回true
对比:
=单等是赋值
==是判断
===是全等 开发中判断是否相等,推荐===
逻辑运算符
如何判断一个变量num是否大于5且小于10;
let num = 8;
console.log(num > 5 && num < 10);//返回true
逻辑真"&&" 一真则真
逻辑或 "||" 一真则真
实践
用户输入一个,判断这个数能被4整除,但是不能被100整除,满足条件页面弹出true,否则弹出false
let num1 = +prompt("请输入您要计算的数字:");
//显示转换,Number(prompt("请输入您要计算的数字:"));
alert(num1 % 4 == 0 && num1 % 100 !== 0);
运算符优先级
一元运算符里面的逻辑非优先级很高;
逻辑与(&&)要比逻辑(||) 或优先级高;
let a = 3 > 5 && 2 < 7 && 3 == 4; //假
console.log(a);
let b = 3 <= 4 || 3 > 1 || 3 != 2; //真
console.log(b);
let c = 2 === "2"; //假
console.log(c);
let d = !c || (b && a); //真
console.log(d);
if判断语句
语句: 是一段可以执行的代码
比如:prompt()可以弹出一个输入框,还有if语句 for循环语句等等
表达式:因为表达式可被求值,所以它可以写在赋值语句的右侧。
表达式 num3+4
总结
因为表达式可被求值,所以它可以写在赋值语句的右侧。
而语句不一定有值,所以比如alert() for 和break 等语句就不能被用于赋值
程序三大流程控制语句
以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构
有的时候要根据条件选择执行代码,这种就叫分支结构
某段代码被重复执行,就叫循环结构
所以前面我们所执行的都是顺序结构,下面我们就要学习分支语句(结构)的学习
分支语句
if单分支语句
if (true) {
console.log("执行语句");
} //除了0 ,所有的数字都为真,同理,除了空字符串都为真'true'
if (2 == "2") {
prompt("执行语句?");
} //这个会执行,因为2=='2'为真,true,所以会执行大括号的语句
if ("ikun") {
prompt("执行语句?");
} //这里是字符串所以为真
if (6 > 8) {
prompt("执行语句?");
} //这里不会执行,因为6>8为假false,不会进入大括号内执行,所以没有任何输出
// <!-- 括号内的条件为true时,才会进入大括号里执行代码
// 小括号内的结果若不是布尔类型,会发生隐式转换为布尔类型
// 如果大括号只有一个语句,大括号可以省略,但是,俺们不提倡这么做
实例
用户输入成绩,如果成绩大于700,则提示恭喜您成功加入北坤学院
let cj = +prompt("请您输入您的成绩:");
if (cj >= 700) {
alert("恭喜您成功加入北坤学院");
}
if双分支语句
实例
用户输入,用户名ikun ,密码:666,则提示登录成功,否则提示登录失败
let name = prompt("请输入您的姓名");
let pass = +prompt("请输入您的密码");
if (name === "ikun" && pass === 666) {
alert("恭喜您登录成功");
} else {
alert("用户名或者密码错误");
}
实例2
让用户输入年份,判断这一年是闰年还是平年并弹出对应的警示框
let yes = +prompt("请输入年份:");
if ((yes % 4 === 0 && yes % 100 !== 0) || yes % 400 === 0) {
alert(`${yes}输入的年份是闰年`);
} else {
alert(`${yes}输入的年份是平年`);
}
js
if多分支语句
使用场景:适合于有多个结果的时候,比如学习成绩可以分为:优 良 中 差
if(条件1){
代码1
}else if(条件2){
代码2
}else if(条件3){
代码3
}else{
代码n
}
//先判断条件1,若满足条件1就执行1,其他不执行
//若不满足则向下判断条件2,满足条件2执行代码2,其他不执行
//若依然不满足继续往下判断,依次类推
//若以上条件都不满足,执行else里的代码n
// 注:可以写N个条件,但这里演示只写2个
实例
根据输入不同的成绩,反馈不同的评价:
成绩90以上是优秀,70-90是良好,60-70之间是及格,60分以下是不及格
let nu = +prompt("请输入你的成绩");
if (nu >= 90) {
alert(`你的成绩${nu}是优秀`);
} else if (nu >= 70 && nu < 90) {
//这里nu<90可以不要
alert(`你的成绩${nu}是良好`);
} else if (nu >= 60 && nu < 70) {
//这里nu<70可以不要
alert(`你的成绩${nu}是及格`);
} else if (nu < 60) {
alert(`你的成绩${nu}是不及格`);
}
三元运算符
使用场景:就是比if双分支更简单的写法,可以使用三元运算符
符号:?与:配合使用
语法: 条件?满足条件执行的代码:不满足条件执行的代码
一般用来取值
实例1
条件?代码1:代码2 //执行思路条件为真执行代码1,为假执行代码2
console.log(3 > 5 ? 3 : 5); //如果为真返回3,为假返回5
if (3 > 5) {
alert("真的");
} else {
alert("假的");
} //这种较为复杂,因此,使用三元运算符直接,一句话输出
3 > 5 ? alert("真的") : alert("假的"); //检测3是不是真的,3>5为假,所以执行后面代码,alert('假的')
let sum = 3 < 5 ? 3 : 5;
console.log(sum);
实例2
判断2个数的最大值
let sum1 = +prompt("请输入第一个数字:");
let sum2 = +prompt("请输入第二个数字:");
sum1 > sum2 ? alert(`你输入的${sum1}最大`) : alert(`你输入的${sum2}最大`);
if (sum1 > sum2) {
alert(`你输入的${sum1}最大`);
} else {
alert(`你输入的${sum2}最大`);
}//这里使用if双分支语句
let num = +prompt("请输入一个数子:");
num < 10 ? alert(`0${num}`) : alert(`${num}`); //如果输入的数字小于10,输出
实例3
判断一个数字,如果小于10,在前面加上0,输出,否则输出原数字
let num = +prompt("请输入一个数子:");
num < 10 ? alert(`0${num}`) : alert(`${num}`); //如果输入的数字小于10,输出
switch分支语句
1.switch case语句一般用于等值判断,不适合于区间判断
2.switch case 一般需要配合break 关键字使用,没有break会造成case穿透
switch (5) {
case 1:
console.log("你选择的是1");
break; //退出switch
case 2:
console.log("你选择的是2");
break;
case 3:
console.log("你选择的是3");
break;
default:
console.log("没有符合条件的");
}
找到跟小括号里数据全等的case值。并执行里面对应的代码;若没有全等===的则执行default里的代码;eg 数据若跟值2全等,则执行代码2
案例
用户输入2个数字,然后输入+ -*/任何一个可以计算结果
let num = +prompt(`请你输入数字:`);
let num1 = +prompt(`请你输入数字:`);
let num2 = prompt(`请你输入运算符:`); //因为加减乘除是字符串,这里不用转意
switch (num2) {
case "+":
alert(`你选择的是加法,计算结果是:${num + num1}`);
break;
case "-":
alert(`你选择的是减法,计算结果是:${num - num1}`);
break;
case "*":
alert(`你选择的是称法,计算结果是:${num * num1}`);
break;
case "/":
alert(`你选择的是除法,计算结果是:${num / num1}`);
break;
default: //这里加上一个结束属性,当用户输入的没有加减乘除,则弹出输入方式错误
alert(`你输入的方式错啦,再看看把~`);
break;
}
if多分支语句和switch区别
共同点:
- 都能实现多分支选择,即从多个选项中选择一个执行。
- 在某些情况下,它们可以互相替代使用。
区别:
switch...case
语句通常用于处理具有明确定义值的情况,每个case
表示一个特定的值。而if...else...
语句更加灵活,通常用于范围判断或者复杂的条件判断,如大于、小于、等于某个范围,或者使用布尔条件。
switch
语句在找到匹配项后会执行相应的代码块,然后终止switch
语句的执行。这可以提高执行效率,因为一旦找到匹配项,就不会再继续判断其他条件。相比之下,if...else...
语句必须逐个判断每个条件,可能会导致性能下降。在
switch
语句中,必须使用===
(全等)来比较,以确保同时考虑值和数据类型。而在if...else...
语句中,可以使用==
或===
,具体取决于需要的类型转换情况。使用
break
关键字是switch
语句的一部分,以防止“穿透”效果。如果不使用break
,可能会导致执行多个case
的代码块。在if...else...
语句中没有这个问题。结论:
- 当分支比较少、每个分支对应一个确定值,或者需要执行效率较高且清晰的代码时,
switch
语句通常更合适。- 当分支较多、条件较复杂、需要范围判断或布尔条件判断时,
if...else...
语句更为灵活,适用性更广
循环语句
断点调试:可以更好的理解代码运行,工作可以更快找到bug
while循环
循环三要素:1,变量起始值 2,终止条件(没有终止条件,循环会一直执行,造成死循环) 3.变量变化量(用自增或者自减)
重复执行一些操作,while:在.......期间,所以while循环就是在满足条件期间,重复执行某些代码
跟if语句很像,都要满足小括号里的条件为true才会进入循环体执行代码;
while大括号里执行代码完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,直到括号内条件不满足,即跳出
eg:
let i = 1;
while (i <= 6) {
document.write("我会循环6次<br>");
i++;
}
也可以直接这种;
let end = +prompt(`请输入次数:`);
let i = 1; //变量的起始值
while (i <= end) {
//终止条件
document.write("月薪过万<br>");
i++; //变量的变化量
}
实例
练习页面输出1-100
let i = 1;
while (i <= 100) {
document.write(`这是第${i}个数<br>`);
i++;
}
一到100的累加和
let i = 1;
let num = 0;
while (i <= 100) {
num += i; //num=num+i这里简写了
i++;
}
alert(`你的计算结果为${num}`); //警告框打印
document.write(num); //页面打印
console.log(num); //控制台打印
计算1-100的偶数之和
let i = 1;
let num = 0;
while (i <= 100) {
if (i % 2 === 0) {
num += i; //num=num+i
}
i++;
}
alert(num);
document.write(num);
console.log(num);
**********************************************************************
let k = 1;
let sum = 0;
while (k <= 100) {
k % 2 !== 0 ? (sum += k) : null; //三元运算符,代替if语句
k++; //这里一定要写在内部,不能进入死循环
}
alert(sum);
document.write(sum);
console.log(sum);
退出循环
循环结束:break:退出循环; continue:结束本次循环,继续下次循环
区别:continue退出本次循环,一般用于排除或者跳过某一个选项的时候,可以使用continue
break 退出本次循环,一般用于结果已经得到,后继的循环不需要的时候可以使用
let i = 1;
while (i <= 5) {
if (i === 3) {
break; //退出整个循环
}
console.log(`我要吃第${i}个包子`);
i++;
}
实例
页面弹出对话框,‘你爱我吗',如果输入'爱',则结束,否则一直输出对话框
while (true) {
let live = prompt(`你爱我吗?`);
if (live === "爱") {
break;
}
}
实例
要求:简单的银行交互系统,允许用户执行存钱、取钱、查看余额和退出
let money = 66;
while (true) {
let re = +prompt(`请你选择操作
1:存钱
2:取钱
3:查看余额
4:退出`);
if (re === 4) {//这里的if可以放到switch里面,然后再加俩个选项
break;
}
switch (re) {
case 1:
let cun = +prompt("请输入存款金额");
money += cun;
break;
case 2:
let qu = +prompt(`请输入取款金额`);
money = money - qu;
break;
case 3:
alert(`你的银行卡余额是${money}`);
break;
case 4: //把第4个判断加到这里,另一种输出方式
alert(`感谢使用该银行服务,祝您生活愉快`);
break;
default: //这里加一个用户选择的不在菜单里,对用户进行弹窗提示
alert("无效的选项,请重新选择。");
}
}
js银行
for循环
for(变量起始值;终止条件;变量变化量){
循环体 }
for (let i = 1; i <= 6; i++) {
//let i=1这里只执行一次
document.write("你也是ikun?");
}
案例
利用 for输出1~100岁
for (let su = 1; su <= 100; su++) {
document.write(`我今年${su}岁了<br>`);
}
求1-100之间所有的偶数和
let sum = 0; //声明一个变量,最终将条件添加到这里
for (let su = 1; su <= 100; su++) {
if (su % 2 === 0) {
sum += su;
}
}
document.write(`1~100之间的偶数之和是:${sum}`);
alert(`1~100之间的偶数之和是:${sum}`); //
console.log(`1~100之间的偶数之和是:${sum}`); //
遍历数组
for循环的最大价值:循环数组
需求:请求数组
arr.length
是 JavaScript 中用于获取数组(Array)的长度(即元素的个数)的属性。它返回一个整数,表示数组中包含多少个元素。例如,如果有一个数组 arr
,你可以使用 arr.length
来获取它的长度。
let arr = ["ikun", "坤坤", "李治", "赣马"];
for (let i = 0; i < arr.length; i++) {
document.write(arr[i]);
console.log(arr[i]);//控制台打印
}
let arr1 = [];
console.log(arr1[0]);
console.log[arr1[1]];
退出循环
continue 退出本次循环,,一般用于排除或者跳过某一个选项的时候,可以使用continue
break 退出整个for循环,一般用于结果已经得到,后继的循环不需要的时候可以使用
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue; //退出本次循环,本次循环中continue 下面的句子不在执行
}
console.log(i);
document.write(i);
}
当明确了循环次数的时候推荐使用for循环;
当不明确循环次数的时候推荐使用whlie循环;
for循环的嵌套
for(外部声明记录循环次数的变量;循环条件;变化值){
for(内部声明记录循环次数的变量;循环条件;变化值){
循环体
}
}//一个循环里再套一个循环,一般用for循环里
eg:假如每天记住5个单词,3天后一共能记住多少个单词?
案例
// 使用for循环遍历三天
for (let i = 1; i <= 3; i++) {
// 输出当前天数
document.write(`第${i}天<br>`);
// 使用嵌套的for循环遍历五个单词
for (let j = 1; j <= 5; j++) {
// 输出记住的单词序号
document.write(`记住了第${j}个单词<br>`);
}
}
案例2
用户输入,可自定义输出行和列打印五行星星
// 使用 prompt 获取用户输入的行数和列数
let row = +prompt(`请输入行数:`);
let col = +prompt(`请输入列数:`);
// 外部循环,i 从 1 到输入的行数
for (let i = 1; i <= row; i++) {
// 内部循环,j 从 1 到输入的列数
for (let j = 1; j <= col; j++) {
// 输出一个星星图案
document.write('⭐');
}
// 输出一个换行符,用于分隔行
document.write('<br>');
}
假如是每行递增的话
// 外部循环,i 从 1 到 5,表示行数
for (let i = 1; i <= 5; i++) {
// 内部循环,j 从 1 到 i,表示每行的星星数量递增
for (let j = 1; j <= i; j++) {
// 输出一个星星图案
document.write("⭐");
}
// 输出一个换行符,用于分隔行
document.write("<br>");
}
数组
案例:计算数组【6,9,3,1,5】的平均值
// 定义一个数组
let arr = [6, 9, 3, 1, 5];
// 初始化一个变量来存储总和
let sum = 0;
// 循环遍历数组的每个元素
for (let i = 0; i < arr.length; i++) {
// 输出当前数组元素到文档
document.write(arr[i]);
// 将当前元素的值累加到总和中
sum = sum + arr[i];
}
// 输出数组的和到文档
document.write(`数组的和的结果是:${sum}<br>`);
// 计算平均值
let pj = sum / arr.length;
//这里使用'变量.length'来获取数组的个数,这里用5也一样,用.length方便
// 输出数组的平均值到文档
document.write(`数组的平均值是:${pj}`);
数组的增删改查
修改:eg:修改一个数组arr[1]为666
增加:eg: arr.push('arr1','arr2','arrn'......)
数组删除
数组.pop()方法从数组中删除最后一个元素,并返回该元素的值
语法: arr.pop() ;删除最后一个元素
arr.shift() 删除第一个元素
数组.splice()删除特定数组元素
函数
-
定义和作用:
- 定义: 函数是一段封装了特定任务的可重用代码块。
- 作用: 函数用于组织和结构化代码,提高代码的可读性和可维护性。它也允许执行特定的操作,接受参数,并返回结果。
-
特点:
- 封装性: 函数将一系列操作封装在一个单元中,使代码更具模块化。
- 可重用性: 函数可以被多次调用,提高了代码的可重用性。
- 参数和返回值: 函数可以接受输入参数,并返回一个结果。
因此,变量用于存储和处理数据,而函数用于组织和执行代码。
函数的封装
案例
封装一个函数,计算两个数的和
function sun() {
let num1 = +prompt(`请输入第一个`);
let num2 = +prompt(`请输入第二个`);
document.write(num1 + num2);
// console.log(num1 + num2);
}
封装一个函数,计算1-100之间所有数的和
// 定义名为 sum100 的函数
function sum100() {
// 初始化一个变量 sum,用于存储累加结果
let sum = 0;
// 使用循环从 1 累加到 100
for (let i = 1; i <= 100; i++) {
sum += i; // 将当前循环变量 i 的值累加到 sum 中
}
// 使用 document.write 将累加结果输出到文档
document.write(sum);
}
// 调用 sum100 函数
sum100();
函数传参
// 定义名为 sum100 的函数,接受一个参数 kk
function sum100(kk) {
// 初始化一个变量 sum,用于存储累加结果
let sum = 0;
// 使用循环从 1 累加到传入的参数 kk
for (let i = 1; i <= kk; i++) {
sum += i; // 将当前循环变量 i 的值累加到 sum 中
}
// 使用 document.write 将累加结果输出到文档
document.write(sum);
}
// 调用 sum100 函数,传入参数 50
sum100(50); //此时页面会输出累加到50的结果:1275
sum100(88); //此时页面会输出累加到88的结果:3916
完善
// 定义名为 sum100 的函数,接受两个参数 ii 和 kk
function sum100(ii, kk) {
// 初始化一个变量 sum,用于存储累加结果
let sum = 0;
// 使用循环从 ii 开始累加到传入的参数 kk
for (let i = ii; i <= kk; i++) {
sum += i; // 将当前循环变量 i 的值累加到 sum 中
}
// 使用 document.write 将累加结果输出到文档
document.write(sum);
}
// 调用 sum100 函数,传入参数 1 和 50
sum100(1, 50); // 此时 ii 为 1,kk 为 50
函数封装数组求和
// 定义一个名为 getArrSum 的函数,接受一个数组作为参数
function getArrSum(arr) {
// 初始化一个变量 sum 并将其设为 0,用于存储数组元素的总和
let sum = 0;
// 使用循环遍历数组的每个元素
for (let i = 0; i < arr.length; i++) {
// 将当前元素的值加到 sum 变量中
sum += arr[i];
}
// 使用 document.write 将计算得到的总和输出到文档
document.write(sum);
}
// 调用 getArrSum 函数,传递包含整数的数组 [1, 2, 3, 4, 5] 作为参数
getArrSum([1, 2, 3, 4, 5]);
函数的返回值return
提供函数结果: 函数通常被设计用来完成某一特定任务,并返回相应的结果。使用 return
语句,函数可以将完成任务后的结果返回给调用者。
function add(x, y) {
return x + y;
}
let sum = add(3, 5);
console.log(sum); // 输出 8
终止函数执行: 一旦函数执行到 return
语句,它会立即终止函数的执行,跳出函数体。这意味着函数中 return
后面的代码将不再执行。
function checkNumber(x) {
if (x < 0) {
return "Negative number"; // 提前终止函数执行
}
return "Non-negative number"; // 不会执行到这里
}
传递控制权: return
语句也可以用于在函数执行的过程中提前结束函数,并将控制权返回给调用者。这对于处理错误或特殊情况非常有用。
function divide(x, y) {
if (y === 0) {
return "Cannot divide by zero"; // 提前结束函数,并返回错误信息
}
return x / y;
}
当调用某个函数,这个函数会返回一个结果回来,比如下面这个
// 定义一个函数 fn,该函数返回固定值 20
function fn() {
return 20;
}
// 调用函数 fn(),并将结果输出到控制台
// console.log(fn()); // 这里输出 fn() 的值,但是被注释掉了
// 调用函数 fn(),将返回值存储在变量 re 中
let re = fn();
// 使用 document.write() 将变量 re 的值输出到文档
document.write(re);
break的结束和return结束的区别:
break
-
用途:
break
主要用于终止循环或switch
语句的执行。 -
作用范围: 一般在循环体内部或
switch
语句内使用,用于提前终止循环或switch
语句的执行。 -
行为: 一旦执行到
break
,它会立即退出当前循环或switch
语句,跳到该语句之后的代码执行。
break的结束和return结束的区别:
`break`
- **用途:** `break` 主要用于终止循环或 `switch` 语句的执行。
- **作用范围:** 一般在循环体内部或 `switch` 语句内使用,用于提前终止循环或 `switch` 语句的执行。
- **行为:** 一旦执行到 `break`,它会立即退出当前循环或 `switch` 语句,跳到该语句之后的代码执行。
return
-
用途:
return
用于从函数中返回一个值,并终止函数的执行。 -
作用范围: 只能在函数内使用,用于返回函数的执行结果。
-
行为: 一旦执行到
return
,函数的执行将立即终止,返回指定的值给调用者。
function add(x, y) {
return x + y; // 返回结果并终止函数执行
}
let result = add(3, 5);
console.log(result);
案例
1,求最大值函数,使用return返回最大值
2,求任意数组的最大值,并且返回
function kkarr(arr = []) {
//function 定义名为 kkarr 的函数,接受一个默认为空数组的参数 arr
// return x > y ? x : y;
let max = arr[0];
// 遍历数组,从第二个元素开始比较
for (let i = 1; i < arr.length; i++) {
// 如果当前元素大于当前最大值,则更新最大值
if (max < arr[i]) {
max = arr[i];
}
}
//返回值
return max;
}
let max = kkarr([33, 66, 8, 24, 18]);
// 将找到的最大值输出到文档
document.write(max);
// 将找到的最大值输出到控制台
console.log(max);
补充:将上面的输出为最大值和最小值的形式:
function kkarr(arr = []) {
// 定义名为 kkarr 的函数,接受一个默认为空数组的参数 arr
// 初始化 max 和 min 变量为数组的第一个元素
let max = arr[0];
let min = arr[0];
// 遍历数组,从第二个元素开始比较
for (let i = 1; i < arr.length; i++) {
// 如果当前元素大于当前最大值,则更新最大值
if (max < arr[i]) {
max = arr[i];
}
// 如果当前元素小于当前最小值,则更新最小值
if (min > arr[i]) {
min = arr[i];
}
}
// 返回找到的最大值和最小值
return [max, min];
}
// 调用 kkarr 函数,传入一个数组 [33, 66, 8, 24, 18]
let newArr = kkarr([33, 66, 8, 24, 18]);
console.log(`数组的最大值是:${newArr[0]}`);
console.log(`数组的最小值是:${newArr[1]}`);
作用域
可以使用一个房子和房子周围的环境来比喻 JavaScript 中的全局作用域。考虑整个 JavaScript 程序就像是一座大房子,而房子内的每个房间就是一个函数,每个函数内部都有自己的局部作用域。
-
全局作用域是整座房子的外部环境:
-
全局作用域就像是房子的外部环境,它包裹了整个程序。在这个环境中声明的变量可以被程序中的任何地方访问,就像房子的外面的人可以看到房子内部的东西。
eg:http://url../../../***.js (引用外部)
-
-
函数作用域是房子里的房间:
-
每个函数都有自己的作用域,就像房子里的每个房间都有自己的空间。在一个房间内声明的变量只在这个房间内可见,而不会被其他房间的人看到。
-
-
变量是房间里的家具:
-
在全局作用域中声明的变量就像是放在房子里的家具,可以在整个房子内访问。而在函数内部声明的变量就像是房间里的家具,只能在当前房间内使用。
-
全局/局部变量
还是房屋的比喻,可以将全局变量看作是整个房子都可以访问的家具,而局部变量则是只在特定房间内可见的家具。
-
全局变量是整座房子都可见的家具:
-
全局变量就像是整个房子都可以看到和使用的家具,它们放在房子的外面,所有的房间都可以访问。
-
-
局部变量是特定房间内可见的家具:
-
局部变量就像是只放在某个房间内的家具,只有在这个房间内才能看到和使用,而其他房间看不到这个家具。
-
变量的访问原则:
只要是代码,就至少有一个作用域,写在函数内部的局部作用域
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
访问原则:在能够访问到的情况下先局部,局部没有在找全局,就近原则访问
匿名函数
函数表达式
将匿名函数赋值给一个变量,并且通过变量名称进行调用,我们就将这个称为函数表达式
立即执行函数
语法
(function(){})()
(function(){}())
参考以下学习来源,再次感谢
javascript 简介_w3cschool
学习 Web 开发 | MDN
黑马程序员的个人空间-黑马程序员个人主页-哔哩哔哩视频