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 | 鼠标从某元素移开 |