一篇解决JavaScript
华子目录
- JavaScript介绍
- JavaScript的组成
- JavaScript书写位置
- 内部
- 外部
- js注释
- js输入（prompt）
- js输出
- js变量
- js基本数据类型
- number（数值类型）
- string（字符串）
- Boolean（布尔类型）
- undefined（未定义）
- null（空）
- js转义字符
- js类型转换
- 运算符类型
- js流程控制
- 分支语句
- 单分支
- 双分支
- 多分支
- switch分支
- while循环
- do while循环
- for循环
- break与continue
- js函数基础
- 函数的基本使用(function声明函数)
- 函数的返回值(return)
- 函数的参数
- 默认值参数
- 匿名函数（自动执行函数）
- 作用域（js中var与let的区别）
JavaScript介绍
JavaScript简称js，是一种浏览器解释型语言，是可以嵌入在html文件中交给浏览器解释执行的。主要用来实现网页的动态效果，用户交互以及前后端的数据传输等。
JavaScript能做什么？
1.网页的动态效果
2.前后端的交互（数据提交，人机交互）
3.进阶（前端的高级框架：vue.js React.js Node.js）(VR/AR开发：Three.js)
注：html/css不是编程语言，JavaScript是一门正儿八经的编程语言
JavaScript的组成
1.ECMA Script简称ES，是js的语法规则，目前最新版本ES13
2.ECMA是一个欧洲计算机制造商协会，主要做一些评估，开发和计算机标准
3.BOM（Browser object model）：浏览器对象模型，主要是对浏览器进行操作（交互，弹窗，输入框）
4.DOM（Document object model）：文档对象模型，负责对网页里的内容进行操作（网页里的所有内容都称为文档）
JavaScript书写位置
内部
内部JavaScript直接写在html里面，用script标签包裹住
语法：
<script>代码</script>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}</style>
</head>
<body><script>document.write('麦当')</script>
</body>
</html>
外部
外部JavaScript代码写在以.js结尾的文件里面，通过script标签引入到html页面中
语法：
<script src='js文件路径'></script>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}</style>
</head>
<body>
</body>
<script src="./demo.js"></script>
</html>
注：1.如果用外部写法，再在script标签内写js的话是无效的
2.src不止能引入本地的文件，也可以通过cdn加速的方式，获取实时js代码（相当于引入网络文件）
3.引入js最好放在网页最后/body的最后
js注释
作用：主要写一些代码思路逻辑
单行注释：//
多行注释：/*内容*/
快捷方式：ctrl+/
js输入（prompt）
prompt：在进入网页时，弹出输入框，让用户输入内容，输入框里可以放提示文本
语法格式：prompt()prompt(‘提示内容’)
案例：prompt('请输入你的名字')
prompt输入用来赋值：
prompt得到的数据字符串类型（输入方法给变量赋值）let name = prompt('请输入你的名字')//在弹出框中显示alert('欢迎你'+name)
js输出
document.wtite(内容)：在网页里写内容，能够识别标签，字符串(字符串，标签都要用引号包裹)需要用引号包裹，数字不用。
语法格式：document.write(内容)
案例代码：document.write(888)document.write('多喝岩浆')document.write('<b>内容</b>')console.log(内容)：控制台输出日志，在控制台输出一个信息（主要是用来调试js数据的）（不需要加标签，因为不是给网页看的）
语法格式：console.log(内容)
案例代码：console.log(888)console.log('多喝岩浆') alert：弹窗，在网页里显示一个弹窗
语法格式：alert(内容)
案例代码：alert('麦当')alert(888)
js变量
1.什么是变量？一个用来存储东西的容器，取个有意义的名字，方便后续使用
2.命名规范：变量名可以由数字,字母,下划线,$组成,禁止以数字开头(中文不推荐)变量名严格区分大小写不要用关键字命名见名知意
3.声明符：let：es6新出的语法，作用和var类似，但是在作用域上let更严谨
4.变量的使用：（1）声明变量let 变量名 //声明一个空的变量，没有赋值let 变量名=值 //声明一个变量并赋值let namelet age=18（2）声明多个变量let 变量名=值,变量名=值let sex='女',name='小川'（3）输出变量document.write(变量名)console.log(变量名)alert(变量名)（4）输出多个变量document.write(变量名,变量名)console.log(变量名,变量名)alert(变量名,变量名)
注：1.直接写 变量名=值，不写let，写法上是允许的，但是非常不推荐
2.变量使用let关键字声明，但是未赋值，变量初始值为undefined，不会报错
3.使用let关键字重复声明一个变量会报错
js基本数据类型
js中查看数据类型：typeof 变量名console.log(typeof 变量名)console.log(typeof teacher)
number（数值类型）
JavaScript不区分整数 浮点数等 统一都叫number --> 年龄/金钱/身高let 变量名 = 数值let age = 18let height = 188console.log(age,height)console.log(typeof age)
string（字符串）
通过单引号(''),(""),或者反引号(``)包裹的数据都叫字符串-->文字信息/地址/名字let 变量名 = '字符'let 变量名 = "字符"let name='杨洋'let food="螺蛳粉"let hobby=`睡觉`console.log(typeof name,name)
反引号主要是作为模板字符串使用 帮助我们更好的输出一些带有变量的数据
格式：`字符${变量名}字符`let name = `墨离`,age = 18console.log(`我叫${name}我今年${age}岁`)//这一行里面必须是用反引号包裹
Boolean（布尔类型）
布尔类型主要用于逻辑判断 只有两个值 true/falselet 变量名 = true/falselet on_line = truelet not_online = True //会报错 没有被定义console.log(on_line,typeof on_line)console.log(not_online,typeof not_online)
undefined（未定义）
undefined即是类型也是值 指的就是未定义的意思 当你声明变量没有赋值时,
他的值就为undefinedlet 变量名let testconsole .log (test,typeof test)
null（空）
null和Python里的none类似 表示的是值为空 输出类型为对象(空对象)let bf = nullconsole.log(bf,typeof bf)
js转义字符
\n 换行
\t 制表符tab键
\\ 正常输出一个斜杠
\' 正常输出一个引号
注意:js没有原始字符串 不能像Python那样在字符串前面加r取消转义
js类型转换
在开发学习中 经常会遇到需要把一个数据转换成其他类型使用 这个时候就要类型转换1 + '1'1 - '1'隐式类型转换:程序运行过程中自动执行 自动发生一种转换机制 主要体现在字符串和数值进行运算时+号会优先识别为拼接 其他的就是为正常数值运算强制类型转换:手动把数据转换为指定的数据类型Number(数据)--把数据转换为number类型1.如果转换失败 结果为NaN2.NaN也是number类型 表示的非数字 not a numberString(数据)--把数据转换为string类型Boolean(数据)--把数据转换为Boolean类型 在转换时 有值为真无值为假 (0,-0,undefined,null)
运算符类型
运算符 == 带有特定的功能的符号
算术运算符:+ - * / ** %**取幂:3**3 = 27-->原理 3*3*3 3**4 3*3*3*3% 取余:11%3 = 2-->原理 11-3 直到减不下去为止 还剩多少就是取余 逻辑运算符:&&: 逻辑与and 当有多个条件时 都满足才为真||: 逻辑与or 当有多个条件时 满足一个就为真!: 逻辑与非not 反骨仔 什么都和你反着来赋值运算符:= += -= *= /= a+=b --> a=a+b关系运算符:== < > >= <=单目运算符:++ -- 自增/减1++在前,先自增再赋值;先+1 再运行++在后,先赋值再自增;先运行 再+1let i = 10i++++i
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>// let name=prompt('请输入你的姓名')// alert('你好'+name)// console.log('你好麦当')// console.log(888)// document.write(888)// let name='麦当',age=20// document.write(name,age)// let num=10,count=3// console.log(num%count)// console.log(num+count)// console.log(`${num/count}`)</script>
</body>
</html>
js流程控制
程序三大结构:
顺序结构:程序是由上往下执行 遇到报错就终止
选择结构:通过不同条件走向不同分支结果
循环结构:通过判断条件是否满足从而把一段代码重复执行
分支语句
if语句的作用'条件判断'-->根据判断结果执行对应语句if :如果else :否则else if :或者三种分支的情况:1.单分支:满足条件就执行if里的代码 否则不执行2.双分支:满足条件就执行if里的代码 不满足就执行else里的代码3.多分支:如果满足if判断的条件 就执行if里的代码 如果不满足接着判断是否满足else if的代码 如果没满足就执行else if 如果都不满足就执行else
单分支
语法格式:if(判断条件){执行语句}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let name=prompt('请输入你的名字')if(name=='麦当'){document.write(`${name}`)}</script>
</body>
</html>
双分支
语法格式:if(判断条件){执行语句}else{执行语句}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let name = prompt('请输入你的名字')if (name == '麦当') {document.write(`${name}`)}else {document.write('你不是麦当')}</script>
</body>
</html>
多分支
语法格式:if(判断条件){执行语句}else if(判断条件){执行语句}else{执行语句}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let name = prompt('请输入你的名字')if (name == '麦当') {document.write(`${name}`)}else if(name=='迪亚'){document.write('你是迪亚')}else{document.write('你不是麦当')}</script>
</body>
</html>
注：有值为真，没值为假(0/0.0/undefined/‘’/null)
switch分支
case --> 选择
break --> 结束
default --> 默认值语法格式:switch(数据){case 情况1:执行语句breakcase 情况2:执行语句breakcase 情况3:执行语句breakcase 情况4:执行语句breakdefault:执行语句break}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let num = Number(prompt('请输入你的成绩'))switch(parseInt(num/10)) //取整{case 10:case 9:document.write('优秀')breakcase 8:document.write('良好')breakcase 7:document.write('合格')breakcase 6:document.write('及格')breakdefault:document.write('不及格')break}</script>
</body>
</html>
while循环
语法格式:while(循环判断){执行语句}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let num = 0while(num<10){document.write(`${num+1}、麦当<br>`)num++}</script>
</body>
</html>
do while循环
语法格式:
do
{执行代码
}while(循环判断)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let num = 0do{document.write(`${num+1}、麦当<br>`)num++}while(num<10)</script>
</body>
</html>
for循环
for(初始化变量;循环条件;更新操作){执行语句
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>for(let i=0;i<10;i++){document.write(`${i+1}、麦当<br>`)}</script>
</body>
</html>
break与continue
1.break 强制结束循环
2.continue 结束当次循环 开始下一次循环
js函数基础
函数:把一些经常使用的代码包装起来 起个有意义的名字 以后需要用的时候直接调用
函数的基本使用(function声明函数)
1.定义函数function 函数名(){函数内容}function fun(){alert('多喝岩浆')}
2.调用函数函数名()fun()输出语句(函数名()) //调用函数并且输出返回值console.log(fun()) //先调用函数，如果没有返回值 为undefineddocument.write(fun()) //先调用函数，如果没有返回值 为undefined函数的命名规范:1.由数字,字母,下划线组成2.区分大小写Fun fun3.不能数字开头/不能使用关键字(if else)4.见名知意5.自定义函数 尽量使用纯小写
函数的返回值(return)
function 函数名(){函数内容return 返回值}返回值可以用来输出 赋值let 变量名 = 函数名()输出语句(函数名())
没有设置返回值的情况下 返回值默认为undefined
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>function fun(){document.write('麦当')return true}let result = fun()console.log(result)</script>
</body>
</html>
函数的参数
形参:没有具体数据 -- 定义函数
实参:有具体数据 -- 调用函数function 函数名(参数1,参数2){函数内容}函数名(数据1,数据2)function water(name){console.log(`${name}同学咱们多喝岩浆 有益身体健康`)}water('段君虎')water('吴昊')function water(name,money) {console.log(`${name}同学咱们多喝岩浆 一杯岩浆${money}元`)}water('段君虎')water('吴昊')// 注意:如果只传一个参数 不会报错只是会出现未定义
默认值参数
在声明参数的时候就赋值
function 函数名(参数1,参数2=值){函数内容}函数名(参数)function fun3(name,talk='多喝岩浆'){console .log(`我叫${name} 老师让我${talk}`)}fun3('大百草') fun3('大百草','哈哈哈')
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>function fun(name,age,sex='男'){document.write(`${name}今年${age}岁了，性别${sex}<br>`)return true}fun('麦当',20)fun('迪亚',18,'女')</script>
</body>
</html>
匿名函数（自动执行函数）
特点：
只执行一次
匿名函数一般是写在最前面 或者需要前面的代码都执行完了 才会运行
如果要在下方运行有两种解决方式1.在匿名函数前加!2.在匿名函数前一段代码/自己最后的代码加上;语法:!(function(形参){函数内容})(实参);!(function(name){alert(`${name},今晚一起嗨皮吧`)})('婷婷');
匿名函数在最后面，需要加！和；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>function fun(name,age,sex='男'){document.write(`${name}今年${age}岁了，性别${sex}<br>`)return true}fun('麦当',20)fun('迪亚',18,'女')!(function(name){alert(`${name},今晚一起嗨皮吧`)})('麦当');</script>
</body>
</html>
匿名函数在前面什么都不需要加
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>(function(name){alert(`${name},今晚一起嗨皮吧`)})('麦当')function fun(name,age,sex='男'){document.write(`${name}今年${age}岁了，性别${sex}<br>`)return true}fun('麦当',20)fun('迪亚',18,'女')</script>
</body>
</html>
作用域（js中var与let的区别）
1.let声明的变量是块级作用域（花括号里面），var是函数作用域和全局作用域
注：let是可以定义全局变量，局部变量，块级作用域的变量
2.通过var关键字声明的变量没有块级作用域，在快{}内声明的变量可以从快之外进行访问通过let关键字声明的变量拥有块级作用域，在快{}内声明的变量无法从快外访问
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let age = 20function fun(){let age = 19document.write(age)//就近原则}document.write(age)fun()</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>{var x=10}document.write(x)</script>
</body>
</html>