Javascript on Mr.W's Blog

Size measurement parameters -- client, offset and scroll

Mon, 08 Jan 2024 00:00:00 +0000

Prerequisite: You need to familiar with the box model

Understanding the differences between clientHeight/clientLeft, offsetHeight/offsetLeft, and scrollTop/scrollLeft in the context of the Document Object Model (DOM) is crucial for effective web design and development. These properties are used to measure different aspects of elements’ size and position in relation to their content, padding, border, and scroll position.

Client

clientHeight and clientLeft will give you the height and width of an element including padding. However, client will not calculate the size of the borders and margins.
clientHeight/clientLeft are useful for understanding the visible part of an element, particularly for styling purposes or when dealing with scrolling.
It’s a read-only property, which means you can not modify the params and generate action.

Offset

Similar with client, offsetHeight, offsetLeft will output the element height and width but including verical and horizontal border, in pixel.
offsetHeight/offsetLeft are often used when you need to know the actual size of the element including borders and its position in the layout.
Same as client, offsetHeight/offsetLeft is a read only param.

Scroll Event

Sun, 07 Jan 2024 00:00:00 +0000

The scroll event in JavaScript is an important event that is triggered whenever an element or the window is scrolled. This event is particularly useful for creating dynamic effects based on the scroll position, such as parallax animations, infinite scrolling, or showing/hiding navigation bars. Here’s an overview of the scroll event:

1. How it Works:

The scroll event fires when the document view or an element has been scrolled. It applies to any scrollable element, including the window.

Event flow , capture, bubble and how to stop bubbling

Sat, 30 Dec 2023 00:00:00 +0000

Event Bubbling in JavaScript

Event capturing is an event handling mechanism in JavaScript, contrasting with event bubbling. During the capturing phase, an event starts at the root node (usually the document object) and propagates down the DOM tree to the target element, where the event actually took place.

The process of event capturing is as follows:

Capturing Phase: When an event occurs, it is first captured at the topmost node of the DOM tree, then propagates downwards, level by level, until it reaches the target element. During this phase, only those event listeners set to use capturing mode are triggered.

Timer

Tue, 26 Dec 2023 00:00:00 +0000

Javascript timer function can make some code be excueted repeatedly over time.

Syntax:

// open
setInterval(function,interaval-time)
// close
let t = setInterval(function,interaval-time)
clearInterval(t)

t: variable

interaval-time unit: ms

Example:

<body>
    <button class="btn" disabled>aggree(5)</button>
    <script>
        const btn = document.querySelector('.btn')
        let i = 5
        let timer = setInterval(function(){
            i--
            btn.innerHTML = `aggree(${i})`
            if (i === 0){
                clearInterval(timer)
                btn.disabled = false
                btn.innerHTML = 'aggree'
            }
        },1000)
        
    </script>
</body>

Control CSS using classList

Mon, 25 Dec 2023 00:00:00 +0000

ClassList can help reduce the redundancy of .style method and resolve the ClassName overwrite risk.

Sytax:

// add a class
element.classList.add('className')
// delete a class 
element.classList.remove('className')
// switch a class
element.classList.toggle('className')

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            color: #333;
        }
        .active {
            color: red;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">text</div>
    <script>
        //get element
        const box = document.querySelector('.box')
        //change stylew by adding class
        box.classList.add('active')
        // delete class
        box.classList.remove('active')
        //switch class
        box.classList.toggle('active')
    </script>
</body>
</html>

keep in mind that the running logic of toggle is run the detect if the class existed in the element, if yes, delete, if no, add up

DOM -- Document Object Model

Mon, 25 Dec 2023 00:00:00 +0000

DOM query

Slect first match element

document.querySelector('css selector')

Slect all match element

document.querySelectorAll('css selector')

return is fake array which no work with push and pop method

Modification using DOM

modify text content

<body>
    <div class="box">content</div>
    <script>
        const box = document.querySelector('.box')
        box.innerText = 'content changed'
        box.innerHTML =  '<strong>content changed</strong>'
    </script>
</body>

innerText method will not parse tags, exp: <strong>hello</strong> will return <strong>hello</strong> rather hello