一. 基础语法

(一) js的三大组成部分

js作用: 数据的验证操作; 页面动画交互的操作; ajax技术; 在nodejs平台上充当后台语言使用

ECMAScript---js基础语法(es语法)
es5老语法---2015---es6语法
BOM---浏览器对象模型---利用js操作浏览器的功能
DOM---文档对象模型---利用js操作html文档中标签,属性,css

(二) js的使用方式与输出方式

四种使用方式

内嵌式(内联式行内式)
内部式
a标签使用
外链式

三种输出方式

alert( )
document.write( )
console.log( )

(三) 变量的设置

var可以重复定义相同变量,let不能;
var和let变量都可以重新赋值

es5---var
es6---let

(四) 数据的分类

基本数据类型:

undefined---数据未定义类型
number---数字类型
string---字符串类型
boolean---布尔类型 true false
null---空类型

基本数据类型的判断方法: typeof( )

(五) 字符串与数字之间的强制转换

parseInt(变量)---强制转换字符串为整数数字
parseFloat(变量)---强制转换字符串为小数数字

(六) 常用运算符

%模---取余数(常用来判断奇偶数)
-- ++ 自身+1或者-1
＋--- es5字符串拼接
+= ---累加

注: 如果符号在变量的左边, 它具有了自私自利的精神, 同级别运算优先自己+1以后再参与其他运算

如果符号在变量的右边, 它具有的是雷锋精神, 同级别运算先做好所有其它运算, 最后在处理自己+1的操作

二. 流程语句

1.代码运行顺序

从上往下
条件判断运行
循环运行

2. 条件判断语句

单分支条件判断语句

if() {}

双分支条件判断语句

if() {} else {}

多分支条件判断语句

if() {} else if() {} else {}

三目运算: 判断条件 ? 满足条件执行的代码 : 不满足条件执行的代码

3. switch和多分支语句的区别

let num = 8

switch (num) {
    case 1:
        alert("有钱块存，不要耽误我时间！")
        break;
    case 2:
        alert("没钱取什么取")
        break;
    case 3:
        alert("反正没有超过3位数")
        break;
    case 4:
        alert("小于一个目标就不要转了")
        break;
    case 5:
        alert("卡被吞掉了请重新办理")
        break;
    default:
        alert("瞎按什么按，看提示")
        break;
}

注:

1.switch的使用只能操作精确值，不能判断范围值;

2.case判断的结果和===是一样的

4. 循环语句及循环的四要素

循环语句四要素:

设置一个计数变量
设置计数变量的范围和自身改变（+1）
循环的结构体
循环中执行的代码

// 通过循环去实现从1累加到100的和的打印
// 1.先设置一个求和的变量
let sum = 0
// 2.实现100次循环
for (let a=1;a<=100;a++) {
    // console.log(a);
    // 3.在循环中把每次a的值累加到变量中
    sum += a
}
// 4.循环完成以后再打印变量得到结果
console.log(sum);

5. while和do..while的循环原理

while

// 使用while实现10次循环
let a = 1
while (a<=10) {
    console.log(a);
    a++
}

do..while

// 使用do..while实现10次循环
let a=11;
do {
    console.log(a);
    a++
} while(a<=10)

6.循环终止语句

break: 停止所有循环

// 循环10次打印5之前的所有值
for (let a =1;a<=10;a++) {
    if (a==5){
        break;
    }
    console.log(a);
}

continue: 跳过当前满足条件的循环后面，执行后面的循环操作

// 循环10次打印除了5的所有值
for (let a =1;a<=10;a++) {
    if (a==5){
       continue;
    }
    console.log(a);
}

三. 代码优化封装(函数)

1. 函数的作用和概念

把我们常用的或者是一段很长并且能独立实现一个功能的代码块封装起来，达到优化代码的操作的一种代码技巧

2. 函数定义和调用的操作

声明式

 function fun () {
     alert()
 }
 fun()

表达式

 let fun1 = function () {
     alert()               
}
fun1()

3. 函数的提升作用

声明式函数具有函数提升作用，表达式没有
使用声明式的函数可以在定义前执行调用

fun()
function fun () {
    document.write("声明式函数")
}

4. 作用域的概念

函数大括号之内称之为局部作用域，大括号之外称之为全局作用域

// 全局变量
let a = 10
function fun () {
    // 在局部作用域中可以使用全局变量
    console.log(a);
}
fun()


function fun () {
    let b = 15
    console.log(b);
}
fun()
console.log(b);
// b在局部作用域里面,所以console.log(b)打印不出来

5. 全局变量和局部变量的区别

函数为例在函数大括号之内定义的变量就是局部变量, 只能在这个函数中使用
大括号之外定义的变量全局变量, 任何位置都可以使用它

6. 形式参数和实际参数的基本使用

作用：我们能在函数的局部作用域中既可以使用局部变量又可以使用全局变量, 它用自身替代了全局变量
形参可以有多个，用逗号隔开, 实际参数对应传值
可以设置默认值

let a = "张三"
let b = "李四"
let c = "王五"

function fun (n,m,h) {
    let name = "boss"
    alert("我叫"+n+"他叫"+m+"他叫"+h)
}
fun(b,c,a)

7. 返回值的细节操作

把函数的局部变量返回到全局,单保存在函数中
return 返回局部变量

function fun () {
    let a = 50
    console.log(a);
    // 把需要返回的局部变量设置返回到全局，但是他是目前保存在调用执行中的值
    return a;
}
console.log(fun());
// 把局部值从函数的调用中获取出来存入全局变量
let a = fun()
console.log(a);

8. 内置函数（系统函数）掌握isNaN()

自定义函数: 自己定义并封装代码的函数
内置函数（系统函数）: 在开发js语言的时候就已经写好定义的函数，我们只是使用调用就ok

alert() document.write() console.log() typeof() parseInt() parseFloat() prompt()

isNaN(): 判断数据是不是纯数字 true---不是数字 false---是数字

四. 数组

1. 数组的定义

实例化

 let arr = new Array()

字面量

 let arr = []

2. 数组中数据的curd操作（增删改查）

添加数据

1.直接添加（只限于字面量)

2.arr.push()

3.通过索引添加: arr[索引] = 'xxx'

查看数据

arr[索引]

修改数据

arr[索引] = 修改值

删除数据

arr.splice(开始删除的位置索引,删除数据的个数)

3. 数组中使用遍历的操作

1.for循环

   for (let a=0;a<arr.length;a++) {
            console.log(arr[a]);
            arr[a]---所有的数据
            a--------数据对应的索引
    }

2.forEach()

 arr.forEach(function (item,index) {
     console.log(item(数据), index（索引）);
 })

4. 数组中常见的内置函数

arr.join("间隔符号")---将数组数据转为字符串,默认用逗号连接
arr.push("数据1","数据2")---添加数据
arr.splice(要删除数据的索引,删除的个数,指定添加或替换的数据)---数组中数据的添加，修改           
arr.forEach()---数组的遍历

了解：
arr.concat(arr1,arr2)----把arr1和arr2的数据合并为一个新数组
arr.slice(开始索引，结束索引+1)---截取老数组中数据成为新数组 左闭右开
arr.pop()---从右往左删除数组中的数据
arr.shift()---从左往右删除数组中的数据
arr.unshift("数据1","数据2")---从右往左添加数据

五. 对象

1.对象的概念

数据类型: 1.基本数据类型; 2.复合数据类型(数组, 对象)
对象在编程中是因为内容可以装基本数据类型（属性）; 存的函数就是方法
对象的作用: 帮助我们能够清晰的获取指定的归类数据

2.对象定义的方法

实例化

let obj = new Object()

字面量

 let obj = {
    key:'111'
 }

3.对象中curd操作

1.数据的添加

直接添加
键名添加--- obj.键名 = 要设置的值

2.数据的查询

obj.键名

3.数据的修改

obj.指定键名 = 要修改的值

4.数据的删除

delete obj.指定键名

4.对象的遍历循环

for..in

for (key in obj) {
        key---所有的键名
        obj[key]---所有的值
}

5.常用内置对象的一些方法

1.String对象

str.length---获取字符串长度
str.indexOf("匹配字符",起始查询索引（包含）)---匹配字符串中是否有这个字符，有返回当前索引
str.substr(开始索引,截取长度)---截取字符串
str.substring(开始索引,结束索引+1)---截取字符串（左闭右开）
str.toLowerCase()---将字符串转为小写
str.toUpperCase()---将字符串转为大写

2.Number对象ceil

num.toFixed(index)---小数约分

3.Math对象

Math.ceil---向上取整
Math.floor---向下取整
Math.round---四舍五入
Math.random---随机数

六. BOM

1.BOM和它的顶层对象(window)

BOM中有一个顶层对象--- window(内置对象)
由于window就是浏览器的顶层对象，所以它下面直系的方法和对象可以直接调用不需要写对象名

alert()
funciton alert () {}

 let window = {
    alert:function () {}
 }
 window.alert()

2.顶层对象(window)中直系的常用方法

setTimeout()---延时计时函数; 指定毫秒数后执行内部代码

// 当打开网页3秒以后弹出警告弹窗
setTimeout(function(){
    // 执行代码
    alert()
},3000)

setInterval()---间歇计时函数; 每隔设置的时间，就执行一次传入的代码

// 使用间歇计时函数实现当前时间的页面动态显示
// 设置一个获取时间并拼接字符串显示在网页的函数
function setTime(){
    let date = new Date()
    let str = `
    <h1 style="text-align:center;color:pink;background:skyBlue;">
    今天是${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}
    日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}秒</h1>`
    document.body.innerHTML = str
}
// 首先调用一次保证一打开网页就有时间显示
setTime()
// 设置间歇计时函数保证每秒更新一次时间的获取和显示
setInterval(function () {
    // 更新时间的显示
    setTime()
},1000)
setInterval(setTime,1000)

clearInterval()---清除关闭间歇计时函数

// 使用间歇计时函数实现倒计时的操作
// 设置开始时间
let num = 5
// 把时间显示到页面
document.body.innerHTML = `<h1>${num}</h1>`
// 每隔1秒就让时间-1并且更新页面显示 
let time = setInterval(function(){
    if (num == 0){
        // 当显示到0的时候就停止间歇计时函数了
        clearInterval(time)
    } else {
        num--
        document.body.innerHTML = `<h1>${num}</h1>`
    }

},1000)

scrollTo()---浏览器滚动到指定的位置

scrollTo(水平滚动条，垂直滚动条)
使用它的时候页面上一定要有滚动条的存在
必须使用一个事件来触发执行操作

// 获取标签
let btn = document.getElementById("btn")
btn.onclick = function () {
    window.scrollTo(0,500)
}

3.顶层对象(window)下其他对象的常用方法

1.history---历史记录对象

history.back()---返回
history.forward()---前进
history.go(3)---访问浏览器列表中指定的页面
history.length---表示浏览器历史列表中的URL的个数

2.location---路径跳转对象

location.href = '路径'

4.DOM原生的获取标签四个方法, 及H5带来的2个新的获取方法

DOM是BOM中的一个专门处理文档的对象，直属于window下的document中
使用document下的属性和方法来操作html标签，属性，文本，css

HTML标签---文档节点
标签中的文字---文本节点
标签中的属性---属性节点

DOM原生获取元素的4种方法

document.getElementsByTagName("元素名")---通过标签名获取标签
document.getElementById("id值")---通过id获取标签
document.getElementsByClassName("类名")---通过类名获取标签
document.getElementsByName("属性名")---通过name属性名获取标签

H5带来的新的获取元素的方式

document.querySelector("css选择器")---只获取第一个匹配的标签
document.querySelectorAll("css选择器")---获取所有匹配的标签保存在一个伪数组中

操作标签的id和类名

添加id和值---元素.id = 值
获取class的值---元素.className
添加类名---元素.classList.add("类名")
删除类名---元素.classList.remove("类名")

操作文本内容

//元素.innerHTML = 设置的文本
//把hello放入p标签
    let p = document.querySelector("#p1")
    p.innerHTML = "<h1>hello</h1>"
    console.log(p.innerHTML);

操作css

//元素.style.样式名 = "值"
// 把类名为box的div中文字变为50号字体，红色
    let box = document.querySelector(".box")
    box.style.fontSize = "50px";
    box.style.color = "red"

七. DOM

1.获取html或者body标签的其他的一种方式

获取html标签

 let html = document.documentElement

获取body标签

let body = document.body

获取网页高度

console.log(body.clientHeight);
box.style.height = html.clientHeight + 'px'

获取网页宽度

console.log(body.clientWidth);
box.style.width = html.clientWidth + 'px'

2.原生js创建html标签，属性，css，文本的一套操作

1.创建+添加操作

// 手动用js创建一个div标签
let div = document.createElement("div")
// 把创建好的div放入outBox中
outBox.appendChild(div)

2.修改操作

父级元素.replaceChild(用来替换的子级元素，指定被替换的自己元素)

3.删除操作

// 删除标签
let ul = document.querySelector("ul")
// let li = document.querySelector("ul>li:nth-child(2)")
// ul.removeChild(li)

// 多个删除使用循环遍历操作
let lis = document.querySelectorAll("ul>li")
for (let a = 0; a < lis.length; a++) {
    ul.removeChild(lis[a])
}

4.属性

获取当前元素的父级---元素.parentNode
firstElementChild---获取第一个子级元素节点
lastElementChild---获取最后一个子级元素节点
children---获取所有父级下的元素成一个伪数组，通过索引可以指定获取元素
previousElementSibling---上一个兄弟元素节点
nextElementSibling---下一个兄弟元素节点

3.事件的四要素，掌握常用事件的注册方式和具体操作

1.事件的四要素

有事件源（激活事件的标签元素）
事件类型
事件执行代码块
事件对象(event)

2.事件的三种注册方式

普通注册事件

元素.on+事件名 = function () {
     事件激活后执行的代码块
}

嵌入式

 <div onclick="alert()"></div>

监听注册事件

元素.addEventListener("事件名",function(){
     事件激活后执行的代码块
})

注:

普通注册事件相同事件只有最新一个有效，之前事件会被覆盖
通过监听注册事件，相同事件都会生效

3.常用事件的认识操作

click---点击事件---点击鼠标左键触发
mouseover---移入事件---鼠标指针移到一个元素上触发
mouseout---移出事件---鼠标指针移出一个元素上触发
input---即时输入事件---HTML5新增事件，输入内容时触发
blur---元素失去焦点	　
change---用户改变域的内容
load---窗口加载---是网页加载完毕时发生
dblclick---双击事件---双击鼠标左键触发
focus---元素获取焦点

js初级