运算符、流程控制、三元运算符、js函数、对象、BOM操作、DOM操作
学习内容总结
今日学习内容总结
在昨日的学习中，我们开始了对JavaScript的学习。而今日，就是学习对JavaScript的使用。
运算符
算数运算符 +
算术运算符用于执行两个变量或值的运算。算术运算符有： + （加）、 - （减）、 * （乘）、 / （除）、 %（求余数）、++ （自增）、- -（自减）：
浮点数的精度问题
浮点数值的最高精确度是17位小数，但在进行计算的其精确度远远不如整数:
var result = 0.1 + 0.2;
//他所得出来的结果不是0.3，而是：0.30000000000000004
console.log(0.07 * 100);
//他所得出来的结果也不是7，而是：7.000000000000001
表达式和返回值
表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合，简单来说就是由数字、运算符、变量等组成的式子称为表达式。表达式最终会有一个结果返回给我们，称为返回值。
递增和递减运算符概述
如果需要反复给数字变量添加或减去1，可以使用递增(++)和递减(–)运算符来完成。
在js中,递增(++)和递减(–)既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时，我们可以称为后置递增(递减)运算符。
注意: 递增和递减运算符必须和变量配合使用。
<script>
//1.想要一个变量自己加1 num=num+1比较麻烦
var num = 1;
num = num + 1; //++num
//2.前置递增运算符
var age = 10;
++age;// age=age+1
console.log(age);
//3.先加1 后返回值
var p = 10;
console.log(++p + 10);//21
//后置递增运算符
var num1 = 10;
num1++;
console.log(num1);
//1.前置递增和后置递增如果单独使用效果是一样的
//2.后置自增 口诀：先返回原值 后自加1
var age1 = 10;
console.log(age1++ + 10);//20=10+10
console.log(age1); //11=10+1
</script>
比较运算符
比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false )作为比较运算的结果。
逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。 后面开发中经常用于多个条件的判断。
python中使用 and、or、not
js中使用&& || !
流程控制
其实流程控制在每种语言中的意义都是一样的，我们主要学习流程控制在js中的用法：
if判断
# 单if分支
if(条件){
条件成立执行的分支代码块
}
# if...else分支
if(条件){
条件成立执行的分支代码块
}else{
条件不成立执行的分支代码块
}
# if...else if...else分支
if(条件1){
条件1成立执行的分支代码块
}else if(条件2){
条件1不成立条件2成立执行的分支代码块
}else{
条件1和2都不成立执行的分支代码块
}
# switch语法
var n1 = 1;
switch (n1) {
case 0:
console.log("干饭");
break; # 如果不加break会基于当前位置一直往下运行
case 1:
console.log("睡觉");
break;
case 2:
console.log("玩耍")
default: # 没有对应条件统一执行default子代码
console.log("无所事事!!!")
}
循环
# for循环
for(初始值; 循环条件; 每次循环后的操作){
循环体代码
}
# 使用for循环打印出数组内所有的元素
var l1 = [11, 22, 33, 44, 55]
for(var i=0;i<l1.length;i++){
console.log(l1[i])
}
# while循环
while(循环条件){
循环体代码
}
三元运算符
在学习js的三元运算符之前我们可以复习一下python的三元运算
res = 11 if 1 > 2 else 22
// if后面的条件成立则使用if前面的值 不成立则使用else后面的值
js中的三元运算符：
res = 1 > 2 ? 11 : 22
// 问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值
函数
我们都知道函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。函数可以封装一段JavaSript代码，它只定义一次，但可以被执行或调用任意多次。
js函数的定义
function 函数名(参数1,参数2){
函数体代码
return 返回值
}
1.function 定义函数的关键字 相当于python中的def
2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)
3.参数可写可不写
4.return返回值
函数调用:
函数名加括号，有参则传参即可。
无参函数
function f1(){
console.log(111)
}
f1()
// 111
有参函数
function f2(a, b){
console.log(a,b)
}
f2() // 可以调用 相当于传了两个undefined
f2(1) // 可以调用 1
f2(1,2) // 可以调用 1 2
f2(1,2,3,4,5) // 可以调用 1 2
// js中的函数提供了有个内置关键字arguments:接收所有参数
function f2(){
console.log(arguments)
if (arguments.length === 0){
console.log('什么参数都没传')
}else if(arguments.length === 1){
console.log('传了一个参数')
}else{
console.log('传了多个参数')
}
}
// 返回值参数
return不支持返回多个数据
匿名函数
var ff = function (){
console.log(123)
}
箭头函数
var f = v => v;
// 等同于(箭头左边是形参右边是返回值)
var f = function(v){
return v;
}
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
对象
自定义对象
对象是引用数据类型，是保存复杂数据类型的容器，它是多个属性(数据)和方法(功能)的集合。而自定义对象，相当于python中的字典。
var d1 = {'name':'jason','age':18}
// python字典取值操作js中的自定义对象都有，并且自定义对象还可以直接通过句点符取值，更像一个对象。
取值
d1.name // jason
循环取值
for(var i in d1){
console.log(d1[i])
}
// jason 18
定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d2 = new Object() # 相当于生成了空字典
内置对象
内置对象可以看成是python中的内置方法，内置模块等，提前写好直接调用。
Data对象
var d1 = new Date()
d1.toLocaleString() '2022/4/28 19:55:55'
d1.toLocaleDateString() '2022/4/28'
d1.toLocaleTimeString() '19:55:55'
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
// 课堂小练习
const WEEKMAP = {
0:"星期天",
1:"星期一",
2:"星期二",
3:"星期三",
4:"星期四",
5:"星期五",
6:"星期六"
}; //定义一个数字与星期的对应关系对象
function showTime() {
var d1 = new Date();
var year = d1.getFullYear();
var month = d1.getMonth() + 1; //注意月份是从0~11
var day = d1.getDate();
var hour = d1.getHours();
var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes(); //三元运算
var week = WEEKMAP[d1.getDay()]; //星期是从0~6
var strTime = `
${year}-${month}-${day} ${hour}:${minute} ${week}
`;
console.log(strTime)
};
showTime();
// 2022-4-28 19:57 星期四
json对象
js中的序列化与反序列化：
JSON.stringify() // 相当于python中的 json.dumps()
JSON.parse() // 相当于python中的 json.loads()
正则对象
创建正则表达式的两种方式
// 使用直接量创建正则表达式，以"/"表示开始和结束
var regexp1 = /abc/;
// 使用构造函数创建正则表达式
var regexp2 = new RegExp("abc");
上面两种写法都创建了一个内容为abc的正则表达式对象。但是通过直接量创建的正则表达式对象在javaScript引擎编译的时候就已经创建了，而通过构造函数创建的正则表达式对象是在运行时才创建的。
RegExp构造函数还可以接受第二个参数，表示修饰符。
var regexp3 = new RegExp("abc","im");
// 两者等价
var regexp4 = /abc/im;
正则的使用
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
reg2.test('jason123') // true
reg2.test() // true 括号内什么都不写 就相当于写了undefined
全局匹配
在正则表达式的最后添加一个字母g。
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg2.lastIndex // 0
reg2.test('jason666') // true
reg2.lastIndex // 8
BOM操作
Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
打开子页面
window.open('https://www.baidu.com','','width=400,height=400')
window.close() // 关闭页面
子页面的操作其实可以通过一些手段传递给父页面(父子联动):
window.navigator.appVersion // '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.41 Safari/537.36'
window.navigator.userAgent // 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.41 Safari/537.36'
window.history.forward() # 前进一页
window.history.back() # 后退一页
window.location.href # 获取页面的url地址
window.location.reload() # 刷新页面
window.location.href = url # 跳转到指定页面
弹框
alert("是否确认？") // 警告
confirm('要不要再给一次机会？') // 获取用户是点击取消还是确认 返回false和true
prompt('你还有什么要交代的吗') // 获取用户输入的内容 也可以通过第二个参数添加默认内容 提示
计时器
// 单次定时
var t = setTimeout(showMsg,9000) // 9秒钟之后自动执行showMsg
clearTimeout(t) // 取消定时器
// 循环定时
var s = setInterval(showMsg,3000) // 每隔3秒执行一次
clearInterval(s) // 取消定时器
由于DOM是操作页面上的HTML代码，但是HTML页面加载顺序是从上往下，所以如果想要我们的代码能够正常执行，必须要先等待html页面加载完毕。解决的措施之一:将script标签写在body内最下方。
DOM操作
Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素。但是HTML页面上有很多相同的标签，所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)。
直接查找
// 通过标签名查找标签
document.getElementsByTagName('div') // 数组套标签对象
// 通过class值查找标签
document.getElementsByClassName('c1') // 数组套标签对象
// 通过id值查找标签
document.getElementById('d1') // 标签对象本身
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
方法得出的标签对象还可以继续点击上述方法
浙公网安备 33010602011771号