第二节
1.变量
1.变量的作用
用来存放数据的。注意变量指的是容器而不是数据。
2.变量的用法
<script>
// 变量赋值
let name;
// // 字面量
name = '黄金圣斗士';
console.log(name);
let age;
age = 18;
console.log(age);
let sex;
sex = '男';
console.log(sex);
// 声明多个变量值
let userName = prompt('请输入您的姓名');age = prompt('请输入您的年龄');sex = prompt('请输入您的性别');
document.write(`你的名字：${userName},你的年龄: ${age},你的性别: ${sex}`);
</script>
3.变量命名规则与规范
let _age = 18;
let $age = 18;
let age = 18;
let age123 = 18;
let Age = 18;
let productNum = 20;
1.不能用关键字 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等 2.只能用下划线、字母、数字、$组成，且数字不能开头 3.字母严格区分大小写，如 Age 和 age 是不同的变量
4.起名要有意义 5.遵守小驼峰命名法 第一个单词首字母小写，后面每个单词首字母大写。例：userName
2.数据类型
2.1基本数据类型
number 数字型 string 字符串型
注意事项：
- 无论单引号或是双引号必须成对使用
- 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
- 必要时可以使用转义符 \，输出单引号或双引号
boolean 布尔型 undefined 未定义型 null 空类型
<script>
// 数字类型
let age = 18
// 字符串型 有单引号、双引号、反引号都属于字符串型，无论里面装的是什么
let name = '张三'
// 数字类型和字符串型使用 加号+ 功能不一样
// 数字：表示相加
let age1 = 18+36
// 字符串型:表示两段文字的拼接
let name1 = '张三' + '李四'
// 模板字符串
document.write(`大家好，我叫${name},今年${age}岁了`)
// 布尔型/它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。
let iscool = ture;
let ishot = false;
// 未定义型/只声明变量，不赋值
let number;
console.log(number);
// 空类型 /表示赋值了，但是内容为空
let number1 = null;
</script>
2.2引用数据类型
object 对象 function 函数 array 数组
2.3检测数据类型
<script>
// 通过 typeof 关键字检测数据类型
let age = 18;
let name = '张三';
let iscool = false;
let number;
console.log(typeof age);
console.log(typeof name);
console.log(typeof iscool);
console.log(typeof number);
</script>
2.3类型转换
1.隐式转换
规则：
-
号两边只要有一个是字符串，都会把另外一个转成字符串 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
-
<script> // + 号两边只要有一个是字符串，都会把另外一个转成字符串 let num1 = 1; let nmu2 = '2'; console.log(num1 + num2); //=12 // 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型 let num3 = 3; let nmu4 = '2'; console.log(num3 - num4); //=1 </script>
缺点：
转换类型不明确，靠经验才能总结
小技巧：
+号作为正号解析可以转换成Number
<script>
// +号作为正号解析可以转换成Number
let num5 = '5';
let num6 = +num5
</script>
2.显示转换
概念：
自己写代码告诉系统该转成什么类型 转换为数字型 Number(数据)
转成数字类型
如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字 NaN也是number类型的数据，代表非数字 parseInt(数据) 只保留整数 parseFloat(数据) 可以保留小数
<script>
// 转换为数字类型
let num7 = '123'
let num8 = Number(num7)
console.log(typeof num8)
// 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
let num9 = 'bhg'
let num10 = Number(num9)
console.log(num10)
// parseInt(数据)/只保留整数
let num11 = '9.99'
let num12 = parseInt(num11)
console.log(num12)
// parseFloat(数据) /可以保留小数
let num13 = '9.9999999'
let num14 = parseFloat(num13)
console.log(num14)
</script>
转换为字符型:
String(数据) 变量.toString(进制)
<script>
// String(数据)
let num = 123
let str = String(num)
console.log(typeof str)
// 变量.toString(进制)
let num1 = 123
let str1 = num1.toString()
console.log(typeof str1)
</script>
拓展知识
<script>
document.write('<button>我是涩涩的按钮</button>')
let str2 = `<h1>我是涩涩的标题</h1>
请输入密码<input type="password">`
document.write(str2)
</script>
案例
<style>
table{
text-align: center;
border-collapse: collapse;
margin: 0 auto;
}
</style>
</head>
<body>
<script>
let goods = prompt('请输入商品的名称');price = prompt('请输入商品的价格');number = prompt('请输入商品的数量');sum = price * number;address = prompt('请输入收货地址');
document.write(`
<table border="1">
<caption>订单付款确认页面</caption>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收获地址</th>
</tr>
<tr>
<td>${goods}</td>
<td>${price}元</td>
<td>${number}</td>
<td>${sum}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>
第三节
1.运算符
算术运算符
数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。
<script>
let num1 = 11;
let num2 = 22;
// 加
console.log(num1 + num2);
// 减
console.log(num1 - num2);
// 乘
console.log(num1 * num2);
// 除
console.log(num1 / num2);
// 求余 = 取模 ,就是获取除法后，还剩多少不能被整除，例如10/3，还有1不能被整除
// 如果除数算法，第一个数小于第二个数，输出结果就是第一个数
console.log(10 % 3); //1
console.log(1 % 3); //1
console.log(2 % 5); //2
console.log(3 % 5); //3
console.log(4 % 5); //4
console.log(10 % 12); //10
// 算法优先级：有括号先算括号里面的，乘除取余优先加减,优先级一样时，算法从左向右开始算
console.log((10 + 12) * 11 % 1 + 5); //5
</script>
运算符优先级
JavaScript中 优先级越高越先被执行，优先级相同时以书从左向右执行。 乘、除、取余优先级相同 加、减优先级相同 乘、除、取余优先级大于加、减 使用 () 可以提升优先级 总结： 先乘除后加减，有括号先算括号里面的~~~
拓展案例-圆的面积
<script>
let r = prompt('请输入圆的半径');
// π的写法是: Math.PI
console.log('圆的面积等于' + Math.PI * r *r);
</script>
赋值运算符
赋值运算符：对变量进行赋值的运算符一元运算符
<script>
// 赋值运算符：相当于缩写了一个变量
// let num = 2;
// num = num + 3;
// 缩写成:
let num = 2;
num += 3; //5
num -= 4; //-2
num *= 5; //10
num /= 1; //2
console.log(num);
</script>
一元运算符的前置和后置自增
<script>
// 前置自增跟后置自增，单独使用时没有差别，跟算法合并时才有区别
// 前置自增，需要先加1，再计算
let num = 2;
console.log(++num + 3);//6
// 后置自增 先使用再自加（记忆口诀：++在后 后加）如单独输出num,num=3,再输出num=4,每输出多一轮多加1
console.log(num++ + 3);//6
console.log(num++); //4
let i=2
console.log(i++ + 3 + ++i); //9
/* i+3=5 + ++i =9
i++=3
++i=4 */
let b=2;
// console.log(b++ + ++b + b++ + b);
console.log(b++ + b++ + ++b + b);
// 2+3+5+5
let g =6;
console.log(g--); //输出是6，因为先输出后自加
console.log(g); //5
console.log(--g); //4
</script>
比较运算符
<script>
// 输出的结果是布尔类型
console.log(5 > 3);//ture
console.log(1 < 3);//ture
console.log(1 >= 3);//false
console.log(5 <= 3);//false
console.log(3 == '3');//ture 只看数值，不看数值的类型
console.log(3 === '3');//false 既看数值，也看数值的类型/开发最常用！！！！
console.log(3 != '3');//false 不等于的意思，只看值，不看数值类型
console.log(3 !== '3');//ture 不等于的意思，既看数值，也看数值的类型
console.log(3 !== '3');//ture 不等于的意思，既看数值，也看数值的类型
console.log( NaN === NaN);//false NaN不等于任何数
console.log( 0.4 + 0.2);//尽量不要比较小数，因为小数有精度问题 0.600000001
console.log( 2 + '3');//最终把数据隐式转换转成number类型再比较/不同类型之间比较会发生隐式转换
</script>
逻辑运算符
<script>
// 逻辑与 一假则假
let num = 2;
console.log(num > 1 && num < 5); //ture
console.log(num > 1 && num > 5); //false
// 逻辑或 一真则真
console.log(num < 1 || num < 5); //ture
console.log(num > 1 || num > 5); //ture
// 逻辑非 真变假 假变真
let gender = false;
console.log(!gender); //ture
// 逻辑短路 运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值
console.log(3<2 && 5>3);
console.log(undefined && 5>3);
console.log(0 && 20); //0
console.log(20 && 30); //20
console.log(20 || 30); //30
console.log(20>30 || 30>20);
console.log(null || 30); //30
let num1 = +prompt('请输入一个数')
console.log((num1 % 4 === 0) && (num1 % 100 !== 0));
</script>
拓展知识
<script>
// 有些值转换成布尔类型，都是显示false，其余都是ture
// undefined null 0 "" NaN false
console.log(Boolean(undefined)); //转换成布尔类型
console.log(Boolean(null));
console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean(NaN));
console.log(Boolean(false));
</script>
运算符优先级
2.分支语句
if语句
<script>
let score = +prompt('请输入那你分数')
if(score > 700){
alert('恭喜你被蓝翔录取了')}
else if(score > 600){
alert('恭喜你被黑马录取')
}else{
alert('谁都不要你')
}
let seniority = +prompt('请输入你的工龄')
if(seniority > 1){
alert('恭喜你年底奖金+2000')}
else{
alert('年底没奖金')
}
let year = +prompt('请输入今年的年份')
if(year % 400 ===0){
alert('今年是闰年')
}
else{
alert('今年是平年')
}
let time = +prompt('请输入时间')
if(time < 12){
alert('上午好')
}else if(time < 18){
alert('下午好')
}else if(time < 20){
alert('晚上好')
}else{
alert('熬夜好')
}
</script>
三元运算符
<script>
4 > 3 ? alert('对的') : alert('错的')
let num1 = +prompt('请输入一个整数')
let num2 = +prompt('请输入一个整数')
num1 > num2 ? console.log(num1) : console.log(num2)
</script>
案例
<script>
4 > 3 ? alert('对的') : alert('错的')
let num1 = +prompt('请输入一个整数')
let num2 = +prompt('请输入一个整数')
num1 > num2 ? console.log(num1) : console.log(num2)
let time = prompt('请输入一个数字')
time < 10 ? document.write(0 + time) : document.write(time)
let num3 = +prompt('请输入一个整数')
let num4 = +prompt('请输入一个整数')
let symbol = prompt('请输入一个符号')
// 输出是数字类型的话，记得加上显示转换
if(symbol === '+'){
alert(Number(num3 + num4));
}else if(symbol === '-'){
alert(Number(num3 - num4));
}else if(symbol === '*'){
alert(Number(num3 * num4));
}else if(symbol === '/'){
alert(Number(num3 / num4));
}
</script>
补充知识
<script>
// console.log(123);
// 一行内输出两个结果
// console.log(123, 345, 3, 2, 1, 2, 3, 4);
// let a = 1;
// // 2 + 3
// let b = ++a + ++a;
// console.log(b);
// console.log(undefined===undefined);
// 短路运算 整个代码的结果 等于 && 最终运行的那段代码
// js在判断以下 表达式的时候 会自动先转成 布尔类型 再去判断
// 最终 s 获取结果的时候 不会转类型
// 空字符串 NaN false undefined null 0 转布尔类型 都是false
// 学习过程让大家明白
// 第一次和第二次看待代码 会发现很陌生，但是重复 是一种特别有效的学习方式！！
// let s = undefined && 'hello';
// console.log(s);
// let num = 10;
// num += 5; // num = 15
// let res = num++;
// console.log(res); // 15
// console.log(num); // 16
// let x = 10;
// let y = 20;
// let z = x > y ? ++x : y++;
// console.log(x, y, z);// x = 10 ， y = 21 , z = 20
// let num = 5;
// // 6 + 6
// let result = ++num + num++;
// // console.log(result);
// console.log(num); // 7
// console.log(!Boolean({}));
// console.log('2' > 19); // 运算符两侧如果有一个是字符串和一个是数字 把字符串转成数字再去比较
// console.log("2">"19"); // 直接看成是字符传的比较， 先进行 第一个值的比较
// "2" 和 "1" 做比较 ，如果 "2" > "1" 得出结果 不会再往下去判断 “2” 和 "9" 直接的关系
// "2" 和 "19" 看成是数字 本质是 字符串 “2” 和 "1" 字符串做比较
// charCodeAt() 后面继续学习字符串的时候 会讲到
// 如果今天下雨 我就有。。。 否则就怎么
// 判断今天下不下雨 ?下，就。。 : 不下 ，就
// 如果 num =100 , 去买 苹果 否则 买 水
let num = 100;
let result = num === 100 ? '苹果' : '水';
console.log(result);
// 条件?满足条件就执行:不满足条件才执行
</script>
第四节
断点调试
点开检查----点击源代码（sources）----选择代码文件----点击你要断点的那一行代码---要继续运行就点播放
循环语句
while循环
释义：
跟if语句很像，都要满足小括号里的条件为true才会进入执行代码 while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
循环三要素
1.变量起始值 2.终止条件（没有终止条件，循环会一直执行，造成死循环） 3.变量变化量（用自增或者自减）
<script>
// 变量初始值
let i = 1
// 终止条件,当i>3,终止循环
i <= 3
// 变量变化量，一般用自增或是自减
i++
//循环条件
while(i <= 3){
// 循环体
document.write('陷入循环<br>')
i++
}
</script>
课堂案例
<script>
// let num = +prompt('请输入你想要打印的次数')
// let i = 1
// while(i <= num){
// document.write('月薪100万<br>')
// i++
// }
// alert('我是警告框')
// console.log('我是控制台');
// 页面输出1-100
let i = 1
while(i <= 100){
document.write(i)
i++
}
// 计算1加到100的总和
let b = 1
let sum = 0
while(b <= 100){
// sum += b
// b++
// 简化版
sum += b++
}
document.write(sum)
// 计算1-100之间的所有偶数和
let c = 1
let sum1 = 0
while(c <= 100){
// if(c % 2 === 0){
// sum1 += c
// }简化版
(c % 2 === 0) && (sum1 += c)
c++
}
document.write(sum1)
</script>
for循环
for (声明记录循环次数的变量；循环条件；变化值){
循环体
}
<script>
for(let i = 1;i <= 100;i++){
document.write(i)
}
let sum = 0
for (let index = 1; index <= 100; index++) {
(index % 2 === 0) && (sum += index)
}
document.write(sum)
for (let index1 = 1; index1 <= 500; index1++) {
document.write('⭐')
}
</script>
退出循环
continue：结束本次循环，继续下次循环
<script>
// continue:不是必须得，它得功能也可以通过if，else实现或是模拟
// 跳过循环，不想输出某段代码
for (let index = 1; index <= 10; index++) {
// 这段代码跳出循环，不用执行
if(index % 2 !== 0){
continue
}
document.write(index + '⭐')
}
</script>
break：跳出所在的循环
<script>
// break：跳出所在的循环，直接打断循环，也不是必须得，也可以通过if，else实现或是模拟
// 尽量使用时break，性能更加好
for (let index1 = 1; index1 <= 20; index1++) {
if(index1 === 15){
break
}
document.write(index1)
}
</script>
循环嵌套
<script>
// 用户输入行列
let row = +prompt('你想要打印多少行')
let col = +prompt('你想要打印多少列')
for (let num = 1; num <= row; num++) {
for (let num2 = 1; num2 <= col; num2++) {
document.write('⭐')
}
document.write('⭐<br>')
}
let row = +prompt('你想要打印多少行')
for (let num = 1; num <= row; num++) {
for (let num2 = 2; num2 <= num ; num2++) {
document.write('⭐')
}
document.write('⭐<br>')
}
</script>
