当前位置：首页 > news >正文

一篇解决JavaScript

news 文章来源：https://blog.csdn.net/huaz_md/article/details/132898477 2024/11/19 15:30:01

华子目录

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>