Wizard

The big picture • JavaScript for impatient programmers (beta)

原文链接: exploringjs.com

(Ad, please don’t block.)

5. The big picture

In this chapter, I’d like to paint the big picture: What are you learning in this book and how does it fit into the overall landscape of web development?

5.1. What are you learning in this book?

This book teaches the JavaScript language. It focuses on just the language, but offers occasional glimpses at two platforms where JavaScript can be used:

  • Web browsers
  • Node.js

Node.js is important for web development in three ways:

  • You can use it to write server-side software in JavaScript.
  • You can also use it to write software for the command line (think Unix shell, Windows PowerShell, etc.). Many JavaScript-related tools are based on (and executed via) Node.js.
  • Node’s package manager, npm, has become the dominant way of installing tools (such as compilers and build tools) and libraries – even for client-side development.

5.2. The structure of browsers and Node.js

Figure 2: The structure of the two JavaScript platforms web browser and Node.js.

Figure 2: The structure of the two JavaScript platforms web browser and Node.js.

The structures of the two JavaScript platforms web browser and Node.js are similar (fig. 2):

  • The JavaScript engine runs JavaScript code.
  • The JavaScript standard library is part of JavaScript proper and runs on top of the engine.
  • Platform APIs are also available from JavaScript – they provide access to platform-specific functionality. For example:
    • In browsers, you need to use platform-specific APIs if you want to do anything related to the user interface: react to mouse clicks, play sound, etc.
    • In Node.js, platform-specific APIs let you read and write files, download data via HTTP, etc.

5.2.1. The console

One interesting example is the JavaScript operation for printing information:

console.log('This text is shown on the “console”!');

console.log() is not part of JavaScript proper. That is, it is part of a platform API, but supported by both browsers and Node.js:

  • On browsers, the console is a pane with text that is usually hidden, but can be brought up.
  • On Node.js, anything you log to the console is printed on the command line (think stdout).

5.3. Trying out JavaScript code

You have many options for quickly running pieces of JavaScript. The following subsections describe a few of them.

5.3.1. Browser consoles

The consoles of browsers also let you input code. They are JavaScript command lines. How to open the console differs from browser to browser. Fig. 3 shows the console of Google Chrome.

To find out how to open the console in your web browser, you can do a web search for “console «name-of-your-browser»”. These are pages for some commonly used web browsers:

Figure 3: The console of the web browser “Google Chrome” is open while visiting a web page.

Figure 3: The console of the web browser “Google Chrome” is open while visiting a web page.

5.3.2. The Node.js REPL

REPL stands for read-eval-print loop and basically means command line. To use it, you must first start Node.js from an operating system command line, via the command node. Then an interaction with it looks as depicted in fig. 4: The text after > is input from the user; everything else is output from Node.js.

Figure 4: Starting and using the Node.js REPL (interactive command line).

Figure 4: Starting and using the Node.js REPL (interactive command line).

Reading: REPL interactions

I occasionally demonstrate JavaScript via REPL interactions. Then I also use greater-than symbols (>) to mark input. For example:

> 3 + 5
8

5.3.3. Other options

Other options include:

  • There are many web apps that let you experiment with JavaScript in web browsers. For example, Babel’s REPL.

  • There are also native apps and IDE plugins for running JavaScript.

5.4. Further reading

  • The chapter “Next steps” at the end of this book, provides a more comprehensive look at web development.

Comments

Next: 6. Syntax