Javascript grammar

[Example 1]

<div id="box" style="border: 1px solid #000;">
    <p>
        pageX : <span id="x"></span>
    </p>
    <p>
        pageY : <span id="y"></span>
    </p>
</div>

<script>
window.onload = function (){
    var box = document.getElementById("box");
    var pageX = document.getElementById("x");
    var pageY = document.getElementById("y");

    box.addEventListener("mousemove", function(){
        pageX.innerText = event.pageX;
        pageY.innerText = event.pageY;
    });
}
</script>

[Example 1 : Result]

pageX :
pageY :

❑ window.onload = function() {} : The code for executing after all loading has finished. If it is used more than once, an error can occur without an error message.

❑ document.getElementById("[ID]") : Select an element using the [ID].

❑ [Element].addEventListener("mousemove", function() {}) : Register an [Element]'s event to event listener.

❑ event.pageX : The x-coordinate of the mouse.

❑ event.pageY : The y-coordinate of the mouse.

❑ [Element].innerText = [Plain text] : Insert a [Plain text] to the [Element].

❑ [Element].innerHTML = [HTML text] : Insert a [HTML text] to the [Element].

[Example 2]

<p class="pClass">
    <b><span class="ft">Test1</span></b>
</p>
<p class="pClass">
    <b><span class="ft">Test2</span></b>
</p>

<input id="btn1" type="button" value="one"/>
<input id="btn2" type="button" value="two"/>
<input id="btn3" type="button" value="clear"/>

<br/><br/>
[Result]
<div id="rst"></div>


<script>
    document.querySelector("#btn1").addEventListener("click", function(){
        var spanFirst = document.querySelector("b span.ft");

        spanFirst.style.color="#FF0000";
        document.querySelector("#rst").innerHTML += spanFirst.style.color + "<br/>";
        spanFirst.setAttribute("onclick", "javascript:alert('One clicked!!')");
        var tmpStr = spanFirst.getAttribute("onclick");
        document.querySelector("#rst").innerHTML += tmpStr + "(Type : "+ typeof(tmpStr) + ")" + "<br/>";
    });

    document.querySelector("#btn2").addEventListener("click", function(){
        var pAll = document.querySelectorAll(".pClass");

        pAll[1].style.color="#00FF00";
        document.querySelector("#rst").innerHTML += pAll[1].style.color + "<br/>";
        pAll[1].setAttribute("onclick", "javascript:alert('Two clicked!!')");
        var tmpStr = pAll[1].getAttribute("onclick");
        document.querySelector("#rst").innerHTML += tmpStr + "(Type : "+ typeof(tmpStr) + ")" + "<br/>";
    });

    document.querySelector("#btn3").addEventListener("click", function(){
        var spanFirst = document.querySelector("b span.ft");
        spanFirst.style.color="";
        spanFirst.setAttribute("onclick", "");

        var pAll = document.querySelectorAll(".pClass");
        pAll[1].style.color="";
        pAll[1].setAttribute("onclick", "");
        document.querySelector("#rst").innerHTML = "";
    });
</script>

[Example 2 : Result]

Test1

Test2

[Result]

❑ document.querySelector("b span.ft") : Select one of the children of the "b" element that is a "span" element and has the attribute class "ft".

❑ document.querySelector("#rst") : Select the element that has the attribute id is "rst".

❑ document.querySelectorAll(".pClass") : Select all elements that have the attribute class is "pClass"(Type : NodeList).

❑ [Element].style.color="#FF0000" : Set the [Element] to a red color style.

❑ [Element].innerHTML += "[HTML code]" : Append the [HTML code] to [Element].

❑ [Element].setAttribute("onclick", "javascript:alert('One clicked!!')") : Set the [Element]'s "onclick" attribute to the javascript code.

❑ [Element].getAttribute("onclick") : Return the value of the [Element]'s "onclick" attribute.

❑ typeof([Variable]) : Return [Variable]'s data format such as string, integer etc.

❑ await [Promise] : Return the value of the disaggregated [Promise] object.

❑ setInterval(function() {}, 2000): Execute the anonymous function every 2 seconds.

❑ window.setTimeout(function() {}, 2000) : Execute the anonymous function after 2 seconds.

❑ Math.random() : Return the value of 0<=x<1.

❑ Math.floor(Math.random()*3+1) : Return the value of 1<=x<=3.

❑ let css1 = document.createElement('link');
css1.href = "[URL]";
css1.rel = "stylesheet";
css1.onload = [Function name to execute after the load is completed];
document.querySelector('head').appendChild(css1);
: Import an external css file.