Open a JavaScript project
Choose Playground from Codectionary’s navigation, or visit /playground directly. A fresh project starts with index.html, style.css and script.js. On a wide screen, choose script.js in the Explorer. On a narrow screen, use the Choose file control above the editor and select script.js.
The Playground does not have a separate JavaScript runtime selector for an existing project: script.js is already a JavaScript file. If you need another file on a desktop-sized screen, use the + button in Explorer and choose JavaScript. The active file is the one you edit; when the web preview runs, it combines the project’s HTML, CSS and JavaScript files.
Run a first example
Replace the starter text in script.js with the example below, then click Run. Look at the Console panel along the bottom for Hello, Codectionary!. If that panel is collapsed, open it with its Console button. The message is developer output, so it does not appear as text in the Preview.
The Preview shows the page built from index.html and style.css. JavaScript can change that page by using the DOM. The editor also has Live preview enabled by default, so changes may update after a short pause while you type; Run explicitly clears the current log list and refreshes the preview. If the preview is hidden, choose Show Preview.
Read output and errors
console.log writes an INFO entry to the Playground Console. console.warn produces a warning, and console.error produces an ERROR entry. An uncaught JavaScript error is reported as a runtime error; an unhandled rejected Promise is also reported there. The Errors Only filter helps find error entries, and the panel opens when an error is received.
For a safe experiment, after the first example works, temporarily replace it with console.log(unknownName); and click Run. Because unknownName was never declared, read the resulting error in Console and then restore the working code. The displayed line number comes from the generated preview document, so it may not match a line number in script.js exactly.
When you open an article example
A normal visit to /playground includes index.html. By contrast, opening a JavaScript snippet with an article’s Edit in Playground control starts a project containing only that example.js file. The web runner currently needs an HTML file: without one, Preview says “No HTML file found” and the JavaScript example is not executed. On a desktop-sized screen, add an HTML file using Explorer’s + button, choose HTML and put a simple page in it, then click Run. Alternatively, open /playground for the three-file starter project and paste the snippet into script.js.
This also explains why a JavaScript example that changes document.body needs a page in the Playground. The article’s own interactive Preview is a separate feature from the full Playground.
What this environment can and cannot do
The JavaScript runs in a sandboxed iframe inside your browser. It can work with the HTML page shown in Preview, but it cannot freely access Codectionary’s surrounding page or your computer’s files. The iframe has an isolated origin; browser storage and cross-origin network requests may be restricted. Do not assume a browser API or remote URL will work just because it works in a different page.
This is not Node.js: there is no Node process, terminal, package.json installation step or built-in npm package resolver in the Playground. Node-specific modules and file-system APIs are not available to these browser scripts. Keep a copy of code you want to save before leaving or reloading the Playground.
Playground, browser console or Node.js?
Use the Playground when you want to edit small web files together and see their page in Preview. Its Console collects messages and errors from the sandboxed preview; it is not a command prompt where you enter JavaScript one line at a time.
Use a browser console in developer tools to try statements in the context of the page you are inspecting. That page has its own DOM and permissions, so its results may differ from the isolated Playground preview. Use Node.js when you need to run a saved .js file in a terminal or use Node packages and supported Node APIs. The same console.log statement works in all three, but it writes to a different output surface and has different surrounding APIs.
Syntax
console.log("Hello, Codectionary!");Examples
Print a message from script.js
Paste this into script.js in a fresh three-file Playground project, then click Run. Expected Console output: Hello, Codectionary!
console.log("Hello, Codectionary!");- console is the browser-provided logging object and log is the method that sends a value to developer output.
- The quoted text is a string. Running the script sends that string to the Playground Console as an INFO entry; the Preview still displays the HTML page.
- Change the message, run again and compare the new Console entry. Use DOM code when you want text to appear on the page itself.
Best practices
- Start from the three-file Playground project so index.html is present when you run script.js.
- Use Console for log messages and errors; use Preview to inspect visible page changes.
- Expect browser sandbox restrictions and test network-dependent code in the environment where it will actually run.
- Copy code you want to keep before you leave or reload the Playground.
Runtime & versions
Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.
ECMAScript specification