Keeping HTML and JavaScript (and CSS) Fully Separated

Steve P. — Thu, 21 Mar 2024 14:53:52 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

In a total very useful separation of concerns, all devs can and should keep all JavaScript and CSS out of HTML markup--not using "on-" event handlers--using DOM element 'id' attribute, largely using the always handy document.getElementById method.

Additional Context

Do web devs still define event handlers in HTML markup, written in an element attribute?

/myEntryPage.html
<input type="radio" name="colorSelect" value="red" onchange="selectColor(this);"> Red
<input type="radio" name="colorSelect" value="blue" onchange="selectColor(this);"> Blue

Instead all devs should use the HTML id attribute (rarely the class attribute when needed) along with the JavaScript DOM methods document.getElementById() and document.addEventListener() to set up document elements with event handlers, rather than using "onclick=" or "onchange=" (or any "on-") element attributes. JavaScript (and particularly the highly recommended TypeScript) is not usually subject to error/code-checking if using script of any kind defined as an element attribute or even with multiple line/statements enclosed in <script> tags. The above markup has been re-coded below to fully remove JavaScript from HTML markup and put it properly into *.js (or *.ts) files. The script shown is TypeScript (highly recommended) so the event handlers are initialized on page load.

/myEntryPage.html
<input type="radio" id="colorSelect-red" value="red"> Red
   <!-- id="colorSelect-red" CHANGE="selectColor(this);" -->
<input type="radio" id="colorSelect-blue" value="blue" onchange="selectColor(this);"> Blue
   <!-- id="colorSelect-blue" CHANGE="selectColor(this);" -->

/myEntryScript.ts
document.addEventListener("DOMContentLoaded", (/* event: Event */) => {
   document.getElementById("colorSelect-red").addEventListener("change", (event: Event) => {
      selectColor(event.target as HTMLInputElement);
   });
   document.getElementById("colorSelect-blue").addEventListener("change", (event: Event) => {
      selectColor(event.target as HTMLInputElement);
   });
});

(Note, to track elements in markup with event handlers, you might put an HTML comment underneath with the 'id' of the element and the event CAPITALIZED with its code as an aid in documenting/annotating.)

Job Posting Question: If you have your way, how would you design a chicken?

Steve P. — Fri, 24 Jan 2020 21:14:41 +0000

The job announcement is for a web application developer with knowledge of front-end development languages to be used in the state government enterprise.

This has to be a trick question, right?

Or is it what I expect, where I go into a concise answer making sure I use all the important terms: class, interface, properties, methods, encapsulation, inheritance, abstraction, polymorphism?

Forem: Steve P.

Keeping HTML and JavaScript (and CSS) Fully Separated

Explainer

Additional Context

Job Posting Question: If you have your way, how would you design a chicken?