Day50——JavaScript，函数与面向对象，BOM和DOM

JavaScript数据类型之布尔值

在python中布尔值的关键字是bool，但是在jJavaScript中布尔值的关键字是boolean

python(布尔值首字母是需要大小写的)
	True,False
	布尔值为False的值为：none,0,'',[],{}...
JavaScript(布尔值全是小写)
	true,false
	布尔值为false的值是：null,0,'',undefined,NaN
1
2
3
4
5
6

null和undefined的区别：

• null表示值是空，一般在需要指定或者清空一个变量的时候才会使用，但是这个变量还是存在的，eg：name = null
• undefined表示当声明一个变量但未初始化时，该变量默认值是undefined；还有就是函数无明确的返回值的时候，返回的也是undefined

null表示值为空，undefined表示的是根本就没定义过

JavaScript数据类型之对象

相当于是python中的列表，字典，对象
1

数组(相当于是python中的列表)

Array()  # []
var l1 = [1, 2, 3, 4, 5, 6]
1
2

常见的方法：

举例说明(部分)：

以l1为举例数据

.length

l1.length  # 6
1

.forEach

forEach 是操作数组的一种方法，主要功能是遍历数组，其实说穿了，就是 for 循环的加强版，该语句需要一个回调函数，作为参数。回调函数的形参，依次为，value：遍历的数组内容；index：对应的数组索引，array：数组本身。

l1.forEach(function(value, index, arr){
	console.log(value, index, arr)
})
1 0 (6) [1, 2, 3, 4, 5, 6]
2 1 (6) [1, 2, 3, 4, 5, 6]
3 2 (6) [1, 2, 3, 4, 5, 6]
4 3 (6) [1, 2, 3, 4, 5, 6]
5 4 (6) [1, 2, 3, 4, 5, 6]
6 5 (6) [1, 2, 3, 4, 5, 6]
1
2
3
4
5
6
7
8
9

.splice()

l1.splice(2, 1)  # 2表示的是开始的索引值，1代表从开始删除多少位数
l1.splice(2, 1, 'haha')  # 第三个参数表示的是将这个值代替删除数据的位置
1
2

map()

python中也有这个函数，是映射的作用

l1.map(function(value){
	return value + 1;
})  # 返回时每个数据都加一
1
2
3

JavaScript设置for循环次数：

var a = [1, 2, 3, 4, 5, 6]
for (var i=0;i<a.length;i++){
	console.log(i)
}
0
1
2
3
1
2
3
4
5
6
7
8

数据类型查询：

关键字是：typeof

强调：typeof是一个一元运算符（就像++，–，！，- 等一元运算符），不是一个函数，也不是一个语句。

typeof '加油'  # string
typeof 123  # number
1
2

运算符

算数运算符

关于++举例说明：

var x = 10
var res = x++  # 10
var res1 = ++x  # 12
1
2
3

注意：当++在变量后面的时候，右边是先绑定变量值后再自增1，所以res还是10；当++在变量前面的时候，右边的变量是先自增然后再将值赋值，所以res1是12

比较运算符

>  >=  <  <=  !=  ==  ===  !==
1

这里与python不太一样的是===, !==

注意：

在JavaScript中

1 == '1'  # true 这是弱等于，跟python里面的结果不一样
1 === '1'  # false 这是强等于，强制不让做任何的处理
1
2

• 上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
• 数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误

逻辑运算符

与python中的逻辑运算符做对比

    JavaScript      Python 
       &&            and
       ||             or
       !              not
1
2
3
4

赋值运算符

=(等于)  +=(加等于)  -=(减等于)  *=(乘等于)  /=(除等于)
1

流程控制

if判断

单if

结构：

if (条件){
	满足条件执行的代码
}
1
2
3

if-else

结构：

if (条件1){
	满足条件1执行的代码
}else {
	不满足条件1执行的代码
}
1
2
3
4
5

举例说明：

var a = 10
if (a>5){
	console.log('大于5');
}else {
	console.log('小于5')
}
1
2
3
4
5
6

if-else if-else

结构：

if (条件1){
	满足条件1执行的代码
}else if(条件2){
	满足条件2执行的代码
}else {
	条件1和条件2都不满足时执行的代码
}
1
2
3
4
5
6
7

举例说明：

var a = 10
if (a > 5){
	console.log('大于5')
}else if(a < 5){
	console.log('小于5')
}else {
	console.log('等于5')
}
1
2
3
4
5
6
7
8

swith语法

var a = 1
switch (a){
    case 0:
    console.log('是0');
    break;
    case 1:
    console.log('是1');
    break;
default:
    console.log('大于1')
}
// 是1
1
2
3
4
5
6
7
8
9
10
11
12

强调：如果不写break的话，程序会继续执行后续case中的语句。

for循环

结构：

for (初始值，循环条件，循环后需要执行的代码){
	循环体代码
}
1
2
3

举例说明：

循环打印数组内的数据值

var l1 = [1, 2, 3, 4, 5, 6]
for (var i=0;i<l1.length;i++){
	console.log(l1[i])
}
1
2
3
4

while循环

结构：

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

举例说明：

var a = 0
while (a < 5){
    console.log(a);
    a++
}
1
2
3
4
5

三元运算

• python中的三元运算

  res = 11 if 1 < 2 else 22
  1

  if后面的条件如果成立，res则使用if前面的值，如果不成立，则使用else后面的值

• JavaScript中的三元运算

  res = 1 < 2 ? 11 : 22
  1

  如果问好前面的条件成立的话，res则使用冒号前面的数据值；如果条件不成立则使用冒号后面的数据值

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

JavaScript—函数

JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。

结构：

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

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

函数调用：函数名加括号调用，需要参数传参即可

无参函数

function func(){
	console.log('加油')
}
func()
1
2
3
4

有参函数

function func(a, b){
	console.log(a, b)
}
func()  # 可以调用 undefined undefined
func(1)  # 可以调用 1 undefined
func(1, 2)  # 可以调用 1 2
func(1, 2, 3, 4, 5, 6)  # 可以调用 1 2
1
2
3
4
5
6
7

强调：参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments

代码实现：

function func(a, b){
	if (arguments.length < 2){
		console.log('你传的参数不够')
	}else if(arguments.length > 2){
		console.log('你传参数传多了')
	}else {
		console.log('刚刚好两个参数')
	}
}
func()  # 你传的参数不够
func(1)  # 你传的参数不够
func(1, 2)  # 刚刚好两个参数
func(1, 2, 3, 4, 5, 6)  # 你传参数传多了
1
2
3
4
5
6
7
8
9
10
11
12
13

匿名函数

var l1 = function(a, b){
	return a + b
}
l1(1, 2)  # 3
1
2
3
4

箭头函数

结构：

var f = v => v;
// 等同于
var f = function(v){
  return v;
}
1
2
3
4
5

举例说明：

var f = () => 5;
// 等同于
var f = function(){
	return 5
	};

var a = (b, c) => b + c
a(1, 2)  # 3

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

局部变量：

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

全局变量：

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

变量生存周期：

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

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

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

作用域：

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

JavaScript—内置对象

自定义对象

类似于python中的字典

var dict = {'name': 'jason', 'age': 18}
1

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

取值操作:

for (var i in dict){
	console.log(dict[i])
}
// jason
// 18
1
2
3
4
5

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

var 变量名 = new object()  # 相当于是产生了一个空字典
1

内置对象

类似于python中的内置函数或者内置模块

固定语法：

var 变量名 = new 内置对象名();
1

Date对象

创建Date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Date对象的方法

Json对象

• python中如何序列化与反序列化

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

• JavaScript中如何序列化与反序列化

  json.stringify()  # 序列化
  json.parse()  # 反序列化
  1
  2

正则对象

定义正则表达式的两种方式

1. var res1 = new RegExg("^[a-zA-Z][a-zA-Z0-9][5,11]");
2. var res2 = /^[a-zA-Z][a-zA-Z0-9][5,9]$/;
1
2

使用正则：

res1.test('jason666')
res2.test('jason666')
1
2

注意：

如果我们在test后面的括号中什么都不写的话，实际上是有一个undefined的

全局匹配
在正则表达式的最后面加一个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
1
2
3
4
5

原理：第一次匹配的时候，匹配结束会停在匹配后的位置，如果后面没有值则是false，然后又回到开头

JavaScript—BOM与DOM操作

BOM操作

认识BOM

JS是由ECMAScript（ECMA）、DOM（W3C）和BOM（无规范）。BOM(Browser Object Model：浏览器对象模型)，提供了独立于内容而与浏览器进行交互的对象，用它来实现窗口与窗口之间的通信。BOM的核心对象是window。

1. BOM组成

    window - frames
    window - history 
    window - location 
    window - navigator 
    window - screen
   1
   2
   3
   4
   5

2. BOM与DOM的区别

   （1）DOM通过脚本动态地访问和更新文档内容、结构和样式的接口。

   （2）BOM通过脚本操作浏览器的各个功能组件的接口。

   （3）DOM提供了处理网页内容的接口，而BOM提供了与浏览器交互的接口；

   （4）DOM的核心是document，BOM的核心是window。

3. window对象

   打开一个浏览器，就自动创建了一个window对象。window就是浏览器打开的窗口。

BOM操作常用属性

• 一些常用的window方法

  • 打开页面

    window.open('https://www.baidu.com/', '', 'wight:20px,height:20px')
    1

  • 关闭页面

    window.close()
    1

  • 浏览器窗口的内部高度

    window.innerHeight()
    1

  • 浏览器窗口的内部宽度

    window.innerWigth()
    1

window的子对象

navigator对象

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

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

history对象

window.history 对象包含浏览器的历史。

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

histroy.forword()  # 前进一页
histroy.back()  # 后退一页
1
2

location对象

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

常用的属性和方法：

location.herf  # 获取URL
location.herf = 'url'  # 跳转到指定页面
location.reload()  # 重新加载页面
1
2
3

弹出框

警告框

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

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

语法结构：

alter('警告的内容')
1

确认框

确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

语法结构：

comfirm('确认的内容')
1

提示框

提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法结构：

prompt("输入内容","你的答案")
1

计时相关

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

• 单词定时

  var t = setTimeout(func, 9000)  # 这里func是函数名，9000是定时时间，1000就是一秒;9秒钟之后执行func函数
  clearTimeout(t)  # 取消定时
  1
  2

• 循环定时

  var t = setInterval(func, 9000)  # 每隔9秒执行一次func函数
  clearInterval(t)  # 取消循环定时
  1
  2

综合用法举例：

<script>
      var t = null  //可以看作是全局变量，提供给局部使用
      function func2() {
          function func1(){
              alert('你好吗？')
          }
          t = setInterval(func1, 3000)
       }
       function func3() {
           clearInterval(t)
       }
       setTimeout(func3, 10000)
       func2()
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 补充说明
  由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
  所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕

• 解决的措施之一(最简单的):
  将script标签写在body内最下方

DOM操作

认识DOM

文档对象模型（Document Object Model），是 W3C 组织推荐的处理可拓展标记语言（HTML或者XML）的编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些接口可以改变网页的内容、结构和样式。

DOM树

解析：

• 文档：一个页面就是一个文档，DOM 中使用 document 表示
• 元素：页面中的所有标签都是元素，DOM中使用 element 表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

查找方法

直接查找

通过id值查找标签

document.getElementById('d1')  # 标签对象本身
1

通过class值查找标签

document.getElementsByClassName('c1')  # 数组套标签对象
1

通过标签名直接查找标签

document.getElementsByTagName('div')  # 数组套标签对象
1

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素
1
2
3
4
5
6

节点操作

创建节点

基本语法：createElement(标签名)

举例说明：

var aEle = document.createElement('a')
1

添加属性

aEle.href = '地址'  # 添加href属性
aEle.innerText = '文本'  # 添加文本
var divEle = document.getElementById('d1')  # 查找标签
divEle.append(aEle)  # 在divEle的标签下追加一个标签
1
2
3
4

注意：这样追加的结果只是临时的，不是永久的

如果一个标签会经常用的话，我们可以将它的查找结果用一个变量来代替

• 标签默认属性设置
  比如 id、class等 设置的时候可以直接通过点的方式

  divEle.id = 'd1'
  1

• 标签自定义属性设置
  比如 username password 等 设置的时候需要使用setAttribute

  divEle.setAttribute('name', 'jason')
  1

总结：

setAttribute()既可以设置自定义属性也可以设置默认属性
所以一般情况下都是使用setAttribute()去设置所有属性

innerText与innerHTML区别

• 获取值的时候

  innerText只会获取文本内容
  innerHTML获取文本和标签

• 设置值的时候

  innerText不识别标签语法
  innerHTML识别标签语法