精通JavaScript：从入门到高级开发

需积分: 9 56 浏览量更新于2024-07-23 收藏 3.59MB PDF 举报

《JavaScript程序员参考手册》是一本专为两种读者群体设计的指南：一是已经熟悉JavaScript但需要权威参考资料的专业开发者，二是正在学习这门语言希望快速上手的新手。本书假设读者至少具备编程基础，特别是对于像C++或Java这样的传统语言有一定了解。作者首先引导读者回顾JavaScript的基本概念，从第一章开始，将视角转向JavaScript在网页开发中的应用，重点介绍了语言的核心特性。第二章深入探讨JavaScript的基础知识，包括变量、数据类型、控制结构等，帮助读者建立起坚实的编程基础。第三章聚焦于Document Object Model (DOM)，这是JavaScript与HTML交互的核心，讲解如何通过JavaScript操作网页元素、处理用户输入和响应事件。DOM的深入理解是前端开发不可或缺的一部分。第四章“JavaScript在行动”则将理论知识与实践相结合，通过实例展示如何将所学运用到实际项目中，涉及脚本编写、事件处理、异步编程等内容，提升读者的实战能力。第五和第六章分别关注JavaScript的全局对象和控制语句，详细解析核心对象如Window、Object和Array，以及if、while、for等控制结构的用法，这些都是构建复杂逻辑和实现功能的关键。第七章深入研究运算符，包括算术、比较、逻辑和位操作，使读者能够更灵活地控制程序流程。第八章是对DOM的进一步延伸，涵盖更具体的操作方法和API，如事件模型、节点遍历和样式管理。本书还特别适合那些对Web技术有一定了解，但初次接触JavaScript的人。通过阅读，无论是初学者还是经验丰富的开发者，都能在JavaScript的世界里找到所需的信息和指导，提高技能并适应日益增长的Web开发需求。《JavaScript程序员参考手册》以全面且实用的方式，覆盖了从基础语法到高级应用的各个方面，旨在帮助读者快速成为JavaScript编程高手。无论你是希望通过巩固已有的知识，还是想要进入这个热门领域，这本书都将是你宝贵的资源。

CHAPTER 1 ■ JAVASCRIPT BASICS

Listing 1-6. Improved Syntax for Creating New Objects

var myObject = {};

var myInstance = Object.create(myObject);

alert(myInstance.prop1); // will alert "undefined" because it doesn't exist

myObject.prop1 = "Here I am";

alert(myInstance.prop1); // will alert "Here I am"

This new method works in modern browsers, but if you find yourself working with an older JavaScript engine that

doesn’t support this version of the standard (most notably, Internet Explorer 8 and earlier), you can always use the

snippet shown in Listing 1-7 to provide the same functionality.

Listing 1-7. A Method for Adding the create Method to Object If It Doesn’t Exist

if (typeof Object.create !== 'function') {

Object.create = function (o) {

function F() {}

F.prototype = o;

return new F();

};

}

Listing 1-7 checks to see if Object.create exists, and if it doesn’t, it adds it to the global Object object. This is a

good example of a safe way to extend global objects.

ShIMS

Listing 1-7 is an example of what is what is known as a shim or polyfill, terms that refer to small scripts that add

missing functionality to a particular environment, or that repair incorrect implementations. Listing 1-7 is a shim

for a JavaScript shortcoming; there are also shims for various CSS issues and even HTML issues.

Shims are commonly included in JavaScript libraries—in fact, many libraries got their start as just collections of

various shims.

Scoping in JavaScript

Another much-misunderstood and often-maligned feature of JavaScript is its scoping: how JavaScript limits and

allows access to its variables. Because JavaScript closely resembles C in many ways, it’s natural to think that it uses

block-level scoping like C, an example of which is shown in Listing 1-8.

Listing 1-8. Block-level Scoping in C

#include <stdio.h>

int main() {

int x = 1;

printf("%d, ", x); // 1

if (1) {

int x = 2;

printf("%d, ", x); // 2

}

printf("%d\n", x); // 1

}

www.it-ebooks.info

CHAPTER 1 ■ JAVASCRIPT BASICS

In C, each code block (if statement, for loop, etc.) is its own scope: a variable defined in one scope is not

available in another. It’s logical to assume that JavaScript employs block-level scoping because it uses syntax very

similar to C . . . but it doesn’t.

Instead, JavaScript uses what is called functional scope, meaning that scope is declared by functions. A variable

defined in a function is available anywhere within that function, even in other blocks such as if statements, for loops

or nested functions. As a demonstration, here’s a listing that creates a functional scope and tests variables within:

Listing 1-9. Demonstrating Nested Functional Scope

function testScope() {

var myTest = true;

if (true) {

var myTest = "I am changed!"

}

alert(myTest);

}

testScope(); // will alert "I am changed!"

The example shown in Listing 1-9 creates a simple testScope function. Within it we declare a variable, myTest,

which gives it scope to be available anywhere within that function. Then we redeclare the variable within an if statement

block and give it a different value. Finally, we test to see what the results are: the script will alert I am changed!

In C or another language with block-level scope, a similar example would alert true because the myTest

redeclaration in the if statement would be limited in scope to that block.

If we tried to access the myTest variable outside of the testScope function, it would fail, as shown in Listing 1-10.

Listing 1-10. Demonstrating Functional Scope

function testScope() {

var myTest = true;

if (true) {

var myTest = "I am changed!"

}

alert(myTest);

}

testScope(); // will alert "I am changed!"

alert(myTest); // will throw a reference error, because it doesn't exist outside of the function

Outside of the testScope function, myTest doesn’t exist. You can make it exist though, as shown in Listing 1-11.

Listing 1-11. Demonstrating Global Scope

var myTest = true;

function testScope() {

if (true) {

var myTest = "I am changed!"

}

alert(myTest);

}

testScope(); // will alert "I am changed!"

alert(myTest); // will alert "I am changed!"

www.it-ebooks.info

CHAPTER 1 ■ JAVASCRIPT BASICS

By defining the myTest variable outside of the testScope function, it becomes available everywhere. This is what

is called the global scope. Global functions and variables are available anywhere. This is a very powerful feature of

JavaScript, but it is easy to abuse. Generally speaking, it’s considered bad practice to clutter the global scope, mostly

because it can lead to variables with the same name clobbering each other’s values as scripts execute, causing all sorts of

difficult-to-debug problems. Instead, it’s recommended that variables be limited as much as possible to private scopes.

Limiting Scope

So far, we have been carefully declaring our new variables with the var keyword. But the var keyword is optional in

JavaScript; you can simply declare a new variable by providing it a value, as demonstrated in Listing 1-12.

Listing 1-12. Declaring a Variable Without the var Keyword

var myNewVar = 1; // Using var to declare a variable.

myOtherNewVar = 2; // var is optional.

alert(myNewVar); // will alert 1

alert(myOtherNewVar); // will alert 2

However, when you declare a variable without the var keyword, JavaScript assumes that you mean you defined

the variable in a higher scope and you want to access that variable. So JavaScript will look up to the containing scope

to see if the variable was declared there using the var keyword. If it wasn’t, JavaScript keeps looking up the scope

chain until it reaches the global scope. If it reaches the global scope and still hasn’t found a declaration using the

var keyword, JavaScript will assign the variable to the global scope for you, as shown in Listing 1-13.

Listing 1-13. Cluttering the Global Scope

function testScope() {

myTest = true; // now myTest is global.

alert(myTest);

}

testScope(); // will alert "true"

alert(myTest); // will alert "true" as well, because now myTest is global.

This feature of JavaScript is called implied global scope. It basically means that variables that are not specifically

limited in scope are assumed to be global.

To limit the scope of a variable, use the var keyword in its declaration, as shown in Listing 1-14. Using the

var keyword instructs JavaScript to limit the scope of the variable to the current one. This prevents accidentally

cluttering the global scope.

Listing 1-14. Limiting Scope with var

function testScope() {

var myTest = true;

function testNestedScope() {

var myTest = false;

alert(myTest);

}

testNestedScope();

alert(myTest);

}

testScope(); // will alert false, and then true.

www.it-ebooks.info

CHAPTER 1 ■ JAVASCRIPT BASICS

In Listing 1-14, we’re defining two different myTest variables in different scopes. Within the testNestedScope

function, myTest has a local definition that overrides the higher scope. This prevents two variables with different

names from clobbering each other’s values.

You might be wondering what would happen if we swapped the two lines within the testNestedScope function,

as shown in Listing 1-15—in other words, what would happen if we try and access a variable before it was defined in a

given scope?

Listing 1-15. Accessing a Variable Before It Was Defined in a Given Scope

function testScope() {

var myTest = true;

function testNestedScope() {

alert(myTest);

var myTest = false;

}

testNestedScope();

alert(myTest);

}

testScope(); // will alert "undefined", and then true.

Listing 1-15 will alert undefined and then true. Why? That is, why doesn’t the first line in testNestedScope alert

true? After all, myTest is set to true in a higher scope, so why isn’t it available there?

The reason is that we are limiting the scope of myTest within the testNestedScope variable by defining it with the

var keyword. But when we access it before we give it a value, it is set to “undefined.” So this code is the equivalent of

the code shown in Listing 1-16.

Listing 1-16. More Explicit Equivalent of Listing 1-15

function testScope() {

var myTest = true;

function testNestedScope() {

var myTest;

alert(myTest);

myTest = false;

}

testNestedScope();

alert(myTest);

}

testScope(); // will alert "undefined", and then true.

Listing 1-16 illustrates what happened in Listing 1-15 by explicitly declaring the variable without a value at the

very beginning of its scope. In JavaScript, any variable declared in a given scope is available anywhere within that

scope, even before it is given a value. This feature of JavaScript is often called hoisting: a variable is “hoisted” to the

beginning of the scope where it is declared. Because of hoisting, it’s often considered a good practice in JavaScript to

explicitly declare your variables at the beginning of their scope, even if you don’t access them until much later.

www.it-ebooks.info

CHAPTER 1 ■ JAVASCRIPT BASICS

Closures

In most languages, once a function returns, all of its local variables are deallocated—removed from memory and no

longer available. In JavaScript, this doesn’t have to happen. Because of JavaScript’s dynamic nature and scoping rules,

you can code situations where local variables within a function will remain available even after that function has

finished executing. Consider the example presented in Listing 1-17.

Listing 1-17. Causing a Scope to Be Maintained After Its Function Has Finished Executing

function greet(myName) {

var myAlertString = "Hello " + myName; // Local variable

function doAlert() {

alert(myAlertString);

}

return doAlert; // return the new function

}

var greetKitty = greet("Kitty"); // greetKitty is now a function

greetKitty(); // will alert "Hello Kitty"

Listing 1-17 is a somewhat contrived example, and there are some unusual things going on here, so let’s go

through them one at a time. The first strange thing is that we’re returning a function from our function. This seems a

little strange, but it’s not that unusual in JavaScript. Remember, in JavaScript, functions are objects, so you can return

them and even assign them to variables just as easily as any other object.

Our greet function takes a name as a parameter, concatenates it into a string in a local variable, then defines a

local function that alerts that string. Then it returns that local function. When we call the greet function, we assign the

returned function to a variable, and then execute the returned function.

What’s special about this situation is that the greet function is called and completely executes at the time when

we assign its result to the greetKitty variable. In most languages, the myAlertString variable would at that point

be deallocated and unavailable. But in JavaScript it’s still there, because we have created a specific situation where it

needs to remain so that when we execute the returned function, everything will behave as expected. In other words,

both the returned function and its immediate nonlocal functional scope are retained, even though the function

that created them has finished running. This is a side effect of the variable scoping in JavaScript: the interpreter will

maintain a scope until it is no longer needed.

That goes for the private scope we created as well. Listing 1-18 demonstrates this by saying “Hello” to a

different cat.

Listing 1-18. The Privacy of a Maintained Scope

function greet(myName) {

var myAlertString = "Hello " + myName; // Local variable

function doAlert() {

alert(myAlertString);

}

return doAlert; // return the new function

}

var greetKitty = greet("Kitty"); // greetKitty is now a function

greetKitty(); // will alert "Hello Kitty"

var greetMax = greet("Max"); // greetMax is now a function

greetMax(); // will alert "Hello Max"

greetKitty(); // will alert "Hello Kitty"

www.it-ebooks.info

剩余288页未读，继续阅读

bugarden

粉丝: 4
资源: 23

精通JavaScript：从入门到高级开发

Wrox Press JavaScript Programmers Reference

JavascriptProgrammersReference.pdf 英文原版

WebStandards Programmers Reference

Wrox - Visual Basic 2008 Programmers Reference (Feb 2008)

Wrox - ASP.NET AJAX Programmers Reference (Sep 2007)

HTML5.Programmers.Reference.1430263679

Wrox.VBScript.Programmers.Reference.3rd.Edition.Oct.2007.rar

The.Web.Programmers.Desk.Reference

ASP.NET.AJAX.Programmers.Reference.with.ASP.NET.2.0.or.ASP.NET.3.5

SCORM Users Guide for Programmers

最新资源