JavaScript入门

Download javascript eBook

备注

JavaScript(不要与Java混淆)是一种动态的,弱类型的语言,用于客户端和服务器端脚本。

JavaScript是一种区分大小写的语言。这意味着该语言认为大写字母与小写字母不同。 JavaScript中的关键字都是小写的。

JavaScript是ECMAScript标准的通用引用实现。

除非另有说明,否则此标记中的主题通常是指在浏览器中使用JavaScript。浏览器无法直接运行JavaScript文件;有必要将它们嵌入HTML文档中。如果您有一些想要尝试的JavaScript代码,可以将其嵌入到像这样的占位符内容中,并将结果保存为example.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    Inline script (option 1):
    <script>
      // YOUR CODE HERE
    </script>
    External script (option 2):
    <script src="your-code-file.js"></script>
  </body>
</html>

版本

发布日期
1 1997年6月1日
2 1998年6月1日
3 1998-12-01
E4X 2004-06-01
2009-12-01
5.1 2011-06-01
6 2015年6月1日
7 2016年6月14日
8 2017年6月27日

使用console.log()

介绍

所有现代Web浏览器,NodeJ以及几乎所有其他JavaScript环境都支持使用一套日志记录方法将消息写入控制台。这些方法中最常见的是console.log()

在浏览器环境中, console.log() 函数主要用于调试目的。


入门

在浏览器中打开 JavaScript控制台,键入以下内容,然后按Enter键

console.log("Hello, World!"); 

这会将以下内容记录到控制台:

Google Chrome中的控制台日志输出

在上面的例子中, console.log() 函数打印Hello, World! 到控制台并返回undefined (在控制台输出窗口中显示)。这是因为console.log() 没有显式的返回值


记录变量

console.log() 可用于记录任何类型的变量;不仅是字符串。只需传入要在控制台中显示的变量,例如:

console.log("Hello, World!"); 

这会将以下内容记录到控制台:

console.log()可以与变量一起使用

如果要记录两个或更多值,只需用逗号分隔即可。在连接期间,每个参数之间将自动添加空格:

console.log("Hello, World!"); 
这会将以下内容记录到控制台:

控制台Concat


占位符

您可以将console.log() 与占位符结合使用:

console.log("Hello, World!"); 

这会将以下内容记录到控制台:

在此处输入图像描述


记录对象

下面我们看到记录对象的结果。这对于从API调用记录JSON响应通常很有用。

console.log("Hello, World!"); 

这会将以下内容记录到控制台:

在控制台中记录对象


记录HTML元素

您可以记录DOM中存在的任何元素。在这种情况下,我们记录body元素:

console.log("Hello, World!"); 

这会将以下内容记录到控制台:

在此处输入图像描述


结束注释

有关控制台功能的更多信息,请参阅控制台主题。

使用DOM API

DOM代表D ocument O bject M odel。它是XMLHTML等结构化文档的面向对象表示。

设置ElementtextContent 属性是在网页上输出文本的一种方法。

例如,请考虑以下HTML标记:

<p id="paragraph"></p>
 

要更改其textContent 属性,我们可以运行以下JavaScript:

<p id="paragraph"></p>
 

这将选择具有id paragraph 的元素并将其文本内容设置为“Hello,World”:

<p id="paragraph"></p>
 

(另见本演示)


您还可以使用JavaScript以编程方式创建新的HTML元素。例如,考虑具有以下正文的HTML文档:

<p id="paragraph"></p>
 

在我们的JavaScript中,我们创建一个带有textContent 属性的新<p> 标签,并将其添加到html主体的末尾:

<p id="paragraph"></p>
 

这会将您的HTML正文更改为以下内容:

<p id="paragraph"></p>
 

请注意,为了使用JavaScript操作DOM中的元素,必须在文档中创建相关元素之后运行JavaScript代码。这可以通过将JavaScript <script> 标记放在所有其他<body> 内容之后来实现。或者,您也可以使用事件监听器来监听例如。 windowonload 事件 ,将代码添加到该事件监听器将延迟运行代码,直到加载了页面上的整个内容。

确保加载所有DOM的第三种方法是使用0 ms的超时函数包装DOM操作代码 。这样,这个JavaScript代码在执行队列的末尾重新排队,这使得浏览器有机会完成一些非JavaScript事情,这些事情在参与这个新的JavaScript之前一直在等待完成。

使用DOM API(带图形文本:Canvas,SVG或图像文件)

使用canvas元素

HTML提供了用于构建基于栅格的图像的canvas元素。

首先构建一个用于保存图像像素信息的画布。

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

然后选择画布的上下文,在本例中为二维:

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

然后设置与文本相关的属性:

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

然后将canvas 元素插入页面以使其生效:

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

使用SVG

SVG用于构建可缩放的基于矢量的图形,可以在HTML中使用。

首先创建一个尺寸为SVG的元素容器:

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

然后构建一个具有所需定位和字体特征的text 元素:

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

然后添加要显示到text 元素的实际文本:

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

最后将text 元素添加到我们的svg 容器中,并将svg 容器元素添加到HTML文档中:

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

图像文件

如果您已有包含所需文本的图像文件并将其放在服务器上,则可以添加图像的URL,然后将图像添加到文档中,如下所示:

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

使用window.alert()

alert 方法在屏幕上显示可视警报框。 alert方法参数以文本显示给用户:

window.alert(message);
 

因为window 是全局对象,所以你也可以调用以下简写:

window.alert(message);
 

那么window.alert() 做什么呢?好吧,我们来看下面的例子:

window.alert(message);
 

在Chrome中,会生成如下弹出窗口: 警报

笔记

alert 方法在技术上是window 对象的属性,但由于所有window 属性都是自动全局变量,我们可以使用alert 作为全局变量而不是window 的属性 - 这意味着你可以直接使用alert() 而不是window.alert()

与使用console.log 不同, alert 用作模态提示,这意味着代码调用alert 将暂停,直到响应提示。传统上,这意味着在解除警报之前不会执行任何其他JavaScript代码

window.alert(message);
 

但是,即使仍然显示模式对话框,规范实际上也允许其他事件触发的代码继续执行。在这样的实现中,可以在显示模态对话框时运行其他代码。

有关alert 方法用法的更多信息,请参阅模态提示主题。

通常不鼓励使用警报,以支持不阻止用户与页面交互的其他方法 - 以便创建更好的用户体验。不过,它对调试很有用。

从Chrome 46.0开始, window.alert()<iframe> 被阻止, 除非其沙箱属性的值为allow-modal

使用window.confirm()

window.confirm() 方法显示一个带有可选消息的模式对话框和两个按钮,OK和Cancel。

现在,我们来看以下示例:

result = window.confirm(message);
 

这里, message是要在对话框中显示的可选字符串, result是一个布尔值,表示是选择了OK还是Cancel(true表示OK)。

window.confirm() 通常用于在执行危险操作之前请求用户确认,例如在控制面板中删除某些内容:

result = window.confirm(message);
 

该代码的输出在浏览器中如下所示:

确认对话框非常简单:消息,确定,取消

如果您需要它以供以后使用,您只需将用户交互的结果存储在变量中:

result = window.confirm(message);
 

笔记

  • 该参数是可选的,并且不是规范要求的。
  • 对话框是模态窗口 - 它们阻止用户访问程序界面的其余部分,直到对话框关闭。因此,您不应过度使用任何创建对话框(或模态窗口)的函数。无论如何,有充分的理由避免使用对话框进行确认。
  • 从Chrome 46.0开始,此方法在<iframe> 被阻止,除非其沙箱属性的值为allow-modal。
  • 通常接受通过删除窗口符号来调用confirm方法,因为窗口对象始终是隐式的。但是,建议明确定义窗口对象,因为预期的行为可能会因较低范围级别的实现而使用类似命名的方法进行更改。

使用window.prompt()

从用户获取输入的简单方法是使用prompt() 方法。

句法

prompt(text, [default]);
  • text :提示框中显示的文本。
  • default :输入字段的默认值(可选)。

例子

prompt(text, [default]);

提示框

如果用户单击“ 确定”按钮,则返回输入值。否则,该方法返回null

prompt 的返回值始终是一个字符串,除非用户单击Cancel ,在这种情况下它返回null 。 Safari是一个例外,当用户单击“取消”时,该函数返回一个空字符串。从那里,您可以将返回值转换为另一种类型,例如整数

笔记

  • 当显示提示框时,由于对话框是模态窗口,因此阻止用户访问页面的其他部分。
  • 从Chrome 46.0开始,此方法在<iframe> 被阻止,除非其沙箱属性的值为allow-modal。

Stats

15071 Contributors: 179
Monday, August 7, 2017
许可下: CC-BY-SA

不隶属于 Stack Overflow
Rip Tutorial: info@zzzprojects.com

下载电子书