前端学习笔记
今日内容概要
- 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{
条件1和2都不成立执行的分支代码块
}
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()
navigator对象
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 | 获取文本内容和标签 | 识别标签语法 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库