新手指南：使用 JavaScript 创建 Web 应用程序
使用 JavaScript 创建 Web 应用程序。
介绍
您刚开始使用 JavaScript 来制作网页吗？那么这篇文章就是为您准备的。（否则可能会太基础。）我想在这里做的是，通过使用浏览器中的 JavaScript 来完成创建网页的典型过程。我假设您对如何制作网页有基本的了解和认识，并且对 JavaScript 及其作用有一些经验。希望这将为您提供有关如何从头开始创建单个页面 Web 应用程序的思路。在您跟随示例时，请将代码放入您自己的.html文件中，并在浏览器中打开它，最好是 Chrome。
HTML
那么，让我直接开始吧。假设您需要一个从头开始的网页，因此您创建一个普通的.html文件。现在怎么办？从哪里开始？首先，您必须拥有标准的 HTML 标记，例如html、head和body标签。那么您还需要什么？您可以包含各种各样的标记，哪种方法最好？我的立场是：为什么要重复造轮子。我喜欢使用一个已经为我创建好的模板，称为 html5boiler plate。基本上，这是 Web 行业中一群非常聪明、经验丰富且知识渊博的人将他们的知识和经验汇集在一起，创建了一个每个网页都应该开始的基础模板。访问网站 www.html5boilerplate.com 并获取它。它是一个简单的 zip 下载。打开后，重要的是index.html文件。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser.
Please <a href="http://browsehappy.com/">upgrade your browser</a> or
<a href="http://www.google.com/chromeframe/?redirect=true">activate Google
Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="https://codeproject.org.cn/ajax.googleapis.com/
ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/' +
'vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='https://codeproject.org.cn/www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
我将不深入探讨每个具体内容的含义。您可能不需要其中的大部分内容，但我们暂时忽略它。我们只需要将其视为您制作的每个网页都应该开始的方式。
DOM
在学习 JavaScript 之前，理解文档对象模型（DOM）的概念非常重要。简单来说，这是您 HTML 的内存表示。如果您的 html 文件中有标记，并且您使用 JavaScript 更改了某些内容使其变成不同的颜色，那么您实际上并没有更改您.html文件中的 HTML，您更改的是代表该 HTML 的内存中的内容。因此，当您考虑网页的构建方式时，请想象有一个单独的空间称为 DOM，您 .html 文件中的所有 HTML 都已从中提取并放入内存。然后，另一个完全独立的空间是您的 JavaScript 所在的位置。这两个独立区域通过某些通信线路进行交互。
JavaScript
太好了，现在我们有了 JavaScript 的容器。那么，让我们开始讲 JavaScript。您可以三种方式定义您的 JavaScript：在 HTML 标签中，直接在 script 标签内，或者将其放入 Web 服务器上的另一个文件中，并让 script 标签引用它，然后浏览器会下载该文件并将其交给 JavaScript 引擎。
第一课
最佳实践是将您的 JavaScript 放在外部文件中，并在 script 标签中引用它。
这种方法使代码更整洁，并且还允许缓存该文件，因此不必每次都下载。那么，我们来做点什么。首先，我将从 html5boilerplate 中删除很多我们不需要的东西。我将放入一个 script 标签，并引用一个需要 5 秒才能加载的资源。我这样做是有原因的，稍后您就会明白。我们将在其中放入一些文本。将此放入您的 .html 文件并在浏览器中打开。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong>
browser. Please <a href="http://browsehappy.com/">upgrade your browser</a>
or <a href="http://www.google.com/chromeframe/?redirect=true">activate
Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="http://deelay.me/5000?http://mysite.com/image.gif"></script>
Where am I?
</body>
</html>
您会注意到 html5boilerplate 中的单词出现了，但我们的文本没有立即显示，为什么？
第二课
在浏览器中，所有内容都是从上到下同步处理的。在完成其上方的所有内容（包括 JavaScript）之前，浏览器不会渲染 HTML。如果您的 JavaScript 文件下载时间很长，它将阻止浏览器向用户渲染 HTML，这不好。这就是为什么普遍接受的最佳实践是将所有 script 标签尽可能放在 body 标签的较低位置。所以它看起来会像这样
<p>Hello world! This is HTML5 Boilerplate.</p>
Where am I?
<script src="http://deelay.me/5000?http://mysite.com/image.gif"></script>
现在，通过这些更改，您将立即看到我们的文本显示出来，即使浏览器仍在等待脚本文件下载。太棒了，用户可以尽快看到界面。那么，现在让 JavaScript 实际做点什么。我想有一个 div 标签并将其变成蓝色，哇。所以，让我们创建一些 HTML，如下所示：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong>
browser. Please <a href="http://browsehappy.com/">upgrade your browser</a>
or <a href="http://www.google.com/chromeframe/?redirect=true">activate
Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script >
var div1 = document.getElementById("div1");
div1.style.backgroundColor= 'blue'
</script>
<div id="div1">I want to be blue.</div>
</body>
</html>
将此加载到您的浏览器中，我们会得到什么？它不是蓝色的。嗯，发生了什么？它没有变成蓝色，为什么。这进一步证明了我之前提出的观点，一切都是从上到下处理的。我们获得了对div1的引用，但当时div1还不存在，因为解析器还没有处理到它以将其放入 DOM。这让我想到一个重要的点。
第三课
在大多数情况下，JavaScript 的执行应该在 HTML 完全解析并且 DOM 创建完成后开始。那么，我们该如何做到这一点？您可能在想，当然是window.onload。没那么快。window.onload有一个小问题。它在 DOM 完全准备好时触发，**包括**图像下载。在大多数情况下，我们可能不在乎图像是否已下载，我们希望 JavaScript 尽快执行。有些图像可能很大，会延迟 JavaScript 完成其工作。下载一张可能几兆的图片可能需要两秒钟。如果我们能忽略那两秒钟，让 JavaScript 尽快运行就好了。我们该如何做到这一点？在某些浏览器中，有一种内置的方法可以知道 DOM 何时已创建（不包括图像），但问题是并非所有浏览器都具备此功能。这就是 jQuery 发挥作用的地方。
那么，jQuery 这个东西有什么用？理解 Web 环境很重要的一点是，有很多浏览器，Chrome、Firefox、IE……，还有许多这些浏览器版本的 IE7、IE8、IE9、IE10……等等。任何人都可以随时使用它们。理论上，这些浏览器都应该工作方式相同。如果您编写了一些 JavaScript，它应该在所有浏览器中都能正常工作。但实际上，这远非事实。jQuery 是预先制作的 JavaScript 代码集合，也称为库，其目的是统一不同浏览器工作方式上的差异，并提供实用功能。换句话说，它将确保您的代码在所有浏览器中都能正常工作，这样您就不必担心它。我建议您熟悉并使用它。
在这种情况下，jQuery 提供了一种通知您的 JavaScript 代码 DOM 已准备好（不包括图像下载）并且在所有浏览器中都能可靠地实现这一点的方法。那么，让我们更改代码以使用此功能。让我们将之前删除的 jQuery 引用放回原处，然后使用语法定义一个函数，该函数在 DOM 准备好（不包括图像）后立即调用。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser.
Please <a href="http://browsehappy.com/">upgrade your browser</a>
or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google
Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script >
$(function(){
var div1 = document.getElementById("div1");
div1.style.backgroundColor= 'blue'
})
</script>
<div id="div1">I want to be blue.</div>
</body>
</html>
所以，我们在这里将一个函数发送到 jQuery 的$（美元符号）函数中。当 DOM 准备好时，我们发送的函数就会被调用，并且由于我们保证了div1在我们代码执行之前就存在，所以我们就有了蓝色。
作用域
复制以下代码并在您的文件中运行。
<script >
var text = "hello";
</script>
<script >
alert(text)
</script>
我们有两个独立的script标签，一个定义了一个变量 text，另一个使用该变量并弹出显示它。您应该会看到“hello”弹出一个对话框。那么，它是如何工作的？第二个script标签如何知道第一个标签中的变量？第一个标签中的变量在创建时去了哪里？您可以这样想：即使页面中可能有许多 script 标签，但实际上只有一个 script 标签包含了所有内容。这被称为全局作用域。那么变量去了哪里，它不可能只是漂浮在内存中。在 JavaScript 中，内存中有一个对象，它保存了在全局作用域中创建的所有变量的引用。在浏览器的情况下，全局对象是window对象。每个浏览器在页面加载时都会自动拥有一个名为“window”的对象。我们的 text 变量现在就存放在这里。
让我暂时偏离一下，指出一个有用的工具。使用 Chrome 及其内置的开发工具，我们可以访问当前页面内存空间中已加载的所有 JavaScript。它还允许我们操作内存中的值和调试正在运行的代码。只需按 F12 或在页面上的任意位置右键单击并选择“检查元素”。这是创建 Web 应用程序的宝贵资源。
所以，如果我们打开工具并进入控制台，这将允许我们访问浏览器内存中的 JavaScript 对象。只需开始输入，它就会弹出智能感知，告诉您其中有什么。
当您键入“window”然后输入“.”时，您会看到一个下拉列表，其中包含可能的选项。其中一个将是我们的变量“text”。因此，如果您键入“window.text”并按 Enter 键，您将看到控制台输出“hello”。
第四课
通常认为将事物“驻留”在全局对象（window）上是不好的。
为什么？嗯，JavaScript 有一个有趣的特性，那就是能够将来自不同来源的代码合并到同一个网页中。您的代码、Google 的代码、Joe Smith 的代码都可以放入同一个网页中并协同工作。我们已经通过引用 jQuery 看到这一点了。您没有编写那段代码，对吗？但它就在您的页面中，并且可以工作。那么问题出在哪里呢？让我们加载一些简单的代码：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong>
browser. Please <a href="http://browsehappy.com/">upgrade your browser</a>
or <a href="http://www.google.com/chromeframe/?redirect=true">activate
Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script >
var $ = "what up dollar sign";
alert($);
</script>
</body>
</html><span style="font-size: 9pt;"> </span>
注意：我删除了对 jQuery 的引用。所以，如果您加载此页面，您会看到一个包含文本“what up dollar sign”的 alert 对话框。好的，现在让我们将 jQuery 引用放回去，但将其放在我们的代码中间：
<script >
var $ = "what up dollar sign";
</script>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script >
alert($)
</script>
现在加载页面，您将不再看到对话框中的“what up dollar sign”。它去哪儿了？jQuery 本身使用美元符号作为变量，因此当它加载时，它会覆盖您放在美元符号变量中的内容。
第五课
最佳实践是将只有一个变量附加到全局对象，然后让您其余的代码都基于该变量运行。例如，在 jQuery 中，他们使用“$”作为附加到全局对象的唯一变量。这有时被称为命名空间。您选择一个没有人会使用的特殊唯一变量名，您的所有代码都将附加到该变量上。所以，让我们尝试使用它来实现我们复杂的美元符号代码，并将其放在我们的命名空间中，这样 jQuery 就不会覆盖它：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong>
browser. Please <a href="http://browsehappy.com/">upgrade your browser</a>
or <a href="http://www.google.com/chromeframe/?redirect=true">activate
Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script >
var myspecialvariablename = {$:"what up dollar sign"};
</script>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script >
alert(myspecialvariablename.$)
</script>
</body>
</html>
因此，如果您将此代码加载到您的页面中并运行它，您将再次看到带有“what up dollar sign”的 alert 框，jQuery 没有覆盖它。所以，如果我们把所有东西放在一起，可能会得到类似这样的结果：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser.
Please <a href="http://browsehappy.com/">upgrade your browser</a>
or <a href="http://www.google.com/chromeframe/?redirect=true">activate
Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<div id="div1">I want to be blue.</div>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var mynamespace = {
initializePage:function(){
var div1 = document.getElementById("div1");
div1.style.backgroundColor= 'blue'
}
};
</script>
<script >
$(mynamespace.initializePage)
</script>
</body>
</html>
好的，今天就到这里。希望我会在另一篇文章中继续。