从JavaScript开始吧

已注销
114 阅读9分钟

译者：夏风

原文链接

使用console.log()

引言

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

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

开始吧

在你的浏览器中打开JavaScript控制台，输入下面这些代码，然后按回车：

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

这将输出以下内容到控制台：

Console Log Output in Google Chrome

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

输出变量Logging variables

console.log()可以被用于输出任何类型的变量，而不仅仅是字符串。只需将要在控制台中把你想显示的变量传递进来就可以了，举个例子：

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

这将输出以下内容到控制台：

console.log() can be used with variables

如果你想输出两个或者更多的值，只需要简单的用逗号把它们分隔就可以了，当有多个级联输出的时候，空格会被自动的添加到每个参数间。

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

这将输出以下内容到控制台：

Console Concat

占位符

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

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

这将输出以下内容到控制台：

enter image description here

输出对象

下面我们将会看到输出对象的结果，这在调用API输出json时经常是很有用的。

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

这将输出以下内容到控制台：

Logged object in console

输出HTML元素

你可以输出任何在DOM中存在的元素。在这个例子中我们输出了一个body元素。

`console.log(document.body);`

这将输出以下内容到控制台：

enter image description here

结束笔记

想知道控制台更多的能力，看这个 Console 话题。

编辑于8月4日8:52

使用DOM API

DOM 代表 Document Object Model.它像XML 和 HTML一样，是结构化文档的面向对象表示。

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

比如，思考一下以下的HTML标签：

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

我们可以运行下面的JavaScript来改变它的textContent属性。

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

这将选择到id为paragraph的元素，然后设置它的文本内容为""Hello, World""：

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

(看看这个demo)

你也可以用JavaScript以编程的方式创建一个新的HTML元素。比如，考虑一下一个HTML元素有以下的body：

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

在我们的JavaScript中，我们创建了一个带有textContent属性的新标签并把它添加到html body的最后。

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

这将会改变你的HTML的body为下面这样：

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

注意，为了在DOM中使用JavaScript来操作元素，JavaScript代码必须运行在文档中相关元素创建完毕之后，这可以通过把JavaScript放在所有标签内容之后来实现。另外你也可以使用事件监听器来监听比如window的 onload 事件，把你的代码添加到那个事件监听器里将会延迟你的代码运行直到你的页面的整个内容都加载完毕。

确保你所有DOM已经被加载完的第三种方式，是用一个0 ms的延时函数把操作代码包裹起来。这种方式，JavaScript代码重新被排到执行队列的最后去了，这让浏览器有机会在运行这一新的JavaScript之前完成一些等待完成的非JavaScript事情

编辑于8月2日19:29

使用window.alert()

alert方法会在屏幕上展现一个可视化的弹窗，alert方法的参数将会被当成纯文本展示。

window.alert(message);

因为window是一个全局对象，所以你也可以用下面这种简略的表达方式：

alert(message);

那么window.alert()会做什么呢？让我们以下面的例子为例：

alert('hello, world');

在Chrome里，它会弹出一个像下面这样的框框：

alert

笔记

alert方法从技术上讲是window对象的一个属性，但是因为window所有属性都自动的是一个全局变量，我们可以把alert当成一个全局变量来使用，代替作为window属性来使用——这意味着你可以直接使用alert()而不用使用window.alert()。

不像使用console.log，alert作为模态提示，意味着调用alert的代码将暂停，直到提示被回答。一般来说这意味着其它JavaScript代码都不会执行直到这个alert关闭。

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

然而规范其实允许其它时间触发代码继续执行尽管这个模态对话框仍在存在。在这种机制下，使得当模态框存在的情况下，运行其它代码成为可能。

更多关于alert方法的用法可以在模态提示话题里找到。

为了创造出更好的用户体验，通常不鼓励使用alert来支持阻止用户与页面进行交互的其他方法。不过，它在调试方面是很有用的。

使用Chrome 46.0，window.alert()在一个<iframe>里被阻止了除非它的沙盒属性的值为allow-modal。

编辑于7月21日13:11

使用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

Prompt box

如果用户点击了OK按钮，将返回输入框的值，否则这个方法就返回null。

prompt的返回值总是一个字符串，除非用户点击取消，那就返回的是null了。Safari是一个例外，当用户点击取消，这个方法返回的是一个空字符串。从那里，你可以把返回值转换成其它类型，比如一个整数型。

笔记

编辑于6月28日13:41

使用window.confirm()

window.confirm()方法显示了一个带有选择消息和两个按钮，一个确定和一个取消按钮的模态对话框。

现在，让我们以下面这个例子为例：

result = window.confirm(message);`

这里，message是一个可选的字符串，会被展示在对话框里，result是一个布尔值，取决于用户点击了确定按钮还是取消按钮（true代表确定）。

window.confirm()典型用法是当用户进行一些危险操作的时候比如在控制面板里删除一些东西，询问用户是否确定。

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

上面代码在浏览器中输出结果看起来大概是这样：

The Confirmation Dialog is very simple: Message, OK, Cancel

如果你需要稍后使用，你可以简单的把用户操作的结果存在一个变量里。

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

笔记

  • 规范规定，这个参数是可选的，不是必须的。

  • 对话框都是模态窗口——它们阻止用户访问程序界面的其余部分，直到对话框关闭。因此，你不应该过度使用创建对话框（或者模态框）的任何函数。无论如何，在确认时避免使用对话框是有很好的理由的。

  • 使用Chrome 46.0，这个方法在<iframe>里会被阻止除非它的沙盒属性的值为allow-modal。

  • 通常调用confirm方法的时候把window标记去掉是可以的，因为window对象总是隐含的。但是，建议明确定义window对象，因为预期的行为可能会由于使用类似命名方法的较低范围级别的实现而改变。

编辑于8月7日22:58

使用DOM API(带有图形文本: Canvas, SVG, 或 image file)

使用 Canvas

HTML为建立基于栅格的图片提供了画布元素。

首先建立了一个Canvas（画布）来放图片像素信息。

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

然后为这个Canvas选择一个上下文（context），这里我们选择二维的（2d） Then select a context for the canvas, in this case two-dimensional:

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

然后设置关于这个文本相关的属性。

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

然后把这个canvas元素插入页面，然后就会起作用了

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;

然后创建一个text元素带有期望位置的和字体特征：

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

然后向text元素里添加一个真实的展示文本：

text.textContent = 'Hello world!';

最后把这个text元素添加到我们的svg容器中，然后把svg容器添加到HTML文档中：

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

Image file

如果你已经有一个图片文件，包含了你想要的文本并且已经放到服务器上了，你可以添加这个图片的URL然后把这个图片添加到文档中像下面这样：

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);

编辑于16年12月6日15:45

附注

JavaScript（不要和[Java](en.wikipedia.org/wiki/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>
avatar
文章
阅读
粉丝