《JavaScript面向对象编程指南(第2版)》——1.8 训练环境设置

简介: 通常情况下,控制台只提供单行输入,但我们可以用分号做分割符来执行多个JavaScript语句。而如果您需要更多行代码的话,也可以通过组合键shift+Enter来实现换行,在这种情况下代码不会被立即执行。

本节书摘来自异步社区《JavaScript面向对象编程指南(第2版)》一书中的第1章,第1.8节,作者:【加拿大】Stoyan Stefanov著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.8 训练环境设置

在这本书中,凡涉及代码的我们都强调“自己动手”,因为在我们的理念中,学好一门编程语言最好的途径就是不停地编写代码。因此,这里将不提供任何可供您直接复制/粘贴的代码下载。恰恰相反,我们必须得让您亲自来输入代码,并观察它们是如何工作的,思考需要做哪些调整,这样周而复始地摆弄它们。因而,当您想尝试这些代码示例时,我们建议您使用JavaScript控制台这一类的工具。下面就让我们来看看这些工具是如何使用的。

对于开发人员来说,机器上应该大多都早已安装了一些Web浏览器了,例如Firefox、Safari、Chrome或Internet Explorer。而所有现代浏览器中都应该自带了JavaScript控制台组件,该组件是我们在阅读本书过程中始终会用到的东西,是帮助您进行语言学习和实验的环境。更具体地说,尽管本书用的是WebKit控制台(Safari和Chrome都支持该控制台),但书中的这些示例在任何控制台上都是能正常工作的。

1.8.1 WebKit所附带的Web审查工具
图1-1展示了如何在控制台中通过输入代码的方式将google.com主页上的logo换成我们自己指定的图片。如您所见,我们可以在任何页面上测试这段JavaScript代码。

在Chrome和Safari中,您可以通过右键单击相关页面,并选择“审查元素”来打开控制台。然后Web审查工具就会出现在下面的弹出窗口中,我们选择其标签栏上的“控制台”标签,就来到了真正的控制台界面中。

然后,我们直接在控制台中输入代码,按下回车键,代码就会被执行。其返回值也会在控制台中被打印出来。代码会在当前页面的上下文环境中运行,所以,如果您在其中输入location.href,控制台就会返回当前页面的URL。除此之外,该控制台还具有一套自动完成功能,其工作方式与我们平时所用的操作系统命令行类似。举个例子,如果我们在其中输入docu,然后按Tab键,docu就会被自动补全为document。这时如果再继续输入一个“.”(点操作符),我们就可以通过重复按Tab键的方式来遍历document对象中所有可调用的方法和属性。

screenshot

另外通过上下箭头键,我们还可以随时从相关列表中找回已经执行过的命令,并在控制台中重新执行它们。

通常情况下,控制台只提供单行输入,但我们可以用分号做分割符来执行多个JavaScript语句。而如果您需要更多行代码的话,也可以通过组合键shift+Enter来实现换行,在这种情况下代码不会被立即执行。

1.8.2 Mac上的JavaScriptCore
在Mac上,我们事实上不用浏览器也可以通过终端来执行JavaScript。

如果您之前没有使用过终端,可以通过Spotlight找到它。打开终端之后,在其中输入:

alias jsc='/System/Library/Frameworks/JavaScriptCore.framework/Versions/Current/Resources/jsc'

该命令为JSC(即JavaScriptCore)设置了一个别名。JSC其实是WebKit引擎的一部分。Mac系统自带有该引擎。

我们也可以直接将这个alias命令放入~/.profile文件,这样每次打开终端时,都可以通过jsc这个别名来启动JavaScriptCore了。

现在,终端在任何目录下都可以通过直接输入jsc来打开其交互环境了。然后您可以在其中输入相关的JavaScript表达式。按下Enter键之后,表达式的结果就会被显示出来,如图1-2所示。
screenshot

1.8.3 更多控制台
如今,几乎所有现代浏览器都有自带的控制台。除了之前提到的Chrome及Safari的控制台之外,FireFox浏览器的所有版本也都能安装Firebug组件,该组件中也有一个控制台。另外,新版的Firefox中也有一个自带的控制台,您可以通过菜单栏“工具/Web开发者/Web控制台”来打开它,如图1-3所示。

screenshot

而Internet Explorer从第8版开始,只要按下F12键就可以打开开发者工具组件。打开后,按Script标签栏就可进入控制台。

另外,通过Node.js的交互环境来学习JavaScript也是一个不错的选择。您可以从http://nodejs.org 中获取并安装Node.js,然后在终端中尝试其控制台,如图1-4所示。

screenshot

如您所见,我们既可以用Node.js的控制台测试一些小型示例,同时也可以写一些较长的shell脚本(如截图中的test.js),然后以scriptname.js的形式在Node.js的终端中执行。

相关文章
|
1月前
|
JavaScript
JS设置日期为0时0分0秒
项目中经常要给设置默认值,搜索从哪天开始,这时候,如果直接通过new Date()来获取时间,会有时分秒,如果快速设置为0时0分0秒?
27 0
|
3月前
|
存储 前端开发 JavaScript
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
|
3月前
|
前端开发 JavaScript 开发者
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
|
3月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(三)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
3月前
|
设计模式 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(一)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
18天前
|
JSON JavaScript 前端开发
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
|
3月前
|
JavaScript 数据安全/隐私保护
|
3月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(二)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
1月前
|
JavaScript
JS动态转盘可自由设置个数与概率
JS动态转盘可自由设置个数与概率
|
2月前
|
前端开发 JavaScript
前端深入理解JavaScript面向对象编程与Class
随着JavaScript的发展,ECMAScript 6(ES6)引入了许多新的语言特性和语法糖,其中包括了面向对象编程的Class(类)机制。Class提供了一种更简洁、更直观的方式来定义对象和操作对象的行为。本文将介绍ES6中Class的概念、语法和特性,并通过示例代码来说明其实际应用。