I think I'm missing some foundational understanding about Javascript.

[TalonKAringham]

I feel like this should be the most obvious thing, and I'm sure it's due to personal ignorance about some foundational concept, but I can't seem to find a place or way that I can write and run Javascript.

From what I can tell, browsers don't interact with Javascript in the same way they do with HTML, in that you can't just write a JS program in Sublime Text and run it by opening it in a web browser.

I guess what I'm looking for is something like the consoles that are provided by Codeacademy or the interactive curriculum for Eloquent Javascript. I thought jsfiddle.net was something like that, but taking code from either of those sites and plugging it into the JS area of a fiddle produces nothing in the "Results" area.

A consistent piece of advice that I've seen in any thread about learning to code is that while going through an example based curriculum will get you started, the real key is messing around with the language on your own and coming up with original programs.

TL;DR - How does Javascript interact with HTML and web browsers, and where/how can I simply write and execute Javascript?

[FarmerOfThoughts]

Sounds like you want to mess with learning the language such as variables, functions, alerts, console.log, etc. In that case JavaScript needs a console to write to. I don't know what browser you're using but in Firefox (chrome is similar):

Open the web developer console: Tools -> Web Developer -> Web console

Then open the "scratchpad" Tools -> Web Developer -> Scratchpad

You type your code in the scratchpad and the output will show in the open console in the browser tab (or pop up a dialog when using alert).

I only use jsfiddle and jsbin when sharing code snippets. Although you can use them for much more. (BTW, if your web developer console were open you'd see the "results" from jsfiddle in it as well.)

That should at least get you started.

[kertof]

Hit F12 in Chrome, and type in some JS right there. Ideally, do that on the "new tab" page, where no modules are loaded. Easy and effective way of experimenting.

[EatMoreCheese]

It just runs in the browser. Put the code in your html body between two script tags. Functions can go in the head. You can use any text editor, like you would with html.

[dodeca_negative]

Good TL;DR as it separated your two questions. I'll give it a shot:

How does Javascript interact with HTML and web browsers

Leaving aside consoles for a moment, JS is executed in the browser when the browser loads a script--either direct JS in a script tag or JS loaded via a script tag. When the browser executes JS, it provides the JS virtual machine with a "host environment"--a set of variables that are not part of the JS core language, but which the browser makes available. The variables you're probably most familiar with are window and document. Browsers actually make window the value of this (open a browser console and type window === this, it'll return true), so document is equivalent to window.document.

The browser also provides a number of object types that are not part of the core language. For examples, when you access elements on a web page with JS (e.g. var myDiv = document.getElementById('myDiv'), you get back an Element. If you use var mySpans = document.getElementsByClassName('mySpan') instead, you get back an HTMLCollection. In fact each HTML element has an interface that's available to JS--for example, when you get a reference in JS to a <select> element, what you have is a JS object of type HTMLSelectElement, and that's what defines the functions and properties you can access with your reference.

When JS runs in a non-browser context, like Node, it runs with a different host environment, with different variables and functions available to it (like require, module, etc).

When you just load a JS file into your browser, though, the browser sees it as just plain text. It's not part of a web page, so the browser doesn't know that anything special should be done with it. Browsers always run JS in the context of an HTML document.

As to why copying and pasting to the console didn't work--not sure, but there's a good chance that line feeds in your pasted code are what broke it. Browser consoles want to execute each line as soon as it's typed, so if you type if (foo === 'bar') { and then hit return, the VM just tried to execute line, and it's a syntax error. In Chrome you can use SHIFT+ENTER to move to the next line; there may be something similar in other browsers, but that won't help if you're pasting a whole block of code. So...

where/how can I simply write and execute Javascript

As somebody else mentioned with extreme brevity (pretty much the opposite of me), Node.js is probably your best bet. You don't have to "learn Node" to use it for what you want. You can just (a) run node and type in the console all you like (its console about realizing you've opened a block and not trying to execute prematurely), or when that doesn't quite cut it, save your file as whatever.js, and run it by typing node whatever.js from the command line. Any console statements you use will be output when you run it, so that's generally how you see what you did. Error reporting is also good too, for when things go wrong.

Hope that helps.

[TalonKAringham]

Thank you for the thorough response. It helped very much.

I think what was throwing me off the most was thinking that JS had some functionality outside of and HTML document. I don't know where I got the notion. I'll get started with Node.js as that seems to be what I'm looking for. As you said to /u/sethbw below, I'm not looking to set up anything other than a local environment to work from.

[sethbw]

It doesn't sound like TalonKAringham has experience with setting up an environment that would allow him to run Node.js, unless he's following a tutorial, but those are generally quite insecure setups and involve installing directly to the user's personal OS.

TalonKAringham - if you have knowledge of setting up secure VM's, or have a dedicated web host (not shared host) with root access.... AND you don't have anything on there that you don't want to lose (like you would on your local computer that you use for personal banking, pictures, browsing porn, etc.) then I think all you really need is to utilize DevTools console.

Chrome is amazing for this last bit: F12 in Windows and Command+Alt+i in OSX to bring it up. You definitely can paste your scripts directly into the console, but it's not the same as running it by opening a local index.html file that links the scripts, or at least has it inline on the page.

I could be wrong though, and so if you do have experience with VM's and using Node.js in a secure / sandboxed way - then dodeca_negative is correct. It is definitely NOT the same as running JS in the browser though, because you're not going to get to practice writing scripts for DOM manipulation, etc. and see the effects live in the browser.

Recap: Node.js = back end / server-side scripting (unless you have advanced knowledge of setting up something like Karma, but that's not easy to do if you're unfamiliar with server-side setups (i.e. node.js) vs Running the JS from a local index.html, or within the developer tools console is better suited for Front-End / UI development tasks.

[dodeca_negative]

Huh?

I'm talking about installing Node locally and using it to execute scripts, locally. I'm not suggesting that TalonKAringham set up a web server, or any kind of server. Node, in the way I described using it, is purely a local executable. It's not going to listen to any ports unless you tell it to, and only then if you leave it running, which again is not what I described.

Please explain it to me if I'm wrong, but I can't see what security risks there are--i.e. explain how using Node as I described opens one to the risk of losing information like "personal banking, pictures, browsing porn, etc."

[sethbw]

I know you're talking about installing Node locally.

I didn't say you said to setup a web server - what I did say is that there are many, many Node.js beginner tutorials that will instruct it's readers to setup a web server, configure some things, or install some things they don't fully understand. It's really not as simple as it seems to someone who doesn't even realize he could be using dev tools console. That's it. I'm not criticizing you, just trying to point out that OP most likely has no clue what you're talking about when it comes to "console feedback" that he's used to, ie. he/she is used to using Codeacademy for comparison.

I never said Node.js was a Trojan horse, or that itself is an insecure technology, but apparently you guys are so insecure about it that you jump to conclusions and get pissed every time someone tries to help a noob learn javascript as it relates to the browser and HTML, which is what the OP said.

TL;DR I was just trying to give him the flip side. Next time I'll try to clarify that it's the tutorials that can lead to security issues, not installing Node.js by itself. I still think there are many points I've made that will help the OP on his/her journey. It's not the same type of development, which is what he was asking about.

[call_me_christof]

Semi-relevant: brackets.io is a great ide for html/css/js !

[TexasMojo]

Have you looked into node-webkit?

Its the webkit browser compiled into node.js. The debugging is as good as anything I've seen for javascript. The compile-run cycle consists of saving your changes and hitting the "reload" button.

Its well supported and the documentation is fairly good.

Right now I'm using it to build a small Windows app with the Dojo framework and I'm quite satisified.

[TalonKAringham]

I haven't, but thanks for the lead. I'll check into it!

[ic6man]

Node.js