📌 웹 개발 언어인 자바스크립트의 기본 문법을 활용해 다양한 문제를 해결해 볼 수 있습니다.
Tip. 반환(return)과 출력(print; console.log 등)의 차이를 알아 봅시다.
반환과 출력은 프로그래밍에서 서로 다른 개념입니다.
1. 반환(Return):
- 목적: 함수가 어떤 값을 계산하고 그 값을 호출한 곳으로 전달하기 위해 사용됩니다.
- 사용: 함수 내에서 `return` 키워드를 사용하여 값을 반환합니다.
- 예시:
function addNumbers(a, b) {
let sum = a + b;
return sum; // 이 값이 함수 호출자에게 반환됨
}
let result = addNumbers(3, 4); // result에는 7이 할당(저장)됨
2. 출력(Print):
- 목적: 주로 사용자에게 정보를 표시하거나, 프로그램의 실행 과정을 디버깅하기 위해 사용됩니다.
- 사용: 주로 `console.log()`를 사용하여 콘솔에 출력하거나, HTML과 같은 문서에 직접 내용을 표시합니다.
- 예시:
let message = "안녕하세요!";
console.log(message); // 개발자 도구의 콘솔에 "안녕하세요!" 출력
- 간단히 말하면, 반환은 "함수가 값을 주는 것"이며,
- 출력은 주로 사용자 또는 개발자에게 "정보를 표시하는 것"입니다.
* 반환된 값은 변수에 할당하거나 다른 계산에 사용될 수 있습니다.
* 반면 출력은 주로 개발자가 프로그램 실행 과정을 이해하거나, 사용자에게 정보를 전달하기 위해 사용됩니다.
문제 1) 반지름을 매개 변수로 받아서, 원의 넓이와 둘레를 구하는 함수를 만들어주세요.
주어진 코드는 반지름이 3인 원의 넓이와 둘레를 계산합니다.
- 원의 넓이: `circleArea(3)` 함수는 원의 넓이를 계산하므로, 이 함수의 결과는 3.14 * 3^2 = 28.26입니다.
- 원의 둘레: `circleCircumference(3)` 함수는 원의 둘레를 계산하므로, 이 함수의 결과는 2 * 3.14 \times 3 = 18.84입니다.
따라서, 이 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다:
- 원의 넓이: 28.26
- 원의 둘레: 18.84
//원주율 함수 선언
function circleArea(radius) {
// 원주율 선언
let PI = 3.14;
// 원의 넓이 계산
let area = PI * radius * radius;
// 결과 반환
return area
}
//원 둘레 함수 선언
function circleCircumference(radius) {
// 원주율 선언
let PI = 3.14;
// 원의 둘레 계산
let circumference = 2 * PI * radius;
// 결과 반환
return circumference
}
// 예시로 반지름이 3인 원의 넓이와 둘레를 계산해봅니다.
let resultArea = circleArea(3);
let resultCircumference = circleCircumference(3);
// 경고창으로 결과를 출력해 봅니다.
alert("원의 넓이: " + resultArea);
alert("원의 둘레: " + resultCircumference);
// 또는 개발자 도구(브라우저에서 F12 또는 마우스 오른쪽 클릭 후 '검사' -> 'Console' 탭)
console.log("원의 넓이: " + resultArea);
console.log("원의 둘레: " + resultCircumference);
정답 코드
function circleArea(radius) {
// 원주율 선언
let PI = 3.14;
// 원의 넓이 계산
let area = PI * radius * radius;
// 결과 반환
return area
}
function circleCircumference(radius) {
// 원주율 선언
let PI = 3.14;
// 원의 둘레 계산
let circumference = 2 * PI * radius;
// 결과 반환
return circumference
}
// 예시로 반지름이 3인 원의 넓이와 둘레를 계산해봅니다.
let resultArea = circleArea(3);
let resultCircumference = circleCircumference(3);
// 경고창으로 결과를 출력해 봅니다.
alert("원의 넓이: " + resultArea);
alert("원의 둘레: " + resultCircumference);
// 또는 개발자 도구(브라우저에서 F12 또는 마우스 오른쪽 클릭 후 '검사' -> 'Console' 탭)
console.log("원의 넓이: " + resultArea);
console.log("원의 둘레: " + resultCircumference);
문제 2) if문과 %를 이용해서 생년월일을 입력하면 나의 띠를 알려주는 프로그램을 만들어주세요.
주어진 코드는 1990년생의 띠를 계산하고, 그 결과를 경고창과 콘솔에 출력합니다.
코드 결과 값
입력값: 1990년
출력값:
경고창: "당신의 띠는 말띠입니다."
콘솔: "당신의 띠는 말띠입니다."
function findZodiacSign(year) {
// 띠 계산
let zodiacSign = year % 12;
// 띠 이름을 담을 변수 선언
let zodiacName;
// 띠 이름 결정
if (zodiacSign == 0) {
zodiacName = "원숭이띠";
} else if (zodiacSign == 1) {
zodiacName = "닭띠";
} else if (zodiacSign == 2) {
zodiacName = "개띠";
} else if (zodiacSign == 3) {
zodiacName = "돼지띠";
} else if (zodiacSign == 4) {
zodiacName = "쥐띠";
} else if (zodiacSign == 5) {
zodiacName = "소띠";
} else if (zodiacSign == 6) {
zodiacName = "호랑이띠";
} else if (zodiacSign == 7) {
zodiacName = "토끼띠";
} else if (zodiacSign == 8) {
zodiacName = "용띠";
} else if (zodiacSign == 9) {
zodiacName = "뱀띠";
} else if (zodiacSign == 10) {
zodiacName = "말띠";
} else if (zodiacSign == 11) {
zodiacName = "양띠";
}
// 결과 반환
return zodiacName;
}
// 예시로 1990년생의 띠를 계산해봅니다.
let zodiac = findZodiacSign(1990);
// 경고창과 콘솔에 결과를 출력해 봅니다.
alert("당신의 띠는 " + zodiac + "입니다.")
console.log("당신의 띠는 " + zodiac + "입니다.");
정답 코드
function findZodiacSign(year) {
// 띠 계산
let zodiacSign = year % 12;
// 띠 이름을 담을 변수 선언
let zodiacName;
// 띠 이름 결정
if (zodiacSign == 0) {
zodiacName = "원숭이띠";
} else if (zodiacSign == 1) {
zodiacName = "닭띠";
} else if (zodiacSign == 2) {
zodiacName = "개띠";
} else if (zodiacSign == 3) {
zodiacName = "돼지띠";
} else if (zodiacSign == 4) {
zodiacName = "쥐띠";
} else if (zodiacSign == 5) {
zodiacName = "소띠";
} else if (zodiacSign == 6) {
zodiacName = "호랑이띠";
} else if (zodiacSign == 7) {
zodiacName = "토끼띠";
} else if (zodiacSign == 8) {
zodiacName = "용띠";
} else if (zodiacSign == 9) {
zodiacName = "뱀띠";
} else if (zodiacSign == 10) {
zodiacName = "말띠";
} else if (zodiacSign == 11) {
zodiacName = "양띠";
}
// 결과 반환
return zodiacName;
}
// 예시로 1990년생의 띠를 계산해봅니다.
let zodiac = findZodiacSign(1990);
// 경고창과 콘솔에 결과를 출력해 봅니다.
alert("당신의 띠는 " + zodiac + "입니다.")
console.log("당신의 띠는 " + zodiac + "입니다.");
문제 3) 1 ~ 100까지 수 중에서 짝수의 합을 구하는 코드를 작성해주세요.
주어진 코드는 1부터 100까지의 수 중에서 짝수의 합을 계산하고, 그 결과를 경고창과 콘솔에 출력합니다
코드 결과 값
출력값:
경고창: "1 ~ 100까지 수 중에서 짝수의 합: 2550"
콘솔: "1 ~ 100까지 수 중에서 짝수의 합: 2550"
function sumEvenNumbers() {
// 처음 합(sum)은 0임을 선언
let sum = 0;
for(let i=1; i<=100; i++) {
if(i%2 == 0) {
sum = sum + i;
}
}
// 결과 반환
return sum;
}
let sum = sumEvenNumbers();
alert("1 ~100까지 수 중에서 짝수의 합: " + sum);
console.log("1 ~100까지 수 중에서 짝수의 합: " + sum);
정답 코드
function sumEvenNumbers() {
// 처음 합(sum)은 0임을 선언
let sum = 0;
for(let i=1; i<=100; i++) {
if(i%2 == 0) {
sum = sum + i;
}
}
// 결과 반환
return sum;
}
let sum = sumEvenNumbers();
alert("1 ~100까지 수 중에서 짝수의 합: " + sum);
console.log("1 ~100까지 수 중에서 짝수의 합: " + sum);
문제 4) for문과 if문을 이용해서 입력한 년도에 해당하는 띠를 찾는 프로그램을 만들어주세요.
주어진 코드는 1990년생의 띠를 계산하고, 그 결과를 경고창과 콘솔에 출력합니다.
코드 결과 값
입력값: 1990년
출력값:
경고창: "당신의 띠는 말띠입니다."
콘솔: "당신의 띠는 말띠입니다."
function findZodiacSign(year) {
// 띠 이름 저장
let zodiacSigns = ["원숭이띠", "닭띠", "개띠", "돼지띠", "쥐띠", "소띠", "호랑이띠", "토끼띠", "용띠", "뱀띠", "말띠", "양띠"];
// 띠 이름을 담을 변수 선언
let zodiacName;
// 띠 찾기
for(let i = 0; i < zodiacSigns.length; i++) {
if(year % 12 == i) {
zodiacName = zodiacSigns[i];
}
}
// 결과 반환
return zodiacName;
}
// 예시로 1990년생의 띠를 계산해봅니다.
let zodiac = findZodiacSign(1990);
// 경고창과 콘솔에 결과를 출력해 봅니다.
alert("당신의 띠는 " + zodiac + "입니다.");
console.log("당신의 띠는 " + zodiac + "입니다.");
정답 코드
function findZodiacSign(year) {
// 띠 이름 저장
let zodiacSigns = ["원숭이띠", "닭띠", "개띠", "돼지띠", "쥐띠", "소띠", "호랑이띠", "토끼띠", "용띠", "뱀띠", "말띠", "양띠"];
// 띠 이름을 담을 변수 선언
let zodiacName;
// 띠 찾기
for(let i = 0; i < zodiacSigns.length; i++) {
if(year % 12 == i) {
zodiacName = zodiacSigns[i];
}
}
// 결과 반환
return zodiacName;
}
// 예시로 1990년생의 띠를 계산해봅니다.
let zodiac = findZodiacSign(1990);
// 경고창과 콘솔에 결과를 출력해 봅니다.
alert("당신의 띠는 " + zodiac + "입니다.");
console.log("당신의 띠는 " + zodiac + "입니다.");
과제 제출 방법
이번 웹 개발 학습의 과제는 본인의 컴퓨터에서 작성한 mission.html 파일을 복사하여 과제 제출 페이지에 업로드해 주시거나, 본인이 작성한 코드를 복사하신 후에 과제 제출 페이지를 캡처한 아래 사진의 빨간 네모 칸의 코드 블록 내부 위치에 붙여넣기 해주세요!
셀프 채점 기준
[ ] 함수에 대해 이해하고 코드로 구현할 수 있는지
[ ] if문에 대해 이해하고 코드로 구현할 수 있는지
[ ] for문에 대해 이해하고 코드로 구현할 수 있는지
[선택과제]자바스크립트 코드 작성해보기(중)
직접 자바스크립트 코드를 작성하며 원리를 이해합니다.
📌 함수, if문, for문, 배열에 대한 개념을 숙지하셨다면 더 어려운 문제도 충분히 해결할 수 있습니다.
난이도 (⭐️⭐️) ⇒ n에 들어 있는 숫자가 array(배열) 안에 몇 개가 있는지 찾는 함수를 만들어주세요
//아래는 참고용 코드입니다.
array = [1,2,3,3,4,5,6]
n = 3
function solution(array, n) {
let answer = 0;
for(let i = 0; i < array.length; i++){
if (array[i] == n){
answer += 1; // answer = answer + 1 와 같은 표현
}
}
return answer;
}
alert("중복된 숫자의 개수는 " + solution(array, n) + "개 입니다.")
console.log("중복된 숫자의 개수는 " + solution(array, n) + "개 입니다.")
정답 코드
//아래는 참고용 코드입니다.
array = [1,2,3,3,4,5,6]
n = 3
function solution(array, n) {
let answer = 0;
for(let i = 0; i < array.length; i++){
if (array[i] == n){
answer += 1; // answer = answer + 1 와 같은 표현
}
}
return answer;
}
alert("중복된 숫자의 개수는 " + solution(array, n) + "개 입니다.")
console.log("중복된 숫자의 개수는 " + solution(array, n) + "개 입니다.")
난이도 (⭐️⭐️⭐️) ⇒ 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 “absolutes”와 이 정수들의 부호를 차례대로 담은 불리언 배열 “signs”가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return(반환) 하도록 “solution 함수”를 완성해주세요
const a = 10;
const b = 20;
console.log(a > 0 && b > 0); // true
console.log(a > 0 || b > 0); // true
console.log(!a); // false
3. 증감 연산자
증감 연산자는 변수의 값을 1씩 증가 또는 감소시키는 데 사용합니다.
++:변수의 값을 1씩 증가시킵니다.
--:변수의 값을 1씩 감소시킵니다.
증감 연산자는 변수 앞에 붙여서 전위 연산자로 사용하거나 뒤에 붙여서 후위 연산자로 사용할 수 있습니다.
전위 연산자:
let a = 10;
console.log(++a); // 11
console.log(a); // 11
후위 연산자:
let a = 10;
console.log(a++); // 10
console.log(a); // 11
4. 반복문
반복문은 특정 조건이 만족될 때까지 특정 코드 블록을 반복적으로 실행하는 데 사용됩니다.
다음은 자바스크립트에서 주로 사용하는 반복문입니다.
for 문:특정 횟수만큼 코드 블록을 반복합니다.
while 문:특정 조건이 참일 때까지 코드 블록을 반복합니다.
do while 문:코드 블록을 한 번 실행한 후, 특정 조건이 참일 때까지 반복합니다.
for 문 예시:
특정 횟수만 반복할 때 사용
1부터 10까지 출력
for (let i = 1; i <= 10; i++) {
console.log(i);
}
while 문 예시:
조건이 참일 때까지 반복
10보다 작을 때까지 숫자를 입력받기
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
do while 문 예시:
조건이 참인 동안 반복적으로 코드를 실행하고, 마지막에 한 번 더 실행합니다.
i가 10보다 작을 동안 출력
let i = 0;
do {
console.log(i);
i++;
} while (i < 10);
5. 실습 문제
1부터 100까지의 합을 구하는 코드를 작성하십시오.
1부터 10까지 홀수만 출력하는 코드를 작성하십시오.
100부터 0까지
자바스크립트 배열 학습 정리
1. 배열 기초
변수는 하나의 값만 담을 수 있지만, 배열은 여러 개의 값을 담을 수 있습니다.
배열은 대괄호[]를 사용하여 생성하고, 값은 쉼표,로 구분합니다.
배열의 요소는 인덱스 번호로 접근할 수 있으며, 인덱스는 0부터 시작합니다.
// 배열 생성
const fruits = ["바나나", "사과", "딸기", "포도", "수박"];
// 배열 요소 접근
console.log(fruits[0]); // "바나나"
console.log(fruits[2]); // "딸기"
2. 배열 길이
배열의 길이는length속성을 사용하여 확인할 수 있습니다.
// 배열 길이 확인
console.log(fruits.length); // 5
3. 반복문과 배열
for반복문을 사용하여 배열의 모든 요소를 순회할 수 있습니다.
// 배열 요소 순회
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
4. 문제 해결
과일 이름과 가격을 담은 두 개의 배열을 만들고,for반복문을 사용하여 과일 이름과 가격을 함께 출력합니다.
const fruits = ["바나나", "사과", "딸기", "포도", "수박"];
const prices = [1000, 2000, 3000, 4000, 5000];
// 과일 이름과 가격 출력
for (let i = 0; i < fruits.length; i++) {
console.log(`${fruits[i]}의 가격은 ${prices[i]}원입니다.`);
}
12개담은 배열을 만들고,for반복문과if문을 사용하여 사용자의 생년월일을 입력받아 띠를 출력합니다.
const signs = ["쥐", "소", "호랑이", "토끼", "용", "뱀", "말", "양", "원숭이", "닭", "개", "돼지"];
// 사용자 생년월일 입력
const year = parseInt(prompt("출생 연도를 입력하세요: "));
// 띠 출력
for (let i = 0; i < signs.length; i++) {
if ((year - 4) % 12 === i) {
console.log(`당신의 띠는 ${signs[i]}입니다.`);
break;
}
}
