js课件(2_对象)
- 格式:doc
- 大小:328.00 KB
- 文档页数:9
js中对象的定义JavaScript中的对象是一种复合数据类型,它可以用于存储和组织多个相关的值。
对象是由键值对组成的集合,其中键是字符串类型,值可以是任意数据类型,包括字符串、数字、布尔值、数组、函数和其他对象。
在JavaScript中,对象可以通过两种方式来定义:字面量和构造函数。
1. 使用字面量定义对象:使用字面量的方式可以直接创建一个对象,并在花括号中定义键值对。
例如:```var person = {name: "张三",age: 25,gender: "男"};```这里定义了一个名为person的对象,它有三个属性:name、age 和gender,分别对应着"张三"、25和"男"。
可以使用点语法或方括号语法来访问对象的属性,例如:```console.log(); // 输出:"张三"console.log(person['age']); // 输出:25```2. 使用构造函数定义对象:除了使用字面量的方式,还可以使用构造函数来定义对象。
构造函数其实就是一个普通的函数,通过关键字new来调用。
例如:```function Person(name, age, gender) { = name;this.age = age;this.gender = gender;}var person = new Person("张三", 25, "男");```这里定义了一个名为Person的构造函数,它有三个参数:name、age和gender。
通过this关键字,将参数赋值给对象的属性。
然后使用new关键字调用构造函数,创建一个名为person的对象。
对象的属性可以是任意数据类型,甚至是函数。
例如:```var person = {name: "张三",sayHello: function() {console.log("你好,我是" + );}};person.sayHello(); // 输出:"你好,我是张三"```这里定义了一个名为person的对象,它有一个属性name和一个方法sayHello。
在JavaScript中,对象是一种复杂的数据类型,它允许你存储多个值作为一个单独的实体。
对象可以包含属性(通常称为键值对)和函数(称为方法)。
对象的语法如下:
javascript
let obj = {
key1: value1,
key2: value2,
// ...
keyN: valueN
};
在这个语法中:
1.let obj 声明了一个新的变量obj。
2.{ key1: value1, key2: value2, ... keyN: valueN } 是一个对象字面量,它定义了对象的属性
和方法。
3.key1, key2, ... keyN 是对象的属性名。
它们可以是任何有效的JavaScript标识符。
4.value1, value2, ... valueN 是与每个属性名关联的值。
这些值可以是任何有效的JavaScript
数据类型:数字、字符串、布尔值、对象、数组、函数等。
例如:
javascript
let person = {
firstName: "John",
lastName: "Doe",
age: 30,
fullName: function() {
return this.firstName + " " + stName;
}
};
在这个例子中,person 是一个对象,它有四个属性:firstName、lastName、age 和一个方法fullName。
js添加对象的方法在JavaScript 中,可以通过以下几种方式向对象添加属性或方法:1.使用中括号[]和键值对的方式添加属性:javascriptvar={name:"John"};.=25;2.使用对象字面量的方式添加属性:javascriptvar={name:"John"};var={name:"John",age:25};3.使用Object.assign()方法或扩展运算符...来合并对象,从而添加属性:javascript// 使用 Object.assign()var={name:"John"};var=Object.assign(,{age:25});// 使用扩展运算符 ...var={name:"John"};var={...,age:25};4.使用Object.defineProperty()或Object.defineProperties()方法来动态定义属性:javascriptvar={name:"John"};// 使用 Object.defineProperty() 方法Object.defineProperty(,"age",{enumerable:true,writable:true,value:25});// 使用 Object.defineProperties() 方法Object.defineProperties(,{age:{enumerable:true,writable:true,value:25}});5.使用Object.entries()方法和Object.fromEntries()方法来动态添加属性:javascript// 使用 Object.entries() 方法var={name:"John"};Object.entries({age:25}).forEach(([,])=>{ []=;});// 使用 Object.fromEntries() 方法var={name:"John"};=Object.fromEntries([["age",25]]);6.使用class和prototype来添加方法:javascriptclass Person{constructor(){this.=;}sayHello(){console.log("Hello, my name is "+this.);}}var=new Person("John");.sayHello();以上是一些常见的向对象添加属性或方法的方法。
一.自定义对象
方法是依附于对象的函数
二.事件驱动
event 是具有全局性的事件对象。
如事件发生的元素,键盘状态,鼠标位置等。
event常用属性:
keyCode:表示按下键的Unicode键盘内码。
(13表示按下回车键;9表示Tab 键)
常用的控件事件
onclick:单击
onblur:失去焦点
onfocus:获取焦点
onchange:改变文本或改变选项
JavaScript是一种寄生性很强的语言,只有在具体的环境中,它的价值才能体现出来。
window对象是客户端JavaScript中第一类对象,其他所有对象都是它的子对象。
一.window对象
window表示一个浏览器窗口,它是全局对象。
1.主要方法
window.alert( ) :弹出警告框
window.prompt( ):弹出输入框
window.confirm( ):弹出确认框
window.open (url, [name], [furterers]):打开一个新窗口
例如:
window.open (“hello.html”,“newwindow”,“height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,
location=no, st atus=no”)
参数详解
hello.html 弹出窗口的文件名;
newwindow 弹出窗口的名字(不是文件名),非必须,可用空''代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
window.close( ) :关闭窗口
window.setInterval( code , delay ):设置浏览器每隔多长时间定期执行指定的程序,时间以毫秒为单位。
code是执行的程序,delay是间隔的时间。
window.setTimeout( code , delay ):设置浏览器过多长时间后执行指定的程序,时间以毫秒为单位。
code是执行的程序,delay是间隔的时间。
例如:
function mm()
{
window.setInterval("fun()",2000);
window.setTimeout("fun()",2000);
}
function fun()
{
alert("hello");
}
window.clearTimeout( ):取消setTimeout的设置
window.clearInterval( ):取消setInterval的设置
例如:
var id;
function show()
{
var now = new Date();
document.getElementById("txt").value = now.toLocaleString();
}
function begin()
{
id = window.setInterval("show()",1000); //开始定时执行
}
function stop()
{
window.clearInterval(id); //终止定时执行
}
window.showModalDialog( )
2.主要属性
opener:表示打开当前窗口的window对象
parent:如果当前窗口是框架,parent就表示当前这个框架的父级框架
frames:表示当前窗口的各个框架(如果存在框架)
status:表示窗口的状态栏显示的文本
defaultStatus:表示窗口的状态栏显示的默认文本
二.Navigator对象
Navigator包含了浏览器的基本信息,如:浏览器名称、版本等。
它包含3个主要属性,分别是:appName(浏览器名称)、appVersion(浏览器内部版本号)、platform (浏览器所在的操作系统)
三.Location对象
全球定位仪,包含了与当前页面url有关的信息。
几个常用属性和方法如下:
href:跳转页面的url地址。
pathname:当前url的路径部分。
reload( ) :刷新页面。
四.History对象
表示窗口的浏览历史。
常用方法如下:
back( ):返回到前一个url。
“后退”
forward( ):访问下一个url。
“前进”
go( n ):根据不同的参数决定可访问的url。
如:history.go(-1):表示后退。
history.go(1):表示前进
五.Screen对象
代表屏幕对象。
在实际开发中应用价值不是很高,常用的属性有:availHeight:浏览器屏幕的可用高度,不包括任务栏。
availWidth:浏览器屏幕的可用宽度。
width:屏幕的宽度。
height:屏幕的高度。
六.Document对象
1.背景颜色
2.图像
document.images表示页面中的所有<img>,是一个数组。
3.文档定位
4.文档上次修改时间
5.文档的标题
6.向页面输入字符串
7.获取html标记对象的方法
七.Frames对象
<frameset cols="40%,*" >
<frame src="left.html"></frame>
<frame src="right.html"></frame> </frameset>。