目录
JavaScript概念
脚本（Script）实际上就是一段程序，通常以解释方式运行，无需编译，相对来讲，开发简便，运行效率高。
1.JavaScript的书写位置
1.1 内嵌式
写于html文件里，用<script>标签包住，参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("快启动第五人格！")
// 页面弹出警示框的意思
</script>
</body>
</html>运行结果：
1.2 内联式
将代码直接写到标签内部，列如：
<body>
<button onclick="alert('警示框')">点击按钮弹出提示框</button>
</body>参考练习代码：
<body>
<button onclick="alert('第五人格')">点击按钮弹出第五人格</button>
</body>运行效果：
1.3 外部式
通过新建一个以js为后缀文件（在文件里输入内容），再通过script标签引入到html文件中。
参考代码：
<body>
<script src="./my.js"></script>
</body>
运行结果：
2.JavaScript输入输出语法
2.1输入语法：
<body>
<script>
// 输入语句
prompt('内容')
</script>
</body>2.2输出语法：
<body>
<script>
//输出语句
document.write("要输出的内容")
// 页面弹出警告对话框
alert('要输出的内容')
// 控制台输出语法，程序员调试使用
console.log('控制台打印')
</script>
</body>2.3 练习
根据以上代码试着做出以下弹窗
参考代码：
<script>
prompt('请输入您今天玩了几局第五人格')
alert('这简直太酷了')
</script>3.变量
3.1 变量概念
可以理解为变量是一个可以用来存储数据的容器。
3.2变量的语法
// 如：声明一个年龄变量
let age = 183.3变量的使用
<body>
<script>
// 创建变量
let name = prompt("输入姓名");
let age = prompt("输入年龄");
//输出变量
console.log(name);
console.log(age);
</script>
</body>
注：以前变量的写法是var，但现在一般都用let，现在var只在比较老的公司可能会用到
4.数据类型
4.1 基本数据类型
| 基本数据类型 | |
| number | 数字型（整数，小数，正负数） 注： NaN也是一个number类型，代表非数字 |
| string | 字符串型 |
| Boolean | 布尔型 |
| undefined | 未定义型 |
| null | 空类型 |
注：js是弱数据型的语言，只有当我们赋值了才知道是什么数据的类型
4.2 string字符串型
用单引号或者双引号、反引号包裹的数据都是字符串
<script>
let str = 'dwrg'
let str2 = '第五人格'
console.log(str);
console.log(str2);
</script>运行结果：
4.3 string模板字符串
string模板字符串通常用来拼接字符串和变量，只能用反引号
用模板字符串打印：我今天玩了5局第五人格
参考代码：
<body>
<script>
//输入变量
let num = 5
//输出语句
// 模板字符串格式：外面用`` 里面用${变量名}
document.write(`我今天玩了${num}局第五人格`)
</script>
</body>运行结果：
4.4 boolean 布尔类型
boolean 布尔数据类型只有两个值，真 true/假 false。
<body>
<script>
let flag = false
console.log(typeof flag)
</script>
</body>4.5 undefined未定义类型
未定义类型（undefined) 声明一个变量但未赋值，它只有一个值。
<body>
<script>
let num
console.log(num)
</script>
</body>4.6 null 空类型
空类型（null）赋值了但内容为空。
<body>
<script>
let obj = null
console.log(obj)
</script>
</body>5.检测数据类型
语法为：typeof x 或 typeof(x)。
参考代码：
<body>
<script>
let num = 19
console.log(typeof num) // Number
let str = 'pink'
console.log(typeof str) // string
let str1 = '19'
console.log(typeof str1) // sting
let flag = false
console.log(typeof flag) // boolean
let un
console.log(typeof un) // undefined
let obj = null
console.log(typeof obj) // object
</script>
</body>
运行结果：
6.运算符
6.1 赋值运算符
参考代码：
<body>
<!-- 如：以前写法：2=1+1 -->
<script>
// 采取赋值运算符
let num =1
num += 1
console.log(num);
</script>
</body>运行结果：
6.2 一元运算符
一元运算符有 自增（++）自减（--）, 经常用于计数用，比如用它来计算进行了几次操作。
自增有前置自增和后置自增
<script>
// 前置自增
let num =1
++num
console.log(num);
// 后置自增
let num2 =1
num2++
console.log(num2);
</script>
</body>运行结果：
6.3 比较运算符
比较两个数据是否相等，运行结果只有（true或false）
| > | 左边值是否大于等于右边 |
| < | 右边值是否小于等于左边 |
| >= | 左边值是否大于等于右边 |
| <= | 右边值是否小于等于左边 |
| == | 左右两数值是否相等 |
| === | 左右两边是否类型和值都相等 |
| !== | 左右两边是否不全等 |
参考代码：
<script>
console.log(3>5);
console.log(3>=3);
console.log(2 == 2);
console.log(2 == '2');
console.log(2 === '2');
</script>运行结果：
6.4逻辑运算符
逻辑运算符用来解决多重条件判断。
1. && 与 两边都为true，结果才为true
2. || 或 一真则真
3. ! 非 取反
<script>
// &&与 2边都为true，结果才为true
console.log(true && true); //true
console.log(3<5 && 3<2); //flase
// ||或 一真则真
console.log(true || flase); //true
console.log(flase || flase); //flase
// !非 取反
console.log(!true); //flase
console.log(!flase); //true
</script>
运行结果：
6.5运算符的优先级
7 if语句
7.1 if单分支语法：
if分支语句
if(条件)
{满足条件要执行的代码}
参考代码：
<script>
if(true){
console.log('执行语句');
}//输出true
if(3>5){
console.log('执行语句');
}//flase ,不执行
</script>7.2 if双分支语法：
if（条件）{
满足条件要执行的代码
}else{
不满足要执行的代码}
练习题： 用户输入，用户名：第五人格，密码：555555，则提示登录成功，否则登录失败
参考代码：
<body>
<script>
let uname = prompt('请输入用户名：')
let pwd = prompt('请输入用密码：')
if(unmae === '第五人格' && pwd === '555555'){
alert('恭喜登录成功')
}else{
alert('用户名或密码错误')}
</script>
</body>7.3 if多分支
语法：
if（条件）{
满足条件要执行的代码
}else if{
满足要执行的代码
} else {
不满足要执行的代码}
练习题：考试成绩90以上输出优秀，70分以上输出良好，60分以上输出及格，60以下输出差。
参考代码：
<script>
let score = +prompt('请输入成绩：')
if (score>=90){
alert('优秀')
}else if (score>=70){
alert('良好')
}else if (score>=60){
alert('及格')
}else {
alert('差')}
</script>8 switch语句
8.1 switch语法
switch(数据){
case 值1：
代码1
break
case 值2：
代码2
break
case 值3：
代码31
break
case 值4：
代码4
break}
代码参考：
<script>
switch(3){
case 1:
console.log('您选择的是1');
break
case 2:
console.log('您选择的是2');
break
case 3:
console.log('您选择的是3');
break
default:
console.log('没有复合条件的');
}
</script>运行结果：
注：1.switch case语句一般用于等值判断,不适合于区间判断
2.switch case一般需要配合break关键字使用 没有break会造成case穿透
9 while循环
9.1 while循环概念
while循环就是在满足条件期间，重复执行某些代码。
9.2 while循环语法
while(循环条件){
要重复执行的代码 } -->
<!-- 正确就会一直执行，遇到假的才会停止 -->
9.3 while循环三要素
1.变量的起始值
2.终止条件（没有终止条件，循环会一直执行，造成死循环）
3.变量变化量（用自增或自减)
9.4 练习：进行3次循环
参考代码：
<script>
let i = 1
while (i<=3){
document.write('循环三次<br>')
i++
//i++是防止便成死循环，不会一直执行下去
}
</script>运行结果：
9.5 退出while循环
（1）break:退出循环
（2）coninue :退出本次循环
练习：循环5次 “我要玩5局第五人格” 后退出循环。
参考代码:
<script>
let i = 1
while (i<=5){
if(i === 3){
break //退出循环
console.log(`我要玩${i}局第五人格`)
i++
}}
</script>10 for循环
10.1 for循环语法
for(变量起始值；终止条件；变量变化量)
用for循环输出三句话 ：我要玩第五人格
参考代码：
<script>
for ( let i=1; i <= 3; i++ ){
document.while('我要玩第五人格')
}
</script>运行结果：
扫一扫
5116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
