国庆节前端技术栈充实计划（2）：抽空打好JavaScript基础

疯狂的技术宅

发布于 2019-03-27 15:29:57

1.3K0

发布于 2019-03-27 15:29:57

文章被收录于专栏：京程一灯

使用console.log()

引言

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

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

开始吧

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

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

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

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

输出变量Logging variables

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);`

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

结束笔记

想知道控制台更多的能力，看这个 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方法从技术上讲是 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

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

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

笔记

当prompt框显示的时候，会阻止用户访问页面的其他部分，因为对话框是模态窗口。
使用Chrome 46.0，这个方法在 <iframe>里会被阻止除非它的沙盒属性的值为allow-modal。

编辑于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);
}

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

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

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搞混了）是动态，弱类型的语言，用于客户端也可以用户服务器端的脚本语言。

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>

往期精选文章
使用虚拟dom和JavaScript构建完全响应式的UI框架
扩展 Vue 组件
使用Three.js制作酷炫无比的无穷隧道特效
一个治愈JavaScript疲劳的学习计划
全栈工程师技能大全
WEB前端性能优化常见方法
一小时内搭建一个全栈Web应用框架
干货：CSS 专业技巧
四步实现React页面过渡动画效果
让你分分钟理解 JavaScript 闭包

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2017-10-02，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自京程一灯微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度