JavaScript第一课！—变量，数据类型，运算符，程序控制语句用法大全
1、JavaScript概念
JavaScript是一种web脚本编程语言，简称JS。广泛应用于网页开发中，主要用于增强网页的交互性和动态性，
与HTML和CSS共同协作，HTML负责定义网页的内容结构，CSS处理样式和布局，而JavaScript则控制网页的行为和交互。
用户可以利用JavaScript进行事件处理、表单验证、动画创建等多种功能。不需要编译，直接由浏览器解释运行，语法和Java类似，但JavaScript与Java是两种完全不同的语言，无论在概念还是设计上
2、JavaScript使用方法
与CSS的引用类似，主要有三种方式：
行内式 ， 内嵌式 ，外链式
（1） 行内式
直接在HTML标签内（即<body> 标签内）添加JS代码
ps：较简单，但这不适合于代码较多或者其他网页的复用
eg：
<body>
<input type="submit" value="登录" οnclick="javascript:alert('登录成功');">
</body>
运行后：
（2）内嵌式
在HTML文档中任意位置内嵌JavaScript脚本，<script>标签可以放在html的<head>部分或者<body>部分的末尾
eg:
document.write()向网页输出内容
<head>
<script>
document.write("你好，欢迎来到计算机学院");
</script>
</head>
运行后：
（3）外链式
在HTML文档中任意位置，通过src属性链接外部JavaScript脚本（可以是本地文件，也可以是网络URL）
eg：
先建立一个js文档，命名为xxx.js
然后在html文档中引入JS文档
<body>
<script src="C:\Users\栗子\Desktop\web前端开发技术\JS\JS使用方法.js">
</script>
</body>
运行后：
ps：
- <script>标签可以放置在HTML文档中任意位置
- 在HTML文档中，<script>标签的个数没有限制
3、JS输出方式
（1） window.alert()
通过浏览器弹出框进行输出
效果：
运行代码：
<body>
<script>
alert("浏览器弹出框");
</script>
</body>
（2） document.write()
直接在网页页面中进行输出
运行代码：
<script>
document.write("在网页页面中");
</script>
（3） console.log()
通过浏览器控制台进行输出，此方法最常用
<script>
console.log("通过浏览器控制台进行输出！此方法最常用！");
</script>
运行后，按F12弹出控制台查看
4、JS语法
（1） 变量
JavaScript变量是存储数据值的容器
#变量名(唯一标识符）的命名规则
- 可包含字母、数字、下划线（_）和美元符号（
$） - 必须以字母开头
- 对大小写敏感（例如：y 和 Y 是不同的变量）
- 保留字（比如 JavaScript 的关键词—var、int、true等）无法用作变量名称
ps：
JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一 个变量的类型，但在使用变量之前先进行声明是 一种好的习惯。变量的类型在赋值时根据数据类型来确定。
#语法格式
var 变量名称1[=初始值1] , 变量名称2[=初始值2]...;
#变量提升现象
变量提升是JavaScript中的一个概念。简单来说，就是在代码执行之前，JavaScript会把变量的声明提升到当前作用域的最前面。
所有的变量的声明语句（不包含赋值），都会被提升到代码的头部
// 原来写的语句（变量先用后声明）
console.log(num);
var num = 10;
// 实际运行效果（变量提升现象）
var num;
console.log(num);
num = 10;
（2）数据类型
1.数值类型number
包括整数和浮点数
eg：
<body>
<script>
var num1=7;
var num2=77.7;
document.write(num1+"<br>");
document.write(num2+"<br>");
</script>
</body>
运行后：
2. 字符串类型string
用单引号或双引号括起来的字符序列。例如 'Hello'、"World" 等，字符串是不可变的，一旦创建，就不能改变
eg：
<body>
<script>
var str1="双引号定义字符串 ";
var str2='单引号定义字符串';
document.write(str1+"<br>");
document.write(str2+"<br>");
</script>
</body>
运行后：
3.布尔类型boolean
只有两个值，true 和 false。常用于条件判断和逻辑运算
eg：
<body>
<script>
var x=true;
document.write(x + " -> 数据类型："+ typeof x + "<br>");
</script>
</body>
运行后：
4. 空值数据类型Null
通常用于表示对象为空或者变量尚未赋值
ps：尽管 null 是一个表示空值的特殊关键字，
但 typeof null 会返回 "object"。
这是一个著名的 JavaScript 特性，
虽然有些令人困惑，但已经存在了很长时间（知道一下就行，不必理会）
eg：
<body>
<script>
var person2=null;
document.write(person2 + " -> 数据类型："+ typeof person2 + "<br>");
</script>
</body>
运行后：
5.未定义数据类型Undefined
表示变量已声明但未赋值的状态
eg：
<body>
<script>
var u
document.write(u+ "->数据类型："+ typeof u + "<br>");
</script>
</body>
运行后：
6.对象数据类型Object
表示一组键值对的集合。对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器
eg：
<body>
<script>var a =["tom","jack","joe"];
document.write(a+ "->数据类型："+ typeof a + "<br>");
</script>
</body>
运行后：
（3）运算符
1.typeof运算符
一元运算符，用于检测一个值的数据类型，返回一个表示数据类型的字符串
eg：
<body>
<script>var a =["tom","jack","joe"];
document.write(a+ "->数据类型："+ typeof a + "<br>");
</script>
</body>
运行后：
2.算术运算符
| 加法运算符 | + |
| 减法运算符 | - |
| 乘法运算符 | * |
| 除法运算符 | / |
| 取余运算符 | % |
| 递增运算符 | ++ |
| 递减运算符 | -- |
| 幂运算符 | ** |
#a++与++a的区别
++是 a=a+1
a++：
自加运算符在变量后面，先返回变量的值，然后才开始自加
等价于：c=a ; a=a+1 ; 所以console.log(a++)可以看成console.log(c)
<body>
<script>
var a =1;
var b =1;console.log(a++);
</script>
</body>
++a：
自加运算符在变量前面，先自加，再返回自加后的值，先a=a+1,然后返回a
c=++a等价于a=a+1;c=a; 所以console.log(++a)可以看成console.log(c)
<body>
<script>
var a =1;
var b =1;console.log(++a);
</script>
</body>
3.赋值运算符
| 运算符 | 例子 | 等同于 |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
4.比较运算符
比较运算符用于比较两个值，并根据比较结果返回布尔值（true 或 false）
| 运算符 | 描述 |
|---|---|
| == | 等于 |
| === | 严格等于 |
| != | 不相等 |
| !== | 严格不等于 |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
ps:
- 严格相等是对数据类型也要一致
- 不严格要求数据类型相等,只要转换后的值相等就可以
5.布尔运算符
#取反运算符 ！
- 布尔值取反：!true返回false ; !false 返回true
- 非布尔值取反:对于非布尔值，取反运算符会将其转为布尔值。除了undefined、null、false、0、NaN、空字符串六个值取反后为true，其他值都为false。
# 且运算符 &&
全部为真则为真，有一个为假则为假，全部为假则为假
#或运算符 ||
全部为真则为真，有真有假也为真，全部为假则为假
（2） 程序控制语句
1.条件语句
# if语句
“条件”是一个关系表达式，用来实现判断。“条件”要用（）括起来。如果“条件”的值为true，则执行{}里面的语句，否则跳过迁语句，执行后面的语句。
如果语句段只有一句，可以省略{）
语法格式：
if (条件x）{
满足条件x后输出的内容
}
# if else 语句
若“条件”为true,则执行语句段1；否则执行语句段2.“条件”要用（）括起来。若if后的语句段有多行，则必须用大括号将其括起来
if (条件x）{
满足条件x后输出的内容
}else{
不满足条件x输出的内容
}
#if... else if ...else语句
判断该语句是否满足特定条件。如果条件1成立，<if>元素内的语句会被执行，如果条件1不成立，而条件2成立则执行<else if>元素内的语句，两者均不成立则运行<else>元素内的语句。
if (条件 x) {
满足条件x后执行
} else if (条件y) {
不满足条件x，满足条件y时执行
} else {
所有条件都不满足时执行
}
# switch...case语句
switch (变量) {
case x1:
语句y
case x2:
语句y2
default:
语句y3
}
ps:
switch 表达式，把表达式的值与每个 case 的值进行对比，如果存在匹配，则执行关联代码，default 关键词规定不存在 case 匹配时所运行的代码，但它不是switch 代码块中最后一个 case
请记得用 break 结束默认 case
2.循环语句
JavaScript中提供了多种循环函数语句，有for 、while和do while一句，还提供了用于跳出循环的break语句，用于终止当前循环并继续执行下一轮循环的continue语句
#for循环语句
for实现条件循环，当“条件”成立时，执行语句段；否则跳出循环体，循环结束
for (初始化；条件;增量){
语句段；
}
eg：
目的是输出1~10，循环受限
<body>
<script>for(var i=1; i<=10; ++i){
console.log(i);
}</script>
</body>
运行结果：
#while 循环语句
“条件”中应该是关系表达式或逻辑表达式。条件为真时，执行循环体中的语句；条件表达式为假时，跳出循环体，循环结束。
while(条件){
语句段；
}
while 语句适合条件复杂无法预知循环次数的循环，for语句适合已知循环次数的循环
#do while循环语句
do while语句是while的变体，do while语句的循环体至少执行一次，而while语句的循环体可以一次也不执行
do {
语句段；
}
while (条件)
3.break 语句
break语句的功能是无条件跳出循环结构或switch语句。一般break语句是单独使用的，有时也可在其后面加语句标号，以表明跳出该标号所指定的循环体，然后执行循环体后面的代码
break 语句只能用于循环结构和 switch 语句中，在其他地方使用会导致编译错误
4. continue语句
continue 语句的功能是结束本轮循环，跳转到循环的开始处，从而开始下一轮循环，但不能出循环体（可能会卡死）
原文地址：https://blog.csdn.net/lz7_123/article/details/143338578
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！