입력된 키 확인
<div class="container"> <div class="key-box"> <div class="key">Q</div> <div class="key">W</div> <div class="key">E</div> <div class="key">R</div> </div> </div># CSS *{ box-sizing: border-box; margin: 0; padding: 0; } .container{ width: 500px; margin: 50px auto; } .key-box{ width: 100%; display: flex; justify-content: space-evenly; border: 3px solid black; } .key{ width: 100px; height: 100px; border: 2px solid black; border-radius: 5px; margin : 10px 0; font-size: 30px; font-weight: bold; display: flex; justify-content: center; align-items: center; user-select : none; }# JS // 문자열.toLowerCase() : 영어를 모두 소문자로 변경 (A -> a) // 문자열.toUpperCase() : 영어를 모두 대문자로 변경 (a -> A) // 방법 1 // const keys = document.querySelectorAll(".key"); // console.log(keys); // // 화면(문서자체)에서 키가 눌러지는걸 감지했을 때 // document.addEventListener("keydown", function(e) { // console.log(e.key); // let idx; // 인덱스 값을 지정할 변수 // // 입력된 키를 소문자로 바꿔서 일치하는 CASE 실행 // switch(e.key.toLowerCase()) { // case 'q' : idx = 0; break; // case 'w' : idx = 1; break; // case 'e' : idx = 2; break; // case 'r' : idx = 3; break; // default : return; // 함수 종료 (다른 키 넣으면) // } // // idx번호와 일치하는 keys 배열의 요소의 배경색을 변경 // keys[idx].style.backgroundColor = "skyblue"; // }); // document.addEventListener("keyup", function(e) { // console.log(e.key); // let idx; // 인덱스 값을 지정할 변수 // // 입력된 키를 소문자로 바꿔서 일치하는 CASE 실행 // switch(e.key.toLowerCase()) { // case 'q' : idx = 0; break; // case 'w' : idx = 1; break; // case 'e' : idx = 2; break; // case 'r' : idx = 3; break; // default : return; // 함수 종료 (다른 키 넣으면) // } // // idx번호와 일치하는 keys 배열의 요소의 배경색을 변경 // keys[idx].style.backgroundColor = "white"; // }); // 방법 2 (함수사용, 코드 줄이기) const keys = document.querySelectorAll(".key"); // 키보드 이벤트 핸들러 함수 function changeKeyColor(e, color) { // e: 이벤트 종류 객체 // color : 색상 const keyMap = { 'q' : 0, 'w' : 1, 'e' : 2, 'r' : 3}; const idx = keyMap[e.key.toLowerCase()]; // keyMap['q'] -> 0 // keyMap['w'] -> 1 // keyMap['e'] -> 2 // keyMap['r'] -> 3 // key Map에 없는 값 입력되었을 때 idx는 undefined if(idx != undefined) { keys[idx].style.backgroundColor = color; // keys[idx] 요소 배경색을 매개변수로 전달받은 color 변경 } } // 키가 눌렸을 때 실행 document.addEventListener("keydown", (e) => changeKeyColor(e, "skyblue")); document.addEventListener("keyup", (e) => changeKeyColor(e, "white"));
입력한 색으로 변경
<main> <section class="color-area"> <div class="container"> <div class="box"></div> <input type="text" class="color-input"> </div> <div class="container"> <div class="box"></div> <input type="text" class="color-input"> </div> <div class="container"> <div class="box"></div> <input type="text" class="color-input"> </div> <div class="container"> <div class="box"></div> <input type="text" class="color-input"> </div> <div class="container"> <div class="box"></div> <input type="text" class="color-input"> </div> </section> <button id="changeButton">색상 변경</button># CSS *{ box-sizing: border-box; margin: 0; padding: 0; } main{ width: 600px; margin: 50px auto; text-align: center; } .color-area{ display: flex; justify-content: space-between; } .container{ width: 18%; display: flex; flex-direction: column; } .box{ width: 100%; height: 108px; border: 1px solid black; transition-duration: 0.5s; } .color-input{ width: 100%; height: 20px; } #changeButton{ width: 80%; margin-top: 10px; background-color: white; border : 2px solid pink; border-radius: 5px; cursor: pointer; font-weight: bold; } #changeButton:hover{ color : white; background-color: pink; } #changeButton:active{ border: 2px solid black; }# JSS // 배경색 적용할 div 배열 const boxList = document.querySelectorAll(".box"); // 배경색 입력할 input 배열 const inputList = document.querySelectorAll(".color-input"); document.querySelector("#changeButton").addEventListener("click", function() { for(let i = 0; i < boxList.length; i++) { boxList[i].style.backgroundColor = inputList[i].value; } });
함수(function)
목표하는 결과를 만들기 위한 코드의 묶음
코드를 {} (블록)으로 묶어 작성하고
붙여진 이름을 호출해서 사용* 함수 선언 * 함수 정의 * 함수 호출 [기본 함수 형태] function 함수명() { // 함수 선언 // 함수 정의 } 함수명(); // 함수 호출
매개 변수와 전달 인자
매개 변수 (parameter)
- 함수 선언 시 () 안에 작성되는 변수
-> 전달 인자로부터 받은 값을 저장
-> 함수 정의 부분에서 사용 가능전달 인자 (Arguments)
- 함수 호출 시 () 안에 작성되는 값
-> 함수 매개 변수로 전달되는 값<input type="number" id="input1"> <button id="btn1">확인하기</button># JS // 매개변수, 전달인자 예제 확인 const input1 = document.querySelector("#input1"); const btn1 = document.querySelector("#btn1"); // 2개의 값을 전달받아 콘솔로 단순 출력하는 기능의 함수 function print1(num, str) { // 함수 선언 // 함수 정의 console.log(`${num} 은/는 ${str} 입니다`); } // btn1 클릭시 input1의 값을 읽어와 print1() 함수 호출 btn1.addEventListener("click", function() { const value = input1.value; if(value.length == 0) { console.log("값을 입력해주세요"); return; // 함수 종료 + 호출한 곳으로 돌아감 } let result; // 입력된 값이 0인지 양수인지 음수인지 저장 if(Number(value) === 0) result = "0"; else if(Number(value) > 0 ) result = "양수"; else result = "음수"; // 함수 호출 (두개의 값을 전달받아 "123은 양수입니다" 출력) print1(value, result); }); // 중요!! 전달되는 전달인자의 값의 순서가 중요하다.
<button id="btn2a">매개변수로 배열 전달하기</button># JS // 매개변수로 배열 전달하기 function arrayTest(arr, num) { // 매개변수로 전달 받은 배열의 모든 요소 출력하기 for(let i = 0; i < arr.length; i++) { // arr[i]에 있는 값이 멜론과 일치하면 // 해당 요소의 값을 딸기로 재대입해라 if(arr[i] == '멜론') arr[i] = "딸기"; num = 100; console.log(`${i} 번 인덱스 값 : ${arr[i]}`) } } // #btn2a 클릭 되었을 때 document.querySelector("#btn2a").addEventListener("click", function() { const arr = ["사과", "바나나", "멜론"]; let x = 0; // 원시타입 arrayTest(arr, x); console.log("arr[2] : ", arr[2]); // 왜 멜론이 아니라 딸기가 출력될까? // 배열 -> 참조형 // 숫자.. -> 원시타입 // arr은 배열 == 즉, 참조형 // arrayTest() 함수에 전달인자로 arr을 전달하면 // arr에 저장된 주소만 보내서 함수를 수행. (얕은 복사) console.log(x); });
<!-- html 요소에서 this == 이벤트가 발생한 요소 자체 --> <button id="btn2b" onclick="btn2bFn(this)">매개변수로 요소 전달하기</button># JS // 매개변수로 요소 전달하기 function btn2bFn(el) { // 매개변수 el (element) : 이벤트가 발생한 요소 자체 el.style.backgroundColor = "yellow"; }
<button id="btn2c">매개변수로 함수 전달하기</button># JS // 매개변수로 함수 전달하기 function print2(fn) { console.log(`a + b = ${fn(3, 4)}`); } document.querySelector("#btn2c").addEventListener("click", function() { // 함수도 변수에 저장 가능! 변수명 == 함수명 const sumFn = function(a, b) { return a + b; // 함수를 종료 // 값(a+b)을 가지고 호출한 곳으로 돌아감 } // print2 함수에 전달인자로 sumFn을 전달 print2(sumFn); });
return (반환)
현재 수행중인 함수를 종료하고 호출한 곳으로 돌아감.
호출한 곳으로 돌아갈 때 return 옆에 작성된 값을 가지고 돌아갈 수 있다.
ex) return 100; => 호출한 곳으로 100을 가지고 돌아감.함수 마지막에 return 구문이 생략되어 있다면 자동으로 return; 구문이 추가된다.
익명함수 (이름이 없는 함수)
[기본 함수] function 함수명([매개변수]){ // 함수정의 } 함수명(); // 이름이 있으니까 함수명으로 호출 가능
[익명 함수] function([매개변수]){ // 함수 정의 } // 함수 이름이 없어서 호출할 수 없다!!! * 기본 함수와 다르게 변수에 대입, 매개 변수로 바로 전달되야하는 곳에 주로 사용 ex) const sumFn = function(a,b){ return a + b; } ex) 요소.addEventListener("click", function(){})
화살표 함수 (Arrow Function)
- 익명 함수의 한 종류
- 익명 함수를 간단히 표기하는 방법 (ES6)
익명 함수 : function(){}
1. 기본 형태 : () => {} <!-- 매개변수 1개면 () 생략 가능 --> 2. 매개변수 1개 : (e) => {} 또는 e => {} // () 생략 3. 매개변수 n개 : (a,b,c) => {} // () 생략 불가 4. 함수 정의 부분에 return 한 줄만 있을 경우 : 1) 익명 함수 : function(){ return 1 + 2; } 2) 화살표 함수(기본) : () => { return 1 + 2; } 3) 화살표 함수(return 한줄) : () => 1 + 2 // {return} 생략 5. 함수 정의 부분에 return 한 줄만 있는데 return하는 값이 object(객체, 배열 등) 인 경우 {return} 생략 불가!!! () => { return {name:"홍길동", age:20}; } <button class="arrow">화살표 함수 기본 형태</button> <button class="arrow">매개변수 1개인 경우</button> <button class="arrow">return 한 줄만 작성된 경우</button> <button class="arrow">return 한 줄인데 object 반환하는 경우</button># JS // 화살표 함수 // 클래스가 arrow인 요소를 모두 얻어옴(배열) const arrowList = document.querySelectorAll(".arrow"); // 화살표 함수 기본 형태 arrowList[0].addEventListener("click", () => { alert("화살표 함수 기본 형태 연습"); }) // 매개변수가 1개인 경우 : () 생략 가능 arrowList[1].addEventListener("click", e => { e.target.style.backgroundColor = "pink"; }); // return 한 줄만 작성된 경우 : 중괄호 빼고, return도 생략 /* function test() { // 아래 함수랑 같음 } // = const test = () => { // 이 방식을 더 선호 // 위 함수랑 같음 } */ const twoNumberPlus = (otherFn) => { const input1 = Number(prompt("첫번째 값")); const input2 = Number(prompt("두번째 값")); alert(otherFn(input1, input2)); } arrowList[2].addEventListener("click", () => { twoNumberPlus( (a, b) => a + b); //== twoNumberPlus( (a, b) => { return a + b }); }) // return 한 줄인데 object 반환하는 경우 function printObject(otherFn) { const obj = otherFn("홍길동", 20); console.log(`obj.name : ${obj.name}`); console.log(`obj.age : ${obj.age}`); } arrowList[3].addEventListener("click", () => { printObject( (name, age) => { return {"name" : name, "age": age} // JS 객체는 object 타입 ! => return 한줄이어도 생략 불가 }); });
즉시 실행 함수
(() => {})()
- 익명 함수를 바로 수행하는 함수
*** 즉시 실행 함수 사용하는 이유 *** 1) 성능(속도)적 우위를 가지기 위해서 -> 아주 약간 빠름 2) 변수명 중복 문제 해결을 위해서 사용 const num1 = 100; // 전역 변수 (() => { const num1 = 200; // 지역 변수 console.log(num1); // 200 })()# JS // 즉시 실행 함수 (() => { console.log("즉시 실행 함수입니다"); })();
콜백 함수(Callback Function)
다른 함수의 매개변수로 전달되는 함수
특정 이벤트가 발생하거나 작업이 끝난 후 실행되는 함수
ex) setTimeout() 에 전달되는 함수, addEventListener() 에 전달되는 함수 등..setTimeout(function () { // 콜백 함수 }, 3000); arr.forEach(function (num) { // 콜백 함수 }); 요소.addEventListener("click", function() { // 콜백 함수 });
함수 연습
1. name이라는 매개변수를 받아 "Hello, [name]!"를 출력하는 함수를 선언 및 정의하고 호출하시오. function fn1(name) { console.log(`1번: Hello, ${name}`); } fn1("배령");
2. 두 개의 숫자를 매개변수로 받아 그 합을 반환하는 함수를 선언 및 정의하고 호출하시오. function fn2(a, b) { return a + b; } console.log("2번: ", fn2(3, 5));
3. 두 개의 숫자를 매개변수로 받아 곱한 결과를 반환하는 화살표 함수를 작성. const fn3 = (c, d) => c * d; console.log("3번: ", fn3(2, 5));
4. 두 개의 숫자를 매개변수로 받아, 첫 번째 숫자가 두 번째 숫자보다 크면 "첫 번째 숫자가 더 큽니다"를 출력하고, 그렇지 않으면 "두 번째 숫자가 더 크거나 같습니다"를 출력하는 함수를 선언 및 정의하고 호출하시오. function fn4(a, b) { if(a > b) { console.log("4번: 첫 번째 숫자가 더 큽니다"); } else { console.log("4번: 두 번째 숫자가 더 크거나 같습니다"); } } fn4(1, 2);
5. 문자열을 매개변수로 받아 문자열의 길이를 출력하는 함수를 선언 및 정의하고 호출하시오. function fn5(str) { console.log("5번: ", str.length); } fn5("바보");
6. 문자열과 반복 횟수를 매개변수로 받아, 해당 문자열을 주어진 횟수만큼 반복하여 출력하는 함수를 선언 및 정의하고 호출하시오. function fn6(str, num) { let result = ""; for(let i = 0; i < num; i++) { result += str; } console.log("6번: ", result); } fn5("hello", 5);
7. 숫자를 매개변수로 받아 그 숫자가 짝수인지 아닌지를 true 또는 false로 반환하는 함수를 선언 및 정의하고 호출하시오. function fn7(number) { if(number % 2 == 0) { console.log("7번: true"); } else { console.log("7번: false"); } } fn7(100);
8. 세 개의 숫자를 매개변수로 받아 그 중 가장 큰 숫자를 반환하는 함수를 선언 및 정의하고 호출하시오. function fn8(a, b, c) { let max = a; if(max < b) { max = b; } if(max < c) { max = c; } return max; // 내장함수 Math.max() : 전달받은 값 중 가장 큰 수 반환 // return Math.max (a, b, c) } console.log("8번: ", fn8(1, 5, 3)); //fn8(5,3,1); // xxx
9. 배열을 매개변수로 받아 첫 번째 요소를 반환하는 화살표 함수를 선언 및 정의하고 호출하시오. const fn9 = (arr) => { return arr[0] }; console.log("9번: ", fn9([10, 20, 30]) );
10. 배열을 매개변수로 받아 배열의 모든 숫자의 합과 평균을 객체 형태로 반환하는 함수를 선언 및 정의하고 호출하시오. function fn10(arr) { // let sum = 0; // for(let i=0; i<arr.length; i++) { // sum += arr[i]; // } // [1,2,3,4,5] let sum = arr.reduce((acc, curr) => { return acc + curr}); // 배열.reduce(callback함수) : JS 배열의 메서드로(함수), 배열의 모든 요소를 순회하면서 // 하나의 결과값을 누적하여 반환 // acc (accumulator) : 이전 콜백 호출에서 반환된 값 (누산기 - 결과를 누적) // curr (currentValue) : 현재값 - 현재 처리중인 배열 요소 값 let avg = sum / arr.length; return {"합계" : sum, "평균" : avg}; } console.log("10번: ", fn10([1, 2, 3, 4, 5]));
11. 숫자 두 개와 연산을 수행하는 함수를 매개변수로 받아, 두 숫자에 해당 연산을 적용한 결과를 반환하는 함수를 선언 및 정의하고 호출하시오. function calculate(a, b, operation) { return operation(a, b) } function add(x, y) { return x + y; } function minus(x, y) { return x - y; } console.log("11번: ", calculate(5, 3, add)); console.log("11번: ", calculate(5, 3, minus));
12. [사람의 이름]과 [인사말을 출력하는 함수]를 [매개변수]로 받아, 해당 이름과 인사말을 사용하여 인사를 출력하는 함수를 선언 및 정의하고 호출하시오. function greet(name, callback) { callback(name); } function sayHello(name) { console.log(`12번: Hello, ${name}`); } function sayGoodbye(name) { console.log(`12번: Bye, ${name}`); } greet("길동", sayHello); greet("영희", sayGoodbye);
인생은 변수