JS数据类型、流程控制、函数与BOM与DOM操作

JS数据类型

JS数据类型之布尔值

1.布尔值(Boolean)
在js中布尔值用用true和false来表示(都是小写)

2.(空字符串)、0、null、undefined、NaN都是false
2.1null表示这个变量的值时空(需要指定或清空一个变量时)
2.2undefined表示当声明了一个变量，但还没有赋值
'console.log()相当于python的print()'

JS数据类型之数组

'在js中也是一切皆对象'
1.对象之数组(相当于python的列表)
let l1 = [11, 22, 33]

2.forEach()
var l1 = [1, 2, 3, 4, 5]
l1.forEach(function(a){console.log(a)})  // 相当于for循环打印列表
/*
1
2
3
4
5
*/

3.splice()
var l1 = [1, 2, 3, 4, 5]
l1.splice(2,1,6)  // 在2的位置(第3个)开始删除1个元素并添加6,新元素可添加可不添加
// l1 = [1, 2, 6, 4, 5]

4.map()
var l1 = [1, 2, 3, 4, 5]
l1.map(function(a){return a + 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()	返回一个数组元素调用函数处理后的值的新数组

JS数据类型之自定义对象(object)

1.自定义对象(相当于python中的字典)
1.1定义方法1:
let d1 = {'name':'barry','pwd':123}
1.2定义方法2:
let d2 = new Object()

2.在自定义对象操作数据值的方式很简单,直接使用句点符
d.name

JS常见运算符

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

==			  弱等于(自动转换成相同数据类型)
===			  强等于(不自动转换)

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

JS流程控制

JS流程控制之分支结构

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

2.if...else分支
if(条件){条件成立之后执行的代码
    }else{条件不成立之后执行的代码}

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

JS流程控制之循环结构

1.switch
var day = new Date().getDay();
switch (day) {
    case 0:
        console.log('sunday');
        break;
    case 1:
        console.log('monday');
        break;
    default:
        console.log('...')}

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

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

JS函数

JS函数分类

1.普通函数定义
function 函数名(形参){
    函数体代码
    return 返回值
}

2.带参数的函数
function func(a, b){
    console.log(a, b)
}
'参数的个数不需要一一对应，如果想限制参数个数需要使用内置关键字arguments'
function func(a, b){
    if(arguments.length==2){
        console.log(a, b)
    }else{
        console.log('参数个数不对')
    }
}

3.匿名函数
function(a, b){
    return a + b;
}

4.箭头函数
var f = function(v){
    return v;
}
// 等同于
var f = v => 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函数名称空间与作用域

1.局部变量
在JavaScript函数内部声明的变量(使用var)是局部变量，所以只能在函数内部访问它，只要函数运行结束，本地变量就会被删除

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

3.变量生存周期
局部变量会在声明开始到运行结束后被删除
全局变量会在声明开始到页面关闭后被删除

4.作用域
在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层

JS内置对象

1.固定语法
var 变量名 = new 内置对象名();

2.Date日期对象
var d1 = new Date();
console.log(d1.toLocaleString());
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

2.JSON序列化对象
2.1将对象转换成JSON字符串
JSON.stringify()
2.2JOSN字符串转换成对象
JSON.parse()

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

类型	内置函数	介绍
数据类型	Number	数字对象
数据类型	String	字符串对象
数据类型	Boolean	布尔值对象
组合对象	Array	数组对象
组合对象	Math	数字对象
组合对象	Date	日期对象
高级对象	Object	自定义对象
高级对象	Error	错误对象
高级对象	Function	函数对象
高级对象	RegExp	正则表达式对象
高级对象	Global	全局对象

BOM与DOM操作

1.BOM:浏览器对象模型
通过写js代码可以跟浏览器交互

2.DOM:文档对象模型
通过写js代码可以访问html文档的元素

3.BOM操作
3.1window的子对象
window.open()  // 打开新窗口
window.close()  // 关闭当前窗口
window.navigator.userAgent()  // 客户端的大部分信息
window.history.forward()  // 前进一页
window.history.back()  // 后退一页
window.location.href  // 获取当前页面的地址(URL)
window.location.href = 新网址  // 跳转到指定页面
window.location.reload()  // 重新加载页面
alter()  // 警告框
confirm()  // 确认框
prompt()  // 提示框

3.2定时器相关操作(重要)
function func1(){
    alert('我什么场面没见过')
}
let t = setTimeout(func1,3000)  // 3秒之后自动执行func1函数
clearTimeout(t)  // 取消上面的定时任务

'每3秒自动执行func1重复3次'
var s1 = null
function showMsg(){
    function func1(){
        alert('这场面我真没见过')}
    s1 = setInterval(func1,3000)}
function clearMission(){
    clearInterval(s1)}
setTimeout(clearMission,10000)
showMsg()

4.DOM操作
4.1查找标签
document.getElementByld()
根据id值查找标签，结果直接是标签对象本身
document.getElementByClassName()
根据class值查找标签，结果是数组类型
document.getElementByTagName()
根据标签名操作标签，结果是数组类型

4.2间接查找
parentEement  // 父节点标签元素
children  // 所有子标签元素
firstElementChild  // 第一个子标签元素
lastElementChild  // 最后一个子标签元素
nextElementSibling  // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素
"let divEle = document.getElementById('d1')"

4.3节点操作
let XXXEle = document.createElement('标签名')  // 创建节点
XXXEle.id = 'id值'  //  添加id值
XXXEle.innerText = '内部文本'  // 设置文本节点的值
divEle.append(XXXEle)  // 追加一个子节点

4.4属性操作
XXXEle.属性			自带的属性还可以直接.属性名来获取和设置
XXXEle。setAttribute   可以设默认属性、自定义属性

4.5文本操作
获取文本节点的值：
divEle.innerHTML
divEle.innerText
'区别在于有没有赋值符号(=)'
设置文本节点的值：
divEle.innerHTML = '<h1>嘿嘿嘿</h1>'  // 能识别标签
divEle.innerText = '<h1>哈哈哈</h1>'  // 不能识别标签