이번에는 java script 의 이벤트위임 의 원리 인 버블링 과 그에 반대인 캡쳐링 을 알아 봅시다. 버블링 vs 캡쳐링 버블링과 캡쳐링은 하나의 특성이라고 생각을 하면 될 것 같습니다. java script 에서 이벤트가 발생되는 곳을 확인 하기 위해서, 캡쳐링을 수행하고, target 을 발견하면, 버블링을 수행합니다. 즉. 이벤트를 실행하기 위해서, 어떤 이벤트가 실행되는지 알아보려고 캡쳐링을 수행 합니다. 이 때, 부모 노드부터 차례대로 내려오면서 이벤트를 실행합니다. window -> document -> html -> body -> .... 이를 캡쳐링 이라고 합니다. 이제, evnet.target 을 발견(어떤 이벤트가 실행되는지 찾음) 하면, 내려가는 걸 멈추고, 다시 window 에 ..

이번에는 java script의 event 객체와 이벤트 위임에 대해서 알아봅시다. event event 객체는, 이벤트가 발생했을 때 ( 예를 들면 클릭 ) 함수가 기본적으로 내장하고 있는 arguments 객체에 event 객체가 포함되어 있습니다. 즉. 함수 안에서 event 객체를 그냥 사용할 수 있습니다. event 객체는 이벤트 관련 기능들이 여러개 있는데, 그 중에서 이벤트가 발생된 곳을 지칭하는 .target 이 있습니다. 위와 같이 있을때, 를 클릭하면, 아래의 태그의 innerHTML 이 바로 삽입이 되게하려면, 해당 태그에 전부 onclick 이벤트를 걸어주고, 클릭된 가 어떤건지 파악한 후, 클릭된 를 에 넣어주면 되겠죠? 이럴 때 사용하는 것이, event.target 입니다. ※..

이번에는 java script 의 toggle 에 대해서 알아 봅시다. toggle toggle 은, 하나의 버튼을 가지고 새로운 클래스명을 추가하는 것을 의미 합니다. 아래의 기능 해당 버튼을 클릭하면. 하나의 버튼이 변경이 되는 겁니다. 위의 기능을 구현하기 위해서 아래의 버튼을 하나 만들어 주세요. 해당 버튼에 스타일도 줍시다. class 명이 change 로 변경되었을 경우도 생각해서 style 을 줬습니다. 위처럼, className 이 1개라면, 아래의 방식으로 구현할 수 있습니다. 위의 코드로 실행을 하게되면, 버튼을 클릭했을 때, className 이 "toggle" 과 "change" 를 번갈아가면서 가지게 됩니다. 그런데, 보통 className이 1개 인가요? 보통은 여러개의 clas..

이번에는 java script 를 사용해서 class 를 제어하는 법에 대해서 알아 봅시다. 노드 클래스의 제어 위의 버튼은 class 이름이 'btn' , id 이름이 'btn' 입니다. 그리고 이 버튼을 사용할 때 저희는 거의 document.getElementById("btn") 을 사용했죠? 그리고, 안에 속성 id , innerHTML , value , style 은 그냥 .id = "btn" 등으로 사용 했었습니다. 그런데, 생각해보면 btn.class = "btn" 이렇게 사용해본 적은 없죠? 실제로 아래와 같이 코드를 짜면 에러가 납니다. var btn = document.getElementById("btn"); btn.class = "btn"; 그 이유는, class 속성을 제어하는 이름..

이번에는 java script 를 이용해서 체크박스를 이용한 전체선택 및 선택삭제 에 대해서 알아 봅시다. 전체선택 위 그림에서, 왼쪽위를 누르면 아래의 체크박스에도 선택이 되도록 할 건데요 먼저, 틀을 만들어 줄게요 번호 이름 내용 1 홍길동 안뇽하세용~ 2 강감찬 안뇽하세용~ 3 홍길자 안뇽하세용~ 4 신사임당 안뇽하세용~ 5 이순신 안뇽하세용~ 방금 노드회전 할 때 알아본 함수들을 이용하면 됩니다. 전체선택 체크 박스를 클릭하면, 아래의 체크박스들을 가져와서, checked 속성을 true 로 바꿔주면 됩니다. 이 때, 만약 전체선택 체크 박스가 클릭되어 있는 경우에 다시한번 누른 경우인지 확인해서 if else 문으로 만들어 주면 됩니다. 선택삭제 위의 체크박스들이 선택되어 있는 행을 삭제할 건데..

이번에는 java script를 사용해서 노드가 회전하는 걸 만들어 봅시다. 노드회전 위와 같이 있을 때, 이동에 있는 버튼들을 클릭하면 버튼에 해당하는 위치로 이동하도록 만들어 볼거에요 먼저 테이블을 만들어 주세요. 이동 번호 이름 내용 ↑ ↓ 1 홍길동 안뇽하세용~ ↑ ↓ 2 강감찬 안뇽하세용~ ↑ ↓ 3 홍길자 안뇽하세용~ ↑ ↓ 4 신사임당 안뇽하세용~ ↑ ↓ 5 이순신 안뇽하세용~ 위와 같은 기능을 구현하려면, 안에 있는 의 위치를 변경해주면 되겠죠? 그러면 이제부터 노드를 회전시키기 위한 함수들을 알아 봅시다. parentElement : 순수한 부모요소(노드) parent : 부모요소(노드) text 포함 특정 태그(노드)에 접근해서 부모요소를 가지고오면 됩니다. 뒤에, Element가 붙는..