01. 기본 자료형
- 자료형이란 자료의 종류를 의미합니다.
- 문자를 표현할 때는 문자열 자료형을 사용합니다.
- 숫자를 표현할 때는 숫자 자료형을 사용합니다.
- 참과 거짓을 표현할 때는 불 자료형을 사용합니다.
확인 문제
- 다음 연산자들의 피연산자가 어떤 자료형인지 적어보세요.
| 연산자 |
피연산자 자료형 |
| +(문자열 연결 연산자) |
문자열 |
| +(덧셈 연산자) |
숫자 |
| && |
|
| - |
|
| * |
|
| || |
|
- 다음 프로그램의 실행 결과를 예측해 보세요.
<script>
console.log("# 연습 문제")
console.log("\\\\\\\\")
</script>
- 다음 프로그램의 실행 결과를 예측해 보세요.
<script>
console.log("안녕하세요"[1])
console.log("안녕하세요"[2])
console.log("안녕하세요"[3])
console.log("안녕하세요"[4])
</script>
- 다음 프로그램의 실행 결과를 적어 보세요. 예측하는 것보다 실제로 코드를 입력해 보고 결과를 확인하는 것이 쉬울 수 있습니다.
<script>
console.log(2 + 2 - 2 * 2 / 2 * 2)
console.log(2 - 2 + 2 / 2 * 2 + 2)
</script>
코멘트
-
| 연산자 |
피연산자 자료형 |
+(문자열 연결 연산자) |
문자열 |
+(덧셈 연산자) |
숫자 |
&& |
불 자료형 |
- |
숫자 |
* |
숫자 |
|| |
불 자료형 |
-
<script>
console.log("# 연습 문제")
console.log("\\\\\\\\")
</script>
> # 연습 문제
> \\\\
-
<script>
console.log("안녕하세요"[1])
console.log("안녕하세요"[2])
console.log("안녕하세요"[3])
console.log("안녕하세요"[4])
</script>
> 녕
> 하
> 세
> 요
-
<script>
console.log(2 + 2 - 2 * 2 / 2 * 2)
console.log(2 - 2 + 2 / 2 * 2 + 2)
</script>
> 0
> 4
03. 자료형 변환
- 사용자로부터 글자를 입력 받을 때는 prompt()함수를 사용합니다.
- 어떤 자료형의 값을 다른 자료형으로 변경하는 것을 자료형 변환이라고 합니다.
- 숫자 자료형으로 변환할 때 Number()함수를 사용합니다.
- 문자열 자료형으로 변환할 때 String()함수를 사용합니다.
- 불 자료형으로 변환할 때 Boolean()함수를 사용합니다.
확인 문제
- 다음 중 사용자로부터 불 입력을 받는 함수는 어떤 것인가요?
input()boolInput()confirm()prompt()
- 다음 표의 빈칸을 채우시오.
| 함수 이름 |
설명 |
Number() |
숫자 자료형으로 변환합니다. |
|
문자열 자료형으로 변환합니다. |
|
불 자료형으로 변환합니다. |
- 사용자로부터 숫자를 입력 받아 cm를 inch 단위로 변환 하여 출력하는 프로그램을 만들어 보세요. 1cm는 0.393701inch로 변환할 수 있습니다.
<script>
// 숫자를 입력 받습니다.
// 입력을 숫자로 변경하고 inch 단위로 변경합니다.
// 출력합니다.
</script>
- 사용자로부터 원의 반지름을 입력 받아 원의 넓이와 둘레를 구하는 프로그램을 만들어 보세요.
넓이 = 3.14 * 반지름, 둘레 = 2 * 3.14 * 반지름이라는 공식으로 구할 수 있습니다.
<script>
// 숫자를 입력 받습니다.
// 출력합니다.
</script>
- 현재 환율을 기반으로 사용자에게 숫자를 입력 받아 달러(USD)에서 원화(KRW)로 환율을 변환하는 프로그램을 만들어 보세요. 현재 집필 시점의 환율은 1달러 = 1207원입니다.
<script>
// 숫자를 입력 받습니다.
// 출력합니다.
</script>
- 위의 문제들처럼 데이터를 입력 받아 처리하고 출력하는 프로그램에는 어떤 것이 있는지 생각해 보고 3개 정도 적어보세요. 가능하면 직접 구현해 보세요.
- —
- —
- —
코멘트
- 다음 중 사용자로부터 불 입력을 받는 함수는 어떤 것인가요?
confirm()
- 다음 표의 빈칸을 채우시오.
| 함수 이름 |
설명 |
Number() |
숫자 자료형으로 변환합니다. |
String() |
문자열 자료형으로 변환합니다. |
Boolean() |
불 자료형으로 변환합니다. |
- 사용자로부터 숫자를 입력 받아 cm를 inch 단위로 변환 하여 출력하는 프로그램을 만들어 보세요. 1cm는 0.393701inch로 변환할 수 있습니다.
<script>
// 숫자를 입력 받습니다.
const rawInput = prompt("숫자를 입력해주세요.");
// 입력을 숫자로 변경하고 inch 단위로 변경합니다.
const cm = Number(rawInput);
const result = cm * 0.393701;
// 출력합니다.
const inch = `${cm}cm는 ${result}inch 입니다.`;
alert(inch);
</script>
- 사용자로부터 원의 반지름을 입력 받아 원의 넓이와 둘레를 구하는 프로그램을 만들어 보세요.
넓이 = 3.14 * 반지름, 둘레 = 2 * 3.14 * 반지름이라는 공식으로 구할 수 있습니다.
<script>
// 숫자를 입력 받습니다.
const rawInput = prompt("반지름을 입력해주세요.");
const r = Number(rawInput);
let area = r * 3.14;
let circumference = 2 * 3.14 * r;
// 출력합니다.
const result = `넓이 = ${area},\n둘레 = ${circumference}`;
alert(result);
</script>
- 현재 환율을 기반으로 사용자에게 숫자를 입력 받아 달러(USD)에서 원화(KRW)로 환율을 변환하는 프로그램을 만들어 보세요. 현재 집필 시점의 환율은 1달러 = 1207원입니다.
<script>
const rawInput = prompt("가지고 있는 달러를 입력해주세요.");
const USD = Number(rawInput);
const exchangeRate = 1306.47 // 4월 2일 기준 환율
const result = USD * exchangeRate
alert(`달러를 원으로 환산하면 ${result}원입니다.`);
</script>
- 위의 문제들처럼 데이터를 입력 받아 처리하고 출력하는 프로그램에는 어떤 것이 있는지 생각해 보고 3개 정도 적어보세요. 가능하면 직접 구현해 보세요.
- 빅맥충 계산기
<script>
const bigMacSet = 5900;
const menu = prompt("오늘 점심 메뉴를 입력해주세요.");
const rawInput = prompt("오늘 점심 메뉴의 가격을 숫자로만 입력해주세요.");
const price = Number(rawInput);
let cuntBicMacSet = parseInt( price / bigMacSet );
let remainder = price % bigMacSet;
// 출력합니다.
const result = `야! ${menu}를 왜 먹냐?\n그 돈이면 런치 타임에 빅맥 세트 ${cuntBicMacSet}개 든든하게 먹고 말지!\n거스름 돈도 ${remainder}원이나 챙길 수 있는데?`;
alert(result);
</script>
- 입력된 값이 홀 수인지 짝수인지 검사하기
<script>
// 숫자를 입력 받습니다.
const rawInput = prompt("마음에 드는 숫자를 적어주세요.");
const mynum = Number(rawInput);
let even_odd = parseInt( mynum % 2 );
if (even_odd % 2) {
alert(`입력된 값은 ${mynum}, 홀수 입니다.`);
} else {
alert(`입력된 값은 ${mynum}, 짝수 입니다.`);
}
// 출력합니다.
</script>
- 가위 바위 보 게임
<script>
// 가위 바위 보 게임
const rawInput = prompt("가위, 바위, 보 중에 하나를 입력하세요.");
// 입력 값 앞뒤로 공백 문자가 들어갈 수 있어 제거 후 rsp에 저장
let rsp = String(rawInput).trim();
// 0~9까지의 무작위 난수 생성
// Math.random() 함수의 결과는 0~0.99999...
// Math.random() * 10 의 결과는 0~9.99999...
// Math.floor() 함수는 소수점 1째자리 이후의 숫자를 버림하고, 정수를 리턴합니다.
let random_num = Math.floor(Math.random() * 10);
// 생성된 무작위 난수를 3으로 나누면 나머지는 0, 1, 2 중 하나가 됩니다.
let cpu_rsp = random_num % 3;
// 사용자가 입력한 값과 비교하기 위해 cpu_rsp 값을 바꾸어 저장합니다.
if (cpu_rsp === 0) {
cpu_rsp = "가위";
} else if (cpu_rsp === 1) {
cpu_rsp = "바위";
} else if (cpu_rsp === 2) {
cpu_rsp = "보";
}
// 사용자가 입력한 값에 따라 게임 결과를 나타냅니다.
if (rsp === "가위") {
if (cpu_rsp === "가위") {
alert("가위, 비겼습니다.");
} else if (cpu_rsp === "바위") {
alert("바위, 제가 이겼습니다!");
} else if (cpu_rsp === "보") {
alert("보, 제가 졌습니다!");
}
} else if (rsp === "바위") {
if (cpu_rsp === "가위") {
alert("가위, 제가 졌습니다.");
} else if (cpu_rsp === "바위") {
alert("바위, 비겼습니다!");
} else if (cpu_rsp === "보") {
alert("보, 제가 이겼습니다!");
}
} else if (rsp === "보") {
if (cpu_rsp === "가위") {
alert("가위, 제가 이겼습니다.");
} else if (cpu_rsp === "바위") {
alert("바위, 졌습니다!");
} else if (cpu_rsp === "보") {
alert("보, 비겼습니다!");
}
} else {
// 사용자가 가위, 바위, 보가 아닌 다른 값을 입력하면 실행됨.
alert("올바른 값을 입력해 주세요.");
}
</script>
