基于对象的JavaScript语言

一朵小花儿6

一朵小花儿6

2016-02-19 21:25

下面是个简单易学的基于对象的JavaScript语言教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

  JavaScript语言是基于对象的(Object-Based),而不是面向对象的(object-oriented)。之所以说它是一门基于对象的语言,主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统。

  虽然JavaScript语言是一门基于对象的,但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象,从而进一步扩大JavaScript的应用范围,增强编写功能强大的Web文档。

  一、对象的基础知识

  1、对象的基本结构

  JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中,实现信息的装载单位,从而与变量相关联;后者是指对象能够按照设计者的意图而被执行,从而与特定的函数相联。

  2、引用对象的途径

  一个对象要真正地被使用,可采用以下几种方式获得:

  o 引用JavaScript内部对象;
  o 由浏览器环境中提供;
  o 创建新对象。

  这就是说一个对象在被引用之前,这个对象必须存在,否则引用将毫无意义,而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象,要么利用现存的对象。

  3、有关对象操作语句

  JavaScript不是一纯面向对象的语言,它设有提供面向对象语言的许多功能,因此JavaScript设计者之所以把它你“基于对象”而不是面向对象的语言,在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。

  (1) For...in语句

  格式如下:

For(对象属性名 in 已知对象名)
说明:
o 该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量;而不是使用计数器来实现的。
o 该语句的优点就是无需知道对象中属性的个数即可进行操作。
例:下列函数是显示数组中的内容:
Function showData(object)
for (var X=0; X30;X++)
document.write(object[i]);
 
  该函数是通过数组下标顺序值,来访问每个对象的属性,使用这种方式首先必须知道数组的下标值,否则若超出范围,则就会发生错误。而使For...in语句,则根本不需要知道对象属性的个数,见下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

Function showData(object)
for(var prop in object)
document.write(object[prop]);
 
  使用该函数时,在循环体中,For自动将的属性取出来,直到最后为此。

  (2) with语句

  使用该语句的意思是:在该语句体内,任何对变量的引用被认为是这个对象的属性,以节省一些代码。

with object{
...}

  所有在with语句后的花括号中的语句,都是在后面object对象的作用域的。

  (3) this关键字

  this是对当前的引用,在JavaScript由于对象的引用是多层次,多方位的,往往一个对象的引用又需要对另一个对象的引用,而另一个对象有可能又要引用另一个对象,这样有可能造成混乱,最后自己已不知道现在引用的那一个对象,为此JavaScript提供了一个用于将对象指定当前对象的语句this。

  (4) New运算符

  虽然在JavaScript中对象的功能已经是非常强大的了。但更强大的是设计人员可以按照需求来创建自己的对象,以满足某一特定的要求。使用New运算符可以创建一个新的对象。其创建对象使用如下格式:

Newobject=NEW Object(Parameters table);

  其中Newobject创建的新对象:object是已经存在的对象; parameters table参数表;new是JavaScript中的命令语句。

  如创建一个日期新对象

newData=New Data()
birthday=New Data (December 12.1998)
之后就可使NewData、birthday作为一个新的日期对象了。

  4、对象属性的引用

  对象属性的引用可由下列三种方式之一实现:

  (1)使用点(.)运算符

university.Name=“云南省”
university.city=“昆明市”
university.Date="1999"
 
  其中university是一个已经存在的对象,Name、City、Date是它的三个属性,并通过操作对其赋值。

  (2)通过对象的下标实现引用

university[0]=“云南”
university[1]=“昆明市”
university[2]="1999"
  
  通过数组形式的访问属性,可以使用循环操作获取其值。

function showunievsity(object)
for (var j=0;j2; j++)
document.write(object[j])
 
  若采用For...in则可以不知其属性的个数后就可以实现:

Function showmy(object)
for (var prop in this)
docament.write(this[prop]);
 
  (3)通过字符串的形式实现

university["Name"]=“云南”
university["City"]=“昆明市”
university["Date"]="1999"

  5、对象的方法的引用

  在JavaScript中对象方法的引用是非常简单的。

ObjectName.methods()

  实际上methods()=FunctionName方法实质上是一个函数。 如引用university对象中的showmy()方法,则可使用:

document.write (university.showmy())

或:document.write(university)

  如引用math内部对象中cos()的方法则:

with(math)
document.write(cos(35));
document.write(cos(80));

  若不使用with则引用时相对要复杂些:

document.write(Math.cos(35))
document.write(math.sin(80))
 
  二、常用对象的属性和方法

  JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。

  在JavaScript提供了string(字符串)、math(数值计算)和Date(日期)三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。

  1、常用内部对象

  在JavaScript中对于对象属性与方法的引用,有两种情况:其一是说该对象是静态对象,即在引用该对象的属性或方法时不需要为它创建实例;而另一种对象则在引用它的对象或方法是必须为它创建一个实例,即该对象是动态对象。

  对JavaScript内部对象的引用,以是紧紧围绕着它的属性与方法进行的。因而明确对象的静动性对于掌握和理解JavaScript内部对象是具有非常重要的意义。

  1)、串对象

  o string对象:内部静态性。
  o 访问properties和methods时,可使用(.)运算符实现。
  o 基本使用格式:objectName.prop/methods

  (1)串对象的属性

  该对象只有一个属性,即length。它表明了字符串中的字符个数,包括所有符号。例:

mytest="This is a JavaScript"
mystringlength=mytest.length

  最后mystringlength返回mytest字串的长度为20。

  (2)串对象的方法

  string对象的方法共有19个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。

  其主要方法如下:

  o 锚点anchor():该方法创建如用Html文档中一样的anchor标记。使用anchor如用Html中(A Name="")一样。通过下列格式访问:string.anchor(anchorName)。

  o 有关字符显示的控制方法

big字体显示, Italics()斜体字显示,bold()粗体字显示,blink()字符闪烁显示,small()字符用小体字显示,fixed()固定高亮字显示、fontsize(size)控制字体大小等。

  o 字体颜色方法;fontcolor(color)
  o 字符串大小写转换
toLowerCase()-小写转换,toUpperCase()大写转换。下列把一个给定的串分别转换成大写和小写格式:
string=stringValue.toUpperCase和string=stringValue.toLowerCase。
  o 字符搜索:indexOf[charactor,fromIndex]

  从指定formIndtx位置开始搜索charactor第一次出现的位置。

  返回字串的一部分字串:substring(start,end)

  从start开始到end的字符全部返回。
 
  2)、算术函数的math对象

  功能:提供除加、减、乘、除以外的一引些自述运算。如对数,平方根等 。

  静动性:静态对象

  (1)主要属性

  math中提供了6个属性,它们是数学中经常用到的常数E、以10为底的自然对数LN10、以2为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。

  (2)主要方法

  绝对值:abs()
  正弦余弦值:sin(),cos()
  反正弦反余弦 :asin(), acos()
  正切反正切:tan(),atan()
  四舍五入:round()
  平方根:sqrt()
  基于几方次的值:Pow(base,exponent)
...
  3)、日期及时间对象

  功能:提供一个有关日期和时间的对象。

  静动性:动态性,即必须使用New运算符创建一个实例。例:

MyDate=New Date()

  Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。

  日期起始值:1770年1月1日00:00:00。

  1. 获取日期的时间方法

 getYear(): 返回年数
 getMonth():返回当月号数
 getDate(): 返回当日号数
 getDay():返回星期几
 getHours():返回小时数
 getMintes(:返回分钟数
 getSeconds():返回秒数
 getTime() : 返回毫秒数

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  (2)设置日期和时间:

 setYear();设置年
 setDate():设置当月号数
 setMonth():设置当月份数
 setHours():设置小时数
 setMintes():设置分钟数
 setSeconds():设置秒数
 setTime ():设置毫秒数
...
  2、JavaScript中的系统函数

  JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数,使用这些函数不需创建任何实例,可直接用。

  1.返回字符串表达式中的值:

 方法名:eval(字串表达式),例:
test=eval("8+9+5/2");

  2. 返回字符串ASCI码:

 方法名:unEscape (string)

  3.返回字符的编码:

 方法名:escape(character)

  4.返回实数:

parseFloat(floustring);

  5.返回不同进制的数:

parseInt(numbestring ,rad.X)

  其中radix是数的进制,numbs字符串数
 
  三、范例

  下面是一个时钟显示的JavaScript文档。在文档中用了非常多的函数。

Test4_1.htm
html
head
style TYPE="text/css"
style
/style
title时钟/title
script LANGUAGE="JavaScript"
function showClock() {
}
function hideClock() {
}
var timerID = null
var timerRunning = false
function stopClock() {
if(timerRunning)
clearTimeout(timerID);
timerRunning = false
document.clock.face.value = "";
}
function showTime() {
var now = new Date();
var year = now.getYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hours = now.getHours();
var mins = now.getMinutes();
var secs = now.getSeconds();
var timeVal = "";
timeVal += ((hours = 12) ? hours : hours - 12);
timeVal += ((mins 10) ? ":0" : ":") + mins;
timeVal += ((secs = 10) ? ":0" : ":") + secs;
timeVal += ((hours 12) ? "AM" : "PM");
timeVal += ((month 10) ? " on 0" : " on ") + month + "-";
timeVal += date + "-" + year;
document.clock.face.value = timeVal;
timerID = setTimeout("showTime()", 1000);
timerRunning = true
}
function startClock() {
stopClock();
showTime();
}
 
function windowOpener( indexnum ){
var loadpos="date.html"+"#"+indexnum;
controlWindow=window.open(loadpos,"date","toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,
width=620,height=400");
}
/script
/head
body onLoad="startClock()"
p align="center"bigspan style="background-color: rgb(45,45,45)"
font face="Arial"form/font   font face="宋体"时钟/font
/span/big/p
p align="center" /p
div align="center"center
table border="0" cellspacing="0" cellpadding="0"
tr
td width="100%"form NAME="clock" onSubmit="0"
div align="center"centerpinput TYPE="text" NAME="face" size="20"
VALUE style="background-color: rgb(192,192,192)" /p
/center/div
/form
/td
/tr
/table
/center/div
/body
/html
 
  本讲介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。

展开更多 50%)
分享

猜你喜欢

基于对象的JavaScript语言

Web开发
基于对象的JavaScript语言

JavaScript教程:基于对象的JS语言范例

Web开发
JavaScript教程:基于对象的JS语言范例

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

javascript对象之window对象

Web开发
javascript对象之window对象

JavaScript 核心对象

Web开发
JavaScript 核心对象

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript基本对象

Web开发
JavaScript基本对象

掌握JavaScript语言

Web开发
掌握JavaScript语言

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

小米盒子有什么用?

小米盒子有什么用?

怎样从 Javascript 传递一个变量到 PHP

怎样从 Javascript 传递一个变量到 PHP
下拉加载更多内容 ↓