前端学习笔记

今日内容概要

  • JS基本数据类型
  • 流程控制
  • 函数与面向对象
  • JS的BOM与DOM操作

今日内容详细

JS基本数据类型

布尔值

python中布尔值是bool,第一个字母要大写True,False。代表False的有0,None,'',[],{}....

JS中布尔值是boolean,全部是小写true,false。代表false的有:''(空字符串),0,null,undefined,NaN。

null与undefined的区别:

null可以理解为曾经拥有过,现在暂时空了

undefined可以理解为从来没拥有过

对象之数组

JS中的所有事物都是对象:字符串,数值,数组,函数...此外,JS允许自定义对象。

JS提供多个内建对象,比如String,Date,Array等等。对象只是带有属性和方法的特殊数据类型。

数组对象的作用是:使用单独的变量名来存储一系列的值。类似于python中的列表。

方法 说明
.length 数组的长度
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start,end) 切片,取不到end
.reverse() 反转
.join(seq) 将数组元素连接成字符串,默认是使用','隔开元素
.concat(val,...) 连接数组
.sort() 排序
.forEach() 将数组的每个元素传递给回调函数
.splice() 删除元素,并向数组添加新元素
.map() 返回一个数组元素调用函数处理后的值的新数组

forEach

参数:function(currentValue, index, arr)

参数 描述
currentValue 必需。当前元素
index 可选。当前元素的索引值。
arr 可选。当前元素所属的数组对象

函数只有一个形参:取数组的值;函数有两个形参:取的是数组里元素的值、索引;函数有三个形参:取的是值、索引、数组。

var l1=['jason', 'tony', 'kevin', 'oscar', 'jerry']
l1.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
jason 0 (5) ['jason', 'tony', 'kevin', 'oscar', 'jerry']
tony 1 (5) ['jason', 'tony', 'kevin', 'oscar', 'jerry']
kevin 2 (5) ['jason', 'tony', 'kevin', 'oscar', 'jerry']
oscar 3 (5) ['jason', 'tony', 'kevin', 'oscar', 'jerry']
jerry 4 (5) ['jason', 'tony', 'kevin', 'oscar', 'jerry']

splice

splice(起始位置,删除个数,新增的值)

var c=[1,2,3,4,5]
c.splice(1,2,'abc')
console.log(c)  // (4) [1, 'abc', 4, 5]

map

map(函数,对象执行回调时使用)

var arr = [11,22,33,44];
arr.map(function(value,index,arr){return value + 1});
// (4) [12, 23, 34, 45]

自定义对象

自定义对象相当于python中的字典。

定义方式:

// Object创建对象
let man = new Object(); //相当于生成了空字典
man.name = 'jason'; //相当于给字典添加键值对
man.age = 18;


// 字面量创建对象
let man = {
    name : 'jason',
    age:18
};
// 取值操作:直接通过句点符
d1.name  // jason
d1.age  //18

运算符

算术运算符

符号:+  -  *  /  %  ++  --
var x=10;
var res1=x++;  '先赋值后自增1'
var res2=++x;  '先自增1后赋值'
res1;
10
res2;
12

比较运算符

符号:>  >=  <  <=  !=  ==  ===  !==
1 == "1"  // true  弱等于:自动转换成相同的类型
1 === "1"  // false 强等于:不转换类型
'弱等于,js会自动转换成相同数据类型比较值是否一样'

逻辑运算符

符号: &&  ||  !
a = true && false  // false 
b = true || false  // true
c = 1 != 2  // true

&&  等价于python中的and
||  等价于python中的or
!   等价于python中的not

赋值运算符

符号:=  +=  -=  *=  /=

流程控制

if判断

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


var day = new Date().getDay();
switch (day) {
  case 0:
    console.log("Sunday");
    break;
  case 1:
    console.log("Monday");
    break;
  default:
    console.log("...")
}

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("无所事事!!!")
}

while循环

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

for循环

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

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

l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
for(let i=0;i<l1.length;i++){
    console.log(l1[i])
}

三元运算符

var c = a > b ? a : b
// 这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;

案例:

var a=10
var b=20
var c = a>b?a:b
c  // 20

PS:三元运算一般情况下都不推荐嵌套使用!

函数

函数的定义

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

1.function定义函数的关键字,相当于python中的def

2.函数名的命名参考变量名并且JS推荐使用驼峰体命名

3.参数可写可不写

4.return返回值

函数调用:函数名加括号,有参则传参即可。

无参函数

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

有参函数

//参数的个数不需要一一对应

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

JS中的函数提供了有个内置关键字arguments:接收所有参数。

function func(a, b){
    if(arguments.length===2){  //这里arguments作用限制了参数个数
       console.log(a, b) 
    }else{
       console.log('去你妹的 参数都没给我!!!')
    }
}

返回值参数

return不支持返回多个数据。

function a(){
    return 1,2,5
    }
a()  // 5 返回多个数据的时候只会返回最后一个数据
 function c(){
    return [11,22,33,44]
}
c()  // [11,22,33,44] 一个存储多个数据的列表之类的数据集是可以的

匿名函数

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

闭包函数

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

函数的全局变量和局部变量

局部变量

在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

全局变量:

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

变量生存周期:

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。与python作用域关系查找一模一样!

JS内置对象

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

Date日期对象

var d1 = new Date()  // 创建一个Date对象
d1.toLocaleString()	      //'2022/8/25 21:16:38'
d1.toLocaleDateString()	  //'2022/8/25'
d1.toLocaleTimeString()	  //'21:16:38'

Date对象的方法

方法 说明
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(){
    let d1 = new Date();
    let year = d1.getFullYear();
    let month = d1.getMonth() + 1; // 注意月份是0~11
    let day = d1.getDate();
    let hour = d1.getHours();
    let minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes(); // 三元运算
    let week = WEEKMAP[d1.getDay()];  //星期是从0~6

    let strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
}

showTime()

JSON序列化对象

回顾python序列化
    import json
    json.dumps() # 对象转换成JSON字符串
    son.loads() # JSON字符串转换成对象
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象---反序列化
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串---序列化
var str = JSON.stringify(obj1);

RegExp正则对象

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

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

使用正则校验数据

var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
reg2.test('tom123') // true
reg2.test()  // true 括号内什么都不写 就相当于写了undefined
reg2.test('123a')  // false

全局匹配

在正则表达式的最后加一个字母g(global)。在设置了参数global的情况下,每次执行test()方法之后,lastIndex值将会改变,下一次执行test()时,将会从lastIndex指定的索引处开始匹配。只有匹配失败时,lastIndex会重新设为0。当然,可以手动设置lastIndex的值。

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

Math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数(底为e)。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

JS的BOM与DOM操作

BOM:浏览器对象模型
    通过js代码可以跟浏览器交互
DOM:文档对象模型
    通过js代码可以跟html交互

BOM操作

打开子页面

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

关闭页面

window.close()
window.navigator.appName  // Web浏览器全称
window.navigator.appVersion  // Web浏览器厂商和版本的详细字符串
window.navigator.userAgent  // 客户端绝大部分信息
window.navigator.platform   // 浏览器运行所在的操作系统

history对象

window.history 对象包含浏览器的历史。浏览历史对象,包含了用户对当前页面的浏览历史,但我们无法查看具体的地址,可以简单的用来前进或后退一个页面。

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

location对象

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

window.location.href  // 获取页面的url地址
window.location.reload()  // 刷新页面
window.location.href = url  // 跳转到指定页面
"""window可以省略不写"""

弹框系列

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

警告框---alert

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

alert("你看到了吗?")

确认框---confirm

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

confirm("你确定吗?")

提示框---prompt

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

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

计时器

通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

计时器的使用

// 单次定时
let t = setTimeout(showMsg,9000)  // 9秒钟之后自动执行showMsg
clearTimeout(t)  // 取消定时器

// 循环定时
let s = setInterval(showMsg,3000)  // 每隔3秒执行一次
clearInterval(showMsg,9000)  // 9秒后循环了3次结束计时器

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 上一个兄弟标签元素

PS:由于DOM是操作页面上的HTML代码,但是HTML页面加载顺序是从上往下,
所以如果想要我们的代码能够正常执行,必须要先等待html页面加载完毕。
措施:将script标签写在body内最下方

节点操作

我们在DOM操作标签的时候在起变量名的时候如果该变量指向的是一个标签,那么建议使用xxxEle,eg:aEle\pEle\divEle\spanEle。

动态创建一个标签并添加到页面指定位置

let xxxEle = document.createElement('标签名') //创建一个标签
xxxEle.id = 'id值'  //给标签添加id值
xxxEle.innerText = '内部文本'  //设置文本内容
divEle.append(xxxEle)  //div标签内部追加标签

ps:动态创建  临时有效  非永久

标签属性

1.默认属性

比如id,class等,设置的时候可以直接通过点的方式

divEle.id = 'd1'
divEle.class = 'c1'

2.自定义属性

比如username,password等,设置的时候需要使用setAttribute,它也包括默认属性

divEle.setAttribute('username','jason')

3.其他

divEle.getAttribute("age")  //获取指定属性
divEle.removeAttribute("age")  //移除指定属性

innerText与innerHTML

方法 取值的时候 设置值的时候
innerText 只会获取文本内容 不识别标签语法
innerHTML 获取文本内容和标签 识别标签语法
posted @   空白o  阅读(32)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示