1.一条语句,多个变量

var name="Gates", age=56, job="CEO";

2.Value = undefined

在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。

3.重新声明 JavaScript 变量

如果重新声明 JavaScript 变量,该变量的值不会丢失:

在以下两条语句执行后,变量 carname 的值依然是 "Volvo":

var carname="Volvo";
var carname;

4.JavaScript 对大小写敏感。

5.空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:

var name="Hello";
var name = "Hello";

6.对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:

document.write("Hello \
World!");

不过,您不能像这样折行:

document.write \
("Hello World!");

7.JavaScript 数据类型

1).W3CSchool上给出的答案是:字符串、数字、布尔、数组、对象、Null、Undefined

2).但是从typeof的角度来讲,有以下几种类型:string、number、boolean、undefined、object、function,其中object包括Null、数组、对象,以及通过new出来的String、Number、Boolean、Array等。

3).instanceof 操作符以一个对象和一个构造函数为参数,如果对象是构造函数所指定的类型的一个实例,instanceof 返回 true;否则返回 false。对应关系如下:

字符串:String;

数字:Number;

布尔:Boolean;

数组(var arr = ['1', '2', '3']; 和 var arr2 = new Array("1", "2", "3");都是):Array;

对象:Object;

方法:Function;

但是,上述这些如果用(xxx instanceof Object)都会得到true,因为它们都是对象。

JS中创建对象的方式有两种:

a.创建直接的实例

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

替代语法:

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

b.使用对象构造器

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

切记:JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...

3).在W3C定义中的定义:constructor 属性返回对创建此对象的数组函数的引用

就是返回对象相对应的构造函数

4)最后一点,JavaScript中的数据类型又可以分为原始类型和引用类型。其中,string、number、boolean、null、undefined属于原始类型,其他的都属于引用类型,而且在JavaScript中,引用类型就是指对象,引用值是引用类型的实例,也是对象的同义词。

8.JavaScript 拥有动态类型

这意味着相同的变量可用作不同的类型:

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

9.JavaScript 数字

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

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

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

10.JavaScript 数组

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

或者:

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

或者:

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

11.JavaScript 对象

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

var person={firstname:"Bill", lastname:"Gates", id:5566};

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

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

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

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

12.Undefined 和 Null

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

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

cars=null;

13.声明变量类型

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

14.JavaScript 对象

JavaScript 中的所有事物都是对象:字符串、数字、数组、函数、日期,等等。

在 JavaScript 中,对象是拥有属性和方法的数据。

属性是与对象相关的值。

方法是能够在对象上执行的动作。

15.创建 JavaScript 对象

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

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

  1. 定义并创建对象的实例

  2. 使用函数来定义对象,然后创建新的对象实例

方法一:

本例创建名为 "person" 的对象,并为其添加了四个属性:

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

访问对象属性的语法是:

objectName.propertyName

访问对象的方法的语法是:

objectName.methodName()

提示:在面向对象的语言中,使用 camel-case 标记法的函数是很常见的。您会经常看到 someMethod() 这样的函数名,而不是 some_method()。

替代写法:

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;
}

16.JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

17.局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕,本地变量就会被删除。

18.全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

19.JavaScript 变量的生存期

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

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

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

20.向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

carname="Volvo";

将声明一个全局变量 carname,即使它在函数内执行。

21.用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来(连接起来)。

如需把两个或多个字符串变量连接起来,请使用 + 运算符。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

在以上语句执行后,变量 txt3 包含的值是 "What a verynice day"。

要想在两个字符串之间增加空格,需要把空格插入一个字符串之中:

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

或者把空格插入表达式中:

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

在以上语句执行后,变量 txt3 包含的值是:

"What a very nice day"

提示:如果把数字与字符串相加,结果将成为字符串。

22.If 语句

只有当指定条件为 true 时,该语句才会执行代码。

23.JavaScript Switch 语句

switch(n)
{
case 1:执行代码块 1break;
case 2:执行代码块 2break;
default:n 与 case 1 和 case 2 不同时执行的代码
}

23.不同类型的循环

JavaScript 支持不同类型的循环:

  • for - 循环代码块一定的次数

  • for/in - 循环遍历对象的属性

  • while - 当指定的条件为 true 时循环指定的代码块

  • do/while - 同样当指定的条件为 true 时循环指定的代码块

var person={fname:"John",lname:"Doe",age:25};for (x in person){txt=txt + person[x];}

24.JavaScript 标签

正如您在 switch 语句那一章中看到的,可以对 JavaScript 语句进行标记。

如需标记 JavaScript 语句,请在语句之前加上冒号:

label:
语句

25.JavaScript 错误

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

错误一定会发生

当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误:

可能是语法错误,通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然,也可能是由于许多其他不可预知的因素。

JavaScript 抛出错误

当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息。

描述这种情况的技术术语是:JavaScript 将抛出一个错误。

JavaScript 测试和捕捉

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

JavaScript 语句 trycatch 是成对出现的。

26.JavaScript 表单验证

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

被 JavaScript 验证的这些典型的表单数据有:

  • 用户是否已填写表单中的必填项目?

  • 用户输入的邮件地址是否合法?

  • 用户是否已输入合法的日期?

  • 用户是否在数据域 (numeric field) 中输入了文本?

27.JavaScript HTML DOM

通过 HTML DOM(文档对象模型),可访问 JavaScript HTML 文档的所有元素。

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树。

  • JavaScript 能够改变页面中的所有 HTML 元素

  • JavaScript 能够改变页面中的所有 HTML 属性

  • JavaScript 能够改变页面中的所有 CSS 样式

  • JavaScript 能够对页面中的所有事件做出反应

28.改变 HTML

改变 HTML 输出流

在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<body><script>
document.write(Date());
</script></body>
</html>

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

document.getElementById(id).innerHTML=new HTML
<html>
<body><p id="p1">Hello World!</p><script>
document.getElementById("p1").innerHTML="New text!";
</script></body>
</html>

改变HTML属性

document.getElementById(id).attribute=new value
<!DOCTYPE html>
<html>
<body><img id="p_w_picpath" src="smiley.gif"><script>
document.getElementById("p_w_picpath").src="landscape.jpg";
</script></body>
</html>

29.改变 CSS

改变 HTML 样式

document.getElementById(id)HTML DOM 事件.style.property=new style
<p id="p2">Hello World!</p><script>
document.getElementById("p2").style.color="blue";
</script>

30.HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

HTML 事件的例子:

  • 当用户点击鼠标时

  • 当网页已加载时

  • 当图像已加载时

  • 当鼠标移动到元素上时

  • 当输入字段被改变时

  • 当提交 HTML 表单时

  • 当用户触发按键时

31.HTML 事件属性

如需向 HTML 元素分配 事件,您可以使用事件属性。

向 button 元素分配 onclick 事件:

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

32.分配事件

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

<input type="text" id="fname" οnchange="upperCase()">

和  事件

和  事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

以及 onclick 事件

以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 事件,当释放鼠标按钮时,会触发  事件,最后,当完成鼠标点击时,会触发 onclick 事件。

33.JavaScript HTML DOM 元素(节点)

添加和删除节点(HTML 元素)

创建新的 HTML 元素

如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div><script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除已有的 HTML 元素

如需删除 HTML 元素,您必须首先获得该元素的父元素:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div><script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。

这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

34.JavaScript 对象

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

对象只是带有属性方法的特殊数据类型。

35.创建 JavaScript 对象

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

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

  1. 定义并创建对象的实例

  2. 使用函数来定义对象,然后创建新的对象实例

创建直接的实例

方法一:例子创建了对象的一个新实例,并向其添加了四个属性:

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
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;
}

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

var myFather=new person("Bill","Gates",56,"blue");

36.把属性添加到 JavaScript 对象

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

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

person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";x=person.firstname;

37.把方法添加到 JavaScript 对象

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

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

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

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

38.JavaScript 类

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

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

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

39.所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。

JavaScript 中的所有数字都存储为根为 10 的 64 位(8 比特),浮点数。

40.JavaScript 数字精度

整数(不使用小数点或指数计数法)最多为 15 位。

小数的最大位数是 17,但是浮点运算并不总是 100% 准确:

41.数字属性和方法

属性:

  • MAX VALUE

  • MIN VALUE

  • NEGATIVE INFINITIVE

  • POSITIVE INFINITIVE

  • NaN

  • prototype

  • constructor

方法:

  • toExponential()

  • toFixed()

  • toPrecision()

  • toString()

  • valueOf()

42.JavaScript 字符串(String)对象

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

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

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

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

在较早的 Netscape 代码基的 JavaScript 实现中(例如 Firefox 实现中),字符串的行为就像只读的字符数组。例如,从字符串 s 中提取第三个字符,可以用 s[2] 代替更加标准的 s.charAt(2)。此外,对字符串应用 for/in 循环时,它将枚举字符串中每个字符的数组下标(但要注意,ECMAScript 标准规定,不能枚举 length 属性)。因为字符串的数组行为不标准,所以应该避免使用它。

43.JavaScript Date(日期)对象

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

创建 Date 对象的语法:

var myDate=new Date()

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

44.JavaScript prototype 属性

prototype 属性使您有能力向对象添加属性和方法。

语法:

object.prototype.name=value
在本例中,我们将展示如何使用 prototype 属性来向对象添加属性:
<script type="text/javascript">function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}var bill=new employee("Bill Gates","Engineer",1985);employee.prototype.salary=null;bill.salary=20000;document.write(bill.salary);</script>

输出:

20000

45.JavaScript constructor 属性

constructor 属性返回对创建此对象的函数的引用。

语法:

object.constructor

在本例中,我们将展示如何使用 constructor 属性:

<script type="text/javascript">var test=new Date();if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Boolean)
{
document.write("This is a Boolean");
}
if (test.constructor==Date)
{
document.write("This is a Date");
}
if (test.constructor==String)
{
document.write("This is a String");
}</script>

输出:

This is a Date

46.JavaScript valueOf() 方法

valueOf() 方法可返回对象的原始值。

语法:

Object.valueOf()

返回值:

Object 的原始布尔值。

抛出:

如果调用该方法的对象不是 Boolean,则抛出异常 TypeError。

在本例中,我们将创建一个 Boolean 对象,并使用 valueOf() 来取得此对象的原始值:

<script type="text/javascript">var boo = new Boolean(false)
document.write(boo.valueOf())</script>

输出:

false

47.JavaScript Array(数组)对象

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

创建 Array 对象的语法:

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

var arr = [1, 2, 3];
var arr=new Array(1,2,3);

两种方式效果一样,都能创建数组!!!

参数

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

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

返回值

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

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

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

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

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

48.JavaScript Boolean(逻辑)对象

Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。

您可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。

Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。

创建 Boolean 对象

使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象:

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

参数

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

返回值

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

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

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

下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。

var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Bill Gates");

49.JavaScript Math(算数)对象

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

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

算数值:

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

  • 常数

  • 圆周率

  • 2 的平方根

  • 1/2 的平方根

  • 2 的自然对数

  • 10 的自然对数

  • 以 2 为底的 e 的对数

  • 以 10 为底的 e 的对数

这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)

  • Math.E

  • Math.PI

  • Math.SQRT2

  • Math.SQRT1_2

  • Math.LN2

  • Math.LN10

  • Math.LOG2E

  • Math.LOG10E

算数方法:

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

50.JavaScript RegExp 对象

RegExp 对象用于规定在文本中检索的内容。

什么是 RegExp?

RegExp 是正则表达式的缩写。

当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置,以及要检索的字符类型,等等。

定义 RegExp:

RegExp 对象用于存储检索模式。

通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e":

var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 "e"。

RegExp 对象的方法:

RegExp 对象有 3 个方法:test()、exec() 以及 compile()。

test()

test() 方法检索字符串中的指定值。返回值是 true 或 false。

例子:

var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free"));

由于该字符串中存在字母 "e",以上代码的输出将是:

true

exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。

例子 :

var patt1=new RegExp("e");document.write(patt1.exec("The best things in life are free"));

由于该字符串中存在字母 "e",以上代码的输出将是:

e

您可以向 RegExp 对象添加第二个参数,以设定检索。例如,如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数 ("global")。

如需关于如何修改搜索模式的完整信息,请访问我们的 RegExp 对象参考手册。

在使用 "g" 参数时,exec() 的工作原理如下:

  • 找到第一个 "e",并存储其位置

  • 如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置

var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)

由于这个字符串中 6 个 "e" 字母,代码的输出将是:

eeeeeenull

compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式,也可以添加或删除第二个参数。

例子:

var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free"));patt1.compile("d");document.write(patt1.test("The best things in life are free"));

由于字符串中存在 "e",而没有 "d",以上代码的输出是:

truefalse

51.JavaScript Window - 浏览器对象模型

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

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

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

Window 对象:

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

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

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

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

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

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.open() - 打开新窗口

  • window.close() - 关闭当前窗口

  • window.moveTo() - 移动当前窗口

  • window.resizeTo() - 调整当前窗口的尺寸

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

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

一些属性:

  • screen.availWidth - 可用的屏幕宽度,以像素计,减去界面特性,比如窗口任务栏。

  • screen.availHeight - 可用的屏幕高度,以像素计,减去界面特性,比如窗口任务栏。

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

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

一些例子:

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

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

  • location.port 返回 web 主机的端口 (80 或 443)

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

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

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

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

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

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

一些方法:

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

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

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

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

  • navigator 数据可被浏览器使用者更改

  • 浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测:

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

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

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

56.JavaScript 计时

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

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

  • setTimeout():未来的某时执行代码

  • clearTimeout():取消setTimeout()

无穷循环:

要创建一个运行于无穷循环中的计时器,我们需要编写一个函数来调用其自身。在下面的例子中,当按钮被点击后,输入域便从 0 开始计数。

<html><head>
<script type="text/javascript">
var c=0
var t
function timedCount(){document.getElementById('txt').value=cc=c+1 t=setTimeout("timedCount()",1000)}
</script>
</head><body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body></html>

57.JavaScript Cookies

cookie 用来识别用户。

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

http://www.360doc.com/content/13/1120/17/14452132_330817145.shtml

58.JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。

但是:JavaScript 中的数据分为两种类型:原始类型和引用类型,两者都通过对象进行访问。原始类型保存为简单数据值,引用类型则保存为对象,其本质是指向内存位置的引用。JavaScript 使用一个变量对象追踪变量的生存周期。原始类型的变量值被直接保存在变量对象内,而引用类型的变量值则作为一个指针保存在变量对象内,该指针指向实际对象在内存中的存储位置。

理解一下这句话:Boolean 对象是 Boolean 原始类型的引用类型。

引用类型是指 JavaScript 中对象,引用值是引用类型的实例,也是对象的同义词。对象实际上是属性的无序列表。属性包含键(始终是字符串)和值。如果一个属性的值是函数,它就被称为方法。JavaScript 中函数其实是引用值,一个包含数组的属性和一个包含函数的属性没有什么区别。

例如:

//使用点号访问var array = [];
array.push(12345);
//使用中括号访问var array = [];
array["push"](12345);

这里的push方法本质上也是一个属性而已,所以可以写成array["push"]!!!

如何创建对象,参考14、15!

59.JavaScript 框架(库)

JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。

为了应对这些调整,许多的 JavaScript (helper) 库应运而生。

这些 JavaScript 库常被称为 JavaScript 框架

在本教程中,我们将了解到一些广受欢迎的 JavaScript 框架:

  • jQuery

  • Prototype

  • MooTools

所有这些框架都提供针对常见 JavaScript 任务的函数,包括动画、DOM 操作以及 Ajax 处理。

60.CDN - 内容分发网络

您总是希望网页可以尽可能地快。您希望页面的容量尽可能地小,同时您希望浏览器尽可能多地进行缓存。

如果许多不同的网站使用相同的 JavaScript 框架,那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。

CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。

Google 为一系列 JavaScript 库提供了免费的 CDN,包括:

  • jQuery

  • Prototype

  • MooTools

  • Dojo

  • Yahoo! YUI

如需在您的网页中使用 JavaScript 框架库,只需在 <script> 标签中引用该库即可:引用 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

使用框架

在您决定为网页使用 JavaScript 框架之前,首先对框架进行测试是明智的。

JavaScript 框架很容易进行测试。您无需在计算机上安装它们,同时也没有安装程序。

通常您只需从网页中引用一个库文件。

转载于:https://blog.51cto.com/12480455/1943825

JavaScript基础若干盲点总结相关推荐

  1. JavaScript基础内容

    1.1 JavaScript基础概念: JavaScript (ECMAScript) :JavaScript 是脚本语言.JavaScript和ECMAScript通常被人用来表达相同的含义,但是J ...

  2. JavaScript-百炼成仙(第1节掌握JavaScript基础1.1-1.21)

    文章目录 1.1 第一章 初入宗门 1.2 第二章 直接量 1.3 第三章 数据类型 1.4 第四章 数据类型 扩展内容: 1.5 第五章 基础考核 1.6 第六章 何老 1.7 第七章 对象数据类型 ...

  3. javascript百炼成仙 第一章 掌握JavaScript基础1.7 对象数据类型

    听到这句话,叶小凡一顿,动作停止了下来. 对象数据类型,这在JavaScript基础修炼要诀中只是提了一下,但是并没有细讲,这个对象数据类型一直以来都深深地勾起了叶小凡的好奇心. "小娃娃, ...

  4. html5扩展函数的使用方法,知识分享:JavaScript基础语法

    知识分享:JavaScript基础语法 原创 mb5fd868d58f1472021-01-22 16:52:56©著作权 阅读数 41 ©著作权归作者所有:来自51CTO博客作者mb5fd868d5 ...

  5. JavaScript 基础入门

    JavaScript 基础入门 简介 一.JS 基础语法 1.JS 语法与变量 (1)JavaScript 的书写位置 (2)认识输入输出语句 (3)学会处理报错 (4)变量 (5)变量声明提升 2. ...

  6. w3cshool之JavaScript 基础

    W3cshool之javascript基础 1.  JavaScript 对大小写敏感 名为 "myfunction"的函数和名为 "myFunction" 的 ...

  7. JavaScript基础第01天笔记

    JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...

  8. 网页开发基础,HTML、CSS技术、JavaScript基础

    一.学习目标 1.HTML技术 2.CSS技术 3.JavaScript基础 二.重要知识点 1.HTML技术 超文本标记语言(英语:HyperText Markup Language,简称:HTML ...

  9. 学习JavaScript第一弹(上)——ECMAScript(JavaScript基础)

    1.编程语言.ECMA.JavaScript.浏览器的发展史 1.1 编程语言 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计 ...

  10. 【JavaScript详解】一文掌握JavaScript基础知识(上)

    JavaScript基础 前言 一.什么是JavaScript 1.JavaScript概述 2.javaScript有什么作用 二.JavaScript快速入门 1.引入JavaScript 2.基 ...

最新文章

  1. getExternalFilesDir到底是什么
  2. Jdom的SAXBuilder解析String形式的XML
  3. 某大佬的20+公司面试题总结和自己的补充
  4. Java开发Web Service的简介
  5. JAVASCRIPT常用20种小技巧汇总
  6. java-线程-生产者-消费者
  7. java面试下_Java面试宝典(下)
  8. Perl 学习笔记-输入输出
  9. (转)比特币王国的内战与分裂|《财经》特稿
  10. C++ priority_queue
  11. 地图转换|用arcgis 将cad转kmz
  12. 安卓网络测试工具_专业网速测试工具高级版,支持5G网络测试网速
  13. Excel快捷键大全 Excel常用快捷键大全
  14. 米家小相机最新固件_不到1000元的米家小相机 都有哪些缺点
  15. n的约数(数论+DFS)
  16. QT 在 macos 上的透明bug Qt::WA_TranslucentBackground
  17. 失望时想起了你是什么歌_你是空你是空色即是空的空空什么歌 《想起了你》哪里听...
  18. 微信小程序例子——使用icon组件显示常用图标
  19. 凯西与拜耳将在中国共同推广呼吸药物宝丽亚和启尔畅
  20. Doxygen内部结构

热门文章

  1. Android虚拟机使用摄像头(命令行)
  2. BitMap生成艺术字体Bf文件
  3. AJAX,Axio异步框架(对原生AJAX封装)。web分区
  4. i++和++i哪个效率高
  5. matlab所有颜色,MATLAB 颜色选择及应用
  6. 成都-峨眉山(乐山)旅游攻略
  7. 使用 FUMA 鉴定 Independent SNPs 和 Lead SNPs
  8. 10 ,盒图( 统计 ) boxplot :单盒,多盒
  9. 我爱你——再高级一点
  10. SQLite数据库读取