zoukankan      html  css  js  c++  java
  • JavaScript学习04 对象

     

    JavaScript学习04 对象

    默认对象

      日期对象Date

      格式:日期对象名称=new Date([日期参数])

      日期参数

      1.省略(最常用);

      2.英文-数值格式:月 日,公元年 [时:分:秒]

      如:today=new Date("October 1,2008 12:00:00")

      3.数值格式:公元年,月,日,[时,分,秒]

      如:today=new Date(2008,10,1)

      日期对象的方法:

      格式:日期对象名称.方法([参数])

      使用例子:

    <body>
        <script type="text/javascript">
           var date = new Date();//JS中默认提供的对象
        document.writeln("现在时刻: " + ( date.getYear() + 1900 ) + ""
                    + (date.getMonth() + 1) + "" + date.getDate() 
                    + "" + ", 星期" + date.getDay() + ", 时间: "//星期天会是0,需要进一步处理,这里先不处理
                    + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
        </script>
    </body> 

      输出:

    现在时刻: 2014年4月21日, 星期1, 时间: 14:7:53

     

    数组对象

      数组对象的作用是:使用单独的变量名来存储一系列的值。

      JavaScript的数组有两点特殊性:

      1.数组长度不定,可以自动扩容;

      2.数组中存放的数据类型可以不统一,即可以混存不同的数据类型。

     

      建立数组对象的多种格式:

      new Array();

      返回的数组为空,length 字段为 0。

      new Array(size);

      参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。该构造函数将返回具有指定个数、元素为 undefined 的数组。

      new Array(element0, element1, ..., elementn);

      该构造函数将用参数指定的值初始化数组,数组的 length 字段会被设置为参数的个数。

      数组对象名称=[元素1[,元素2,...]]

      (注意这里使用的是方括号)。

      当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。 

      还可以创建二维数组。

      Array对象的方法可以参见:http://www.w3school.com.cn/jsref/jsref_obj_array.asp

      数组对象使用实例:

    <!DOCTYPE html>
    <html>
      <head>
        <title>arrayTest.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
      </head>
      
      <body>
        <script type="text/javascript">
        
        //var fruits = new Array("Apple", "Banana", "Pear");
        var fruits = ["苹果","香蕉",""];//推荐使用
        
        //可以动态添加元素
        fruits.push("西瓜");
        fruits.push("橙子");
        
        for(var i = 0; i < fruits.length; ++i)
        {
            document.writeln("fruit[" + i + "] = " + fruits[i] + "<br/>");
        }
        
        //数组的一些方法测试
        with(document)
        {
            write("<ul>");
            write("<li>" + fruits.join()+ "</li>");//默认使用逗号来分隔
            write("<li>" + fruits.join(";")+ "</li>");
            write("<li>" + fruits.toString()+ "</li>");
            write("<li>" + fruits.reverse().join()+ "</li>");
            write("<li>" + fruits.valueOf()+ "</li>");
            //说明上面的reverse实际上是改变了数组本身
            write("</ul>");
        }
        
        
        //二维数组
        var people = new Array(3);
        people[0] = new Array(1, "zhangsan", "lisi");
        people[1] = new Array(2, "Jack", "Lucy");
        people[2] = new Array(3, "Xiaoming", "Xiaohong");
        //注意数据类型可以混合使用
        
        //遍历二维数组
        for(var i = 0 ; i < people.length ; ++i)
        {
            for(var j= 0 ; j < people[i].length ; ++j)
            {
                document.write("people["+ i +"]["+ j +"] = " + people[i][j] + "<br/>");
            }
            
            document.write("<br/>");
        }
        </script>
      </body>
    </html>

    字符串对象

      建立字符串对象:

      格式:字符串对象名称=new String(字符串常量)

      格式:字符串变量名称="字符串常量"

      一个验证Email的例子:

    <!DOCTYPE html>
    <html>
      <head>
        <title>emailConfirm.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        
        <script type="text/javascript">
        
            function isEmail()
            {
                var emailValue = document.getElementsByName("email")[0].value;
                if(-1 == emailValue.indexOf("@"))
                {
                    alert("请填写正确的Email地址");
                }
                else
                {
                    alert("Ok");
                }
            }
        </script>
    
      </head>
      
      <body>
          <form>
            email: <input type="text" name="email"><br/>
            <input type="button" value="check" onclick="isEmail()">
        </form>
      </body>
    </html>

    自定义对象

      前面讲函数的时候讲过一个例子,现在这里再讲一下这个例子:

    <!DOCTYPE html>
    <html>
      <head>
        <title>objectTest.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
      </head>
      
      <body>
        <script type="text/javascript">
        
        //定义对象的一种方式:通过构造函数
            function member(name, gender)
            {
                //属性
                this.name = name;
                this.gender = gender;
                
                //方法
                this.display = display;//指定member对象的display方法
            }
            function display()
            {
                var str = this.name + " : " + this.gender;
                //这个display方法被谁使用了,此处的this就指向那个对象
                
                document.writeln(str + "<br/>");
            }
            
            //生成对象
            var m1 = new member("zhangsan", "male");
            var m2 = new member("lisi", "male");
            var m3 = new member("wangwu", "male");
            var m4 = new member("wangfang", "female");
            
            
            with(document)
            {
                write("输出属性","<br/>");
                write(m1.name + ":" + m1.gender + "<br/>");
                write(m2.name + ":" + m2.gender + "<br/>");
                write(m3.name + ":" + m3.gender + "<br/>");
                write(m4.name + ":" + m4.gender + "<br/>");
            }
            
            document.write("调用方法","<br/>");
            m1.display();
            m2.display();
            m3.display();
            m4.display();
        </script>
      </body>
    </html>

     

    参考资料

      圣思园张龙老师Java Web视频教程。

      W3School JavaScript教程:http://www.w3school.com.cn/js/index.asp

      英文版:http://www.w3schools.com/js/default.asp

     

      JavaScript对象用法:

      http://www.cnblogs.com/lidabo/archive/2012/03/16/2399815.html

      JavaScript字符串对象:

      http://www.w3school.com.cn/js/js_obj_string.asp

      http://www.w3school.com.cn/jsref/jsref_obj_string.asp

     

  • 相关阅读:
    【解题报告】洛谷P3959 宝藏
    【游记】CSP-S2021 退役记
    【全程NOIP计划】初赛
    【解题报告】luoguP2158 仪仗队
    mysql的索引
    Set集合的所有方法
    字符串数组String[]转换成Long类型数组Long[]
    查询记录时排序问题updateTime和createTime
    VUE中== 与 ===的区别以及!=与!==的区别
    Django 模型(ORM)
  • 原文地址:https://www.cnblogs.com/mengdd/p/3680649.html
Copyright © 2011-2022 走看看