전체 글

[JavaScript_study] 자바스크립트 정의

JavaScript is lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many-non browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. => 가볍고 인터프리터 언어이며 필요할때 실시간으로 런타임시 컴파일을 하는 언어이다. 일급함수를 가진 프로그래밍 언어이다. 브라우저가 아닌 환경에서도 사용가능하다. ex) Node.js, Apache 등등 자바스크립트..

[JavaScript_study] ECMAScript란?

* 브라우저별 JavaScript엔진 - 인터넷 익스플로어 : Chakra - 크롬 : V8 - 사파리 : JavaScript Core - 파이어 폭스 : SpiderMonkey - 엣지 : V8 - Nodejs : V8 * 브라우저들이 JavaScript들을 이해하고 실행하기 위한 공통된 규격 (JavaScript 문법의 규격사항, 표준사항) : ECMAScript * Babel을 이용해서 버전에 상관없이 코드를 사용이 가능하다. WIKI ECMAScript: https://en.wikipedia.org/wiki/ECMAScript 버전별 문법 지원 현황 확인: https://kangax.github.io/compat-table/es5/

[JavaScript_study] DOM & EVENT 이벤트 버블링, 이벤트 위임

- 동작은 동일하지만 버블링에서 차이가 나는 경우 * 버블링 X focus blur mouseenter mouseleave * 버블링 o focusin focusout mouseover mouseout ​* event.stopPropagation() > 이벤트 버블링을 인위적으로 막아준다. > 버블링을 막을 일이 없어서 자주사용되지는 않는다. * 이벤트 위임 > 해당코드로 li에 link를 추가하게되면 클릭시 a tag안에 class="on"이 추가하게되어 이상하게 동작한다.. > 수정방법은 아래에 추가한 코드를 참고하도록하자. * 위의 코드에서 link까지 추가하는 방법 Red Blue Green Pink

[JavaScript_study] DOM & EVENT 이벤트 핸들러(Event Handler)

* 자주 사용하는 이벤트 - click, key 1. dblclick : 더블클릭시 실행 2. keyup : 키를 놓을 때 이벤트가 발생합니다. - input text에 사용되는 이벤트 1. focus : input창에 focus되었을때 2. blur : focus를 잃을때 - mouse 이벤트 1. mousemove : mouse가 움직일떄 마다 실행된다 clientX, clientY를 통해 마우스 포인트의 위치를 알 수 있다. - window resize 1. resize : 창의 크기가 변할때마다 실행된다. https://developer.mozilla.org/ko/docs/Web/Events

[JavaScript_study] DOM & EVENT 노드 생성, 추가, 복제, 삭제

1 2 3 * 글 중간에 append를 하고싶을경우 : Node.insertBefore(넣을값, 위치) * Node를 복제 : Node.cloneNode() // Node만 복사된다. > Node.cloneNode(true) // deep copy : Node안에 있는 text까지 전부 복사된다. * Node를 삭제 : Node.removeChild(지울값)

[JavaScript_study] DOM & EVENT 부모,자식,형제 노드

* DOM (Document Object Model) : 문서 객체 모델 Node.nodeType docs https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType const pList = document.querySelectorAll('p'); // NodeList가 출력된다. // 값이 저장된다. (예외도 있음) const pList = document.getElementsBytagName('p'); // HTMLCollection이 출력된다. // 실시간으로 값을 추가하면 값이 변환된다. * 부모 Node에 접근 const red = doucument.getElementById('red'); red.parentNode; // 부모 Node를 반..