변수의 범위(scope)
변수는 선언하고 사용할 때 적용되는 범위(scope)를 갖는다.
변수의 유효 범위에 따른 구분
1. 지역변수(local variable) - 함수 안에서만 사용할 수 있는 변수
매개변수도 지역변수이다.
for 문에서 만든 변수(카운터 변수)는 for 범위 안에서만 사용할 수 있다.
2. 전역변수(global variable) - 함수 범위에 상관없이 모든 범위에서 사용할 수 있는 변수
<script> 태그가 여러 개로 나뉘어 있어도 전역변수는 한 문서 안의 모든 영역에서 사용 가능
자바스크립트 변수 활용 방안 p 518
1. 전역변수는 최소한으로 활용(const) 변경되지 않을 경우 사용, return은 반환값을 하나 밖에 보내지 못함,
2. var 변수는 함수의 시작 부분에서 선언
3. for문에서는 카운터 변수를 사용할 때 var예약어를 사용하지 않는다.
4. var 보다는 let을 사용하는 것이 좋다. (ES6 문법)
함수 표현식
변수에 함수를 저장하자. 공간이기 때문에 저장한다고 생각하면 된다.
함수의 호이스팅을 막아서 코딩의 혼선을 최소화 분업을 할 경우나 큰 프로젝트의 경우
익명함수 (이름 없는 함수) 식별자를 구분할 수 없는 함수
함수명이 없이 작성된 함수, 대체적으로 전용 함수임.
정의 시)
const(let) 식별자 = function() { //const, let 둘 다 사용 가능
명령자들;
}
사용 시)
식별자();
이름 없는 함수 예
divbtn.addEventListener("click", function(){
div(); //함수호출 });
이름 있는 함수 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼 처리 함수</title>
</head>
<body>
<button id="p">+</button>
<p id="cnt">0</p>
<button id="m">-</button>
</body>
<script>
const plus = document.querySelector("#p");
const minus = document.querySelector("#m");
const count = document.querySelector("#cnt");
let c = 0;
function plusMinus(e) {
if(e.target.id == "p") c++; //작성할 코드가 한 줄이면 { }를 생략할 수 있다.
else c--;
count.innerHTML = c;
}
plus.addEventListener("click", plusMinus);
minus.addEventListener("click", plusMinus);
</script>
</html>
화살표함수(=>)
함수 표현식을 화살표 함수로 간결하게 표현, 가독성 및 유지 보수성을 높이는 방식.
작성단계
1) function 키워드를 생략한다. p = 매개변수
const idfunction = function(p) {.....};
-> const idfucntion = (p) => {......};
2) 매개변수가 한 개일 때는 ( )를 생략한다.
-> const idfunction = p => {......};
3) 매개변수가 없거나 둘 이상일 때는 괄호를 쓴다.
-> const idfunction = (a, b) => {.....};
-> const idfunction = () => {.....};
4) 정의부가 return문만 있는 함수라면, return 생략 ( { } ) 도 생략.
const idfunction = function(p) {
return p + 1;
}
-> const idfunction = p => { p + 1 };
-> const idfunction = p => p + 1;
첫번째 식
배열과 연동한 여러 함수들에서 화살표 함수를 활용
forEach, map, filter, find, every, some, reduce 등
이벤트 처리기
버튼을 클릭하거나, 값을 입력하거나, 드래그 앤 드롭 등의 사용자가 행하는 동작을 이벤트라고 한다.
html의 onxxx 속성을 사용하여 이벤트를 처리
(onclick, onkeydown 등)
이벤트의 종류 p 541-2
1. 마우스 이벤트
2. 키보드 이벤트
keydown 누르는 동안, keypress 눌렀다 한 번만 발생
3. 문서 로딩 이벤트 resize, scroll 이벤트 사용
4. 폼 이벤트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 처리</title>
<style>
#over {
width: 250px;
height: 100px;
background-color: lavenderblush;
}
</style>
</head>
<body onload="loadfnc()">
<div id="over" onmouseover="mouseEvent('over')" onmouseout="mouseEvent('out')"></div>
<hr>
<input id="keyon" type="text" onkeydown="going()"> <!-- 키가 눌리면 going 함수 작동 -->
<h4 id="typing"></h4>
<input id="keyup" type="text" onkeyup="going2()"> <!-- 키가 눌리면 going 함수 작동 -->
<h4 id="typing2"></h4>
<hr>
<select id="mysel" onchange="chfnc()">
<option value="아우디">Audi</option>
<option value="BMW">BMW</option>
<option value="메르세데스">Meredes</option>
<option value="볼보">Volve</option>
</select>
<h4 id="res"></h4>
</body>
<script>
const loadfnc = () => { alert("로딩 끝 ~"); };
function mouseEvent(evt) {
if (evt == "over") {
document.querySelector("#over").innerHTML = "mouse over!";
}
if (evt == "out") {
document.querySelector("#over").innerHTML = "mouse out!";
}
}
let i = 0; //키보드 눌린 횟수 저장 4번째까지 찍히고 5번째 수행
function going() {
i++;
if (i >= 5) {
alert("입력 불가");
return;
}
document.getElementById("typing").innerHTML = "key down";
const ko = document.getElementById("keyon");
console.log(ko.value); // 3번 찍힘 return으로 나가서 새로운 값이 없음
}
let e = 0; //키보드 눌린 횟수 저장 5번째까지 찍히고 수행
function going2() {
e++;
if (e >= 5) {
alert("입력 불가");
return;
}
document.getElementById("typing2").innerHTML = "key up";
}
function chfnc() {
let msg = document.getElementById("mysel").value;
document.getElementById("res").innerHTML = msg;
}
</script>
</html>
'공부기록 > JavaScript' 카테고리의 다른 글
| 3월 14일 (2) JavaScript - 객체 date, DOM (2) | 2023.03.14 |
|---|---|
| 3월 14일 (1) JavaScript - 함수 파라미터, 객체 (0) | 2023.03.14 |
| 3월 13일 (1) JavaScript - 함수 (0) | 2023.03.13 |
| 3월 10일 JavaScript - 배열 (0) | 2023.03.10 |
| 3월 9일 (2) JavaScript - 제어문 while 문, 배열 (0) | 2023.03.09 |
