2013년 2월 27일 수요일

[JS] jQuery - 메소드

jQuery에는 다양하고 유용한 라이브러리가 굉장히 많다. 그렇기 때문에 많은 개발자들이 jQuery를 사용하는 것이다. 어떠한 메소드들이 있는지 살펴보자.

1. 배열관리 메소드
 $.each(objectArray, function(index, object){})
예)
$.each(array, function(index, obj){//첫 번째 인자로 배열의 인덱스가 오고 두 번째
var output = "";       //인자로 인덱스에 해당하는 객체가 넘겨진다.

output += "<a href=" + obj.link + ">";
output += "    <h1>" + index + " : " + obj.name + "</h1>";
output +="</a>"

document.body.innerHTML += output;
})

$(selector).each(function(index, object){})
예)
$(array).each(function(){//인자로 넘겨주는 값이 없을 때는 this로 객체에 접근 가능
var output = "";

output += "<a href=" + this.link + ">";
output += "    <h1>" + this.name + "</h1>";
output +="</a>"

document.body.innerHTML += output;
})



2. 객체 확장 메소드
$.extend(object, 속성 추가);
예)
var object = {};//빈 객체 생성

$.extend(object, {
    name: "용",
    gender: "남"
}


3. 필터링 메소드
$(selector).filter(selector);
filter의 인자의 선택자와 일치하는 배열 리턴(하나일 경우 하나의 객체만 리턴)


4. 특정 태그 선택 메소드
$(selector).find("tagName");
선택자 중에 tagName을 찾아 요소를 배열로 리턴(하나일 경우 하나의 객체만 리턴)

5. 속성 설정 및 속성 값 반환 메소드
$(selector).attr(name, value);
$(selector).attr(name, function(){});
$(selector).attr(objec);//object속성값 반환

그밖에 메소드들
css() : 스타일과 관련된 모든 기능을 수행(예: .css("font-size", "12 px"))
size() : 객체수를 반환
addClass() : 클래스 속성 추가
removeClass() : 클래스 속성 제거
attr() : 메서드의 인자를 통해 속성추가, 속성값 변경, 속성값 반환
removeAttr() : 속성을 제거
get() : jQuery객체를  DOM객체의 배열로 리턴(인자로 인덱스를 넣으면 배열에서 인덱스에 해당하는 DOM객체를 리턴)
not(expression) : 표현식에 일치하는 객체를 제거한 배열리턴
has(expression) : 표현식과 일치하는 자식을 가진 객체의 배열리턴
is(expression) : 표현식과 일치하는 객체의 배열리턴
end() : jQuery체인에 주로 이용되며 이전선택으로 돌아간다.
andSelf() : 체인에서 이전 두개의 선택자를 하나로 합친다.
html() : 객체 내부의 글자와 관련된 모든 기능 수행(html태그 인식)
text() : 객체 내부의 글자와 관련된 모든 기능 수행
find() : 특정 태크를 선택
remove() : 객체를 제거
empty() : 객체의 후손을 모두 제거
clone() : 객체를 복사
offset() : 객체의 위치를 조회하거나 지정
wrap() : 객체를 싸버린다. 선택한 객체를 자식으로 두고 싶을 때 사용.
$() : 객체 생성
$(A).appendTo(B) : A를 B의 뒷 부분에 추가(자식(A)을 부모(B)내용에 뒤에 붙인다)
$(A).append(B) : B를 A의 뒷 부분에 추가
$(A).prependTo(B) : A를 B의 앞 부분에 추가(자식(A)를 부모(B)내용에 앞에 붙인다)
$(A).prepend(B) : B를 A의 앞 부분에 추가
$(A).insertAfter(B) : A를 B의 뒤에 추가
$(A).After(B) : B를 A의 뒤에 추가(형제 B가 A의 뒤에 추가)
$(A).insertBefore(B) : A를 B의 앞에 추가
$(A).before(B) : B를 A의 앞에 추가(형제 B가 A의 앞에 추가)

2013년 2월 26일 화요일

[JS] jQuery - 이벤트

 자바스크립트에서 브라우저의 이벤트를 연결 시키는 이벤트 모델에 대해 공부하였다. DOM 레벨에 따른 이벤트 연결 방식이 몇가지 있었다. 그러나 주의해야할 점은 항상 브라우저간 차이점을 고려하여 코딩을 해야했었다.(표준 브라우저, IE브라우저)

그러나 jQuery에서는 크로스 브라우징이 가능하다. 이는 표준 브라우저와 IE브라우저에 관계없이 스크립트 제작이 가능하다. 이것이 jQuery의 장점이다.

 jQuery의 이벤트는 기존 자바스크립트의 이벤트가 모두 존재한다. 그러나 자바스크립트의 이벤트 연결보다 훨씬 간편하다.


$(selector).bind(eventName, data, handler)
$(selector).bind(object)
이벤트 할당 함수
eventName : 이벤트 이름(예 : click)
data : 핸들러에 사용할 데이터(생략가능)
handler : 이벤트 핸들러

이벤트종류












$(selector).unbind(event)
$(selector).unbind(eventName)
$(selector).unbind(eventName, handler)
이벤트 핸들러 제거
event : 이벤트를 발생시킨 객체의 정보

$(selector).toggle(handler, ...,handler)
click이벤트를 여러 핸들러로  번갈아가며 실행

$(selector).hover(handler, handler)
mouseenter이벤트와 mouseleave이벤트를 동시에 연결

$(selector).delegate()
현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결

$(selector).live()
현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결

$(selector).one(eventName, handler)
이벤트를 한 번만 연결

$(selector).trigger(eventName)
$(selector).trigger(eventName, data)
인벤트를 강제로 발생(사용자의 입력이 따로 필요없이 이벤트를 실행시킴)

이벤트 객체
이벤트를 연결할때 핸들러에는 event객체가 자동으로 인자로 넘어간다.

속성
event.pageX : 브라우저의 화면을 기준으로 한 마우스의 X 좌표
event.pageY : 브라우저의 화면을 기준으로 한 마우스의 Y 좌표
event.preventDefault() : 기본 이벤트 제거
event.stopPropagation() : 이벤트 버블링 제거

이벤트 통합 메서드
jQuery에서는 이벤트를 통합하여 연결시키는 on()과 off()를 권장하고 있다.

on() : 이벤트를 연결
off() : 이벤트를 제거
$(selector).on(eventName, handler) - bind()와 같은 역할
$(selector).off(eventname[handler,,,]) - nubind()와 같다

[JS] jQuery - 선택자

CSS에서 선택자에 대해서 공부해 보았다. HTML 문서에서 가장 중요한 부분은 내가 원하는 요소를 얼마나 잘 가져오는지가 중요하다.

CSS에서 선택자를 이용하여 원하는 요소에 원하는 스타일을 줄 수 있었고 자바스크립트에서도 DOM을 통해 원하는 객체를 어떻게 가져와야하는지가 중요했다. 왜냐? 객체를 가져와야 그 속성을 추가하거나 제거하고 메소드를 이용하면서 프로그램을 제작할 수 있다.

사실 조작할 대상을 잘 선택하고 조작해야한다. 그것이 프로그램의 중요한 원리 중 하나이다.

선택자는 jQuery에서도 굉장히 중요하다. 선택자만 잘 알아도 jQuery의 반을 마스터 한 것이다. CSS를 하면서 공부했던 선택자를 잘 상기하도록 하자.

일단 기본적으로 알아야 할 내용은 $()에 css선택자 문자열을 전달하면 일치하는 요소의 집합을 나타내는 jQuery를 반환한다는 것이다. 즉, 조회의 결과로 하나의 요소만 일치한다면 하나의 객체만을 얻어서 원하는 작업을 처리해 줄 수 있지만 집합을 얻을 때가 많을 것이고 이를 잘 처리해야하는 것이 프로그래머의 몫이다.(반환되는 요소집합이 배열과 유사하기는 하지만 실제 배열은 아니다)

1. 전체선택자 - $("*")
2. 태그선택자 - $("태그명")
3. 아이디선택자 - $("#아이디")
4. 클래스선택자 - $(".클래스")
5. 자식선택자 - $("부모 > 자식")
6. 후손선택자 - $("부모 후손")
7. 속성선택자
요소[속성] : 특정 속성을 가진 요소(객체) 선택
요소[속성=값] : 해당하는 속성과 값이 일치하는 요소 선택
요소[속성~=값] : 속성에 특정한 값을 단어로써 포함하는 요소 선택
요소[속성^=값] : 속성에 특정값으로 시작하는 요소 선택
요소[속성$=값] : 속성에 특정값으로 끝나는 요소 선택
요소[속성*=값] : 속성에 특정값을 포함하는 요소 선택


8. 입력(input) 양식필터  선택자
요소:button = input 태그 중 type속성이 button인 요소 선택
(종류 : button, checkbox, file, image, password, radio, reset, submit, text)
요소:checked = 체크된 input요소 선택
요소:disabled = 비활성화된 input요소 선택
요소:enabled = 활성화된 input요소 선택
요소:focus = 입력대기 중인 input요소 선택
요소:input = 모든 input요소 선택
요소:selected = option요소 중 선택된 요소 선택

9. 선택필터 선택자
요소:odd = 홀수 번째에 위치한 요소 선택
요소:even = 짝수 번째에 위치한 요소 선택
요소:first = 첫 번째 위치한 요소 선택
요소:last = 마지막에 위치한 요소 선택
요소:animated : 현재 애니매이션이 적용되고 있는 요소 선택
요소:header : 헤더 요소 선택(h1~h6)
요소:hidden : 감춰진 요소 선택
요소:visible : 보여지는 요소 선택


10. 함수필터 선택자
요소:contains(문자열) = 특정 문자열을 포함하는 요소 선택
요소:eq(n) = n번째에 위치하는 요소 선택
요소:gt(n) = n번째의 위치를 초과하는 요소 선택
요소:has(selector) = 선택자로 선택한 요소를 가지고 있는 요소 선택
요소:lt(n) = n번째 위치 미만인 요소 선택
요소:not(selector) = 선택자로 선택한 요소를 가지고 있지 않은 요소 선택
요소:nth-child(3n+1) = 3n+1번째 위치하는 요소 선택(1, 4, 7, 10...)


몇가지 예를 보도록하자.

p:odd = p태그 중 홀수번째 태그 선택
ul li:last-child = ul태그 안에 li태그 중 마지막 태그 선택
table#laguage td:nth-child(1) = laguage라는 아이디를 가진 테이블 안에 td태그 중 인덱스가 1인 태그 선택
$("input[type=checkbox][checked]")
타입이 checkbox이고 체크되어진 input객체를  jQuery객체로  선택.
checkbox:checked:enabled = 활성화되고 선택이 되어 있는 체크박스 객체 선택
input:not(:checkbox) = input객체 중 checkbox가 아닌 객체 선택
img:not([src*="dog"] = img객체 중 src속성에 "dog"를 포함하지 않는 객체 선택
div:has(span) = div객체 중 span객체를 가지는 객체 선택




[JS] jQuery

 인터넷에는 다양한 어플리케이션(RIA)가 많이 존재한다. 웹서핑을 하다보면 무수히 많은 웹 어플리케이션을 만나게 된다. 하지만 매번 install을 해야만 하고 웹서핑을 하면 할수록 내 컴퓨터에는 잘 알지도 못하는 프로그램들이 수두룩하다.

이것은 플러그인 기반의 RIA들 때문인데 이러한 단점을 보완하기 위해 AJAX가 등장하게 되었다. 브라우저 기반의 다양한 어플리케이션을 제공함으로써 별다른 프로그램 설치가 필요없게 되는 것이다.
 AJAX를 하기 위한 기반 언어가 자바스크립트이고 자바스크립트의 강력한 라이브러리로 사용되고 있는 jQuery가 있다.

jQuery란 자바스크립트 라이브러리로써 DOM과 Ajax의 복잡성을 쉽게 다루기 위해 만들어 졌다.

특징
소스가 자바스크립트에 비해 단순해지며 다양하고 유용한 플러그인이 있다. 빠르게 업데이트 되고 있고 이는 많은 개발자들이 jQuery를 사용하고 있다는 증거이기도 하다.
 실제로도 수많은 대형 웹사이트에서 jQuery를 사용하고 있고 미국의 웹개발자 중 65%가 jQuery를 사용한다고 한다.
 또한 jQuery는 다루려는 문서 요소를 찾기 쉽게 만들어 주며, 찾은 후에 내용 추가나 HTML속성과 CSS의 수정, 이벤트 핸들러 정의, 애니메이션 적용 같은 작업을 할 수 있다.

jQuery라는 이름으로부터 알 수 있듯이 조회에 초점을 둔 라이브러리이다. 그 중에 강력한 기능은 바로 원하는 요소에 순차적인 적용(스타일 또는 동작)을 표현하기 위한 메서드 체인 기법이다.

실제 jQuery를 사용하기 전에 알아야할 메소드가 있다.
$(document).ready(function(){
          ...코드...
});

여기서 처음 보는 $함수는 jQuery의 객체를 선택하고 객체가 jQuery의 속성과 메소드, 즉 라이브러리를 사용할 수 있는 것을 의미한다.(팩터리 함수라 하며 jQuery의 전역함수이다.)

위에 jQuery메소드는 문서의 구조만 다 읽어들인 뒤 호출된다. 반면에 $(window).load(function(){
         ...코드...
});
메소드는 문서구조 뿐만 아니라 관련된 리소스들까지 모두 로드한 뒤에 호출된다. 따라서 어느 정도의 속도차가 두 메소드 사이에 존재한다.

여기서는 주로 $(document).ready()를 많이 사용할 것이다.

2013년 2월 25일 월요일

[JS] window.onload로 2개 함수 로드

window 객체의 onload()를 언급한바 있다. HTML문서의 모든 태그들을 다 로드한 뒤에 실행되는 메서드로써 태그에 연결되어 있는 이벤트 함수를 로드한다.

그런데 onload()를 이용하여 두개의 함수를 연결하고자 한다면 다음과 같은 실용적인 코드가 있다. 유용하니 잘 알아두자.

function addEvent(func){//사용자 정의함수. 인자로 함수를 받는다.
    var oldonload = window.onload;//처음에 로드한 함수를 변수에 저장한다.없다면 null
    if(typeof window.onload != "function"){//타입을 검사하여 처음로드되는 것인지 판단
        window.onload = func;//처음로드되는 함수라면 등록
    }else{
        window.onload = function(){//이미 로드된 함수가 있다면 둘다 호출
            oldonload();
            func();
        }
    }
}

addEvent(func1);
addEvent(func2);

2개의 서로다른 함수를 로드하는 새로운 사용자 정의 함수이다.

[JS] 정규표현식

정규표현식은 참 유용한 면이 많다. 문자열은 생각보다 많이 다루게되고 문자를 조작하거나 검색하는데 정규표현식이 굉장히 편리하다. 따라서 자바스크립트에서는 내장객체로써 정규표현식 객체를 제공한다.

생성 방법
1. var reg = /"문자열이나 패턴, 수량, 이스케이프 문자의 조합"/플래그;
2. var reg = new RegExp("문자열이나 패턴, 수량, 이스케이프 문자의 조합", "플래그");

메소드
exec()
- 정규표현식과 일치하는 문자열을 리턴

test()
- 정규표현식과 일치하는 문자열이 있는지 없는지를 나타냄(boolean)


match(regExp)
- 정규표현식과 일치하는 부분을 리턴


replace(regExp, replacement)
- 정규표현식과 일치하는 부분을 지정한 문자열로 치환

search(regExp)
- 정규표현식과 일치하는 부분의 인덱스를 반환

split(regExp)
- 정규표현식을 기준으로 문자열을 잘라 배열을 리턴

대체문자
$& : replace()를 사용할 때 일치한 문자열을 가리킴
$` : 일치하는 부분의 앞부분 문자열을 가리킴
$' : 일치하는 부분의 뒷부분 문자열을 가리킴
$1, $2, $3 : 그룹

플래그문자
g(Global) : 전역 매칭
m(Multiple) : 여러 줄 매칭
i(Ignore Caes) : 대소문자 구분 않음

앵커문자
^ABC : 맨 앞 문자가 ABC
ABC$ : 맨 뒤 문자가 ABC

메타문자
. : 아무문자
[abc] : 괄호 안의 글자
[^abc] : 괄호 안의 문자 제외
[a-z] : a부터 z까지만 입력
[A-Z] : A부터 Z까찌만 입력 ([A-Za-z]로도 쓰임)
[0-9] : 숫자만 입력
\d : 숫자
\D : 숫자 이외
\s : 공백문자
\S : 공백문자 이외
\w : 알파벳과 숫자로 된 문자
\W : 알파벳과 숫자로 된 문자 제외(특수문자)

수량문자
a+ : 하나이상
a* : 0개 또는 하나 이상(여러개)
a? : 0개 또는 1개
a{숫자} : 숫자에 매치(자리수)


2013년 2월 23일 토요일

[JS] 브라우저 객체 모델(BOM) - 나머지 객체들

Screen
웹 브라우저의 화면이 아니라 운영체제 화면의 속성을 가지는 객체이다.

속성
width : 화면의 너비
height : 화면의 높이
availWidth : 실제 화면에서 사용 가능한 너비
availHeight : 실제 화면에서 사용 가능한 높이
colorDepth : 사용 가능한 색상 수
pixelDepth : 한 픽셀당 비트 수

location
브라우저의 주소 표시줄과 관련된 객체

속성
href : 문서의 URL 주소
host : 호스트 이름과 포트 번호
hostname : 호스트 이름
port : 포트 번호
pathname : 디렉토리 경로
hash : 앵커 이름(#~)
search : 요청 매개 변수
protocol : 프로토콜 종류

메서드
assign(link) : 현재 위치를 이동
reload() : 새로 고침
replace(lick) : 현재 위치를 이동(뒤로가기 버튼 사용 X)

navigator
웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가진 객체

속성
appcodeName : 브라우저의 코드명
appName : 브라우저의 이름
appVersion : 브라우저의 버전
platform : 사용 중인 운영체제의 시스템 환경
userAgent : 브라우저의 전체적인 정보



[JS] 브라우저 객체 모델(BOM) - Document

Document 객체는 최상위 객체인 window객체의 하위 객체로 문서에 대한 모든 정보를 관리하는 객체이다.

속성
nodeName : 노드 이름
nodeType : 특정 노드의 형식을 지정
nodeValue : 텍스트 노드의 문자열 값
childNodes : 하위 노드의 리스트
firstChild : 하위 노드 리스트 중 첫번째 노드
lastChild : 하위 노드 리스트 중 마지막 노드
parentNode; 자신의 부모 노드
nextSibling : 자신의 다음 형제노드
previousSibling : 자심의 바로 앞 형제 노드
innerHTML : 태그의 내용

메소드
open() : HTML문서에 데이터를 보낼 준비를 하거나 데이터를 모두 전송했음을 알림
close() : open()로 열려진 문서를 닫아 주는 역할
clear() : 브라우저에 나타난 문서를 지움
write() : 지정된 문서의 데이터를 출력
writeln() : 지정된 문서의 데이터를 출력
createElement(tagName) : 요소 노드를 생성
createTextNode(text) : 텍스트 노드를 생성
appendChild(node) : 객체에 노드를 연결
item(index) : 객체배열 중 해당하는 이덱스 객체 리턴
getElementById(id) : id를 가진 태그(객체)를 리턴
getElementsByName(name) : name을 가진 태그의 배열 리턴
getElementsByTagName(tagName) : tagName과 일치하는 태그의 배열 리턴
getAttribute(String attrName) : 속성값 검색
setAttribute(String attrName, String attrValue) : 속성값 설정
removeChild(child) : 자식노드 제거
insertBefore(Nod new, Node target) : target 엘리먼트의 형제로 앞에 추가(특정 위치 앞)
replaceChild(Node new, Node old) : 자식노드교체
hasChildNodes() : 자식 노드 여부 검사
cloneNode(boolean deep) : 노드복사

다음은 Document 객체의 하위 객체에 대해 알아보자.

Image 객체
<img>태그의 정보를 가진 객체

속성
name : 이미지 객체의 이름
src : 이미지의 URL 주소
lowsrc : 이미지의 URL 주소를 나타내며 해상도가 낮은 이미지를 전송할 때 사용
height : 이미지의 높이
width : 이미지의 넓이
border : 이미지의 테두리
complete : 이미지를 모두 전송받았는지를 알림(boolean)

Form 객체
<form>태그의 정보를 가진 객체로써 폼안에 데이터를 접근하기 위해 많이 사용된다.

속성
action : 서버 CGI 프로그램의 URL을 지정
elements : Form입력 양식에 대한 객체 정보들의 배열
enctype : 서버 CGI 프로그램에 보낼 데이터의 타입을 지정
method : 데이터 전송방식(get, post 등)
target : 처리된 결과를 출력할 윈도우 또는 프레임
length : Form 객체의 갯수
name : Form의 이름

핸들러
onSubmit : 사용자가 입력 양식의 데이터를 서버로 전송할 때 사용되는 이벤트 핸들러
onReset : 입력 양식을 초기화 할 때 사용되는 이벤트 핸들러

메소드
submit() : 입력 양식의 데이터를 서버로 전송할 때 사용
reset() : 입력 양식을 초기화 할 때 사용

---------------------------------------------------------------------------------

Form 객체에는 <input>태그의 타입으로 하위 객체들이 있다. text, button, checkbox, radio, select, textarea, password, hidden 이 하위 객체들의 종류다. 하나씩 살펴보자.

text 객체
문자열을 입력할 때 사용되는 객체이다.

속성
name : 객체의 이름
id : 객체의 id
value : 객체의 값
defaultValue : 관리자에 의해 미리 지정된 객체의 값
type : text객체임을 지정

메소드
focus() : 포커스를 얻음
blur() : 포커스를 잃음
select() : 입력된 값을 선택

핸들러
onFocus : 포커스가 text 객체 안으로 이동할 때 발생
onBlur : 포커스가 text 객체 밖으로 이동할 때 발생
onSelect : text 객체에 입력된 문자열을 선택할 때 발생
onKeypress : text 객체 내에서 키보드를 눌렀을 때 발생
onChange : text 객체에 입력한 문자열이 변경할 때 발생

checkbox 객체
여러 개의 선택 항목 중에서 하나 이상의 항목을 선택하는 객체

속성
checked : 선택여부 지정
name, value, type은 텍스트와 동일

핸들러
onClick : 객체를 클리할 때 발생

radio 객체
여러 개의 선택 항목 중에서 하나의 항목을 선택할 때 사용되는 객체

속성
defaultChecked : 디폴트로 선택되었음을 지정
length : 객체의 갯수
checked, name, value, type은 checkbox와 동일

핸들러
checkbox와 동일

select 객체
여러 개의 목록 중에서 하나 이상을 선택할 때 사용되는 객체
option 객체를 하위객체로 가진다.

속성
selectedIndex : 현재 선택된 목록의 인덱스
options : 목록 정보 배열
options[i].index : 각 목록의 인덱스
options[i].value : 각 목록에 할당된 값
options[i].text : 각 목록에 할당된 문자열
options[i]. selected : 각 목록이 선택되어 있는지 여부
options[i].defaultSelected : 각 목록이 처음 선택되어 있는지 여부

핸들러
onChange : 다른 목록을 선택할 때 발생

textarea 객체
text객체의 속성, 메소드, 핸들러 동일하며 다른 점은 줄바꾸기가 가능하다.

password 객체
입력한 글자를 "*"와 같은 문자로 표현

hidden 객체
시각적으로 표현되지 않은 감추어진 데이터 전송시에 사용

[JS] 브라우저 객체 모델(BOM) - Window

브라우저 객체는 웹 브라우저와 관련된 객체의 집합으로써 브라우저가 보여주고 있는 문서에 관한 정보 뿐만 아니라 윈도우 정보, 히스토리 정보, 문자가 존재하고 있는 위치정보 등의 관련된 객체들이다.

그 종류로는 window, location, navigator, history, screen, document이고 각각의 객체는 계층구조로 이루어져 있어 .으로 구분할 수 있다.
예) window.document.write();

Window
자바스크립트의 브라우저 내장 객체 중 최상위 객체이다.

속성
status : 브라우저 상태 바에 출력되는 문자열을 처리
defaulfStatus : 디폴트로 상태창 문자열 지정
frames : 윈도우 객체 내의 프레임정보
innerHeight : 브라우저의 내용이 나타날 수 있는 영역의 높이
innerWidth : "" 넓이
locationbar : 윈도우의 locationbar를 보여줄지 판별
parent : 상위(부모)객체
self : 자기 자신의 객체
top : 계층구조 중 가장 최상위 객체
opener : open()를 사용한 윈도우
scrollbar : scrollbar 정보

핸들러
onBlur : 브라우저가 포커스를 읽어 비활성화가 됨
onDragDrop : 브라우저에 객체를 끌어다 놓았을 때 발생
onError : 브라우저의 문서를 읽는 도중 에러가 발생할 경우 이를 처리함
onFocus : 브라우저가 포커스를 얻어 활성화가 됨
onResize : 윈도우의 크기를 조절해야 할 때 발생
onLoad : 문서나 URL을 읽어 들인 후 실행할 명령을 지정
onUpload : 문서나 URL을 지운 다음 실행할 명령을 지정

window.onload는 HTML을 다 읽은 후에 실행한다.

메소드
alert() : 사용자에게 간단한 메세지를 전달하는 대화상자
back() : 이전에 방문했던 문서나 URL로 이동
clearTimeout() : setTimeout()를 이용하여 임의의 시간지정을 해제
close() : open()를 이용해서 생성한 윈도우나 최초의 윈도우를 닫음
comfirm() : 확인과 취소를 선택할 수 있는 대화상자
find() : 검색
forward() : 다음에 방문할 문서나 URL로 이동
moveBy() : 윈도우의 위치를 기준으로 상대적으로 이동
moveTo() : 윈도우를 지정되어 있는 절대위치로 이동
open() : 새로운 윈도우 생성
print() : 문서의 내용 출력
prompt() : 문자열을 입력하는 창
resizeBy() : 윈도우의 크기를 상대적으로 변경
resizeTo() : 윈도우의 크기를 절대적 크기로 변경
scrollBy() : 윈도우에서 상대적으로 스크롤바를 나타냄
scrollTo() : 윈도우에서 절대적으로 스크롤바를 나타냄
setTimeout() : 임의의 지정된 시간 이후 명령어 단일수행
setInterval() : 주기적 명령을 실행
stop() : 문서나 URL을 전송하거나 받는 것을 중지

2013년 2월 22일 금요일

[JS] 이벤트 버블링과 캡쳐링

태그안에 태그를 감싸는 형태로 HTML문서를 구성했을 경우가 있다. 따라서 가장 안쪽(자식) 태그에 이벤트를 걸 때 이벤트 버블링이 생긴다.

이벤트 버블링은 자식 노드에서 부모 노드 순으로 이벤트를 실행하느 것을 의미한다.

자식노드에서 이벤트를 발생시키켰다고 해서 부모노드까지 이벤트가 전달될 필요는 없다. 따라서 이를 제거해주어야한다.(물론 버블링을 잘 활용할 수도 있다.)

그렇다면 캡쳐링은 무엇일까? 버블링과 반대되는 개념으로 부모노드의 이벤트가 자식노드로 전달되는 것을 의미한다. 그러나 IE브라우저에서는 캡쳐링을 지원하지 않음으로 거의 사용되지 않는다.(표준 브라우저에서는 사용 가능하나 역시 잘 활용하지 않는다)

그렇다면 이벤트 버블링 제거를 해보자.
자식노드의 버튼을 btn이라고 한다면
예)
btn.onclick = function(e){
    var event = e || window.event;

    event.cancleBubble = true;// IE 이벤트 버블링 제거
    if(event.stopPropagation)
        event.stopPropagation();// 표준 브라우저 이벤트 버블링 제거
}

2013년 2월 21일 목요일

[JS] 이벤트

이벤트란? 웹브라우저에서 일어나는 어떤 사건
이벤트 핸들러 : 이런한 이벤트를 처리해 주는 것.

이벤트 종류와 핸들러
이벤트의 종류는 마우스 클릭이라든지 마우스오버와 같은 것들이 있다. 그 예는 다음과 같다.

abort : 문서, 이미지 또는 URL을 읽어 들이는 도중에 중지할 때 발생
blur : 포커스를 읽어버렸을 때 발생
click : 마우스를 클릭할 때 발생
change : text, textarea, select의 값이 변화할 때 발생
focus : 포커스를 놓았을 때 발생
load : 문서 또는 URL을 읽을 때 발생
mouseout : 마우스 커서가 해당 영역을 벗어날 때 발생
mouseover : 마우스 커서가 해당 영역에 놓였을 때 발생
reset : reset버튼을 누를 때 발생, 입력 양식의 화면을 초기화함.
select : 해당 필드를 선택할 때 발생
submit : submit버튼을 누를 때 발생
unload : 해당 문서 또는 URL을 빠져나갈 때 발생

핸들러란 이러한 이벤트가 실행되었을 때 어떠한 기능적 처리를 해주는 함수라는 의미가 강하다. 즉 클릭을 했을 때 글자가 커지거나 새로운 페이지가 띄워지는 등의 이벤트 처리를 말한다.

브라우저 이벤트 모델 특징
- HTML 웹 페이지의 인터페이스는 비동기적이고 이벤트 주도방식이다.
- 따라서 사용자의 이벤트에 따른 이벤트 핸들러를 적절히 구현하여야한다.
- W3C가 발표한 DOM이벤트 레벨 2의 표준을 잘 따르는 브라우저와 그렇지 않은 브라우저간 차이점을 고려하여 이벤트를 처리해야만 한다.

객체에 이벤트를 연결하는 방식은 4가지가 있다.
1. 인라인 모델 방식
2. DOM Level 0 고전 이벤트 모델 방식
3. DOM Level 2 이벤트 모델 방식(리스너 방식)
4. Cross 이벤트 모델 방식


1. 인라인 이벤트 모델
HTML페이지의 가장 기본적인 이벤트 연결 방법
예)
<body>
    <h1 onclick="alert('클릭')">Click</h1>
</body>
간단한 이벤트를 처리해주기는 좋으나 WEB의 표준에서 구조와 동작을 분리시키는 원칙에서벗어난다, 따라서 HTML태그의 이벤트 속성 안에 코드를 모두 쓰기보다는 script로 처리하는 방식을 많이 사용한다.



2. DOM Level 0 고전 이벤트 모델
자바스크립트에서 문서 객체의 이벤트 속성을 사용해 이벤트를 연결하는 방법
예)
<script>
window,onload = {
    var hi= document.getElementById("hi");

    hi.onclick = function(){
        alert("클릭");
    }
}
</script>

<body>
    <h1 id="hi">Click</h>
</body>

이벤트를 제거하는 방법
단순히 이벤트 핸들러에 null을 넣으면 끝

window,onload = {
    var hi= document.getElementById("hi");

    hi.onclick = null;
}

고전 이벤트 모델은 이벤트 하나에 이벤트 핸들러 하나만 연결할 수 있다.

기본 이벤트 제거
HTML태그 중 이미 이벤트 핸들러를 가지고 있는 태그가 있다. 예를 들어 <a>가 가지고 있는 기본 이벤트는 <a>를 클릭하면 페이지 이동을 하는 이벤트가 걸려있다. 이를 기본 이벤트라 한다.

<a>뿐만 아니라 submit버튼에도 이벤트가 걸려있다. 기본 이벤트가 있음으로 좋은 점도 있지만 불편한 점도 있다. 이런 이유로 기본 이벤트를 제거하는 경우가 있다. 코드를 보자
예)
<script>
    window.onload = function(){
        document.getElementById("my_from").onsubmit = function(){
            return false;
        }
    }
</script>
<body>에는 my_from이란 Id를 가진 submit버튼이 있다. 버튼을 누르면 자동으로 입력 양식을 서버로 보내고 페이지를 새로고친다. 이 기본 이벤트를 지우기 위해서는 간단히 이벤트 핸들러에 false를 리턴해주면 된다.

사용자는 입력양식(form)을 만나게 되면 자신이 원하는 데이터를 입력하게 된다. 그리고 submit버튼을 이용하여 그 데이터를 서버로 보낸다. 하지만 어떤 데이터를 입력했는지 확인 없이 서버에 무작정 보낼 수는 없다. 입력양식을 적절하게 구성했다는 것을 확인해야한다.

그렇다면 어떻게 입력양식의 데이터값을 검사할 수 있을까?
document.getElementById("sn").value;

이렇게 sn이라는 id를 가진 태그의 값을 가져와 유효성을 검사할 수 있다.


3. DOM Level 2 이벤트 모델(리스너 방식)
IE를 제외한 최신 브라우저에서 지원한다.
레벨 0 API와는 다른 고급 이벤트 처리가 가능하다.(중복 이벤트 연결)

표준 이벤트 핸들러 등록 함수
addEventListener(String eventType, function listener, boolean captures)
- eventType : 이벤트 이름의 문자열 (예 : "click", "mouseover")
- listener : 핸들러 함수명
- captures : true/false (버블과 캡쳐에 관한 인자)

예)
<script type="text/javascript">
function doProcess(){ alert("JavaScript"); } window.onload = function(){ var btn1 = document.getElementById("btn1"); btn1.addEventListener("click", doProcess, false); }
</script>

<body>
<input type="button" id="btn1">
<div id="result">result</div>
</body>

IE(인터넷 익스플로러)에서는 그 방식이 다르다. 예제를 보자
IE 이벤트 핸들러 등록 함수
attachEvent(String eventType, function listener)
- eventType : 이벤트 속성명(예: onClick, onmouseover)
- listener : 핸들러 함수명
예)

<script type="text/javascript">
function doProcess(){
 alert("JavaScript");
}

window.onload = function(){
  var btn1 = document.getElementById("btn1");

  btn1.attachEvent("onclick", doProcess);
}
</script>
</head>
<body>
<input type="button" id="btn1">
<div id="result">result</div>
</body>

4. 크로스 이벤트 모델 방식
위의 DOM Level 2 이벤트 모델 방식일 경우 항상 표준 브라우저와 IE브라우저를 고려해야 하며 따라서 항상 같은 이벤트를 두번씩 정의해야하는 번거로움이 있다. 이런 과정을 줄이기 위해 새로운 js파일에 사용자 정의 객체를 만들어줌으로써 표준 브라우저와 IE브라우저의 이벤트를 한번에 등록할 수 있다.
예)

var cross = {};
cross.Event = {};

cross.Event.addListener = function(element, name, handler, capture){//사용자 정의 함수(crossEvent브라우저를 지원할 함수)
capture = capture || false;

//표준브라우저인지 IE인지 구분
if(element.addEventListener){
//표준브라우저 일때
element.addEventListener(name, handler, capture);
}else{
//표준브라우저가 아닐때, 즉 IE일 경우
element.attachEvent("on" + name, handler);
}
};
html파일이 있는 곳에 js폴더를 하나 만들어 js파일에 위와 같이 입력한다. 의미는 cross 객체안에 Event를 처리할 객체를 하나더 만들어줬다. 이렇게 만든 이유는 패키지라는 개념이로 이해하면 좋다. 이렇게 함으로써 최대한 속성이나 함수의 이름이 중복되는 것을 막기 위함이다. 

cross.Event.addListener()는 사용자 정의 함수로써 표준 브라우저와 IE 브라우저 각각에 이벤트를 동시에 연결하도록 정의하였다. 


---------------------------------------------------------------------------------
마지막으로 표준 이벤트 연결 방식에 대해 유의점을 언급하겠다.
IE에서는 핸들러에서 this키워드를 사용하면 window을 가르킨다. 핸들러 안에서 객체를 받기 위해 this를 사용하면 안될 것이다. 대신에 srcElement라는 속성을 이용해야만 객체를 가져올 수 있다.
 그러나 표준 브라우저에서는 핸들러에서 this를 사용하여 쉽게 객체를 가져올 수 있다.
이 차이점이 IE와 표준 브라우저간의 큰 차이점임으로 꼭 기억하도록 하자.

[JS] 내장객체

내장객체란 자바스크립트에 이미 정의된 객체를 의미한다.
내장객체는 브라우저 객체와는 달리 웹브라우저에 보이지 않는다.

Object
자바스크립트의 가장 기본적인 내장 객체

생성방법
var object = {};
var object = new Object();

매소드
constructor() : 객체의 생성자 함수
hasOwnProperty(name) : 객체가 name속성을 가지고 있는가 확인
isPrototypepf(object) : 객체가 object의 프로토타입인지 검사
propertyIsEnumerable(name) : 반복문을 사용해 열거할 수 있는지 확인
toLoscaleString() : 객체를 호스트 환경에 맞는 언어의 문자열로 변환
toString() : 객체를 문자열로 변환
valueOf() : 객체의 값을 나타냄

------------------------------------------------------------------

Array
가장 많이 쓰이는 내장객체이다. 자바스크립트에는 배열말고는 다른 자료구조가 존재하지 않기 때문이다. 즉, 모든 데이터 형식의 배열변수를 만들어 데이터를 관리 할 수 있도록 지원하는 객체이다.

Array객체 생성방법은 다양한다.
1. var fruit = []; //빈 배열선언
2. var fruit = new Array();//빈 배열선언
3. var fruit = new Array(8);//배열의 크기가 8인 배열
4. var fruit = new Array(34, 456, '하하')//데이터 직접 입력

속성
length : 배열의 크기

매소드
concat() : 배열을 결합하여 새로운 배열을 만듬
join() : 지정된 구분자로 모든 배열의 요소를 문자열로 결합
pop() : 마지막 배열요소 삭제
push() : 마지막 배열요소에 새로운 요소를 추가
reverse() : 배열의 요소를 역순으로 바꿈
slice() : 배열 자르기
splice() : 지정요소를 리턴하면서 배열에서 삭제
sort() : 정렬(기본 오름차순 정렬)

정렬에 변화를 주기위한다면 다음과 같다.
array.sort(function(a, b){
          ...함수내용...
});

내림차순
array.sort(function(a, b){
    return b-a;
});
또는 if문으로 함수를 정의할 수 있다.
array.sort(function(a, b){
    if(a<b){
        return 1;//리턴값이 1일때 자리바꿈
    } else if(a>b){
        return -1;
    } else
        return 0;
});
오름차순은 위의 함수로 쉽게 구현가능하다.

-----------------------------------------------------------------

Date
날짜와 시간을 처리할 수 있도록 하는 객체
밀리초 단위까지 특정 시간을 나타내는 숫자로 되어 있다.

생성방법
var date = new Date();

매소드
getDate() : 일자를 반환
getDay() : 요일을 반환
getMonth() : 월을 반환
getYear() : 두자리 숫자의 연도를 반환
getFullYear() : 네자리 숫자의 연도를 반환
getHours() : 시간을 반환
getMinutes() : 분을 반환
getSeconds() : 초를 반환

get매서드가 있듯이 똑같이 set매서드가 존재한다.

-----------------------------------------------------------------

Math
수학 계산을 처리할 수 있도록 하는 객체
static 객체라 new연산자를 사용하지 않고 Math만을 이용해 계산

속성
E : 오일러 상수를 반환
LN2 : 2의 자연대수를 반환
LK10 : 10의 자연대수를 반환
PI : 원주율을 반환
SQRT1_2 : 2의 제곱의 여수를 반환
SQRT2 : 2의 제곱근을 반환

매서드
random() : 난수를 발생(0과 1사이의 무작위값 반환)
나머지는 필요할때 참고하도록하자

-----------------------------------------------------------------

String
문자열을 사용하거나 조작을 위한 객체
new 연산자를 사용하지 않는다.

속성
length : 문자열의 길이

매서드
charAt(position) : position에 위치하는 문자 반환
indexOf(searchString, position) : 앞에서부터 일치하는 문자열의 위치를 반환
slice(start, end) : 특정 위치의 문자열을 추출해 리턴
split(separator, limit) : separator로 문자열을 잘라 배에 저장한 뒤 배열을 리턴
substr(start, count) : start부터 count만큼 문자열을 리턴
substring(start, end) : start부터 end까지 문자열 리턴

많이 사용하는 매서드만을 기술하였다. 그밖에 더 많은 매서드는 직접 알아보자. 한가지 참고할 것은 String객체의 매서드는 자기 자신을 변화시키지 않는다. 그 이유는 문자열은 변하지 않는 상수의 개념으로 지정되기 때문이다.

------------------------------------------------------------------


Number
엄연히 new연산자로 생성할 수 있는 객체로서 수를 다룬다.

생성
var number = new Number(123);

속성
MAX_VALUE : 자바스크립트의 숫자가 나타낼 수 있는 최대 숫자
MIN_VALUE :  "" 최소 숫자
NaN : 숫자로 나타낼 수 없는 숫자
NEGATIVE_INFINITY : 음의 무한대
POSITIVE_INFINITY : 양의 무한대

매서드
toExponential() : 숫자를 지수 표시로 나타내는 문자열 리턴
toFixed() : 숫자를 고정 소수점 표시로 문자열 리턴
toPrecision() : 숫자를 길이에 따라 지수 표시 또는 고정 소수점 표시로 나타낸 문자열 리턴

2013년 2월 20일 수요일

[JS] 객체


자바스크립트는 객체지향 언어!

객체모형(Object Model)
브라우저 객체 : Window, Document, Location 등 (DOM)
내장 객체 : Date, Math, Array 등

특징
클래스 선언과 상속을 지원하지 않지만 객체의 정의가 가능하다. 그러나 한정된 수준에 그친다. 객체의 생성과 상속이 다른 언어처럼 완벽하지는 않으나 어느정도의 형태는 비슷하게 취할 수 있다.

객체의 생성
예)
var product{
    제품명 : "7D 건조 망고',
    유형 : "당절임",
    성분 : "망고, 설탕",
    원산지 : "필리핀"
}
이처럼 객체를 정의할 때 사용하는 방법이 Json표기법이다. 키값인 제품명, 유형 등으로 값(Value)를 뽑아 오는 방법이다. (Hash자료구조를 떠올리면 비슷하다.)

속성접근
product.제품명
product.유형

생성자 함수
객체를 만드는 방법은 여러가지가 있지만 개인적으로는 생성자 함수로 객체를 생성하는 것이 코드의 재사용측면에서 좋고 자바에서의 생성자 함수와 유사하게 사용하기 때문에 좀 더 쉽게 와닿는다.

예)
function Student(name, kor, eng, mat){
    this.name = name;
    this.kor = kor;
    this.eng = eng;
    this.mat = mat;

////생성자에서 매서드 추가//////
    this.getSum = function(){
        return this.kor + this.eng + this.mat;
    }
    this.getAvg = function(){
        return this.getSum()/3;
    }
}

프로토타입
위와 같이 student객체를 new키워드로 만들 수 있다. 그러나 문제가 있다. 매번 객체를 생성할 때마다 생성자 안에 선언한 함수를 계속해서 개체의 속성으로 만드는 것이다. 분명 메모리 낭비이다.

이를 해결하기 위해 프로토타입이 생겼다. 객체의 매서드부분만 따로 모아서 공유하는 것을 말한다.
예)

function Student(name, kor, eng, mat){
    this.name = name;
    this.kor = kor;
    this.eng = eng;
    this.mat = mat;
}//생성자 정의 끝

Student.prototype.getSum = function(){
    return this.kor + this.eng + this.mat;
}
Student.prototype.getAvg = function(){
    return this.getSum()/3;
}

이렇게함으로써 자바에서 만들던 객체의 틀인 클래스와 비슷?하게되었다. 그러나 절대 클래스가 아니라는 것을 꼭 기억하자. 자바스크립트에는 클래스라는 개념이 없다. 하지만 실재로는 다음과 같은 방식으로 많이 사용한다.

예)

function Student(name, kor, eng, mat){
    this.name = name;
    this.kor = kor;
    this.eng = eng;
    this.mat = mat;
}//생성자 정의 끝


Student.prototype = {
    getSum : function(){

        return this.kor + this.eng + this.mat;
    },
    getAvg : function(){

        return this.getSum()/3;
    }
}

이렇게 프로토타입으로 매서드를 묶어서 이용한다. 사용법은 둘다 같다.
이렇듯 객체는 하나의 프로토타입 객체를 가지고 있고 그 목적은 객체의 메서드들을 관리하기 위한 용도이다.

캡슐화
만일의 상황을 대비하여 특정 속성이나 매서드를 사용자가 알 수 없도록 또는 알 필요가 없도록 숨겨놓은 것이다. 즉 개발자의 의도가 잘 반영되어 사용자가 코드를 재사용하는데 혼돈하지 않거나 의도되지 않은 행위를 막을 수 있는 등 다양한 이점이 있다.

상속
기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 만드는 것
예)
function Unit(name) {
this.name = name;

this.attack = function(unit) {
alert(this.type + "유닛인 " + this.name + "이 " + unit.type + "유닛인 "
+ unit.name + " 공격!");
unit.attacked(this);
}
this.attacked = function(unit) {
alert(this.type + "유닛인 " + this.name + "이 " + unit.type + "유닛인 "
+ unit.name + "으로부터 공격받음!");
}
}

function BionicUnit(type, name) {
this.type = type;
this.base = Unit;
this.base(name);
}

function MechanicUnit(type, name) {
this.type = type;
this.base = Unit;
this.base(name);
}

window.onload = function() {
BionicUnit.prototype = new Unit;
MechanicUnit.prototype = new Unit;

var unit1 = new BionicUnit("지상", "마린");
var unit2 = new MechanicUnit("공중", "커세어");

unit1.attack(unit2);
alert(unit1 instanceof Unit);
}

상속을 아주 잘 보여주는 예이다. 먼저 부모가 되는 유닛을 정의했다. 생성자 함수안에 이름 속성과 2개의 매서드를 정의했다.

그다음 바이오닉유닛과 메카닉유닛을 정의하였고 윈도우에 이벤트를 걸어 실행해보았다. 상속에서 가장 핵심인부분이 진한 글씨로 표현한 곳이다. 유닛을 base라는 속성으로 받아와 유닛의 이름을 초기화하였고 유닛의 매서드들을 각각의 객체에 프로토타입에 추가함으로써 상속이 이루어지는 것이다.

마지막에 alert창을 띄워 상속이 잘 되었는지 instanceof키워드로 확인해보고 있다.

상속의 예를 하나 더 들어보자. 이번엔 call()함수를 이용한 상속이다.

function Rectangle(w, h){
this.width = w;
this.height = h;

this.getWidth = function(){ return this.width;};
this.getHeight = function(){ return this.height;};
this.setWidth = function(value){
if(value < 0){
throw "길이는 음수일 수 없습니다.";
} else{
this.width = value;
}
}
this.setHeight = function(value){
if(value < 0){
throw "높이는 음수일 수 없습니다.";
} else{
this.height = value;
}
}
}
Rectangle.prototype.getArea = function(){
return this.getWidth()*this.getHeight();
}


function Square(length){
Rectangle.call(this, length, length);
}
Square.prototype = new Rectangle();
Square.prototype.constructor = Square;

var square = new Square(5);
var rectangle = new Rectangle(5, 7);

alert(rectangle.getArea() + " " + square.getArea());

Square생성자에서 Rectangle를 생성하는데 call()를 이용해서 this를 인자로 넘겨주고 있다. 이렇게 함으로써 Rectangle객체의 this는 Square을 가르키게 되고 따라서 상속이 되었다고 할 수 있다. 즉, this를 원하는 객체로 재정의 하는 것이다. call()함수는 자주 쓰일 함수이므로 그 쓰임을 잘 이해하자

[JS] 함수

익명 함수
var 변수명 = function(){
     alert("Hello World!");
}
변수명();//함수호출

함수를 변수에 저장하여 함수호출을 하는 형태이다. 함수의 이름이 따로 없고 변수를 사용하여 호출하므로 익명함수라고 한다.

선언적 함수
function 함수명(){
    alert("Hello World!");
}
함수명();//함수호출

익명함수와 선언적함수의 차이는?
변수를 선언한다는 것과 함수를 선언한다는 차이가 있다.

웹 브라우저는 script태그 내부의 내용을 한줄씩 읽기 전에 선언적 함수부터 읽는다. 따라서 익명함수는 선언적함수보다 나중에 읽어들이게 되는 차이가 있다.

매개변수
앞서 언급했지만 자바스크립트에서는 함수의 매개변수의 갯수나 자료형에 관대하다. 다른 언어와 큰 차이이고 이런 특성으로 인해 함수 오버로딩이 되지않는 것은 당연하다.

매개변수에 함수 전달
함수도 하나의 자료형이므로 매개변수로 전달할 수 있다.
예)
function callFunction(otherFunction){
    for(var i=0; i<5; i++){
         otherFunction();
    }
}

function f1(){
    alert("Hello World!");
}

callFunction(f1);
여기서 눈여겨보아야할 부분은 f1함수의 함수명만으로 매개변수의 인자를 넘겨주고 있는 부분이다. 그리고 다시 함수명에 ()를 붙여서 함수호출을 하는 것을 잘 봐두자.

클로저
return을 이용하여 변수에 값이나 함수를 저장하는 것을 의미한다. 함수가 종료하면 내부의 변수와 값들은 제거되기 마련이지만 클로저를 이용하여 유효한 데이터 값을 유지할 수 있는 방법이다. 

내장함수
eval() : 자바스크립트 코드가 맞는지 검증하고 수행
parseInt() : 문자열을 점검하여 수치를 정수로 반환
parseFloat() : 문자열을 점검하여 수치를 반환
escape() : 문자열을 %16진수의 ASCII코드값으로 반환(인코딩)
unescape() : escape()에 의해 인코딩된 값을 디코딩
encodeURIComponent() : 알파벳과 숫자를 제외한 모든 문자를 인코딩. UFT-8인코딩과 같다.(가장 많이 사용하는 인코딩 함수이다.)
decodeURIComponent() : 디코딩
isNaN() : 수치를 점검하여 무효한 수치인가를 검증
isFinite() : 수치를 점검하여 유효한 수치인가를 검증


2013년 2월 19일 화요일

[JS] JavaScript 스타트

자바스크립트는 현재 웹3.0의 시대를 맞는 시점에서 시멘틱한 웹과 웹에서 구현되는 RIA(Rich Internet Appliacation)에 중요한 언어이다.

자바와 기초적인 문법은 비슷하지만 스크립트 언어로써 상당히 느슨한 문법을 가지고 있다.

Netscape의 JavaScript와 MS의 Jscript는 ECMA에 의해 표준화가 되었고 이를 ECMAScript라 한다. 하지만 흔히들 드냥 JavaScript라 부른다.

HTML 헤드부분에 <link>로 스크립트파일을 포함하거나<script>태그를 사용한다.
예) <script type="text/javascript"> ...code...</script>
바디부분에 스크립트를 포함하기도 하지만 헤드에 삽입하는 것을 권장한다. 헤더에 스크립트를 포함하면 브라우저에 의해 점검된다.

자바스크립트는 문서를 브라우저가 읽어 들일 때 해석한다.

자바스크립트 장점
- 컴파일 과정이 없음. 신속한 개발이 가능
- HTML과 같이 플랫폼에 독립적임
- 시스템의 부담이 적음

단점
- 코드의 보안성
- 내장함수의 한계
- 디버깅 및 개발도구의 부족

자료형
- 문자열
- 숫자
- 불리언
- 함수
- 객체
- undefined

null : 아무런 값도 가지지 않음을 의미
undefined : 선언된 변수에 아무런 값이 할당되지 않거나 선언하지 않은 변수를 의미
NaN : 숫자가 아닌 것
Infinity : 무한대

자바스크립트는 자료형에 관대하다. 데이터형은 스크립트 실행 중에 자동적으로 변환된다.

내장함수
alert() : 경고창
prompt() : 입력창
confirm() : 확인창
eval() : 문자 또는 값으로 표현된 문자열 평가 후 숫자로 변환, 또는 실행가능한 코드로 변환
parseInt() : 문자열을 정수로
parseFloat() : 문자열을 소수로

자바스크립트에는 내장객체와 BOM객체가 존재한다.
내장객체
String, Array, Math, Date ...

BOM객체
window, history, location, document ...

자바는 클래스기반이 아니다. 그러므로 자바의 멤버변수는 속성이라하고 속성에 할당된 함수를 메서드라 한다. 할당된 메서드들를 프로토타입속성으로 관리할 수 있다. 이뿐만 아니라 자바와는 다른 특징이 존재한다. 몇 가지를 알아보자.
1. 객체로 미리 선언과 정의를 하지 않더라도 객체를 만들어 동적으로 속성을 추가 또는 삭제 할 수 있다.
2. 함수에서 Arguments는 선택적 사항이다. 매개변수의 타입, 갯수는 중요하지 않다. 따라서 오버로딩이 불가능하다.
3. 함수를 변수에 넣을 수 있다.

문법
자바와 기초적인 문법은 동일하다. 자바에 없는 것만 정리하겠다.
for .. in : 개체의 속성의 키값 또는 배열의 인덱스를 넘겨준다.
예)

var kim = new Student("용도", 100, 90, 81);

for(var i in kim){
alert(i + " " + kim[i]);
}
kim객체의 키(i)와 값(kim[i])로 출력창에 띄우고 있다. 어떻게 값을 출력하는지 잘 확인할것


with : 객체를 지정한다.
예)
var personName = new Object;

personName.first = '홍';
personName.second = '길동';

with (personName){
  document.write("그 사람의 이름은 " + first + " " + second + "입니다.");
}

[WEB] HTML + CSS

 웹표준에 어긋나거나 접근성이 떨어지는 웹사이트를 하나 선정하여 웹표준을 잘 지키고 시멘틱한 웹을 만들어 보는 프로젝트를 진행하였다. 

시멘틱웹이 어떤것이라는 것을 막상 알고 있더라도 실제로 HTML의 레이아웃을 구상하고 CSS로 스타일을 적용시키는데만 정신이 팔려 웹 접근성을 위한 부분을 많이 고려하지 못한 아쉬움이 든다. 또한 각자가 만들어 내는 페이지의 규약을 어느정도 정리하고 공통인부분을 미리 작업하여 결과물을 합치도록 하지 못했던 부분이 있었다. 프로젝트를 하면서 느끼는 것은 최소한의 시간에 최대의 성과라는 것이다. 점점 '관리'가 왜 중요한지 이해가 된다.

그러나 이번 프로젝트를 수행하고 나서 실제 홈페이지 구성과 디자인을 스스로 만들어 관리할 수 있다는 것과 웹의 의미에 대해 이해하고 나아가 웹 접근성을 위한 노력의 중요성을 알 수 있었다.

아무튼 어렵게 느껴지지는 않았지만 시간을 많이 보냈던 프로젝트였고 나름 재미도 있는 분야라 생각한다.  

(실제 서비스중인 홈페이지를 다시 재구성한 것임으로 이미지나 관련 자료는 올리지 못함)

2013년 2월 17일 일요일

[WEB] CSS 속성

FONT
font-family : 글꼴지정 속성
font-size : 글자 크기
font-style : 글자 스타일(normal, italic, oblique)
font-variant : 소문자를 작은 대문자로 변경(normal, small-caps)
font-weight : 글자 굵기(normal, bold, bolder, lighter, 100~900)
line-height : 행간 지정
color : 글자색
font : font에 관한 속성을 한꺼번에 지정
ex) font: 12px/1.5em bold sans-serif

TEXT
text-align : 정렬 방식(left, right, justify)
text-decoration : 텍스트의 장식(none, underline, overline, line-through, blink)
text-indent : 들여쓰기
text-transform : 대문자화(capitalize, uppercase, lowercase, none)
white-space : 문자사이 공백(normal, pre, nowrap)
vertical-align : 수직정렬(baseline, sub, super, top, text-top, middle, bottom, text-bottom)
letter-spacing : 글자간격
word-spacing : 단어간격
line-height : 줄간격

사용자 인터페이스
CURSOR
커서모양 변경(auto, crosshair, default, pointer, move, e-resize, ne-resize 등등)

CLASSIFICATION
<ol>,<ul>만으로 할 수 없는 글머리 기호의 위치 지정, 글머리 기호대신 이미지를 삽입

List-style-type : 글머리 번호, 기호의 형태를 지정
List-style-image : 글머리 번호, 기호에 이미지를 넣는 속성
예) ul {
          list-style-image : url("/images/flower.png");
     }
List-style-position : 글머리 번호, 기호의 문장에서의 위치를 지정
List-style : list에 관한 속성을 한꺼번에 지정

DISPLAY
화면에 보이기, 보이지 않기
Inline <--> Block으로 속성을 변경(레이아웃에서 상당히 중요한 역할)
inline : 인라인화
block : 블럭화
list-item : 목록화
table-header-group / table-footer-group : 컴퓨터 모니터상에서 출력할 목적으로 만든 속성이 아니라 한페이지가 넘는 여러페이지 분량의 Table을 프린터로 출력할때 매 페이지마다 테이블 머리말과 코리말을 넣어주기 위해 사용
none : 감추기(block:보이기)

BACKGROUND
background-color : 문서의 배경색을 지정(컬러색, transparent)
background-image : 문서의 배경을 이미지로 지정(none, url("파일경로"))
background-attachment : 배경이미지를 고정시키거나 scroll시킴(scroll, fixed)
background-repeat : 지정한 배경그림을 반복, 또는 반복을 없앰
background-position : 배경으로 지정한 그림의 시작지점을 지정(백분율, 길이값, 수평값, 수직값)
background : background에 관한 속성을 한꺼번에 지정(순서 X)


BOX MODEL
옆에 나와있는 그림을 보면서 BOX에 관한 padding과 margin을 잘 구별해야 한다. 어려운 내용은 아니지만 실제로 레이아웃 디자인에 있어서 까다로운 부분이다.


마진과 패딩 모두 네 방향(top, right, bottom, left)을 가진다.




POSITIONING
포지셔닝 또한 시각적인 측면(레이아웃)에 있어 중요한 요소이다.
width, height : Box의 width와 height를 지정
position : 위치지정(static, realative, absolute 등)
- static : 기본값
- relative : top, left를 설정하여 박스 위치 지정
- absolute : 상위 박스의 top, left, right, bottom을 지정
- fixed : 항상 화면상의 지정된 위치 지정
top, right, bottom, left : 박스안에서 박스 위치 지정
overflow : content의 내용이 box를 넘었을 때 처리방법 지정(visible, hidden, scroll, auto)
float : 해당 박스를 고정시키고 다음 박스를 해당 박스 주변에 배열(left, right, none)
- left : 그림이나 box가 왼쪽에 배치되고 글씨는 box의 오른쪽으로 흐름
- right : 그림이나 box가 오른쪽에 배치되고 글씨는 box의 왼쪽으로 흐름
- none : 그림이나 box가 왼쪽으로 배치되고 글씨는 첫 줄만 box의 오른쪽으로 흐름
clear : float의 흐름을 멈춤(none, left, right, both)
clip : box를 지정하는 수치만큼 가려서 안보이도록 해주는 속성(auto, rect)
visibility : 객체를 보이게하거나 보이지 않게 하는 속성(visible, hidden)
z-index : 박스위에 박스를 얹음

2013년 2월 16일 토요일

[WEB] CSS

CSS는 HTML의 구조를 시각적으로 아름다움을 더해줌으로써 접근성 뿐만 아니라 사용자로 하여금 매력적인 웹을 만드는데 중요한 역할을 하는 문서이다.

HTML에 Style을 적용시키기위해 사용하는 CSS는 글자, 여백, 레이아웃 등 시각적으로 보여지는 모든 부분을 처리하기 위한 언어이다. W3C에서 공인한 표준으로써 운영체제나 프로그램에 관계없이 누구나 같은 형식으로 볼 수 있다는 장점이 있다.

CSS의 장점
- 기능확장성 : 단순한 HTML요소들의 기능에 다양한 기능을 추가할 수 있다.
- 양식의 모듈화 : HTML문서와 CSS문서를 따로 관리함으로써 유지보수가 간단하고 코드가 간결해진다.
- 기능성 : 효과적인 레이아웃에 의한 풍부한 디자인 설계가 가능
- 일관성 : 사용환경에 영향을 받지 않는다.
- 웹접근성 향상

CSS의 단점
웹브라우저마다 다른 방식으로 지원.(특히 Internet Explorer가 가장 표준을 잘 지키지 않았으나 지금은 표준을 지키려고 노력하고 있음)

그렇다면 어떻게 CSS를 HTML에 적용시킬까?

스타일 적용에는 4가지 방법이 있다.
1. Inline Style
해당 태그 속에 직접 스타일을 지정해주는 것인데 잘 안쓴다. 그러나 다른 스타일 적용방식보다 우선순위가 높기 때문에 적절히 잘 사용하면 좋다.

2. Embedded Style sheet
HTML문서 내에 <head>안에 <style>태그 안에서 스타일을 지정해준다.

3. Linked style sheet
<head>안에 <link>을 사용하여 외부 CSS파일과 연결
예) <link rel="stylesheet" type="text/css" href="CSS문서">

4. Imported style sheet
style sheet 안에서 다른 style sheet들을 가져오는 기법
실제 HTML에서는 하나의 style sheet만 <link>로 가져온다.
예) @import "CSS문서"; 또는 @import url("CSS문서");

선택자(Selector)
CSS에서 가장 중요한 개념이다. 잘 알아야 스타일을 적절히 원하는데로 지정할 수 있다.

선택자란 HTML의 태그를 선택하는 것을 말한다. 구조적인 문서의 태그를 적절히 선택하여 스타일을 지정해야하기 때문이다.

선택자의 종류에 대해 알아보자.
* : 모든 태그지정
A : 태그 A 지정
.A : 클래스 A태그 지정
#A : 아이디 A태그 지정

복합 선택자
A B : 태그 A로 감싸져 있는 태그 B지정
A>B : 태그 A로 감싸져 있는 태그 B중 한 단계 아래의 태그 지정(부모의 자식 지정)
A+B : 연속된 태그 A와 B를 지정

그외 선택자
E[attr] : attr속성을 지니는 태그 E를 지정
E[attr="attrVal"] : attr속성값이 attrVal인 태그 E를 지정
E[attr~="attrVal"] : attr속성값이 attrVal이고 뒤에 (공백 + 값)으로 지정된 E태그를 지정
E[attr^="attrVal"] : attr속성값이 attrVal로 시작하는 E태그를 지정
E[attr$="attrVal"] : attr속성값이 attrVal로 끝나는 E태그를 지정
E[attr*="attrVal"] " attr속성값이 attVal과 같은 내용이 있는 E태그를 지정

가상 클래스 선택자
A:first-child : A태그 중 첫 번재 자손태그 지정
A:lang(B) : A태그 중 언어가 B인 태그 지정
A:link : A태그 중 link가 걸려있는 태그 지정
A:visited : A태그 중 link가 걸려있고 이미 클릭한 태그 지정
A:active : A태그 중 마우스로 클리한 태그 지정
A:hover : A태그 중 마우스를 올려놓은 태그 지정
A:focus : A태그 중 키보드 입력을 받는 태그 지정

동적선택자
A:first-line : A태그의 문단 중 첫 번째 줄 지정
A:first-letter : A태그의 문단 중 첫 번째 글자 지정
A:before : A태그의 문단 앞을 지정
A:after : A태그의 문단 뒤를 지정


2013년 2월 14일 목요일

[WEB] XHTML 1.0과 HTML5

HTML 4.01에 XML의 문법을 적용시켜 만들어진 것이 XHTML이다.

현재까지 많은 웹이 XHTML 1.0으로 제작되었다.
HTML 4.01버전과 거의 비슷하나 HTML 4.01의 문법을 철저히 지키는 것이 특징이다.

XHTML의 목적은 OS나 Browser에 관계없이 모든 환경에서 호환되는 웹표준을 만들기 위함이다.

XHTML과 HTML의 차이점
1. XHTML은 반드시 Tag속에 Tag를 포함할 때 중첩을 금지한다.
2. XHTML은 반드시 XHTML문법을 지켜야한다.(HTML에서는 어느정도의 문법적 생략은 가능하였다.)
3. XHTML 요소는 반드시 소문자!
4. XHTML 요소는 반드시 End Tag로 닫아야 한다!

사실 많은 부분이 HTML과 동일하다. 문법을 잘 지키기만 한다면 HTML과 크게 다른 부분은 없다.

HTML5
XHTML 2.0이 실패로 돌아가고 이에따라 WHATWG(Web Hypertext Application Technology Working Group)에서 HTML5에 대한 표준초안을 내세운다.

목적은 과거 HTML과 호환성을 유지하면서 ActiveX, Flash, Silverlight 등과 같은 플러그인 기반 인터넷 어플리케이션을 줄이는 것이다.

현재 정식권고안만을 앞두고 있는 실정이며 곧 많은 개발자들을 필요로하게 될 듯하다.

HTML5의 특징
- HTML 4보다 확장된 문서구조를 지원와 태그를 지원하여 시멘틱 웹을 좀 더 발전시켰다.
- 편리한 웹폼 기능(특히 스마트폰에 유용한 기술 포함)
- 웹어플리케이션을 사용하는데 별다른 설치가 필요 없으며 웹어플리케이션 제작에 용이하다.


[WEB] HTML두 번째

첫 번째 시간 내용을 다시한번 복습하고 진행하겠다.

많은 플랫폼과 디바이스에서 동일한 결과물을 보여주기 위해서 표준화가 필요하다. 표준화로 인해 개발시간과 비용이 줄어드는 장점이 있다.

웹표준을 잘 지키면 웹 접근성이 좋아진다. 웹 접근성이 좋아진다는 의미는 누구나 쉽게 웹을 이용할 수 있다는 것이다. 사회문화적인 환경을 고려해 볼 때 접근성을 높이기 위한 노력을 게을리하지 않아야하겠다.

 HTML은 그 자체적으로 표면적이고 구조적인 문서일 뿐이다. 따라서 어떠한 의미를 지니고 있지는 않는다. 그렇기 때문에 시멘틱 웹, 즉 의미론적 웹이 등장하였다. 시멘틱 웹에서는 데이터가 의미를 지니고 있으므로 사용자 뿐만 아니라 컴퓨터가 그 의미를 인식할 수가 있다. 그러므로 원하는 데이터를 단순한 내용이 아니라 그 의미까지 알 수 있도록 확장시킨 웹이다.

앞서서 시멘틱 웹을 표현하기 위한 2가지 방법을 언급하였다.

첫 번째는 <meta>작성이며 웹의 정보를 나타낸다.
두 번째는 <h1>,,,<h6>작성이다. HTML문서를 좀 더 구조적으로 만들어주기 때문에 시멘틱 웹을 잘 표현할 수 있다.

이어서 HTML에 대해 더 알아보자.

링크요소
<a>
- 페이지내 링크(책갈피)
예)<a href="#section">소개</a> ... <a name="section">내용</a>
- URL연결
<a href="http://www.google.com">구글</a>
- 새창으로 열기
<a href="http://www.google.com" target="_blank">구글</a>

<link>
head부분에서 선언되며 여러번 선언될 수 있다.

오브젝트, 이미지요소
<img src="경로"/>

폼요소
사용자로부터 정보를 입력받아 처리하고자 하는 특정한 동작이나 요청, 데이터 값을 웹서버에 송신을 함

<form action="처리할 프로그램의 URL" method="get|post|put|delete" enctype="multipart/form-data(폼의 컨텐트 타입을 지정)">

get : 서버에 ?name/value값이 붙어서 전송.
post : URL에 포함되지 않음(비밀번호)

<input type="text|passward|checkbox|radio|reset|file|hidden|image|button" name="이름" value="값지정" size="너비" maxlenth="최대길이" 등등등 속성은 알아서 찾아보길>

iFrame
특정 HTML을 불러온다.
예)

<iframe src="Form_exam.html" frameborder="1" scrolling="auto" width="500" height="500" title="폼내용"></iframe>

HTML 4.0에 대해서는 이정도에서 마무리한다. 아직 언급하지 않은 많은 요소(elements)들이 있지만 꼭 알아야하기보다는 HTML을 만들 때 인터넷에서 참고하는 것으로 구조를 만들 수 있다. 그보다 중요한 것은 HTML의 특징이 무엇이며 어떠한 구조를 지니고 있는지 파악하는 것이 중요하다.

2013년 2월 13일 수요일

[WEB] HTML 첫 번째

마크업 언어란?
 문서에 포함된 문장이나 그림, 표, 소리 등과 같은 문서 내용에 대한 정보가 아니라 그 문장과 그림, 표는 어떻게 배치되고 글자는 어떤 크기와 모양을 가지며, 들여쓰기와 줄 간격, 여백 등에 대한 정보를 의미한다.

HTML과 xHTML은 별개의 분리된 표준.
HTML5는 2014년에 W3C에서 Recommandation 예정이다.

HTML은 문서의 기본적인 구조만을 정의하고 실제로 사용자에게 보이는 형태는 웹 브라우저에 의해 동적으로 결정된다. 모든 웹 브라우저에 의해 모든 태그가 지원되지 않기 때문에 표준을 따르는 것이 중요해진다.(지원하지 않은 태그는 무시되어 화면에서 배제된다.)

WEB의 구동원리를 보면 클라이언트에서 인터넷을 접속하기 위한 URL을 입력하여 접속을 요청한다. 서버는 해당 결과를 클라이언트에 응답하면 웹 브라우저에 의해 HTML문서가 웹 브라우저에 적절하게 나타나게 된다.

태그란?
HTML문서의 구조와 의미를 브라우저에게 전달하는 문법이다.
태그의 형식은 일반적으로 <태그>내용</태그>의 형태이다.

HTML의 기본구조
크게 3부분으로 나누어진다.
1. 문서타입정의(DTD)
2. 문서머리글(HEAD)
3. 문서몸체(BODY)

문서타입정의부에서는 일반적으로 해당 HTML문서의 버전 및 형식을 지정
<HEAD>는 문서 자체에 대한 설명을 넣는 부분이다. <title><meta><style><script><link>등과 같은 태그가 존재한다. 여기서 meta라는 태그는 문서에 대한 일반 정보를 나타낼 때 사용한다.
예)

<meta http-equiv="Expires" content="Wed, 13 Jul 2013 21:00:00 GMT">
<meta name="Description" content="홈페이지의 정의">

<BODY>는 문서의 내용이 들어가는 부분이다. id속성과 class속성을 부여할 수 있다, id속성은 요소마다 유일한 하나의 이름을 부여할 수 있으며 하나의 문서에 동일한 이름의 id가 중복되지 않아야한다. class는 요소에 하나 이상의 class이름을 부여함으로써 해당하는 요소를 그룹으로 의미를 나눠줄 때 사용된다. 물론 하나의 문서에 동일한 이름의 class가 존재해도 무관하다.

블럭레벨과 인라인레벨
블럭레벨은 해당하는 요소의 라인 범위를 포함할 수 있다. 따라서 인라인요소와 다른 블럭라인을 포함한다.
인라인레벨은 요소 하나만을 포함한다.
블럭레벨과 인라인레벨 요소 둘다 화면을 구성하는데 필요한 요소이다.

블럭레벨의 종류 : <h1>...<h6>,<div>,(<ul><li>) 등
인라인레벨의 종류 : <span>,<a> 등
<p> : 문단을 나눌 때 사용함. 자신을 포함하여 블럭레벨 요소를 포함할 수 없다.
<br> : 줄바꿈

목록 요소
<ul> : 번호없는 목록
<ol> : 번호있는 목록
<dl> : 정의 목록
목록에서는 항상 <li>를 사용
<dt>와<dd> : 제목과 한줄 들여쓰기
예)
<h1>순서목록</h1>
<ul>
<li><a href = "http://www.naver.com">네이버</a></li>
<li><a href = "http://www.daum.net" target = "_blank" title = "다음으로 이동">다음</a></li>
</ul>
<h1>정의목록</h1>
<dl>
<dt>웹표준</dt>
<dd>웹표준은 W3C권고안에 따라 만든 문서
</dd>
</dl>

테이블 요소
- 테이블의 목적을 기술하는 제목<caption>과 요약<summary>정보를 제공할 수 있다.(필수는 아니지만 웹 접근성을 위하고 사용자 배려를 위해 잘 사용할 것)

- 테이블의 행그룹요소 : 머리글<THEAD>, 바닥글<TFOOT>, 본체<TBODY>

- 테이블의 셀은 머리글<TH>정보나 데이터<TD>를 가질 수 있다.


[WEB] 웹과 표준

많은 개발자들이 웹을 기반으로한 개발에 많이 투입되어 종사하고 있다. 업무에 중요하고 필요한 데이터를 관리하기 위한 데이터베이스, 프로그램을 동작시키기 위한 모듈 개발 뿐만 아니라 웹이나 화면에 보여지는 화면 구성 또한 개발자의 몫이다. 따라서 하나만 알고 그것만 잘하는 것이 아니라 개발에 있어서 모든 흐름을 이해하고 잘 할 수 있는 개발자가 되어야 한다. 또한 웹의 표준을 잘 지키는 것도 중요하다. 웹의 보편성은 누구나 인정하는 것이여서 표준을 지키지 않으면 다양한 플랫폼이나 디바이스에서 문제, 즉 크로스 브라우징에 있어서 문제가 발생할 여지가 있다.

인터넷이란 전세계의 네트워크와 네트워크들이 모여 하나의 거대한 네트워크를 형성하는 것을 말한다.

URI(Universal Resource Identifier) : 정보의 위치를 가리킴
-웹상의 각 자원들을 URI로 인코드될 수 있는 주소
-URI의 구성
1. 자원에 접근하는 방법이름(Protocol)
2. 자원을 가지고 있는 호스트이름
3. 경로로 주어진 자원의 이름
-상대URI
위치정보를 저장하지 않음

HTML에서의 URI의 사용
다른 문서나 자원에 연결(Link) : <a>, <link>
외부스타일쉬트(StyleSheet)나 스크립스(Script)에 연결 : <link>, <script>, <style>
이미지, 오브젝트, 애플릿을 문서에 포함 : <img>, <object>, <applet>
이미지맵을 설정 : <map>, <area>
입력을 위한 폼, 프레임 형성 : <form>, <frame>, <iframe>

웹 1.0 : 단순히 화면에 문서를 보여지기만 하던 단계, 하지만 HTML이라는 문서의 장점인 어느 플랫폼에서도 잘 보여진다는 점 때문에 지금까지 발전할 수 있었다.
웹 2.0 : 상호작용단계, 시멘틱 웹(의미있는 웹으로써 단순한 데이터가 아닌 의미단위로 웹을 접근)
웹 3.0 : 웹인지 소프트웨어인지 구별하기 어려운 단계. 즉, 웹이 하나의 어플리케이션의 느낌을 띄기 시작.

현재 웹은 플랫폼을 따지지 않는다.(크로스 플랫폼)  또한 스크립트의 발전으로 웹에 화려한 기술을 접목시켜 다양하고 화려한 화면을 만들어 보여줄 수 있다. 이것이 스크립트의 강력한 힘이고 왜 스크립트가 중요한지 설명할 수 있는 대목이다.

웹 플랫폼의 구성요소
클라이언트 기술 - 동적인 기능과 화려한 UI를 웹으로 구현(Ajax, Flex, XUL, Widget 등)
                           RIA기술의 등장

표준기술 - 웹표준 준수(HTML, CSS, DOM, ECMA script)
웹표준을 지킨다는 의미는 W3C(World Wid Web Consortium)의 권고안을 지키는 것을 말한다.

웹표준 스펙
1. (X)HTML : 웹페이지를 구성하고 표현하는 기본언어
2. CSS : 웹페이지의 호환성 유지 및 다양한 액세스 기술을 사용
3. XML : HTML이나 CSS로서 표현되지 못하는 영역을 DTD를 이용하여 정의. 읽기 쉽고 검증하기 용의하며 데이터로 관리하기 때문에 데이터를 전달하기 위해 유용.
4. DOM : 문서 구조와 스타일을 프로그램과 스크립트가 동적으로 접근하고 수정할 수 있는 플랫폼.
5. Javascript : HTML의 동작을 정의

웹표준의 개념 : 구조, 표현, 동작을 분리시켜 구성하는 것.
HTML(구조), CSS(표현), JAVASCRIPT(동작) 이렇게 철저하게 분리시키면 성능면에서나 개발면에서 유지보수가 용의하다.


2013년 2월 11일 월요일

[DB] 도서 대여점 관리 프로그램

간단한 요구사항 분석자료를 통해 ER 다이어그램을 그려보았다.


요구사항 분석

1. 도서에 대해서 도서번호, 도서명, 출판사, 지은이, 장르, 가격, 대여유무,
    등록일을 저장한다. 도서번호에는 장르와 위치를 넣어서 도서를 찾기 쉽게한다.

2. 도서는 코믹스, 순정, 애정판, 소설, 월간지 장르로 구분한다. 장르마다 대여료와
     대여기간, 연체금이 정해져 있다. 도서는 한 장르에만 속해 있다. 대여 중인
     책은 대여 될 수 없다.

3. 회원에 대해서 회원번호, 이름, 전화번호, 주소, 대여 중인 책, 마일리지를 저장한다.
    회원은 도서를 대여 할 수 있다. 회원은 여러 권의 책을 동시에 빌릴 수 있다.
    회원은 도서를 대여할 때마다 대여금액의 10%를 마일리지로 적립받을 수 있고,
    도서를 대여할 때 현금처럼 사용할 수 있다.

4. 사원에 대해서 사원번호, 이름, 주소, 전화번호, 비밀번호를 저장한다.
    사원은 고객등록, 도서등록, 도서대여, 도서반납, 고객조회를 할 수있다.
    사원중에 사원을 관리하는 관리자가 있어서 사원을 추가/삭제를 할 수 있고,
    일별, 월별, 연별 매출액을 조회할 수 있다.


사원, 회원, 도서 세 개의 기본테이블을 중심으로 회원관리, 대여, 도서관리라는 행위테이블이 만들어져 있다. 요구사항을 최대한 반영하기 위해 생각해 본 ER 다이어그램이다.

사실 SQL문으로 성능을 향상시키는 것도 중요하나 그것보다도 더욱 중요한 것은 데이터베이스의 설계라 생각한다. 설계시 요구사항을 최대한 반영할 수 있음은 물론이거니와 테이블의 관계 및 정규화 작업까지 단순하게 생각할 것이 아니다.

[DB] TOP-N SQL, INDEX, VIEW, SEQUENCE


* TOP-N SQL
select alias.*, rownum from
(select employee_id, last_name, hire_date from employees order by hire_date) alias
where rownum <= 5

select * from
(select temp.*, rownum r from
(select * from board order by seq) temp)
where r between 3 and 6


### INDEX ###
DB안에 데이터를 매번 full scan하여 찾는 것은 성능과 비용이 좋지 못하다.
따라서 너무 잦은 full scan을 줄이고 일정한 검색 속도를 보장하기 위해
인덱스를 사용한다.

인덱스를 만들면 각각의 인덱스에 따른 ROWID(주소값)가 부여되고 자동적으로
B-TREE구조로 데이터가 정렬된다.

인덱스의 사용순서
1. 인덱스를 생성하면서 ROWID를 부여(한번의 full scan)
2. B-TREE 구조 정렬
3. 검색
4. B-TREE에서 인덱스에 해당하는 ROWID반환
5. ROWID로 검색

일정한 속도가 보장된다.
그러나 insert 및 update의 요청으로 인한 인덱스 데이터가 누적되기
때문에 성능면에서 좋지 못하다.

### VIEW ###
실제 데이터값은 없으나 뷰를 통해서 원하는 데이터를 테이블처럼 다룰 수
있다.
사용이유 : 조인 횟수를 줄일 수 있고 원하는 데이터만 추려놓거나
보일 필요가 없는 데이터를 숨기기 위한 용도로 사용된다.
create view emp30 as
select e.employee_id, e.last_name, d.department_name from employees e
join departments d on e.department_id = d.department_id
where d.department_id = 30

### SEQUENECE ###
- 자동증가

create sequence 테이블명_컬럼명_seq
start with 1 //시작
increment by 2 //2씩 증가
maxvalue = 10000 //최대값
cycle //최대값을 찍고 처음으로 돌아감

create sequence emp07_empno_seq;

insert into emp07 values(emp07_empno_seq.nextval, 'kim', 'IT', 1234);
시퀀스는 한번 증가하면 되돌릴 수 없다.
글번호 카운팅
1. 시퀀스
2. 기존의 글 번호 + 1

[DB] 서브쿼리


하위 질의문으로써 전형적으로 where절에서 사용한다.
예를 들어보자.
예) 평균급여보다 많은 급여를 받는 직원의 이름과 급여를 출력하시오.
select avg(salary) from employees
를 하여 평균급여를 구한 뒤
select last_name, salary from employees where salary > 평균급여

이렇듯 하나의 질의문의 결과를 얻기 위해 두번의 질이과정을 거치고 있다. 이는 번거로운 작업니다. 이를 해결하기 위해 서브쿼리를 사용한다.

select last_name, salary from employees
where salary > (select avg(salary) from employees)
어떤 조건을 위해 where 절에 또다시 select하는 것이 서브쿼리이다.

문제) 직무별(job_id) 최대급여자의 사원내역을 출력하라.
select * from employees where (salary, job_id) in(select max(salary), job_id from employees group by job_id)
중요한 문제!
서브쿼리로 받는 값이 두개 이상이 될때는 in을 사용하여 값을 받아야한다. (=연산자로는 두개 이상의 값을 받을 수 없다.) 그리고 where절에서 salary 컬럼만으로 직무별 최대값을 구하면 같은 직무가 중복 출력되는 것을 볼 수 있다. 그 이유는 job_id를 salary의 최대값과 같이 처리해 주지 않았기 때문에 최대급여와 같은 다른 직무도 출력되는 것이다.

글만으로는 알아보기 어렵겠지만 명령문을 유심히 살펴보고 나름의 이해를 하도록 노력하자.

- update 문에서 서브쿼리 사용
문제) 20번 부서 이름을 30번 부서 이름으로 변경하여라.
update dept02 set department_name = (select department_name from dept02 where department_id = 30) where department_id = 20


문제1) student 테이블과 department 테이블을 이용하여 이윤나 학생과 1전공(deptno1)이 동일한 학생들의 이름과 전공이름을 출력하라.
select name, dname from student s, department d where s.deptno1 = d.deptno and
s.deptno1 = (select deptno1 from student where name = '이윤나')

문제2) professor 테이블에서 입사일이 송도권 교수보다 나중에 입사한 사람의 이름과 입사일, 학과명을 출력하라.
select p.name, p.hiredate, d.dname from professor p, department d where p.deptno = d.deptno and p.hiredate > (select hiredate from professor where name = '송도권')

* 다중 행 sub query
in => 같은 값을 가진 다중 행 출력
all => 해당하는 서브쿼리의 범위 최대, 최소 값을 반환
any => 해당하는 서브쿼리의 값들을 모두 반환

위의 설명만으로 이해하기 어렵다. 예제를 통해서 이해해보자
문제1) emp02 테이블을 사용하여 전체 직원중 과장 직급의 최소 연봉보다 연봉이 높은 이름과 직급, 연봉을 출력하시오.
select name, position, pay from emp02 where pay > any(select pay from emp02 where position = '과장')

문제2) student 테이블을 조회하여 각 학년별로 최대 키를 가진 학생들의 학년과 이름, 키를 출력하시오.
select grade, name, height from student where height, grade in (select max(height), grade from student group by grade)

[DB] DML


* INSERT 문
insert into 테이블명(컬럼명들) values(컬럼값들)
insert into dept01(deptno, dname) values(20, 'IT')

* UPDATE 문
update 테이블명 set 컬럼명 = 수정값, 컬럼명 = 수정값 where 수정할 대상

문제) emp00 테이블에서 salary가 3000불 이상 대상자는 salary를 10%인상하여라.

update emp00 set salary = salary * 1.1 where salary >= 3000


* delete 문(Rollback 가능, TRUNCATE는 Rollback 불가능)
delete from 테이블명 where 삭제대상
delete from emp01 where dname = 'IT'

* 트랙잭션
- 하나의 작업처리 단위
- COMMIT : 트랜잭션이 성공적으로 완료
- ROLLBACK : 트랜잭션 중 에러등으로 인해 실패했을 때 트랜잭션 단위의 작업전체를 취소
- DDL(create, truncate) => 자동 커밋
- DML(delete, update, insert) => 트랜잭션 관리 대상

JDBC에서 트랜잭션 수행
try{
 1번 작업(주문내역 추가)
 2번 작업(재고내역 감소)
 3번 작업(배송내역 추가)
 COMMIT();//트랜잭션 성공
1~3번 작업이 하나의 트랜잭션이다. 따라서 2번에서 에러가 발생 했을 때 commit()이 되지 못하고 catch문으로 간다.
}catch(Exception e){
 예외발생시 이곳에서 예외처리.
 ROLLBACK();//트랜잭션 되돌리기
}

[DB] JOIN


2개 이상의 테이블에서 원하는 데이터를 얻기위해 사용. 찾고자 하는 데이터가 다른 테이블에 존재할 때 기본 테이블의 주키를 이용하여 다른 테이블의 컬럼을 참고할 수 있다.

JOIN을 위해 주키와 외래키에 대해 잘 알아야 한다.

오라클에 연습용 테이블을 이용해 실습을 해보자.
문제> 'King'의 부서이름을 출력하시오.
King의 부서이름은 departments라는 테이블에 department_name으로 확인할 수 있다. 그러나 'King'이라는 이름은 employees테이블의 last_name을 통해 알 수 있으니 두 테이블의 조인을 통하여 원하는 값을 얻을 수 있다. 따라서 명령문은 다음과 같다.
select department_name from employees, departments
where employees.department_id = departments.department_id
and employees.last_name = 'King'

department_id를 서로 공유하는 컬럼이기 때문에 이를 통하여 서로의 값을 참조하는 조인테이블을 만들 수 있다.

테이블 명이 길 경우 이름을 변경하는 것도 가능하다. 위와 같은 결과 같을 나타내는 명령문이다.
select d.department_name from employees e, departments d
where e.department_id = d.department_id
and e.last_name = 'King'

JOIN의 또다른 방법이 존재한다. 명령어는 다음과 같다. 이 방법을 ANSI 조인이라 한다.
select d.department_name from employees
join departments on employees.department_id = departments.department_id
where employees.last_name = 'King'

* 조인 사용방법
1. 원하는 데이터는 무엇인지 명확히하라.
2. 원하는 데이터가 어느 테이블에 있는지 확인하라.
3. 원하는 데이터가 다른 테이블에 있다면 공통된 컬럼이 무엇인지 확인하라.(department_id)

mission> 'Sales'부서에 소속사원의 이름, 입사일과 부서이름을 출력하라.
select last_name, hire_date, department_name from employees
join departments on employees.department_id = departments.department_id
where departments.department_name = 'Sales'

* 3개 조인
사원이름, 부서번호, 부서이름, 직종번호, 직종이름, 도시이름
select e.last_name, e.department_id, d.department_name, j.job_id, j.job_title,
l.city from employees e, departments d, jobs j, locations l
where e.department_id = d.department_id and e.job_id = j.job_id
and d.location_id = l.location_id

* ANSI 조인
select e.last_name, e.department_id, d.department_name, j.job_id, j.job_title,
l.city from employees e
join departments d on e.department_id = d.department_id
join jobs j on e.job_id = j.job_id
join locations l on d.location_id = l.location_id

여기까지가 INNER 조인이다. INNER 조인은 두 개 이상의 테이블의 조인시 테이블에서 공통된 값을 출력한다. 그러나 공통이 되지 않은 데이터지만 확인이 필요한 데이터를 출력할 때가 있다. 이때 OUTER 조인이 필요하다.

* OUTER 조인
데이터가 존재하는 곳을 기준으로 공통되지 않는 데이터까지 출력한다.
즉, INNER JOIN에서 누락되는 데이터를 출력하도록 할 때 사용한다.
다음의 명령문을 보자.
select employee_id, last_name, hire_date from employees
where TO_CHAR(hire_date, 'YYYY-MM') between '1999-01' and '1999-06'

그러면 11개의 데이터가 출력된다. 여기서 부서이름까지 출력한다면 다음과 같다.

select employee_id, last_name, hire_date, department_name
from employees e, departments d
where e.department_id = d.department_id and
TO_CHAR(hire_date, 'YYYY-MM') between '1999-01' and '1999-06'

이렇게되면 10개의 데이터가 출력되면서 하나의 데이터가 빠진다. 그 이유는 department_id는 존재하나 department_name이 없는 경우 INNER JOIN에 의해 데이터가 제외되기 때문이다. 즉 공통된 데이터가 아니기 때문에 제외되는 것이다. 따라서 다음과 같이 OUTER 조인을 하면 모든 데이터를 확인 할 수 있다.

select employee_id, last_name, hire_date, department_name
from employees e, departments d
where e.department_id = d.department_id(+) and
TO_CHAR(hire_date, 'YYYY-MM') between '1999-01' and '1999-06'


또는

select employee_id, last_name, hire_date, department_name
from employees e left join departments d on e.department_id = d.department_id
where TO_CHAR(hire_date, 'YYYY-MM') between '1999-01' and '1999-06'

이렇게 누락되는 컬럼에 +를 시키던지 LEFT JOIN이라고 표현하여 오른쪽 테이블을 기준으로 왼쪽 테이블에 누락된 데이터를 JOIN시킴으로써 데이터를 누락시키지 않도록한다.

그러나 실무에서는 OUTER 조인은 조심스럽다. LEFT 조인을 하게되면 full 스캔을 하게된다.
따라서 성능면에서 비용이 발생한다.

* SELF 조인
자기자신을 참조하는 조인
select A.last_name, B.last_name from employees A, employees B
where A.manager_id = B.employee_id
A의 매니저는 B의 직원아이디를 뜻한다.
SELF 조인에서 INNER 조인을 하였다. 그렇기 때문에 두 테이블의 공통의 데이터만을 출력한다.

[DB] 테이블, 제약조건


CREATE TABLE 테이블이름(
 컬럼이름1 데이터타입,
 컬럼이름2 데이터타입,
 컬럼이름3 데이터타입,
 제약조건
);

데이터타입의 종류
- 문자형 : char(size), varchar2(size) <- 가변형
- 숫자형 : number, number(w), number(w, d)
- 날짜형 : date
- 대용량(이미지, 파일) : LOB

테이블 복사
CREATE TABLE emp01 AS SELECT * FROM employees;

테이블 구조만 복사
CREATE TABLE emp02 AS SELECT * FROM employees WHERE 1 = 0;

테이블 구조 수정
- 새로운 컬럼 추가
ALTER TABLE emp02 ADD(job varchar2(30));

- 기존 컬럼 수정
ALTER TABLE emp02 MODIFY(job varchar2(50));

- 기존 컬럼 삭제
ALTER TABLE emp02 DROP(job);
또는
ALTER TABLE emp02 DROP column job;

테이블 삭제
DROP TABLE emp02 PURGE;//쓰레기 데이터 값까지 제거

테이블 로우(row) 삭제
TRUNCATE table emp01;
DELETE FROM emp01;
두 명령어의 차이는 DELETE는 ROLLBACK이 가능해서 데이터를 되돌릴 수 있는 반면 TRUNCATE는 ROLLBACK이 불가능하다는 것

테이블 쓰레기값 삭제
PURGE recyclebin;

테이블 이름 변경
RENAME emp01 to emp02;

테이블 정의
CREATE TABLE emp03(
 empno number(4),
 empname varchar2(10),
 job varchar2(10),
 deptno number(4)
);

ROW 추가
INSERT INTO emp03 values(1, '홍길동', 'IT', 30);

ROW 추가시 명시적 컬럼 추가
INSERT INTO emp03(empno, empname, job) values(1, '박찬호', 'IT');

ROW 추가시 null문자로 추가
INSERT INTO emp03 values(1, null, null, null);

제약조건(데이터를 추가, 수정, 삭제하는 과정에서 DB의 무결성 유지)

CREATE TABLE emp04(
 empno number(4) NOT NULL, //반드시 입력해야하는 제약조건
 empname varchar2(10),
 job varchar2(10) PRIMARY KEY,//식별자로써 주키이다. 유일한 키값이고 반드시 입력
 deptno number(4) UNIQUE //중복되는 값을 배제(유일한 값)
);

테이블의 제약조건을 읽어냄
SELECT CONSTRAINT_NAME, CONSTRAINT_TYPE, TABLE_NAME
 FROM USER_CONSTRAINTS WHERE TABLE_NAME = 'EMP04';

CONSTRAINT_TYPE
P - PRIMARY KEY
R - FOREIGN KEY(REFERENCES)
U - UNIQUE
C - NOT NULL, CHECK

테이블 선언에서 주키와 외래키 설정하기
CREATE TABLE emp05(
 empno number(4),
 empname varchar2(10),
 job varchar2(10),
 department_id number(4)

 CONSTRAINT emp05_empno_PK PRIMARY KEY(empno),
 CONSTRAINT emp05_department_id_ FK FOREIGN KEY(department_id)
 REFERENCES departments(department_id)
);

테이블을 만든 뒤 나중에 제약을 설정

CREATE table emp06(//테이블 수정 방식
empno number(4),
empname varchar2(10),
job varchar2(10),
department_id number(4)
);

ALTER TABLE emp06 ADD CONSTRAINT emp06_empno_PK PRIMARY KEY(empno);
ALTER TABLE emp06 ADD CONSTRAINT emp06_department_id_FK FOREIGN KEY(department_id) REFERENCES departments(department_id);

제약조건 삭제
ALTER TABLE emp06 DROP CONSTRAINT emp06_empno_PK

CHECK (의도한 데이터만 입력받기 위해 설정)
CREATE TABLE emp07(
 empno number(4),
 empname varchar2(10),
 job varchar2(10),
 gender varchar2(1) CHECK(gender IN('M', 'F'))//M, F 둘중 하나의 값만 허용
);
INSERT INTO emp07 values(100, '홍길동', 'IT', 'M');

DEFAULT 제약조건
CREATE TABLE emp08(
 deptno number,
 dname varchar2(20),
 loc varchar2(20) DEFAULT 'seoul', //값을 입력하지 않으면 디폴트로 seoul입력
);
INSERT INTO emp08(deptno, dname) values(10, '홍길동');

[DB] 함수


1. 그룹함수(SUM, AVG, MAX, MIN, COUNT...)
- SUM() 인자값으로 컬럼을 지정. 해당컬럼의 합계 산출
SELECT SUM(salary) AS 인건비 FROM employees;

- AVG() 해당컬럼의 평균 산출
SELECT AVG(salary) AS 평균급여 FROM employees;

- MAX() 컬럼의 최대값
SELECT MAX(salary) AS 최대급여 FROM employees;

- MIN() 컬럼의 최소값
SELECT MIN(salary) AS 최소급여 FROM employees;

- COUNT() 컴럼의 수
SELECT COUNT(salary) AS 글로자 수 FROM employees;

GROUP BY (특정 컬럼의 값들을 각 값별로 묶어서 결과를 출력, 그룹함수를 적용할 때 사용한다. 단순히 group by에 기술된 컬럼만 출력한다면 distinct와 같은 결과.)
- 사원테이블에 부서별로 각 그룹의 부서 아이디와 평균 연봉 출력
SELECT department_id, AVG(salary) FROM employees GROUP BY department_id;

잘못된 출력명령
SELECT department_id, last_name, AVG(salary) FROM employees GROUP BY department_id;(부서별로 그룹을 묶었으나 출력하는 컬럼에 last_name이 존재한다. last_name을 어떠한 기준으로 출력할 방법이 없다.)

HAVING (특정 그룹의 조건을 지정)
- 그룹별로 부서 아이디와 연봉이 10000이상인 부서 출력
SELECT department_id, AVG(salary) FROM employees GROUP BY department_id
HAVING AVG(salary) >= 10000;

- 부서별로 사원의 수와 커미션을 받는 사원의 수를 카운트하여 출력
SELECT department_id, COUNT(department_id), COUNT(commission_pct)
FROM employees GROUP BY department_id HAVING COUNT(commission_pct) IS NOT NULL

2. 숫자함수
- MOD() 나머지값 리턴
SELECT MOD(1, 3) "나머지 값" FROM dual;(dual은 가상의 테이블)

- ROUND() 반올림
SELECT ROUND(899.2356, -2) "반올림" FROM dual;
(두 번쨰 인자가 -2변 소수점 위 2번째 자리 반올림, 2라면 소수점 아래 2번째 자리 반올림)

- TRUNC() 반올림 버림
SELECT TRUNC(899.2356, 2) "반올림버림" FROM dual;

3. 문자열함수
- LOWER() 대문자를 소문자로
SELECT LOWER('DataBase') FROM dual;

- UPPER() 소문자를 대문자로
SELECT UPPER('DataBase') FROM dual;

- SUBSTR() 부분문자열 추출
SELECT SUBSTR('Korea Economy', 3, 8) FROM dual;
3->추출문자 시작, 8->추출문자로부터 출력할 문자갯수

- LENGTH() 문자열길이 추출
SELECT LENGTH('DataBase') FROM dual;

4. 날짜함수
- SYSDATE
SELECT SYSDATE-1 AS 어제, SYSDATE AS 오늘, SYSDATE+1 AS 내일 FROM dual;

- 근무일수 구하기
SELECT last_name, SYSDATE - hire_date FROM employees;

5. 변환함수 (데이터형변환 + 포멧변경)
- TO_CHAR() 해당하는 숫자, 날짜 형태의 데이터를 문자열로 변환
SELECT TO_CHAR(SYSDATE, 'YYYY-MM-DD DY') FROM dual;

숫자를 문자로
SELECT TO_CHAR(2000, '&999,999') FROM dual;

입사년도 출력
SELECT * FROM employees WHERE TO_CHAR(hire_date, 'YYY') = '1997';

- TO_DATE() 숫자, 문자형태의 데이터를 날짜형으로 변환
SELECT last_name, hire_date FROM employees
WHERE hire_date = TO_DATE(19970625, 'YYYY/MM/DD');

-TO_NUMBER() 정수형으로 변환
SELECT TO_NUMBER('10,000', '999,999') + TO_NUMBER('20,000', '999,999') FROM dual;

6. 기타함수
- DECODE() 케이스문처럼 사용
SELECT job_id, DECODE(job_id, 'ST_MAN', 'Salse DEPT', 'SH_CLERK', 'SALES DEPT', 'Another') FROM employees WHERE job_id LIKE 'S%';

문제) department_id가 80일 경우 Accounting, 50일 경우 Sales, 30일 경우 Invocation
SELECT department_id, DECODE(department_id, 80, 'Accounting', 50, 'Sales', 30, 'Invocation') FROM employees;

- NVL() 데이터값이 NULL인 경우 0 또는 다른 값으로 변환
SELECT employee_id, salary, NVL(commission_pct, 0) FROM employees;

문제) job_id순서로 사원의 연봉을 출력. 연봉 = (salary * 12) + commission_pct
SELECT last_name, salary * 12 + NVL(commission_pct, 0) AS 연봉 FROM employees
ORDER BY job_id ASC;

이상 몇가지 함수를 정리해 보았다. 더많은 함수들은 따로 더 찾아보고 공부하자

[DB] SELECT


기본적인 SELECT 구문 (SQL문 마지막에는 세미콜론이 항상 붙여야 하지만 OracleXEUniv 버전에서는 안붙여도 된다. 하지만 꼭 세미콜론을 붙이는 습관을 가지자.)

- table 정보 출력
SELECT * FROM TAB;

- 해당 테이블의 구조(정보)를 알고자 할때
DESC (해당테이블);

- 사원테이블의 전체 컬럼내용에 대한 데이터 출력
SELECT * FROM employees;

- 사원테이블 중 원하는 컬럼내용(employee_id, last_name, salsry)에 대한 데이터 출력
SELECT employee_id, last_name, salary FROM employees;

- 컬럼명 대신 별칭으로 출력
SELECT employee_id "사원번호", last_name AS "사원명", salary 연봉 FROM employees;
AS는 일반적으로 생략되고 이중인용부호는 공백이 있는 경우에 사용한다. 따라서 공백이 없다면 단순히 컬럼명 뒤에 원하는 별칭을 붙이면 된다.


WHERE 조건 

- 사원테이블에 성이 King인 사람 찾기
SELECT * FROM employees WHERE last_name = 'King';(대소문자 구문하고 홀따옴표 중요)

- AND연산자를 이용해 봉급이 10000 이상 20000 이하인 사람의 사원번호와 성, 봉급 출력
SELECT employee_id, last_name, salary FROM employees
WHERE salary >= 10000 AND salary <= 20000;

- BETWEEN연산자를 이용하여 위에 예제와 같은 데이터 출력
SELECT employee_id, last_name, salary FROM employees
WHERE salary BETEWEEN 10000 AND 20000;

- OR연산자를 이용하여 직업 아이디가 FI_MGR 이거나 FL_ACCOUNT인 사람의 사원번호, 고용일, 봉급, 직업 아이디 출력
SELECT employee_id, hire_date, salary, job_id FROM  employees
WHERE job_id = 'FI_MGR' OR job_id = 'FL_ACCOUNT';

- IN연산자(해당하는 컬럼 모두 출력)를 이용하여 직업 아이디가 'FI_MGR', 'FL_ACCOUNT', 'SA_MGR' 인 사람의 사원번호, 고용일, 봉급, 직업 아이디를 출력
SELECT employee_id, hire_date, salary, job_id FROM employees
WHERE job IN('FI_MGR', 'FL_ACCOUNT', 'SA_MGR');

- DISTINCT (중복 제거)를 사용하여 직업 아이디를 출력
SELECT DISTINCT job_id FROM employees;

- 비교연산자를 사용하여 97년도에 입사한 사원의 모든 정보를 출력
SELECT * FROM employees WHERE hire_date >= '1997/01/01' AND hire_date <= '1997/12/01';

- 부서테이블에서 부서번호가 10인 데이터 모두 출력
SELECT * FROM departments WHERE department_id =10;

- NOT연산자를 이용하여 위의 예제가 10이 아닌 데이터 모두 출력
SELECT * FROM departments WHERE NOT department_id = 10;

- 위의 예제에서 또다른 not 사용해 출력
SELECT * FROM departments WHERE department_id <> 10;

- LIKE연산자(검색과 관련해 자주 쓰임)를 사용하여 97년에 입사한 사원의 아이디, 성, 고용일을 출력
SELECT employee_id, last_name, hire_date FROM employees
WHERE hire_date LIKE '97%';

- LIKE 또다른 예제-
1. last_name이 K로 시작하는 row를 출력
SELECT employee_id, last_name, hire_date FROM employees
WHERE last_name LIKE 'K%';
2. last_name이 o로 끝나는 row를 출력
SELECT employee_id, last_name, hire_date FROM employees
WHERE last_name LIKE '%o';
3. last_name 중간에 a를 포함하지 않는 사원의 모든 정보를 출력
SELECT * FROM employees WHERE last_name NOT LIKE '%a%';

-ORDER BY(정렬)을 이용하여 고용일을 오름차순으로 정렬하고 사원 아이디, 성, 고용일을 출력
SELECT employee_id, last_name, hire_date FROM employees
ORDER BY hire_date ASC;

[DB] 데이터베이스


유용하고 의미있는 정보를 관리하고 저장하기 위해 데이터베이스를 사용한다.
데이터의 수가 십만개 또는 몇백만개는 크지도 않지만 오늘날 빅데이터가 이슈화되고 있는 시점에서 실시간으로 생성되는 데이터의 수는 어마어마하다.

따라서 Oracle, MS SQL, MY SQL과 같은 DBMS, 즉 데이터베이스를 관리해 주는 소프트웨어가 필요하다.

앞으로 Oracle을 위주로 공부한다. 그 이유는 가장 널리 사용되어지고 성능과 비용이 좋기 때문이다. 하지만 데이터베이스의 구축보다는 어떻게 활용을 할것인가에 초점을 맞출것이고  데이터베이스 설계의 측면에서는 프로그래머가 되어 많은 역량을 쌓으면서 차츰 데이터를 보눈 눈을 높여가면서 계속적으로 공부해나가야할 분야일 것 같다.

앞으로의 순서는 대략 다음과 같다.

1. SELECT 문을 활용한 데이터 선택
2. 함수
3. TABLE 생성과 제약조건 설정
4. JOIN
5. VIEW, SQUENCE, INDEX
6. DB모델링

일단 간단한 SELECT문에 대해 알아보자

SELECT : 원하는 Column을 선택
FROM : 해당 테이블 지정
WHERE : 조건 설정
DISTINCT : 중복제거
ORDER BY : 정렬(ASC오름차순, DESC내림차순)

예를 들어 다음과 같다.
SELECT Column FROM Table WHERE 조건 ORDER BY 정렬필드 [ASC, DESC]