目录
01-数据类型检测
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
var num = 12;
var str = '男';
var boo = false;
var und;
var nul = null;
// console.log(typeof num); //number
// console.log(typeof str); //string
// console.log(typeof boo); //boolean
// console.log(typeof und); //undefined
// console.log(typeof nul); //object 只有null是object类型 其他基本数据类型都是自己的名字
var num = prompt('请输入一个数字');
console.log(typeof num);
</script>
</body>
</html>
01-数据类型转换
<!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>
// 转换为布尔值 Boolean 有0会被转换false 其余都会被转换true
console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean(3));
console.log(Boolean(-4));
console.log(Boolean("张三"));
// 转换为数字 Number
console.log(parseInt("true"));
console.log(parseInt("false"));
console.log(parseInt(null));
console.log(parseInt("3.55555555"));
console.log(parseInt("3e2"));
console.log(parseInt("3.强强555555555555"));
var num = prompt("请输入一个数字");
console.log(Number(num) + 1);
// 其他类型转换为字符串 String
console.log(String(true));
console.log(String(123));
console.log(string(undefined));
</script>
</body>
</html>
02-数据类型转换
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
// 其他类型转换为布尔
// console.log(Boolean(1));
// console.log(Boolean(0));
// console.log(Boolean(3));
// console.log(Boolean(-4));
// 数字类型转换Boolean 只有0会被转换为false 其他所有非0数字都会被转换为true
// console.log(Boolean("郑佳一")); //true
// console.log(Boolean("彭昌辉")); //true
// console.log(Boolean("宁成")); //true
// console.log(Boolean("健康的萨菲航空技术的反抗精神的不能拷贝")); //true
// console.log(Boolean("")); //false
// 字符串类型转换boolean,只有空字符串会被转换为false,其他所有非空都会被转换为true
// console.log(Boolean(null)); //false null表示空 所以会被转换为false
// console.log(Boolean(undefined)); //false undefined表示未定义 空 所以会被转换为false
// 其他类型转换为数字 Number
// console.log(Number(true)); //1
// console.log(Number(false)); //0
// console.log(Number("张三")); // NaN Not a Number
// console.log(Number("3张三")); // NaN Not a Number
console.log(Number("3")); // 3
console.log(Number("-3e2")); // -300
// 字符串通过number转换后,如果字符串中包含非数字字符,那么结果为NaN
// console.log(Number(undefined)); //NaN Not a Number
// console.log(Number(null)); //null 空 0
// 其他类型转换为数字 parseInt
// console.log(parseInt("3张三")); //3
// console.log(parseInt("李3四张三")); //NaN
// console.log(parseInt(true)); //NaN
// console.log(parseInt(null)); //
// console.log(parseInt("3.555555555555")); //3
// console.log(parseInt("3e2")); //3
// console.log(parseFloat("3.张三555555555555")); //3
// var num = prompt("请输入一个数字");
// console.log(Number(num) + 1);
// 其他类型转换为字符串 String
// console.log(String(true));
// console.log(String(123));
// console.log(String(undefined));
// 其他类型转换为字符串 toString
// var num = 1.1;
// console.log(num.toString(2));//可以选择转换进制
</script>
</body>
</html>
03-隐式类型转换
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
var str1 = '123';
var str2 = '456';
console.log(str1 - str2);
// isNaN 小括号里面的内容是不是nan
console.log(isNaN(123)); //false
console.log(isNaN('aa123')); //false
</script>
</body>
</html>
04-算数运算符
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
// var num1 = 10;
// var num2 = 15;
// console.log(num1 + num2);
// console.log(num1 - num2);
// console.log(num1 * num2);
// console.log(num1 / num2);
// var str1 = "15";
// var str2 = "20";
// console.log(str1 + str2); // 1520
// console.log(str1 - str2); // -5
// console.log(str1 * str2); //300
// console.log(str1 / str2); //0.75
// console.log(str1 + num2); // 1515
// console.log(num2 + str1); // 1515
// + 加法运算 拼接 因为+号两边有字符串,所以会出现拼接
// 取余数 % 如果余数为0 表示可以被整除
// console.log(15 % 6);
// console.log((1 + 2 + 3) * 5 / (1 + 6) - 8);
// 1.先算括号里面的
// 2.再算乘除
// 3.最后算加减
console.log(0.5 + 0.5);
console.log(0.1 + 0.2);
</script>
</body>
</html>
05-赋值运算符
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
// 赋值运算符 =
// 将等号右边的值赋予给等号左边的变量
var num = 10;
// var num1 = num;
// 等号右边的num表示的是num的值,等号左边的num表示的是num的变量
num = num + 5
num = num - 5
num = num * 5
num = num / 5
// 简写
num += 5;
num -= 5;
num *= 5;
num /= 5;
</script>
</body>
</html>
06-自增自减运算符
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
// var num = 99;
// num += 1;
// num++;
// ++num;
// 表示 num 自我增加1
// num--;
// --num;
// 表示 num 自我减少1
// 符号 在前 和 在后 效果是不一样的
// 符号如果在变量的后面表示 先将变量拿来使用 之后在自增
// console.log(num++ + 1); // 100
// 符号 在前 和 在后 效果是不一样的
// 符号如果在变量的前面表示 先将变量自增 然后在拿去使用
// console.log(++num + 1); // 101
var a = 6;
var b = 2;
var c = a++ - --b + ++a - 5 - --b + a++;
// console.log("a的值是:" + a); // 9
// console.log("b的值是:" + b); // 0
// console.log("c的值是:" + c); // 16
</script>
</body>
</html>
07-逻辑运算符
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
// 逻辑运算符
// 与 和 且 &&
// 两个条件只要有一个不满足 最终的结果就是不成立 只有所有都成立 最终的结果才是成立
// 如果第一个条件 成立 那么会直接输出第二个条件
// 如果第一个条件不成立 那么就会直接输出第一个条件
// console.log(true && false); // false
// console.log(true && true); // true
// console.log(false && false); // false
// console.log(1 && 0); //0
// console.log(0 && ''); //0
// 或 或者 ||
// 两个条件只要有一个成立 最终的结果就是成立 如果都不成立 结果不成立
// 如果第一个条件成立 就会直接输出第一个条件
// 如果第一个条件不成立 就会直接输出第二个条件
// console.log(true || false); // true
// console.log(false || false); // false
// console.log(true || true); // true
// console.log(1 || 0); //1
// console.log(0 || ''); //0
// 非 不是 取反 !
// 非只会对布尔值生效 非布尔值会先转换为布尔值再取反
// 最终的结果一定是一个布尔值
// console.log(!3);
</script>
</body>
</html>
08-关系运算符
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
var num1 = 15;
var num2 = 9;
console.log(num1 > num2);
// 大于
console.log(num1 < num2);
// 小于
console.log(num1 == num2);
// 等于
// 一个 = 表示 赋值 == 表示等于
console.log(num1 >= num2);
// 大于等于
console.log(num1 <= num2);
// 小于等于
console.log(num1 != num2);
// 不等于
// 关系运算符 最终输出的结果一定是一个布尔值 更像是一个判断条件
console.log("--------------------------------------------------------");
console.log(1 == "1");
// 等于 会将等号两边的内容 隐式转换成相同的数据类型
console.log(1 === "1");
// 全等于 === 两边的内容必须完全相同 类型也必须相同
console.log(1 !== "1");
// 不全等于
// console.log(5 > 3 && 3 > 1);
</script>
</body>
</html>
09-运算符优先级
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
console.log(4 >= 6 || '人' != '张三' && !(12 * 2 == 144) && true);
// 4 >= 6 || '人' != '张三' && !false && true
// 4 >= 6 || '人' != '张三' && true && true
// false || '人' != '张三' && true && true
// true
// 1. ( )优先级最高
// 2. 一元运算符 ++ -- !
// 3. 算数运算符 先* / % 后 + -
// 4. 关系运算符 > >= < <=
// 5. 相等运算符 == != === !==
// 6. 逻辑运算符 先&& 后||
// 7. 赋值运算符
</script>
</body>
</html>
10-if判断语句
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
// if (5 > 3) {
// console.log("哇!你好棒呀 知道5大于3");
// }
// if (5 < 3) {
// console.log("哇!你好棒呀 知道5小于3");
// }
// 如果(条件表达式) {
// 代码块1
// }
// 如果 条件表达式的结果是true 那么就会执行代码块1
// 如果条件表达式的结果是false 那么就不会执行代码块1 然后 直接结束if
if (5 < 3) {
console.log("哇!你好棒呀 知道5大于3");
} else {
console.log("哇!你好棒呀 知道5小于3");
}
// 如果(条件表达式) {
// 代码块1
// }否则{
// 代码块2
// }
// 如果条件表达式的结果是true 那么就会执行代码块1
// 如果条件表达式的结果是false 那么就会执行代码块2
</script>
</body>
</html>
11-if练习
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
// 练习-01 输入一个数来判断奇数和偶数
// 1.输入
// 2.数字
// 3.判断
var num = Number(prompt("请你输入一个数字"));
if (num % 2 == 0) {
console.log(num + " 这是一个偶数");
} else {
console.log(num + " 这是一个奇数");
}
// 练习-02 输入一个数判断是否为100以下 50以上
// 1.输入
// 2.数字
// 3.判断
var num1 = Number(prompt("请你输入一个数字"));
if (num1 < 100 && num1 > 50) {
console.log(num1 + " 成立啦");
} else {
console.log(num1 + " ?????");
}
</script>
</body>
</html>
12-for循环语句
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
for循环语句 可以重复执行代码
for (var i = 0; i < 100; i++) {
console.log("!!!!");
}
从 100 开始 到 0 结束
for (var i = 100; i > 0; i--) {
console.log("aaaaaaa!!!!");
}
循环(1.循环从几开始 2.循环到几结束 3.循环是怎么执行的) {
4.代码块1
}
1 => 2 => 4 => 3 => 2 => 4 => 3 => ....... => 2
只要2 条件成立 for循环就会执行代码块
累加器
var sun = 0;
for (var i = 1; i <= 10; i++) {
// console.log(i);
sun = sun + i;
// sun += i;
}
console.log(sun);
</script>
</body>
</html>
13-for循环练习
找出1~1000之中,所有能被5整除,或者被6整除的数字。在控制台输出。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>03-JavaScript</title>
<style>
</style>
</head>
<body>
<script>
// 找出1~1000之中,所有能被5整除,或者被6整除的数字。在控制台输出。
// 1.1~1000
// 2.5整除 6整除
for (var i = 1; i <= 1000; i++) {
// console.log(i);
if (i % 5 == 0 || i % 6 == 0) {
console.log(i);
}
}
</script>
</body>
</html>