🗒️ Categories (1539)

1. 2017.05.24 그룹 이벤트 등록 및 삭제하기

   * 그룹 이벤트 등록 메서드 - 그룹 이벤트 등록 메서드를 상요하면 한 번에 2개 이상의 이벤트를 등록할 수 있음. - 예를 들어, 선택한 요소에 메서드를 한 번만 적용하여 '마우스를 올렸을 때'와 '포커스가 생생되었을 때'와 같이 두 이벤트가 발생되도록 만들 수 있음. - 그룹 이벤트 등록 메서드의 종류 종류 설명 on() 선택한 요소에 한 개 이상의 이벤트를 등록할 수 있음. 그리고 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트가 등록됨. 이 메서드는 제이쿼리 1.7 버전 이상부터 지원하고 있음. bind() 선택한 요소에 한 개 이상의 이벤트를 등록할 수 있음. delegate() 선택한 요소의 지정한 하위 요소에 이벤트를 등록함. 이벤..
2. 2017.05.23 자주 사용되는 기타 이벤트 메서드

   (1) change() 이벤트 메서드 - 선택한 입력 요소의 값(value)이 새 값으로 바뀌고 포커스가 다른 요소로 이동되었을 때 발생함. - 주로 폼 요소에 입력된 새 값을 스크립트에 이용할 때 사용됨. - 또는 change 이벤트를 강제로 발생시킬 수 있음. - 기본형 1. $(요소 선택).change(function() {...}); // 선택한 입력 요소의 값(value)이 새 값으로 바뀌고 포커스가 다른 요소로 이동되었을 때 이벤트 핸들러에 있는 실행문을 실행함. 2. $(요소 선택).change(); // 선택한 요소에 강제로 change 이벤트 메서드를 발생시킴. - 예) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 사이트 선택 네이버 네이트 ..
3. 2017.05.23 이벤트 등록 메서드 - 키보드 이벤트

   * 키보드 이벤트 - 키보드로만 이벤트를 발생시킬 수 있는 이벤트. - 예를 들어, 키보등 있는 키를 눌렀을 때나 키에서 손을 떼었을 때 이벤트가 발생하는 것. * keydown() / keyup() / keypress() 이벤트 메서드 - keydown()와 keypress() 이벤트 메서드는 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시킴. - 또한 강제로도 이벤트를 발생시킬 수 있음. - keydown() 이벤트 메서드는 이벤트가 발생했을 때 이벤트의 객체를 이용하면 눌려진 모든 자판에 대한 고유 키 코드값을 받아올 수 있지만, keypress() 이벤트 메서드는 문자(a~z, !, @, #... 등) 자판에 대한 고유 키 코드값은 받아오지 못함. - 키보드에 눌려진 자판 고유 키 코드값..
4. 2017.05.23 키보드 접근성을 위한 이벤트 등록법

   * 키보드 접근성을 위한 이벤트 등록법 - 키보드 접근성이란, 마우스 이벤트를 등록했을 때 만약 현재 마우스가 없더라도 제이쿼리로 만든 최소한의 기능을 키보드만으로 사용할 수 있도록 보장하는 것을 말함. - 키보드 접근성을 고려하여 마우스 이벤트를 등록할 때는 포커스를 이동할 수 있는 요소들인 와 태그, 또는 입력 요소인 , , 태그에 이벤트를 등록해야 함. [마우스에 대응하는 키보드 이벤트] - 마우스 이벤트를 등록할 때는 마우스에 대응하는 키보드 이벤트도 함께 등록해야 함. - 그래야 마우스가 없는 방문객이 사이트를 방문했을 때 키보드만으로도 접근할 수 있어 방문자가 불편함을 느끼지 않을 수 있음. - 마우스 이벤트에 대응하는 키보드 이벤트 마우스 이벤트 마우스 이벤트에 대응하는 키보드 이벤트 mou..
5. 2017.05.23 이벤트 등록 메서드 - 마우스 이벤트

   * 마우스 이벤트 - 방문자가 사이트에서 마우스를 이용해 취하는 모든 행위를 말함. - 예) 방문자가 지정한 요소에 마우스를 올리거나 클릭하는 등의 행위. (1) click() / dblclick() 이벤트 메서드 - click() 이벤트 메서드는 선택한 요소를 클릭했을 때 이벤트를 발생시킴. - 또는 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용. - 기본형 1. $(요소 선택).click(function() {...}); // 선택한 요소를 클릭할 때마다 이벤트 핸들러에 일련의 실행문을 실행시킴. 2. $(요소 선택).click(); // 마치 사이트 방문자가 선택한 요소를 클릭한 것처럼 선택한 요소에 강제로 click 이벤트가 발생함. - dblclick() 이벤트 메서드는 선택한 요소를 연..
6. 2017.05.23 이벤트 등록 메서드 - 로딩 이벤트 메서드

   * 로딩 이벤트 메서드 - 로딩 이벤트 메서드는 브라우저에서 HTML 문서를 불러올 때 HTML 문서 객체를 로딩(Loading)해 옴. - 이때 지정한 객체의 로딩이 완료되면 이벤트 핸들러가 실행됨. * ready() / load() 이벤트 메서드 - ready()와 load() 이벤트 메서드는 HTML에 지정된 문서 객체의 로딩이 완료된 후 이벤트 핸들러가 실행됨. - 어떤 선택자(Selector)를 사용하려면 먼저 문서 객체를 불러와야 함. - 문서 객체를 먼저 불러와야할 때 ready() 이벤트 메서드를 사용함. - 이때 문서 객체가 완전히 로딩되더라도 이미지나 프레임에 연동된 소스는 그 이후 로딩됨. - load() 이벤트 메서드는 이런 이미지나 프레임에 연동된 소스가 로딩이 완료되면 이벤트 핸..
7. 2017.05.23 이벤트 등록 메서드란?

   * 이벤트 등록 메서드란? - 이벤트 : 사이트에서 방문자가 취하는 모든 행동 - 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 일련의 실행 코드 - 이벤트 등록 메서드를 사용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 실행문을 실행시킬 수 있음. - 이벤트 등록 메서드에는 단독 이벤트 등록 메서드와 그룹 이벤트 등록 메서드가 있음. - 단독 이벤트 등록 메서드 : 한 동작에 대한 이벤트를 등록할 때 사용하는 메서드 - 그룹 이벤트 등록 메서드 : 하나 이상의 이벤트를 등록할 때 사용하는 메서드 - 이벤트 사용의 기본형 버튼 : 이벤트 대상 : 이벤트 등록 메서드 : 이벤트 핸들러 - 이벤트 등록 메서드의 종류 구분 종류 설명 로딩 이벤트 load() 선택한 이미지 또는 프레임..
8. 2017.05.23 [C] 큐(Queue)

   큐(Queue) - 먼저 들어온 데이터가 먼저 나가는 구조. (선입 선출(FIFO: First-In-First-Out)) - 큐에서 삽입이 일어나는 곳을 '후단(rear)'이라고 하고, 삭제가 일어나는 곳을 '전단(front)'이라고 함. 선형 큐 (Linear Queue) - 배열로 구현된 큐. - 이해하기 쉽다는 장점이 있음. - 문제점 -> front와 rear의 값이 계속 증가만 하기 때문에 언젠가는 배열의 끝에 도달하게 되고 배열의 앞부분이 비어 있어도 사용하지 못함. 따라서 주기적으로 모든 요소들을 왼쪽으로 이동시켜야 함. (상당한 시간이 걸리고 프로그램 코딩이 복잡해짐.) 원형 큐 (Circular Queue) - 선형 큐의 문제점을 보완하기 위해 배열을 원형으로 생각하여 만든 큐. - fr..
9. 2017.05.22 주요 선택자 정리

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 div{background-color:yellow;} .tit{background-color:orange;} 내용1 내용2 내용3 내용4 리스트1 리스트2 리스트3 리스트4 $(function(){ $("h1").attr("align","left"); // 태그의 "align" 속성값을 "left"로 적용 $("li:first").text("첫 번째 리스트"); // 태그 중에 첫 번째 요소의 텍스트를 새 텍스트로 바꿈. $("h2>strong"..
10. 2017.05.22 객체 조작 메서드 - 객체 편집 메서드

    (3) 객체 편집 메서드 - 선택한 요소를 복제/새 요소를 생성/복제하거나 새로 생성한 요소를 위도한 위치에 삽입/선택한 요소를 삭제하는 기능을 갖고 있는 메서드. - 객체 편집 메서드의 종류 종류 사용법 설명 before() $("요소 선택").before("새 요소"); 선택한 요소 이전 위치에 새 요소 추가 after() $("요소 선택").after("새 요소"); 선택한 요소 다음 위치에 새 요소 추가 append() $("요소 선택").append("새 요소"); 선택한 요소의 마지막 위치에 새 요소 추가 appendTo() $("새 요소").appendTo("요소 선택"); 선택한 요소의 마지막 위치에 새 요소 추가 prepend() $("요소 선택").prepend("새 요소"); 선택한 ..
11. 2017.05.22 객체 조작 메서드 - 수치 조작 메서드

    (2) 수치 조작 메서드 - 속성 조작 메서드와 성격이 비슷하지만, 선택한 요소의 수치 관련된 속성을 변경하거나 기존에 입력된 값을 불러올 때 사용. - 예를 들어, 요소의 너비 또는 높이의 속성값을 바꾸거나 불러올 때 사용. - 수치 조작 메서드 종류 사용법 설명 height() $("요소 선택").height(); $("요소 선택").height(100); 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환 width() $("요소 선택").width(); $("요소 선택").width(100); 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환 innerHeight() $("요소 선택").innerHeight() $("요소 선택").innerHeight(300); 안쪽 여백을 포함한 높잇값을 반환하거..
12. 2017.05.22 객체 조작 메서드 - 속성 조작 메서드

    * 객체 조작 메서드 - 객체 조작 메서드는 속성 조작 메서드와 수치 조작 메서드 그리고 객체 편집 메서드로 나눌 수 있음. - 속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메서드는 요소의 너비 또는 높잇값과 같은 수치를 바꿀 때 사용 -> 선택한 요소의 속성을 바꾸는 메서드이므로 성격이 비슷하다고 볼 수 있음. - 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할 때 사용하는 메서드임. (1) 속성 조작 메서드 - 요소의 속성을 조작할 때 사용하는 메서드 - 속성 조작 메서드 종류 사용법 설명 html() $("요소 선택").html(); $("요소 선택").html("새 요소"); 선택한 요소의 하위 요소들을 반환하거나 새 요소로 변환함. text() $("요소 선택").te..
13. 2017.05.22 선택자와 함께 사용하면 편리한 메서드들

    [선택자와 함께 사용하면 편리한 메서드들] - 메서드 종류 종류 사용법 설명 is() $("li").is(".visible") 선택한 요소가 보이면 true를 반환함. noConflict() var m=$.noConflict(); m("h1").width(100); 선택자 메서드를 사용할 때 "$"를 앞에 붙여 사용했음. $.onConflict()를 사용하면 "$" 메서드를 변수에 참조시켜 "$"문자 대신 임의의 문자를 지정하여 사용할 수 있음. get() $("li").get(0).style.color="red" 제이쿼리로 선택한 요소에 get(0) 메서드를 적용하면 자바스크립트에 DOM 선택자로 선택한 태그로 인식되어 이전 자바스크립트의 DOM 방식을 따름. each() / $.each() $("lI..
14. 2017.05.22 탐색 선택자 - 콘텐츠 탐색 선택자

    [그 외의 선택자 - 콘텐츠 탐색 선택자] - 콘요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자. - 콘텐츠 탐색 선택자의 종류 종류 사용법 설명 $("요소 선택":contains(텍스트)") $("li:contains('내용2')") 요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택 $("요소 선택").contents() $("p").contents() 선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택 $("요소 선택:has(요소명)") $("요소 선택").has(요소명) $("li:has('span')") $("li").has('span') 요소 중 을 포함하는 요소만 선택 $("요소 선택:not(:제외 요소)") $("요소 선택").not("제외 요소) $("li:not..
15. 2017.05.22 탐색 선택자 - 속성 탐색 선택자

    [속성 탐색 선택자] - 선택해 온 요소를 기준으로 일치하는 속성의 포함 여부를 따져서 요소를 선택해오는 선택자. - 속성 탐색 선택자 종류 종류 사용법 설명 $("요소 선택[속성]") $("li[title]") 요소 중 title 속성이 포함된 요소만 선택 $("요소 선택[속성=값]") $("li[title='리스트']") 요소 중 title 속성값이 '리스트'인 요소만 선택 $("요소 선택[속성^=텍스트]") $("a[href^='http://']") 요소 중 href 속성값이 'http://'로 시작하는 요소만 선택 $("요소 선택[속성$=텍스트]") $("a[href$='.com']") 요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택 $("요소 선택[href*=텍스트]") $("a[..
16. 2017.05.22 탐색 선택자 - 위치 탐색 선택자

    * 탐색 선택자 - 탐색 선택자를 사용하면 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 정확히 선택할 수 있음. - 탐색 선태자는 선택한 요소 중 요소의 위치를 기준으로 선택하는 위치 탐색 선택자, 요소의 지정된 속성을 기준으로 선택하는 속성 탐색 선택자가 있음. - 그 외의 탐색 선택자로 요소 내에서 콘텐츠의 포함 여부를 따져 선택하는 콘텐츠 탐색 선택자, 선택한 요소를 한 번 더 필터링할 수 있는 필터링 선택자 등이 있음. [위치 탐색 선택자] - 기본 선택자로 선택한 요소 중 요소의 위치 또는 인덱스 번호를 이용하여 특정 요소를 좀 더 정확히 선택. - 위치 탐색 선택자 종류 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:fi..
17. 2017.05.22 직접 선택자와 인접 관계 선택자

    * 제이쿼리의 직접 선택자 및 인접 관계 선택자 - 앞으로 '문서 객체'라는 말을, '요소' 또는 '태그'라 표현하겠음. - 자바스크립트의 DOM(Document Object Model) 서낵자는 IE 8 이하와 그 외의 브라우저 사이에 호환성에 대한 문제점이 있었음. - 하지만 제이쿼리는 이러한 호환성과 관련된 문제들을 모두 해결함. - 제이쿼리 선택자는 자바스크립트의 DOM 선택자보다 사용이 편리하고 쉬움. - 제이쿼리의 선택자에는 크게 직접 선택자와 인접 관계 선택자로 나눌 수 있음. - 직접 선택자에는 전체 선택자, 아이디 선택자, 클래스 선택자, 요소명(tag Name) 선택자, 그룹 선택자가 있음. - 인접 관계 선택자에는 부모 요소 선택자, 자식 요소 선택자, 형(이전) 요소 선택자, 동생(..
18. 2017.05.22 아이디 선택자를 적용하여 글자 색상을 바꾸기

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 선택자 $(function(){ $("#title").css("color","green"); }); 제이쿼리 Colored by Color Scripter cs 소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
19. 2017.05.22 선택자 (Selector)

    * 선택자란? - 선택자(Selector)를 사용하면 지정한 문서 객체를 선택해 올 수 있음. - 제이쿼리 선택자에는 직접 선택자, 이미 선택한 요소를 기준으로 근접한 요소의 관계를 따져 선택하는 인접 관계 선택자, 선택된 요소 중 더 세밀하게 선택할 수 있는 탐색 선택자가 있음. * 제이쿼리 선택자 사용 준비하기 - 선택자를 사용하기 위해서는 문서 객체가 필요함. 1. 잘못된 적용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 잘못된 선택자 적용 문단 요소보다 먼저 실행됨 문단 요소 Colored by Color Scripter cs -> 자바스크립트가 인터프린터 언어이기 때문에 제이쿼리가 먼저 실행되고 난 후 영역에 문서 객체가 로딩됨. -> 선택자가 먼저 실행되어 문서 객체를 선택할 수..
20. 2017.05.22 제이쿼리란?

    * 제이쿼리란? - 제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식(John Resig)이 창시함. - 제이쿼리는 자바스크립트를 이용해 만든 라이브러리 언어(자바스크립트로 만들어진 다양한 한수들의 집합). - 제이쿼리에서 개선된 사항 1) 호환성 문제점 해결 - 자바스크립트는 호환성(크로스 브라우징)이 떨어짐. - 자바스크립트에서는 이벤트 객체를 생성할 때 IE 브라우저 8 이하 버전과 그 외의 브라우저(파이어폭스, 크롬, 사파리, 오페라, IE 9 이상 버전)는 코드를 실행했을 때 그 결과에 많은 차이가 있었음. - 제이쿼리에서는 이 문제들을 모두 해결함. 2) 쉽고 편리한 애니메이션 효과 기능 구현 - 자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 했고, 개발하는 데도 많은 ..
21. 2017.05.21 이벤트 객체 (Event Object)

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 document.onkeydown=function(e){ alert(e); } document.onkeydown=function(e){ alert(window.event); } document.onkeydown=function(e){ var ev..
22. 2017.05.21 this를 사용한 이벤트

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 이벤트 function chColor(obj, state){ var myColor; if(state=="over"){ myColor="red"; } else { myColor="black"; } obj.style.color=myColor; } // 에 마우스를 올릴 경우엔 글자 색상이 빨간색으로 바..
23. 2017.05.21 이벤트 등록 메서드가 브라우저별로 서로 다르게 실행되도록 하기

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 window.onload=function(){ function fnc1(){ alert('실행문1'); } function fnc2(){ alert('실행문2'); } var myBtn=document.getElementById("btn"); if(window.addEventListener) { // 파이어폭스, 크롬 등 브라우저에서 true를 반환하여 조건식을 만족 myBtn.addEventListener("click",fnc1,false); myBtn.addEventListener("click",fnc2,false); } else { // IE 8 이하에서만 실행..
24. 2017.05.21 이벤트 (Event)

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 var color=["white","yellow","aqua","purple"]; var i=0; function colorBg(){ i++; if(i>=color.length) i=0; var bodyTag=document.getElementByTagName("body")[0]; bodyTag.style.backgroundColor=color[i]; } window.onload=f..
25. 2017.05.21 함수를 사용하여 사진 갤러리 만들기

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 window.onload=function(){ var list_zone=document.getElementById("inner_list"); var list_zone,getElementsByTagName("a"); for(var i=0; i=list_a.length-3) return false; m_num++; list_zone.style.marginLeft=100*m_num+"px"; return false; } var n_btn=document.getElementById("before_btn"); n_btn.onclick=funct..
26. 2017.05.21 함수 (Function) 1

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 var i=0; function myFnc(){..
27. 2017.05.21 문서 객체 모델을 사용하여 자동차 견적 미리보기 페이지 만들기

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 function(){ var basic_car=Number(document.getElementById("total").defaultValue); for(var i=1; i
28. 2017.05.21 폼 요소 선택자

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 회원 로그인 아이디 비밀번호 document.f1.onsubmit=function(){ var pw1=document.f1.user_pw1; var pw2=document.f1.user_pw2; pw2.value=pw1.value; pw2.disabled=true; return false; } document.f2.allChk.onclick=function(){ if(this.checked) { document.f2.subject1.checked=true; document..
29. 2017.05.21 문서 객체에 이벤트 핸들러 적용

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ... 마우스 아웃 var theBtn=document.getElementById("btn"); var s=document.getElementById("img_src"); theBtn.onmouseover=function(){ document.getElementById("title").innerHTML="마우스 오버"; theBtn.firstChild.src="images/btn_over.gif"; s.innerHTML=theBtn.firstChild.src; } theBtn.onmouseout=function(){ document.getElementById("title").inne..
30. 2017.05.21 선택자 호환성 문제 해결

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 .... 내용1 내용2 내용3 내용4 document.getElementById("wrap").children[0].style.color="red"; var p=document.getElementsByTagName("p")[1]; var nextObj=p.nextSibling; while(nextObj.nodeType != 1) { nextObj=nextObj.nextSibling; } nextObj.style.backgroundColor="yellow"; Colored by Color Scripter cs 소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)