Python攻城师成长————前端JS学习

本文链接：https://blog.csdn.net/fonnt/article/details/124480059

本文详细介绍了JavaScript的基础知识，包括算术、比较和逻辑运算符，流程控制结构如if、switch、while和for循环，以及三元运算。深入探讨了函数的定义、调用方式，包括无参、有参、匿名和箭头函数。此外，还讲解了内置对象如Date对象的使用，以及BOM与DOM操作的基本概念，如窗口对象、弹框、计时器和页面导航。文章还提供了实例代码以帮助理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今日学习目标

熟悉学习JS内容。

学习内容

JS–运算符
JS–流程控制
JS–函数
JS–内置对象
JS–BOM与DOM操作

一、JS–运算符

1.算术运算符

加（+）、减（-）、乘（*）、除（/）、连加（++）、连减（--）

特殊运算：

var x=10;
var res1=x++;  '先赋值后自增1'
var res2=++x;  '先自增1后赋值'

2.比较运算符

大于（>）、小于（<）、 弱等于（==）、强等于（===）、不等于（！==）

弱等于:自动转换类型

  '5' == 5  '结果是true js会自动转换成相同数据类型比较值是否一样'

强等于:不转换类型

  '5' === 5  '结果是false'

3.逻辑运算符

python中使用 and、or、not
js中使用      &&、||、!

二、JS–流程控制

if判断

1.单if分支
if(条件){
  条件成立执行的分支代码块
}

2.if...else分支
if(条件){
  条件成立执行的分支代码块
}else{
  条件不成立执行的分支代码块
}

3.if...else if...else分支
if(条件1){
  条件1成立执行的分支代码块
}else if(条件2){
  条件1不成立条件2成立执行的分支代码块
}else{
  条件1和2都不成立执行的分支代码块
}

switch语法

类似于简易版的if判断

var n1 = 1;
switch (n1) {
  case 0:
  console.log("干饭");
  break;  # 如果不加break会基于当前位置一直往下运行
  case 1:
  console.log("睡觉");
  break;
  case 2:
  console.log("玩耍")
default:  # 没有对应条件统一执行default子代码
  console.log("无所事事!!!")
}

while循环

while(循环条件){
循环体代码
}

for循环

for(初始值;循环条件;每次循环之后的操作){
循环体代码
}

循环打印0到9的数字

for (var i=0;i<10;i++) {
  console.log(i);
}

使用for循环打印出数组内所有的元素

var l1 = [11, 22, 33, 44, 55]
for(var i=0;i<l1.length;i++){
console.log(l1[i])
}

三元运算

python中的三元运算
```
res = 11 if 1 > 2 else 22
```
if后面的条件成立则使用if前面的值不成立则使用else后面的值
js中的三元运算
```
res = 1 > 2 ? 11 : 22
```
问号前面的条件成立则使用冒号左边的值否则使用冒号右边的值

提醒：三元运算一般情况下都不推荐嵌套使用!

三、JS–函数

函数定义:

function 函数名(参数1,参数2){
函数体代码
return 返回值
}

function 定义函数的关键字相当于python中的def
函数名的命名参考变量名并且js推荐使用驼峰体(Myfunc\MyFunc)
参数可写可不写
return返回值（不支持返回多个数据）

函数调用：函数名加括号有参则传参即可

无参函数

function f1(){console.log(111)}
f1()

有参函数

function f2(a, b){console.log(a,b)}
f2()  # 可以调用 相当于传了两个undefined
f2(1)  # 可以调用 
f2(1,2)  # 可以调用
f2(1,2,3,4,5)  # 可以调用

js中的函数提供了有个内置关键字arguments:接收所有参数
代码验证：

function f2(){
	console.log(arguments)
	if (arguments.length === 0){
  		console.log('什么参数都没传')
	 }else if(arguments.length === 1){
  		console.log('传了一个参数')
	 }else{
  		console.log('传了多个参数')
	 }
}

匿名函数

var ff = function (){
console.log(123)
}

箭头函数(drf中vue框架会再次接触)

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只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

四、JS–内置对象

自定义对象(相当于python里面的字典)

var d1 = {'name':'jason','age':18}

python字典取值操作js中的自定义对象都有并且自定义对象还可以直接通过句点符取值更像一个对象
取值操作

d1.name  # jason

循环取值

for(var i in d1){
console.log(d1[i])
}

定义自定义对象还有一种标准格式(自定义对象内置对象第三方对象)

var d2 = new Object()  # 相当于生成了空字典

内置对象

可以看成是python中的内置方法内置模块等提前写好直接调用

Date对象

var d1 = new Date()
d1.toLocaleString()		'2022/4/28 10:47:01'
d1.toLocaleDateString()	'2022/4/28'
d1.toLocaleTimeString()	'10:47:01'

方法名	用法
getDate()	获取日
getDay ()	获取星期
getMonth ()	获取月（0-11）
getFullYear ()	获取完整年份
getYear ()	获取年
getHours ()	获取小时
getMinutes ()	获取分钟
getSeconds ()	获取秒
getMilliseconds ()	获取毫秒
getTime ()	返回累计毫秒数(从1970/1/1午夜)

练习:
打印出 ‘‘2017-12-27 11:11 星期三’’

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();

JSON对象

python中如何序列化反序列

import json
json.dumps()  # 序列化
json.loads()  # 反序列

js中如何序列化反序列化

JSON.stringify()  # 序列化
JSON.parse()  反序列

正则对象

创建正则表达式的两种方式

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  # 推荐使用(简化)

使用正则
```
reg2.test('jason123')   true
```
括号内什么都不写就相当于写了undefined
```
reg2.test()  # true
```

验证

var reg3 = /undefined/
reg3.test('jason666')		false
reg3.test('undefined')	true
reg3.test()							true

全局匹配
在正则表达式的最后添加一个字母g

var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg3.lastIndex   # 0
reg3.test('jason666')   # true
reg3.lastIndex   # 8
reg3.test('jason666')    # false

五、JS–BOM与DOM操作

BOM操作(了解)

Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”

window.open('https://www.baidu.com','','width=400,height=400')

打开子页面
子页面的操作其实可以通过一些手段传递给父页面(父子联动)

关闭页面
window.close()

window.navigator.appVersion
window.navigator.userAgent


window.history.forward()  # 前进一页
window.history.back()  # 后退一页


window.location.href  # 获取页面的url地址
window.location.reload()  # 刷新页面
window.location.href = url  # 跳转到指定页面

弹框系列

alert("你看到了吗？")  							 警告
confirm('121321131')				确认

获取用户是点击取消还是确认返回false和true

prompt('你还有什么要交代的吗')				提示

获取用户输入的内容也可以通过第二个参数添加默认内容

计时器

单次定时

var t = setTimeout(showMsg,9000)  # 9秒钟之后自动执行showMsg
clearTimeout(t)  # 取消定时器

循环定时

var s = setInterval(showMsg,3000)  # 每隔3秒执行一次
clearInterval(s)  # 取消定时器

用法举例：

function showMsg() {
        alert(123)
    }
var t = setInterval(showMsg,3000)
function clearMsg() {
clearInterval(t)
}
setTimeout(clearMsg, 9000)

补充说明
由于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	上一个兄弟标签元素