개발감성

스크롤 위치 구하기 - pageOffset 현재 창에 scroll이벤트가 일어났을 때 페이지의 전역위치를 구해주어 스크롤의 위치를 나타낸다. 스크롤의 위치에 따라 페이지의 전역위치를 나타낸다. 스크롤 위치 이동 - scrollTo( ) top버튼에 클릭 이벤트가 일어났을 시 scrollTo를 이용해 스크롤의 위치를 0으로 바꿔준다. 스크롤 위치 이동 - scrollBy( ) 정해진 위치로 이동시키는 scrollTo와 달리 By는 일정 거리만큼 이동시킨다. 스크롤의 위치가 100씩 이동한다.

윈도우 창 생성 버튼에 이벤트를 주어 open을 사용해 크기 500의 새 창을 만들도록 한다. 윈도우 창 크기 변경 - resizeTo( ) 이번에도 다른 버튼에 이벤트를 주어 만약 newWindow가 있다면 resizeTo를 통해 500이었던 크기를 300으로 변경하도록 한다. resizeTo함수는 새 창이 존재할 때만 사용가능하다. 윈도우 위치 이동 - moveTo( ) 생성된 newWindow창을 moveTo를 이용해 200의 위치로 이동시킨다. 창이 어느 위치에 있던 이동버튼을 누르면 200,200의 위치로 이동한다. 윈도우 위치 이동 - moveBy( ) 생성된 newWindow창을 moveBy를 사용해 200만큼 이동시킨다. moveBy는 해당 윈도우를 일정 위치만큼 이동하는 것을 볼 수 있다..

의미 없는 p태그로 가득 체워진 웹 문서에서 크기를 구해보도록 한다. 웹 문서의 크기 - $(document).width( ), height( ) jQuery를 사용해 document를 불러온 뒤 width와 height를 사용한다. width는 화면의 크기에 따라 조절되는 반면 height는 문서 내의 내용에 따라 고정된 값을 보인다. 스크린의 크기 - screen.width, height 스크린이란 모니터의 화면의 크기를 뜻하고 이를 구하기 위해서 screen에 width와 height를 줬다. 제어판의 해상도의 값을 확인해보니 제대로 구해졌다. 유효 스크린의 크기 - availWidth, availHeight 유효 스크린이란 화면에서 작업표시줄을 제외한 크기를 뜻한다. 작업 표시줄의 40px만큼을 ..

스크롤의 위치를 확인할 버튼과 자동으로 스크롤을 이동할 버튼, 300,200의 크기의 컨테이너에 1000크기의 사진을 담았다. 스크롤의 위치 구하기 scrollLeft와 Top 메소드를 사용해 container노드의 현재 스크롤 위치를 리턴한다. 스크롤의 마지막 위치는 717, 321으로 나온다. 이는 스크롤 바의 앞 위치로 스크롤 바의 자체크기, 테두리두께, 컨테이너의 크기 등에 따라 나타난다. ex) (스크롤left위치 717) + (스크롤 창의 크기 300) - (스크롤바와 테두리의 크기 17) 스크롤 이동 시키기 다른 위치함수들과 마찬가지로 left나 top에 값을 넣어줌으로 위치를 이동시킬 수 있다. setInterval함수를 이용해 0.1초마다 오른쪽으로 5씩 이동시키며 스크롤의 위치가 끝에 ..

하나의 태그에는 여러가지 영역이 있다. 어디서부터 어디까지를 크기의 범위로 가정하는지 각 영역을 포함담당하는 함수를 통해 알아본다. 기본 크기 - width( ), height( ) 제일 안쪽의 크기는 가로에 width, 세로에 height를 사용해서 구한다. 태그의 내용물의 크기만을 구해준다. 기본크기 + padding - innerWidth( ), innerHeight( ) padding을 포함한 크기는 inner를 붙여준다. 기본크기 + padding + border - outerWidth( ), outerHeight( ) 테두리의 크기까지 합한 크기는 outer를 붙여서 표현한다. 기본크기 + padding + border + margin - outerWidth(true), outerHeight(..

div태그를 세 개 중첩했다. 구조상으로는 parent1 > parent2 > child 이다. 부모 좌표 노드 - offsetParent( ) child 노드에 offsetParent를 적용하여 $parent변수에 저장하고 반환되는 노드의 id 속성을 콘솔창에 찍어봤다. child노드의 바로 상위는 parent2일텐데 콘솔에는 parent1으로 찍혔다. 이유는 css의 position때문이다. 따로 position을 정해주지 않아서 parent2노드는 위치계층도에서 제외된다. 노드의 지역 위치 구하기 - position( ) 5개의 물고기 이미지를 두고 해당 사진을 클릭하면 위치를 위에 표시해본다. fish클래스의 노드를 클릭했을 때 pos변수에 클릭된 노드의 position을 저장하고 str문자열을 ..

div 두개의 영역이 외부 내부로 있고 각각에 마우스 이벤트를 달아 차이점을 비교해본다. mouseover & out 마우스 이벤트 중 over와 out은 부모와 자식의 노드를 따로 분리된 영역으로 판단한다. 이벤트 정보가 담길 info에 이벤트 횟수와 해당 이벤트가 일어난 타겟의 위치를 표시한다. 바깥의 parent영역만 들어갔다 나왔을 시 over와 out이 출력된다. 이번엔 parent영역에서 child영역까지 들어갔다가 나왔다. 3번에서 parent 에 들어갔고 여기서 child로 들어갈 때 parent out이 뜨고 child over이 뜬다. 이말인 즉 child로 들어갈 때는 parent에서 나가는 것으로 판단되는 것이며 child는 parent하위 개체임에도 불구하고 독립된 영역으로 취급받..

추가 버튼을 누르면 li태그가 추가되며 해당 내용이 output div태그에 기록되도록 해본다. li태그 추가 add 버튼을 클릭하면 newItem 객체를 생성하고 ul태그에 추가하는 이벤트를 생성했다. 사용자 정의 이벤트 정의 addItem이라는 이벤트를 생성하여 event변수에 담았다. 또한 위에서 생성한 $newItem의 정보들을 event에 담고 해당 객체를 트리거로 넘겨줬다. 트리거로 전달된 addItem이벤트는 ul태그에 prepend로 event내용을 출력한다. 추가 버튼을 누르면 li태그가 추가되면서 트리거를 통해 사용자가 정의한 addItem이벤트 또한 함께 실행된다. 사용자 정의 이벤트 정의2 data변수에 newItem의 속성을 담아 배열로 만들어 트리거로 전달할 수도 있다. 같은 효..

버튼 두개가 있고 버튼 B에 클릭했을 시 알림창을 띄우는 이벤트를 등록했다. 역시나 B를 클릭하면 버튼B의 알림창이 뜨는 이벤트가 실행된다. 이번엔 버튼 A에 이벤트를 걸어주는데 그 내용은 버튼B를 호출해 클릭에 트리거를 걸어준다. 그러자 버튼 A를 클릭했는데 버튼 B의 이벤트가 실행되는 것을 볼 수 있다. 버튼 A의 이벤트 자체가 버튼 B의 클릭 이벤트를 실행시키는 것이다. 이런 식으로 버튼 자체에 다른 태그의 이벤트를 걸어둔다면 해당 이벤트를 대신 실행시킬 수 있다. 까만 화면 속 숫자를 클릭해도, 버튼을 클릭해도 이벤트가 실행된다.

우선 이벤트의 단계중 버블링의 개념에 대해 알아야한다. 이벤트의 마지막 단계인 버블링은 타게팅 이후 document로 돌아가는 과정인데 버블링을 활용해서 이벤트를 등록하는 방법을 알아본다. stopPropagation( ) - 버블링 중단 div안에 버튼 두개를 만들고 세 개의 노드에 클릭 시 콘솔을 띄워주고 bubbles값이 true가 나오는지 확인해 버블링이 발생하는지 알아보는 이벤트를 등록한다. 버블링 처리 버튼을 누르면 btn1과 panel에서 반응이 온다. 이는 btn1에서 클릭이벤트의 타게팅이 이뤄지고 다시 돌아가는 버블과정에서 panel을 지나치기 때문이다. 이번엔 버블링 중지 버튼을 눌렀고 #btn2에 등록된 이벤트내용중 stopPropagation메소드로 인해 버블링이 중단되어 panel..