DEV Community

safejourney-art
safejourney-art

Posted on

 

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.

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!