zoukankan      html  css  js  c++  java
  • 前端开发之JavaScript基础篇三

    主要内容:

      1、创建对象的几种方式

      2、JavaScript内置对象

      3、JavaScript错误--Throw、Try 和 Catch

      4、JavaScript 表单验证

    一、创建对象的几种方式

      1、使用Object或者对象字面变量创建对象

       (1)使用Object创建对象

        例如: 

    var student = new Object();
    student.name = "cc";
    student.age = 20;
         这样,一个student对象就创建完毕,拥有2个属性name以及age,分别赋值为“cc ”和20。

      (2)使用对象字面量创建对象

        例如:

    var student = {
        name:"cc";
        age:20
    };  
       但这样有一个问题就冒出来了,如果我们有成百上千个同样的类,student1、student2等等,
      我们就不得不重复修改成百上千次。。。不禁泪流满面。。。
    那么能不能向工厂车间一样,有一个车床就不断生产处对象呢?所以我们有利器--“工厂模式”!

      2、工厂模式创建对象

        注意:JavaScript没有类的概念,我们可以使用一种函数将以上对象创建过程封装起来

      便于重复调用,同时给出特定接口来初始化对象。

             例如:

    function createStudent(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        return obj;  
    }
    
    var stu1 = createStudent("cc1",20);
    var stu2 = createStudent("cc2",21);
    var stu3 = createStudent("cc3",22);   
        如此一来,我们就可以通过createStudent函数源源不断地“生产”对象了。看起来,已经非常
      完美了,但贪婪的人类总是不满足的,我们不仅希望“产品”的生产可以像工厂车间一般源源不断,
      我们还想知道生产的产品是哪一种类型的。
      
      比如:我们又定义了生产水果对象的createFruit()函数
        
    function createFruit(name,color){
        var obj = new.object();
        obj.name = name;
        obj.color = color;
        return obj;
    }    
    
    var stu = createStudent("jack",24);
    var fruit = createFruit("apple",red);

      注意: 

      对于对象stu,fruit,我们用instanceof操作符去检测,他们统统都是Object类型。
        而我们希望知道s1是Student类型的,f1是Fruit类型的、为此,我们还得继续寻找,
        用自定义构造函数的方法来创建对象。

     

      3、构造函数模式创建对象(推荐)  

      在上面创建Object这样的原生对象时,我们就已经使用过构造函数了:
       var obj = new Object();
      在创建原生数组Array类型对象时,也是用过其构造函数:
      var arr = new Array(10); // 构造一个初始长度为10的数组对象
      (1)注意:
        
     1、实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法。对于任意函数,
            使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数。
     2、按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者。
            例如上面的new Array(),new Object()。

      (2)使用new操作符调用构造函数时,会经历4个阶段:

    阶段1:创建一个新对象,如:
           var a = new Object(name,age); 阶段2:将构造函数作用域赋给新对象(使this指向新对象),如: this.name =name; 阶段3:执行构造函数代码; 阶段4:返回新对象。  
      
    (3)了解构造函数和普通函数的区别后,我们使用构造将工厂模式的函数重写,并添加一个方法属性:
      
    // 学生信息的构造函数
    function Student(name,age){
        this.name = name;
        this.age = age;
        this.alertName = function(){
            alert(this.name)
       };
    }
    
    // 水果的构造函数
    function Fruit(name,color){
        this.name = name;
        this.color = color;
        this.alertName = function(){
             alert(this.name)
        } ;
    }

      接着我们在创建Student和Fruit的对象

    var s1 = new Student("cc",21);
    var f1 = new Fruit("apple","red");

      (4)我们使用 instanof 操作符去检测

    alert(s1 instanceof Student)  // true
    
    alert(f1 instanceof Student) // false
    
    alert(s1 instanceof Fruit ) // false
    
    alert(f1 instanceof Fruit) // true
    
    alert(s1 instanceof Object);  //true 任何对象均继承自Object
    alert(f1 instanceof Object);  //true 任何对象均继承自Object

      (5)构造函数的优化

        我们会发现Student和Fruit对象中共有同样的方法,当我们进行调用的时候这无疑是内存的消耗

      我们完全可以在执行该函数的时候再这样做,办法是将对象方法移到构造函数外部:   

    function Student(name,age){
        this.name = name;
        this.age = age;
        this.callName = callName;
    }
    function callName(){
        alert(this.name);
    }

      调用方式不变,仍然是创建对象,再调用。不同在于,在调用s1.alert()时,this对象才被绑定到s1上。

    var s1 = new Student("cc",21);
    var s2 = new Student("ss",22);

     

      我们通过将callName()函数定义为全局函数,这样对象中的callName属性则被设置为指向该全局函数的指针。

      由此stu1和stu2共享了该全局函数,解决了内存浪费的问题。

      但是,又有问题来了?

        通过全局函数的方式解决对象内部共享的问题,终究不像一个好的解决方法。如果这样定义的全局函数多了,

      我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。

     

      4、原型的模式创建对象

        原型链甚至原型继承,是整个JS中最难的一部分也是最不好理解的一部分,我也不太理解,很难说清楚,

        下面给一个实例帮助大家来了解,更多内容可以去W3C的官网http://www.w3school.com.cn/index.html

        实例如下:

     function Student() {
        this.name = 'cc';
        this.age = 20;
    }
    
        Student.prototype.alertName = function(){
                                        alert(this.name);
                                      };
    
        var stu1 = new Student();
        var stu2 = new Student();
    
        stu1.alertName();  //cc
        stu2.alertName();  //cc
    
        alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数
    View Code

     

    二、JavaScript内置对象

      1、String对象

        (1)创建String对象的语法:

    new String(s); // 当 String() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 String 对象,存放的是字符串 s 或 s 的字符串表示。
    
    String(s);  // 当不用 new 运算符调用 String() 时,它只把 s 转换成原始的字符串,并返回转换后的值。
    
    // 参数 s 是要存储在 String 对象中或转换成原始字符串的值。

        (2)String对象属性

    constructor    对创建该对象的函数的引用。
    
    length       字符串的长度
    
    prototype  允许你像对象添加属性和方法

        (3)String(字符串)对象的方法,如下图所示:

      

      实例如下: 

        // String字符串对象
            //length() 返回字符串长度
            var str = 'Hello cc';
            console.log(str.length); // 8
    
            // charAt() 返回指定索引的位置的字符
            var strIndex = "abcd efg";
            console.log(strIndex.charAt(3)); // d
    
            // concat() 返回字符串值,表示两个或多个字符串的拼接
            var str1 = "hello ";
            var str2 = "world!";
            console.log(str1.concat(str2));// hello world!
    
            // match() 返回正则表达式模式对字符串进行产找,并将包含查找结果作为结果返回
            console.log(strIndex.match('f')); // ["fg", index: 6, input: "abcd efg", groups: undefined]
    
            /* search(stringObject) 是否存在相应匹配。如果找到一个匹配,search方法将返回一个整数值,
             指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配,返回-1*/
            var strSearch = "how are you ?";
            console.log(strSearch.search('y')); // 8
            console.log(strSearch.search('p')); // -1
    
            // replace(a,b) 字符串b替换了a -- replace(a,b)
            console.log(str.replace('cc','ab')); // Hello ab
    
            //slice(start,end)  返回start到end-1之间的字符串,索引从0开始
            var strToEnd = "never give up ...";
            console.log(strToEnd.slice(1,6)); // ever
            // substr(start,end) ,左闭右开
            var subStr = str.substr(1,3);
            console.log(subStr); // ell
    
            // toUpperCase() 大写
            var bigStr= str.toUpperCase();
            console.log(bigStr) ; // HELLO CC
    
            // toLowerCase() 小写
            var smallStr= str.toLowerCase();
            console.log(smallStr) ;// hello cc
    
            // split(’a‘,1)  第一个参数是以什么样的字符串进行切割,第二个参数是返回的数组的最大长度
            var newArr = str.split(' ',3);
            console.log(newArr); // (2) ["Hello", "cc"]
    View Code

      

      2、Number 对象

        在 JavaScript 中,数字是一种基本的数据类型,且只有一种数字类型。

        JavaScript 还支持 Number 对象,该对象是原始数值的包装对象。

        (1) 创建Number对象的语法   

    var myNum = new Number(value);
    
    var myNum = Number(value);

          注意:

          ① 极大或极小的数字可通过科学(指数)计数法来写:

    var y=123e5;    // 12300000
    var z=123e-5;   // 0.00123

          ② 所有 JavaScript 数字均为 64 位

    JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。
    
    JavaScript 中的所有数字都存储为根为 10 的 64 位(8 比特),浮点数。

        (2)常用方法

    // 1、toString()  将number类型转换成字符串类型
        var num = 123.456;
        var numStr = num.toString();
        console.log(numStr,typeof numStr); // 23.456,string
    
    // 2、toFixed() 四舍五入,括号内的参数表示保留几位小数
        var numNex = num.toFixed(2) ;
        console.log(numNex); // 123.46

     

      3、Date 日期对象

        (1)创建日期对象

            创建日期对象只有构造函数一种方式,使用new关键字。   

    // 创建一个date对象
    
    var myDate = new Date();

        (2)常用方法及实例,如下图所示:

      

       4、Math函数

        (1)作用

          Math(算数)对象的作用是:执行常见的算数任务。

        (2)常用方法及实例如下所示:

          

      

    三、JavaScript 错误 - Throw、Try 和 Catch

      1、含义:  

    try 语句测试代码块的错误。
    
    catch 语句处理错误
    
    throw 语句创建自定义错误。

      2、用法:

    JavaScript 测试和捕捉
    try 语句允许我们定义在执行时进行错误测试的代码块。 catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。 JavaScript 语句 trycatch 是成对出现的。

        语法:  

    try
      {
      //在这里运行代码
      }
    catch(err)
      {
      //在这里处理错误
      }

      3、实例: 

    !DOCTYPE html>
    <html>
    <head>
    <script>
    var txt="";
    function message()
    {
    try
      {
      adddlert("Welcome guest!");
      }
    catch(err)
      {
      txt="There was an error on this page.
    
    ";
      txt+="Error description: " + err.message + "
    
    ";
      txt+="Click OK to continue.
    
    ";
      alert(txt);
      }
    }
    </script>
    </head>
    
    <body>
    <input type="button" value="View message" onclick="message()">
    </body>
    
    
    </html>
    View Code

      4、Throw语句 

    throw 语句允许我们创建自定义错误。
    
    正确的技术术语是:创建或抛出异常(exception)。
    
    如果把 throwtrycatch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

      语法(异常可以是 JavaScript 字符串、数字、逻辑值或对象。):

    throw exception

      实例;

    <!DOCTYPE html>
    <html>
    <body>
    
    <script>
    function myFunction()
    {
    try
    { 
    var x=document.getElementById("demo").value;
    if(x=="")    throw "值为空";
    if(isNaN(x)) throw "不是数字";
    if(x>10)     throw "太大";
    if(x<5)      throw "太小";
    }
    catch(err)
    {
    var y=document.getElementById("mess");
    y.innerHTML="错误:" + err + "。";
    }
    }
    </script>
    
    <h1>我的第一个 JavaScript 程序</h1>
    <p>请输入 5 到 10 之间的数字:</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">测试输入值</button>
    <p id="mess"></p>
    
    </body>
    </html>
    View Code

     

    四、JavaScript 表单验证

      1、含义:

        JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

      2、作用: 

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
    
    被 JavaScript 验证的这些典型的表单数据有:
    
    用户是否已填写表单中的必填项目?
    用户输入的邮件地址是否合法?
    用户是否已输入合法的日期?
    用户是否在数据域 (numeric field) 中输入了文本?

      3、必填或必选项目验证

        下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,

      并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题): 

    function validate_required(field,alerttxt)
    {
        with(field)
            {
                if(value==null || value=="")
                    {
                         alert(alerttxt);
                         return false;
                     }
                 else
                     {
                           return true;
                      }
            }
    }    

        完整代码:  

    <! DOCTYPE html>
    <head>
    <script type="text/javascript">
    
    function validate_required(field,alerttxt)
    {
    with (field)
      {
      if (value==null||value=="")
        {alert(alerttxt);return false}
      else {return true}
      }
    }
    
    function validate_form(thisform)
    {
    with (thisform)
      {
      if (validate_required(email,"Email must be filled out!")==false)
        {email.focus();return false}
      }
    }
    </script>
    </head>
    
    <body>
    <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit"> 
    </form>
    </body>
    
    </html>
    View Code

     4、E-mail验证

      下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

      输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

    function validate_email(field,alerttxt)
    {
    with (field)
    {
    apos=value.indexOf("@")
    dotpos=value.lastIndexOf(".")
    if (apos<1||dotpos-apos<2) 
      {
        alert(alerttxt);
        return false
        }
    else {return true}
    }
    }

        完整代码:

    <! DOCTYPE html>
    <head>
    <script type="text/javascript">
    function validate_email(field,alerttxt)
    {
    with (field)
    {
    apos=value.indexOf("@")
    dotpos=value.lastIndexOf(".")
    if (apos<1||dotpos-apos<2) 
      {alert(alerttxt);return false}
    else {return true}
    }
    }
    
    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_email(email,"Not a valid e-mail address!")==false)
      {
        email.focus();
        return false
        }
    }
    }
    </script>
    </head>
    
    <body>
    <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit"> 
    </form>
    </body>
    
    </html>
    View Code

     

  • 相关阅读:
    JVM——类加载
    Java IO输入输出
    核心标签库和el
    request对象
    安装tomcat
    安装mongodb
    MySQL在简单命令行操作
    安装MySQL
    Java几种常见的异常类型
    Java简单正则表达式写爬虫
  • 原文地址:https://www.cnblogs.com/schut/p/9463161.html
Copyright © 2011-2022 走看看