전체 글
-
[12/13] 이벤트 등록Javascript 2017. 12. 14. 09:07
[출처] 생활코딩 http://opentutorials.org/module/904/6760 inline _ 이벤트가 발생한 대상을 필요로 하는 경우 this를 통해서 참조 (이벤트가 동작하고 있는 Element를 가리킴) ex) _ 장점 : 태그에 직접기술되어 찾기 쉽다 _ 단점 : javascript가 html(정보)에 혼재되어 있기 때문에 관리가 어렵다. 속성안에 작성하기 때문에 복잡한 코드 작성이 어렵다 property listener _ 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다 _ 현재 발생한 이벤트에 대한 다양한 정보를 얻을 수 있다 _ event.target : 이벤트 발생시점에서 이벤트 발생 지점을 확인 _ IE8이하 버전에서는 event 객체를 핸들러 객체의 인자가..
-
[165번째 책] 철학하라 - 황광우1000권 독서 2017. 12. 9. 23:13
전자책으로 이 책을 다읽고 느낀 생각을 한문장으로하면, “황광우작가는 괴물이다.” 로 표현하고싶다. 이 책은 요즘시대에 반드시 읽어야한다는 고전 40권을 소개해주면서 주제들을 요약한 한 권으로 읽는 고전입문 지도서이다. 하지만 이 책의 묘미는 주제소개로 끝나지않고 책이 반영한 시대와 작가의 환경등 고전의 컨텍스트를 전달하는데 많은 노력을 기울였다. 또한 거기에 황광우 작가의 통찰까지 더해져 고전의 간편들을 들여다 본다는 느낌보다는 역사의 흐름속에 시대를 반영한 고전을 통해 인류의 사고발전과 역사를 한 맥으로 뚫어내는 느낌이다. 인류사의 숲을 나무들을 통해 하나하나 짚어간다는 표현이 더 적절하다. 고전을 왜 읽어야하는지 그리고 고전을 읽기전에 어떤 시대적 상황과 작가의 환경이 해당 고전을 세상에 내놓게..
-
[12/08] 문서의 기하학적 특성, 뷰포트, 스크롤 제어, 스크린의 크기Javascript 2017. 12. 8. 09:24
[출처] 생활코딩 http://opentutorials.org/course/1 엘리먼트의 위치와 크기 getBoundingClientRect() : ClientRect 객체를 반환 top - 문서의 최상단으로부터 거리 left - 문서의 시작점에서 객체가 시작되는 왼쪽 지점까지 거리 height - 객체의 높이 width - 객체의 폭 right - 문서의 시작점에서 객체가 끝나는 오른쪽지점까지 offsetParent() : Element의 top, left 측정기준을 확인 -CSS position 값이 static인 table 과 같은 엘리먼트가 부모인경우 offsetParent는 부모 객체가 된다. 뷰포트 setInterval(function(){}, time); -function을 time 간격으로..
-
[12/07] jQuery Node 제어 API, Document / Text 객체1000권 독서 2017. 12. 7. 09:32
[출처]http://opentutorials.org/module/904/6740 Node 제거 API $().remove() : 선택된 엘리먼트 제거 $().empty() : 선택된 엘리먼트가 갖고있는텍스트 노드 제거 Node 바꾸기 API $().replaceAll : 제어 대상을 인자로 전달 ex) $('blabla').replaceAll('#target1'); $().replaceWith : 제어 대상을 먼저 지정 ex) $('#target2').replaceWith('blabla'); Node 복사 API $(target).clone() : 제어 대상을 복사 ex) $(target).clone().replaceAll('#target1'); ex) $(target1).replaceWith($(tar..
-
[12/06] Node 객체Javascript 2017. 12. 6. 21:03
[출처] 생활코딩 http://opentutorials.org/module/904/6700 Node 객체 - DOM의 시조, DOM의 최상위 객체 - HTML 코드를 객체화 시킨 것이 DOM - Node 객체는 객체들의 관계성을 정의 관계 : 엘리먼트 요소들이 어떻게 연결되어있는지는 Node객체를 통해 확인가능 - Node.childNodes - Node.firstChild - Node.lastCHild - Node.nextSibling - Node.previousSibling - Node.contains() 자식관리 - Node.appendChild() - Node.removeChild() Node 관계 API 프로퍼티 - Element.firstChild : 첫번째 자식 Element - Elemen..
-
[12/06] 조회/속성 Element, jQuery 속성 제어 APIJavascript 2017. 12. 6. 09:30
Element 조회 API document.getElements vs element.getElements - document : 문서 전체 내용중에서 조회 - element : 특정 객체의 하위 엘리먼트에서 조회 Element 속성 API - element.getAttribute(target) : 속성값 가져오기 - element.setAttribute(target, value) : 속성값 추가/변경하기 - element.removeAttribute(target) : 속성 삭제하기 - element.hasAttribute(target) : 속성 존재여부 확인 속성 API 보충 - 속성과 Property의 차이 target.setAttribute('class', 'important'); // 속성방식 ta..
-
[12/05] jQuery 객체 & Element 객체Javascript 2017. 12. 5. 20:38
[출처] 생활코딩 http://opentutorials.org/module/904 jQuery 객체 - $() 함수를 실행한 결과의 객체 - jQuery가 선택한 Element를 제어 $.css(arg1, agr2) - arg1만 입력하면 css 속성값을 가져옴 - arg2까지 입력하면 css 속성을 arg2로 수정 .constructor - HTML Element 객체의 타입을 확인 $('arg1') - arg1 - css 선택자 : CSS 태그에 해당하는 jQuery Object 반환 - arg1 - id 선택자 : ID를 갖는 해당하는 jQuery Object 반환 $().map(function(index, elem){}); - jquery로 선택한 Element를 순회하면서 function을 호출..