Emulisy's blog

The Intersection Observer LiteralCreating a new Intersection Observer using constructor: 1const observer = new IntersectionObserver(callback, options); callback: The function to be called whenever the target enter/leave the intersection area. options: An object that controls the condition of triggering the callback function. options ObjectThe option object looks like this: 12345const option = { root: null, rootMargin: "0px", thereshold: [0, 0.1]} root:...

The DOM APIThe Document Object Model (DOM) is a tree-like, in-memory representation of your HTML document.When the browser parses an HTML file, it creates objects that form a hierarchical tree structure where: Each HTML element becomes a node. Text inside elements becomes text nodes. The relationships between elements (nested tags) form parent-child links. So the key fact is that in DOM, EVERYTHING is about nodes. DOM NodeBehind the scenes, each DOM node is a complex object...

一、全局滚动属性（window 级别）这些属性用于 获取或控制整个页面的滚动状态。 属性/方法 作用 示例 window.scrollX 页面水平滚动距离（单位 px） console.log(scrollX) window.scrollY 页面垂直滚动距离（单位 px） console.log(scrollY) window.pageXOffset 同 scrollX（旧写法） ✅ 向后兼容 window.pageYOffset 同 scrollY（旧写法） ✅ 向后兼容 window.scrollTo(x, y) 跳转到页面指定位置 window.scrollTo(0, 0) window.scrollBy(x, y) 相对当前位置滚动 window.scrollBy(0, 500) window.scroll() 等价于 scrollTo()（支持对象参数） window.scroll({ top: 500, behavior: 'smooth'...

Flexbox display: flex;The main axis and the cross axisThere are two invisible axis that control the flexbox. The main axis that goes through the center of the box along the flex direction The cross axis that is perpendicular to the main axis flex-direction: row; defines the direction of the main axis, it can be set to row or column We use justify-content to control the main axis, and align-items for the cross axis. For the justify-content, the values can be: flex-start:...

Grid LayoutSyntax Grid line: the grid line is the border of each cell, the first grid line is the left border of the first column, same applied to rows. Grid Container123display: grid;grid-template-columns: repeat(3, 100px) ;grid-template-rows: repeat(2, 200px); This creates a grid with 3 columns and 2 rows, each column is 100px wide and each row is 200px high. However, instead of using repeat(), we can also define the size manually. 12grid-template-columns: 100px, 100px, 100px...

Difference between == and ===In a word, == tries to covert the two values to the same type, and then compare its value. 1"10" == 10; //true But === requires the two values to have the same value and the same type: 12"10" === 10; //false"10" === "10"; //true == is not so safe to use, so we usually use === or !==. How to determine if a value is true or falseIn JS, whenever we need to transfer a value into a boolean, the value will be determined as...

ES6 Spread and Rest (...)The three dots ... in JavaScript can represent two different concepts: Spread Operator – expands data Rest Pattern / Rest Parameters – gathers data They look identical but behave in opposite directions depending on where they’re used. Concept Overview Feature Purpose Context Spread (...) Expands an iterable into individual elements When passing or copying data Rest (...) Collects multiple elements into one array/object When receiving or...

Javascript overview High-level: As a high level language, unlike C language, js arranges garbage collection and memory allocation for us. Just-in-time compiled: Multi-paradigm: JS supports procedural, object-oriented and functional programming, unlike C which does not support OOP(object-oriented programming), making JS more flexible and versatile. Single threaded with non-blocking event loop: enables concurrency, which is handling multiple tasks at the same time. Compiled language vs...

CSS Fundamentals (1) - CSS Selectors and Cascading Basic SelectorsType(Element) SelectorIn html we have tags for each element, type selector selects all the elements with the specific tag: 123p { color: #00c4b6; } Class SelectorIn html, we can add class attribute to every element, each element can have multiple classes. The class selector can select elements that have the same class attribute. 123.className { color: #0d0d0d;} But sometimes we want to style...

HTML Fundamentals (2)Structuring HTMLThere are many layout HTML elements that helps to structure the file in an ordered manner. Specifically speaking, the most commonly seen ones are: <main> is for content unique to this page. Use <main> only once per page, and put it directly inside . Ideally this shouldn’t be nested within other elements. <article> encloses a block of related content that makes sense on its own without the rest of the page (for example, a single blog...