🗒️ Source Code/JavaScript (35)

1. 2022.06.03 [JavaScript] jQuery를 사용하지 않고 최상단 화면 이동 기능 구현하기

   jQuery를 사용하지 않고 최상단 화면 이동 기능 구현하기 들어가며 제이쿼리(jQuery)를 사용하지 않고, 자바스크립트(JavaScript)만으로 화면의 최상단으로 이동할 수 있는 버튼을 만들 수 있다. 방법 1 : 스크롤 이동 효과를 주며 이동하기 ID가 "scrollup"인 버튼을 누르면 스크롤이 이동하는 효과와 함께 화면의 최상단으로 이동하도록 해보자. HTML JavaScript var scrollBtn = document.getElementById('scrollup'); // 10 밀리세컨드(ms) 마다 -50px 씩 스크롤된다. const scrollWindow = function () { if (window.scrollY != 0) { setTimeout(function () { wind..
2. 2022.05.12 [JavaScript] 특정 요소를 새로운 새로운 창으로 띄우기

   특정 요소를 새로운 창으로 띄우기 개요 자바스크립트를 이용하여 특정 요소를 새 창으로 띄울 수 있도록 할 수 있다. 코드 See the Pen PopUpElem (with JavaScript) by Sangsoon Kim (@starrykss) on CodePen.
3. 2022.05.09 [JavaScript] 디데이 카운터(D-Day Counter) 만들기

   디데이 카운터(D-Day Counter) 만들기 들어가며 자바스크립트를 이용하여 디데이 카운터를 만들어보자. 코드 See the Pen Untitled by Sangsoon Kim (@starrykss) on CodePen. 사파리(Safari) NaN 이슈 해결하기 사파리(Safari) 또는 IE8 이하의 브라우저를 사용할 경우, Date() 함수의 출력 결과가 NaN으로 표시된다. 이 문제를 해결하기 위해 입력값을 넣을 때, 다음과 같이 일(DD)과 시간(HH) 사이에 T를 넣어준다. new Date('2014-02-18T15:00:48') 혹은 다음과 같이 replace() 함수를 사용한다. new Date('2014-02-18T15:00:48'.replace(/\s/, 'T')). 참고 : htt..
4. 2022.04.27 [JavaScript] 공백이 검색되지 않도록 하기 (검색창 구현)

   공백이 검색되지 않도록 하기 (검색창 구현) 개요 검색창(Search Bar) 기능을 구현할 때, 자바스크립트(JavaScript)를 이용하여 공백의 내용이 검색되지 않도록 설정할 수 있다. 방법 검색창의 내용이 비어있는지 확인하는 알고리즘이 들어있는 함수를 생성한다. getElementById() 함수를 사용하여 검색창(searchbar)에 있는 값(value)을 가져온 후, trim() 함수를 이용하여 공백('')을 기준으로 잘라준다. trim() 함수를 사용한 후의 값의 공백일 경우, 내용이 비어있다는 메시지와 함께 함수를 종료시켜준다. 그렇지 않을 경우 검색 작업을 수행시키도록 한다. 전송(submit) 버튼의 onclick 속성에 함수를 넣어준다. 사용 예 HTML JavaScript funct..
5. 2022.04.12 [JavaScript] Scroll Indicator 구현하기

   Scroll Indicator 구현하기 개요 자바 스크립트를 이용하여 Scroll Indicator 를 구현할 수 있다. 코드 See the Pen Untitled by Sangsoon Kim (@starrykss) on CodePen.
6. 2020.11.05 Checkbox, Radio, Select에서 선택된 항목 출력하기

   Checkbox, Radio 또는 Select 에서 선택한 항목을 가져와 자바스크립트로 출력하는 코드각각 사용법이 다르다는 것을 명심하자. 1. Checkbox - 코드 1234567891011121314151617181920212223242526272829303132333435363738394041 Document function output(form) { var a = "당신의 취미는 \n"; if (form.check1.checked) { // checked 속성 확인 a += form.check1.value + "\n"; } if (form.check2.checked) { // checked 속성 확인 a += form.check2.value + "\n"; } if (form.check3.chec..
7. 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..
8. 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; } // 에 마우스를 올릴 경우엔 글자 색상이 빨간색으로 바..
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 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 이하에서만 실행..
10. 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..
11. 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..
12. 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(){..
13. 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
14. 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..
15. 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..
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 .... 내용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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
17. 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..
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 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) {..
19. 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," ")..
20. 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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
21. 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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
22. 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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
23. 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 객체..
24. 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..
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 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..
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 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! 자바스크립트+제..
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 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..
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 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..
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 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, " ");..
30. 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, " "..