秒客网

JavaScript 输出

---

JavaScript 没有任何打印或者输出的函数。

JavaScript 可以通过不同的方式来输出数据：

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

（一）Javascript的变量定义

JS脚本编程语言中的变量和其他编程语言定义变量是不一样的，在其他编程语言中定义变量的关键字用该变量数据类型的关键字，比如：int来定义整数数据类型，float定义小数，string定义字符串。而，在JS中，所有类型的变量，都用var来定义。

定义变量使用关键字var,语法如下：

var 变量名

变量名可以任意取名，但要遵循命名规则:

    1.变量必须使用字母、下划线(_)或者美元符($)开始。

    2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。

    3.不能使用JavaScript关键词与JavaScript保留字。

JavaScript 变量的生存期（变量声明是如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。）

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

 （二）JavaScript的数据类型

JavaScript 数据类型

---

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

1.字符串（string）

（一）JavaScript 字符串

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

字符串是存储字符（比如 "Bill Gates"）的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

实例

var carname="Volvo XC60";
var carname=\'Volvo XC60\';

   您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：也就是说字符串里面含有单引号，那么我们定义字符串的符号就用双引号。若字符串的内容中含有双引号，那么定义字符串时，我们就用单引号。如下例所示。

实例

var answer="It\'s alright";
var answer="He is called \'Johnny\'";
var answer=\'He is called "Johnny"\';

 

还有一种情况，假如字符串的内容里既有单引号又有双引号，怎么办呢？

作法：可以用转义字符\来标识。如：\'I\\'m \"OK\"!\'(即：在一个字符串中，每个\'或者"前面加一个\即可，例如\'m前面加了\，\"OK\"中，前面的"和后面的"的前面都加了\);表示的字符串内容是：I\'m "OK"!。

 

字符串的存储以及访问方式：

var answer="It\'s alright"; 字符串在内存中的存储方式是:一个字符占一个空间。比如：answer[0]="I"  answer[1]="t"  answer[2]=" \' "等等。

可以使用索引位置来访问字符串中的每个字符：

实例

var character = carname[7];

 

（二）string对象的属性以及方法

（1）string对象的属性.（获取字符串长度）

可以使用内置属性 length 来计算字符串的长度：

实例

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

 

反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：

转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。

2.字符串的方法

（1）在字符串中查找字符串( indexOf() )

字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：

实例

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");  //返回字符串welcome中首字母w在存储中首次出现的位置给变量n。

如果没找到对应的字符函数返回-1

lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。

3.内容匹配( match（）)

match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符；若没找到，则返回null。

 

4.替换内容( replace() )

 

replace() 方法在字符串中用某些字符替换另一些字符。

 

 5.字符串大小写转换(  toUpperCase()  toLowerCase()  )

字符串大小写转换使用函数 toUpperCase() / toLowerCase():

 

6.字符串转为数组

字符串使用strong>split()函数转为数组:

总结：字符串属性和方法

属性:

• length
• prototype
• constructor

方法:

• charAt()
• charCodeAt()
• concat()
• fromCharCode()
• indexOf()
• lastIndexOf()
• match()
• replace()
• search()
• slice()
• split()
• substr()
• substring()
• toLowerCase()
• toUpperCase()
• valueOf()

2.JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

实例

var x1=34.00;      // 使用小数点来写
var x2=34;         // 不使用小数点来写

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

实例

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

 

isNaN(y);     //用来判断y是否不是数字，如果y不是数字，则返回true；若y为数字，则返回false。

 

3.JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

 

4.JavaScript Array（数组） 对象

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

下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):

实例

var cars=["Saab","Volvo","BMW"];

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

创建一个数组

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1: 常规方式:

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

 

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

 

访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。

以下实例可以访问myCars数组的第一个值：

var name=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel";

 

	[0] 是数组的第一个元素。[1] 是数组的第二个元素。

 

在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此，你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组：

创建新方法

原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。

实例：创建一个新的方法。

Array.prototype.ucase=function()
{
  for (i=0;i<this.length;i++)
  {this[i]=this[i].toUpperCase();}
}

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

 

 操作数组：

（一）concat(合并两个数组)

（二）concat(合并三个数组)

 （三）join(将一个数组的元素组成字符串)

 

（四）pop() 删除数组的最后一个元素。

（五）push()  向数组的末尾添加新的元素

（六）reverse（） 将数组反转排序

 

（七）shift（） 删除数组第一个元素

 （八）slice（first , lastbefore）选择下标为first至lastbefore-1下标的数组元素

 

 

 5.JavaScript 对象（JavaScipt对象只是一种特殊的数据。对象拥有属性和方法。）

 JavaScript 提供多个内建对象，比如 String、Date、Array 等等

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。

对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；

 

对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；

 

JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：

 

  var objectName =new Array();//使用new关键字定义对象
或者
  var objectName =[];

 

访问对象属性的语法:

 

objectName.propertyName

 

如使用 Array 对象的 length 属性来获得数组的长度：

 

var myarray=new Array(6);//定义数组对象
var myl=myarray.length;//访问数组长度length属性

 

以上代码执行后，myl的值将是：6

 

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是：

objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度：

var message="Hello World!";
var x=message.length;

在以上代码执行后，x 的值将是：

12

访问对象的方法

方法是能够在对象上执行的动作。（对对象进行操作）

您可以通过以下语法来调用方法：

objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写：

var message="Hello world!";
var x=message.toUpperCase();

 

属性和方法的区别：属性是获取对象原有的属性值；方法是改变或者操作对象本身。以下例为例：

<body>
<script>
    var message="hello world!";
    var n=message.length;//调用了string对象的length属性。这里是指获取message中长度属性的属性值，赋值给n。
    document.write(n+"<br>");
    var message="hello world";//调用了string对象的toUpperCase()方法。将message原来的字符串内容改为大写的字符串对message本身进行操作。
    var n=message.toUpperCase();
    document.write(n);
</script>
</body>
结果如下：

创建 JavaScript 对象

 

通过 JavaScript，您能够定义并创建自己的对象。

创建新对象有两种不同的方法：

• 定义并创建对象的实例
• 使用函数来定义对象，然后创建新的对象实例

  第一种方法：创建直接的实例

  这个例子创建了对象的一个新实例，并向其添加了四个属性：

  实例

  person=new Object();
  person.firstname="John";
  person.lastname="Doe";
  person.age=50;
  person.eyecolor="blue";

替代语法（使用对象 literals）：

实例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

第二种方法：使用对象构造器

本例使用函数来构造对象：

实例

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

利用函数创建了person对象。

具体如下

<body>

<script>
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");                   //定义一个person对象类型的实例myFather.
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

</body>

显示结果为：

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）（比如说，某个对象中包含一个方法，在运行这个方法时，this指向这个对象。）

创建 JavaScript 对象实例

一旦您有了对象构造器，就可以创建新的对象实例，就像这样：

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

把属性添加到 JavaScript 对象

您可以通过为对象赋值，向已有对象添加新属性：

假设 personObj 已存在 - 您可以为其添加这些新属性：firstname、lastname、age 以及 eyecolor：

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;

在以上代码执行后，x 的值将是：

John

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法：

function person(firstname,lastname,age,eyecolor)

{
     this.firstname=firstname;
     this.lastname=lastname;
     this.age=age;
     this.eyecolor=eyecolor;

     this.changeName=changeName;                      //chagename为person对象的方法。
function changeName(name)
 {
    this.lastname=name;
 }
}

var myFather=new person("Joe","Dom",50,"blue);

myFather.chageName("Jeck");

document.write(myFather.lastname);

显示结果为：Jeck.

changeName() 函数 name 的值赋给 person 的 lastname 属性。

JavaScript 类

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

JavaScript 基于 prototype，而不是基于类的。

JavaScript prototype 属性

1 原型法设计模式

 原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。

2 javascript的方法可以分为三类：

a 类方法

b 对象方法

c 原型方法

例子：

 

3 obj1.func.call(obj)方法

意思是将obj看成obj1,调用func方法

 

prototype是什么含义？

定义和用法

prototype 属性允许您向对象添加属性和方法

注意： Prototype 是全局属性，适用于所有的Javascript对象。Javascript中对象的prototype属性的解释是：返回对象类型原型的引用

语法

1. object.prototype.name=value；  //给object新增属性name，并赋值value;

---

2.A.prototype.方法名=function(){

}

举例：

输出结果为：

上面的代码其实也相当于：

 

3. A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例，可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况：A的prototype是B的实例，同时B的prototype也是A的实例。

我们首先定义了baseClass类，然后我们要定义extentClass，但是我们打算以baseClass的一个实例为原型，来克隆的extendClass也同时包含showMsg这个对象方法。

extendClass.prototype = new baseClass()就可以阅读为：extendClass是以baseClass的一个实例为原型克隆创建的。

那么就会有一个问题，如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样？

下面是扩展实验2：

实验证明：函数运行时会先去本体的函数中去找，如果找到则运行，找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。

那么又会有一个新的问题：

如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办？

 

答案是可以使用call:

 

extendClass.prototype = new baseClass();
var instance = new extendClass();


var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg

 

这里的baseinstance.showMsg.call(instance);阅读为“将instance当做baseinstance来调用，调用它的对象方法showMsg”

好了，这里可能有人会问，为什么不用baseClass.showMsg.call(instance);

这就是对象方法和类方法的区别，我们想调用的是baseClass的对象方法

用实例谈谈javascript中的this和prototype

本文通过几个实例谈谈js中一些基础概念的问题。首先回顾一下js这门语言的特点：除了对象什么都没有。函数在js语言中被看作一种特殊的数据类型，特殊在包含代码并且可以执行，但落点在它是一种数据类型，与数字、字符串等一样。

   理解了这个，那么js语言中的全局作用域和函数作用域、全局变量和局部变量。可以通过全局对象和非全局对象划分。如果函数或其他数据类型，不依托非全局变量，那么就默认依托全局变量，即作为全局对象的属性或方法，否则被当作局部对象方法或属性。this被用作指向属性和方法所依托的对象。搞清楚了这个，this的判断就基本上不会出现问题了。

   以下实例（点击查看）为第七个内容的实例。

以上代码，倒数第三、四行代码都不难理解，倒数第一行代码怎么理解呢？首先我们看jj定义在全局对象中，即jj是window的属性，从jj的赋值我们知道，jj是一个方法，jj（）也就相当于window.jj(),即调用函数的this指向全局对象window。

如下代码是回复一个网友提问的解答：

call和apply函数都可以改变this指针的指向，但是prototype属性会被丢弃掉，通过实例不难验证。

call和apply的定义以及应用

 

1、方法定义

call方法:
语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
定义：调用一个对象的一个方法，以另一个对象替换当前对象。 
说明： 
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 

apply方法：
语法：apply([thisObj[,argArray]]) 
定义：应用某一对象的一个方法，用另一个对象替换当前对象。 
说明： 
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

 实例：

 

 

 

 

通过上述两个例子我们得知：当对象A.a方法调用call方法，而且B对象的实例b为call的参数时，将A方法附加给b，也就是说b拥有了对象A的a方法。

即：

function A(){

   this.name=“zhangsan”;

   this.showname=function{

alert(this.name);}

}

function B(){

 this.name="lisi;

}

var a=new A();

var b=new B();

a.showname.call(b,",");   //结果为在窗口弹出lisi；

当对象A.call(对象B)时，表示A对象代替B对象，相当于B对象是A对象的复制，B对象拥有了A对象相同的属性和方法。

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

语法

for (variable in object)
{
  code to be executed
}

注意： for...in 循环中的代码块将针对每个属性执行一次。

实例

循环遍历对象的属性：

实例

var person={fname:"John",lname:"Doe",age:25}; 

for (x in person)
  {
  txt=txt + person[x];
  }

6.Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

实例

cars=null;
person=null;

 

7.JavaScript Date（日期） 对象

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

创建日期

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

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：

有四种方式初始化日期:

new Date() // 当前日期和时间
new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

上面的参数大多数都是可选的，在不指定的情况下，默认参数是0。

从 1970 年 1 月 1 日通用一天计算为86,400,000毫秒

实例化一个日期的一些例子：

var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)

 

1.获取当前的时间

返回的当前时间为（周几 月份  日期  年份  时分秒  GNT+0800（中国标准时间））

2.获取年份（调用了Date对象的getFullYear()方法）

 

3.获取毫秒（调用了Date对象的getTime() 方法返回从 1970 年 1 月 1 日至今的毫秒数）

3.如何使用 setFullYear() 设置具体的日期

 

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

注意: 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

 

4.如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串

 5.getDay()（获取周几）d.getDay()  返回的是0-6之间的数。

6.Display a clock（如何在网页上显示一个钟表）

 

<body onload="mytime()">
<p id="demo">nihao</p>
<script>
    function mytime(){
    var d=new Date();
    var h=d.getHours();
    var m=d.getMinutes();
    var s=d.getSeconds();
    m=checktime(m);
    s=checktime(s);
    document.getElementById("demo").innerHTML=h+":"+m+":"+s;
    t=setTimeout(function(){mytime()},500)                   //如果没有这一句，那么时间只有在重新加载网页的时候才会变一下，如果不加载，为定值。
    }
    function  checktime(n) {
        if(n<10)
        {
            n="0"+n;}

            return n;
    }

</script>
</body>

 

8.setTime()   seTime(毫秒数)。d.setTime(77771564221)表示从1970/01/01开始增加77771564221毫秒为将要设定的时间。因此d由现在的时间改为1970/01/01+77771564221毫秒所形成的新的时间。

 

两个日期比较

日期对象也可用于比较两个日期。

下面的代码将当前日期与 2100 年 1 月 14 日做了比较：

var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
  {
  alert("Today is before 14th January 2100");
  }
else
  {
  alert("Today is after 14th January 2100");
  }

 

 

JavaScript Math（算数） 对象

Math（算数）对象的作用是：执行常见的算数任务。

（一）如何使用 round()

（二）random ()产生随机数

（三）max() 返回最大值数

（四）min() 返回最小值数

Math 对象

Math（算数）对象的作用是：执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

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

var x=Math.PI;
var y=Math.sqrt(16);

注意： Math对象无需在使用这个对象之前对它进行定义。

---

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值：

你可以参考如下Javascript常量使用方法：

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

---

算数方法

除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。

下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。

document.write(Math.round(4.7));

上面的代码输出为：

5

下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：

document.write(Math.random());

上面的代码输出为：

0.6581708136621066

下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数：

document.write(Math.floor(Math.random()*11));                                                         //var num=Math.floor(Math.random()*100);   Math.floor(Math.random()*100)是随机返回0-100之间的一个数

上面的代码输出为：

8

 

JavaScript Window

由 youj 创建，最后一次修改 2015-09-09

JavaScript Window - 浏览器对象模型

---

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

---

浏览器对象模型 (BOM)

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

---

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

---

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

尝试一下 »

该例显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）

---

其他 Window 方法

一些其他方法：

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

JavaScript Window Screen

由 youj 创建，最后一次修改 2015-09-20

JavaScript Window Screen

---

window.screen 对象包含有关用户屏幕的信息。

---

Window Screen

window.screen对象在编写时可以不使用 window 这个前缀。

一些属性：

• screen.availWidth - 可用的屏幕宽度

• screen.availHeight - 可用的屏幕高度

---

Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

实例

返回您的屏幕的可用宽度：

<script>

document.write("Available Width: " + screen.availWidth);

</script>

以上代码输出为：

Available Width: 1920

尝试一下 »

 

---

Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

实例

返回您的屏幕的可用高度：

<script>

document.write("Available Height: " + screen.availHeight);

</script>

以上代码将输出：

Available Height: 1040

 

JavaScript Window Location

由 youj 创建，最后一次修改 2015-09-26

JavaScript Window Location

---

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

---

Window Location

window.location 对象在编写时可不使用 window 这个前缀。 一些例子：

一些实例:

• location.hostname 返回 web 主机的域名

• location.pathname 返回当前页面的路径和文件名

• location.port 返回 web 主机的端口 （80 或 443）

• location.protocol 返回所使用的 web 协议（http:// 或 https://）

---

Window Location Href

location.href 属性返回当前页面的 URL。

实例

返回（当前页面的）整个 URL：

<script>

document.write(location.href);

</script>

以上代码输出为：

//www.w3cschool.cn/javascript/js-window-location.html

---

Window Location Pathname

location.pathname 属性返回 URL 的路径名。

实例

返回当前 URL 的路径名：

<script>

document.write(location.pathname);

</script>

以上代码输出为：

/javascript/js-window-location.html

---

Window Location Assign

location.assign() 方法加载新的文档。

实例

加载一个新的文档：

<html>
<head>
<script>
function newDoc()
  {
  window.location.assign("http://www.w3cschool.cn")
  }
</script>
</head>
<body>

<input type="button" value="Load new document" onclick="newDoc()">

</body>
</html>

JavaScript Window History

---

window.history 对象包含浏览器的历史。

---

Window History

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

• history.back() - 与在浏览器点击后退按钮相同
• history.forward() - 与在浏览器中点击按钮向前相同

• Window History Back

  history.back() 方法加载历史列表中的前一个 URL。

  这与在浏览器中点击后退按钮是相同的：

  实例

  在页面上创建后退按钮：

  <html>
  <head>
  <script>
  function goBack()
    {
    window.history.back()
    }
  </script>
  </head>
  <body>
  
  <input type="button" value="Back" onclick="goBack()">
  
  </body>
  </html>

  以上代码输出为：

   

  Window History Forward

  history forward() 方法加载历史列表中的下一个 URL。

  这与在浏览器中点击前进按钮是相同的：

  实例

  在页面上创建一个向前的按钮：

  <html>
  <head>
  <script>
  function goForward()
    {
    window.history.forward()
    }
  </script>
  </head>
  <body>
  
  <input type="button" value="Forward" onclick="goForward()">
  
  </body>
  </html>

  以上代码输出为：

   

  JavaScript Window Navigator

  由 youj 创建，最后一次修改 2015-09-12

  JavaScript Window Navigator

  ---

  window.navigator 对象包含有关访问者浏览器的信息。

  ---

  Window Navigator

  window.navigator 对象在编写时可不使用 window 这个前缀。

  实例

  <div id="example"></div>
  
  <script>
  
  txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
  txt+= "<p>Browser Name: " + navigator.appName + "</p>";
  txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
  txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
  txt+= "<p>Platform: " + navigator.platform + "</p>";
  txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
  txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
  
  document.getElementById("example").innerHTML=txt;
  
  </script>

  
  尝试一下 »

  
  

  ---

  警告!!!

  来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

  • navigator 数据可被浏览器使用者更改
  • 一些浏览器对测试站点会识别错误
  • 浏览器无法报告晚于浏览器发布的新操作系统

  ---

  浏览器检测

  由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

  由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。

  例子：if (window.opera) {...some action...}

  JavaScript 弹窗

  由 youj 创建，最后一次修改 2015-09-05

  JavaScript 弹窗

  ---

  可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

  ---

  警告框

  警告框经常用于确保用户可以得到某些信息。

  当警告框出现后，用户需要点击确定按钮才能继续进行操作。

  语法

  window.alert("sometext");

  window.alert() 方法可以不带上window对象，直接使用alert()方法。

  实例

  <!DOCTYPE html>
  <html>
  <head>
  <script>
  function myFunction()
  {
  alert("你好，我是一个警告框！");
  }
  </script>
  </head>
  <body>
  
  <input type="button" onclick="myFunction()" value="显示警告框">
  
  </body>
  </html>

  
  尝试一下 »

  
  

  ---

  确认框

  确认框通常用于验证是否接受用户操作。

  当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

  当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。

  语法

  window.confirm("sometext");//这里的sometext是让点击确定或者按钮的内容提示：

   

  window.confirm() 方法可以不带上window对象，直接使用confirm()方法。

  实例

  var r=confirm("按下按钮");//如果用户点击了“确定”，则返回true；如果用户点击了“取消”，则返回false。
  if (r==true)
    {
      x="你按下了\"确定\"按钮!";
    }
  else
    {
      x="你按下了\"取消\"按钮!";
    }

  
  尝试一下 »

  
  

  ---

  提示框

  提示框经常用于提示用户在进入页面前输入某个值。

  当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

  如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

  语法

  window.prompt("sometext","defaultvalue");

  window.prompt() 方法可以不带上window对象，直接使用prompt()方法。

  实例

  var person=prompt("请输入你的名字","Harry Potter");
  if (person!=null && person!="")
    {
    x="你好 " + person + "！今天感觉如何？";
    }

  
  尝试一下 »

  
  

  ---

  换行

  弹窗使用 反斜杠 + "n"(\n) 来设置换行。

  实例

  alert("Hello\nHow are you?");

  
  尝试一下 »

  JavaScript 计时事件

  由 youj 创建，最后一次修改 2015-09-29

  JavaScript 计时事件

  通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

  在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

  • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
  • setTimeout() - 暂停指定的毫秒数后执行指定的代码

  Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

  setInterval() 方法

  setInterval() 间隔指定的毫秒数不停地执行指定的代码

  语法

  window.setInterval("javascript function",milliseconds);

  window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。

  setInterval() 第一个参数是函数（function）。

  第二个参数间隔的毫秒数

  注意: 1000 毫秒是一秒。

  例如：每隔3秒执行一次alert

  

   

  显示当地的时间：

  以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码，就是和手表一样。

  

   

   

  如何停止执行?

  clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

  语法

  window.clearInterval(intervalVariable)

  window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

  要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

  myVar=setInterval("javascript function",milliseconds);

  然后你可以使用clearInterval() 方法来停止执行。

  

  setTimeout() 方法

  语法

  window.setTimeout("javascript 函数",毫秒数);

  setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

  setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert(\'5 seconds!\')"，或者对函数的调用，诸如"alertMsg()"。

  第二个参数指示从当前起多少毫秒后执行第一个参数。

  提示：1000 毫秒等于一秒。

  实例

  等待3秒，然后弹出 "Hello":

  setTimeout(function(){alert("Hello")},3000);

  
  尝试一下 »

  
  

  ---

  如何停止执行?

  clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

  语法

  window.clearTimeout(timeoutVariable)

  window.clearTimeout() 方法可以不使用window 前缀。

  要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

  myVar=setTimeout("javascript function",milliseconds);

  如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。

  实例

  以下是同一个实例, 但是添加了 "Stop the alert" 按钮:

  var myVar;
  
  function myFunction()
  {
  myVar=setTimeout(function(){alert("Hello")},3000);
  }
  
  function myStopFunction()
  {
  clearTimeout(myVar);
  }

  
  尝试一下 »

   

   

  JavaScript Cookies

  ---

  Cookies 用于存储 web 页面的用户信息。

  ---

  什么是 Cookies？

  Cookies 是一些数据, 存储于你电脑上的文本文件中。

  当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

  Cookies 的作用就是用于解决 "如何记录客户端的用户信息":

  • 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
  • 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

  Cookies 以名/值对形式存储，如下所示:

  username=John Doe

  当浏览器从服务器上请求 web 页面时， 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

  ---

  使用 JavaScript 创建Cookie                              //在创建cookie的时候，一个document.cookie创建一个cookie

  JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。

  JavaScript 中，创建 cookie 如下所示：

  document.cookie="username=John Doe";

  您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

  document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

  您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

  document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

   

  

   

  ---

  

   

   

  每个cookie真正存储的是名和值，如username=ccfyyn2。而expires则不会再我们获取cookie的时候获取到。

  使用 JavaScript 读取 Cookie                           //在获取cookie的时候，document.cookie获取到所有的cookie。

  在 JavaScript 中, 可以使用以下代码来读取 cookies：

  var x = document.cookie;  //这里的x为字符串“  uesername=ccfyyn2;username1=ccf;username3=yyn ".

   

  	document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;

   

  ---

  使用 JavaScript 修改 Cookie

  在 JavaScript 中，修改 cookies 类似于创建 cookies，如下所示：

  document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

  旧的 cookie 将被覆盖。

   

  ---

  使用 JavaScript 删除 Cookie

  删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

  document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

  注意，当您删除时不必指定 cookie 的值。

  ---

  Cookie 字符串

  document.cookie 属性看起来像一个普通的文本字符串，其实它不是。

  即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。

  如果您设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：

  cookie1=value; cookie2=value;

  显示所有 Cookie  创建 Cookie 1  创建 Cookie 2 删除 Cookie 1  删除 Cookie 2

  如果您需要查找一个指定 cookie 值，您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。

  ---

  JavaScript Cookie 实例

  在以下实例中，我们将创建 cookie 来存储访问者名称。

  首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。

  访问者下一次访问页面时，他会看到一个欢迎的消息。

  在这个实例中我们会创建 3 个 JavaScript 函数:

  1. 设置 cookie 值的函数
  2. 获取 cookie 值的函数
  3. 检测 cookie 值的函数

  ---

  设置 cookie 值的函数

  首先，我们创建一个函数用于存储访问者的名字：

  function setCookie(cname,cvalue,exdays)
  {
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
  }

  函数解析：

  以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。

  该函数设置了 cookie 名、cookie 值、cookie过期时间。

  ---

  获取 cookie 值的函数

  然后，我们创建一个函数用户返回指定 cookie 的值：

  function getCookie(cname)
  {
  var name = cname + "=";
  var ca = document.cookie.split(\';\');
  for(var i=0; i<ca.length; i++)
    {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
  return "";
  }

  函数解析：

  cookie 名的参数为 cname。

  创建一个文本变量用于检索指定 cookie :cname + "="。

  使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(\';\'))。

  循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca[i].trim())。

  如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。

  如果没有找到 cookie, 返回 ""。

  ---

  检测 cookie 值的函数

  最后，我们可以创建一个检测 cookie 是否创建的函数。

  如果设置了 cookie，将显示一个问候信息。

  如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：

  function checkCookie()
  {
  var username=getCookie("username");
  if (username!="")
    {
    alert("Welcome again " + username);
    }
  else
    {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
      {
      setCookie("username",username,365);
      }
    }
  }

   

  ---

  完整实例

  实例

  function setCookie(cname,cvalue,exdays)
  {
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
  }
  
  function getCookie(cname)
  {
  var name = cname + "=";
  var ca = document.cookie.split(\';\');
  for(var i=0; i<ca.length; i++) 
    {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
  }
  
  function checkCookie()
  {
  var user=getCookie("username");
  if (user!="")
    {
    alert("Welcome again " + user);
    }
  else 
    {
    user = prompt("Please enter your name:","");
    if (user!="" && user!=null)
      {
      setCookie("username",user,365);
      }
    }
  }