[JavaScript] JavaScript 기초 정리

선언문

내부 선언 방식

<script>
자바스크립트 코드
</script>

외부 선언 방식

<script src="자바스크립트 파일 경로"></script>

변수(Variables)

정의 : 변하는 수를 저장하는 공간

변수 선언 형식

var 변수명 = 값;
var num = 100; //숫자형 데이터
var str = "hello"; //문자형 데이터
var bool = true; //논리형 데이터

연산자

정의 : 프로그래밍 계산 작업에 필요한 부호 자세한 내용은 msdn 참조

제어문

정의 : 프로그램의 흐름을 제어할 수 있도록 도와주는 실행문

1. 조건문

• if문 , else if문 (조건 만족 여부에 따라 스크립트 코드 수행 여부가 결정)

if (조건식1) {
    실행문1;
} else if (조건식2){
    실행문2;
} else {
    실행문3;
}

2. 선택문

• switch문 (일치하는 경우에 값이 있을 경우 선택하여 수행)

var 변수 = 초기값;
switch (변수) {
    case 값1: 실행문1;
    break;
    case 값2: 실행문2;
    break;
    default : 기본값;
}

3. 반복문

• while문 (조건식을 만족하는 동안 반복실행)

var 변수 = 초기값;
while (조건식) {
    실행문;
    증감식;
}

• do while문 (반드시 한 번은 실행문을 실행하고 조건식을 검사)

var 변수 = 초기값;
do {
    실행문;
    증감식;
}
while (조건식)

• for문 (while과 방식은 동일)

for (초기값; 조건식; 증감식){
    실행문;
}

함수

정의 : 데이터만 저장할 수 있는 변수와는 달리, 일련의 실행문을 메모리에 저장하고 호출할 수 있는 공간.

함수 선언문

function add(a+b){
    return a+b;
} // 선언 함수
var add = function(a,b){
    return a+b;
} // 익명 함수

함수 호출

function 함수명(매개변수1, 매개변수2...매개변수n){
    스크립트 실행문;
}
함수명(데이터1[인자], 데이터2...데이터n); //함수 호출

매개변수가 없을 때는 괄호를 빈 값으로 두고 함수명(); 으로 진행하면 된다.

내장함수의 종류

return문

정의 : 함수에서 결과값을 되돌려줄 때 사용

유형 : 데이터 반환, 강제종료, 재귀 함수 호출

function calc(){
    var result = 100+200;
    return result; //데이터를 반환하는 return문
}
function myFnc(){
    document.write("hello");
    return; // 함수를 강제 종료하는 return문
    document.write("javascript");
}  -> 결과 : hello
function testFnc(){
    num++;
    document.write(num);
    if(num==10) return; //정의문 내에서 함수를 다시 호출하는 return문
    -> 결과 : 12345678910
}

지역 변수와 전역 변수

전역 변수

var 변수;
function 함수명(){
    변수=값;
}

지역 변수

function 함수명(){
    var 변수=값;
}

이벤트

정의 : 브라우저에서 방문객이 취하는 모든 동작을 이벤트라고 한다. 또한 이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라 일컫는다.

이벤트 종류

• 마우스 이벤트

• 키보드 이벤트

• 기타 이벤트

이벤트 선언 방식

• 직접 요소 이벤트 등록 방식

<button id="btn" onclick="alert('Event')">버튼</button>

• DOM을 이용한 이벤트 등록 방식

<button id="btn">버튼</button>
document.getElementId('btn').onclick = function(){
    alert('Event');
}

키보드 접근성

마우스가 없거나 시각장애인과 같이 마우스 사용이 어려운 경우에도 이벤트가 작동할 수 있도록 하는 것.

가령 onmouseover 는 onfocus 와 함께 사용해주거나 onmouseout은 onblur 와 함께 작성해야 한다.

이벤트 중복 등록

한 요소에 중복으로 이벤트를 등록하게 될 경우, 일반적으로는 맨 마지막에 있는 이벤트만 실행하고 나머지 이벤트는 실행하지 않는다. 이러한 중복 이벤트 문제를 해결하기 위해 이벤트 등록 메서드를 사용할 수 있다.

요소 선택.addEventListener("이벤트 종류", 함수명 또는 익명함수, false(표준 캡처 방식));
//일반 브라우저
요소 선택.attachEvent("on이벤트 종류",함수명 또는 익명 함수);
// ie8 이하

this 키워드

정의 : 방문자가 이벤트를 발생한 요소

이벤트 객체

정의 : 사이트에 방문자가 지정한 요소에서 이벤트가 발생한 경우, 이벤트 핸들러(익명 함수)에 이벤트 객체를 생성하여 실행문으로 사용 가능

• ie9이상 이벤트 객체 생성

<script type="text/javascript">
    document.onkeydown=function(e){
        alert(e);
    }
</script>

• ie8이하 이벤트 객체 생성

<script type="text/javascript">
    document.onkeydown=function(e){
        alert(window.event);
    }
</script>

• 모든 브라우저 호환 (삼항조건연산자를 이용, true면 e 실행, false면 window.event 실행)

<script type="text/javascript">
    document.onkeydown=function(e){
        var eventObj = e?e:window.event;
        alert(eventObj);
    }
</script>

이벤트 객체 속성 종류

• 마우스 이벤트 객체 속성

• 키보드 이벤트 객체 속성

• 전체 이벤트 객체 속성

참고 서적

• Do it! 자바스크립트 + 제이쿼리 입문