JavaScript
함수와 이벤트
Aaron Snowberger
교통대학교 • 웹프로그래밍기초 • 12주차
pp. 512-552
12주차
함수와 이벤트
15
15-1 함수 알아보기�15-2 var를 사용한 변수의 특징�15-3 let와 const의 동장�15-4 재사용할 수 있는 함수 만들기�15-5 함수 표현식�15-6 이벤트와 이벤트 처리기�15-7 DOM을 이용한 이벤트 처리기
pp. 512-552
15-1 함수 알아보기
여러 동작을 묶은 덩어리, 함수
함수는 프로그래밍에서 가장 중요한 뼈대를 이룹니다. 실제로 웹 브라우저에서는 함수를 사용해서 명령을내리기 때문이죠.
자바스크립트프로그램은단순히 동작하나만실행되는게 아니라여러 가지 동작이 연결됩니 댜 이 렇게 동작해야 할 목적 대로 묶은 명 령을 함수function라고 합니 다. 함수를 사용하면 각명령의 시작과끝을 명확하게 구별할수 있고, 묶은 기능에 이름을붙여서 어디서든같은 이름으로 명령을 실행할 수 있습니다.
15-1 함수 알아보기
여러 동작을 묶은 덩어리, 함수
개발자는프로그래밍을할때 alert() 함수처럼 자바스크립트에 들어 있는 함수를 가져다 사용하거나,자신이 필요한명령을직접 함수로만들어서 사용합니다.
예를들어 다음과같이 두수를 더하는프로그램이 있다면숫자를 더 하눈 명 령을 묶어 addNumber() 함수로 작성할 수 있습니다.
15-1 함수 알아보기
함수 선언 및 호출
함수가어떤 명령을처리할지 미리 알려 주는것을함수를선언한다또는함수를정의한다고합니댜 함수를 선언할 때는 함수마다 서로 다른 이름을 붙여 나중에 사용할 때 알아보기 쉽도록 합니다.
하지만 프로그램에서는 함수를 선언하는 것만으로는 함수가 실행되지 않습니다. 함수를 선언한후에 따로 실행하는 코드를 작성해야 됩니다.
이렇게 선언한 함수를 사용하는 것을 함수를 호출한다 또는 함수를 실행한다고 합니다.
15-1 함수 알아보기
함수 선언 및 호출
15-1 함수 알아보기
함수 선언 및 호출
개발자가원하는 어느 곳에 함수를 선언해 놓기만 하면 선언한 워치와 상관없이 함수를 실행할 수 있습니다.
그래서 보통 한 파일 안에 여러 함수를 선언했을 때 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 부분율 모아 놓고 필요할 때마다 함수를 호출해서사용합니다.
15-2 var를 사용한 변수의 특징
변수의 적용 범위 스코프 알아보기
자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프scope라고 합니다.
한함수안에서만사용할수 있는 변수를 지역 변수 또는 로컬 변수 Iocal variable라고 하고, 스크립트 소스 전체에서 사용할 수 있는 변수를 전역 변수또는 글로벌 변수 global variable라고 합니다.
15-2 var를 사용한 변수의 특징
함수 안에서만 쓸 수 있는 지역 변수
지역 변수는 함수 안에서 선언하고 함수 안에서만 사용합니다. 지역 변수를 선언하려면 예약어 var와함께 변수 이름을지정해야합니다.
15-2 var를 사용한 변수의 특징
스크립트 안에서 자유롭게 쓸 수 있는 전역 변수
전역 변수는 적용 범위를 제한하지 않고 쓸 수 있습니다. 즉, 전역 변수는 지역 변수와 달리 스크립트 소스 코드 전체에서 사용할 수 있습니다.
15-2 var를 사용한 변수의 특징
var와 호이스팅
JavaScript에서는 변수가 사용된 후에 선언할 수 있습니다. 다시 말해서; 변수는 선언되기 전에 사용할 수 있습니다.
이를 이해하려면 '호이스팅'이라는 용어를 이해해야 합니다. 호이스팅은 모든 선언을 현재 범위의 맨 위로(현재 스크립트 또는 현재 함수의 맨 위로) 이동하는 JavaScript의 기본 동작입니다.
그러나 간혹 호이스팅처럼 var 예약어를 사용한 변수는 선언하기 전에 사용하면 프로그램 오류를 발생시킬 수 있습니다.
15-2 var를 사용한 변수의 특징
변수의 재선언과 재할당
var를 사용한 변수는 호이스팅 외에도 재선언과 재할당을 할 수 있습니다.
15-3 let와 const의 동장
let을 사용한 변수의 특징
ES6 이전의 자바스크립트 프로그램에서는 var 예약어만으로 변수를 선언했습니다. 이전 슬라이드에서 살펴본 것처럼 var 예약어를 빠뜨리면 의도하지 않게 전역 변수가 되기도 하고, 프로그램 길이가 길어지다보면 실수로 사용하는 변수를 재선언하거나 값을 재할당해 버리는 경우가 생기기도 합니다.
15-3 let와 const의 동장
let을 사용한 변수의 특징
그래서 ES6 에서는 변수를 선언하기 위한 예약어로 let와 const가 추가되었고, 되도록이면 var 예약어는 사용하지 않을 것을 권장합니다. 예약어 var와 let, const 의 가장 큰 차이는 스코프의 범위입니다. var는함수 영역(레벨)의 스코프를 가지지만 let와 const는 블록 영역의 스코프를 가집니다.
15-3 let와 const의 동장
let을 사용한 변수의 특징
만약 전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초깃값만 할당하면 됩니다.
15-3 let와 const의 동장
재할당은 가능하지만 재선언은 할수 없는 변수
let 예약어를사용하여 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없습니다. 그러니 예약어 var와 같이 실수로 같은 변수의 이름을 사용할 걱정은 없습니다.
15-3 let와 const의 동장
재할당은 가능하지만 재선언은 할수 없는 변수
let 예약어를사용하여 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없습니다. 그러니 예약어 var와 같이 실수로 같은 변수의 이름을 사용할 걱정은 없습니다.
15-3 let와 const의 동장
const를 사용한 변수의 특징
const 역시 let와 마찬가지로 변수를 선언할 때 사용하는 예약어 입니다. 이름에서 예상할 수 있듯이 const로 선언한 변수는 상수 변수constant variable 입니다. 상수는 프로그램 안에서 변하지않는 값을 뜻합니다.
15-3 let와 const의 동장
const를 사용한 변수의 특징
또한 const를사용해 이미 값을지정한변수에 새로운값을할당할수도 없습니다.
15-3 let와 const의 동장
자바스크립트 변수, 이렇게 사용하세요
자바스크립트 문법을 벗어나지 않으면서 가독성과 디버깅을 하기 쉽도록 변수 사용 방법을 정리해 보겠습니다.
15-4 재사용할 수 있는 함수 만들기
매개변수, 인수, return 알아보기
한 번만 사용하는 함수라면 상관없지만, 프로그램 안에서 여러 번 사용하는 함수인데 입력 값을 바꾸지 못한다면 매우 불편할 것입니다. 이처럼 변수값이 자주 변하는 상황에서 사용하려 면 값을 고정하지 않고 어떤 숫자든지 2 개만 addNumber() 함수로 넘겨서 더해 주면 됩니다.
즉, 함수를 실행하는 데 필요한 값을 함수 밖에서 제공하는 것이죠. 이렇게 하려면 함수를 선언할 때부터 외부에서 값을 받아줄 변수를 미리 만들어야합니다. 이 것을 매개변수parameter라 하고 함수를 호출할 때 괄호 안에 매개변수의 이름을 넣습니다.
15-4 재사용할 수 있는 함수 만들기
함수 선언할 때 매개 변수 지정하기
매개변수를 사용하기 위해 함수 addNumber( )를 수정해 보겠습니다.
그런데 여기까지만 선언하면 두 수를 더한 sum값은 함수 안에만 있게 됩니다. 결과값을 함수 밖에서 사용하려면 함수를 실행한 위치로 돌려줘야 합니다. 이러한 동작을 값을 반환한다 return라고 합니다.
15-4 재사용할 수 있는 함수 만들기
매개변수 기본값 지정하기
ES6부터는 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능도 생겼습니다.
Do it! 1 부터 n까지 숫자틀 더하는 함수
1단계 매개변수가있는함수선언하기
2단계 함수호출하기
15-5 함수 표현식
익명 함수
지금까지 살펴본 함수의 사용 방법은 함수명을 선언하고 그 이름을 사용해 호출합니다. 이 방법은 함수 이름만 알면 어디서나 호출해서 실행할 수 있어서 많이 사용합니다. 이 밖에 따로 함수 이름을 지정하지 않고 사용하거나, 함수를 호출하지 않고 바로 실행하는 방법도 있습니다.
익명 함수는 이름이 없는 함수를 말합니다. 즉, 익명 함수를 선언할 때는 이름을 붙이지 않습니다. 익명 함수는 함수 자체가 식 expression 이므로 함수를 변수에 할당할 수 있으며 , 또한 다른 함수의 매개변수로 사용할 수도 있습니다.
15-5 함수 표현식
즉시 실행 함수
한번만실행하는함수라면 함수를 정의하면서 동시에 실행할수 있습니다. 바로즉시 실행 함수입니다. 즉시 실행 함수는 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를해석합니다.
15-5 함수 표현식
즉시 실행 함수
한번만실행하는함수라면 함수를 정의하면서 동시에 실행할수 있습니다. 바로즉시 실행 함수입니다. 즉시 실행 함수는 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를해석합니다.
15-5 함수 표현식
화살표 함수
ES6 버전부터는 => 표기법(화살표 표기법)을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있습니다. 이 방법은 간단히 화살표 함수라고 하는데 익 명 함수에서 만 사용할 수 있습니다.
매개변수가없을경우
15-5 함수 표현식
화살표 함수
ES6 버전부터는 => 표기법(화살표 표기법)을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있습니다. 이 방법은 간단히 화살표 함수라고 하는데 익 명 함수에서 만 사용할 수 있습니다.
매개변수가 1 개인경우
15-5 함수 표현식
화살표 함수
ES6 버전부터는 => 표기법(화살표 표기법)을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있습니다. 이 방법은 간단히 화살표 함수라고 하는데 익 명 함수에서 만 사용할 수 있습니다.
매개변수가 2개 이상인 경우
15-6 이벤트와 이벤트 처리기
이벤트 알아보기
대부분의 함수는 사용자가 화면에서 버튼을 클릭하거나 항목을 선택했을 때 실행됩니다. 이처럼 버튼을 클릭하거나 항목을 선택하는 것을 ‘ 이벤트’라고 합니다. 그리고 이벤트가 발생했을 때 실행하는 함수를 ‘이벤트 처리기’라고 합니다.
웹 브라우저를기본으로실행하는자바스크립트에서 이벤트는중요한개넘이지요.이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말합니다. 이벤트는웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말합니다 .
15-6 이벤트와 이벤트 처리기
마우스 이벤트
15-6 이벤트와 이벤트 처리기
키보드 이벤트
15-6 이벤트와 이벤트 처리기
문서 로딩 이벤트
15-6 이벤트와 이벤트 처리기
폼 이벤트
15-6 이벤트와 이벤트 처리기
이벤트 처리기 알아보기
웹 문서에서 이벤트가 발생하면 처리하는 함수를 이벤트 처 리기 또는 이벤트 핸들러 event handler라고 합니다.
이벤트를 처리하는 가장 기본적인 방법은 이벤트가 발생한 HTML 태그에 이벤트 처리기를직접 연결하는것입니다. 이 방법은자바스크립트초기 버전부터 사용했으며 지금도많이 사용하고였죠.
15-6 이벤트와 이벤트 처리기
이벤트 처리기 알아보기
15-6 이벤트와 이벤트 처리기
이벤트 처리기 알아보기
Do it! 버튼을 클릭해서 상세 설명 표시하거나 닫기
1단계 스크립트를 작성하기
2단계 클릭하는 이벤트 처리기 추가하기
15-7 DOM을 이용한 이벤트 처리기
DOM 핸들링
지금까지 이벤트 처리기를 지정하는 방법은HTML 이 주인이 되어 자바스크립트의 함수를 불러와서 사용했습니다. 하지만 DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결합니다.
자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 였는데 그중에서 함수 querySelector()를 사용하여 가져오는 것이 쉽습니다. querySelector()의 괄호 안에는 클래스 이름이나 id 이름도는 다양한 선택자를 넣을 수 있습니다.
15-7 DOM을 이용한 이벤트 처리기
DOM 핸들링
15-7 DOM을 이용한 이벤트 처리기
DOM 핸들링
15장 한 눈에 정리하기
15장 한 눈에 정리하기
15장 마무리 문제
15장 마무리 문제
Thanks!
Please keep this slide for attribution