learn

JavaScript Guideline

This is a JavaScript guideline for learning. It focuses on clean, fast, and modern browser-side coding. All examples follow a direct, no-frills style.

This is based on web4now guideline.

File Extension

// Save JavaScript files with `.js` extension

Comment

// Single line comment

Variable

variable = value;

Table (Array)

table = ["item1", "item2"];

You can assign tables to variables or include variables inside tables.

table_in_var = table;

var_in_table = [var1, var2, var3];

Act / Action (Function)

Functions are written as actions. Sub-actions are attached as properties.

act = () => {};

Sub Act

sub.act = () => {};

Temporal (IIFE)

Temporal are temporary and run immediately this is also use to open system of js.

(() => {
  
})();

Loop

Use setInterval for repeated actions. This is part of the browser’s system and is reliable.

setInterval(() => {
  // repeated code
}, milliseconds);

Use setTimeout for delayed actions.

setTimeout(() => {
  // delayed code
}, milliseconds);

Reason (If / Else)

Use ? : for short conditionals.

condition ? doThis() : doThat();

Example:

el.exists
? (() => {
// if true
})()

: (() => {
// if false
)();

Replace

For replacing characters or rebuilding strings:

string.split('').join('');

insertAdjacentHTML

The browser already provides insertAdjacentHTML. You do not need .append() or .innerHTML += …. This is clean, safe, and fast.

Usage:

el.insertAdjacentHTML('beforeend', '<span>content</span>');

It supports four positions:

'beforebegin' — before the element itself
'afterbegin' — just inside the element, before its first child
'beforeend' — just inside the element, after its last child
'afterend' — after the element itself

Example:

el.insertAdjacentHTML('beforeend', '<section>New</section>');

Attributes

Use literal attributes to store state or meaning. There is no need to use data-* attributes — modern browsers support literal attributes and they are faster.

Example:

<section state="active"></section>

Do not overuse <div>. Use proper elements like <section>, <header>, <main>, <footer>, <button>, <input>.

Events

For clean and fast code, write events directly in HTML. This reduces overhead and improves performance.

<input oninput="myAction()" />
<main onmousedown="myAction()"></main>
<body onkeydown="myAction()"></body>

toggleAttribute

Use the browser’s built-in toggleAttribute() method.

el.toggleAttribute('state');

Summary

Do not use class keyword or .classList.
Do not use data-* attributes — use literal attributes.
Avoid unnecessary <div> elements — use meaningful HTML tags.
Use native insertAdjacentHTML() — no wrappers needed.
Write event handlers directly in HTML (oninput, onmousedown, onkeydown).
Use native toggleAttribute().
Use setInterval and setTimeout for timing.
Keep your code clean and minimal.

lol