혼공스 1주차

이현민·2025년 7월 5일

혼공스

목록 보기

1/6

1단원

자바스크립트란?

자바스크립트는 웹 브라우저에서 사용하는 프로그래밍 언어로, 주로 Node.js (웹 서버 개발), React Naive (모바일 애플리케이션 개발), ELECTRON (데스크톱 애플리케이션 개발), MongoDB (데이터베이스 관리) 등의 역할을 합니다.

1-1 마무리

확인 문제

인터넷을 돌아다니면서 보았던 쉽게 사용할 수 있고, 기능이 많다고 느꼈던 웹 사이트를 5개 정도 적어 보세요.

미리캔버스, 캔바
벨로그
유튜브
노션 (notion)
깃허브

Statcounter에서 책을 보고 있는 현재 시점의 웹 브라우저 점유율(Browser Market Share Worldwide)을 확인해보세요.

Chrome 68.35%
Safari 16.25%
Edge 4.96%
Firefox 2.37%
Samsung Internet 2.04%
Opera 1.85%

1-2

개발환경 설치와 코드 실행

먼저 구글 크롬과 비주얼 스튜디오 코드를 설치합니다.

구글 크롬의 주소창에 about:blank를 입력하여 들어간 후 개발자 도구를 실행합니다. 콘솔창에 들어간후 console.log("Hello JavaScript...!") 를 입력
이렇게 나옵니다.

비주얼 스튜디오 코드에서 새 파일을 만들고 test.html 라고 이름을 저장합니다. html 페이지에서 ! 입력하고 enter 하여 기본적인 형태를 자동 완성 기능으로 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <script>
        alert("Hello World")
    </script>
</body>
</html>

script 태그와 alert() 코드를 추가한 후 예제가 저장되어 있는 폴더로 가서 test.html 파일을 더블클릭하여 실행합니다.

1-2 마무리

확인문제
1. 다음 명령을 입력했을 때 나오는 결과를 적어보세요.

"안녕하세요"
결과 : '안녕하세요'
console.log("안녕하세요")
결과 : 안녕하세요
"안녕하세요
결과 : Uncaught SyntaxError: Invalid or unexpected token

다음 코드를 입력하고 결과를 적어보세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <script>
        document.body.innerHTML = "<h1>안녕하세요</h1>"
    </script>
</body>
</html>

결과 : 안녕하세요

1-3

표현식 : 자바스크립트에서 값을 만들어내는 간단한 코드

문장 끝에는 마침표를 찍듯이 세미콜론( ; ) 또는 줄바꿈을 넣어서 문장을 종결을 알린다.

식별자 규칙

키워드를 사용하면 안된다
숫자로 시작하면 안된다.
특수문자는 _와 $만 허용한다.
공백 문자를 포함할 수 없다.

1-3 마무리

다음 단어 중 식별자로 사용할 수 있는 것은 O표 사용할 수 없는 것은 X표를 하세요.

a (o)

hello (o)

10times (x)

_ (o)

$ (o)

console.log()에서 console은 다음 중 무엇일까요?

식별자

console.log()에서 log는 다음 중 무엇일까요?(중복 가능)

식별자 4. 메소드

여러 단어로 이루어진 식별자를 만들려고 합니다. 71쪽에서 설명한 방법에 따라서 한 단어로 묶어주세요.

we are the wolrd (weAreTheWorld)

create output (createOutput)

create request createRequest)

init server (initServer)

init matrix (initMatrix)

다음 코드를 입력해보고 어떤 오류가 뜨는지 확인해보세요.

konsole.log('안녕하세요')
결과 : VM321:1 Uncaught ReferenceError: konsole is not defined
at :1:1

+++ 1 ++ 2 + 3
결과 : Uncaught SyntaxError: Invalid left-hand side expression in postfix operation

console.log)
결과 : Uncaught SyntaxError: Unexpected token ')'

2-1

자료형 : 자료의 종류

문자는 문자열 자료형, 숫자는 숫자 자료형, 참과 거짓은 불 자료형을 사용합니다.

2-1 마무리

다음 연산자들의 피연산자가 어떤 자료형인지 적어보세요.

+(문자열 연결 연산자) : 문자열
+(덧셈 연산자) : 숫자
&& : 불
-(빼기 연산자) : 숫자
*(곱하기 연산자) : 숫자
|| : 불
다음 프로그램의 실행 결과를 예측해 보세요.

<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

2-2

const : 상수 (변하지 않는 값을 저장하는 식별자)
let : 변수 (변하는 값을 저장하는 식별자)
선언 : 상수 또는 변수를 생성하는 것
할당 : 상수 또는 변수에 값을 넣는 것

2-2 마무리

다음 중 상수를 선언할 때 사용하는 키워드는 어떤 것인가요?

const
다음 중 값을 할당할 때 사용하는 연산자는 어떤 것인가요?

=

다음 프로그램 중에서 오류를 발생하는 것을 찾고, 어떤 오류가 발생하는지 적어보세요.

<script>
      const r
      r = 10

      console.log(`넓이 = ${3.14 * r * r}`)
      console.log(`둘레 = ${2 * 3.14 * r}`)
  </script>

Uncaught SyntaxError: Missing initializer in const declaration (at test.html:10:15)Understand this error

<script>
     let r
     r = 10

     console.log(`넓이 = ${3.14 * r * r}`)
     console.log(`둘레 = ${2 * 3.14 * r}`)
 </script>

넓이 = 314
test.html:14 둘레 = 62.800000000000004

원인 : 값을 중간에 바꾸기 위해서는 const 키워드가 아닌 let 키워드를 사용해야 하기 때문입니다.

다음 프로그램의 실행 결과를 예측해 보세요.

<script>
        const number=10;

        console.log(++number)
        console.log(number++)
        console.log(++number)
        console.log(number--)
    </script>

11
11
13
13

2-3

prompt() : 사용자로부터 글자를 입력 받을 때 사용
자료형 변환 : 어떤 자료형의 값을 다른 자료형으로 변경하는 것
Number() : 숫자 자료형으로 변환
String() : 문자열 자료형으로 변환
Boolean() : 불 자료형으로 변환

2-3 마무리

다음 중 사용자로부터 불 입력을 받는 함수는 어떤 것인가요?

confirm()

다음 표의 빈칸을 채우세요.

Number() : 숫자 자료형으로 변환합니다.
String() : 문자열 자료형으로 변환합니다.
Boolean() : 불 자료형으로 변환합니다.

사용자로부터 숫자를 입력받아 cm를 inch 단위로 변환하여 출력하는 프로그램을 만들어 보세요. 1cm는 0.393701inch로 변환할 수 있습니다.

<script>
        /// 숫자를 입력받습니다.
        const input = prompt("cm 단위의 숫자를 입력해주세요.");

        /// 입력을 숫자로 변경하고 inch 단위로 변경합니다.
        const cm = Number(input)
        const inch = input*0.393701

        /// 출력합니다.
        alert(`${cm}cm는 ${inch}ich 입니다.`)

    </script>

4. 사용자로부터 원의 반지름을 입력받아 워니의 넓이와 둘레를 구하는 프로그램을 만들어 보세요.

<script>
        /// 숫자를 입력받습니다.
        const input = prompt("원의 반지름을 입력해주세요.")
        const r = Number(input)

        /// 출력합니다.
        const n = 3.14*r*r
        const d = 2*3.14*r
        alert(`원의 반지름: ${r}\n원의 넓이: ${n}\n원의 둘레: ${d}`)        

    </script>

5. 현재 환율을 기반으로 사용자에게 숫자를 입력받아 달러(USD)에서 원화(KRW)로 환율을 변환하는 프로그램을 만들어보세요.

<script>
        /// 숫자를 입력받습니다.
        const input = prompt("달러 단위의 금액을 입력해주세요.")
        const dollar = Number(input)

        /// 출력합니다.
        const won = dollar*1207
        alert(`달러: ${dollar}\n원화: ${won}`)

    </script>

위의 문제들처럼 데이터를 입력받아 처리하고 출력하는 프로그램에는 어떤 것이 있을지 생각해 보고 3개 정도 적어 보세요. 가능하면 직접 구현해 보세요.

숫자 3개를 입력받고 모두 더한 것과 뺀 것 곱한 것을 출력하는 프로그램

숫자 3개를 입력받고 최소값과 최대값을 출력하는 프로그램
숫자 2개를 입력받고 첫번 째 숫자가 두번 째 숫자의 약수인지 출력하는 프로그램

끝!

이현민

다음 포스트

혼공스 2주차

2개의 댓글

서영

2025년 7월 5일

아 벨로그의 세계에 잘 오셧어요~^~^~^~^~^

1개의 답글