数组

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式

数组的遍历

求数组中最大的值

创建数组

JS 中创建数组有两种方式：

利用 new 创建数组

var 数组名 = new Array() ；
var arr = new Array();   // 创建一个新的空数组

利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

数组的字面量是方括号 [ ]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式
数组元素的类型
数组中可以存放任意类型的数据，例如字符串，数字，布尔值等

var arrStus = ['小白',12,true,28.9];

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);

遍历数组

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

数组中新增元素
数组中可以通过以下方式在数组的末尾插入新元素：

  数组[ 数组.length ] = 新数据;

函数

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

声明函数

// 声明函数
function 函数名(参数列表) {
    //函数体代码
}

function 是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum（小驼峰）
调用函数

函数名();  // 通过调用函数名来执行函数体代码

调用的时候千万不要忘记添加小括号
口诀：函数不调用，自己不执行
注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码

函数的参数

return 语句

返回值：函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回。

// 声明函数
function 函数名（）{
    ...
    return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

在使用 return 语句时，函数会停止执行，并返回指定的值
如果函数没有 return ，返回的值是 undefined

函数的两种声明方式

自定义函数方式(命名函数)
利用函数关键字 function 自定义函数方式

// 声明定义方式
function fn() {...}
// 调用  
fn();

函数表达式方式(匿名函数）
利用函数表达式方式的写法如下

 var fn = function(num){
            console.log("匿名函数被调到"+num)
        }
        fn(100);

对象

什么是对象？

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词)
为什么需要对象？
保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。
如果要保存一个人的完整信息呢？例如，将“张三疯”的个人的信息保存在数组中的方式为：

  var arr = [‘张三疯’, ‘男', 128,154];

上述例子中用数组保存数据的缺点是：数据只能通过索引值访问，开发者需要清晰的清除所有的数据的排行才能准确地获取数据，而当数据量庞大时，不可能做到记忆所有数据的索引值。为了让更好地存储一组数据，对象应运而生：对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

 var obj = {
            "name":"张三丰",
            "sex":"男",
            "age":128,
            "weight":154,
        }

创建对象的三种方式

利用字面量创建对象

花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示

键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
代码如下：

利用 new Object 创建对象

利用构造函数创建对象
构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
构造函数的封装格式：

function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}

构造函数的调用格式

var obj = new 构造函数名(实参1，实参2，实参3)

注意事项

构造函数约定首字母大写。
函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
构造函数中不需要 return 返回结果。
当我们创建对象的时候，必须用 new 来调用构造函数。

遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作。
其语法如下：

for (变量 in 对象名字) {
    // 在此执行代码
}

法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

内置对象

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象，前面两种对象是JS 基础内容，属于 ECMAScript；第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

Math对象
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
日期对象
Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间
使用Date实例化日期对象
获取当前时间必须实例化：

var now = new Date();

获取指定时间的日期对象

var futture= new Date('2020/10/1');

注意：如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象,使用Date实例的方法和属性

instanceof 运算符

instanceof 可以判断一个对象是否是某个构造函数的实例

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false

Web API

Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果

DOM 介绍

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。

DOM树

DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

script放在body和放在head的区别

放在body中：在页面加载的时候被执行
放在head中：在被调用时被执行
原因：
1、浏览器是从上到下解析HTML的。
2、放在head里的js代码，会在body解析之前被解析；放在body里的js代码，会在整个页面加载完成之后解析。
js应该放哪：
1、head中：需调用才执行或事件触发执行的脚本，可以保证脚本在调用之前被加载
2、body中：当页面被加载时执行的脚本，通常被用来生成页面内容

根据ID获取

语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null

案例

 2020-08-17

根据标签名获取元素

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')

作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）

注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

H5新增获取元素方式


    
    Title


盒子1
盒子2

    
        首页
        产品

案例1




    
    Title
    



某个时间
32131

获取特殊元素（body，html）

事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

事件三要素

事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，

事件处理函数

常见的鼠标事件

操JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）作元素

改变元素内容（获取或设置）

innerText和innerHTML的区别

获取内容时的区别：
innerText会去除空格和换行，而innerHTML会保留空格和换行
设置内容时的区别：
innerText不会识别html，而innerHTML会识别

常用元素的属性操作
切换图片案例




    
    Title

案例




    
    Title

表单元素的属性操作

表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

仿照京东显示密码




    
    Title

样式属性操作

方式1：通过操作style属性




    
    Title

淘宝点击关闭二维码




    
    Title
    



    淘宝二维码
    
    ×

Day02 Javascript 函数

数组