JavaScript

JavaScript

1. JavaScript对象

JavaScript对象主要有三类，可以参考W3school在线学习文档

1.1 基本对象

这里主要学习Array对象，String对象和JSON对象

1.1.1 Array对象

官方文档中提供了Array的很多属性和方法，但是我们只学习常用的属性和方法，如下图所示：

属性：

属性	描述
length	设置或返回数组中元素的数量。

方法：

方法方法	描述
forEach()	遍历数组中的每个有值得元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度
splice()	从数组中删除元素

var arr = [1,2,3,4];
arr[10] = 50;
	for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

//e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
     console.log(e);
})

//在ES6中，引入箭头函数的写法，语法类似java中lambda表达式
arr.forEach((e) => {
     console.log(e);
}) 

//push: 添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);

//splice: 删除元素
//splice()函数用来数组中的元素，函数中填入2个参数。
//参数1：表示从哪个索引位置删除
//参数2：表示删除元素的个数
//如下代码表示：从索引2的位置开始删，删除2个元素
arr.splice(2,2);
console.log(arr);

1.1.2 String对象

String对象也提供了一些常用的属性和方法，如下表格所示：

属性：

属性	描述
length	字符串的长度。

方法：

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

//length
console.log(str.length);

//charAt()函数
console.log(str.charAt(4));

//indexOf()函数
console.log(str.indexOf("lo"));

//trim()函数用于去除字符串两边所有的空格
var s = str.trim();
console.log(s.length);

//substring()函数用于截取字符串的，函数有2个参数。
//参数1：表示从那个索引位置开始截取。包含
//参数2：表示到那个索引位置结束。不包含
console.log(s.substring(0,5));
//0-4索引

1.1.3 JSON对象

JSON对象：JavaScript Object Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：

{
    "key":value,
    "key":value,
    "key":value
}

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

前后台交互的时候，我们需要传输数据。

我们可以使用xml，但是xml格式存在如下问题：

• 标签需要编写双份，占用带宽，浪费资源
• 解析繁琐

所以我们可以使用json来替代。

注意：

错误示范：

var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);

返回为undefined

正确示例：

var obj = JSON.parse(jsonstr);
alert(obj.name);

因为上述是一个json字符串，而非JSON对象，只有对象才可以“点”name

注：JSON对象也可以转换为JSON字符串

alert(JSON.stringify(obj));

1.2 BOM对象

全称Browser Object Model，也就是JavaScript将浏览器各个组成部分都封装成了对象。

所以我们要操纵浏览器的部分功能，可以通过操作BOM对象来完成。

例如：我们想要将浏览器的地址改为http://www.baidu.com,我们就可以通过BOM中提供的location对象的href属性来完成，代码如下：location.href='http://www.baidu.com'

BOM中提供了如下5个对象：

对象名称	描述
Window	浏览器窗口对象
Navigator	浏览器对象
Screen	屏幕对象
History	历史记录对象
Location	地址栏对象

重点学习Window和Location对象

1.2.1 Window对象

window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window.例如：我们之前学习的alert()函数其实是属于window对象的,其完整的代码如下：

window.alert('hello');

其可以省略window. 所以可以简写成

alert('hello')

所以对于window对象的属性和方法，我们都是采用简写的方式。window提供了很多属性和方法，下表列出了常用属性和方法

window对象提供了获取其他BOM对象的属性：

属性	描述
history	用于获取history对象
location	用于获取location对象
Navigator	用于获取Navigator对象
Screen	用于获取Screen对象

也就是说我们要使用location对象，只需要通过代码**window.location**或者简写**location**即可使用

window也提供了一些常用的函数，如下表格所示：

函数	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
comfirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消。

添加如下代码：

confirm("您确认删除该记录吗?");

但是我们怎么知道用户点击了确认还是取消呢？所以这个函数有一个返回值，当用户点击确认时，返回true，点击取消时，返回false。我们根据返回值来决定是否执行后续操作。修改代码如下：再次运行，可以查看返回值true或者false

var flag = confirm("您确认删除该记录吗?");
alert(flag);

setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数：

fn:函数，需要周期性执行的功能代码

毫秒值：间隔时间

注释掉之前的代码，添加代码如下：

//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
     i++;
     console.log("定时器执行了"+i+"次");
},2000);

刷新页面，浏览器每个一段时间都会在控制台输出

setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述setInterval一致

注释掉之前的代码，添加代码如下：

//定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
	alert("JS");
},3000);

浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。

1.2.2 Location对象

location是指浏览器的地址栏对象。我么常用的是href属性，用于获取或者设置浏览器的地址信息。

//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

1.3 DOM对象

1.3.1 DOM介绍

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。（BOM是将浏览器各个部分封装成对象）

DOM 其实并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

• Document：整个文档对象
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象

DOM的主要作用如下：

• 改变 HTML 元素的内容
• 改变 HTML 元素的样式（CSS）
• 对 HTML DOM 事件作出反应
• 添加和删除 HTML 元素

从而达到动态改变页面效果目的

1.3.2 获取DOM对象

我们知道DOM的作用是通过修改HTML元素的内容和样式等来实现页面的各种动态效果，但是我们要先获取元素对象才能操作。所以学习DOM的核心步骤为：

• 获取DOM中的元素对象（Element对象，也就是标签）
• 然后操作Element对象的属性，也就是标签的属性。

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的（window.document，window可以省略）。document对象提供的用于获取Element元素对象的api如下表所示：

函数	描述
document.getElementById()	根据id属性值获取（约定俗成id唯一），返回单个Element对象
document.getElementsByTagName()	根据标签名称获取，返回Element对象数组
document.getElementsByName()	根据name属性值获取，返回Element对象数组
document.getElementsByClassName()	根据class属性值获取，返回Element对象数组

操作属性示例：

var divs = document.getElementsByClassName('cls');
var div1 = divs[0];
div1.innerHTML = "666";

此时“”标签中的内容修改为666

2. JavaScript事件

如下图所示的百度注册页面，当我们用户输入完内容，百度可以自动的提示我们用户名已经存在还是可以使用。那么百度是怎么知道我们用户名输入完了呢？这就需要用到JavaScript中的事件了。

什么是事件呢？HTML事件是发生在HTML元素上的 “事情”，例如：

• 按钮被点击
• 鼠标移到元素上
• 输入框失去焦点
• …

而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。

2.1 事件绑定

JavaScript对于事件的绑定，提供了两种方式

• 方式一：通过html标签中的事件属性进行绑定

  例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数。

  在VS Code中创建名为09. JS-事件-事件绑定.html，添加如下代码：

  <input type="button" id="btn1" value="事件绑定1" onclick="on()">
  

  很明显没有on函数，所以我们需要创建该函数，代码如下：

  <script>
      function on(){
          alert("按钮1被点击了...");
      }
  </script>
  

• 方式二：通过DOM中的Element元素的事件属性进行绑定

依据我们学习过得DOM的知识点，我们知道html中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性。此时我们再次添加一个按钮，代码如下：

<input type="button" id="btn2" value="事件绑定2">

我们可以先通过id属性获取按钮对象，然后操作对象的onclick属性来绑定事件，代码如下：

document.getElementById('btn2').onclick = function(){
    alert("按钮2被点击了...");
}

• 我的理解是：前面讲过DOM是将html的各个部分封装成对象，这里的标签也就是一个对象，这个对象拥有对象属性，对象属性将绑定一个事件。这个事件可以在script标签中写，也可以在得到这个对象，然后给这个对象的事件属性绑定具体的事件。所以其实这两种方式原理是一样的，只是书写方式不同。

2.2 常见事件

上面案例中使用到了 onclick 事件属性，那都有哪些事件属性供我们使用呢？下面就给大家列举一些比较常用的事件属性

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开