8 Things I learnt from JavaScript First Time Developing Frontend

1. The DOM is the interface between JavaScript and HTML

DOM (Document Object Model) is the programming interface provided by web browsers that allows JavaScript to read and modify the HTML page dynamically.

• document → represents the web page.
• Object → represents HTML elements/tags.
• Model → represents how elements are structured and nested, essentially forming an HTML tree.

Finding elements

querySelector() locates an element using a CSS selector. It returns the first matching element.
closest() finds the nearest ancestor that matches a selector.

let input = document.querySelector("input[name='action']");
let row = btn.closest("tr");

Given a button, its containing form can also be accessed directly:

const form = btn.form;

This is useful when an action needs to modify or submit related form data.

2. JavaScript can dynamically generate HTML

Instead of defining every element statically in HTML, JavaScript can create UI elements dynamically based on application data.

const input = document.createElement("input");
input.value = attachment.description;

This is useful for dynamically generated forms, tables, buttons, inputs, and other UI components.

3. Event handlers connect user actions to application logic

Events provide the bridge between user interaction and JavaScript logic.
Common events include:

• click
• change
• input
• submit

For example:

input.addEventListener("change", updateData);

When the input changes, JavaScript executes updateData().

Passing the triggering element

An inline event handler can pass the actual HTML element to a function:

onchange="updateData(this)"

Then:

function updateData(input) {
    let row = input.closest("tr");

    if (!row || !row.data) {
        return;
    }

    row.style.backgroundColor = "#fc5e5e";
}

Here, this refers to the element that triggered the event.
This allows the function to locate related elements and modify their UI or associated data.

## 4. JavaScript looping over objects and collections

JavaScript provides different ways to iterate over data depending on whether you need object keys, values, or both.

Object.entries() — loop over object key-value pairs

Object.entries() converts an object into an array of [key, value] pairs.
It is conceptually similar to Python's dict.items().

const data = {
    name: "abc",
    category: "image"
};

for (const [key, value] of Object.entries(data)) {
    console.log(key, value);
}

Output:

name abc
category image

This is useful when you need both the property name and its value.

for...of — loop over values

for...of is useful when you only need the values in an iterable such as an array.

for (const categoryType of categoryTypes) {
    // process categoryType
}

Instead of:

for (let i = 0; i < categoryTypes.length; i++) {
    const categoryType = categoryTypes[i];
}

5. JavaScript can modify form values programmatically

JavaScript can directly modify the value of an HTML form field:

document.querySelector("input[name='action']").value = "XXX";

This allows the frontend to add or modify state before a form is submitted.
For example, the UI can set an action value based on which button the user clicked, allowing the backend to determine what operation should be performed.

6. DataTables provides an interactive JavaScript table

DataTables is a JavaScript library that transforms a static HTML <table> into an interactive data grid.
It provides features such as:

• Sorting
• Searching
• Pagination
• Dynamic row manipulation

Example:

let attachmentTable = $('#table').DataTable();

Attaching application data to a DataTables row

A row can be added dynamically, and its corresponding HTML <tr> DOM element can be retrieved using .node():

let row = table.row.add([
    col1_data,
    col2_data,
    col3_data,
    col4_data
]).draw(false).node();
row.data = data;

This creates a useful connection between:

Application data
      ↓
DataTables row
      ↓
HTML <tr> element

The custom row.data property can then be used to associate the underlying application object with the visible UI row.

8. Promise.all() runs asynchronous operations concurrently

When multiple requests are independent, they can be started concurrently and waited for together.

requests.push(fetch(...));

Then:

await Promise.all(requests);

Instead of:

await request1;
await request2;
await request3;

which executes them sequentially, Promise.all() allows the requests to run concurrently.
Conceptually:

Request 1 ────────────────┐
Request 2 ───────────┐   │
Request 3 ────────────┐  │
Request 4 ────────────┤  │
                      ↓  ↓
                 Promise.all()

This is similar to Python's:

await asyncio.gather(*tasks)

10. The bigger lesson: understand the data flow, not just the syntax

When reading unfamiliar or legacy JavaScript, focus on the data flow rather than trying to understand every line independently.
Ask these questions:

Where does the data come from?
        ↓
How is the data transformed?
        ↓
Where is the data stored?
        ↓
What UI changes?
        ↓
What API/backend action happens next?

This helps reconstruct the application's execution model.

For example:

User clicks button
      ↓
Event handler executes
      ↓
Find related DOM element
      ↓
Retrieve application data
      ↓
Modify data / UI
      ↓
Send request to backend
      ↓
Receive response
      ↓
Update UI

The important skill is therefore not memorising JavaScript syntax, but understanding how data moves between the DOM, JavaScript state, UI components, and the backend.