안녕하세요 JJU_DEVELOPER입니다.
이번시간에는 javascript 함수에 대한 설명입니다~!
목차
15-1 함수 알아보기
15-2 var를 사용한 변수의 특징
15-3 let와 const의 등장
15-4 재사용할 수 있는 함수 만들기
15-5 함수 표현식
15-6 이벤트와 이벤트 처리기
15-7 DOM을 이용한 이벤트 처리기
이중 중요하게 다루는 부분만 다루도록 하겠습니다.
15-1 자바스크립트 함수 알아보기
자바에서의 메서드와 같은 것을 자바스크립트에서는 함수라고 표현합니다.
-자바스크립트에서 함수의 역할은?
• 동작해야 할 목적대로 명령을 묶어 놓은 것
• 각 명령의 시작과 끝을 명확하게 구별할 수 있음
• 묶은 기능에 이름을 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있음
• 자바스크립트에는 이미 여러 함수가 만들어져 있어서 가져다 사용할 수 있음
예) alert( ), confirm 이런 것들은 내장되어있는 함수입니다.
함수의 선언 및 호출
함수 선언 : 어떤 명령을 처리할지 미리 알려주는 것
기본형: function 함수명(){명령}
• 스코프 : 변수가 적용되는 범위를 스코프라고 합니다.
스코프에 따라 지역 변수(로컬 변수)와 전역 변수(글로벌 변수)로 나뉘게 됩니다.
1. 지역 변수
• 함수 안에서 선언하고 함수 안에서만 사용합니다.
• var과 함께 변수 이름 지정
2. 전역 변수
• 스크립트 소스 전체에서 사용할 수 있습니다.
• 함수 밖에서 선언하거나 함수 안에서 var 없이 선언하면 됩니다.
여기서 QUIZ!!
아래 sum은 지역변수일까요 전역변수일까요~!?
위 이미지를 보시면 function 안에서 sum이라는 변수를 선언하였습니다.
그렇다면 sum은 지역변수가 되겠지요~?
여기서 콘솔에서 sum을 출력하려고 하면 출력이 되지 않습니다!!
그 이유는 function안에서만 선언을 하였기때문에
function 밖에서는 존재하지 않은 변수가 되니, 전연변수로 function 밖에서
선언해주셔야 합니다~!!!
15-2 var를 사용한 변수의 특징
여기서 전역변수 x를 선언하고, function안에서 y를 20이라고 선언하였습니다.
원래 자바에서는 변수 y라는 것이 생성되기전에 console.log로 y를 출력을 하려고 쓰면,
당연히 오류가 나게 됩니다.
var y 가 선언되기도 전에 무언가 계산을 하려고 하면 y is not defined라고 찾을 수 없다고 오류가 떠야 하는데,
자바스크립트에서는 not defined가 아닌, undefinded라고 뜹니다.
즉, 자바스크립트에서 undefinded란 변수에 값을 할당하지 않았다는 뜻입니다.
이제 바로 자바스크립트의 var(변수)의 특징입니다.
변수를 선언하지 않거나, 기능보다 밑에 선언을 해도,
변수가 마치 함수가 시작하는 라인에 선언이 된 것처럼 호이스팅 처리를 해주게 됩니다.
위에서 말한 것처럼, var로 변수를 선언하지 않고 변수 이름만 선언을 하게 되면,
의도치 않게 변수가 전역변수가 되어 사용하지 말아야 하는 곳에서도 사용이 되는 등,
개발자에게 치명적인 오류를 만들게 하는 이슈들 생길 수 있습니다.
따라서 추가 업데이트 된 버전(ES6)에서는 변수를 선언하는 예약어로 let와 const가 추가되었습니다.
되도록이면 var 예약어는 사용하지 않을 것을 권장합니다~!!!!!
15-3 let와 const의 등장
| 변수 | 설명 | 변수 | 설명 |
| let | • 블록 변수 – 블록({ }) 안에서만 사용할 수 있다 -> 전역 변수는 변수 이름과 초깃값만 할당하면 됨 • 재할당은 가능하지만 재선언은 할 수 없다. -> let으로 이미 선언한 변수는 또 똑같은 이름으로 재선언이 불가합니다~!! • 호이스팅이 없다. |
const | • 상수 – 변하지 않는 값을 선언할 때 사용 • 재선언XXX, 재할당XXX |
Tip) 자바스크립트 변수, 이렇게 사용하자
1. 전역 변수는 최소한으로 사용
2. var 변수는 함수의 시작 부분에서 선언
3. for 문에서 카운터 변수는 var보다 let 변수로 선언
4. ES6를 사용한다면 var보다 let를 사용하는 것이 좋다
<정리>
var => 함수 변수
let => 블록 변수
const => 상수
예시-let)
<script>
여기서 중점은 let sum이 두 번 있고 각각의 let sum변수는 다른 변수로 취급됩니다.
function 밖에 있는 sum 값은 0으로 지정해준 그대로가 출력이 되며,
for 문 안에서 쓰인 let sum은 더해진 값이 출력되게 됩니다~!
15-4 재사용할 수 있는 함수 만들기
함수를 만드는 이유는, 계산기처럼 어떠한 공식을 만들어 놓고 각각의 값을 넣을 때 계속해서 재사용이 가능합니다.
그렇게 되면 코드의 낭비가 많이 줄어들게 됩니다.
매개 변수란? 하나의 함수를 여러 번 실행할 수 있도록 실행할 때마다 바뀌는 값을 변수로 처리한 것입니다.
인수란? 함수를 실행할 때 매개변수 자리에 넘겨주는 값을 뜻합니다.
<script>
function calsum(n){
let sum =0;
for(let i=0; i<=n; i++){
sum+=i;
}
document.write("1부터 "+n+"까지 더하면 "+sum+"입니다.");
}
let userNum = prompt("얼마까지 더할까?");
if(userNum !==null){
calsum(userNum);
}
</script>
여기서 숫자로 받은 값을 문자열로 저장했다가 숫자로 더해주기 위해서 parseInt를 꼭 사용하지 않아도,
자바스크립트는 자동으로 변환하여 출력이 됩니다~!
15-5 함수 표현식
| 1. 익명 함수 | • 함수 이름이 없는 함수 • 함수 자체가 식이므로 함수를 변수에 할당할 수도 있고 다른 함수의 매개변수로 사용할 수도 있음 |
| 2. 즉시 실행 함수 | • 함수를 실행하는 순간 자바스크립트 해석기에서 함수를 해석함 • 기본형은 ( function ( ) ) { 명령 } ( ) ); |
| 3. 화살표 함수 | • ES6 이후 사용하는 => 표기법 • 익명 함수에서만 사용할 수 있음 자바의 람다식처럼 식을 간단하게 하면서 return함수를 쓰지 않아도 됩니다. |
1. 익명 함수)
익명함수는,
변수에 = 익명함수 저장
그 후,
출력할 때 변수 이름에 매개값을 넣어서 출력한 것이 익명함수입니다!
<script>
(function() {
let userName = prompt("이름을 입력하세요.");
document.write("안녕하세요? <span class='accent'>" + userName + "</span>님!");
}());
</script>
2. 즉시 실행 함수)
함수를 정의하면서 동시에 실행하는 것이 즉시 실행함수입니다.
( function (매개변수){실행내용}(안수전달));
아까 만들었을 때 저장을 하자마자 팝업이 뜨면서 이름을 입력하라는 창이 뜹니다.
따로 실행하는 것을 만들지 않아도, 즉시 실행하는 함수가 구현이 됩니다.
그렇다면, 이것을 조금 더 간단하게 쉽게 표현할 수 있을까요?
3. 화살표 함수)
기본형 :
(매개변수) => {함수 내용}
return을 생략할 수 있습니다!!
<script>
//방법1 익명함수
const hi = function () {
return "방법1 익명함수";
}
//방법2 화살표+리턴
const hello = () => { return "화살표+리턴" };
//방법3 화살표
const hihi = () => "화살표";
alert(hi());
alert(hello());
alert(hihi());
</script>위 세 가지 방법은 모두 동일하게 출력되는 것을 알 수 있습니다.
이렇게 출력할 때에는 선언한 변수명(매개변수)을 써주시면 됩니다!!
이렇게 화살표 함수만 알고 있으면 정말 간단하게 사용이 가능합니다!!!
15-6 이벤트와 이벤트 처리기
프로그래밍 언어에서 이벤트가 발생하면 보통 사전에 정의된 특정 코드가 실행되고,
그에 따라 기능이 동작하거나 화면이 변경되는 등의 변화가 발생합니다.
자바스크립트 이벤트
• 웹 브라우저나 사용자가 행하는 동작
• 웹 문서 영역 안에서 이루어지는 동작만 가리킴
• 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때,
폼에 내용을 입력할 때 발생
대표적인 이벤트 목록입니다.
| 이벤트명 | 설명 |
| click | 클릭시 발생 |
| change | 변동이 있을시 발생 |
| focus | 포커스를 얻었을때 발생 |
| keydown | 키를 눌렀을때 발생 |
| keyup | 키에서 손을 땟을때 발생 |
| load | 문서의 로드가 완료 되었을때 발생 |
| unload | 문서가 언로드 되었을때 발생 |
| resize | 윈도우 크기가 변경될 경우 발생 |
| mouseover | 마우스가 특정 객체 위로 올려졌을 시에 발생 |
| mousedown | 마우스를 클릭 했을때 발생 |
| mouseout | 마우스가 특정 객체 밖으로 나갔을 때 발생 |
| mousemove | 마우스가 움직였을 때 발생 |
| mouseup | 마우스에서 손을 땟을때 발생 |
| select | option 태그 등에서 선택을 했을때 발생 |
| submit | 입력양식이 제출 요청 될때 발생 |
이벤트 처리기란?
이벤트 핸들러는 이벤트발생을 감지하고 처리할 코드를 수행하는 역할을 담당하며,
HTML 태그의 속성으로 지정하거나 자바스크립트에서 DOM엘리먼트의 속성에 콜백 함수를 정의하는 형식으로 사용할 수 있습니다.
이벤트 핸들러는 앞의 이벤트 이름의 앞에 on을 붙여 사용합니다.
• 이벤트가 발생했을 때 처리하는 함수
• 이벤트 핸들러(event handler)라고도 함
예를 들면, 작은 이미지를 클릭(이벤트)하면 큰 이미지로 표시(이벤트 처리기)가 되는 것입니다.
예를 들면, 버튼을 누르게 되면? onclick
또는, 버튼을 누르게 되면 색을 입히는 것도 가능합니다.
onclick 예시)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 이벤트</title>
<link rel="stylesheet" href="css/event.css">
</head>
<body>
<div id="item">
<img src="images/jjang.jpg" alt="">
<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>짱구</h4>
<p>귀여운 짱구다. jju_developer </p>
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
</div>
</div>
<script>
function showDetail() {
document.querySelector('#desc').style.display = "block"; // 상세 설명 부분을 화면에 표시
document.querySelector('#open').style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤
}
function hideDetail() {
document.querySelector('#desc').style.display = "none"; // 상세 설명 부분을 화면에서 감춤
document.querySelector('#open').style.display = "block"; // '상세 설명 보기' 단추를 화면에 표시
}
</script>
</body>
</html>
15-7 DOM을 이용한 이벤트 처리기
아까는 태그의 속성을 이용하고, onclick=""안에 만들어 놓은 자바스크립트의 <script>를 넣어서 이벤트 처리기를 사용했습니다.
이번에는 조금 다르게 DOM을 이용하여 3개의 방법으로 만들 수 있습니다.
방법 1. 웹 요소를 변수로 지정하고 미리 만든 함수를 사용한다.
방법 2. 웹 요소를 따로 변수로 만들지 않고 사용
방법 3. 함수를 직접 선언
이 방법으로 하면 HTML 코드에 자바스크립트 소스가 섞이지 않게 됩니다.
위에서 한 코드를 잘 보면서 비교해 보세요!!
여기서는 이 HTML에서는 변경을 하지 않고 버튼을 만지지 않고
따로 자바스크립트만으로도 상세설명 닫기를 눌렀을 때 감춰져 있는 내용을 불러오고 닫을 수 있습니다.
이때 여기서
이 부분을 주석처리 하게 된다면 어떤 모습일까요?
상세 설명 보기를 눌렀을 때 상세 설명 닫기가 같이 보이기 때문에 각각 열었을 때에는 상세설명보기 단추를
화면에서 감춰야 하며, close 할 때에도 동일하게 상세설명 보기 부분을 감춰야 합니다!!!!
<부가설명>
우선 DOM이란 무엇일까요~?
우선 돔이 무엇인지 개요를 살펴보아야겠죠~?
돔은 문서객체모델이라고 하며, HTML 혹은 XML문서의 구조화된 표현을 제공하는 표준입니다.
HTML에서는 자바스크립트가 DOM 구조에 접근할 수 있는 방법이 제공되며,
이를 통해 문서 구조, 스타일, 내용 등을 변경 이 가능합니다.
자바스크립트는 DOM을 이용하여 HTML의 태그, 속성, 스타일 등을 추가/삭제하거나 변경할 수 있습니다.
DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결합니다.
- onXXX를 이용해 여러 이벤트 핸들러 속성을 부여하는 것도 가능합니다.
자바스크립트에서 HTML DOM 요소에 접근하는 방법은 태그이름, 아이디, 클래스, 이름 등을 이용하여,
특정 노드 객체를 선택하는 것입니다. CSS의 셀렉터와 유사하다고 볼 수 있습니다.
| no | DOM 노드 | 설명 |
| 1 | Document Node | 문서의 객체를 말하며, DOM트리에 접근하기 위한 최상위 노드로 모든 DOM 트리에 접근하기 위한 시작이 됩니다. |
| 2 | Element Node | 문서내의 모든 태그를 의미합니다. 각각의 element nodde는 다시 속성과 텍스트노드를 가지게 됩니다. |
| 3 | Attribute Node | 태그들의 속성을 객체화한 노드를 말합니다. 만일 특정 태그의 속성에 접근이 필요하다면, 해당 노드를 사용하면 되겠죵? |
| 4 | Text Node | 태그의 텍스트를 객체화한 노드입니다. 자식 노드를 가질 수 없으며, DOM 트리구조의 최종단 노드가 됩니다. |
이상으로 자바스크립트 JavaScript 함수 표현식과 이벤트 처리기 개념에 대한 설명을 마치겠습니다!!!
각각의 개념이 조금이라도 이해가 되셨으면 좋겠습니다.
오늘도 수고하셨습니다.
'주니어 기초 코딩공부 > Javascript & jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery)란? + 선택자 상세 설명 (1) | 2023.01.12 |
|---|---|
| 자바스크립트JavaScript 문서 객체 모델(DOM) 개념 및 DOM의 이벤트 처리 및 삭제 방법 (1) | 2023.01.11 |
| 자바스크립트JavaScript 내장 객체, 브라우저와 관련된 객체 알아보기 (1) | 2023.01.11 |
| 자바스크립트(JavaScript) 필수 문법 설명(자바스크립트 구구단출력) (0) | 2023.01.09 |
| 자바스크립트(JavaScript) 기초 용어설명 및 소스 작성 규칙 설명 (1) | 2023.01.09 |