Coder Legion - Recent posts tagged javascript-beginners

How I talk with the DOM?

Wed, 10 Sep 2025 16:53:31 +0000

Intro.

In the past I made use of the "document.querySelector(All) " all over the place and what often resulted in "undefined" errors.

To be honest, it took me a long time to find a solution for this.

At first I began with creating a function for the "document.querySelector(All) (that I to date still use!)"

export async function elQuery(...args){
  const [elem,el_all=false,el_parent] = args;
  let el;
  if(true === el_all){
    if(el_parent) el = el_parent.querySelectorAll(elem);
    else el = document.querySelectorAll(elem);
  }else{
    if(el_parent) el = el_parent.querySelector(elem);
    else el = document.querySelector(elem);
  }
  return await el;
}

Swapping function calls up and down within my index.js.
Using "setTimeout()" and so on!

There were some improvements with this steps but it was still struggling to get my queries right.

A Quantum Leap forward.

Finally I found a way to get this done by using Map() and that is what I want to share with you.

First this.

I use javascript with a module approach, working with a folder/file structure and a bunch of custom (reusable) functions, aside of that I use classes too.

The given example here is a reflection of that!

1 structure:

assets/
  scripts/
    factory/
     dom_objects.js
     functions.js
     generals.js
     handlers.js
    modules/
     actions/
      set_actions_1.js
      set_actions_2.js
      set_default_action.js
      get_actions.js
     callbacks/
      sub_callbacks_1.js
      sub_callbacks_2.js
     defaults/
      set_defaults.js
     mdl_factory/
      //module specific files
     templates/
      sub_templates_1.js
      sub_templates_2.js

    index.js

2 dom_objects.js:

That's the file where I collect my dom objects and it holds two functions, called getBaseObjects and getExtendedObjects.

// assets/scripts/factory/dom_objects.js */
import * as FT from './functions.js';
export const getBaseObjects = async()=>{
  const map = new Map([['base_objects',{
    vvp: window.visualViewport,
    location_base: window.location.origin,
    body: document.body,
    wrap_ctn: await FT.elQuery('div.wrap.container', false, self.body),
    main_elem: await FT.elQuery('main', false, self.wrap_ctn), 
    actions_block: await FT.elQuery('.actions-block_ctn',false,self.wrap_ctn),
     //other base objects
  }]]);
  return map.get('base_objects');
}
 
export const getExtendedObjects = async (base_dom)=>{
  const {vvp,location_base,body,main_elem,actions_block} = base_dom;
  const map = new Map([['ext_objects',{
    vvp,location_base,body,main_elem,actions_block,
    main_sub_ctn: await FT.elQuery('div.main_sub_ctn',false,self.main_elem),
    //option 1 (not recommended), is just to show that you can group objects
    action_items:{
      action_item_1: await FT.elQuery('.action-item-1',false,self.actions_block),
      action_item_2: await FT.elQuery('.action-item-2',false,self.actions_block),
      action_item_3: await FT.elQuery('.action-item-3',false,self.actions_block),
      action_item_4: await FT.elQuery('.action-item-4',false,self.actions_block),
    },
    //option 2 (if your actions_block isn't going to change)
    action_items: await FT.elQuery('.action-item',true,self.actions_block),
    //option 3 (if your actions_block has live events and is going to change)
    action_items: await FT.getClassHelper('action-item',self.actions_block), 
    // uses 'getElementsByClassName'
    //-----------------------------
    //other ext objects
  }]]);
  return map.get('ext_objects');
}

explanation:

I have created two functions here but for a reason.

The getBaseObjects have values that are available as soon as the website loads and will never give an undefined error:

//assets/scripts/index.js
 import {getBaseObjects} from './factory/dom_objects.js';
 import {getActions} from './modules/actions/get_actions.js';
 (async ()=>{
   const base_elems = await getBaseObjects();
   await getActions(base_elems);
   //sure, there are more functions and classes that I call here.
 })();

The steps here:

'getBaseObjects' is imported from 'dom_objects.js'.
this function is called and applied to a const 'base_elems'.
'getActions' is called from 'get_actions.js'.
the values of step2 are passed as an arg to the 'getActions(base_elems)' function.

From here, the objects{keys:values} of 'base_elems' are available in the getActions function.

The getExtendedObjects might have values that has not been created yet and could give an undefined error if so?

/** modules/actions/get_actions.js */
import {getExtendedObjects} from './../../factory/dom_objects.js';
import * as SA1 from './set_actions_1.js';
export const getActions = async(base_elems)=>{
 const ext_elems = await getExtendedObjects(base_elems);
 await setActions1(ext_elems);
}

The steps here:

'getExtendedObjects' is imported from 'dom_objects.js'.
SA1.setActions1 is imported from 'set_actions_1.js'.
function 'getActions' has been created together with a param 'base_elems'.
within that function, 'getExtendedObjects' is called and args 'base_elems' are applied to it. Then this function is applied to a const 'ext_elems'.
'SA1.setActions1' is called and has args 'ext_elems' applied to it.

From here all objects are available when called.

In a real situation.

In a real situation you only want the objects you need for a certain part of your webpage.

Let say:

'header' related objects for in the header.
'main' related objects for in the main.
'footer' related objects for in the footer.

The best way to do that is to create nested object groups in your Map().

const map = new Map([['ext_objects',{
  header_objects:{
    //header objects here
  },
  main_objects:{
    //main objects here
  },
  footer_objects:{
    //footer objects here
  },
})

Then in your 'getActions', you are doing this:

export const getActions = async(base_elems)=>{
  const ext_elems = await getExtendedObjects(base_elems);
  //note: this is called 'destructuring', for objects it is {} and for arrays []
  const {header_objects,main_objects,footer_objects} = ext_elems;
  await headerAction(header_objects);
  await mainAction(main_objects);
  await footerAction(foot_objects);
}

Now, each action get it's own objects.

Enough for now!
There is way more to say about it but I think this is enough for now!

Cheers!

How I load javascript?

Sun, 07 Sep 2025 09:56:58 +0000

Intro.

It's based on an old article that I've read a while back about bulletproof loading of webcomponents and written by Chris Go Make Things, someone who knows a lot more about webdesign as me.
The article was about loading loading js in the footer or in the head and using 'async/defer' .

His Approach.

His 'bulletproof' approach was by using document.readyState and DOMContentLoaded in his component classes.

My idea.

It might be bulletproof but complex and hard to maintain The way I do that is Simple, Bulletproof, Fast and hardly needs any maintenance.

How I load js then.

Step 1

First step is to have an index.js within the scripts folder and that contains the following:

//the imports on top. 
(async ()=>{
    /** 
      This is the place where all the js logic ends up but in the right order!
   */
})();

Step 2

Second step, within your index.html this:

<script type='module' src='./path/to/scripts/index.js'> </script>

Explanation

At the first step, the code has been placed in an async (Immediately Invoked Function Expression)! That iife, is the final place where all my js stuff ends up.

This way.

There is no need for using 'DOMContentLoaded' because the promise is 100% fulfilled before it's passed to my index.html. So what I get is a single substance that is complete and ready to use.

Actually, I rarely look at it because there is no need for!

Note!

Placing all js stuff in the right order within you index.js is important! Otherwise, things might give errors because of lacking dependenties.

More about IIFE at MDN(IIFE)

That's it!

What is Javascript and How It Powers Modern Websites

Tue, 12 Aug 2025 12:21:13 +0000

Picture this: You click a button on a webpage, and absolutely nothing happens .

There are no dropdown menus to explore, no fun animations to enjoy, and no validations on form submissions.

Basically, a lifeless piece of the internet.

That's what the web would look like without Javascript.

What is Javascript?

Javascript, often abbreviated as "JS", is the wacky genius of modern web development.

It's the magic wand that transforms static, boring HTML and CSS websites into lively, interactive, and engaging experiences that are hard to stop scrolling through.

Simply put, Javascript is a programming language that adds interactivity, animations, and dynamic features to websites. Whether it's a pop-up (), a dropdown menu (), or an animation that dances across your screen—Javascript is behind the curtain pulling the strings.

It's one of the holy trinity of web development:

HTML – gives structure
CSS – makes it pretty
Javascript – brings it to life ⚡

It's primarily a client-side language, event-driven, and runs directly in your browser without requiring installation. Magic? Nope—just good old scripting.

Technically:

It's interpreted (runs directly, no compiling)
It's dynamically typed (you don't have to declare types — more on this in a later article)
It uses prototypal inheritance instead of classical OOP (we'll unpack this later — no stress if that sounds unfamiliar!)
It runs using something called a Javascript engine inside your browser (don't worry, we'll explain what that means soon)

Oh, and it also works on the server side, but we'll dive into that later.

A Brief History of Javascript

Back in 1995, Brendan Eich developed Javascript in just 10 days. Yes, that's faster than most of us write a to-do list .

Originally called Mocha (mmm, coffee), then Live Script, it was finally rebranded as Javascript because, hey, Java was trendy at the time ☕.

Despite the misleading name, Java ≠ Javascript—that's like comparing ham to a hamster.

Fast-forward to today. Javascript has grown from a toy language into one of the web's core technologies, alongside HTML and CSS. It is now standardised under ECMAScript and powers everything on the web except your morning coffee .

✨ Core Features of Javascript

Javascript isn't just pretty code—it's flexible, feisty, and full of surprises.

Dynamically Typed – like, whatever
Event-Driven – reacts to user clicks, scrolls, and tantrums .
Fast – thanks to powerful browser engines ⚡
Versatile – works on browsers, servers, phones, fridges (not kidding !)
It Has Superpowers (via Ecosystem) - There's a massive library of tools and frameworks. React, Vue, D3, Express, Socket.io — you're never alone in Javascript land .

It's like that colleague who can debug complex code with ease, seamlessly integrate APIs, and always finds time to collaborate on projects.

How to Run Javascript in a Browser

Javascript is built right into all major browsers (Chrome, Firefox, Safari, Edge), like a secret snack drawer .

You can run Javascript in the browser in a few simple ways:

1. The Developer Console (For Quick Testing)

Open Chrome (or any browser).
Press F12 or right-click → Inspect.
The browser's developer tools will open up. Go to the Console Tab.

Type this, Hit Enter and watch the magic unfold ✨

console.log("Hello, World! ");

2. Add it directly to HTML

Use the <script> tag inside your HTML file - index.html:

<!DOCTYPE html>
<html>
    <body>
        <h1>Javascript Test</h1>

        <script>
            alert("Hello, World! ");
        </script>
    </body>
</html>

Open the index.html file in your favorite browser.

Boom! JS is live and will greet you like a chatty bot!.

How Javascript gets executed

Before getting our hands dirty with Javascript code, it is better to have a basic understanding of how Javascript gets executed. ☄️

Javascript alone is just syntax and logic; just like any other programming language, a compiler or an interpreter is needed to execute Javascript.

Well, there are still ongoing debates about whether Javascript is a compiled language or an interpreted language. It would be more accurate to say that Javascript in modern times is both compiled and interpreted, specifically through JIT (Just-In-Time) Compilation. More on this later.

To interact with web pages, forms, user events, or fetch data, it requires a host where this JIT Compiler (a Javascript engine) is embedded, much like the engine of a car—essential for driving the experience forward and making everything run smoothly.

What Is a Hosted Environment? ⚙️

A hosted environment — or, as seasoned developers call it, the runtime environment — is the setup provided by the host system, such as a web browser or Node.js, that embeds and interacts with the Javascript engine. This environment offers some juicy extras — such as fetch, document, and setTimeout — that the core Javascript language doesn't include.

Key Examples of Hosted Environments for Javascript

Web Browsers (Client-side Hosted Environment)
- DOM access: via document, window
- Browser APIs: like fetch(), alert(), console.log()
- Timers: setTimeout, setInterval. etc
Characteristics:
- Code runs in the context of a webpage.
- Controlled by the browser's security and event loop.
- Can access and manipulate the DOM.
Node.js (Server-side Hosted Environment)
- File System: via fs
- Network: http
- Other APIs: process, require, etc.
  
  Characteristics:
  - Code runs on a server, often with access to the filesystem and network.
  - No DOM or browser-specific features.
  - Includes an event-driven, non-blocking I/O model.
Other Examples:
- Deno: Secure TypeScript/Javascript runtime with modern APIs.
- Edge Functions / Serverless Platforms: Cloud-hosted Javascript executed in response to HTTP requests.

All major browsers have Javascript engines built into them (Chrome, Firefox, Safari, Edge)

Some well-known JS engines are,

Chrome → V8 Engine
Firefox → SpiderMonkey
Safari → JavaScriptCore

What happens when you load a web page?

So, how exactly does Javascript run when you load a web page?

Here's a simplified overview that doesn't require a PhD:

You load a page – Browser reads the HTML and finds a <script> tag.
The Javascript engine (like V8 in Chrome or SpiderMonkey in Firefox) kicks in.
The engine parses the code, converts it into something called bytecode or machine code.
It executes the code line by line, handling events, functions, loops, and more.
It interacts with the browser's APIs, including the Document Object Model (DOM) and the Browser Object Model (BOM), to enable engaging functionality on the screen.

The way everything unfolds within the browser and our Javascript engine is a fascinating process, which we will explore in more detail in a future article.

How to Add Javascript to a Website

There are three classic ways to add Javascript:

1. Inline Javascript

Directly inside HTML elements.

<button onclick="alert('You clicked!')">Click me</button>

✅ Easy to test. ❌ Not scalable or maintainable

2. Internal Scripts in Tags

In a <script> in the HTML.

<script>
    console.log("This runs when the page loads.");
</script>

Great for small scripts during development.

3. External Javascript Files

In a separate HTML file - index.html

<!-- In index.html - Withing <body> tag -->
<script src="script.js" defer></script>

Inside script.js:

// script.js
console.log("This is coming from an external file.");

Use defer to make sure the script runs after the HTML has loaded.

Best practice: Keeping your Javascript in a separate .js file helps to create cleaner and easier-to-manage code. No one likes spaghetti code.

⚡ How Javascript Powers Modern Websites

Javascript is the heartthrob of modern web design ❤️. Well, yeah, no second thoughts on that.

It's everywhere, like the air we breathe , and it's lightning-fast ⚡.

It transforms static pages into dynamic, interactive experiences. From simple interactions like button clicks to full-scale SPAs (Single-Page Applications) that feel like native apps, Javascript is the engine driving modern UX.

With powerful frameworks like React, Vue, and Svelte, and back-end tools like Node.js, Javascript isn't just hanging out in the browser anymore—it's running the whole show, front to back. There's literally a JS tool for everything.

If modern web design were a kitchen, HTML would be the recipe, CSS the presentation on the plate, and Javascript the chef, making the magic happen in real-time.

Client-side vs Server-side Javascript

Client-Side (Browser)

It runs on your Devices . It controls UI and responds to events.

Examples - React, Vue, Angular, etc

Server-Side (Node.js)

It runs on a remote server ️. It handles data, APIs and back-end logic.

Examples - Express, NestJS, etc

Core Javascript lays the foundation, and all the frameworks and libraries ️ build on top of it.

⚠️ Challenges and Limitations

It's not all sunshine and syntax.

Security – Cross-site scripting can be nasty ️
Browser quirks – Some browsers love being extra
Messy code – Write it clean or watch your app turn into spaghetti
Performance issues: Heavy scripts can slow your site down to turtle speed
Debugging hell: Sometimes finding that one missing semicolon feels like searching for a needle in a haystack

But hey, every hero has their flaws—Javascript's just keeping things spicy ️.

The Future of Javascript

Javascript isn't going anywhere except everywhere. It's growing wiser, faster, and maybe just a little weirder (in a good way). Here's what's cooking:

Web Assembly (Wasm): Javascript's hitting the gym. With Wasm, it's teaming up with languages like Rust and C++ to tackle tasks it was never built for, such as hardcore gaming, video editing, and heavy-duty number crunching — all in your browser. JS + Wasm = power couple of the web.

TypeScript: Javascript's awkward teen years are over. TypeScript is helping it adult properly, giving it types, better tooling, and fewer "undefined is not a function" moments.

AI and Smart Tooling: Development tools are becoming increasingly intelligent. Imagine writing code and your editor gently whispering, "Hey, you forgot a semicolon… again." AI-assisted coding (hello, Copilot and beyond) is making Javascript dev life faster, easier, and slightly creepier.

Framework Wars 2.0: React, Vue, Svelte, Solid, Qwik, and friends are all pushing the boundaries of fast, reactive UI. The future is about smarter rendering, less Javascript shipped to the browser, and fewer "why is my page load 3MB" moments.

⚙️ Server-side Evolution: Node.js, Deno, Bun — everyone's racing to make server-side Javascript faster, leaner, and cooler. Serverless functions and edge computing are making it possible to run Javascript anywhere... even on a fridge (probably).

Universal Everything: Full-stack Javascript is now the norm. Front-end, back-end, mobile apps, desktop apps, even IoT — all running Javascript. Pretty soon, your toaster might be sending JSON logs straight to your console ️—because even breakfast needs debugging .

Conclusion

Javascript isn't just code—it's the spark that makes the web come alive ⚡. Without it, your site is basically a mannequin in a shop window . But with Javascript? Boom—now you've got Iron Man flying across your screen .

So go ahead, crack open that browser console .

Build stuff ️. Break stuff . Fix stuff . Repeat .

That's the Javascript way .