오늘은 02 - 3장의 연습문제를 풀이해 보자.
02 - 3장의 연습문제는 간단하게 손코딩을 해보면서 02장의 중요한 개념들을 복습할 수 있기 때문에 꼭 정리하고 넘어가야겠다고 생각했다.
그럼 정리 시작!
3번
사용자로부터 숫자를 입력받아 cm를 inch 단위로 변환하여 출력하는 프로그램을 만들어 보세요. 1cm는 0.393701inch로 변환할 수 있습니다.
<코드>
<풀이>
새 html 파일을 만들어서 html을 입력하면 자동완성 기능(ctrl + space) 이 작동한다. 그 중에서 html:5 를 선택하면 html 코드의 기본적인 형태가 자동완성 된다.
<script> 태그 내부를 살펴보면 const를 통해 상수를 선언해 주었고 이 상수에 prompt()를 이용하여 사용자로부터 입력받은 문자열(cm)을 저장하였다. 문자열 자료형을 숫자 자료형으로 바꾸기 위해 Number() 함수를 이용하였고 alert()함수를 이용하여 출력 해준다. 이때 반드시 백틱(`)을 사용하도록 하자. 백틱 사이에 ${}을 넣으면 변수가 알아서 숫자로 변환된다.
4번
사용자로부터 원의 반지름을 입력받아 원의 넓이와 둘레를 구하는 프로그램을 만들어 보세요.
<코드>
<풀이>
새 html 파일을 만들어서 'html'을 입력하면 자동완성 기능(ctrl + space)이 작동한다. 그 중에서 html:5 를 선택하면 html 코드의 기본적인 형태가 자동완성 된다.
<script> 태그 내부를 살펴보면 const를 통해 상수를 선언해 주었고 이 상수에 prompt()를 이용하여 사용자로부터 입력받은 문자열(input_radius)을 저장하였다. 문자열 자료형을 숫자 자료형으로 바꾸기 위해 Number() 함수를 이용한다. output 빈 문자열을 만들고 +=로 연결하는 형태로 작성했는데 이 방법을 사용하면 여러 줄을 쉽게 볼 수 있다. 이때 반드시 백틱(`)을 사용하도록 하자.${}안에 계산할 수식을 넣으면 자바스크립트가 알아서 연산을 수행한 뒤 출력한다.
5번
현재 환율을 기반으로 사용자에게 숫자를 입력받아 달러(USD)에서 원화(KRW)로 환율을 변환하는 프로그램을 만들어보세요. 현재 시점의 환율은 1달러 = 1207원입니다.
<코드>
<풀이>
새 html 파일을 만들어서 'html'을 입력하면 자동완성 기능(ctrl + space)이 작동한다. 그 중에서 html:5 를 선택하면 html 코드의 기본적인 형태가 자동완성 된다.
<script> 태그 내부를 살펴보면 const를 통해 상수를 선언해 주었고 이 상수에 prompt()를 이용하여 사용자로부터 입력받은 문자열(input_dollar)을 저장하였다. 문자열 자료형을 숫자 자료형으로 바꾸기 위해 Number() 함수를 한다. output 빈 문자열을 만들고 +=로 연결하는 형태로 작성했는데 이 방법을 사용하면 여러 줄을 쉽게 볼 수 있다. 이때 반드시 백틱(`)을 사용하도록 하자. ${}안에 계산할 수식을 넣으면 자바스크립트가 알아서 연산을 수행한 뒤 출력한다.
<느낀점>
이번 연습문제를 통해 2장에서 배웠던 문자열 입력받기(prompt), 자료형 변환하기(Number), 백틱을 사용하여 문자열 출력하기를 손에 익혀볼 수 있었다.
output 빈 문자열을 만들고 +=로 연결하는 형태로 코드를 작성하는 것이 가독성이 훨씬 좋으니 이 방법을 적극 활용하자.
백틱(`)의 사용법에 좀 더 익숙해질 필요가 있고, Number() 함수 안에는 따옴표를 쓰는것이 아니라 변수명만 쓰면 된다는 것을 잊지말자.(따옴표를 쓰면 다른 문자가 섞여있다고 판단돼서 NaN이 반환된다)
이상으로 02 - 3장의 연습문제 정리를 마치겠다.
다음에는 03 - 1장의 내용을 정리해 보도록 하자!
'혼공학습단 11기(完)' 카테고리의 다른 글
| [혼공스] 03 - 2 정리 (0) | 2024.01.12 |
|---|---|
| [혼공스] 03 - 1 정리 (1) | 2024.01.11 |
| [혼공스] 02 - 3 정리 (1) | 2024.01.09 |
| [혼공스] 02 - 2 정리 (1) | 2024.01.08 |
| [혼공스] 02 - 1 정리 (1) | 2024.01.07 |
