본문 바로가기
반응형

프로그래밍/JAVASCRIPT10

[JAVASCRIPT WEB] jQuery 이벤트( on API 사용법, late binding, 다중 바인딩, 이벤트 제거 ) / 네트워크 통신( Ajax, JSON ) / jQuery Ajax jQuery 이벤트( on API 사용법 / late binding / 다중 바인딩 / 이벤트 제거 ) / 네트워크 통신( Ajax / JSON / jQuery Ajax )에 대해서 정리한다. jQuery 이벤트 - javascript를 이용해서 직접 이벤트 프로그래밍을 하는 것과 jQuery를 이용했을 때 똑같은 기능을 하더라도 소스 코드의 양이 차이가 난다. ( jQuery를 이용하면 크로스 브라우징 이슈를 자동으로 해결 해주는 장점도 있다 ) on API 사용법 - .on( events [, selector ], [data], hadler(eventObject) ) 형식으로 사용한다. ( []가 되있는 인자는 생략 가능한 인자이다 ) * events: 등록하고자 하는 이벤트 타입을 지정( 예: "c.. 2017. 10. 9.
[JAVASCRIPT WEB] 이벤트 전파( 버블링, 캡처링 ) / 기본동작의 취소 / 이벤트 타입 이벤트 전파( 버블링, 캡처링 ) / 기본동작의 취소 / 이벤트 타입에 대해서 정리한다. 이벤트 전파( 버블링과 캡처링 ) - 문서 전체적으로 엘리먼트마다 이벤트가 설정 되어있고 이 이벤트가 어떻게 실행 되는지의 내용을 이벤트 전파라고 한다. - 버블링은 이벤트가 자식 엘리먼트부터 부모 엘리먼트 순서로 실행이 되는걸 말한다. - 캡처링은 반대로 부모 엘리먼트부터 자식 엘리먼트 순서로 실행이 되는걸 말한다. - 서로가 반대되는 개념이다. * addEventListener()를 이용할때 세번째 인자는 capturing 사용에 대한 인자이다. ( 값을 true로 주게되면 capturing 방식으로 동작하고 false로 주거나 주지 않게 되면 bubbling 방식으로 동작한다 ) * event.eventPhas.. 2017. 10. 9.
[JAVASCRIPT WEB] 문서의 기하학적 특성( 요소의 크기와 위치, viewport, 스크롤 제어, 스크린의 크기 ), 이벤트( 이벤트 등록방법<inline, 프로퍼티 리스너, addEventListener> ) 문서의 기하학적 특성( 요소의 크기와 위치, viewport, 스크롤 제어, 스크린의 크기 ), 이벤트( 이벤트 등록방법 ) 문서의 기하학적 특성 요소의 크기와 위치 - 엘리먼트의 크기와 위치를 알고 싶을때는 해당객체.getBoundingClientRect()을 이용해서 알아낼수 있다. ( ClientRect 안에는 bottom, height, left, right, top, width의 값들을 알아낼 수 있고 해당 값들은 getBoundingClientRect()의 속성을 통해서 접근할 수 있다 ) viewport - viewport는 문서 전체가 아닌 현재 사용자에게 보여지고 있는 부분을 말한다. - 문서의 좌표와 viewport의 좌표가 있고 이 둘은 서로 다르다. - window 객체에 있는 wi.. 2017. 9. 25.
[JAVASCRIPT WEB] jQuery 노드 변경 API(추가, 제거, 바꾸기, 복사, 이동), 문자열로 노드 제어, Document 객체, Text 객체( 값 API, 조작 API ) jQuery 노드 변경 API, 문자열로 노드 제어, Document 객체, Text 객체( 값 API, 조작 API ) jQuery 노드 변경 API * 자세한 내용은 http://api.jquery.com/category/manipulation/을 참고하면 된다. 추가 - jQuery에서 메소드를 이용하면 원하는 위치에 태그를 추가 시킬수 있다. before - 해당 태그 이전에 형제관계로 생성이 된다. prepend - 해당 태그 안쪽 컨텐츠 이전에 생성이 된다. ( 자식 관계 ) append - 해당 태그 안쪽 컨텐츠 이후에 생성이 된다. ( 자식 관계 ) after - 해당 태그 이후에 형제관계로 생성이 된다. 제거 remove() - 선택된 엘리먼트를 제거한다. empty() - 선택된 엘리먼.. 2017. 9. 24.
[JAVASCRIPT WEB] node 객체, Node <관계, 종류, 값, 변경> API node 객체( 관계, 노드의 종류, 값, 자식관리 ), Node API node 객체 - 모든 DOM 객체는 Node 객체를 상속 받는다. - 각 객체들간의 관계성을 부여하는 API가 존재한다. Node 관계 API - 각각의 Node가 다른 Node와 연결된 정보를 보여준다. Node.childNodes - 자식노드들을 유사배열에 담아서 리턴한다. Node.firstChild - 첫번째 자식노드 Node.lastChild - 마지막 자식노드 Node.nextSibling - 다음형제 노드 Node.previousSibling - 이전 형제 노드 * Node 관계에서 눈에보이지 않는 공백이나 줄바꿈 문자도 자식으로 포함이 된다. Node.contains() - ()안의 값이 해당 노드의 하위 노드인지를.. 2017. 9. 24.
[JAVASCRIPT WEB] Object Model( BOM< navigator 객체, 창 제어>, DOM< 제어대상 찾기, jQuery, HTMLElement, HTMLCollection, jQuery 객체, Element 객체 > ) Object Model( BOM, DOM ) navigator 객체 - 현재 자바스크립크가 실행되고 있는 브라우저의 제품명, 버전을 알 수 있는 객체 크로스 브라우징(cross browsing) - 브라우저마다 다르게 동작하게 되는 이슈를 크로스 브라우징 이슈라고 한다. 창 제어 - window 객체를 이용해서 창과 창 사이에 제어를 할 수 있다. - window.open을 이용해서 새 창을 열거나 현재 창에서 브라우저를 열 수 있고 해당 내용은 안에 인자를 주는것을 이용해서 할 수 있다. ( window 객체를 이용해서 다양한 방법으로 창을 제어할 수 있다.. ) DOM( Document Object Mode.. 2017. 9. 24.
[JAVASCRIPT WEB] html에서 javascript 로드 방식 / Object Model( BOM <사용자 커뮤니케이션 / Location 객체> ) html에서 javascript 로드 방식 / Object Model( BOM )에 대해서 정리한다. 웹브라우저 자바스크립트 - HTML은 정보, CSS는 디자인, JavaScript는 웹브라우저,html을 프로그래밍적으로 제어하는 역할을 한다. HTML에서 JavaScript 로드하기 1. inline 방식 - 태그에 직접 자바스크립트를 기술하는 방식 - 태그에 연관된 스크립트가 분명하게 드러난다는 장점이지만 정보(html)와 제어(javascript)가 섞여 있기 때문에 웹 브라우저가 문서를 불러오기 조금 까다롭다. ( 코드의 양이 많아지면 나중에 유지보수 또한 어려울 수 있다... ) ( html 태그에 직접 script 코드를 기술하는 방식의 inline 방식이다 ) 2. script 방식 - 태.. 2017. 9. 7.
[자바스크립트] javascript 객체 / 모듈 / 라이브러리 / API javascript 객체 - 인덱스 값을 통해서 원소를 구별하는 배열과는 다르게 인덱스를 문자로 사용한다. - key를 통해서 value를 가져올수 있다. * 객체['key'] = value; - 파이썬에서 딕셔너리와 같은 기능을 한다. - 객체를 생성할때는 "{}"를 이용해서 선언하거나 new Object를 이용해서 객체를 생성 할수 있다. ( 객체는 key값을 이용해서 해당 value를 가져올 수 있고 .을 이용해서 객체 안의 key에 접근할 수도 있다 ) ( for in 문을 이용하면 배열 안에 있는 key 값을 가져올 수 있고 그 key값을 이용해서 배열 안에 있는 value들을 출력할 수 있다 ) ( 객체 안에 함수를 value로 넣어서 해당 key를 호출 하게 되면 함수가 실행 되도록 하는게 .. 2017. 8. 16.

티스토리툴바