前端开发之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 二者共享同一函数

二、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); //

        // 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')); //
        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"]

　　

　　2、Number 对象

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

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

　　　　（1） 创建Number对象的语法　　　

var myNum = new Number(value);

var myNum = Number(value);

　　　　　　注意：

　　　　　　① 极大或极小的数字可通过科学（指数）计数法来写：

var y=123e5;    //
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 语句 try 和 catch 是成对出现的。

　　　　语法：　　

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.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>

</html>

　　4、Throw语句　

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

　　语法（异常可以是 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>

四、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>

　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>