Web Standard

HTML의 텍스트 노드(Text node) 는 다루기 까다롭다. 특히 동적으로 삽입되거나 생성될때 더욱 그렇다. 예시를 살펴보자. 하나의 글이 있습니다. p태그에 텍스트 노드를 하나 더 추가 하면 : let el = document.getElementById('el'); el.appendChild(document.createTextNode(' 글을 하나 더 추가 합니다.')); console.log(el.childNodes.length); // 2 글을 하나 더 추가 한 뒤, childNodes 의 개수를 로그로 찍어보면 2개라고 나온것에 주목하자. 이 노드들은 단일 문자열 이지만 동적으로 추가 되었기 때문에, 각각 분리된 노드로 취급된다. 경우에 따라서는 하나의 텍스트 노드로 다루는게 나은데, norm..

addEventListener() 는 웹 요소에 이벤트를 거는것으로 많이 사용된다. 대부분 이런 모습이다. element.addEventListener('click', doSomething, false); 1번째 인자는 이벤트명이다. 2번째 인자는 콜백 함수로, 이벤트가 발생되면 실행된다. 3번째 인자는 useCapture 라 불리는 불린값으로, 이벤트 버블링이나 캡쳐링을 사용할것인지 나타낸다. 위의 코드는 꽤 익숙하다. 특히 1, 2번째 인자는 모두 아는 내용일 것이다. 하지만 3번째 인자값을 다르게 줄 수 있다는 것은 많이 알려지지 않았다. 새로운 인자는 options 객체로, 이렇게 생겼다 : element.addEventListener('click', doSomething, { capture: f..

최신 크롬, 파이어폭스에서 사용 가능한 ES2019(ES10) 의 5가지 기능 Object.fromEntries( ), trimStart( ), trimEnd(), flat(), flatMap() 1. Object.fromEntries() 객체를 배열로 바꾸는 것은 ES2017 에서 Object.entries( ) 메소드로 가능하다. 이 메소드는 객체를 인자로 받아 [key, value] 형태의 배열로 반환한다. const obj = {one: 1, two: 2, three: 3}; console.log(Object.entries(obj)); // => [["one", 1], ["two", 2], ["three", 3]] 반대로 배열을 객체로 변환하려면 어떻게 해야 할까? 파이썬 같은 몇몇 언어는 dic..

이전 포스트 : Javascript로 CSS 제어하기(1) 에서 인라인 스타일(별로 유용하지 않음)과 계산된 스타일(유용하지만 너무 구체적일 수 있음)을 다루는 방법을 알아보았다. CSSStyleSheet 인터페이스 인라인 스타일에 국한되지 않고 값을 읽고 쓸 수 있는 보다 유용한 API는 CSSStylesSheet API 이다. 간단하게 문서의 스타일시트 정보에 접근할 수 있는 방법은 현재 document의 styleSheets 프로퍼티를 사용하면 된다. 이것이 CSSStyleSheet 인터페이스다. 아래 코드는 length 프로퍼티를 사용해서 현재 document가 몇개의 스타일시트를 가지는지 볼 수 있다. 인덱싱을 통해 접근하는 것도 가능하다. console 창에 로그를 찍어보면 사용 가능한 메소드..

CSSOM 이란? MDN을 참고해보자 : (https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically. CSS Object Model은 Javascript로 CSS를 제어할 수 있는 API 모음이다. DOM과 흡사하지만, HTML이 아닌 CSS를 위한 것이다. 사용자가 CSS를 ..

참고 : https://www.freecodecamp.org/ 객체 생성 기본과 접근자동차, 가게, 새 같은 모든 것들이 객체이다. 어떤 속성이 있는가? 자동차는 바퀴를 가지고 있고, 가게에서는 물건을 팔며, 새는 날개를 가지고 있다.이런 속성들이 객체를 만든다. 유사한 객체들은 동일한 속성을 공유하지만 그 값은 다양하다는 점에 주목하라. 예를 들어 모든 자동차에는 바퀴가 있지만, 바퀴 숫자는 차종마다 다른것 처럼 말이다. 자바스크립트의 객체는 실제 객체를 모델링하는데 사용되며 실제 객체와 마찬가지로 속성과 기능을 부여한다. 이런 컨셉으로 작성된 오리(duck) 객체를 살펴보자. duck 객체는 2개의 속성과 값을 가지고 있다. 이름은 Aflac, 다리의 수는 2 이다. 속성의 값을 얻기 위해서는 점(...

참고 : Learning Javascript 자바스크립트에서는 일반적인 방법 외에도, 함수를 어디서 어떻게 호출했느냐와 관계없이 this가 무엇인지 지정할 수 있다. callcall 메서드는 모든 함수에서 사용할 수 있으며, this를 특정 값으로 지정할 수 있다. 함수를 호출하면서 call을 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용할 수 있다. call의 첫 번째 매개변수는 this로 사용할 값이고, 매개변수가 더 있으면 그 매개변수는 호출하는 함수로 전달된다. applyapply는 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같다. call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply는 매개변수를 배열로 받는다. app..

ECMAScript 6가 나왔네요. 테스트해보니 크롬이랑 파이어폭스에서 잘 동작하네요.(최신버전)새로 나온 feature 에 대해서 공부도 할겸 하나씩 정리해볼 생각입니다. 참고사이트 :http://es6-features.org/https://github.com/lukehoban/es6features Template Strings (템플릿) 자바스크립트 자체적으로 템플릿을 지원합니다. 작업하기 훨씬 쉬워졌네요. 대박.변수 할당도 쉬워졌고 원래 \n 으로 처리했던 멀티라인도 지원합니다. 다만 따옴표(')가 아닌 ` 표시를 써야합니다.(키보드 1번 옆에 ~ 쉬프트 누르고) 12345678910111213141516 var name = '이브라', time = '오늘'; var str = `안녕하세요 ${na..

ECMAScript 6가 나왔네요. 테스트해보니 크롬이랑 파이어폭스에서 잘 동작하네요.(최신버전) 새로 나온 feature 에 대해서 공부도 할겸 하나씩 정리해볼 생각입니다. 참고사이트 :http://es6-features.org/https://github.com/lukehoban/es6features Class (클래스) 자바스크립트에서도 클래스를 본격적으로 사용할 수 있습니다. 객체지향 패턴을 쉽게 구현해보시죠. 클래스는 프로토타입 기반의 상속, 상위클래스 호출(super), 인스턴스, static method와 constructor를 지원합니다. 요거는 JAVA에 대해 빠삭한 분들이면 별 어려움 없이 사용하실 수 있겠네요! 123456789101112131415161718192021222324252..

focusin, focusout : 버블링 발생함focus, blur : 버블링 발생안함 부모가 div고 내부에 input 요소가 있을때 input 요소에 focusin 되면 부모 div에도 그 이벤트가 전달된다. input 요소에 focus 되면 부모 div에는 그 이벤트가 전달되지 않는다. 정리 1. 동일한 결과를 예상하고 싶을때 focusin과 focusout를 함께, focus와 blur를 함께 사용하자. 2. input에 포커스되거나 잃어버렸을때, 부모요소에서 리스너를 동작하고 싶다면 focusin과 focusout을 사용하자. 123 cs 12345678910111213141516 $('.parent').focusin(function(){ console.log('부모 focusin!');});..