Javascript: are some things too simple to link externally?

Question

I'm really new to JavaScript. So this might be a basic question? I would just like some explanation, if possible.

I'm working on some web development that has JS. However, I have the requirement that all files (JS and CSS) have to be linked through external sheets, and with complex functions that makes sense, but with some of the simple JS I'm a little confused as to what that means.

With CSS, you can do inline styling, or in the header in style tags, or in an external sheet. There are some JS interactions where I can't tell if it has to be where it is, or if there is a way to move it to an external sheet.

For Example, this basic "bulb on/off"

The js here is onclick=document.getElementById(...) (Changing an image by clicking on it/on a button)

Is this kind of code stuff that can even go in an external sheet? is my internal analogy of inline/tags/external CSS fitting to apply to Javascript, too, or does JS work differently? I just don't want to get counted off for not having stuff in the right place.

Answer 1

What you need to understand is that the "scope" of what you are working with when you use JavaScript, is the user's viewport. Internally represented as a tree of objects which we call the DOM (document object model). The browser fetches these external sheets, JavaScript files, html etc. and then loads them into the DOM.

JavaScript is all about just one thing: manipulating the DOM. Depending on when your JavaScript is executed, it will manipulate the DOM in the state it is in at that exact moment.

The usual moment that programmers choose to execute their code is right after DOM-ready. This is a moment in time after which all external pieces of code/styling etc. have been fetched and initialized into the DOM, therefore allowing you to be sure, that your code is working against the full scope of content that you'd also see while browsing the page right after it loads.

Zooming in on your question about placing code in an external file: sure, its possible. As at one point this file would be imported and loaded into the DOM. The code inside would be executed at the point where this file is loaded, or when you hook into the DOM-ready event to start up the code inside this file.

Answer 2

You have a legitimate question here (apologies for the opinion - but good on you for giving it a go!).

This is from the Mozilla developer page (https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

Next, in your index.html file enter the following element on a new line just before the closing tag:

<script src="scripts/main.js"></script>

This is basically doing the same job as the element for CSS — it applies the JavaScript to the page, so it can have an effect on the HTML (along with the CSS, and anything else on the page).

In your sample code you wrote onclick=document.getElementById(...).

This should actually be written as

onclick=function() {
   document.getElementById(...)...
}