2012/02/15 - [Study/Javascript] - 자바스크립트 공부중 - 1

자바스크립트는 어디서 일하는거지?

⊙ 브라우저에서 서버로 데이터 요청
→ 서버에서 가지고 있는 페이지를 되돌려줌
→  브라우저가 페이지를 보여줌
→  사용자 페이지에 있는 폼 필드에 입력한 데이터를 검증 (자바스크립트)
(필요에 의해서 서버와 통신을 할수도 있지만 브라우저에서 자바스크립트를 실행)

즉, 클라이언트 웹 브라우저에서 자바스크립트 코드를 실행

자바스크립트 인터프리터 - 웹 브라우저에서 자바스크립트 코드를 실행하는 부분


타이머(setTimer, setInterval) - 시간 맞춰 일하는 일꾼

- 지연될 시간을 지정하고 지정된 시간이 흘렀을때 실행되는 코드를 지정 
- 시간 지정 : 1/1,000 sec (밀리세컨드)
ex) 1초 = 1,000 , 1분 = 60,000

- 원샷 타이머 : 한 번만 코드를 수행 (setTimeout)
setTimeout(실행할 코드, 타이머 시간);
ex)
var tmrTime = setTimeout("alert('10초가 지났습니다.');", 10000); // 10초 후에 '10초가 지났습니다.' 라는 경고창을 한번만 띄움
clearTimeout(tmrTime); // 설정된 tmrTime 타이머를 제거
( 타이머가 실행되기 전에 사용해야 효과를 볼 수 있다. )

- 인터벌 타이머 : 각 주기에 따라 반복적으로 수행 (setInterval)
var tmrClock = setInterval(실행할 코드, 타이머 시간);
ex)
var tmrClock = setInterval ("alert('10초가 지났습니다.');", 10000); // 10초마다 '10초가 지났습니다.' 라는 경고창을 띄움
clearInterval(tmrClock); // 설정된 tmrClock 반복 타이머를 제거함 - 더이상 10초마다 경고창이 뜨지 않음.
 

특이한 점 발견!
타이머를 지정한 변수값을 바꾸면 어떻게 될까? 라는 생각에서 시작된 실험

var tmrT = setTimeout("alert('10초가 지났습니다.');", 10000);
tmrT = null;


또 다음의 경우는 어떨까?

var t = setTimeout("alert('10초가 지났습니다.');", 10000);

t = setTimeout("alert('5초가 지났습니다.');", 5000);




document.body.clientHeight - 클라이언트 윈도우 높이
document.body.clientWidth - 클라이언트 윈도우 넓이
document.getElementById().style.height- 선택한 객체의 높이
document.getElementById().style.width- 선택한 객체의 넓이



Event - onload, onresize, onclick


쿠키(Cookie) - 브라우저에 남기는 한 조각

반복적으로 사용되는 작은 데이터까지 꼭 서버에 남길 필요는 없기 때문에
클라이언트에 저장할 수 있는 쿠키를 사용.
(책에서는 영속적-persistence라는 단어로 표현해서 클라이언트에서 영속적으로 데이터를 저장할 수 있다고 표현하고 있다)
쿠키는 영원하지 않다.
각 쿠키마다 소멸일자를 정할 수 있으며 만료가 될 경우 해당 쿠키는 사라진다.
모든 쿠키는 같은 장소에 저장되기 때문에 특정 쿠키를 뽑아내거나 저장하기 위해서는 별도의 자바스크립트 소스를 지정해서 사용하기를 권장한다.
(getCookie, setCookie등 많은 소스가 공개되어있다. 나중에 하나 만들어서 올려야지..)

navigator.cookieEnabled // 브라우저에서 클라이언트 쿠키를 지원하는지 확인


조건문 - 상황에 맞게 !

if, else, else if - ture/false로 구분하여 확인
if(조건문) {
 // 조건문이 true일 경우 실행되는 부분
} else {
 // 조건문이 true가 아닌 경우 실행되는 부분
}

if(조건문1) {
 // 조건문1이 true일 경우 실행되는 부분
} else if(조건문2) {
 // 조건문1이 true가 아니면서 조건문2가 true일 경우 실행되는 부분
} else {
 // 조건문1이 true가 아니고 조건문2도 true가 아닐 경우 실행되는 부분
}

switch/case - 여러개의 조건을 지정할 때 효과적인 조건문

switch(비교데이터) {
case 조건1 :
 // 비교데이터가 조건1과 일치할 경우 실행되는 부분
 break; // 다른 case나 defalut를 거치지 않고 switch문을 빠져나가도록 함
default :
 // 조건에 맞는 데이터가 없는 경우 기본적으로 실행되는 부분
 // 하지만 윗 부분 조건에 맞아서 break문으로 switch문을 나갈 경우 실행되지 않음
 break;
}


비교연산자

x == y - 같다
x != y - 같지 않다 (다르다)
x < y - x가 y보다 작다
x > y - x가 y보다 크다
x <= y - x가 y보다 작거나 같다
x >= y - x가 y보다 크거나 같다
!x - x의 반대

결과는 true/false(Boolean형태)로 나온다.




주석 - 프로그램 코드의 메모

// - 한줄짜리 주석
/* ...... */ - 여러줄짜리 주석


전역변수 - 스크립트 안에서 모두 사용 가능 (함수나 다른 코드 밖에서 생성)
지역변수 - 해당 함수나 코드 내에서만 접근 가능


변수는 선언되는 위치에 따라서 전역변수인지, 지역변수인지 설정
전역변수는 스크립트가 실행되는 동안은 지속적으로 사용 가능
지역변수는 지정된 영역(함수나 코드) 안에서만 사용 가능. 영역이 끝날 경우 소멸.
ex)
<script>
var globalValue; // 전역변수
function test(){
  var localValue; // 지역변수
}
</script>

test 함수 안에서는 globalValue와 localValue를 함께 쓸 수 있지만
밖에서는 globalValue만 사용 가능하다.


반복문 - 계속 반복해!

for - 특정한 횟수만큼 반복하는데 탁월
조건이 false가 될때까지 반복해서 실행

for ( 초기화 ; 조건 ; 갱신 ) {
  // 반복 실행되는 부분
}

반복문 강제 종료 - break;
반복문 갱신한 다음 계속 실행 - continue;

while - 조건이 만족하는 동안 반복 실행

초기화;
while( 조건 ) {
  // 반복 실행되는 부분 
  // 안에서 조건에 해당하도록 갱신;
}



※ 반복문은 조건이 잘못될 경우 무한 반복에 빠질 수 있으니 사용에 주의!! 


배열 - 여러조각의 데이터를 수집

- 단일 변수로 여러 개의 데이터를 저장
과 그 값을 접근하는 데 사용되는 유일 키로 구성
- 배열형으로 선언하여 사용
- 배열은 실질적으로는 객체라는 사실!! (뒷 부분에 나올꺼다)
- 배일에 저장된 데이터는 항상 동일한 데이터 타입을 갖지 않는다.

ex)
var  arrMonth = new Array();  // 변수  arrMonth을 배열로 초기화
arrMonth[0] = "1월"; //  arrMonth  배열 인덱스 0 부분에 "1월" 문자형 데이터를 저장 
arrMonth[1] = "2월";
...
arrMonth[11] = "12월";

-----------

var arrMonth = ["1월", "2월", ... , "12월"]; // 변수 arrMonth 를 "1월", "2월", ... "12월" 의 데이터를 가지는 배열로 선언 (위와 동일한 데이터를 가지게 된다)

- 다차원 배열 : 배열속에 배열

ex)  2차원 배열로 구성하는 예시 

var arrDate = new Array(new Array(31), new Array(28), ... );
arrDate[0][0] = "1월1일";
arrDate[0][1] = "1월2일";
...
arrDate[1][0] = "2월1일"; 
arrDate[1][1] = "2월2일";  
...

----------

var arrDate = [["1월1일", "1월2일", ....], ["2월1일", "2월2일", .....]]

2차원 배열 구성시 행(row)과 열(column)을 가진 테이블 형태

배열변수.length - 현재 배열의 수를 반환
배열변수.push(변수) - 배열의 맨 끝에 새로운 항목을 추가


복잡한 조건문을 위한 연산자 로직

a && b - a와 b 모두 true 일 경우에만 true, 그 외는 모두 false
a || b - a와 b 둘 중 하나라도 true면 true, 그렇지 않으면 false
!a - a값의 반대 (a가 true면 false, false면 true)
Posted by Mooki
,