How many steps in pure JavaScript?

Hello!
Actually, this article is not for pedestrians but sure that you are into. Let's move on!

First, let's think about a simple example which just displays some words and a button.

<div id="lorem">Lorem ipsum dolor sit amet,</div>
<button onclick="next()">Next</button>
<script>
    next = () => {
        document.getElementById(`lorem`).innerHTML = `consectetur adipiscing elit,`;
    }
</script>

JavaScript can handle even HTML elements. This means that a page in a website can be created only by JavaScript (except the header in HTML). The code is as follows.

<script>
    const div = document.createElement(`div`);
    div.textContent = `Lorem ipsum dolor sit amet,`;
    document.body.appendChild(div);

    const btn = document.createElement(`button`);
    btn.textContent = `Next`;
    document.body.appendChild(btn);

    btn.addEventListener(`click`, () => {
        div.innerHTML = `consectetur adipiscing elit,`;
    });
</script>

A div and a button elements consist of three parts. One is to create the elements, two write the texts and three to set them to the body element.
The disadvantage is clearly the big code. The advantage is probably nothing. There is however the meaning that the JavaScript code is rendered by JavaScript engine such as V8, SpiderMonkey and so on.

Next, let's think about centring the div and the button elements.

<div id="lorem" style="text-align: center;">Lorem ipsum dolor sit amet,</div>
<div style="text-align: center;">
    <button onclick="next()">Next</button>
</div>
<script>
    next = () => {
        document.getElementById(`lorem`).innerHTML = `consectetur adipiscing elit,`;
    }
</script>

Note that a button element doesn't move on to the centre by text-align.
You well-know that JavaScript can handle CSS styles. The code is as follows.

<script>
    const div = document.createElement(`div`);
    div.textContent = `Lorem ipsum dolor sit amet,`;
    div.setAttribute(`align`, `center`);
    document.body.appendChild(div);

    const btndiv = document.createElement(`div`);
    const btn = document.createElement(`button`);
    btn.textContent = `Next`;
    btndiv.setAttribute(`align`, `center`);
    btndiv.appendChild(btn);
    document.body.appendChild(btndiv);

    btn.addEventListener(`click`, () => {
        div.innerHTML = `consectetur adipiscing elit,`;
    });
</script>

The advantage may be that you can understand deeper the structure of HTML and JavaScript. Sometimes I use this method to write because I am a JSer. It may be good for practice for JavaScript.
Well, safe journey!

I almost forgot. Actually, the page "AT LAST" in my website is the case.

Blog

How many steps in pure JavaScript?

safejourney-art

Join Our Newsletter. No Spam, Only the good stuff.

Related