Summary of “Scrolling and operators”

The Browser Window and Scrolling

The browser window (or tab) is accessed by JavaScript using the window object.

The onscroll Event Handler

In order to track scrolling, we use the onscroll event handler. It is activated every time a page is scrolled, even if the page is moved by just one pixel.

window.onscroll = function () {
  console.log('The page is scrolled');
}

The pageYOffset Property

The pageYOffset property of the browser window contains the number of pixels that the user has scrolled in the vertical direction:

// If we are at the very top of the page
console.log(window.pageYOffset); // Outputs: 0

// Scroll down the page by 200px
console.log(window.pageYOffset); // Outputs: 200

The horizontal scroll value is stored in the pageXOffset property.

The scrollTo Method

We can use the scrollTo method to scroll the page:

window.scrollTo(X coodinate, Y coordinate);

The X coordinate indicates where we need to scroll the page to in the horizontal direction, and the Y coordinate specifies the value for the vertical direction. When the browser executes an instruction, the indicated point is displayed in the upper left corner of the window. The coordinates are set in pixels, so there is no need to specify the units of measurement:

// Scrolls the page by 100px to the right and by 50px down
window.scrollTo(100, 50);

If it is not possible to scroll the page to the specified coordinates, the browser will scroll the page as far as it can, but it will not enlarge the page. If the entire page is able to fit in the window and there is no scrollbar, then the browser will ignore this instruction.

The onchange Event Handler

The onchange event handler is triggered when the user selects a new value from the dropdown list.

// Find the dropdown list
let select = document.querySelector('select');

// Add the event handler
select.onchange = function () {

  // Output the new value to the console
  console.log(select.value);
};

The onchange event handler can be used with various elements. For example, it is triggered when the user toggles the checkbox or the radio buttons.

Strict Equality Operator

To check whether the two values are equal, we use the strict equality operator. It is indicated by three equal signs:

'a' === 'a'; // Result: true
'a' === 'b'; // Result: false

The strict equality operator compares two values and returns true if they are equal and false if they are not equal. The values that the operator checks for are called operands.

The Strict Inequality Operator

The strict inequality operator performs the exact opposite function of the strict equality operator. It compares two values and returns false if the values are equal and true if they are not equal.

The strict inequality operator is indicated by an exclamation mark and two equal signs:

'a' !== 'a'; // Result: false
'a' !== 'b'; // Result: true

JavaScript also contains the non-strict equality operator == and the inequality operator !=. We will talk about them in one of the following chapters.

The Logical Operator AND

In order to combine the two parts of the condition, we use the logical operator AND. It is indicated using a double ampersand &&.

if (article.dataset.category !== filter.value && filter.value !== 'all') {
  article.classList.add('hidden');
}

The logical operator AND returns true only if both parts of the condition return true. If at least one of the parts returns false, then the condition as a whole will also be considered to be false:

true && true;   // Result: true
true && false;  // Result: false
false && true;  // Result: false
false && false; // Result: false

The Logical Operator OR

The logical operator OR is indicated by two vertical bars and returns true if at least one of the operands returns true:

true || true;   // Result: true
true || false;  // Result: true
false || true;  // Result: true
false || false; // Result: false