STS 123::자바스크립트 기초

2. 함수와 이벤트 처리


본 강좌에서는 JavaScript의 기초적인 함수 사용법과 이벤트처리는 어떻게 하고, 어떤 방식이 있는지, 왜 사용하는지 알아봅니다.

이 강의를 통해 자바스크립트의 함수와 이벤트모델을 이해하고 활용할 수 있습니다.


01: 함수

함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다. 함수도 하나의 타입(datatype)입니다. 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능합니다.

js_2-4

1) 선언 방법

function name (one, two){
    함수 기능
}

2) 리턴값

동영상 강좌

참고 자료

퀴즈

1) JavaScript를 이용하여 두 값을 합하는 함수를 정의하세요.

해답보기

function add(a,b){
    return a+b;
}

2) 위의 정의한 함수를 호출하세요.

해답보기

var x = add(4,3);

02: 이벤트처리

<html>
<body>
    <p>Click the button to display the date.</p>
    <button onclick="displayDate()">The time is?</button>
    <script>
        function displayDate() {
            document.getElementById("demo").innerHTML = Date();
        }
    </script>
    <p id="demo"></p>
</body>
</html> 
실행 결과

js_2-1

버블링 & 캡처링 방식

<html>
    <head> 
        <title>Bubbling and Capturing</title> 
    </head> 
    <body> 
        <div id="mydiv">Click Me</div> 
    </body> 
</html>


js_2-2-1

1) 버블링

이벤트가 자식으로부터 발생하여 부모로 전파되는 방식입니다. 이벤트가 발생하면 트리 위치가 가장 깊은 곳부터 거슬러 올라가게 되고 이 모습이 마치 거품이 올라가는 것과 같아 이벤트 버블링이라고 불립니다.

2) 캡처링

이벤트 버블링과 정반대로 최상위 노드에서 이벤트가 발생합니다. 위의 이벤트 버블링 때 처럼 div요소를 클릭했을 때 아래 순서로 이벤트가 발생합니다.

동영상 강좌

참고 자료

퀴즈

1) onClick 이벤트를 이용하여 버튼을 누르면 “hello world” 문구가 나오도록 하세요(힌트: style=”display:none”)

해답보기

<html>
    <body>
    <p></p>
    <p id="id" style="display:none">Hello World!</p>
    <button type="button" onclick="document.getElementById('id').style.display='block'">Click Me!</button>
    </body>
</html> 

js_2-2-1


03: 실습 예제

기본 실습은 통합실습페이지에서 한꺼번에 다루고 있습니다. 아래의 링크를 클릭하면 새창(탭)이 열리고 해당 예제로 이동하게 됩니다.

04: 참고 자료