JavaScript 指南 · 1/6
本章目前僅提供英文版。
JavaScript was born in the browser, but runtimes like Node.js have carried it to servers, command-line tools, build pipelines and desktop apps. This chapter shows the two places you will run code most often, then walks you through your first script, a new npm project and a comfortable editor setup.
The core language (variables, functions, arrays, Promises) behaves the same everywhere. What changes is the set of APIs around it: document exists only in the browser, while the fs module for reading files exists only in Node.js.
| Runtime | Gives you | Typical use |
|---|---|---|
| Browser | window, document, DOM events | Web pages and web apps |
| Node.js | File system, network, process APIs | Servers, CLI tools, build scripts |
The quickest way to run JavaScript needs no install at all. In Chrome, Edge or Firefox, press F12 or Ctrl+Shift+I (Cmd+Option+I on macOS) and open the Console tab. Type a line, press Enter, and the result appears immediately.
console.log("Hello, JavaScript!");
const scores = [72, 95, 88];
scores.sort((a, b) => a - b);
console.log(scores); // [72, 88, 95]
document.title; // the current page title (browser only)The console echoes the value of the last expression, which makes it ideal for quick experiments. Anything you type is lost on reload, though, so move longer code into a file.
Node.js runs JavaScript outside the browser. Download an installer from nodejs.org; unless you have a reason not to, pick the LTS (long-term support) release. If you need to switch between versions, a version manager such as nvm, fnm or Volta makes that painless.
npm, the package manager, ships with Node.js. Confirm both are on your path:
node --version
npm --versionCreate hello.js in any folder. process.argv holds the command-line arguments; the values you pass start at index 2.
// hello.js
const name = process.argv[2] ?? "world";
const now = new Date().toLocaleTimeString("en-US");
console.log(`Hello, ${name}! It is ${now}.`);Run it by handing the file to node:
node hello.js
node hello.js Ada
# re-run automatically whenever the file changes (recent Node.js)
node --watch hello.jsRunning node with no file opens the REPL, an interactive prompt much like the browser console. Leave it with .exit or by pressing Ctrl+C twice.
Real projects start with a package.json, which records the project name, its dependencies and the commands you run often. npm init -y creates one with default answers.
mkdir my-app
cd my-app
npm init -y
npm install --save-dev prettierAfter adding a start script by hand, the file looks roughly like this (default fields vary a little between npm versions):
{
"name": "my-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"devDependencies": {
"prettier": "^3.0.0"
}
}Installing packages creates a node_modules folder and a package-lock.json file. Keep node_modules out of Git by listing it in .gitignore, since it can always be rebuilt. Do commit package-lock.json: it pins exact versions so everyone installs the same thing.
Visual Studio Code understands JavaScript out of the box, so autocomplete, go-to-definition and rename all work immediately. A few extensions make it better:
Add // @ts-check to the top of a JavaScript file and VS Code will type-check it with the TypeScript engine. Describe types in JSDoc comments and mistakes surface before you run anything.
// @ts-check
/**
* @param {number} price
* @param {number} rate
*/
function withTax(price, rate) {
return price * (1 + rate);
}
withTax("1000", 0.1); // the editor underlines the string argumentnode file.js runs a script and npm manages packages.npm init -y; ignore node_modules, commit package-lock.json.// @ts-check catches many beginner mistakes early.
0 則留言
登入 · 登入後即可留言。