I am brand new to JavaScript and I would like practice my skills using a simple windows based IDE. While learning I do not want to use any CSS or HTML. I would like if possible to have colour single stepping, highlighting and syntax checking.
So for example you could type in your function(s), call it and receive the result
function squareNumber(x) {
return x*x;
}
squareNumber(5)
25
I would like something better than the Internet Explorer console.
There are a lot of good online IDEs at the moment. One of my favorites is JSFiddle, but you said you don't want to use CSS and HTML so it's superfluous in this case. You can use JSBin, opening only the Javascript and Console panels. Another very good one is, in my opinion, Ideone, which has a lot of languages(for JS you have to select Javascript Spidermonkey). The last one I suggest you is JSConsole, from the creator of JSBin, which is basically an enhanced Javascript console(as the name states).
Have a look at either,
You can use either software, together with node.js, to get what you want.
Executing the file,
function squareNumber(x) {
return x * x;
}
console.log(squareNumber(5));
with node.js will output,
25
Besides the options listed in the answers above; these are additional options I use when I need to write/test JS without HTML/CSS :
1) Firefox Developer Edition - ScratchPad
The Firefox Developer Edition browser offers a good console with all the necessary features to write JavaScript.
To cite a specific feature - ScratchPad provides you with a good option to write JS code and you can use the run button to view it on the console.
As you can see below it has the syntax coloring and even the options to save and open files directly from your computer.
You can open the Firefox ScratchPad as an independent window using the shortcut - SHIFT+F4
It features code completion, inline documentation and much more, you can learn more about using it from the official documentation here - https://developer.mozilla.org/en-US/docs/Tools/Scratchpad
Keyboard Shortcuts
CTRL + L - To display selected code
CTRL + SPACE - Code Hinting
CTRL + R - Run Command
CTRL + I - Inspect Command
2) Node CMD or CMD + Node
I also like using node + CMD since they work seamlessly. For this option, you need to install node.js and use the CMD to write and test your JS code.
You can also consider using the node.js CMD that works like the windows CMD.
You can change the background color and the text color of the Node CMD by clicking on the top bar and choosing properties
For syntax coloring on Node when using node, you can add one of the syntax coloring npm packages as illustrated below :
I installed the cli-color npm package in these four steps :
1) Check if npm is installed using the nmp -v
2) Install your preferred package using npm install <name of package>
3) Include the package
4) Test the package and view the results
NOTE: It important to check out the documentation of each package esp on the usage since there may be differences.
These are two of my favorite Node.js syntax highlighting packages :
https://www.npmjs.com/package/cli-color and https://www.npmjs.com/package/cli-highlight
I program in Vim and wanted something lightweight for a JavaScript IDE. I created a simple HTML page that contains a link to a .js file that I edit in Vim and render in Firefox Developer Tools (F12, from the HTML page to open; Shift-Ctrl-R to reload).
js_ide.html
<!DOCTYPE html>
<!-- vim: set filetype=html : -->
<!-- /mnt/Vancouver/programming/javascript/js_ide.html -->
<html encoding="UTF-8" charset="UTF-8" lang="en-US" language="English" xmlns="https://www.w3.org/1999/xhtml/" itemtype="http://schema.org/WebPage">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<title>JavaScript IDE</title>
<script src="/mnt/Vancouver/programming/javascript/js_ide.js" type="text/javascript" charset="utf-8" /></script>
</head>
<body>
<h1>JavaScript IDE</h1>
<p>Open this file, <a href="/mnt/Vancouver/programming/javascript/js_ide.html">/mnt/Vancouver/programming/javascript/js_ide.html</a>, in Firefox and open the Firefox Developer Tools ("console", F12).</p>
<p>Edit JavaScript code in associated file <a href="/mnt/Vancouver/programming/javascript/js_ide.js">/mnt/Vancouver/programming/javascript/js_ide.js</a></p>
<hr>
</body>
</html>
js_ide.js
// vim: set ft=javascript:
// /mnt/Vancouver/programming/javascript/js_ide.js
/* ========================================================================= */
let q = 'apple banana "nova scotia" "british columbia"';
// https://stackguides.com/questions/12367126/how-can-i-get-a-substring-located-between-2-quotes
const r = q.match(/"([^']+)"/g);
console.log('r:', r)
// etc.
Screenshot
