JavaScript简单回顾

1、HTML界面引入js代码的两种方式

1、内部脚本 

<script language="JavaScript"> js代码 </script>

2、外部脚本

<script language = "JavaScript" src = "外部js文件路径"></script>

2、js中的数据类型

1. 字符串类型
2. 数值类型
3. 布尔值
4. 未定义
5. 对象
6. null

3、js流程控制

高级语言中的三种流程控制：顺序，分支，循环

1. js中的分支结构还是if和switch
2. js中的循环结构主要是for和while

4、js函数

js中的函数分为两种，一种是普通函数、一种是匿名函数

普通函数

function 函数名 (参数列表){
    方法体
}

匿名函数（一般和事件搭配使用）

function (参数列表){
    方法体
}

 特点:
        1. js的函数形参不需要类型声明,也不需要返回值声明
        2. js方法体中如果有返回值就使用return返回, 如果没有就无需return
        3. js函数没有重载的概念,如果出现同名的方法,后面的会覆盖前面的
        4. 在js函数内部,其实可以通过一个arguments对象获取到所有传入的参数
        5. js也支持可变参数的写法

5、js事件

功能：JS可以监听用户的行为，得到一个事件，并调用函数来完成用户交互功能。

5.1常用事件

js事件有好多，常用的罗列如下：

1.单击事件 onclick

2.双击事件 ondblclick

3.失去焦点 onblur

4.获取焦点 onfocus

5.鼠标移入事件 onmouseover

6.鼠标移出事件 onmouseout

5.2事件绑定

通过事件，可以将HTML上的元素跟函数绑定在一起来完成一些具体的功能。绑定方式有两种：普通函数绑定和函数绑定。

匿名函数做事件绑定

document.getElementById(元素id).onclick = function(){
    alert("弹窗")
}

普通函数做事件绑定直接调用函数名称即可

onclick = al

function al(){
    alert("弹了个窗")
}

6、js内置对象

6.1String 对象

1. 构造方式：
    双引号，单引号，反引号
2. 常见方法：
    substring(startIndex,endIndex) 提取字符串中两个指定的索引号之间的字符
    split(delimiter) 把字符串分割为子字符串数组
    toLowerCase()/toUpperCase()  把字符串转换为小/大写
    trim() 移除字符串首尾空白

6.2Array对象

1. 创建数组的方式:
    let arr1 = [1,2,3];
    let arr2 = new Array(1,2,3);
注意:JS数组不区分数据类型,而且其长度可以随意改变,因此JS数组类似于Java中的集合

2. 数组常用方法:
合并:concat() 合并数组
添加:push() 尾部添加  /  unshift() 头部添加
删除:pop() 尾部删除  /  shift() 头部删除
转字符串:join(分隔符)与split()相反
排序:sort()
反转:reverse()

6.3Date对象

1. 创建日期对象的方式:
 let date = new Date();

2. 常见方法:
 getFullYear() 获取年
    getMonth() 获取月
    getDate() 获取日
    getHours() 获取时
    getMinutes()  获取分
    getSeconds()  获取秒
    getMilliseconds()  获取毫秒

6.4Math对象

1. Math对象的方法:
    round()  四舍五入
    floor()  向下取整 
    ceil()   向上取整 
    random() 产生随机数 ：返回 [0,1) 之间的随机数。

6.5全局函数

不需要创建对象，可以直接调用函数，就称为全局函数

1. 字符串转为数字
    parseInt()  转为整型
    parseFloat() 转为浮点型
2. 把字符串当做js表达式来执行
  eval("js代码")

7、BOM对象

7.1BOM简介

浏览器对象模型，就是把浏览器抽象成一个对象，然后通过js代码来操作浏览器的各个元素

层次结构：

BOM(浏览器对象)
    Windows(Windows窗口对象)
        Location(地址栏对象)
        Document(文档对象，也称DOM对象)

7.2Windows窗口对象

1、JS三个弹框
        警告窗: alert
        确认窗: confirm  特点: 会有boolean类型的返回值, 如果点击的是确定,返回true; 如果点击的取消,返回false
        搜索窗: prompt   特点: 会有字符类型的返回值, 返回值就是输入的内容; 如果点击的是取消,返回null

2、两种定时器: 在指定的时间做什么事
JS两个定时器:
    setTimeout(做什么事,多长时间之后(单位ms)):一次性定时器, 此定时器仅仅会在指定的时间执行一次, 这个方法有返回值,返回值就是当前任务的标识
      clearTimeout(任务标识): 根据任务标识取消任务

    setInterval(做什么是,间隔多长时间(单位ms)):周期性定时器, 此定时器会在指定的时间间隔后重复执行, 这个方法有返回值,返回值就是当前任务的标识
       clearInterval(任务标识): 根据任务标识取消任务

3、location地址
        location.href  表示的就是当前浏览器地址栏中地址
        location.reload()  表示刷新当前页面
        location.href = "新地址  表示跳转新页面

8、DOM对象（文档对象）

8.1DOM简介

文档对象模型，其作用是把HTML页面内容抽象成为一个Document对象，然后可以使用js动态修改页面内容。

一颗DOM树上的所有内容都可以称为节点，这些节点分为三类

1、元素节点 （HTML标签）：element

2、文本节点（HTML文本）：text

3、属性节点（HTML标签的属性值）：attribute

8.2DOM获取元素对象

1、js6之前的获取方式

（1. 获取单个元素
        document.getElementById(id属性值)
（2. 获取元素数组
        document.getElementsByTagName(标签名)
        document.getElementsByClassName(class属性值)
        document.getElementsByName(name属性值)

2、js6可根据css选择器来获取

（1. 获取单个元素
        document.querySelector(id选择器)
（2. 获取元素数组
        document.querySelectorAll(css选择器)   标签选择器/class选择器/子选择器/后代选择器/属性选择器

8.3DOM操作内容

1. 获取或者修改元素的 纯文本内容
        js（元素）对象.innerText; 
2. 获取或者修改元素的 html内容
        js（元素）对象.innerHTML; 
3. 获取或者修改包含自身的html内容（了解）
        js（元素）对象.outerHTML; 

8.4DOM操作属性

1.操作HTML默认已有的属性

（1. 获取js对象指定属性的值: js对象.属性名 
（2. 设置js对象指定属性的值: js对象.属性名='xxx' 

2、操作HTML默认没有的属性

（1. 给js对象添加属性和值: js对象.setAttribute(属性名,属性值)     
（2. 获取js对象指定属性的值: js对象.getAttribute(属性名) 
（3. 移除js对象的指定属性: js对象.removeAttribute(属性名) 

8.5DOM操作样式

1. 给标签的style属性设置一个css样式:  js对象.style.样式名='样式值'
2. 给标签的style属性设置多个css样式:  js对象.style.cssText='css样式'    
3. 给标签添加class的类选择器:         js对象.className='class选择器名'

8.6DOM添加元素

1. 创建一个标签对象          document.createElement('标签名称')
2. 给父标签添加一个子标签    父标签对象.appendChild(子标签对象)