JavaScript学习之对象

JavaScript对象

一、对象简介

JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。注意：对象只是一种特殊的数据。对象拥有属性和方法。

1、属性：指与对象有关的值。

eg：使用字符串对象的长度属性来计算字符串中的字符数目。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS</title>
 6 </head>
 7
 8 <body>
 9     <script type="text/javascript">
10         var str = "Hello World!";
11         document.write(str.length);
12     </script>
13 </body>
14 </html>

　　结果：（空格也包含在内）

2、方法：指对象可以执行的行为（或者可以完成的功能）。

eg：使用字符串对象的 toUpperCase() 方法来显示大写字母文本。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS</title>
 6 </head>
 7
 8 <body>
 9     <script type="text/javascript">
10         var str = "Hello World!";
11         document.write(str.toUpperCase());   //注意方法的大小写！！！
12     </script>
13 </body>
14 </html>

　　效果：


二、字符串（String）

　　String 对象用于处理已有的字符块。

1、String对象属性

2、String 对象方法

　　

3、实例：

　　（1）indexOf():用来定位字符串中某一个指定的字符首次出现的位置。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS</title>
 6 </head>
 7
 8 <body>
 9     <script type="text/javascript">
10         var str = "Hello World!";
11         document.write(str.indexOf("Hello") + "<br />")
12         document.write(str.indexOf("World") + "<br />")
13         document.write(str.indexOf("world"))
14
15     </script>
16 </body>
17 </html>

　　　　效果：

　　（2）match() ：用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS</title>
 6 </head>
 7
 8 <body>
 9     <script type="text/javascript">
10         var str = "Hello World!";
11         document.write(str.match("world") + "<br />")
12         document.write(str.match("World") + "<br />")
13         document.write(str.match("worlld") + "<br />")
14         document.write(str.match("world!"))
15
16     </script>
17 </body>
18 </html>

　　　　效果：

　　（3） replace() 方法：使用其在字符串中用某些字符替换另一些字符。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS</title>
 6 </head>
 7
 8 <body>
 9     <script type="text/javascript">
10         var str = "Hello World!";
11         document.write(str.replace(/World/,"Boy"));     //注意大小写！！！
12     </script>
13 </body>
14 </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() 来显示星期，而不仅仅是数字。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JavaScript</title>
 6 </head>
 7 <script type="text/javascript">
 8     var d=new Date();
 9     var weekday=new Array(7);
10     weekday[0]="星期日";
11     weekday[1]="星期一";
12     weekday[2]="星期二";
13     weekday[3]="星期三;"
14     weekday[4]="星期四";
15     weekday[5]="星期五";
16     weekday[6]="星期六";
17
18     document.write("今天是" + weekday[d.getDay()]);
19 </script>
20
21 <body>
22 </body>
23 </html>

　　效果：

　　（2）显示一个钟表

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS</title>
 6 </head>
 7 <script type="text/javascript">
 8     function startTime() {
 9         var today=new Date();
10         var h=today.getHours();   //返回当前的时针
11         var m=today.getMinutes();   //返回当前的分针
12         var s=today.getSeconds();    //返回当前的秒针
13         m=checkTime(m);
14         s=checkTime(s);
15         document.getElementById(‘txt‘).innerHTML=h+":"+m+":"+s;    //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
16         t=setTimeout(‘startTime()‘,500);    //javascript通过setTimeout函数暂停一段时间后执行，这里每隔500ms就调用一次代码
17     }
18
19     function checkTime(i) {
20         if (i<10)  {i="0" + i;}     //如果分、秒为个位数，在前面+“0”，这一步很重要
21           return i;
22         }
23 </script>
24
25 <body onload="startTime()">
26     <div id="txt"></div>
27 </body>
28 </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)输出数组中的元素

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JavaScript</title>
 6 </head>
 7 <script type="text/javascript">
 8     var i,j;
 9     var text = new Array("张三","李四","王五");
10     document.write("1.用for语句来循环输出:"+"<br>");
11     for(i=0;i<text.length;i++) {
12         document.write(text[i] + "<br>");
13     }
14
15     document.write("2.用for...in...语句来循环输出:" + "<br>");
16     for( j in text) {
17         document.write(text[j] + "<br>");
18     }
19 </script>
20
21 <body>
22 </body>
23 </html>

效果：注意：取数组名时不要和关键字重复，否则运行结果会出错。

　　(2)合并两个数组：concat()

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>js</title>
 6 </head>
 7
 8 <body>
 9 <script type="text/javascript">
10     var arr = new Array(3);
11     arr[0] = "George";
12     arr[1] = "John";
13     arr[2] = "Thomas";
14
15     var arr2 = new Array(3);
16     arr2[0] = "James";
17     arr2[1] = "Adrew";
18     arr2[2] = "Martin";
19
20     document.write(arr.concat(arr2));
21 </script>
22 </body>
23 </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：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>js</title>
 6 </head>
 7
 8 <body>
 9 <script type="text/javascript">
10     document.write(Math.round(0.6)+ "<br />");   //把数四舍五入为最接近的整数
11     document.write(Math.random()+ "<br />")     //返回0~1之间的随机数
12     document.write(Math.max(5,7) + "<br />")    //返回两个数之间较大的数
13 </script>
14 </body>
15 </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：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JavaScript</title>
 6 </head>
 7 <script type="text/javascript">
 8     var patt1=new RegExp("e");
 9     document.write(patt1.test("The best things in life are free")+"<br>");
10     document.write(patt1.exec("The best things in life are free")+"<br>");
11     document.write(patt1.test("The best things in life are free")+"<br>");
12     patt1.compile("d");   //compile() 既可以改变检索模式，也可以添加或删除第二个参数。这里改变检索模式，搜索的是d
13     document.write(patt1.test("The best things in life are free")+"<br>");
14 </script>
15
16 <body>
17 </body>
18 </html>

　　　　效果：

　　**可以向 RegExp 对象添加第二个参数，以设定检索。例如，如果需要找到所有某个字符的所有存在，则可以使用 "g" 参数 ("global")。在使用 "g" 参数时，exec() 的工作原理如下：

  • 找到第一个 "e"，并存储其位置
  • 如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置

eg：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>js</title>
 6 </head>
 7
 8 <body>
 9 <script type="text/javascript">
10     var patt1=new RegExp("e","g");
11     do {
12         result=patt1.exec("The best things in life are free");
13         document.write(result);
14     }
15     while (result!=null)
16 </script>
17 </body>
18 </html>

　　效果：

时间： 2024-08-13 23:13:40

JavaScript学习之对象的相关文章

Javascript学习------FileSystemObjec对象

动态创建FileSystemObject对象: var fso=new FileSystemObject("Scripting.FileSystemObject"); (接下来可以用变量fso对Drive对象.Drives集合.File对象.Files集合.Folder对象.Folders集合以及TextStream对象进行相应的操作.) FileSystemObject对象的方法 ·GetAbsolutePathName()方法:该方法根据提供的路径返回完整的路径. ·GetBase

javascript学习------Number对象，Boolean对象

Math对象: 该对象提供了大量的数学常量和数学函数. 使用Math对象时,不应该使用new关键字创建对象,而应直接使用. 如: Math.PI; 例子:随机产生指定位数的验证码 Number对象的创建: 1. var num = new Number(object); 2. var num = Number(object); Number对象的属性: 1.MAX_VALUE属性 2.MIN_VALUE属性 3.NEGTIVE_INFINITY属性:负无穷大 4.POSITIVE_INFINIT

JavaScript学习-自定义对象/

JavaScript学习 [自定义对象] 1.基本概念 ① 对象概念: 对象是包含一系列无序属性和方法的集合: ② 对象中的数据,是以键值对形式存在的,以键取值: ③ 属性:描述对象特征的一系列变量.[对象中的变量]: ④ 方法:描述对象行为的一系列方法.[对象中的函数]: 2.对象的声明: ① 字面量声明: var ovj={ key1:value1, //属性 key2:value2 func:function(){} //方法 } ② 对象中的键,可以是任何数据类型.但,一般用作普通变量名

JavaScript学习笔记——对象知识点

javascript对象的遍历.内存分布和封装特性 一.javascript对象遍历 1.javascript属性访问 对象.属性 对象[属性] //字符串格式 2.javascript属性遍历 for in 二.内存分布 三.对象的特性之封装 把对象所有的组成部分组合起来,尽可能的隐藏对象的部分细节,使其受到保护. 只保留有限的接口和外部发生联系. 一.工厂函数 二.构造函数 三.prototype方法 四.混合方法

JavaScript 学习笔记 - 对象和继承

本文是JavaScript The Good Part 有关对象和继承的学习笔记. 1. Object.create 本函数是ECMAScript 5中的标准函数,其作用是用一个对象作为原型来生成另一个对象,可以用以下的code 模拟实现. if(typeof Object.create !== 'function') { Object.create = function(proto){ var F = function(){}; if(typeof proto !== 'object'){ /

javascript学习----window对象的学习与总结

一   BOM:浏览器对象模型,提供了很多对象,用于对浏览器的功能进行访问,浏览器本身自己就有一些对象,不需要创建. BOM的核心对象是window,它是浏览器的一个实例. 二．(1)Window:的常用属性: (1)status (2)opener (3)closed 的常用方法: (1)alert(): (2)confirm(): (3)setInterval(): (4)clearInterval(): (5)setTimeout(): (6)clearTimeout(): (7)open

JavaScript学习——BOM对象

1.BOM 对象:浏览器对象模型(操作与浏览器相关的内容) 2.Window 对象 Window 对象表示浏览器中打开的窗口 setInterval():它有一个返回值,主要是提供给 clearInterval 使用 setTimeout():它有一个返回值,主要是提供给 clearTimeout 使用 clearInterval():该方法只能清除由 setInterval 设置的定时操作 clearTimeout():该方法只能清除由 setTimeout 设置的定时操作 弹出框的几个方法:

JavaScript学习笔记——对象基础

javascript对象基础 一.名词解释: 1.基于对象 一切皆对象,以对象的概念来编程. 2.面向对象编程(oop Object oriented programming) A.对象 就是人们要研究的任何事物,不仅能表示具体事物,还能表示抽象的规则,计划或事件. 属性的无序集合,每个属性可以存一个值(原始值,对象,函数) B.对象的属性和行为 属性:用数据值来描述他的状态 行为:用来改变对象行为的方法 C.类 具有相同或相似的性质的对象的抽象就是类.对象的抽象,就是类,类的具体化(实例化)

JavaScript学习-浏览器对象

window 代表浏览器窗口,宽度高度这些东西 navigator 浏览器名称.版本.User-Agent等东西 screen 电脑屏幕信息 location url 信息 document 页面信息 HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点 JavaScript可以通过document.cookie读取到当前页面的Cookie history 所以忘了这个对象吧 由于HTML文档被浏览器解析后就是一棵DOM树,要改变或者获取HTML的结构,就需