🗒️ 2017/05/21 (31)

1. 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..
2. 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; } // 에 마우스를 올릴 경우엔 글자 색상이 빨간색으로 바..
3. 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 이하에서만 실행..
4. 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..
5. 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..
6. 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(){..
7. 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
8. 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..
9. 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..
10. 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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
11. 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..
12. 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) {..
13. 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," ")..
14. 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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
15. 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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
16. 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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
17. 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 객체..
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 var date=new Date(); var y=date.getFullYear(); var m=date.getMonth(); var d=date.getDay(); var theDate=new Date(y,m,1); var theDay=theDate.getDay(); var last=[31,28,31,30,31,30,31,31,30,31,30,31]; if(y%4&&y%100!=0 || y%400==0) lastDate=last[1]=2..
19. 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 var str="Html Css Jquery"; var reg1=/css/; // var reg1=new RegExp)("css") // 변수 str에 데이터가 reg1에 정규 표현 규칙을 잘 지켰으면 true를 반환하고, 안 지켰을 경우에는 false를 반환함. var result_1=reg.test(str); document.write(result_1, " "); // 옵션에 'i'를 입력하면 영문 대소문자를 구분하지 않음. var reg2=/css/i..
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 var userEmail=prompt("당신의 이메일 주소는?", ""); var arrUrl=[".co.kr",".com",".net",".or.kr","go.kr"]; var check1=false; var check2=false; if(userEmail.indexOf("@")>0) check1=true; for(var i=0; i0) check2=true; } if(check1&&check2) { document.write(uderEmail); } else { alert("이메일 형식이 잘못되었습니다."); } Colored by Color Scripter cs 소스 출처 : Do It! 자바스크립트+제..
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 var t="Hello Thank You good luck to you"; document.write(t.charAt(16), " "); // 인덱스 16에 저장된 문자를 볼러옴. -> "g" document.write(t.indexOf("you",16), " "); // 문자열 왼쪽에서부터 최초로 발견된 "you"의 인덱스 값을 반환함. -> 12 document.write(t.lastIndexOf("you"), " "); // 문자열 인덱스 16 위치부터 최초로 발견된 "you"의 인덱스 값을 반환함. -> 29 document.write(t.alstIndexOf("y..
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 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 var d=[30, "홍기동", true]; document.write(d[0], " "); document.write(d[1], " "); document.write(d[2], " "); for(var i=0; i var greenLine=["사당","교대","방배","강남"]; var yellowLine=["미금","정자","모란","수서"]; greenLine.spl..
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 var num=2.1234; var maxNum=Math.max(10, 5, 8, 20); // 최댓값 반환 var minNum=Math.min(10, 5, 8, 20); // 최솟값 반환 var roundNum=Math.round(num); // 반올림 값 반환 var floorNum=Math.floor(num); // 소수점에서 무조건 내림 var ceilNum=Math.ceil(num); // 소수점에서 무조건 올림 var rndNum=Math.random(); // 0~1 사이의 난수 발생 var piNum=Math.PI; // 원주율 상수 반환 document.write(maxNum, " ");..
24. 2017.05.21 숫자 객체

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var num=3.456784; var num2=70000; var num3="30.5px"; var num4=40; document.write("표현 가능한 가장 큰 수:"+Number.MAX_VALUE, " "); document.write("표현 가능한 가장 작은 수:"+Number.MIN_VALUE, " "); document.write("숫자가 아닌 경우의 표기:"+Number.NaN, " "); document.write("무한대 수 표기:"+Number.POSITIVE_INFINITY, " "); document.write("음의 무한대 수 표기:"+Number.NEGATIVE_INFINITY, " "..
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 var tv=new Object(); tv.width="30cm"; tv.height="25cm"; tv.weight="20kg"; tv.color="white"; tv.off=function(){ document.write("전원 off", " "); } document.write(tv.width, " "); document.write(tv.height, " "); document..
26. 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 61 62 63 64 65 66 var year=prompt("현재 몇 년입니까?","0000"); var mon=prompt("현재 몇 월입니까?", "0"); var last_day; switch(mon){ case "1": last_day=31; break; case "2": last_day=28; /* 현재 연도가 4년 주기이고 100년 주기는 아닌경우 또는 400년 주기로 윤년. 윤년은 2월은 ..
27. 2017.05.21 구구단 출력 프로그램

    1 2 3 4 5 6 7 8 9 for(var i=2; i
28. 2017.05.21 Boolean/Typeof/Texttable/If/For/While/Switch/Confirm Test

    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 121 122 123 124 125 126 12..
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 27 28 29 30 31 32 33 맛보기 예제 // 지바스크립트 선언문 var age = prompt("당신의 나이는?", "0"); // 질의 응답 창을 띄움 if(age>=20) { document.write("당신은 성인입니다."); } else { document.write("당신은 미성년자입니다."); } document.write("welcome!"); console.log("javascript"); //* 자바스크립트 실행문; Colored by Color Scripter cs 소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
30. 2017.05.21 이벤트 객체 (Event Object)

    * 이벤트 객체 생성하기 - 이벤트 객체는 사이트에서 방문자가 이벤트를 발생시킬 때마다 생성할 수 있음. - 이렇게 생성된 이벤트 객체의 속성을 이용하면 다양한 이벤트 정보를 가져올 수 있음. - 이벤트 객체 생성은 IE 8 이하 버전의 브라우저와 그 외의 브라우저(파이어폭스, 크롬, 사파리, 오페라, IE(9 이상) 등)에서 각각 방법이 다름. [파이어폭스, 크롬, 사파리, 오페라, IE 9 이상에서 이벤트 객체 생성하기] 1 2 3 4 5 document.onkeydown=function(e){ alert(e); } cs [IE 8 이하 브라우저에서 이벤트 객체 생성하기] 1 2 3 4 5 document.onkeydown=function(e){ alert(window.event); } cs - IE..