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

JavaScript数据类型之布尔值

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

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

null和undefined的区别：

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

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

JavaScript数据类型之对象

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

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

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

常见的方法：

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

举例说明(部分)：

以l1为举例数据

.length

l1.length  # 6

.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]

.splice()

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

map()

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

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

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

数据类型查询：

关键字是：typeof

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

typeof '加油'  # string
typeof 123  # number

运算符

算数运算符

符号	作用
+	加
-	减
*	乘
/	除
%	取模，余数
++	自增
–	自减

关于++举例说明：

var x = 10
var res = x++  # 10
var res1 = ++x  # 12

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

比较运算符

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

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

注意：

在JavaScript中

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

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

逻辑运算符

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

    JavaScript      Python 
       &&            and
       ||             or
       !              not

赋值运算符

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

流程控制

if判断

单if

结构：

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

if-else

结构：

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

举例说明：

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

if-else if-else

结构：

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

举例说明：

var a = 10
if (a > 5){
	console.log('大于5')
}else if(a < 5){
	console.log('小于5')
}else {
	console.log('等于5')
}

swith语法

var a = 1
switch (a){
    case 0:
    console.log('是0');
    break;
    case 1:
    console.log('是1');
    break;
default:
    console.log('大于1')
}
// 是1

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

for循环

结构：

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

举例说明：

循环打印数组内的数据值

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

while循环

结构：

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

举例说明：

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

三元运算

• python中的三元运算

  res = 11 if 1 < 2 else 22
  

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

• JavaScript中的三元运算

  res = 1 < 2 ? 11 : 22
  

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

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

JavaScript—函数

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

结构：

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

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

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

无参函数

function func(){
	console.log('加油')
}
func()

有参函数

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

强调：参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字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)  # 你传参数传多了

匿名函数

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

箭头函数

结构：

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

举例说明：

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

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

局部变量：

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

全局变量：

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

变量生存周期：

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

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

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

作用域：

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

JavaScript—内置对象

自定义对象

类似于python中的字典

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

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

取值操作:

for (var i in dict){
	console.log(dict[i])
}
// jason
// 18

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

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

内置对象

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

固定语法：

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

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());  //毫秒并不直接显示

Date对象的方法

方法名	用法
getDate()	获取日
getDay ()	获取星期
getMonth ()	获取月（0-11）
getFullYear ()	获取完整年份
getYear ()	获取年
getHours ()	获取小时
getMinutes ()	获取分钟
getSeconds ()	获取秒
getMilliseconds ()	获取毫秒
getTime ()	返回累计毫秒数(从1970/1/1午夜)，时间戳

Json对象

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

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

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

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

正则对象

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

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]$/;

使用正则：

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

注意：

如果我们在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

原理：第一次匹配的时候，匹配结束会停在匹配后的位置，如果后面没有值则是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
   

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')
    

  • 关闭页面

    window.close()
    

  • 浏览器窗口的内部高度

    window.innerHeight()
    

  • 浏览器窗口的内部宽度

    window.innerWigth()
    

window的子对象

navigator对象

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

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

history对象

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

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

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

location对象

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

常用的属性和方法：

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

弹出框

警告框

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

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

语法结构：

alter('警告的内容')

确认框

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

语法结构：

comfirm('确认的内容')

提示框

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

语法结构：

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

计时相关

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

• 单词定时

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

• 循环定时

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

综合用法举例：

<script>
      var t = null  //可以看作是全局变量，提供给局部使用
      function func2() {
          function func1(){
              alert('你好吗？')
          }
          t = setInterval(func1, 3000)
       }
       function func3() {
           clearInterval(t)
       }
       setTimeout(func3, 10000)
       func2()
</script>

• 补充说明
  由于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')  # 标签对象本身

通过class值查找标签

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

通过标签名直接查找标签

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

间接查找

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

节点操作

创建节点

基本语法：createElement(标签名)

举例说明：

var aEle = document.createElement('a')

添加属性

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

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

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

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

  divEle.id = 'd1'
  

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

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

总结：

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

innerText与innerHTML区别

• 获取值的时候

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

• 设置值的时候

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