JavaScript, HTML and how this stuff actually works

Hi there,

I’ve finished the Javascript course, I did most of the challenges as well and have been making lots of notes and revising everything as I go, so I feel reasonably well versed in what I was taught on the course. That said, I am completely confused about how JavaScript actually works when it comes to using it for your own projects.

This is my rough understanding so far:

  • JavaScript is a more fundamental coding language used for deeper stuff in webpages (i think?)
  • it relies on html in some way but I’m not fully sure how or why (is html more the front end of a web-page?) I did the html course as well and that didn’t really help much
  • In the latter lessons APIs got involved which after much investigating appear to be pre-programmed libraries of functionality which JavaScript can use (as a side note, a deeper explanation of APIs would be really useful in the lesson as I had no idea what was going on when they first got involved)
  • node.js is used to run JavaScript outside of a browser?

The main thing I don’t understand despite searching everywhere is where do you actually do JavaScript coding? Googling this question has lead me to installing Sublime Text 3, which is just a text editor, and node.js, which i’m not really sure about, but I have no idea how these two programs are supposed to interact

https://www.youtube.com/watch?v=qQEYAOPWDzk&t=481s this video I found is the kind of thing that would be great to have up and running to start playing around with JavaScript. Seems like he is running node.js* but presumably has installed something extra so he gets all those nice colours, plus he has a webpage open in which he sees the results of his code.

So really that’s the main thing I want to know is how to get something like this guy has running, but also a general understanding of what is going on with JavaScript in relation to html, node.js and anything else would be really useful.

Thanks.

*EDIT: just realised he isn’t using node.js in that video, just a similar looking icon, so I can only guess he is using some kind of text editor

1 Like

I think this is a good read:

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

to grasp what you need.

Javascript first was created to interact with a webpage, allowing use to manipulate the webpage, for example changing color when a button is pressed (bit of a simplified example). Or fetch additional data and add it to the page dynamically.

so Js, html and css are tightly knitted. They all play there role for building the front-end of a website.

however, over recent years javascript has expanded its capabilities, we can now use it for back-end web development (nodeJS), desktop programs (electronJS) and apps (react native)

2 Likes

To understand how to use JavaScript in actual website development, as @stetim94 points out, you’d need to understand the Document Object Model; the browser’s HTML document API.

Codecademy has an additional course on manipulating the DOM with javascript.

As far as asynchronously using data via APIs, a similar question was asked just the other day.

The text editor the chap is using in the video is Atom.

Thanks for the help, these links seem really useful.