본문 바로가기

플밍 is 뭔들/JavaScript&jQuery

[JavaScript] 자바스크립트 클래스 (2) ※ 함수단위 코딩 vs 클래스 단위 코딩 - 함수 단위 코딩을 하든 클래스 단위 코딩을 하든 같은 결과물이 나올 수 있다. 하지만 굳이 어려운 클래스 코딩으로 해야하는 이유는 무었일까? 함수단위의 코딩은 동일한 함수가 중복해서 만들어질 수 있다. 아래에서 처럼 tabMenu()함수를 사용하면 똑같은 함수가 중복되서 만들어진다. 이러한 문제점은 프로토 타입으로 클래스를 만들어 작성하면 해결이 된다. ex) $(document).ready(function(){ tabMenu("#tabMenu1"); tabMenu("#tabMenu2"); function tabMenu(selector){ $tabMenu = $(select); //tabMenu 함수의 내부 함수들 function inner1 (){ ... }.. 더보기
[JavaScript] 자바스크립트 클래스 (1) 클래스의 개념은 자바를 해봤다면 알고 있을 것이다. 자바스크립트는 객체지향 프로그래밍 언어에서 기본적으로 제공하는 클래스라는 개념을 제공하지 않는다. 하지만 자바스크립트에서는 클래스처럼 사용할 수 있는 방법을 세가지 지원한다. 이 세가지 방법은 클래스에 관한 개념을 정리한 후에 맨아래 부분 정리해 둔다. ※ 함수와 클래스 비교 함수 - 특정 기능을 하는 변수와 구문으로 이루어져 있다. 기능 단위의 코드 그룹화, 기능 단위의 중복 코드 제거 및 코드 재사용 클래스 - 연관 있는 변수와 함수로 구성되어 있다. 객체 단위의 코드 그룹화, 객체 단위의 중복 코드 제거 및 코드 재사용 ※ 객체 단위의 코드 그룹화? - 위에서 클래스는 연관 있는 변수와 함수로 구성되어 있다고 했다. - 이런식으로 객체 단위로 함수.. 더보기
[jQuery] 좌표 개념, 위치(좌표) 다루기, 크기 다루기 ※ 위치 개념 지역 좌표 : 부모 노드 기준 좌표 전역 좌표 : 최상위 노드인 document의 left, top 위치가 0으로 시작 ※ 위치다루기 지역 좌표 구하기 $대상.position().left / $대상.position().top ex) $("child").position().top; 지역 좌표 설정 $대상.css("left 또는 top 값") ex) $("child").css({ left : 값, top : 값 }); ex) $("child").css("left", 값); 부모 좌표 구하기 자바스크립트에서 부모 좌표 노드는 약간 다른데 DOM에서는 position의 속성값이 absolute와 relative의 설정이 있다. 그렇기 때문에 부모노드는 바로 위의 상위 노드가 아니라 position.. 더보기
[JQuery] 이벤트 다루기 ※이벤트의 종류 마우스 이벤트 : 마우스를 사용했을 때 발생하는 이벤트 키보드 이벤트 : 키보드를 눌렀을 때 발생하는 이벤트 태그요소 고유 이벤트 : 엘리먼트마다 발생하는 고유 이벤트 ex) 태그요소의 이미지가 모두 로드되면 load 이벤트를 발생시켜 이미지 다운이 완료됐음을 알리거나 태그요소의 경우 입력한 정보가 바뀌면 change 이벤트를 발생시켜 입력정보 변경을 알림 사용자 정보 이벤트 : 개발자가 직접 만들어 사용하는 이벤트 ※일반 이벤트 등록 $대상.on("이벤트이름", 이벤트리스너) ex) $("#btn").on("click", function(){ alert("버튼클릭"); }); ※ 단축 이벤트 등록 $대상.단축이벤트(이벤트리스너) ex) $("#btn").click(function(){ .. 더보기
[jQuery] .on() 으로 이벤트 설정하기 .on()은 하나 혹은 하나 이상의 이벤트를 설정가능하다. ex1 $( "#dataTable tbody tr" ).on( "click", function() { console.log( $( this ).text() ); }); ex2 $( "#dataTable tbody" ).on( "click", "tr", function() { console.log( $( this ).text() ); }); 위의 두 예제는 tr에 클릭이벤트를 주는 방법이다. 물론 저 tr에 #id, .class 등등의 선택자로도 이벤트를 적용하는것도 가능하다. 그리고 하나의 노드에 여러 이벤트 설정 가능 $(".foo").on({ "change" : function(){...}, "blur" : function(){...} });.. 더보기
[jQuery] 노드 생성/ 추가 / 삭제 / 이동 1.노드생성 var 신규노드 = $("신규 DOM"); ex) var $newNode = $("New Node"); DOM을 $()함수에 매개변수로 넣음으로써 jQuery객체로 return 받는다. 노드를 생성한다는게 DOM을 제이쿼리로 감싼다는 의미 2.노드추가 / 노드이동 노드를 추가할 때는 새로운 노드를 생성하면 된다. (아래의 예제는 노드 추가기준으로 만든 예제이다) 그리고 노드를 이동하려면 현재 있는 DOM에서 노드를 생성하여 똑같이 사용하면 된다. 만약 $("New Node").prependTo("ul") 이런식으로 추가 노드를 새로 만들어 사용하면 새로운 노드가 생성되어 에 맨 앞에 생성 된다. 하지만 $("#기존노드 아이디").prependTo("ul") 등과 같이 기존노드에 대한 노드에 .. 더보기
[jQuery] 부모 노드 찾기, 형제 노드 찾기 부모노드란 어떤 노드의 바로 한단계 위의 노드이고 그 이상의 노드들은 조상 노드라고 한다. 형제노드는 어떤 노드와 같은 단계의 노드를 형제 노드라고 한다. 1.부모 노드 찾기 $대상.parent() 2.조상 노드 찾기 $대상.parents("선택자") $대상.parents() 3.이전 형제 노드 찾기 $대상.prev() 바로 이전의 형제 노드를 찾아준다. $대상.prevAll("선택자") $대상.prevAll("") 이전의 모든 형제 노드를 찾아준다. 4.이후 형제 노드 찾기 $대상.next() 바로 다음의 형제 노드를 찾아준다. $대상.nextAll("선택자") $대상.nextAll() 다음의 모든 형제 노드를 찾아준다. 더보기
[jQuery] 자식 노드 찾기 자식노드 찾기는 전에 포스팅한 [jQuery] 찾은 노드 다루기 응용이므로 따로 설명하지 않겠다. 자식노드는 바로 한단계 하위 노드이며 그 이상의 하위노드는 자식노드라 하지않고 자손노드라 한다. 그런 노드들은 find()를 이용해 찾을 수 있다. 1.모든 자식노드 찾기 $대상.children() 2.특정 자식노드만 찾기 $대상.children("선택자") 3.첫번째 자식노드 찾기 $대상.children().first() $대상.children().eq(0) $대상.children(":first") $대상.children(":eq(0)") 4.마지막 번째 자식 노드 찾기 $대상.children().last() $대상.children(":last") $대상.children().eq($대상.children.l.. 더보기
[jQuery] 찾은 노드 다루기 1.찾은 노드개수 구하기 $대상.length; ex) var nodeLength = $("div).length; 해당 html의 div 노드의 총 개수를 구함 2.찾은 노드중 n번째 노드 접근하기 $대상.eq(index); ex) var $div_3 = $("div").eq(3); 해당 html의 div 노드중 세번째 노드의 jQuery객체를 리턴 3.자바스크립트 DOM 객체 접근 $대상.get(index) ex) var $div_3 = $("div").get(3); $div_3.style.color = "#f00"; 해당 html의 div노드중 세번째의 노드의 DOM객체를 리턴하여 세번째 div의 색을 빨간색으로 바꿨다. 2번(jQuery객체 접근), 3번(DOM객체 접근) 리턴값 비교 위에서 보는것처.. 더보기
[jQuery] 노드 찾기 ※ 노드찾기 1.아이디로 찾기 $("#아이디") 2.클래스 이름으로 찾기 $(".클래스 이름") 3.태그 이름으로 찾기 $("태그 이름") 4.속성옵션으로 찾기 $("속성옵션") 속성옵션 설명 $("[id]") 아이디가 적용된 모든 노드 $("[id=test]") 아이디가 test인 노드 ex) id = "test" 로 속성을 준 모든 노드를 찾는다. $("[id*="test]") 아이디에 test가 포함된 모든 노드 $("[id$="test]") 아이디가 test로 끝나는 모든 노드 $("[id^="test]") 아이디가 test로 시작하는 모든 노드 더보기
[jQuery] $()란? 우리는 보통 jQuery를 쓸때 $("div).css("boder", "4px solid"); 와 같은 형태로 쓴다. 항상 앞에 $("CSS 선택자")의 형식으로 쓴다. 여기서 $()란 무엇을 나타내는 것일까? 바로 $()는 함수를 나타낸다. $ 함수 그 자체인 것이다. 실제로 jQuery라이브러리 내부를 살펴보면 window.jQuery = window.$ = jQuery; 라는 부분이 있다. 정리해보면 $는 jQuery 함수와 동일하며 일종의 단축이름이다. 그래서 $("div).css("boder", "4px solid");을 jQuery("div).css("boder", "4px solid"); 로 바꿔써도 똑같이 작동한다. 그리고 $() 가 함수라는것은 아래의 예시를 보면 알 수 있다. $("di.. 더보기
[JavaScript&Query] $(document).ready 와 window.onload의 차이 $(document).ready() 와 window.onload는 모두 웹페이지가 로드되면서 발생한다. ready()는 DOMContentLoaded 이벤트를 포함한 메서드로써 이 이벤트는 웹페이지를 읽은 후 태그와 1:1 매핑되는 DOM 객체를 생성한 후 발생한다. 이벤트가 발생한 시점에서는 이미지나 플래시 같은 무거운 콘텐츠는 아직 로드되지 않는다. 하지만 window 객체에서 발생하는 load이벤트는 이미지나 플래시 같이 무거운 콘텐츠가 모두 로드되고 난 후 발생하는 이벤트이다. 정리해보면 DOMContentLoaded 이벤트가 먼저 발생하고 이후 이미지 등의 콘텐츠가 모두 로드되고 load 이벤트가 발생한다. 이러한 특징을 잘 기억했다가 적절하게 사용하자 (일반적으로 실무에서는 특별한 경우가 아니.. 더보기

티스토리툴바