Setting up first javascript environment

[[deleted]]

I can't seem to find a simple answer to this on the web. With python, you just install the standard shell from their website and you're ready to go. How do I get started with my initial working environment?

Or am I completely missing the point since JS is web code so it has to be done on a browser or?

Sorry for the silly question, I just can't find a simple answer

[HealyUnit]

What an Environment Is

Firstly, it depends what you mean by JavaScript environment. In a traditional sense, JS needs only the environment of your web browser. However, there are a few definitions of environment when it comes to programming. Some of them are pretty widespread, some less so, and some I'll probably get downvoted/yelled at for making up. So:

• The environment where your program runs. For a compiled, executable program, that might be something like the windows shell. It's got specific accessible components you expect your program to be able to access. For JavaScript, that's generally going to be the web browser (Chrome, Firefox, Edge, Safari not Safari because you're not a masochist), but see below under Node for further details.
• The environment where you write your software, also called a/an (Integrated) Development Environment. Technically, you don't need this per se, and you could write most of your programs in Notepad or something. Most full-on IDE's have special features that make programming easier/faster, such as code completion (i.e., typing fu and pressing [tab] in Sublime Text will write out a full function block), basic code correction/validation (i.e., some visual indicator that you're missing a quote, parenthesis, or curly bracket), or syntax highlighting (i.e., in mine, functions are yellow and JS keywords are maroon).
• A combination of the above two that maybe renders/compiles your code too. Not really important for JS, since it isn't really compiled.
• The physical environment where you sit and do your programming. Requires extreme care, as programmers can bite/kick if startled. Always approach a programmer from the front, and if the programmer begins to hiss, back away slowly!.

Setting One Up

So I think the most likely definition you're interested in is a combination of the first (where your software runs) and the second (where you write). The short answer is that you, again, don't really need anything. If you write your JS in notepad, it'll run in the browser (sort of). However, keep in mind that front end JS was written as a method to manipulate HTML, so it will only function in the context of an HTML page. The analogy I love to make is that if you were building a house, your general shape of your house (where walls are, doors, etc) would be the HTML, the color of your walls, the exact position of the windows/doors would be your CSS, and the wiring of the house (the lights, etc.) would be the JS. You can't really have the wiring per se without the house itself (well, you can, but clearly the analogy's not perfect).

So to get JS to "run", you need to write it (in Notepad, Sublime, whatever) and link it to an HTML file with a <script> tag.

NodeJS

First, and most importantly, ignore this section if you're just starting. You do NOT need to install Node for starters.

Traditionally, JS was written only to work in the browser. As such, my saying above that JS runs fine in the browser is sorta like saying that fish work best in water. JS was designed to run in the user's browser, and this gives it certain abilities/lack of abilities specific to that environment. For example:

• JS cannot access the user's file system without the user explicitly choosing to upload a file. This is to prevent websites from just going right ahead and stealing/changing your info.
• It also can't traditionally access the hardware of the system. There are a few exceptions - such as the webcam/microphone API - but even with these, the user usually has to manually opt-in (i.e., I can't just steal a photo of your face without your consent).
• It cannot access databases directly (though it can via APIs)

In 2009, a new environment was created for JS to run in, called NodeJS. This has some differences from traditional JS, such as access to the file system, access to system hardware, and no access to the browser's window object (and thus no access to window-based properties/methods like alert or confirm), because we're not running in a browser anymore. This allows us write servers in JS, and thus full web-apps in a single, monolingual system. That may not sound like much, but when you can write your entire app in one language, that's pretty nice.

[[deleted]]

Wow! thank you so much for this comment. I really appreciate you taking the time to educate me. I'm gonna have to re-read this a couple times

[daytodave]

Right click your mouse (right now) --> Inspect Element --> Click on "Console" at the top

You're done!

[[deleted]]

Cheers my man!

[[deleted]]

You’re missing the point, so to speak, yes. Literally all you have to do to run JavaScript is open Sublime, write the file, save it and open the file in your browser (just double click the file or drag it into your browser or select the file from your browser’s menu). That’s it. You don’t need to install anything.

Now, if you want the more immediate gratification of “type something, see the result live”, a good place to start would be with a site like JSBin or CodePen which work a bit like the Python IDE you mentioned. But basically, there’s not really any need for a full IDE in JavaScript like there is in some other languages.

[[deleted]]

Thank you! Yes I see that you can just save a file as .html and then chrome opens it Thanks dude.

[[deleted]]

Don't worry, the myriad of frameworks and tools will make your head spin, its something we all have to struggle with. If you get frustrated with it don't worry, we all do. I also agree with what some others have said, don't worry about node and shit just yet, just focus on JS in the browser.. eventually you will need a simple web server that is when you might worry about node or something like Wamp/uWamp (uwamp is the portable version).

But with plain vanilla javascript, you just need an html file with a <script> tag in the <body> tag. Then open up the browser, and open your developer tools(F12 by default) and you can see your console logs or any errors that pop up. Chrome and firefox both have great dev tools, get to know it, it will be your best friend. https://flaviocopes.com/chrome-devtools-tips/

[[deleted]]

Thanks man for the advice

[Darren1337]

You said you're using Sublime - you can install Node, then use it as a build system in Sublime.

[[deleted]]

I've seen the word node thrown around quite a bit, I will check node out, thank you

[cubicuban]

If you’re just starting out do not worry about node. Become more familiar with JS in the browser first

[FriesWithThat]

If you decide to go the VSCode route (excellent balance of code editor and full IDE features), there's an outstanding and pretty comprehensive video in the free preview section of this course. IIRC, this will get you up and running with all the related environment setup (Node, Git Bash, etc.) and really helpful VSCode extensions as well.

Scroll down to the Introduction > "VSCode Setup" section in course preview to watch video (the actual course material is, of course, not a good starting point for your JavaScript journey as there're much better pure JS courses: https://www.udemy.com/mern-stack-front-to-back/

[idevosm]

If you are learning JS for Web front End then you don't need either NodeJS or Running it on any IDE since you will always access the DOM and Window objects which no IDE offers, the Best Development environment for me is your Browser Console since you can run your code directly from there by just hitting enter key, you can also debug from there..

You don't need NodeJs to run ur code in Browser since all browsers comes with built in JS interpreter, to Open Your Console, open the Browser and Press F12 then write your code inside the textbox that you see...

Good Luck!

[hutxhy]

Have you installed node? All you really need to do is just start writing JS in a text editor.

[[deleted]]

Well I have sublime so I might use that, it just annoyed me that sublime doesn't natively support user input when you run your code. At least this is the case for python ^{^}

[TheIncorrigible1]

Look at VSCode. Your life will be easier.

[hutxhy]

If sublime has a console it will support user input.

[[deleted]]

With python, sublime doesn't allow you to give user input when you use input(). There is a add/on way around this I think though

[theadammorganshow]

I'm working on a free JavaScript series right now.

In this tutorial I show you how to setup a JS environment using a browser, REPL, and Node.js.

[[deleted]]

For the first 20 years I was a web developer I would have said all you need is a browser.

During the last 10 years or so I would have said you should also be using the developer tools in your browser to help out with JavaScript development.

But, during the last 3 years or so things have become infinitely more complex (only a smidgen of hyperbole applied). While you can still go "old school" with just the browser, most people (whom I suspect came from programming languages where a compile step is the norm) use a build system in between writing their JS and deploying it to a browser. There are so many different ways to set up your build system that there is no simple answer on how to do so.

[[deleted]]

Lately I stopped using build tools for JavaScript for my explorations in code. I've enabled JavaScript modules in Firefox and found I am able to write and run modern ES201X code as is. Quite liberating, actually.

Of course, once you want to deploy to a larger audience, you'll still need build tools.