JS以前的学习笔记 放在这里 需要自取
// alert(‘#’) 弹出对话框
alert(‘hello world’)
/* 文档输出内容 */
document.write(‘我是谁？’)
document.write(‘标题’)
//可以直接使用html内容
//控制台打输出 给程序员调试用的 直接输入log 点第二个也行
console.log(‘看看对不？’)
//prompt(‘#’) 弹出一个有输入框的警示对话框
// prompt(‘请输入年龄：’)
//声明变量 let var已经淘汰了
/* let age 声明年龄变量 age = 未填写
//变量赋值为18 */
let age = prompt(‘请输入年龄：’), username = ‘吴彦祖’
//声明的同时直接赋值 变量的初始化 ‘,’可以声明多个变量
//age = 19
//变量会直接覆盖 所以输出是19 同一个变量不能声明2次 var声明2次不会报错按最后一次声明来
//最好一行声明一个变量
等后面会打包 console.log(‘名字：’, username, ‘年龄为：’, age);
//控制台打印变量
document.write(‘名字是：’, username, ‘<br>’)
document.write(‘年龄是：’, age, ‘<br>’) /
/ 变量交换 要求变量1与变量2 数据互换
//声明变量
let num1 = 10
let num2 = 20
document.write(‘交换前：’, num1) document.write(num2, ‘<br>’)
let temp = num1
//设置一个变量 作为临时用的 后面用不到引擎会自动销毁这个变量
//吧num2的变量给num1
num1 = num2
num2 = temp
document.write(‘交换后：’, num1)
document.write(num2, ‘’)
/* 关于变量 变量的名字不能为一些特殊字符 或者js内置的一些单词 比如 let var if for 等 只能用下划线 字母 数字 $组成 且数字不能开头 字母是区分大写小写的 比如 A和a 是不同的变量 */
js对应的html css页面:
<!DOCTYPE html>
<html lang="zn_ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="box">
<!--<button onclick="alert('点我干啥') //内部js书写位置">点我</button>-->
<script src="style.js">
/* js一定要放到body最底部 顺序是先加载完html然后js抓取
行内js位置
script里面有src的话 中间不要写内容 不执行 */
alert('我不会被加载')
// 单行注释 ctrl + /
/* 多行注释 ：
shift alt + A */
/* js没必要加分号 js引擎会自动加载 */
</script>
</body>
</html>style.css
.box {
color: rgb(47, 115, 163);
}关于var的缺点
var声明现在已经过时了，目前新的都用let来声明 只有在老版程序中会出现。
var声明的缺点：
- 可以先使用，再声明（不河里）
- var声明过的变量可以再声明一边（不河里）
- 不如变量提升，全局变量，没有块级作用域等。
// 数组示例
let username1 = [12, 13, 14, 15, 16, 17]; // 数组是有序的，每个都有一个固定的编号 (0,1,2,3,4,5)
document.write(username1 + '<br>'); // 使用 <br> 换行
console.log(username1[1]); // 打印第二个数据 13
// 数组长度
console.log(username1.length); // 索引号是从0开始，数组长度从1开始
// 常量示例
const Chang = '常量'; // 常量声明的时候必须赋值
console.log(Chang); // 输出常量
// 数据类型示例
let r = prompt('输入圆的半径：');
let re = 3.14 * r * r;
document.write('圆的面积：' + re + '<br>'); // 使用 <br> 换行
// 字符串示例
let ziFu = "test";
let ziFu1 = 'test';
let ziFu2 = `test`;
document.write(ziFu + '-' + ziFu1 + '-' + ziFu2 + '<br>'); // 使用 <br> 换行
// 模板字符串示例
let age = 20;
document.write(`我今年${age}岁了<br>`); // 使用 <br> 换行
// 布尔型示例
let chengNian = true;
console.log(`布尔类型变量输出：${chengNian}`);
// 未定义型示例
let unUmnm;
console.log(`未定义类型变量输出：${unUmnm}`);
// null 示例
let obj = null;
console.log(`null类型变量输出：${obj}`);
// 类型检测示例
let jianCe = 123;
let jianCe1 = '中文';
let jianCe2 = false;
let jianCe3 = null;
let jianCe4;
document.write(typeof jianCe + '-'); // 类型: number
document.write(typeof jianCe1 + '-'); // 类型: string
document.write(typeof jianCe2 + '-'); // 类型: boolean
document.write(typeof jianCe3 + '-'); // 类型: object
document.write(typeof jianCe4 + '<br>'); // 类型: undefined
// 隐式转换示例
document.write(1 + 1 + '<br>'); // 2个都是数字，所以结果是2
document.write('文字' + 1 + '<br>'); // 其中有一个是字符串，所以将后面的1转换为字符串，结果是：文字1
document.write(2 - '2' + '<br>'); // - * / 等都会把字符串转换成数字类型，这里将字符串的2转换成数字2
console.log(+'123'); // +号可以将数据转换成数字型
// 显式转换示例
let shuJu = '123';
console.log(Number(shuJu)); // 强制转换成数字型，如果有非数字内容会显示NaN，NaN也是数字类型只不过代表非数字
console.log(typeof Number(shuJu)); // 输出为number
// 示例
let nianXin = Number(prompt('你的年薪')); // 变量数据为数字型
let nianXin1 = +prompt('你的年薪'); // 使用 +号转换为数字型
// parseInt 和 parseFloat 示例
console.log(parseInt('100.123px')); // 结果是100，只保留整数
console.log(parseFloat('100.123px')); // 结果是100.123，保留小数
// 练习：输入2个数，计算二者的和并打印到页面
let jiSuan = parseFloat(prompt('输入第一个数：')); // 用户输入转化为数字型，过滤其他字符
let jiSuan1 = parseFloat(prompt('输入第二个数：'));
alert(`输出的结果是${jiSuan + jiSuan1}`); // 输出相加结果关于小数的精度问题：
// 关于小数的精度问题 先演示一下解决
let shu1 = 0.1 + 0.2
console.log(shu1); //答案是0.30000000000000004 因为小数点的2进制计算很麻烦有精度问题
//解决方法
let shu2 = 0.1 * 10 + 0.2 * 10
shu2 = shu2 / 10
console.log(shu2); //答案是0.3/* 赋值运算符 使用赋值运算符简化代码 它是对变量进行赋值的运算符 叫赋值运算符 */
// 赋值运算符: += -= *= /= %= 比如以前我们给变量加1是这样写的:
let Num = 1
Num = Num + 1
console.log(Num)
//现在用赋值运算符有更简单的写法：
let Num1 = 1
//采用赋值运算符
Num += 1 // 赋值运算执行过程 将等号右边的值赋值给左边 要求左边必须是一个容器， -= *= /= %=依次类推。/* 一元运算符 可以根据表达式的个数分为 一元，二元，三元运算符 */
// 例： 二元运算符：
let BV = 10 + 20
//一元运算符 例： 正负号
/* 自增：
符号 ++ 是让变量的值加+1 减号（--）就是让变量的值-1 */
// 使用场景： 经常用来计数 比如进行10次操作 用它来计算进行了多少次
// 自增运算符的用法 前置自增：
let num = 1
++num //让num值加1变成2
console.log(num)
//后置自增：
let i = 1
i++
console.log(i)
/* 前置自增和后置自增单独写是没有区别的
前置与后置如果参与运算了就有区别了 */
let I = 1
console.log(++I + 1) //结果是3
let A = 1
console.log(A++ + 1) //结果是2 此时的A是1 先和1相加 先运算完i再自加 （了解一下就行）//比较运算符 使用场景：比较2个数的大小 是否相等
/* 运算符种类及作用
> 左边是否大于右边
< 左边是否小于右边
>== 左边是否大于等于右边
<== 左边是否小于等于右边
== 左右2边值是否相等
=== 左右2边是否值和类型都相等
!== 左右2边是否不全等
比较运算符结果为Boolean类型 只会得到true和false */
console.log(3 > 5);// false
console.log(3 >= 3);// true
console.log(2 == 2);// true
console.log(2 == '2');// true 比较运算也有隐式转换
console.log(2 === '2');// false 双等只判断值 三等要数据和值都一样才行 （实际开发中强烈推荐用三等）
console.log(undefined === null); //false 三等可以避免很多问题
console.log(NaN === NaN); //false NaN不等于任何 包括它自己
console.log(2 !== '2'); //true
// 单等于是叫赋值 不要记错
console.log('--------分割线---------');
// 比较运算符 字符串比较，是比较的ASCII码 用的比较少 了解一下就行
// c:UsersROGAppDataRoamingTencentTIMTempHK]DY6O([E51@DLJW)7MWY1.png
console.log('a' < 'b'); //true
console.log('aa' < 'ab'); //true 是第一个a一后面第一个比较 后面的a和后面的b比较 第一位一样就比较第二位
console.log('我' > '他'); //true 中文根据拼音比较// *逻辑运算符 经常用来解决多重条件判断
/* 逻辑运算的种类
&& 名称：逻辑与 日常读法：并且 特点是2边都为true结果才为true
|| 名称：逻辑或 日常读法：或者 特点是2边有一个为true就为true
! 名称：逻辑非 日常读法：取反 特点是true变成false false变成true */
// 逻辑与 一假则假
console.log(true && true); //true
console.log(false && true); //false
console.log(3 < 5 && 3 > 2); //true
console.log(3 < 5 && 3 < 2); //false
console.log('--------分割线---------');
// 逻辑或 一真则真
console.log(true || true); //true
console.log(false || true); //true
console.log(false || false); //false
console.log('--------分割线---------');
// 逻辑非 取反 （是一元运算）
console.log(!true);
console.log(!false);
//例
let shu = 6
console.log(shu > 5 && shu < 10); //结果为true//做一个案例
//需求：用户输入一个数字 判断能被4整除但是不能被100整除页面弹出true 否弹出false
//用户输入
let num = prompt('请输入一个数字')
//弹出结果
alert(num % 4 === 0 && num % 100 !== 0)
// 运算符优先级
// 1 小括号 ()
// 2 一元运算符 ++ -- !
// 3 算数运算符 先*/ 后 +-
// 4 关系(比较)运算符 < > >= <=
// 5 相等运算符 == != === !==
// 6 逻辑运算符 先&& 后||
// 7 赋值运算符 =
// 8 逗号运算符 ,
//表达式和语句的区别
//表达式是可以求值的代码 js引擎会计算出一个结果 比如：
/* x = 7
3 = 4
num++ */
//语句是一段可以执行的代码 比如
prompt()//可以弹出一个输入框 还有 if for循环等
//表达式可以求值所以可以卸载赋值语句的右侧 而语句不一定有值 所以比如alert()等语句不能用于赋值
/* 分支语句 */
//程序三大流程控制语句 之前我们写的代码 写几句就往下执行几句 叫顺序结构
//有的时候根据条件选择执行代码 这种叫分支结构
//比如代码1 满足条件 可以执行代码2 再执行代码3 如果不满足条件 则直接执行代码3
//某段代码被重复执行叫循环结构
/* 分支语句包含：
if分支语句
三元运算符
switch语句 */
//if分支分为单分支 双分支 多分支
/*
单分支使用语法
if (条件) {
满足条件要执行的代码
}
只有括号里面的条件为true时 进入大括号里面执行代码
小括号里面的结果若不是布尔型的时候 发生隐式转换为布尔类型
如果大括号里面只有一个语句 大括号可以省略 但是不提倡这么做
*/
if (true) {
console.log(`执行语句`);
}
if (3 > 5) { //转化false
console.log(`执行语句`);
}
if (2 === '2') { //false
console.log(`执行语句`);
}
//除了0 所有数字都为真 小数和负数都为真 除了空字符串 其他的都为真
if (2) {
console.log(`执行语句`);
}