day42（BOM与DOM操作）

今日内容详细

# 昨日内容回顾

* overflow属性

  ```python
  # overflow:hidden\auto;
   
  # 实际用法
  	头像制作
    	overflow:hidden
      width:100%
  ```

* z-index属性

  ```python
  # 前端界面其实都可以看成是三维坐标系
  
  # 实际用法
  	模态框
    	eg:点击按钮弹出界面(分层)
  ```

* 练习题讲解

  ```python
  # 无序列表
  	list-style-type:none;
    padding-left:0;
  # 阴影渲染
  	box-shadow
  ```

* JavaScript简介

  ```python
  """
  JavaScript简称JS 也是一门编程语言 
  并且基于node.js还可以跑在后端服务器上
  """
  1.注释语法
  	// 单行
    /* 多行 */
  2.结束符号
  	;  # 很多时候不写也没事
  3.版本
  	ECMA 5.X
    ECMA 6.X
  ```

* 变量与常量

  ```python
  1.申明变量需要使用关键字
  	var、let
  2.申明常量需要使用关键字
  	const
  ```

* 数据类型

  ```python
  1.数值类型:Number
    NaN:属于数字类型 意思是不是一个数字(Not A Number)
  2.字符类型:string
    单引号 双引号 小顿号
    '''对比学习 无需死记硬背'''
  3.布尔类型:boolean
    true\false
  4.null与undefined
  	null表示清空 undefined表示没有定义
  5.对象之数组
  	相当于python中的列表
  ```

今日内容详细

# 1.算术运算符
var x=10;
var res1=x++;  '先赋值后自增1'
var res2=++x;  '先自增1后赋值'
# 3.逻辑运算符
	python中使用 and、or、not
  js中使用&&、||、!

2.比较运算符

  弱等于:自动转换类型
  '5' == 5  '结果是true js会自动转换成相同数据类型比较值是否一样'
  强等于:不转换类型
  '5' === 5  '结果是false'
比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。

使用 == 来做相等运算
当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较
使用 != 来做不相等运算
不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
使用 === 来做全等运算
用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false
使用 !== 来做不全等运算
用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

逻辑运算

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
||	or	(x5 || y5) 为 false
!	ad	!(x==y) 为 true

关于逻辑运算符我们可以具体探讨一下：

&& 与：&&可以对符号两侧的值进行与运算并返回结果，运算规则如下：
两个值中只要有一个值为false，就返回false，只有两个值都为true时，才会返回true
JS中的“与”属于短路的与，如果第一个值为false，则不会检查第二个值
非布尔值时：如果两个都为true，则返回第二个值，如果两个值中有false，则返回靠前的false的值
|| 或：||可以对符号两侧的值进行或运算并返回结果，运算规则如下：
两个值中只要有一个true，就返回true，只有两个值都为false，才会返回false
JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
非布尔值时：如果两个都为false ，则返回第二个值，如果两个值中有true，则返回靠前的true的值
! 非：!可以用来对一个值进行非运算，所谓非运算就是对一个布尔值进行取反操作，true变false，false变true，运算规则如下：
如果对一个值进行两次取反，它不会变化
非布尔值时：先会将其转换为布尔值，然后再取反，所以我们可以利用该特点，来将一个其它的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样

流程控制

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

if…else

if…else
第一种形式：
if(expression)
    statement
var age = 16;
if (age < 18) {
    console.log("未成年");
}
第二种形式：

if(expression)
    statement
else
    statement
var age = 16;
if (age < 18) {
    console.log("未成年");
} else {
    console.log("已成年");


第三种形式：

if(expression1)
    statement
else if(expression2)
    statement
else
    statement    
var age = 18;
if (age < 18) {
    console.log("小于18岁了");
} else if (age == 18) {
    console.log("已经18岁了");
} else {
    console.log("大于18岁了")

switch…case
switch…case是另一种流程控制语句。
switch语句更适用于多条分支使用同一条语句的情况。
注意：需要注意的是一旦符合case的条件程序会一直运行到结束，所以我们一般会在case中添加break作为语句的结束。

根据today的数值，输出今天是星期几。

var today = 1;
switch (today) {
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    case 4:
        console.log("星期四");
        break;
    case 5:
        console.log("星期五");
        break;
    case 6:
        console.log("星期六");
        break;
    case 7:
        console.log("星期日");
        break;
    default:   # 没有对应条件统一执行default子代码
        console.log("输入错误");

while循环和for循环

# 2.while循环
	while(循环条件){
    循环体代码
  }
案例演示：输出1-10。
  var i = 1;
while (i <= 10) {
    console.log(i);
    i++;
}


# 3.for循环
	for(初始值;循环条件;每次循环之后的操作){
    循环体代码
  }
  循环打印0到9的数字
    for (var i=0;i<10;i++) {
      console.log(i);
    }
    输出1-10
    for (var i = 1; i <= 10; i++) {
    console.log(i);
}

break：结束最近的一次循环，可以在循环和switch语句中使用。
continue：结束本次循环，执行下一次循环，只能在循环中使用。

三元运算符

python中的三元运算
	res = 11 if 1 > 2 else 22
  '''if后面的条件成立则使用if前面的值 不成立则使用else后面的值'''
js中的三元运算
	res = 1 > 2 ? 11 : 22
 	'''问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
# 三元运算一般情况下都不推荐嵌套使用!

函数

通常情况下，JavaScript代码是自上而下执行的，不过函数体内部的代码则不是这样。如果只是对函数进行了声明，其中的代码并不会执行，只有在调用函数时才会执行函数体内部的代码。
做一个了解

函数的定义：
关键字是function 相当于python的def
js 命名函数名 推荐使用驼峰体
function 函数名（参数1，参数2）{
    函数体代码
    return返回值
}
无参函数
	function f1(){console.log(111)}
  f1()
# 2.有参函数
	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('传了多个参数')
    }
  }
# 3.返回值参数
	return不支持返回多个数据
# 4.匿名函数
匿名函数：没有名字的函数就是匿名函数，它可以让一个变量来接收，也就是用 “函数表达式” 方式创建和接收。

案例演示：
var fun = function () {
    alert("我是一个匿名函数");
}

fun();

# 5.箭头函数(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一致)

自定义对象

js里的自定义对象相当于字典
var d1 = {'name':'jason','age':18}
python字典取值操作js中的自定义对象都有 并且自定义对象还可以直接通过句点符取值 更像一个对象
取值操作
	d1.name  # jason
循环取值
	for(var i in d1){
    console.log(d1[i])
  }
 
定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d2 = new Object()  # 相当于生成了空字典

"""自行查阅往期笔记 实现字典句点符取值"""

// 使用工厂模式创建对象
function createPerson(name, age) {
    // 创建新的对象
    var obj = new Object();
    // 设置对象属性
    obj.name = name;
    obj.age = age;
    // 设置对象方法
    obj.sayName = function () {
        console.log(this.name);
    };
    //返回新的对象
    return obj;
}

for (var i = 1; i <= 1000; i++) {
    var person = createPerson("person" + i, 18);
    console.log(typeof person);
}

内置对象、

var date = new Date();
console.log(date);

console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)
# 1.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午夜)

JSON对象

正则对象

匹配模式：

# 创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  # 推荐使用(简化)

匹配模式：

i：忽略大小写
g：全局匹配模式
m：执行多行匹配
注意：可以为一个正则表达式设置多个匹配模式，且顺序无所谓
# 使用正则
reg2.test('jason123')   true
'''括号内什么都不写 就相当于写了undefined'''
reg2.test() 						true
"""
验证
var reg3 = /undefined/
reg3.test('jason666')		false
reg3.test('undefined')	true
reg3.test()							true
"""

BOM

浏览器对象模型（BOM）使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。

浏览器对象模型（BOM）可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作，常见的BOM对象如下：

Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。
Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”

注意：window.XXX() 方法可以不带 window 前缀来写。
警告框
如果要确保信息传递给用户，通常会使用警告框。当警告框弹出时，用户将需要单击“确定”来继续。
语法
window.alert("sometext");
注意：window.alert() 方法可以不带 window 前缀来写。
实例
alert("我是一个警告框！");
确认框
如果您希望用户验证或接受某个东西，则通常使用“确认”框。

当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。

如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
语法
window.confirm("sometext");

var r = confirm("请按按钮");
if (r == true) {
    x = "您按了确认！";
} else {
    x = "您按了取消！";
}
提示框
如果您希望用户在进入页面前输入值，通常会使用提示框。
当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。
语法
window.prompt("sometext","defaultText");
实例
var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    console.log(person);
}
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  # 跳转到指定页面
"""window可以省略不写"""

# 弹框系列
	alert("你看到了吗？")  							 警告
  confirm('要不要敲老赵的天灵盖')				确认
  	获取用户是点击取消还是确认 返回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操作

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。