JavaScript学习之对象
JavaScript对象
一、对象简介
JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。注意:对象只是一种特殊的数据。对象拥有属性和方法。
1、属性:指与对象有关的值。
eg:使用字符串对象的长度属性来计算字符串中的字符数目。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head> <body>
<script type="text/javascript">
var str = "Hello World!";
document.write(str.length);
</script>
</body>
</html>
结果:(空格也包含在内)
2、方法:指对象可以执行的行为(或者可以完成的功能)。
eg:使用字符串对象的 toUpperCase() 方法来显示大写字母文本。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head> <body>
<script type="text/javascript">
var str = "Hello World!";
document.write(str.toUpperCase()); //注意方法的大小写!!!
</script>
</body>
</html>
效果:
二、字符串(String)
String 对象用于处理已有的字符块。
1、String对象属性
2、String 对象方法
3、实例:
(1)indexOf():用来定位字符串中某一个指定的字符首次出现的位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head> <body>
<script type="text/javascript">
var str = "Hello World!";
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world")) </script>
</body>
</html>
效果:
(2)match() :用来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head> <body>
<script type="text/javascript">
var str = "Hello World!";
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!")) </script>
</body>
</html>
效果:
(3) replace() 方法:使用其在字符串中用某些字符替换另一些字符。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head> <body>
<script type="text/javascript">
var str = "Hello World!";
document.write(str.replace(/World/,"Boy")); //注意大小写!!!
</script>
</body>
</html>
效果:
三、JavaScript Date(日期)对象
日期对象用于处理日期和时间。
1、定义日期
var myDate=new Date()
Date 对象自动使用当前的日期和时间作为其初始值。
2、改变日期
(1)为日期对象设置一个特定的日期 (2008 年 8 月 9 日):
var myDate=new Date()
myDate.setFullYear(2008,7,9)
**表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为 8 月,则参数应该是 7。**
(2)将日期对象设置为 5 天后的日期:
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
**如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。**
3、Date 对象属性
4、Date 对象方法
5、实例
(1)使用 getDay() 来显示星期,而不仅仅是数字。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
</head>
<script type="text/javascript">
var d=new Date();
var weekday=new Array(7);
weekday[0]="星期日";
weekday[1]="星期一";
weekday[2]="星期二";
weekday[3]="星期三;"
weekday[4]="星期四";
weekday[5]="星期五";
weekday[6]="星期六"; document.write("今天是" + weekday[d.getDay()]);
</script> <body>
</body>
</html>
效果:
(2)显示一个钟表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head>
<script type="text/javascript">
function startTime() {
var today=new Date();
var h=today.getHours(); //返回当前的时针
var m=today.getMinutes(); //返回当前的分针
var s=today.getSeconds(); //返回当前的秒针
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s; //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
t=setTimeout('startTime()',500); //javascript通过setTimeout函数暂停一段时间后执行,这里每隔500ms就调用一次代码
} function checkTime(i) {
if (i<10) {i="0" + i;} //如果分、秒为个位数,在前面+“0”,这一步很重要
return i;
}
</script> <body onload="startTime()">
<div id="txt"></div>
</body>
</html>
效果:
四、JavaScript Array(数组)对象
1、定义数组
var myArray=new Array()
2、变量赋值
(1)可以添加任意多的值,就像可以定义需要的任意多的变量一样
var mycars=new Array();
mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";
可以使用一个整数自变量来控制数组的容量:
var mycars=new Array(3)
mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";
(2)
var mycars=new Array("Saab","Volvo","BMW")
注意:如果你需要在数组内指定数值或者逻辑值,那么变量类型应该是数值变量或者布尔变量,而不是字符变量。
3、Array 对象属性
4、Array 对象方法
5、实例:
(1)输出数组中的元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
</head>
<script type="text/javascript">
var i,j;
var text = new Array("张三","李四","王五");
document.write("1.用for语句来循环输出:"+"<br>");
for(i=0;i<text.length;i++) {
document.write(text[i] + "<br>");
} document.write("2.用for...in...语句来循环输出:" + "<br>");
for( j in text) {
document.write(text[j] + "<br>");
}
</script> <body>
</body>
</html>
效果:注意:取数组名时不要和关键字重复,否则运行结果会出错。
(2)合并两个数组:concat()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js</title>
</head> <body>
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas"; var arr2 = new Array(3);
arr2[0] = "James";
arr2[1] = "Adrew";
arr2[2] = "Martin"; document.write(arr.concat(arr2));
</script>
</body>
</html>
效果:
五、JavaScript Boolean(逻辑)对象
Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。
1、使用关键词 new 来定义 Boolean 对象
var myBoolean=new Boolean()
注释:如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!
2、Boolean 对象属性
3、Boolean 对象方法
六、JavaScript Math(算数)对象
Math(算数)对象的作用是:执行常见的算数任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin()
这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
1、算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值:
- 常数
- 圆周率
- 2 的平方根
- 1/2 的平方根
- 2 的自然对数
- 10 的自然对数
- 以 2 为底的 e 的对数
- 以 10 为底的 e 的对数
这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)
- Math.E
- Math.PI
- Math.SQRT2
- Math.SQRT1_2
- Math.LN2
- Math.LN10
- Math.LOG2E
- Math.LOG10E
2、Math 对象方法
3、eg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js</title>
</head> <body>
<script type="text/javascript">
document.write(Math.round(0.6)+ "<br />"); //把数四舍五入为最接近的整数
document.write(Math.random()+ "<br />") //返回0~1之间的随机数
document.write(Math.max(5,7) + "<br />") //返回两个数之间较大的数
</script>
</body>
</html>
效果: 刷新一下:
七、JavaScript RegExp 对象
RegExp 对象用于规定在文本中检索的内容。它是对字符串执行模式匹配的强大工具。
1、什么是 RegExp?
RegExp 是正则表达式的缩写。当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。您可以规定字符串中的检索位置,以及要检索的字符类型,等等
2、定义 RegExp
RegExp 对象用于存储检索模式。通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e":
var patt1=new RegExp("e");
当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 "e"。
3、RegExp 对象方法
eg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
</head>
<script type="text/javascript">
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")+"<br>");
document.write(patt1.exec("The best things in life are free")+"<br>");
document.write(patt1.test("The best things in life are free")+"<br>");
patt1.compile("d"); //compile() 既可以改变检索模式,也可以添加或删除第二个参数。这里改变检索模式,搜索的是d
document.write(patt1.test("The best things in life are free")+"<br>");
</script> <body>
</body>
</html>
效果:
**可以向 RegExp 对象添加第二个参数,以设定检索。例如,如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数 ("global")。在使用 "g" 参数时,exec() 的工作原理如下:
- 找到第一个 "e",并存储其位置
- 如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置
eg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js</title>
</head> <body>
<script type="text/javascript">
var patt1=new RegExp("e","g");
do {
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)
</script>
</body>
</html>
效果:
JavaScript学习之对象的更多相关文章
- JavaScript学习04 对象
JavaScript学习04 对象 默认对象 日期对象Date, 格式:日期对象名称=new Date([日期参数]) 日期参数: 1.省略(最常用): 2.英文-数值格式:月 日,公元年 [时:分: ...
- Javascript学习4 - 对象和数组
原文:Javascript学习4 - 对象和数组 在Javascript中,对象和数组是两种基本的数据类型,而且它们也是最重要的两种数据类型. 对象是已命名的值的一个集合,而数组是一种特殊对象,它就像 ...
- JavaScript学习笔记——对象知识点
javascript对象的遍历.内存分布和封装特性 一.javascript对象遍历 1.javascript属性访问 对象.属性 对象[属性] //字符串格式 //javascript属性的访问方法 ...
- JavaScript学习笔记-对象
枚举对象的属性:通常用for(...in...)来循环遍历,由于 for in 总是要遍历整个原型链,因此如果一个对象的继承层次太深的话会影响性能 for(var i in foo){ if(foo. ...
- JavaScript学习笔记——对象分类
对象的分类 一.对象的分类 1.内置对象 Global Math 2.本地对象 Array Number String Boolean Function RegExp 3.宿主对象 DOM BOM 二 ...
- JavaScript学习笔记——对象基础
javascript对象基础 一.名词解释: 1.基于对象 一切皆对象,以对象的概念来编程. 2.面向对象编程(oop Object oriented programming) A.对象 就是人们要研 ...
- JavaScript学习笔记——对象的创建
对象是JavaScript基本数据类型,在JavaScript中除了Undefined.Null.布尔型(ture.false).字符串和数字之外,其他的都属于对象. 在JavaScript中,一个对 ...
- JavaScript学习——JS对象和全局函数
1. Array对象 数组的特点:长度可变!数组的长度=最大角标+1 2.Boolean对象 如果value 不写,那么默认创建的结果为false 3.Date对象 getTime()返回1970年1 ...
- JavaScript学习——BOM对象
1.BOM 对象:浏览器对象模型(操作与浏览器相关的内容) 2.Window 对象 Window 对象表示浏览器中打开的窗口 setInterval():它有一个返回值,主要是提供给 clearInt ...
随机推荐
- BZOJ 1036 && 树链剖分
还是太弱啊..各种数据结构只听过名字却没有一点概念..树链剖分也在这个范畴..今天来进一步深化一下教育改革推进全民素质提高. 性质 忘了在哪里看到的一篇blog有一句话讲得非常好,树链剖分不是一种数据 ...
- POJ 3140 Contestants Division
题目链接 题意很扯,就是给一棵树,每个结点有个值,然后把图劈成两半,差值最小,反正各种扯. 2B错误,导致WA了多次,无向图,建图搞成了有向了.... #include <cstdio> ...
- hdu 4310 Hero
这道题是道算是一道很简单的贪心题了,但是要注意排序的依据,这道题是按照dps/hp的从大到小排序的,然后计算总的sumhp即可. #include"iostream" #inclu ...
- 解决win7系统远程桌面 server 2003 卡的问题
原因在于从vista开始,微软在TCP/IP协议栈里新加了一个叫做“Window Auto-Tuning”的功能.这个功能本身的目的是为了让操作系统根据网络的实时性能(比如响应时间)来动态调整网络上传 ...
- 微博开发平台java SDK demo学习之friendships
本文解释了在java SDK的demo中与feiendships有关的功能 截图如下: 关注一个用户(需要知道该用户uid) 取消关注一个用户(用户uid) 获取用户粉丝列表(授权用户的screen_ ...
- MSF命令 收集
一.msfconsole ? 帮助菜单 back 从当前环境返回 banner 显示一个MSF banner cd 切换目录 color 颜色转换 connect 连接一个主机 e ...
- Tree Context Menu
Right click on a node to display context menu. My Documents Photos Program Files Intel Java Micros ...
- mapreduce运用
测试环境:192.168.1.55 mongo 192.168.1.55:30001show dbsuse gwgps 测试目标,求出两个班的总数,人数,平均分数等.可以根据不同的业务需求,定制map ...
- [英语学习]儿童英语 sesamestreet
最近在和我的孩子学习汉语,用在自己学习英语方面,就是多看小故事,多看儿歌. 以前孙小小分享过这个网站www.sesamestreet.org 现在找出来看看,还是很不错的. 搜索elbows and ...
- [ZZ] 在windows上编译Mesa3d opengl32库
在windows上编译Mesa3d opengl32库 cheungmine http://blog.csdn.net/ubuntu64fan/article/details/8061475 Mesa ...