今日内容JS基本数据类型，流程控制，函数与面向对象 JS的BOM与DOM操作

• JS基本数据类型

一.布尔值

与python的区别：

JS都是小写
var a = true;
var b = false;

JS中：
false:(空字符串)、0、null、undefined、NaN

python中：
    False:0 None '' [] {} ...

null与undefined的区别
    null可以理解为曾经拥有过 现在暂时空了
    undefined可以理解为从来没拥有过

null和undefined

1.null表示值是空，一般在需要指定或清空一个变量时才会使用，如name=null

2.undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数五明确的返回值时，返回的也是undefined。

二.对象

在JS中‘一切皆对象’，而且JS允许自定义对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型

三.数组

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法：

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

 

//准备一个数组
var d1 = [11,22,33,44,55,66]

//1.数组的大小 .length
d1.length
6

//2.尾部追加元素 .push()
d1.push(77);
[11,22,33,44,55,66,77]

//3.获取尾部元素 .pop()
d1.pop();
77

//4.头部增加元素 .unshift（）
d1.unshift(12);
[12,11,22,33,44,55,66]

//5.头部移除元素 .shift()
d1.shift();
12

d1
[11,22,33,44,55,66]

// 6.切片 .slice()
d1.slice(0,3);
[11,22,33]

// 7.反转 .reverse()
d1.reverse();
[66,55,44,33,22,11]

// 8. 拼接字符串 .join()  与python相反
d1.join('@');   // 以@作为分隔符拼接
'66@55@44@33@22@11'

// 9.连接数组 .concat(相当于python中的extend)
d1.concat([10,,20,30]);
[66,55,44,33,22,11,10,20,30]  // 连接需要有一个变量接收不修改原数组的元素

// 10.排序 .sort()
d1.sort();
[11,22,33,44,55,66]

.forEach()

11、将数组的每个元素传递给回调函数.forEach()
 /*语法：forEach(function(currentValue, index, arr), thisValue)  
currentValue: 必选。当前元素   index：可选。当前元素的索引值 
arr：可选。当前元素所属的数组对象   thisValue： 可选。递给函数的值一般用 "this" 值若为空  "undefined" 会传给“this”值
*/

var d2 = [10,20,30,40,50,60];   //  定义一个新的数组
格式：d2.forEach(function(形参){函数体代码},d2);    
 
一个参数：d2.forEach(function(value){console.log(value)},d2);  // console.log相当于python中的print 打印
          10
          20
          30
          40
          50
          60
// 解释：将d2数组的元素循环交给function函数的参数让function函数代码块做处理
 
 
两个参数：d2.forEach(function(value,index){console.log(value,index)},d2);
            10 0
            20 1
            30 2
            40 3
            50 4
            60 5
// 第一个参数打印的是元素值，第二个参数打印的是索引值
 
三个参数：d2.forEach(function(value,index,arr){console.log(value,index,arr)},d2);
            10 0 (6) [10, 20, 30, 40, 50, 60]
            20 1 (6) [10, 20, 30, 40, 50, 60]
            30 2 (6) [10, 20, 30, 40, 50, 60]
            40 3 (6) [10, 20, 30, 40, 50, 60]
            50 4 (6) [10, 20, 30, 40, 50, 60]
            60 5 (6) [10, 20, 30, 40, 50, 60]
// 第一个参数返回的是元素值，第二个参数返回的是索引值，第三个是元素所在的元组。

.splice()

12、删除元素，并向数组添加新元素.splice()
语法：splice(index,howmany,item1,.....,itemX)
/*index: 必需。规定从何处添加/删除元素  howmany:必需。规定应该删除多少元素可以是 "0"。item1, ..., itemX: 可选。要添加到数组的新元素*/

两个参数情况：删除指定范围的元素(同样遵循顾头不顾尾)
d1.splice(0,3);
(3) [11, 22, 33]    // 删除前三位
d1
(3) [44, 55, 66]    // 剩下后三位    
 
 
三个参数情况：删除指定范围元素并添加新元素
d1.splice(0,1,77);   //  删除第一位
[44]
d1
(3) [77, 55, 66]    //   删除第一位44并在这个位置添加了77

.map()

13、返回一个数组元素调用函数处理后的值的新数组.map() 
语法：map(function(currentValue,index,arr), thisValue) 
// map 和 forEach相仿
 
d2.map(function(value,index,arr){return value + 1},d2);  
(6) [11, 21, 31, 41, 51, 61]

四.自定义对象

1.自定义对象(相当于python中的字典)
自定义对象操作数据值的方式更加简单 直接使用句点符取值
定义方式1:
let t1 = {'name':'jason','pwd':123}
typeof t1;
'object'
t1.name; // 用句点符取值
'jason'

定义方式2:使用关键字：new
let d2 = new Object()   //   创造出空字典
d2.name = 'jason';   // 添加键值对
d2.age = 18;
d2   // 查看自定义对象
{name: 'jason'，age:18}

• 运算符及流程控制

一. 算数运算符

+ - * / % ++ --

var x=10;
var res1=x++;  先赋值后自增
var res2=++x;  先自增后赋值

二.比较运算符

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

1 == “1”  // true  弱等于
1 === "1"  // false 强等于

三,逻辑运算符

&& || !

&&    等价于python中的and
||  等价于python中的or
!    等价于python中的not

四.辅助运算符

= += -= *= /=

五.流程控制

1.if分支结构

1.分支结构
    1.单if分支
        if(条件){条件成立之后执行的代码}
     2.if...else分支
        if(条件){
            条件成立之后执行的代码
        }else{
            条件不成立之后执行的代码
        }
      3.if...elif...else分支
        if(条件1){
            条件1成立之后执行的代码
        }else if(条件2){
            条件1不成立条件2成立执行的代码
        }
        else{
            条件不成立之后执行的代码
        }

2.循环结构

for(let i=1;i<101;i++){
        console.log(i)
    }


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

var i = 0;
while (i < 10) {
  console.log(i);
  i++;

• 函数

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

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


// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);

• 内置对象与方法

类似于python中的内置函数或者内置模块
固定语法
    var 变量名 = new 内置对象名();
 
1.Date日期对象
方法：
var d = new Date(); 
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

2.JSON序列化对象

回顾python序列化
import json
       json.dumps()
       json.loads()

JS中的序列化
       JSON.stringify()
       JSON.parse()
示例：
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
 3.RegExp正则对象
// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

• BOM操作

BOM是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”（通过写js代码可以跟浏览器交互）

 一.BOM对象-window

所有浏览器都支持 window 对象。它表示浏览器窗口。

Window的常见方法：

     1.window.innerHeight - 浏览器窗口的内部高度

                     2.window.innerWidth - 浏览器窗口的内部宽度

                     3.window.open() - 打开新窗口

                      4.window.close() - 关闭当前窗口

三种弹框的方式：

//只含有确定的按钮

window.alert("今天星期四， 马上周五了， 我好开心呢");

//含有确定按钮和取消按钮的弹框

var flag= window.confirm("确实很开心");

//如果返回的是true代表点击的是确定 ， 如果返回是false代表点击的取消

//含有输入内容的弹框 前部分代表的是提示的信息， 后面是输入内容的默认值

var val= window.prompt("请输入昵称：","例如：李白");

//取消 返回 null

定时器的应用：

//2S后调用方法 执行一次

var time1=window.setTimeout("test04()",2000);

//每间隔2s就会执行方法 执行了多次

window.setInterval("test04()",2000);

清除计时器操作：

//清除计时器的操作 其中的名称就是清除计时器的名称

window.clearInterval(time);

window.clearTimeout(time1);

location对象

什么是location对象？

                        location对象是window对象的一个属性，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

location对象有以下常见的属性和方法：

 

属性/方法	说明
host	主机名：端口号
hostname	主机名
href	整个URL
pathname	路径名
port	端口号
protocol	协议部分
search	查询 字符串
reload	重载当前URL
repalce	用新的URL替换当前页面

另外location对象不仅仅是window对象的一个属性，还是document对象的一个属性。

这意味着：window.location = location = document.location

history对象

什么是history对象？

                      history 对象是 window 对象的属性，它保存着用户上网的记录，这个记录的时间戳是从窗口被打开的那一刻算起。

history对象有以下常见的属性和方法：

属性/方法	说明
length	history对象中的记录数
back	前往浏览器历史条目前一个URL，类似后退
forward（）	前往浏览器历史条目下一个URL，类似前进
go（num）	浏览器在history对象中向前或向后

navigator对象

什么是navigator对象？

                         navigator对象，是BOM中识别客户端浏览器的一个window属性。

navigator相关的一些常见属性：

属性	说明
appName	完整的浏览器名称和版本信息
platform	浏览器所在的系统平台
plugins	浏览器中安装的插件信息的数组
userAgent	浏览器的用户代理字符串
userLanguage	操作系统的默认语言

• DOM操作

DOM （是指文档对象模型，通过它，可以访问HTML文档的所有元素（ 通过写js代码可以跟html交互）

JS操作html和CSS操作html学习套路一致 都是先学如何查找标签

根据id值查找标签 结果直接是标签对象本身

             document.getElementById()

根据class值查找标签 结果是数组类型

              document.getElementsByClassName()

根据标签名查找标签 结果是数组类型

             document.getElementsByTagName()

节点操作

js操作dom主要分对元素节点、文本节点、属性节点的增删改查：
判断元素节点类型

新增节点：

var newNode=document.createElement("div");  //创建一个元素节点
var textNode=document.createTextNode("hello world!");  //创建一个文本节点
var cloneNode =newNode.cloneNode(true);//克隆一个节点，参数true表示会克隆当前节点以及他的所有子节点，flase表示只克隆当前节点，默认为false
document.createDocumentFragment();//创建文档对象变量，主要用来临时存储节点，大量操纵dom时性能会有很大的提升

查找节点：

var parentNode=document.getElementById("list");//返回第一个带有指定id的元素
var classList=document.getElementsByClassName("wrapper"); //返回所有带有指定class的元素的集合(返回数组形式)
var tagList=document.getElementsByTagName("li");//返回所有带有指定标签的元素的集合(返回数组形式)   // *表示查找所有标签
var list=document.querySelector(".wrapper");//返回第一个带有指定id或class的元素
var allList=document.querySelectorAll(".wrapper");//返回所有带有指定id或class的元素

删除节点：

var deleteNode = parentNode.removeChild(item);//删除指定的子节点，并返回   deleteNode只是在dom树中删除了，但在内存中还可以访问

修改节点：

node.appendChild(newNode);// 在指定元素后面新增子节点
parentNode.insertBefore(newNode,node);  //在parentNode的子节点newNode前面插入newNode节点
parentNode.replaceChild(newNode,oldNode);//用oldNode节点替换parentNode的子节点newNode

 通过节点之间的关系来查找元素节点：

element.parentNode    //返回该节点的父节点，每个节点都会有一个父节点，Element的父节点可能是Element，Document或DocumentFragment；
element.parentElement    //返回父节点，只有父节点为元素节点时返回，否则返回null
 
element.children    //返回所有元素子节点的集合，仅包含元素节点
element.childNodes    //返回当前元素所有的子节点，包含元素节点，文本节点，属性节点。（注释、空格、换行等也会被当作一个节点）
 
element.firstChild    //返回当前元素的第一个子节点，该子节点可以是任意节点，如果没有则返回null
element.firstElementChild    //返回当前元素的第一个子节点，该子节点只可以是元素节点，如果没有则返回null
element.lastChild    //返回当前元素的最后一个子节点，该子节点可以是任意节点，如果没有则返回null
element.lastElementChild    //返回当前元素的最后一个子节点，该子节点只可以是元素节点，如果没有则返回null
 
element.previousSibling    //返回该节点的前一个兄弟节点
element.previousElementSibling    //返回该节点的前一个元素兄弟节点
element.nextSibling    //返回该节点的后一个兄弟节点
element.nextElementSibling    //返回该节点的后一个元素兄弟节点

获取当前节点的文本值：

element.innerHtml  //返回当前节点的所有文本包含html
element.innerText //返回当前节点及所有后代节点的文本值,不包含html