网页基础:第6次课JavaScript对象
第6章 零基础学JavaScript对象
6.5.5 原型对象
• 调用构造函数来创建对象,其实是一种效率非常 低的方法,因为每次创建对象的时候,都要在构 造函数里为该对象分配相同的方法和属性。在 JavaScript中可以使用原型(prototype)对象的 机制来创建对象。
• • • • 6.5.5.1 6.5.5.2 6.5.5.3 6.5.5.4 什么是原型对象 原型对象的原理 修改对象原型 存储对象属性
6.1.3 对象的方法
• 对象是一些数据的集合,事实上,在JavaScript 中函数也是一种特殊的数据,因此,在对象中也 可以包含一些函数,那些函数称为对象的方法。 函数的作用通过是实现某个功能,因此对象的方 法的作用也是实现某个功能。如“笔”对象,可 能就拥有一个“写字”的方法,该方法的功能是 写字。同样,“门”对象有可能有“开”和“关” 两个方法,分别实现开门和关门两种功能。
6.2.2 直接创建自定义对象
• 在JavaScript中,除了很多内置对象之外,还可 以由用户自己创建对象,这类对象称为自定义对 象。直接创建自定义对象的语法代码如下所示: • var 对象名 = {属性名1:属性值1,属性名2:属性 值2,属性名3:属性值3…}(具体内容请参照书。)
6.2.3 使用自定义构造函数创建对象
6.3.4 删除对象的属性
• 在JavaScript中,可以使用delete运算符来删除 一个对象的属性。删除对象属性之后,该属性将 不再属于该对象。在JavaScript中读取一个不存 在的对象属性时,与读取一个没赋值的对象属性 一样,都会返回undefined。所以很多程序员都以 为删除对象属性就是将对象的属性值设为 undefined。(具体内容请参照书。)
6.6.6 hasOwnProperty()方法:判断属 性是否是非继承的
JavaScript对象
JavaScript对象在前面介绍过,JavaScript是一种基于对象的脚本语言。
基于对象或面向对象是编程语言中处理问题的方式,即把某些实体作为一个对象来看待。
如在客观世界中,可以把一本书、一头牛作为一个对象来看待,这些都是独立存在的客观实体,本身具有一些属性或方法。
书具有名称、页数等;牛除了具有颜色、体重等,还具有吃、跑等动作。
在JavaScript脚本语言中,可以把数组、函数等作为对象来看待。
在JavaScript中常用的对象有浏览器对象、脚本语言内置对象、HTML对象、自定义对象。
浏览器对象,就是浏览器中可以利用的一些对象,如document文档对象、History历史记录对象等;脚本语言内置对象通常为JavaScript脚本语言中,本身所具有的核心对象,如字符串对象、日期时间对象、熟悉对象等。
HTML对象实际上就是我们熟悉的HTML标记,如段落标记P、层标记DIV等。
自定义对象就是根据程序需要所创建的函数、数组等,特别是函数。
对于后面两种对象,本节就不再介绍了,会在后面的章节中陆续使用到。
1.脚本语言内置对象脚本语言内置对象是JavaScript中内置的一些对象,可以用在JavaScript的客户端或服务器端,也可以称为核心语言对象。
主要包括数学对象Math、日期时间对象Date和字符串对象string。
(1)数学对象MathMath对象是JavaScript中内置的核心语言对象,主要用来处理关于数序运算方面的计算。
如求取一个数的绝对值、两个数的和。
Math对象具有的属性和方法如表8-11所示:表8-11 Math对象的属性和方法(2)字符串对象字符串对象String是最常用的一种对象,如在客户端校验数据信息时,用来判断一个字符串是否包含数字、求取一个字符串的长度、匹配字符串等。
在JavaScri pt中,创建字符串对象的方法很多,如var s=“中国”或ss=new String(“hello”);字符串对象常用属性和方法如表8-12所示:表8-12 字符串对象常用属性和方法在上面表中,属性length和方法indexOf需要注意。
JSE-6 类和对象
JSE-6 类和对象
第六章、类和对象
6.1类和对象的基本概念
类型(类):
指一个名词概念,如:客人、菜品、厨师。
引用(变量):
指引用具体概念实例的代词,如:某人、某菜。
对象(new 构造器):
指具体概念的个体实例,如:张三丰这个人、一盘大盘鸡。
6.2类和对象的内存表示
6.3类的格式
一个.java文件包含哪些内容?
–package—包
–import ---引入的其它包
–类的定义
{
//属性(类变量(static修饰的属性),和成员变量) //方法(函数, 静态函数, 构造函数)
//代码块(静态的代码块,代码块)
6.4类和对象的练习
6.5构造方法
为什么需要构造方法?
创建对象
构造方法和空构造方法
1.当我们在程序中使用new运算符生成对象时,系统就会自动调用
类的构造方法。
2.如果程序员没有明确的定义构造方法,则系统会自动为该类添加
默认的无参构造方法。
3.根据生成对象时传递的参数来决定调用哪个构造方法。
6.6方法的重载
1.同一个类中
6.7匿名对象
//匿名类一次性的使用对象
new Person(25,"无名氏").sayHello();
6.8this 和static
* this
* this.变量代表在本类中定义成员变量
6.9单例模式。
ASP JavaScript对象
ASP JavaScript对象JavaScript语言是基于对象的(Object Based),而不是面向对象的(Object Ori ented)。
之所以说它是一门基于对象的语言,主要是因为它没有提供抽象、继承、重载等有关面向对象语言的许多功能,而是把其它语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统。
JavaScript对象大体上可以分为三种:浏览器对象、JavaScript内置对象、自定义对象三种。
1.浏览器对象1)Window对象Window 对象表示一个浏览器窗口或者一个框架。
在客户端JavaScript 中,W indow 对象是全局对象,所有的表达式都在当前的环境中计算。
也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。
例如,可以只写document,而不必写Window.document。
同样,可以把当前窗口对象的方法当作函数来使用,如只写alert(),而不必写Window.alert()。
Window对象定义了许多属性和方法,这些属性方法在客户端JavaScript脚本编程时会经常用到。
表8-16、表8-17分别列出了Window对象常用的属性和方法。
表8-16 Windows对象属性表8-17 Windows对象属性Navigator对象是由JavaScript runtime engine自动创建的,包含有关客户机浏览器的信息。
Navigator最初是在Netscape Navigator 2中提出的,但Internet Expl orer也在其对象模型中支持这个对象,而且还提供了替代对象clientInformation,这个对象与Navigator相同。
表8-18列出了Navigator对象的所有属性。
每个Window对象都有Document属性,该属性引用表示在窗口中显示的HTM L文件。
除了常用的Write()方法之外,Document对象还定义了提供文档整体信息的属性,如文档的URL、最后修改日期、文档要链接到URL、显示的颜色等等。
网页设计与制作教程——Web前端开发(第6版)课件第8章 JavaScript对象模型8.2
习题8
3.使用对象的事件编程实现当用户选择下拉菜单的颜色时,文本框的字体颜色跟随改 变,如图8-19所示。
《网页设计与制作教程-Web前端开发(第6版)》 刘瑞新主编 配套资源
自由思想,独立思考
1. HTML Document对象的集合 HTML Document对象的常用集合见表8-14。
8.2 DOM的对象
8.2 DOM的对象
2. HTML Document对象的属性 HTML Document对象的常用属性,见表8-15。
Байду номын сангаас
8.2 DOM的对象
3. HTML Document对象的方法 HTML Document对象的常用方法见表8-16。
8.2 DOM的对象
8.2.3 Node对象 Node(节点)对象代表文档树中的一个节点,Node对象是整个DOM的核心对象。 1. Node对象的属性 每个节点都有其节点的属性,Node对象的常用属性见表8-10。
8.2 DOM的对象
(1)nodeName nodeName属性含有某个节点的名称,其中: 1)元素节点的nodeName值是标签名称。 2)属性节点的nodeName值是属性名称。 3)文本节点的nodeName值永远是#text。 4)文档节点的nodeName值永远是#document。 (2)nodeValue 对于文本节点,nodeValue属性包含文本内容。对于属性节点,nodeValue属 性包含属性值。对于文档节点和元素节点,nodeValue属性不可用。 (3)nodeType nodeType属性返回节点的类型,其中最重要的节点类型见表8-11。
8.2 DOM的对象
8.2.6 HTML Element对象
JavaScript对象学习总结
执行时出现”。这意味着开发者不必明确实例化内置对象,它已被实例 化了。ECMA-262 只定义了两个内置对象,即 Global 和 Math (它 们也是本地对象,根据定义,每个内置对象都是本地对象)。 宿主对象 所有非本地对象都是宿主对象(host object),即由 ECMAScript 实 现的宿主环境提供的对象。 所有 BOM 和 DOM 对象都是宿主对象。
oCar1.showColor(); oCar2.showColor();
//输出 "red" //输出 "blue"
在上面的代码中,首先用 this 定义函数 showColor(),然后创建两个 对象(oCar1 和 oCar2),一个对象的 color 属性被设置为 "red", 另一个对象的 color 属性被设置为 "blue"。两个对象都被赋予了属性 showColor,指向原始的 showColor () 函数(注意这里不存在命名 问题,因为一个是全局函数,而另一个是对象的属性)。调用每个对象 的 showColor(),oCar1 输出是 "red",而 oCar2 的输出是 "blue"。这是因为调用 oCar1.showColor() 时,函数中的 this 关键 字等于 oCar1。调用 oCar2.showColor() 时,函数中的 this 关键字 等于 oCar2。 注意,引用对象的属性时,必须使用 this 关键字。例如,如果采用下 面的代码,showColor() 方法不能运行:
}
sayHello();
//输出 "hello"
sayHello.alternate(); //输出 "hi"
Javascript教程--从入门到精通【完整版】
Javascript教程--从入门到精通【完整版】(作者:未知,来源:互联网整理:Alone)JavaScript教程语言概况Internet时代,造就了我们新的工作和生活方式,其互联性、开放性和共享信息的模式,打破了传统信息传播方式的重重壁垒,为我们带来了新的机遇。
随着计算机和信息时代的到来,人类社会前进的脚步在逐渐加快,每一天都有新的事情发生,每一天都在创造着奇迹。
随着Internet技术的突飞猛进,各行各业都在加入Internet的行业中来。
无论从管理方面,还是从商业角度来看,Internet都可以带来无限生机。
通过Internet,可以实现地区、集体乃至个人的连接,从而达到一种“统一的和谐”。
那么怎样把自己的或公司的信息资源加入到WWW 服务器,是广大用户日益关心的问题。
采用超链技术(超文本和超媒体技术)是实现这个目标最简单的、最快速的手段和途径。
具体实现这种手段的支持环境,那就是HTML超文本标识语言。
通过它们可制作所需的Web网页。
通过超文本(Hyper Text)和超媒体(Hyper Media)技术结合超链接(Hyper link)的链接功能将各种信息组织成网络结构(web),构成网络文档(Document),实现Internet上的“漫游”。
通过HTML符号的描述就可以实现文字、表格、声音、图像、动画等多媒体信息的检索。
然而采用这种超链技术存在有一定的缺陷,那就是它只能提供一种静态的信息资源,缺少动态的客户端与服务器端的交互。
虽然可通过CGI(Common Gateway Interface)通用网关接口实现一定的交互,但由于该方法编程较为复杂,因而在一段时间防碍了Internet技术的发展。
而JavaScript的出现,无凝为Internet网上用户带来了一线生机。
可以这样说,JavaScript的出现是时代的需求,是当今的信息时代造就了JavaScript。
JavaScript的出现,它可以使得信息和用户之间不仅只是一种显示和浏览的关系,而是实现了一种实时的、动态的、可交式的表达能力。
js 入门教程
js 入门教程JavaScript(简称JS)是一种轻量级的脚本语言,用于在网页中添加交互功能。
它是目前最常用的编程语言之一,用于前端开发以及构建现代化的网页应用程序。
作为一种脚本语言,JavaScript不需要预编译,而是在运行时由浏览器解释执行。
这使得开发者可以直接在网页的HTML 标签中嵌入JavaScript代码。
JavaScript的语法简洁易懂,类似于C语言家族的语法,非常容易入门。
在JavaScript中,你可以使用变量来存储数据。
定义一个变量非常简单,只需要使用var关键字,然后给变量起一个名称即可。
例如,var message = "Hello, World!";定义了一个名为message的变量,并将字符串"Hello, World!"赋值给它。
除了变量之外,JavaScript还支持各种数据类型,包括数字、字符串、布尔值、数组、对象等等。
你可以使用这些数据类型来在代码中处理和存储不同类型的数据。
但是,JavaScript的真正强大之处在于它的各种内置函数和能力。
JavaScript的内置函数可以让你轻松地执行各种操作,比如字符串处理、数组遍历、日期处理等等。
此外,JavaScript 还具有事件处理、DOM操作和Ajax等功能,可以与用户进行交互,并动态地改变网页的内容和样式。
如今,JavaScript已经不仅仅限于浏览器中运行,也可以在服务器端运行,比如使用Node.js。
这使得JavaScript成为一种全栈开发语言,可以进行前端和后端的开发。
总而言之,JavaScript是一种非常实用和易学的编程语言。
它广泛用于网页开发,为网页添加交互和动态性。
无论你是初学者还是有经验的开发者,学习JavaScript都是非常有意义的。
掌握JavaScript将使你成为一名优秀的Web开发者,并帮助你构建出色的网页应用程序。
如果你还没有学习JavaScript,那就赶快开始吧!。
JavsScript对象-面向对象
JavsScript对象-⾯向对象理解对象对象这个词如雷贯⽿,同样出名的⼀句话:XXX语⾔中⼀切皆为对象!对象究竟是什么?什么叫⾯向对象编程?对象(object),台湾译作物件,是⾯向对象(Object Oriented)中的术语,既表⽰客观世界问题空间(Namespace)中的某个具体的事物,⼜表⽰软件系统解空间中的基本元素。
在软件系统中,对象具有唯⼀的标识符,对象包括属性(Properties)和⽅法(Methods),属性就是需要记忆的信息,⽅法就是对象能够提供的服务。
在⾯向对象(Object Oriented)的软件中,对象(Object)是某⼀个类(Class)的实例(Instance)。
—— 维基百科对象是从我们现实⽣活中抽象出来的⼀个概念,俗话说物以类聚,⼈以群分,我们也经常说有⼀类⼈,他们专业给隔壁家制造惊喜,也就是我们说的⽼王这⾥⾯就有两个重要概念1. 类:⽆论是物以类聚,还是有⼀类⼈,这⾥说的类并不是实际存在的事物,是⼀些特征、是⼀些规则等2. ⽼王:这是个实物,是现实存在,和类的关系就是符合类的描述对应到计算机术语,类就是class,定义了⼀些特点(属性 property)和⾏为(⽅法 method),⽐如说给隔壁制造惊喜的这类⼈有⼏个特征1. 长相⽂质彬彬,为⼈和善2. 姓王同时这些⼈还有技能(⾏为)1. 帮隔壁修下⽔道2. 亲切问候对⽅⼉⼦我们刚才就描述了⼀个类,⽤代码表⽰就是class LaoWang{string name;string familyNmae = "wang";bool isKind = true;LaoWang(string name){ = name;}void fixPipe(){statement}void greetSon(){statement}}符合这些特点并且有上述⾏为能⼒的,我们称之为⽼王,从描述我们就可以看出来LaoWang不是指某个⼈,⽽是指⼀类⼈,符合上述描述的都可能是⽼王!⽤计算机术语说就是没个活蹦乱跳的⽼王都是类LaoWang的实例。
javascript内置对象大全讲解
javaScript 对象大全javaScript 对象大全JavaScript是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。
JavaScript语言的前身叫作Livescript。
JavaScript的特点:1.简单、易学、易用;2.跨平台;IE、Navigator3.符合ECMA(欧洲计算机制造协会)标准,可移植;4.事件驱动式的脚本程序设计思想;5.动态、交互式的操作方式。
JavaScript的作用:1.交互式操作;2.表单验证;3.网页特效;4.Web游戏5.服务器脚本开发等。
JavaScript的编写环境:文本编辑器JavaScript的执行平台:Web浏览器JavaScript的执行方式:解释执行(由上而下)JavaScript的版本:JavaScript1.0——JavaScript1.4浏览器对JavaScript的支持:1.JavaScript/IE3.0、JavaScript1.2/IE4.0;2.微软允许用户自行设置对JavaScript处理模式。
JavaScript与Java、VBScript、JScript的关系:JavaScript与Java的区别体现在:首先,它们是两个公司开发的不同的两个产品,Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。
其次,JavaScript是基于对象的,而Java是面向对象的,即Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。
J avaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。
它是一种基于对象和事件驱动的编程语言。
javascript的对象
计算number的自然对数 计算所有参数的最大值 计算所有参数的最小值 计算x的y次方 返回0.0到1.0之间的伪随机数 返回与number最接近的整数 计算number的正弦 计算number的平方根 计算number的正切
JavaScript的内部对象 JavaScript的内部对象
全局(Global) 全局(Global)对象 是一个固有静态对象,目的是将所有全局方法集中在一个对象中. 是一个固有静态对象,目的是将所有全局方法集中在一个对象中. Global 对象从不直接使用,并且不能用 new 运算符创建。它在 Script 引擎被初始化时创建,并立即使其方法和属性可用。 属性: 属性: Infinity 返回Number.POSITIVE_INFINITY的值 返回Number.POSITIVE_INFINITY的值 NaN 返回NaN,表示表达式不是数字 返回NaN,
javascript的对象 javascript的对象
javascript的对象 javascript的对象
function ClassA() { ClassA() this.变量1=变量1的值; this.变量1=变量1的值; this.变量2=变量2的值; this.变量2=变量2的值; ……; ……; this.函数1= this.函数1= function() { 函数体 }; this.函数2= this.函数2= function() { 函数体 }; ……; ……;
}
<script language="javascript"> language="javascript"> function Person(n,a) //对象的构造函数 Person(n,a) //对象的构造函数 { this.age=a; this.age=a; =n; this.say=function this.say=function () { alert(+":"+this.age); alert(+":"+this.age); } } var person1=new Person("张三",18); Person("张三",18); person1.say(); var person2=new Person("李四",20); Person("李四",20); person2.say(); </script>
JavaScript基础知识
由事件引发程序的响应,执行事先准备 好的事件处理代码,这种程序运行方式 称为事件驱动。 4、 事件处理代码(Event Handle) JavaScript 中事件处理代码通常定义为 函数的形式,在其中加入所需要的处理 逻辑,并将之关联到所关注的事件源组 件上。
常用的事件类型 OnClick 组件被点击 onDbClick 组件被双击 onLoad 页面加载 onUnload 页面卸载 onChange 组件内容发生变化或条目选中状 态发生变化 onMouseMove 鼠标移动 onFocus 获得焦点 onBlur 失去焦点
变量 (1) 命名规则:
<1>必须以字母、下划线或美元符号开头,
猿说教育前端学院整理教务处出版
后面可以跟字母、下划线、美元符号和 数字。 <2>变量名区分大小写。 <3>不允许使用 JavaScript 关键字做变 量名。 <4>使用 Var 声明变量,变量声明时不指 定具体数据类型,其具体数据类型由给 其赋的值决定。也可以不经声明而直接 使用变量,但必须先赋值再取值。 例 04.html
Unshift:将数据添加到数组的开头,并返回 数组的长度 Var a = [1,2,3,4] Var b = a.Unshift (0,-1);
A =[0,-1, 1,2,3,4] b = 6;
Pop:删除数组的最后一项, 并返回删除元 素的值;如果数组为空则返回 undefined。
Push: 将数据添加到数组的尾部,并返回数 组的长度
数组 数组是多个相同类型数据的组合,实现
对数据的统一管理。 JavaScript 数组的声明方式: Var a = new Array(); Var b = new Array(size); Var c = new Array(v1,v2,v3,…); JavaScript 数 组 长 度 可 变 , 数 组 对 象 的
网页基础:第6次课JavaScript对象
String 对象 3-1
创建字符串有两种不同方法 : 使用 var 语句
var newstr = “这是我的字符串"
创建 String 对象
var newstr = new String (“这是我的字符串")
18
String 对象 3-2
名称
说明
属性 length
返回字符串的长度
语法:big( )
<SCRIPT LANGUAGE = "JavaScript">
function checkEmail( )
{
var e=document.myform.email.value;
if (e.length==0) //检测长度是否为0,即是否为空
{
alert("电子邮件不能为空!");
return ; } if (e.indexOf("",0)==-1)
数组 4-3
常用属性 length :返回数组中元素的个数
常用方法
方法 join reverse
sort
说明
将数组中的元素组合成字符串 颠倒数组元素的顺序,使第一个元素成为最后一个,而最 后一个元素成为第一个 对数组元素进行排序
6
数组排序 4-2
<HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> var emp = new Array(3); emp[0] = "Ryan Dias"; emp[1] = "Graham Browne"; emp[2] = "David Greene"; emp.sort( ); document.write(“排序结果是:<HR>"); document.write(emp[0]+"<BR>"); document.write(emp[1]+"<BR>"); document.write(emp[2]+"<BR>"); </SCRIPT> </HEAD> </HTML>
2024版JavaScript基础课件完整版
数组的定义与使用
数组的定义
数组是一种特殊的对象,用于存储一 系列有序的值。在JavaScript中,数 组可以包含任意类型的值,包括数字、 字符串、布尔值、对象等。
数组的使用
可以通过索引来访问数组中的元素,使 用push()和pop()方法添加或删除元素, 使用sort()和reverse()方法对数组进行 排序或反转等操作。
DOM结构 DOM将HTML或XML文档转化为一个树形结构,文档中 的每个元素、属性和文本都被视为一个节点(Node), 节点之间通过父子或兄弟关系形成树状结构。
节点类型
在DOM中,节点类型包括元素节点、属性节点、文本节 点、注释节点等。
访问和修改DOM元素
获取元素 修改元素内容 修改元素属性 修改元素样式
辑非等。
用于将右侧的值赋给左 侧的变量,如等于赋值、
加等于、减等于等。
控制流语句
条件语句
使用`if...else`语句根据条 件执行不同的代码块。
循环语句
使用`for`、`while`或 `do...while`语句重复执行 一段代码,直到满足特定 条件为止。
跳转语句
使用`break`或`continue` 语句在循环中提前结束或 跳过当前迭代。
常用内置对象与方法
Date对象
用于处理日期和时间,可以创建 日期实例、获取日期和时间信息、 进行日期计算等。
String对象
用于处理字符串,提供了许多字 符串操作方法,如charAt()、 indexOf()、replace()等。
Math对象
提供了一系列数学常数和函数, 如Math.PI、Math.random()、 Math.sin()等。
本地开发环境
JavaScript 事件对象介绍
web前端培训教程:JavaScript 事件对象介绍JavaScript 在事件处理函数中默认传递了event 对象,也就是事件对象。
但由于浏览器的兼容性,开发者总是会做兼容方面的处理。
jQuery 在封装的时候,解决了这些问题,并且还创建了一些非常好用的属性和方法。
一.事件对象事件对象就是event 对象,通过处理函数默认传递接受。
之前处理函数的e 就是event事件对象,event 对象有很多可用的属性和方法,我们在JavaScript 课程中已经详细的了解过这些常用的属性和方法,这里,我们再一次演示一下。
//通过处理函数传递事件对象$('input').bind('click', function (e) { //接受事件对象参数alert(e);});//通过event.type 属性获取触发事件名$('input').click(function (e) {alert(e.type);});//通过event.target 获取绑定的DOM 元素$('input').click(function (e) {alert(e.target); });//通过event.data 获取额外数据,可以是数字、字符串、数组、对象$('input').bind('click', 123, function () { //传递data 数据alert(e.data); //获取数字数据});注意:如果字符串就传递:'123'、如果是数组就传递:[123,'abc'],如果是对象就传递:{user : 'Lee', age : 100}。
数组的调用方式是:e.data[1],对象的调用方式是:er。
//event.data 获取额外数据,对于封装的简写事件也可以使用$('input').click({user : 'Lee', age : 100},function (e) {alert(er);});注意:键值对的键可以加上引号,也可以不加;在调用的时候也可以使用数组的方式:alert(e.data['user']);//获取移入到div 之前的那个DOM 元素$('div').mouseover(function (e) {alert(e.relatedTarget);});//获取移出div 之后到达最近的那个DOM 元素$('div').mouseout(function (e) {alert(e.relatedTarget); });//获取绑定的那个DOM 元素,相当于this,区别与event.target$('div').click(function (e) {alert(e.currentTarget);});注意:event.target 得到的是触发元素的DOM,event.currentTarget 得到的是监听元素的DOM。
javascript基础
Javascript 基础知识学习目标Javascript 编程基础Javascript 工作原理如何在html 页面中使用javascript(数据类型、变量、常量、运算符、表达式、控制流程、数组、函数)Javascript 事件处理对象和系统函数浏览器对象什么是javascriptJavascript是Netscape 公司开发的一种脚本语言。
该语言编写的程序可以被嵌入到html 页面中,并直接在浏览器中解释执行。
Javascript功能(1)增强页面动态效果(2)实现页面与用户之间的实时、动态交互Javascript语言特点脚本语言(script language)解释执行(interpreted language)基于对象(object based)事件驱动(event driven)简单弱类型(weakly typed language)Javascript 嵌入到html页面中在html页面中使用<script>标记嵌入脚本代码。
<script language =”javscript”>type=”text/javascript”</script>Javascript 代码的出现位置(1)Html 页面主体部分(<body>)(2)Html页面头部(<head>)(3)单独的外部文件<script language=”javascript”src=”外部脚本文件”></script> 3.html数据类型Javascript 支持基本数据类型和对象类型(1)基本数据类型整形浮点型字符型布尔型(2)对象类型内置对象(string math date)浏览器对象(window document history form …)用户自定义对象变量(1)命名规则:<1>必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号、数字<2>变量名要区分大小写<3>不允许使用javascript关键字做变量名。
jsobject(对象)
jsobject(对象)Object(对象)是在所有的编程语⾔中都⼗分重要的⼀个概念,对于事物我们可以把他们看作是⼀个对象,⽽每⼀个事物都有⾃⼰的表⽰的属性和对于某⼀信息作出的相应的操作。
⽽这些东西就变成了事物的属性和⽅法。
在JS中我们可以见到的对象常量有如下的形式:1 var obj= {23 name:"Arvin",45 lastName:"Huang" ,67 whatsName:function(){89 alert(+" "+stName);1011 },1213 }由上⾯的代码我们可以看出实际上在JS中的对象就是⼀个以键值对形式存储属性的⼀个集合,每⼀个属性有⼀个特定的名称,并与名称相对应的值。
其实这种关系是有⼀个专有名称的,我们可以称之为映射,当然对于对象来说,除了可以通过这种⽅式来保持⾃有属性,还可以通过继承的⽅式来获取继承属性。
这种⽅式我们称作“原型式继承”。
接下来我们将从js对象的属性,属性特性,⽅法和对象特性等多个⽅⾯来学习对象的概念。
⼀:js对象创建与对对象属性。
我们先看如下的代码。
1 var built = function(){23 var me = this;4 = "Arvin";56 }78 built.prototype = {9 toStr:function(value){10 alert("there have a " + value);11 }1213 };1415 var obj = new built();上⾯的代码就描述了⼀种我们常常使⽤到的⼀种创建对象的⽅法,使⽤new关键字来创建⼀个拥有独⽴内存区域和指向原型的指针的对象。
当我们使⽤的new的时候,js解析器会分配⼀块内存空间,⽤以存放当前的对象的⾃有属性。
之后解析器会给这⼀对象⼀个_proto_属性指向的原型对象内容。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
指出代码错误
}
2
使用数组 使用循环语句控制应用程序 创建自定义函数 理解 JavaScript 对象 使用 String、Math 和 Date 等对象
目标
3
数组 4-1
声明数组
var 数组名 = new Array(数组大小);
例: var emp = new Array(3)
添加元素
第八章 JavaScript 核心语言对象
回顾
声明一个变量x,初值为10,对应的js代码? alert(10+“30”);显示为什么效果? 将字符串转换为整数,使用哪个函数?
var x=“c”,var y;
switch(x)
{ case “a”:
y=5;
case ‘b’ :
y=6;
default: y=0;
7
ACCP V4.0
for循环 do-while while
8
循环
for 循环
<HTfoMrL循> 环 例<H:EAD>
<TIvTaLrEi>;For 循环演示</TITLE>
如何实现
<dfooSdrcCf{o(ouv/cRm/rauIr语(Pmeiin=T=e句t0n.L0w;tA;.;rwiiiN<<tre1G1it(0e"0U<0(;"AH;<iGi+2H=E+iRa+)l5=iag)nl"iJg=ancv=eacnSetecnrrt>iep打rt"w>印id金th字="塔+ 直i+"线%<>/"H);2>");
do{
先执行,后判断循环条件
{
va/r/语c =句pr;ompt("输入一个字符,输入N 或n停止","A") ;
}wd}ohwcilhueiml(ece(!n循=t".w环Nr"i条t&e&件("c<)f;!o=n"nt "c)l;ass=myfont >"+c+"</font>");
</SCRIPT> </1H0 EAD>
14
调用函数
<FORM action="" method="post" name="myform" > <P>第一个数<INPUT name="num1" type="text"> <BR>第二个数<INPUT name="num2" type="text">
JavaScript 函数
内置函数
eval 函数: 用于计算字符串表达式的值 isNaN 函数:用于验证Ja参va数Sc是rip否t 代为码NaN(非数字)
<SCRIPT LANGUAGE = "JavaScript"> var str1=prompt(“输入一个表达式,我给您计算","1+1"); var result=eval(str1); document.write(str1+"="+result); var x = prompt("输入一些数据","0"); if (isNaN(x))
</S}CRIPT> 当i=5 时,<HR align=center width=5%>
</HEAD>
<BODY>
</BODY>
</HTML>
9
while和do-while循环
<HwEAhDil>e循环
<.SmTwyYfhLoiEnlett(y循pe环="条tex件t/c)ss">
{{
font-size:150;
alert (x + " 不是一个数字"); else
alert (x + " 是一个数字"); </SCRIPT>
11
自定义函数
定义函数:
function 函数fu名nc(tio参n 数su1m,参( 数on2e,, t…wo))
{
{
语句; var result = one + two;
}
return result;
emp
emp[0] = “AA";
AA
emp[1] = “BB"; emp[2] = “CC";
BB
CC
也可以声明数组并赋初值: 例: var emp=new Array(“AA”,“BB”,“CC”);
4
数组 4-2
<HTML> <HEAD> <TITLE>使用数组</TITLE> <SCRIPT LANGUAGE = "JavaScript"> var emp = new Array(3); emp[0] = "Ryan Dias"; emp[1] = "Graham Browne"; emp[2] = "David Greene"; document.write("数组emp中的数据为:<HR>"); document.write(emp[0]+"<BR>"); document.write(emp[1]+"<BR>"); document.write(emp[2]+"<BR>"); </SCRIPT> </HEAD> <5/HTML>
数组 4-3
常用属性 length :返回数组中元素的个数
常用方法
方法 join reverse
sort
说明
将数组中的元素组合成字符串 颠倒数组元素的顺序,使第一个元素成为最后一个,而最 后一个元素成为第一个 对数组元素进行排序
6
数组排序 4-2
<HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> var emp = new Array(3); emp[0] = "Ryan Dias"; emp[1] = "Graham Browne"; emp[2] = "David Greene"; emp.sort( ); document.write(“排序结果是:<HR>"); document.write(emp[0]+"<BR>"); document.write(emp[1]+"<BR>"); document.write(emp[2]+"<BR>"); </SCRIPT> </HEAD> </HTML>
colo/r/:语#c句99c;96;
输入一个字符,直
f}on} t-family:Webdings
</SdToYL-E>while循环
//产生埃及到图N像停的止特殊,字用体哪个循 环
<script language="JavaScript">
dodcuoment.write("<H3>每个字符都对应一个漂亮的埃及图像</H3>");
}表示单击此按钮时,调用函sum( )执调用函数:
行
函数调用一般和表单元素的事件一起使用,调用格式为:
<事IN件P名U=T“n函am数e名=”“ad;d” type=“button” value=“加法" onClick="sum(2,5)">
12
函数的应用
num1 num2 result
13