0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<h2>The Browser Window and Scrolling</h2>
1
<h2>The Browser Window and Scrolling</h2>
2
<p>The browser window (or tab) is accessed by JavaScript using the window object.</p>
2
<p>The browser window (or tab) is accessed by JavaScript using the window object.</p>
3
<h3>The onscroll Event Handler</h3>
3
<h3>The onscroll Event Handler</h3>
4
<p>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.</p>
4
<p>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.</p>
5
window.onscroll = function () { console.log('The page is scrolled'); }<h3>The pageYOffset Property</h3>
5
window.onscroll = function () { console.log('The page is scrolled'); }<h3>The pageYOffset Property</h3>
6
<p>The pageYOffset property of the browser window contains the number of pixels that the user has scrolled in the vertical direction:</p>
6
<p>The pageYOffset property of the browser window contains the number of pixels that the user has scrolled in the vertical direction:</p>
7
// 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<p>The horizontal scroll value is stored in the pageXOffset property.</p>
7
// 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<p>The horizontal scroll value is stored in the pageXOffset property.</p>
8
<h3>The scrollTo Method</h3>
8
<h3>The scrollTo Method</h3>
9
<p>We can use the scrollTo method to scroll the page:</p>
9
<p>We can use the scrollTo method to scroll the page:</p>
10
window.scrollTo(X coodinate, Y coordinate);<p>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:</p>
10
window.scrollTo(X coodinate, Y coordinate);<p>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:</p>
11
// Scrolls the page by 100px to the right and by 50px down window.scrollTo(100, 50);<p>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.</p>
11
// Scrolls the page by 100px to the right and by 50px down window.scrollTo(100, 50);<p>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.</p>
12
<h2>The onchange Event Handler</h2>
12
<h2>The onchange Event Handler</h2>
13
<p>The onchange event handler is triggered when the user selects a new value from the dropdown list.</p>
13
<p>The onchange event handler is triggered when the user selects a new value from the dropdown list.</p>
14
// 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); };<p>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.</p>
14
// 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); };<p>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.</p>
15
<h2>Strict Equality Operator</h2>
15
<h2>Strict Equality Operator</h2>
16
<p>To check whether the two values are equal, we use the strict equality operator. It is indicated by three equal signs:</p>
16
<p>To check whether the two values are equal, we use the strict equality operator. It is indicated by three equal signs:</p>
17
'a' === 'a'; // Result: true 'a' === 'b'; // Result: false<p>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<i>operands</i>.</p>
17
'a' === 'a'; // Result: true 'a' === 'b'; // Result: false<p>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<i>operands</i>.</p>
18
<h2>The Strict Inequality Operator</h2>
18
<h2>The Strict Inequality Operator</h2>
19
<p>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.</p>
19
<p>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.</p>
20
<p>The strict inequality operator is indicated by an exclamation mark and two equal signs:</p>
20
<p>The strict inequality operator is indicated by an exclamation mark and two equal signs:</p>
21
'a' !== 'a'; // Result: false 'a' !== 'b'; // Result: true<p>JavaScript also contains the<i>non-strict</i>equality operator == and the inequality operator !=. We will talk about them in one of the<a>following chapters</a>.</p>
21
'a' !== 'a'; // Result: false 'a' !== 'b'; // Result: true<p>JavaScript also contains the<i>non-strict</i>equality operator == and the inequality operator !=. We will talk about them in one of the<a>following chapters</a>.</p>
22
<h2>The Logical Operator AND</h2>
22
<h2>The Logical Operator AND</h2>
23
<p>In order to combine the two parts of the condition, we use the logical operator AND. It is indicated using a double ampersand &&.</p>
23
<p>In order to combine the two parts of the condition, we use the logical operator AND. It is indicated using a double ampersand &&.</p>
24
if (article.dataset.category !== filter.value && filter.value !== 'all') { article.classList.add('hidden'); }<p>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:</p>
24
if (article.dataset.category !== filter.value && filter.value !== 'all') { article.classList.add('hidden'); }<p>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:</p>
25
true && true; // Result: true true && false; // Result: false false && true; // Result: false false && false; // Result: false<h2>The Logical Operator OR</h2>
25
true && true; // Result: true true && false; // Result: false false && true; // Result: false false && false; // Result: false<h2>The Logical Operator OR</h2>
26
<p>The logical operator OR is indicated by two vertical bars and returns true if at least one of the operands returns true:</p>
26
<p>The logical operator OR is indicated by two vertical bars and returns true if at least one of the operands returns true:</p>
27
true || true; // Result: true true || false; // Result: true false || true; // Result: true false || false; // Result: false<a>Continue</a>
27
true || true; // Result: true true || false; // Result: true false || true; // Result: true false || false; // Result: false<a>Continue</a>