Make it simple and keep it simple

https://poiemaweb.com/js-array-is-not-arrray Array | PoiemaWeb 자바스크립트 배열은 배열이 아니다. poiemaweb.com 위 주소에서 흥미로운 것을 발견하였다. const arr = []; console.time('Array Performance Test'); for (let i = 0; i

Hoisting JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. Hoisting allows functions to be safely used in code before they are declared. Variable and class declarations are also hoisted, so they too can be referenced before they are declared. Note that doi..

Pointer events Much of today's web content assumes the user's pointing device will be a mouse. However, since many devices support other types of pointing input devices, such as pen/stylus and touch surfaces, extensions to the existing pointing device event models are needed. Pointer events address that need. Note: Pointer events are not available in Web Workers. Pointer events are DOM events th..

에는 미리 정의된 required, maxlength 등을 활용할 수 있다(내가 이 기능을 직접 구현하지 않아도 됨. JS에서). 유효성 검사[Validation]을 하기 위해서는 가 아닌 내부에 있어야 유효성 검사 기능을 비롯한 HTML의 도움을 받을 수 있다. ex) 유효성 검사를 직접 짠 예시 에게 required, maxlength 값을 주지 않고 오로지 .js 에서 구현한 것이다. input으로 들어오는 값을 저장하고, 이 저장한 값을 가지고 공백인가? 글자수 제한을 넘어서는가? 에 대해 작성한 예시. 을 로 바꾸고, required, maxlength 값을 주었다. 그리고 js에서 하던 유효성 검사 구문을 아에 지웠다. 내의 required 라는 Attribute 는 브라우저가 제공해주는 기..

Chrome, Firefox, Naver Whale 등의 확장 앱 설치가 가능한 브라우저를 이용해야 한다. adblock 을 검색하여 아무거나 설치한다. 나는 웨일을 쓰고 있는데, 확장 앱이 몇 개 없어서 그냥 다운로드 수 가장 많은 이것을 설치했다. 위에 보면 다운로드 수는 62,641 인데 아래에 글로벌 연결 사용자는 104,888명이라고 하니까 상당히 뻥튀기 된 것 같다. 심지어 실 사용자 수는 51,202 라고 카운트 되는데.. 뭐, 나만 편하면 상관없겠지. https://www.youtube.com/##.ytp-scroll-min.ytp-pause-overlay 추가하면 끝

Document Object Model (DOM) The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language. Document Object Model (DOM) - Web APIs | MDN The..

공백으로 구분 지어진 클래스 이름이 여러가지가 있을 때, classList 는 className 을 대체하는 편안한 방법이다. 그리고 이 classList 는 DOMTokenList 컬렉션을 반환하는 읽기 전용 프로퍼티이다. 이 점을 활용해 여러가지를 할 수 있다. 클래스 이름을 포함하고 있는지 contains, 클래스 이름을 추가할 때 add, 해당 클래스 이름을 제거할 때 remove, 혹은 해당 클래스 이름이 있으면 이 이름을 제거하고, 없으면 추가하는 간편한 함수 toggle 까지. Element.classList The Element.classList is a read-only property that returns a live DOMTokenList collection of the class ..

CSS in JavaScript. JavaScript 내에서 CSS 스타일을 다루던 것을 CSS로 넘기면서, JavaScript 에서는 어떻게 이를 사용하게 되는지 공부하는 내용이다.

Step 1. Find the element. Step 2. Listen for the event. Step 3. React that event. (React means showing something, changing color, printing log, etc.) index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Momentum App Click me! Colored by Color Scripter cs app.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 const h1 = document.querySelector(".hello:first-child h1"); console.log(h..

I want to know how to handle 'Events on Window' by JavaScript. Search "Window mdn" on google web site. I can see one web site, Window mdn (Web API). https://developer.mozilla.org/ko/docs/Web/API/Window Window - Web API | MDN Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. developer.mozilla.org * MDN Web Docs (previously known as MDN — the Mozilla Developer Network) is an evolving learning platform for Web te..