第1章：开始使用JavaScript

iebukes
180 阅读8分钟

写在前面

本系列所有文章首发在微信公众号：iebukes，理直气壮地使用了 Deepl 翻译器。

关注微信公众号：iebukes，可获取美帝各类最新IT电子书。

第1.1节：使用 console.log()

简介

所有现代网络浏览器、Node.js以及几乎所有其他的JavaScript环境都支持使用一套日志方法将信息写到控制台。这些方法中最常见的是console.log()。

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

入门使用

在浏览器中打开JavaScript控制台，输入以下内容，然后按回车键。

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

在上面的例子中，console.log()函数将Hello, World！打印到控制台，并返回未定义的结果（如上图所示，在控制台输出窗口）。这是因为console.log()没有明确的返回值。

记录变量

console.log()可以用来记录任何类型的变量；不仅仅是字符串。只要传入你想在控制台中显示的变量，例如：

var foo = "bar"; console.log(foo);

这将把以下内容记录到控制台：

如果你想记录两个或更多的值，只需用逗号将它们分开。在连接过程中，每个参数之间会自动添加空格：

var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar);

占位符

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

var greet = "Hello", who = "World"; console.log("%s, %s!", greet, who);

这将向控制台记录以下内容：

记录对象

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

console.log({
    'Email': '',
    'Groups': {},
    'Id': 33,
    'IsHiddenInUI': false,
    'IsSiteAdmin': false,
    'LoginName': 'i:0#.w|virtualdomain\\user2', 
    'PrincipalType': 1,
    'Title': 'user2' 
});

这将把以下内容记录到控制台：

记录HTML元素

你有能力记录任何存在于DOM中的元素。在本例中，我们记录body元素：

console.log(document.body);

这将把以下内容记录到控制台：

结束语

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

第1.2节：使用DOM API

DOM是Document Object Model的缩写。它是一种面向对象的结构化文档表示，如XML和HTML。

设置一个元素的textContent属性是在网页上输出文本的一种方式。

例如，考虑下面这个HTML标签：

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

要改变它的textContent属性，我们可以运行以下JavaScript：

document.getElementById("paragraph").textContent = "Hello, World";

这将选择id为paragraph的元素，并将其文本内容设置为 "Hello, World"：

<p id="paragraph">Hello, World</p>

你也可以使用JavaScript以编程方式创建一个新的HTML元素。例如，考虑一个具有以下主体的HTML文档：

<body>   <h1>Adding an element</h1> </body>

在我们的JavaScript中，我们创建一个新的

标签，其textContent属性为，并将其添加到html正文的末尾：

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM

这将使你的HTML主体改变为以下内容：

<body>   <h1>Adding an element</h1>    <p>Hello, World</p></body>

请注意，为了使用JavaScript来操作DOM中的元素，JavaScript代码必须在文档中创建了相关元素后才能运行。这可以通过将JavaScript

第三种确保所有DOM都已加载的方法是用一个0毫秒的超时函数来包裹DOM操作代码。这样一来，这段JavaScript代码就会在执行队列的末尾被重新排队，这就给了浏览器一个机会来完成一些非JavaScript的事情，这些事情在处理这段新的JavaScript之前一直在等待完成。

这段新的JavaScript代码。

第1.3节：使用window.alert()

警报方法在屏幕上显示一个视觉警报框。alert方法的参数以纯文本形式显示给用户： 

window.alert(message);

因为window是全局对象，所以你也可以用下面的速记方法来调用： 

alert(message);

那么window.alert()是做什么的？好吧，让我们来看看下面的例子： 

alert('hello, world');

在Chrome浏览器中，这将产生一个像这样的弹出窗口：

**注意：**从技术上讲，alert方法是window对象的一个属性，但由于所有的window属性都自动是的全局变量，我们可以将alert作为全局变量而不是window的一个属性--也就是说，你可以直接使用alert()而不是window.alert()。

与使用console.log不同，alert作为一个模态提示，意味着调用alert的代码将暂停，直到提示被回答。传统上，这意味着在警报解除之前，没有其他的JavaScript代码会被执行： 

alert('Pause!');
console.log('Alert was dismissed');

然而，该规范实际上允许其他事件触发的代码继续执行，即使模态对话框仍在显示。在这样的实现中，其他代码有可能在模态对话框被显示时运行。

 更多关于使用警报方法的信息可以在modals提示主题中找到。 

为了创造更好的用户体验，通常不鼓励使用提示方法，而采用其他不会阻止用户与页面交互的方法。尽管如此，它对于调试还是很有用的。

 从Chrome 46.0开始，window.alert()在中被阻止，除非其沙盒属性的值为allow-modal。

第1.4节 使用window.prompt()方法

从用户那里获得输入的一个简单方法是使用 prompt() 方法。 

 语法

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

例子

var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user

如果用户点击 "OK "按钮，就会返回输入值。否则，该方法返回null。 

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

注意

  • 当提示框显示时，用户被阻止访问页面的其他部分，因为对话框是模态窗口。 

  • 从Chrome 46.0开始，该方法在内被阻止，除非其沙盒属性的值为allow-modal。

第1.5节：使用window.confirm()

window.confirm()方法会显示一个模态对话框，其中有一个可选的信息和两个按钮，即确定和取消。现在，让我们来看看下面的例子:

result = window.confirm(message);

这里，message是要在对话框中显示的可选字符串，result是一个布尔值，表示是否选择了OK或Cancel（true表示OK）。

window.confirm()通常用于在进行危险操作（如删除控制面板中的东西）之前要求用户确认：

if(window.confirm("Are you sure you want to delete this?")) { 
    deleteItem(itemId);
}

​该代码的输出在浏览器中看起来像这样：

如果你需要以后使用，你可以简单地将用户的互动结果存储在一个变量中：

var deleteConfirm = window.confirm("Are you sure you want to delete this?");

注意事项

  • 该参数是可选的，不是规范所要求的。​
  • 对话框是模态窗口--它们阻止用户访问程序界面的其他部分，直到对话框被关闭。出于这个原因，你不应该过度使用任何创建对话框（或模态窗口）的函数。而且无论如何，有非常好的理由避免使用对话框进行确认。
  • 从Chrome 46.0开始，该方法在内被阻止，除非其沙盒属性的值为allow-modal。
  • 通常情况下，调用confirm方法时去掉窗口符号是可以接受的，因为窗口对象总是隐含的。然而，我们建议明确定义窗口对象，因为预期的行为可能会因为在较低的作用域级别实现类似的命名方法而发生变化。

第1.6节：使用DOM API（使用图形文本：Canvas、SVG或图像文件）

使用画布元素

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

首先建立一个画布来保存图像的像素信息：

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

然后为画布选择一个上下文，在这里是二维的。

var ctx = canvas.getContext('2d');

然后设置与文本有关的属性：

ctx.font = '30px Cursive'; 
ctx.fillText("Hello world!", 50, 50);

然后将画布元素插入到页面中，以采取effect：

document.body.appendChild(canvas);

使用SVG

SVG是用来构建可扩展的基于矢量的图形，可以在HTML中使用。

首先创建一个有尺寸的SVG元素容器：

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
svg.width = 500;
svg.height = 50;

然后建立一个具有所需定位和字体特征的文本元素：

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); 
text.setAttribute('x', '0');
text.setAttribute('y', '50'); 
text.style.fontFamily = 'Times New Roman'; 
text.style.fontSize = '50';

然后在textelement中添加要显示的实际文本。

text.textContent = 'Hello world!';

最后将文本元素添加到我们的svg容器中，并将svg容器元素添加到HTML文档中：

svg.appendChild(text); 
document.body.appendChild(svg);

图像文件

如果你已经有了一个包含所需文本的图像文件，并将其放在服务器上，你可以添加图像的URL，然后将图像添加到文档中，方法如下：

var img = new Image(); 
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg'; 
document.body.appendChild(img);
avatar
文章
阅读
粉丝