frontend 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);

01: 이벤트(Event)

일반적으로 프로그래밍 언어에서 이벤트하고 하면 사용자의 동작 혹은 프로그램에서 발생하는 특정한 상황을 의미 합니다. 이벤트가 발생하면 보통 사전에 정의된 특정 코드가 실행되고 그에 따라 기능이 동작하거나 화면이 변경되는 등의 변화가 발생 합니다.

<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: 참고 자료