星空网 > 软件开发 > Java

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 ="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>

  结果:JavaScript学习之对象(空格也包含在内)

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 ="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>

  效果:JavaScript学习之对象


二、字符串(String)

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

1、String对象属性

JavaScript学习之对象

2、String 对象方法

JavaScript学习之对象

JavaScript学习之对象

JavaScript学习之对象  

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 ="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>

    效果:JavaScript学习之对象

  (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 ="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>

    效果:JavaScript学习之对象

  (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 ="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学习之对象


三、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 对象属性

JavaScript学习之对象

4、Date 对象方法

JavaScript学习之对象JavaScript学习之对象JavaScript学习之对象

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 ="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>

  效果:JavaScript学习之对象

  (2)显示一个钟表

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="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学习之对象


四、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 对象属性

JavaScript学习之对象

4、Array 对象方法

JavaScript学习之对象

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 ="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>

效果:JavaScript学习之对象注意:取数组名时不要和关键字重复,否则运行结果会出错。

  (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 ="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学习之对象


五、JavaScript Boolean(逻辑)对象

  Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。

1、使用关键词 new 来定义 Boolean 对象

var myBoolean=new Boolean()

注释:如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!

2、Boolean 对象属性

JavaScript学习之对象

3、Boolean 对象方法

JavaScript学习之对象


六、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 对象方法

JavaScript学习之对象JavaScript学习之对象

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 ="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学习之对象 刷新一下:JavaScript学习之对象


七、JavaScript RegExp 对象

  RegExp 对象用于规定在文本中检索的内容。它是对字符串执行模式匹配的强大工具。

1、什么是 RegExp?

  RegExp 是正则表达式的缩写。当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。您可以规定字符串中的检索位置,以及要检索的字符类型,等等

2、定义 RegExp

  RegExp 对象用于存储检索模式。通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e":

var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 "e"。

3、RegExp 对象方法

JavaScript学习之对象

eg:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="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() 既可以改变检索模式,也可以添加或删除第二个参数。这里改变检索模式,搜索的是d13   document.write(patt1.test("The best things in life are free")+"<br>");14 </script>15 16 <body>17 </body>18 </html>

    效果:JavaScript学习之对象

  **可以向 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 ="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>

  效果:JavaScript学习之对象

 




原标题:JavaScript学习之对象

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

2022年跨境卖家如何布局海外市场?东南亚“钱”景可观 :https://www.goluckyvip.com/news/6213.html
重要消息:新一轮海运费上涨要开启了!要发货?抓紧时间!:https://www.goluckyvip.com/news/6214.html
2月份亚马逊跨境物流服务-“中国-美国”航线价卡:https://www.goluckyvip.com/news/6215.html
做好TikTok信息流广告,我从100个营销短视频中总结了这:https://www.goluckyvip.com/news/6216.html
2022东南亚最受欢迎的类目居然有它?:https://www.goluckyvip.com/news/6217.html
TikTok不需要罗永浩:https://www.goluckyvip.com/news/6218.html
深圳西乡三月三北帝庙会的千岁盆菜多少钱:https://www.vstour.cn/a/365180.html
TikTok SEO:TikTok会取代谷歌吗?:https://www.kjdsnews.com/a/1836538.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流