🗒️ 2017/05 (184)

1. 2017.05.23 [C] 큐(Queue)

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

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

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

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

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

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

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

    * 제이쿼리의 직접 선택자 및 인접 관계 선택자 - 앞으로 '문서 객체'라는 말을, '요소' 또는 '태그'라 표현하겠음. - 자바스크립트의 DOM(Document Object Model) 서낵자는 IE 8 이하와 그 외의 브라우저 사이에 호환성에 대한 문제점이 있었음. - 하지만 제이쿼리는 이러한 호환성과 관련된 문제들을 모두 해결함. - 제이쿼리 선택자는 자바스크립트의 DOM 선택자보다 사용이 편리하고 쉬움. - 제이쿼리의 선택자에는 크게 직접 선택자와 인접 관계 선택자로 나눌 수 있음. - 직접 선택자에는 전체 선택자, 아이디 선택자, 클래스 선택자, 요소명(tag Name) 선택자, 그룹 선택자가 있음. - 인접 관계 선택자에는 부모 요소 선택자, 자식 요소 선택자, 형(이전) 요소 선택자, 동생(..
11. 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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
12. 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 -> 자바스크립트가 인터프린터 언어이기 때문에 제이쿼리가 먼저 실행되고 난 후 영역에 문서 객체가 로딩됨. -> 선택자가 먼저 실행되어 문서 객체를 선택할 수..
13. 2017.05.22 제이쿼리란?

    * 제이쿼리란? - 제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식(John Resig)이 창시함. - 제이쿼리는 자바스크립트를 이용해 만든 라이브러리 언어(자바스크립트로 만들어진 다양한 한수들의 집합). - 제이쿼리에서 개선된 사항 1) 호환성 문제점 해결 - 자바스크립트는 호환성(크로스 브라우징)이 떨어짐. - 자바스크립트에서는 이벤트 객체를 생성할 때 IE 브라우저 8 이하 버전과 그 외의 브라우저(파이어폭스, 크롬, 사파리, 오페라, IE 9 이상 버전)는 코드를 실행했을 때 그 결과에 많은 차이가 있었음. - 제이쿼리에서는 이 문제들을 모두 해결함. 2) 쉽고 편리한 애니메이션 효과 기능 구현 - 자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 했고, 개발하는 데도 많은 ..
14. 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..
15. 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; } // 에 마우스를 올릴 경우엔 글자 색상이 빨간색으로 바..
16. 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 이하에서만 실행..
17. 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..
18. 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..
19. 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(){..
20. 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
21. 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..
22. 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..
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 .... 내용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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
24. 2017.05.21 문서 객체 모델 (DOM)

    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 DOM 객체 선호하는 음식 한식 김치 불고기 비빔밥 양식 돈까스 피자 파스타 document.getElementsByTagName("h1")[0].style.color="green"; document.getElementById("title").style.color="red"; var myList=document.getElementById("food_1").getElementsByTa..
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 36 37 38 39 40 41 42 43 44 function info1() { var os=navigator.userAgent.toLowerCase(); var info_wrap=document.getElementById("info_wrap"); if(os.indexOf('windows')>=0) { info_wrap.innerHTML="윈도우"; } else if(os.indexOf('macintosh')>=0) { info_wrap.innerHTML="맥킨토시"; } else if(os.indexOf('iphone')>=0) {..
26. 2017.05.21 navigator 객체

    1 2 3 4 5 6 7 8 9 10 document.write("appCodeName: "+navigator.appCodename," "); document.write("appName: "+navigator.appName," "); document.write("appVersion: "+navigator.appVersion," "); document.write("language: "+navigator.language," "); document.write("product: "+navigator.product," "); document.write("platform: "+navigator.platform," "); document.write("userAgent: "+navigator.userAgent," ")..
27. 2017.05.21 history 객체

    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 첫 페이지 2페이지 이동 두 번째 페이지 3페이지 이동 이전 페이지> 다음 페이지 세 번째 페이지 1단계 이전 페이지 2단계 이전 페이지 Colored by Color Scripter cs 소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
28. 2017.05.21 location 객체

    1 2 3 4 5 6 7 8 document.write("href: "+location.href, " "); document.write("hash: "+location.hash, " "); document.write("hostname: "+location.hostname, " "); document.write("host: "+location.host, " "); document.write("protocol: "+location.protocol, " "); Colored by Color Scripter cs 소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
29. 2017.05.21 screen 객체

    1 2 3 4 5 6 7 8 document.write("width: "+screen.width, " "); document.write("height: "+screen.height, " "); document.write("availWidth: "+screen.availWidth, " "); document.write("availHeight: "+screen.availHeight, " "); document.write("colorDept: "+screen.colorDepth, " "); Colored by Color Scripter cs 소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
30. 2017.05.21 window 객체

    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 window 객체 *{margin:0; padding:0;} window 객체 window.open("winpopup.html","pop1","width=300, height=400, left=300, top=10, scrollbars=no, toolbars=no, location=no"); 이지 window 객체..