前端---JS续篇

目录

• 运算符
  • 算术运算符
  • 比较运算符
  • 逻辑运算符
• 流程控制
  • if判断
  • switch语法
  • while循环
  • for循环
• 三元运算符
• 函数
  • 函数的定义
  • 无参函数
  • 有参函数
  • 返回值参数
  • 匿名函数
  • 箭头函数(drf中vue框架会再次接触)
  • 函数的全局变量和局部变量
• 自定义对象
• 内置对象之Date对象
• JSON对象
• 正则对象
  • 创建正则表达式的两种方式
  • 使用正则校验数据
  • 全局匹配
• BOM操作(了解)
  • 打开子页面
  • 关闭页面
  • navigator对象
  • history对象
  • location对象
  • 弹框系列
  • 计时器
• DOM操作前戏
  • 直接查找
  • 间接查找

运算符

---

算术运算符

符号：+ - * / % ++ --
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

流程控制

---

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语法

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循环打印出数组内所有的元素

var l1 = [11, 22, 33, 44, 55]
for(var 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 函数名(参数1,参数2){
    函数体代码
    return 返回值
  }

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

2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)

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 f2(){
    console.log(arguments)
    if (arguments.length === 0){
      console.log('什么参数都没传')
    }else if(arguments.length === 1){
      console.log('传了一个参数')
    }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;  

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

局部变量：

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

全局变量：

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

变量生存周期：

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

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

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

作用域

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

自定义对象

---

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

var d1 = {'name':'jason','age':18}
// 取值操作：直接通过句点符
d1.name  // jason
d1.age  //18 
// 循环取值
for(var i in d1){
    console.log(d1[i])
  }

自定义对象的标准格式

var person=new Object(); // var d2 = new Object()  # 相当于生成了空字典
person.name="Alex";  // 相当于给字典添加键值对
person.age=18;
person  // {name: 'Alex', age: 18}

内置对象之Date对象

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

var d1 = new Date()  // 创建一个Date对象
d1.toLocaleString()			'2022/4/28 22:16:38'
d1.toLocaleDateString()	'2022/4/28'
d1.toLocaleTimeString()	'22: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() {
    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对象

---

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

正则对象

---

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

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

BOM操作(了解)

---

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

打开子页面

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

关闭页面

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，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

计时器的使用

// 单次定时
var t = setTimeout(showMsg,9000)  // 9秒钟之后自动执行showMsg
clearTimeout(t)  // 取消定时器
// 循环定时
var s = setInterval(showMsg,3000)  // 每隔3秒执行一次
clearInterval(showMsg,1200)  // 12秒后循环了4次结束计时器

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内最下方