JavaScript笔记本

Javascript常用对象-Boolean

              Boolean对象描述

在 JavaScript 中，布尔值是一种基本的数据类型。Boolean 对象是一个将布尔值打包的布尔对象。Boolean 对象主要用于提供将布尔值转换成字符串的 toString() 方法。

Boolean对象创建

Boolean 对象表示两个值："true" 或 "false"。

创建 Boolean 对象的语法：

new Boolean(value);        //构造函数

Boolean(value);               //转换函数

参数

参数 value 由布尔对象存放的值或者要转换成布尔值的值。

返回值

当作为一个构造函数（带有运算符 new）调用时，Boolean()将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象。

如果作为一个函数（不带有运算符 new）调用时，Boolean()只将把它的参数转换成一个原始的布尔值，并且返回这个值。

注释：如果省略 value 参数，或者设置为 0、-0、null、""、false、undefined或 NaN，则该对象设置为 false。否则设置为 true（即使value 参数是字符串 "false"）。

Javascript常用对象-Number

              Number对象描述

在 JavaScript 中，数字是一种基本的数据类型。JavaScript 还支持 Number 对象，该对象是原始数值的包装对象。在必要时，JavaScript 会自动地在原始数据和对象之间转换。

              Number对象创建

Number 对象是原始数值的包装对象。

创建 Number 对象的语法：

var myNum=new Number(value);

var myNum=Number(value);

参数

参数 value 是要创建的 Number 对象的数值，或是要转换成数字的值。

返回值

当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。

Javascript常用对象-Array

              Array 对象用于在单个的变量中存储多个值。

创建 Array 对象的语法：

new Array();

new Array(size);

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

参数

参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。

参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值

返回新创建并被初始化了的数组。

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。

当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。

当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。

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

Javascript常用对象-String

              String 对象描述         

字符串是 JavaScript 的一种基本的数据类型。

String 对象的 length 属性声明了该字符串中的字符数。

String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。

需要注意的是，JavaScript的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

 

              String对象创建

String 对象用于处理文本（字符串）。

创建 String 对象的语法：

new String(s);

String(s);

参数

参数 s 是要存储在 String 对象中或转换成原始字符串的值。

返回值

当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。

当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。

Javascript常用对象-Date

Date 对象创建

Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var myDate=new Date()

注释：Date 对象会自动把当前日期和时间保存为其初始值。

Javascript常用对象-Math

Math对象创建

Math 对象用于执行数学任务。

使用 Math 的属性和方法的语法：

var pi_value=Math.PI;

var sqrt_value=Math.sqrt(15);

注意：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

Javascript常用对象-RegExp

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

返回值

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

Javascript函数创建与使用

什么是函数

                     对于我们学过java的同学，我们可以将函数理解成就是我们在java中的方法。

创建函数

                     在ECMAScript中函数有以下几种创建方式

                     第一种

function 函数名称(参数列表){

函数体;

}

       第二种

var 函数名称=function(参数列表){

       函数体;

}

       第三种(了解)

Var 函数名称=new Function(参数列表,函数体);     

     以上操作，都可以创建函数，我们只要求掌握第一种与第二种，对于第三种大家了解就可以。

调用函数

                     函数可以通过其名字加上括号中的参数进行调用。

                     示例1

<scripttype="text/javascript">

       //使用function 函数名称(参数列表 ){}方式来创建函数

       function add(a, b) {

              alert(a + b);

       }

       //调用函数

       add(10, 20);

</script>

                     示例2

<scripttype="text/javascript">

       //使用 var 函数名称=function(参数列表)来创建函数

       var add = function(a, b) {

              alert(a + b);

       }

       //函数调用    

       add(10, 20);

</script>

                     示例3                  

<scripttype="text/javascript">

       var add = new Function("a","b", "alert(a+b)");

       add(10, 20);

</script>

                     问题:如果我们在调用函数时，使用add(1,2,3,4)是否会出现问题哪?

                            如果是在java中我们这样调用一定会有问题的，但是对于javascript来说，是不会有问题的。

                            简单的说，也就是函数调用时传递的参数不一定要与函数声明时的参数个数一致。

问题:如果调用时传递的参数与函数定义时参数个数不一致，那么我们在函数中如果获取多余的参数哪?

                            在javascript中有一个特殊的对象arguments,我们可以通过它来获取所有函数中的参数。

                           

<scripttype="text/javascript">

       //创建函数

       function add(a, b) {

              //在函数中如果要获取所有参数列表中的信息可以使用argument来操作

              for(vari=0;i<arguments.length;i++){

                     alert(arguments[i]);

              }

       }

       add(1,2,3,4);

</script>

函数参数与返回值

                     在java中我们定义一个方法，如果这个方法有返回值，我们必须做到以下两点:

1.       在方法声明时，必须声明其返回值类型，如果无返回值需要使用void。

2.       方法有返回值，我们在方法中需要使用return来返回结果。

那么我们在javascript中应该怎样处理一个函数的返回值哪?

对于javascript来说，我们不必须在创建函数时，来声明其返回值类型，无返回值也不需要使用void来声明,但是，如果一个函数要想返回结果，我们在函数中必须使用return来返回结果。

<scripttype="text/javascript">

       //创建函数

       function add(a, b) {

              //返回a与b的和 

              return a+b;

       }

       //在调用函数时，我们就可以直接使用一个变量来接收函数的返回结果

       var sum=add(1,2,3,4);

       alert(sum)             

</script>

Javascript事件介绍

              事件通常与函数配合使用，这样我们可以通过发生的事件来驱动函数执行.

              常见事件:

事件绑定

在javascript中事件经常与函数一起使用，那么我们介绍一下怎样将一个事件与函数绑定到一起，简单说，就是某个事件被触发后，函数如果被调用。

1.      html事件属性

<button onclick="displayDate()">点击这里</button>

2.      html dom分配事件

<script>

       document.getElementById("myBtn").onclick=function(){displayDate()};

</script>

阻止默认事件

if(e&&e.stopPropagation){

   e.preventDefault();

}else{

   window.event.returnValue = false;

}

阻止事件传播

if(e&&e.stopPropagation){

   e.stopPropagation();

}else{

   window.event.cancelBubble = true;

}

js中arguments的用法

了解这个对象之前先来认识一下javascript的一些功能：

其实Javascript并没有重载函数的功能，但是Arguments对象能够模拟重载。Javascrip中国每个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素。arguments.length为函数实参个数，arguments.callee引用函数自身。

 

arguments他的特性和使用方法

特性：

arguments对象和Function是分不开的。因为arguments这个对象不能显式创建，arguments对象只有函数开始时才可用。

使用方法：

虽然arguments对象并不是一个数组，但是访问单个参数的方式与访问数组元素的方式相同

例如：

arguments[0],arguments[1],。。。。。。。。arguments[n],

 

在js中 不需要明确指出参数名，就能访问它们，例如：

function test() {
        var s = "";
        for (var i = 0; i < arguments.length; i++) {
            alert(arguments[i]);
            s += arguments[i] + ",";
        }
        return s;
    }
    test("name", "age")

输出结果：

name,age

 

我们知道每一个对象都有自己的属性，arguments对象也不例外，首先arguments的访问犹如Array对象一样，
用0到arguments.length-1来枚举每一个元素。下面我们来看看callee属性，返回正被执行的Function 对象，
也就是所指定的 Function 对象的正文。callee 属性是 arguments 对象的一个成员，仅当相关函数正在执行时才可用。
callee 属性的初始值就是正被执行的 Function 对象，这允许匿名的递归函数。

var sum = function (n) {
        if (1 == n) {
            return 1;
        } else {
            return n + arguments.callee(n - 1);
        }
    }
    alert(sum(6));

 通俗一点就是，arguments此对象大多用来针对同个方法多处调用并且传递参数个数不一样时进行使用。根据arguments的索引来判断执行的方法。

 

arguments 的用法和特性基本就是这么多了。可能callee属性用到的比较少。但是如果自己封装或者写一些js的时候 除了callee的东西基本都会用到。有不对的地方希望朋友们多多支出。大家共同进步。

Javascript中bom介绍

IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的标准。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口大小

提供 Web 浏览器详细信息的定位对象

提供用户屏幕分辨率详细信息的屏幕对象

对 cookie 的支持

IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

                    

Ø Window对象

Window 对象表示浏览器中打开的窗口

如果文档包含框架（frame或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象

Ø History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

Ø Location对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

                     对于Location对象，我们只需要掌握href这个属性就可以，它的作用是设置或返回完整的URL。

Javascript中dom介绍

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请考虑下面的 HTML 页面：

这段代码可以用 DOM 绘制成一个节点层次图：

DOM 节点层次图

DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。

              W3CDOM 标准被分为 3 个不同的部分：

l 核心 DOM - 针对任何结构化文档的标准模型

l XML DOM - 针对 XML 文档的标准模型

l HTML DOM - 针对 HTML 文档的标准模型

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。

HTML DOM 是：

HTML 的标准对象模型

HTML 的标准编程接口

W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

XML DOM与HTML DOM的关系

XML DOM 定义了访问和处理 XML 文档的标准方法

HTML文档格式符合XML语法标准，所以可以使用XML DOM API

在XML DOM每个元素都会被解析为一个节点Node，而常用的节点类型又分为

元素节点  Element

属性节点  Attr

文本节点  Text

文档节点  Document

HTML DOM 定义了针对 HTML文档的对象，可以说是一套更加适用于JavaScript 技术开发的API

HTML DOM是对XML DOM的扩展

进行 JavaScript DOM开发可以同时使用XML DOM和 HTML DOM

             

getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素         

             

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

getElementsByName() 方法

getElementByName() 返回带有指定name的所有元素。

innerHTML属性

获取元素内容的最简单方法是使用innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

在前面我们已经完成过一个注册页面.当我们点击”提交”按钮时，会将表单中的数据提交到action指定的位置,在开发中，我们经常需要对数据进行验证，例如：邮箱，会员名，密码等不能为空，会员名长度，密码长度需要符合规定，邮箱格式要正确等，那么我们这时就需要对表单中的数据进行校验。

前面我们已经学过了正则，以下我们在对表单数据进行验证时，就会使用到正则表达式，并且会使用上面提到过的dom来显示一些错误信息。

              需求:

1.       验证邮箱符合规则，并且不能为空

2.       验证会员名密码不能为空，并且保证长度至少6位

3.       重复密码要与密码一致.

          分析:

1.       验证非空 /^\s*$/

2.       验证邮箱符合规则，正则表达式是: /^(\w)+@(\w)+(\.\w+)+$/

3.       验证会员名与密码长度至少6位 /^ (\w){6,}$/

4.       验证重复密码与密码一致，我们不需要使用正则，直接比较就可以。

5.       对于上述操作，我们在使用时，可以使用javascript中提供的test方法完成。

6.       为了保证数据不正确情况下，表单不能提交，我们需要使用onsubmit，如果绑定的函数返回的是false,表单就不能被提交  

实现:

<script type="text/javascript">

              function checkForm(){

                     //1.获取数据

                     varemail=document.getElementById("email");

                     varusername=document.getElementById("username");

                     varpassword=document.getElementById("password");

                     varrepassword=document.getElementById("repassword");                     

                     //2..验证非空

                     if(checkNull(email.value)){

                            //如果返回true,代表email为空

                            document.getElementById("email_msg").innerHTML="<fontcolor='red'>邮箱不能为空</font>";

                            returnfalse;

                     }

                     if(checkNull(username.value)){

                            //如果返回true,代表email为空

                            document.getElementById("username_msg").innerHTML="<fontcolor='red'>会员名不能为空</font>";

                            returnfalse;

                     }

                     if(checkNull(password.value)){

                            //如果返回true,代表email为空

                            document.getElementById("password_msg").innerHTML="<fontcolor='red'>密码不能为空</font>";

                            return false;

                     }

                     if(checkNull(repassword.value)){

                            //如果返回true,代表email为空

                            document.getElementById("repassword_msg").innerHTML="<fontcolor='red'>重复密码不能为空</font>";

                            returnfalse;

                     }

                     //3.验证邮箱符合规则

                     if(!checkEmail(email.value)){

                            //如果返回true,代表符合规则

                            document.getElementById("email_msg").innerHTML="<fontcolor='red'>请输入有效的邮箱地址</font>";

                            returnfalse;

                     }

                    

                     //4.验证会员名或密码长度大于6位

                     if(!checkLength(username.value)){

                            document.getElementById("username_msg").innerHTML="<fontcolor='red'>会员名长度必须大于6位</font>";

                            returnfalse;

                     }

                     if(!checkLength(password.value)){

                            document.getElementById("password_msg").innerHTML="<fontcolor='red'>会员名长度必须大于6位</font>";

                            returnfalse;

                     }

                     //5.验证两次输入密码一致

                     if(password.value!=repassword.value){

                            document.getElementById("repassword_msg").innerHTML="<fontcolor='red'>两次密码输入不一致</font>";

                            returnfalse;

                     }

                    

                     returntrue;

              }

              //验证长度

              functioncheckLength(data){

                     varreg=/^\w{6,}$/;

                     returnreg.test(data);

              }

              //验证邮箱

              functioncheckEmail(data){

                     varreg=/^(\w)+@(\w)+(\.\w+)+$/;

                     returnreg.test(data);

              }

              //验证非空

              functioncheckNull(data){

                     varreg=/^\s*$/; //0个或多个空字符串

                     return(reg.test(data))//如果data符合规则，返回true，否则返回false                       

                    

              }

</script>

setTimeout()和setInterval()的区别和转换

定义

setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。

从定义上我们可以看到两个函数十分类似，只不过前者执行一次，而后者可以执行多次，两个函数的参数也相同，第一个参数是要执行的code或句柄，第二个是延迟的毫秒数。

很简单的定义，使用起来也很简单，但有时候我们的代码并不是按照我们的想象精确时间被调用的，很让人困惑

简单示例

看个简单的例子,简单页面在加载完两秒后，写下Delayed alert!

setTimeout('document.write("Delayed alert!");', 2000);

看起来很合理，我们再看个setInterVal()方法的例子

var num = 0;
        var i = setInterval(function() {
            num++;
            var date = new Date();
            document.write(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds() + '<br>');
            if (num > 10)
                clearInterval(i);
        }, 1000);

页面每隔1秒记录一次当前时间（分钟：秒：毫秒），记录十次后清除，不再记录。考虑到代码执行时间可能记录的不是执行时间，但时间间隔应该是一样的，看看结果

43:38:116
43:39:130
43:40:144
43:41:158
43:42:172
43:43:186
43:44:200
43:45:214
43:46:228
43:47:242
43:48:256

 

为什么

时间间隔几乎是1000毫秒，但不精确，这是为什么呢？原因在于我们对JavaScript定时器存在一个误解，JavaScript其实是运行在单线程的环境中的，这就意味着定时器仅仅是计划代码在未来的某个时间执行，而具体执行时机是不能保证的，因为页面的生命周期中，不同时间可能有其他代码在控制JavaScript进程。在页面下载完成后代码的运行、事件处理程序、Ajax回调函数都是使用同样的线程，实际上浏览器负责进行排序，指派某段程序在某个时间点运行的优先级。

我们把效果放大一下看看，添加一个耗时的任务

function test() {
            for (var i = 0; i < 500000; i++) {
                var div = document.createElement('div');
                div.setAttribute('id', 'testDiv');
                document.body.appendChild(div);
                document.body.removeChild(div);
            }
        }
        setInterval(test, 10);
        var num = 0;
        var i = setInterval(function() {
            num++;
            var date = new Date();
            document.write(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds() + '<br>');
            if (num > 10)
                clearInterval(i);
        }, 1000);

我们又加入了一个定时任务，看看结果

47:9:222
47:12:482
47:16:8
47:19:143
47:22:631
47:25:888
47:28:712
47:32:381
47:34:146
47:35:565
47:37:406

这下效果明显了，差距甚至都超过了3秒，而且差距很不一致。

我们可以可以把JavaScript想象成在时间线上运行。当页面载入的时候首先执行的是页面生命周期后面要用的方法和变量声明和数据处理，在这之后JavaScript进程将等待更多代码执行。当进程空闲的时候，下一段代码会被触发

除了主JavaScript进程外，还需要一个在进程下一次空闲时执行的代码队列。随着页面生命周期推移，代码会按照执行顺序添加入队列，例如当按钮被按下的时候他的事件处理程序会被添加到队列中，并在下一个可能时间内执行。在接到某个Ajax响应时，回调函数的代码会被添加到队列。JavaScript中没有任何代码是立即执行的，但一旦进程空闲则尽快执行。定时器对队列的工作方式是当特定时间过去后将代码插入，这并不意味着它会马上执行，只能表示它尽快执行。

知道了这些后，我们就能明白，如果想要精确的时间控制，是不能依赖于JavaScript的setTimeout函数的。

重复的定时器

使用 setInterval() 创建的定时器可以使代码循环执行，到有指定效果的时候，清除interval就可以，如下例

var my_interval = setInterval(function () {
            if (condition) {
                //..........
            } else {
                clearInterval(my_interval);
            }
        }, 100);

但这个方式的问题在于定时器的代码可能在代码再次被添加到队列之前还没有执行完成，结果导致循环内的判断条件不准确，代码多执行几次，之间没有停顿。不过JavaScript已经解决这个问题，当使用setInterval（）时，仅当没有该定时器的其他代码实例时才将定时器代码插入队列。这样确保了定时器代码加入到队列的最小时间间隔为指定间隔。

这样的规则带来两个问题

1. 1. 某些间隔会被跳过
2. 2.多个定时器的代码执行之间的间隔可能比预期要小

为了避免这两个缺点，我们可以使用setTimeout（）来实现重复的定时器

setTimeout(function () {
            //code
            setTimeout(arguments.callee, interval);
        }, interval)

这样每次函数执行的时候都会创建一个新的定时器，第二个setTimeout（）调用使用了agrument.callee 来获取当前实行函数的引用，并设置另外一个新定时器。这样做可以保证在代码执行完成前不会有新的定时器插入，并且下一次定时器代码执行之前至少要间隔指定时间，避免连续运行。

setTimeout(function () {
            var div = document.getElementById('moveDiv');
            var left = parseInt(div.style.left) + 5;
            div.style.left = left + 'px';
            if (left < 200) {
                setTimeout(arguments.callee, 50);
            }
        }, 50);

这段定时器代码每次执行的时候，把一个div向右移动5px，当坐标大于200的时候停止。