Every website you used today ran JavaScript. When a “Like” counter goes up without the page reloading, when a form tells you your password is too short before you press Send, when a map scrolls under your finger, that is JavaScript running inside your browser. It is the only programming language every browser understands, which is why it is the best first language for anyone who wants to build for the web.
\nYou are going to learn it the slow, solid way: by watching what the computer actually does with each line you write.
\nJavaScript is a language: a set of rules for writing instructions. Something has to read those instructions and carry them out. That something is a JavaScript engine. Chrome and Edge use one called V8, Firefox uses SpiderMonkey, Safari uses JavaScriptCore. They all follow the same official standard, called ECMAScript, which gets a new edition every year.
\nAn engine never runs alone. It lives inside a host that gives your code extra abilities:
\ndocument), clicks and key presses, the network (fetch) and a little storage (localStorage).That split matters from day one. Everything in sections 1 to 3 of this course is the language itself, so it works in both places. Section 4 uses browser extras, so that code only runs on a web page.
\nHere is a complete JavaScript program. Press Run.
\nconsole.log(\"Pocket is running\");\nconsole.log(450 + 1200);Two things happened, in order. First the engine read line 1, saw an instruction to log some text, and printed it. Then it read line 2, worked out 450 + 1200, and printed the result, 1650. Each of these lines is a statement, one instruction, usually ended with a semicolon. The engine runs statements top to bottom, one at a time, and finishes each before starting the next.
console.log() is how you see inside your program. You will use it constantly, and professional developers do too. Anything between the parentheses is worked out first, and the result is printed.
Throughout this course you build one program, a little at a time: Pocket, an expense tracker. In the next lessons it is a handful of variables printed to the console. By section 3 it holds a list of expenses, totals them by category and sorts them. In section 4 it becomes a web page with a form, a live list and saved data. In section 5 you organise it the way real projects are organised, with modules, classes and proper error handling.
\nMost lessons end with an exercise. You write code in the editor, press Check, and a set of automatic checks tells you what works and what does not yet. Getting a check wrong is normal and useful: read the message, change one thing, and try again. That loop of write, run, read and fix is what programming feels like every day.
\nNext you meet the raw material every program works with: values, their types, and the variables that hold them.
\n","toc":[{"id":"sec-1","text":"One language, two homes","level":2},{"id":"sec-2","text":"Your first line of code","level":2},{"id":"sec-3","text":"What you will build: Pocket","level":2}],"takeaways":["JavaScript is a programming language that every web browser can run, and Node.js runs the same language outside the browser.","The language itself is small; the host it runs in (browser or Node.js) adds extras such as the page, files or the network.","Code runs one statement at a time, top to bottom, unless you tell it to do otherwise.","console.log() prints a value so you can see what your program is doing; it is the first debugging tool you reach for."],"further":[{"title":"What is JavaScript? (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript"},{"title":"Introduction to Node.js","url":"https://nodejs.org/en/learn/getting-started/introduction-to-nodejs"},{"title":"console.log() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/console/log_static"}],"quiz":[{"q":"You write console.log(2 + 3) on line 1 and console.log("done") on line 2. What appears in the console, and in what order?
5 and then done, because statements run top to bottom.","why":"Correct. The first statement is evaluated and printed, then the second one."},{"text":"done and then 5, because text is printed before numbers.","why":"JavaScript does not group output by type. Statements run in the order they are written."},{"text":"2 + 3 and then done, because console.log prints exactly what you typed.","why":"The expression 2 + 3 is evaluated first, so console.log receives the number 5, not the characters you typed."}],"answer":0},{"q":"Which of these is something the browser adds, rather than the JavaScript language itself?
","options":[{"text":"Numbers and the+ operator.","why":"Numbers and operators are part of the language, so they work the same in Node.js and in every browser."},{"text":"The if statement.","why":"Control flow such as if is core language syntax and exists in every host."},{"text":"The document object that lets you change the page.","why":"Correct. document is a browser API. Node.js has no page, so there is no document there."}],"answer":2},{"q":"A friend says “JavaScript is a simpler version of Java.” What is the most accurate reply?
","options":[{"text":"They are unrelated languages that share part of a name for marketing reasons in 1995.","why":"Correct. JavaScript was named to ride on Java’s popularity at the time. The two languages work very differently."},{"text":"JavaScript is the browser edition of Java and compiles to the same bytecode.","why":"JavaScript is not compiled to Java bytecode and has its own standard, ECMAScript."},{"text":"JavaScript is an older language that Java later replaced on the web.","why":"Java applets disappeared from the web; JavaScript is the language every browser runs today."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// 1. Log the text: Welcome to Pocket\n// 2. Log the result of adding three expenses: 450, 1200 and 899\n"},"solution":{"js":"console.log(\"Welcome to Pocket\");\nconsole.log(450 + 1200 + 899);\n"},"checks":[{"id":"logs-welcome","test":"return logs.some((l) => l.toLowerCase().includes('welcome to pocket'));"},{"id":"logs-total","test":"return logs.some((l) => l.trim() === '2549');"},{"id":"welcome-first","test":"const w = logs.findIndex((l) => l.toLowerCase().includes('welcome to pocket'));\nconst t = logs.findIndex((l) => l.trim() === '2549');\nreturn w !== -1 && t !== -1 && w < t;\n"}],"title":"Say hello to Pocket","prompt":"Write a two-line program. First log the text Welcome to Pocket. Then log the total of three expenses, 450, 1200 and 899, by letting JavaScript do the addition inside console.log().
"like this". Numbers do not need quotes.","You can put a whole calculation inside the parentheses, for example console.log(1 + 2).","console.log(450 + 1200 + 899); prints the total."],"explanation":"The engine runs your two statements in order. In the first, "Welcome to Pocket" is text, so it is printed as it is. In the second, JavaScript evaluates 450 + 1200 + 899 first, gets 2549, and only then hands that single number to console.log(). Working out what is inside the parentheses before using it is a rule you will lean on in every lesson.