🗒️ 2017/05 (184)

1. 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..
2. 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..
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 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! 자바스크립트+제..
4. 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..
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 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..
6. 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, " ");..
7. 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, " "..
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 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..
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 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월은 ..
10. 2017.05.21 구구단 출력 프로그램

    1 2 3 4 5 6 7 8 9 for(var i=2; i
11. 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..
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 맛보기 예제 // 지바스크립트 선언문 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! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
13. 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..
14. 2017.05.21 이벤트 (Event)

    * 이벤트란? - 브라우저에서 방문객이 취하는 모든 동작을 이벤트라고 함. - 이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 함. - 즉, 이벤트 발생 시 자바스크립트 코드가 실행됨. - 이벤트 종류 종류 설명 마우스 이벤트 onmouseover 마우스가 지정한 요소에 올라갔을 때 발생함. onmouseout 마우스가 지정한 요소에서 벗어났을 때 발생함. onmousemove 마우스가 지정한 요소 영역에서 움직일 때 발생함. onclick 마우스가 지정한 요소를 클릭했을 때 발생함. ondblclick 마우스가 지정한 요소를 연속 두 번 클릭했을 때 발생함. 키보드 이벤트 onkeypress 지정한 요소에서 키보드가 눌렸을 때 발생함. onkeydown 지정한 요소에서 키보드..
15. 2017.05.20 함수 (Function)

    * 기본 함수 정의문 - 함수를 사용하여 실행문을 저장한 것을 함수 정의문이라고 함. - 함수 정의문의 기본형 function 함수명() { 일련의 실행문; } 참조 변수 = function() { 일련의 실행문; } - 정의되어 있는 함수를 호출하는 기본형 함수명(); 또는 참조 변수(); * 매개 변수가 있는 함수 정의문 - 기본형 function 함수명(매개 변수 1, 매개 변수 2, ... , 매개 변수 n) { 스크립트 실행문; } 함수명(데이터 1, 데이터 2, ..., 데이터 n); * 내장 함수 - 내장 함수는 자바스크립트 엔진에 내장된 함수 정의문을 말함. - 내장 함수는 함수 정의문의 선언 없이 단지 함수 호출만으로 자바스크립트에 이미 내장된 함수를 사용할 수 있음. - 내장 함수의 종..
16. 2017.05.20 문서 객체 모델(DOM)

    * 문서 객체 모델(DOM) - (X)HTML 문서의 구조를 가리켜 문서 객체 모델(DOM: Document Object Model)이라고 함. - (X)HTML 각 태그마다 기능과 속성이 있음. - (X)HTML 태그는 각각의 기능(Method)과 속성(Properties)을 갖고 있는 문서 객체임. - 자바스크립트의 문서 객체 모델(DOM)은 IE 8 이하 버전과 그 외 파이어폭스, 크롬, 사파리 등의 브라우저 간에 호환성이 떨어진다는 단점이 있음. - 하지만 제이쿼리는 이런 호환성이 떨어지는 단점들을 모두 해결함. [선택자] - (X)HTML에서 사용하는 스타일(CSS)과 자바스크립트 내에서 사용하는 스타일은 모두 (X)HTML의 선택한 요소에 디자인 속성을 바꿀 때 사용함. - 하지만 (X)HTM..
17. 2017.05.20 브라우저 객체 모델(BOM)

    * 브라우저 객체 모델(BOM) - 브라우저에 내장된 객체를 '브라우저 객체'라고 함. - window는 브라우저 객체의 최상위 객체가 됨. - window 객체에는 하위 객체를 포함하고 있음. - 즉, 계층적 구조로 이루어져 있으며, 이를 일컬어 브라우저 객체 모델(BOM: Browser Object Model)이라고 함. [window 객체] - window 객체 메서드 종류 종류 설명 open() 새 창을 열 때 사용함. alert() 경고 창을 띄움. prompt() 질의응답 창을 띄움. confirm() 확인/취소 창을 띄움. moveTo() 창의 위치를 이동시킬 때 사용함. resizeTo() 창의 크기를 변경시킬 때 사용함. setInterval() 일정 간격으로 지속적으로 실행문을 실행시킬..
18. 2017.05.20 객체 / 내장객체

    * 객체란? - 자바스크립트는 객체(Object) 기반 프로그래밍 언어. - 객체를 구성하는 요소로는 속성(Property)과 기능(Method)가 있음. - 자바스크립트 객체의 메소드와 속성을 사용하는 기본형 1. 객체.메서드() // 갹체의 매서드를 실행함. 2. 객체.속성; 또는 객체.속성=값; // 객체의 속성값을 가져옴. || 객체의 속성값을 바꿈. * 객체의 종류 - 자바스크립트의 객체는 크게 내장 객체, 브라우저 객체 모델(BOM: Browser Object Model), 문서 객체 모델(DOM: Document Object Model)로 나눌 수 있음. 1) 내장 객체 - 내장 객체는 자바스크립트 엔진에 내장되어 있어, 필요한 경우 생성해 사용할 수 있음. - 내장 객체로는 문자(Strin..
19. 2017.05.20 자바스크립트 기초 문법

    * 자바스크립트 선언문 - 자바스크립트 선언문은 태그 영역 또는 태그 영역에 선언하면 됨. 1 2 3 자바스크립트 실행문; cs * 자바스크립트 주석 처리 // 한 줄 설명글인 경우 /* 설명글이 여러 줄인 경우 이렇게 처리함 */ * 내부 스크립트 외부로 분리하기 - 외부 자바스크립트 연동 코드로 파일을 연결하는 기본형 * 자바스크립트 코드 입력 시 주의할 점 1. 자바스크립트는 대·소문자를 가려서 씀 2. 실행문을 마치고 나서는 세미콜론(;)을 쓰는 것이 좋음. 세미콜론을 쓰지 않으면, 한 줄에 여러개의 실행문을 작성할 때 문제가 생김. 3. 실행문을 작성할 때는 한줄에 한 문장만 작성하는 것이 가독성을 위해 좋음. 4. 문자형 데이터를 작성할 때는 큰따옴표("")와 작은따옴표('')겹침 오류를 주의..
20. 2017.05.20 CSS 요점 정리

    * CSS 선언문 - 선언문은 CSS를 HTML의 내부에 작성할 때 반드시 필요함. - 만일 이 선언문이 없으면 브라우저는 CSS를 HTML 언어로 인식하게 됨. * 외부 스타일 연동 방식 link 방식 import 방식 @import:url("경로"); * 선택자의 종류 종류 사용 예 설명 전체 선택자 *{속성:값;} 전체 요소를 선택할 때 사용 요소명 선택자 요소명{속성:값;} 예) h1{속성:값;} 태그 이름(요소명)으로 선택할 때 사용 아이디 선택자 #아이디명{속성:값;} 아이디를 가진 요소를 선택할 때 사용(단독 사용 시) 클래스 선택자 .클래스명{속성:값;} 클래스를 가진 요소를 선택할 때 사용(반복해서 사용 시) 가상 클래스 선택자 a:link{속성:값;} 링크 걸린 텍스트 선택 a:visi..
21. 2017.05.20 (X)HTML 요점 정리

    *요소의 종류와 특징 구분 블록 요소 인라인 요소 범용 요소 특징 - 줄 바꿈 속성을 가지고 있음. - 기본 너비 속성이 100%임. - 블록 요소를 포함할 수 없지만, 예외인 요소도 있음. - 인라인 요소를 포함할 수 있음. - 줄 바꿈 속성이 없음. - 내용만큼 너비가 유지됨. - 너비와 높이의 속성을 사용할 수 없음. - 블록 요소를 포함할 수 없으며, 인라인 요소는 포함할 수 있음. - 블록 요소임에도 불구하고 모든 요소를 포함할 수 있음. 종류 ~, , , , , , , , , , , , , , , , , , , , , , , , (p 요소만 가능) * 문단 태그 종류 설명 종류 설명 ~ 제목 요소 / 숫자가 작을수록 큰 제목 이미지 요소 단락 구분 요소 링크 요소 주소 태그, 주소를 작성할 때..
22. 2017.05.19 WebSocket

    * WebSocket이란? - WebSocket은 서버와 실시간으로 쌍방향 통신을 하기 위한 장치임. - 통상 HTTP 프로토콜에서는 리퀘스트/리스폰스 모델로 통신을 수행하지만, WebSocket에서는 TCP/IP상의 독자적인 프로토콜을 통해 통신을 수행함. - WebSocket은 드래프트75(hixie-75)판 이전과 드래프트76(ietf-hybi-00)판 이후의 사양과 프로토콜의 호환성이 없음. - 웹 브라우저가 자원하고 있는 버전과 서버가 지원하는 버전이 일치하도록 해야 할 필요가 있음. IE Firefox Chrome Safari Opera hixie-76/hybi-00 6 5.0.1 11(무효)※ hybi-07 6 hybi-10 7 14 RFC 6455 10 11 16 ※ Opera에서는 기본값..
23. 2017.05.19 Server-Sent Events

    * Server-Sent Events란? - 보통 서버 측의 상태는 클라이언트가 능동적으로 액세스를 하지 않으면 알 수 없음. - Server-Sent Events는 이러한 제한을 넘어서 서버 측의 상태 변화를 실시간으로 클라이언트에게 통지하기 위한 장치임. 웹 서버 ----------이벤트 스트림 (백그라운드) -------------> 웹 브라우저 ------------------------------------> 웹 서버 서버 측의 상태 변화를 클라이언트에게 통지함. 일단 이벤트 스트림이 완료되면 클라이언트는 자동으로 다시 요청함. - 이벤트 스트림은 통지 내용을 기술한 HTTP 리스폰스인데, 백그라운드에서 자동으로 계속 송수신됨. - 이벤트 스트림의 송수신은 서버 측이 HTTP로 규정된 청크 송신..
24. 2017.05.19 Web Messaging

    * Web Messaging이란? - JavaScript에서는 오리진이 다른 문서 간에 보안상의 이유로 데이터를 주고받거나 오브젝트에 액세스하는 데 제한이 있음. - Web Messaging은 이러한 제한을 넘어서 안전하게 데이터를 주고받을 수 있는 API임. - 오리진은 문서의 URL 중 스킴, 도메인, 포트를 합친 것을 말함. - Web Messaging에는 아래의 두 가지 API가 있음. 1. 크로스 도큐먼트 메시징 : 탭이나 창 단위로 통신을 구현함. 2. 채널 메시징 : 좀 더 작은 단위로 통신을 구현함. * 크로스 도큐먼트 메시징의 이용 - 크로스 도큐먼트 메시징을 이용하려면 송신처의 window 오브젝트의 postMessaging() 메서드를 호출해야 함. var targetWindow = ..
25. 2017.05.19 ApplicationCache

    * ApplicationCache란? - ApplicationCache는 이미지나 HTML/CSS/JavaScript와 같은 리소스의 캐시를 로컬 환경에 마련하는 것으로, 오프라인 시에도 온라인 시와 똑같이 사이트나 웹 애플리케이션을 이용할 수 있도록 하는 장치임. * manifest 파일을 사용하여 캐시 지정하기 - 캐시할 리소스는 manifest 파일에서 정의함. - manifest 파일은 UTF-8 형식으로된 텍스트 파일로, html 태그의 manifest 속성을 사용하여 지정함. - 웹 서버가 송신하는 MIME 타입의 설정은 text/cachemanifest로 해 둚. 1 2 3 4 5 6 7 8 9 10 예제 Colored by Color Scripter cs [manifest 파일의 서식] -..
26. 2017.05.19 Web Workers

    * Web Workers란? - JavaScript에서 시간이 걸리는 처리를 수행하면 화면이 멈추고 사용자가 기다려야 하는 일이 있음. - Web Workers는 이러한 무거운 처리를 백그라운드에서 수행하게 함으로써 사용자와의 통신에 영향을 주지 않도록 할 수 있음. [전용 워커와 공유 워커] - Web Workers에서는 백그라운드 처리를 '워커'라 부르는 실행 단위를 사용하여 수행함. - 워커에는 두 가지 종류가 있음. 1) 전용 워커 : 자신의 생성처하고만 통신을 함. 2) 공유 워커 : 여러 상대와 통신을 할 수 있음. [데이터 송수신] - 데이터를 송수신하는 방법은 워커 측과 호출하는 측이 똑같음. 송신 측 -------------------------------------- 데이터 ------..
27. 2017.05.19 File API

    * FIle API란? - File API는 사용자의 환겨에 저장된 파일의 속성이나 내용을 구할 수 있는 API를 말함. - File API에서 취급할 수 있는 파일은 두 종류임. 1. 로 선택한 파일 2. 드래그 앤 드롭한 파일 * File 오브젝트 - 파일을 조작하려면 파일을 나타내는 File 오브젝트를 사용해야 함. - File 오브젝트를 구하는 방법은 타입에 따라 다름. [의 경우] - change 이벤트가 발생했을 때 input 요소의 file 속성에 선택한 파일의 목록이 배열로 저장됨. e.onchange = function() { var f = e.files[0]; // 첫 번째(0번) 파일의 File 오브젝트를 구하고 있음. ※ e는 input 요소의 오브젝트 } [드래그 앤 드롭의 경우]..
28. 2017.05.19 Indexed Database API

    * Indexed Database API란? - Indexed Database API는 Web Storage보다 본격적인 데이터 저장 장치임. - 일반적인 데이터베이스처럼 트랜잭션(일련의 처리를 한 덩어리로 해서 실패한 경우 전체를 원래 대로 되돌리는 장치)을 지원함. [데이터 저장 방법] - Indexed Database API는 관계형 데이터베이스와는 조금 다른 저장 방법을 사용함. - 값을 구할 때 색인이 되는 키(키패스)를 하나 지정할 수 있음. - 검색을 효율적으로 하기 위한 인덱스를 지정할 수 있음. - JavaScript의 오브젝트로 되어 있음. - 값의 행 수가 달라도 저장할 수 있음. * 데이터베이스의 작성과 접속 - 데이터베이스를 작성하려면 window.indexedDB의 open() ..
29. 2017.05.19 Web Storage

    - JavaScript로 데이터를 로컬 환경에 손쉽게 저장할 수 있음. * Web Sotrage란? - Web Storage는 데이터를 사전과 같은 형식으로 웹 브라우저에 저장하는 장치임. - Cookie와는 달리 서버와의 통신으로 데이터가 보내지는 일은 없음 - 또한 4KB라는 용량 제한이 있는 Cookie보다 큰 데이터를 취급할 수 있음. - 키와 값이 세트로 저장됨. * 로컬 스토리지와 세션 스토리지 - Web Storage에는 로컬 스토리지와 세션 스토리지가 있음. - 세션 스토리지는 저장기간이 동일 세션으로 한정된다는 점이 다름. - 어떤 경우이든 오리진을 넘어서 데이터를 공유할 수는 없음. - 세션 스토리지는 일련의 조작 사이에서만 데이터가 저장됨. - 로컬 스토리지에 저장한 데이터는 웹 브라..
30. 2017.05.19 이미지 표시

    * Image 오브젝트 작성하기 - 이미지를 표시하기 전에 JavaScript로 이미지를 다루기 위한 Image 오브젝트를 작성함. [파일을 사용하여 만드는 방법] var image = new Image(); image.src="sample.jpg"; [img 요소에서 꺼내는 방법] [HTML] [CSS] var image = document.getElementById("sample1"); * 이미지 표시하기 - 이미지를 표시하려면 drawImage() 메서드를 지정해야 함. - drawImage 메서드의 작성 방법은 세 가지가 있음. drawImage(image, dx, dy); drawImage(image, dx, dy, dw, dh); 이미지를 붙여 넣을 위치와 크기 drawImage(image, ..