JS基础——函数、对象、事件监听

JS基础——函数、对象、事件监听

一、函数

介绍：函数（方法）是被设计为执行特定任务的代码块。

定义：JavaScript函数通过function关键字进行定义，语法为：

定义方式一：
function functionName（参数1，参数2...){
  //要执行的代码

}

定义方式二：
var functionName=function(参数1，参数2...){
  //要执行的代码
}

注意：

• 形式参数不需要类型。因为JavaScript是弱类型的语言
• 返回值也不需要定义类型。可以在函数内部直接使用return返回即可

调用：函数名称（实际参数列表）

var add = function (a, b) {
      return a + b;
}
var result = add(10, 20);
alert(result);

注意：JS中函数调用可以传递任意个数的参数，但只接受前面定义参数个数。

二、对象

1.Array

JavaScript中Array对象用于定义数组。

（1）定义：

var 变量名=new Array(元素列表)；//方式一

var arr=new Array(1,2,3,4);

var 变量名=[元素列表]//方式二

var arr=[1,2,3,4];

（2）访问：

arr[索引]=值；

arr[10]=“hello”;

注意事项：JavaScript中的数组相当于Java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据。

（3）属性：

length:设置或返回数组中元素的数量

（4）方法：

forEach():遍历数组中的每个有值的元素，并调用一次传入的函数

push():将新元素添加到数组的末尾，并返回新的长度。

splice():从数组中删除元素

	//forEach:遍历数组中有值的元素
    arr.forEach(function (e) {
      console.log(e);
    })

    //ES6:箭头函数:(...)=>{......} 简化函数定义
    arr.forEach((e)=>{
      console.log(e);
    })

    //push:添加元素到数组末尾
   	arr.push(7,8,9);
    console.log(arr);
    var arr = new Array(1, 2, 3, 4);

    //splice:删除元素splice(索引,个数)
    arr.splice(2,2);//删除的是3,4
    console.log(arr);

2.String

(1)字符串对象创建方式

• 方式一

var 变量名=new String（“…”）;

var str=new String(“hello String”);

• 方式二

var 变量名=“…”;

var str=“hello String”;

(2)属性：

length:字符串的长度

(3)方法：

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

//创建字符串对象
    var str = "hello String";
    console.log(str);
    //length
    console.log(str.length);
    //charAt
    console.log(str.charAt(4));
    //indexOf
    console.log(str.indexOf("lo"));//返回的是第一个字符的索引
    console.log(str.indexOf("ho"));//没找到返回-1

    //trim--去除字符串首尾的空格
    var s = str.trim();
    console.log(s);
    //substring(start,end)---开始索引，结束索引（含头不含尾）
    console.log(s.substring(0, 5));

3.JSON

javaScript自定义对象

(1)定义格式：

var 对象名={

​ 属性名：属性值1，

​ 属性名：属性值2，

​ 属性名：属性值3；

​ 函数名称：function（形参列表）{}

}

(2)调用格式：

对象名.属性名；

对象名.函数名（）；

	//自定义对象
    var user={
      name:"西瓜",
      age:18,
      gender:"male",
      // eat: function () {
      //   alert("吃饭啦");
      // }
      //更简化
      eat() {
        alert("吃饭啦");
      }
    } 
    console.log(user.name);
    user.eat();

4.BOM

概念:Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

组成：

Window：浏览器窗口对象

Navigator：浏览器对象

Screen:屏幕对象

History:历史记录对象

Location:地址栏对象

（1）Window：浏览器窗口对象

获取：直接使用window，其中window，可以省略

window.alert(“hello window”);

alert(“window”);

①属性

history：对History对象的只读引用。

location：用于窗口或框架的Location对象。

navigator:对Navigator对象的只读引用

②方法

alert():显示带有一段消息和一个确认按钮的警告框。

confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。

setlnterval():按照指定的周期（以毫秒计）来调用函数或计算表达式

setTimeout():在指定的毫秒数后调用函数或计算表达式。

    //获取
    window.alert("hello bom");
    alert("hello window");
    //方法
    confirm -对话框
    confirm("您确认删除该记录吗？");
    //确认：true，取消：false
    var flag = confirm("您确认删除该记录吗？")
    alert(flag);
    //定时器 -setInterval --周期性的执行某一个函数
    var i = 0;
    setInterval(function () {
      i++;
      console.log("定时器执行了" + i + "次");
    }, 2000);
    //定时器 -setTimeout --延迟指定时间执行一次
    setTimeout(function () {
      alert("JS");
    }, 3000)

（2）Location-地址栏对象

获取：使用window.location获取，其中window可以省略。

window.location.属性；

location.属性;

属性：href:设置或返回完整的URL。

location.href=“https://www.baidu.com”;

5.DOM

概念：Document Object Model,文档对象模型。

将标记语言的各个组成部分封装为对应的对象：

• Document:整个文档对象

• Element:元素对象

• Attribute:属性对象

• Text:文本对象

• Comment:注释对象

JavaScript通过DOM，就能对HTML进行操作：

• 改变HTML元素的内容

• 改变HTML元素的演示（CSS）

• 对HTML DOM事件作出反应

• 添加和删除HTML元素

DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

1.Core DOM-所有文档类型的标准模型

2.XML DOM -XML 文档的标准模型

3.HTML DOM -HTML 文档的标准模型

lmage:<image>

Button:<input type='button'>

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

Document对象中提供了以下获取Element元素对象的函数：

​ 1.根据id属性值获取，返回单个Element对象

​ var h1=document.getElementById(‘h1’);

​ 2.根据标签名称获取，返回Element对象数组

​ var divs = document.getElementByTagName(‘div’);

​ 3.根据name属性值获取，返回Element对象数组

​ var hobbys=document.getElementByName(‘hobby’);

​ 4.根据class属性值获取，返回Element对象数组

​ var clss=document.getElementByClassName(‘cls’);

三、事件监听

事件：HTML事件时发生在HTML元素上的“事情”。比如

• 按钮被点击
• 鼠标移动到元素上
• 按下键盘按键

事件监听：JavaScript可以在事件被侦测到时执行代码

1.事件绑定

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

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

  function on() {
    alert("按钮1被点击了");
  }

方式二：通过DOM元素属性绑定

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

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

2.常见事件

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