JavaScript

숫자와 문자

프로그래밍 입문자에게 가장 익숙한 데이터 형(data type)은 숫자와 문자일 것이다. 이번 시간에는 실제로 가장 많이 사용되는 데이터 형인 문자와 숫자를 프로그래밍에서는 어떻게 표현하고 연산하는지 알아보자.

숫자

자바스크립트에서는 큰따옴표나 작은따옴표가 붙지 않은 숫자는 숫자로 인식한다.

alert(1+1);

결과 : 2

alert(1.2 + 1.3);

결과 : 2.5

곱하기를 할 때는 *(에스터리스크, Asterisk, 키보드 자판 상으로 숫자 8 위)를 사용한다.

alert(2 * 5);

결과 : 10

나누기를 할 때는 /(슬래쉬, slash, 키보드 자판 상으로 오른쪽 shift 키 왼쪽)를 사용한다.

alert(6 / 2)

자바스크립트에서는 사칙연산 보다 좀 더 복잡한 연산도 지원한다. 좀 더 자세한 내용은 자바스크립트 사전을 참고한다.

Math.pow(3,2);       // 9,   3의 2승 
Math.round(10.6);    // 11,  10.6을 반올림
Math.ceil(10.2);     // 11,  10.2를 올림
Math.floor(10.6);    // 10,  10.6을 내림
Math.sqrt(9);        // 3,   3의 제곱근
Math.random();       // 0부터 1.0 사이의 랜덤한 숫자

문자

문자는 "(큰 따옴표) 혹은 '(작은 따옴표) 중의 하나로 감싸야 한다. 큰 따옴표로 시작하면 큰 따옴표로 끝나야하고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야 한다. String이라고 한다.

alert("coding everybody");
alert('coding everybody');

숫자를 따옴표로 감싸면 문자가 된다. 아래는 문자다. typeof는 값의 데이터 형을 알려주는 기능이다.

alert(typeof "1")

결과 : string

아래와 같이 따옴표 없는 숫자는 number가 출력된다.

alert(typeof 1)

결과 : number

만약 문자열 안에 작은 따옴표나 큰따옴표를 넣고 싶다면 어떻게 해야할까?

alert('egoing's javascript')

웹브라우저에서 실행했다면 아무것도 실행되지 않을 것이고, 크롬 개발자 도구와 같은 콘솔에서 실행했다면 아래와 같은 에러 메시지가 출력 될 것이다.

브라우저에서 실습을 하고 있다면 오류 메시지를 표시하지 않기 때문에 불편할 것이다. 구글 크롬 브라우저에서는 Ctrl+Shift+J (윈도우), 커멘트+Alt+J (OSX) 키를 누르면 웹페이지에서 발생한 에러를 보여준다. 파이어폭스에서는 윈도우 기준 Ctrl+Shift+K를 누르면 오류가 표시될 것이다. IE(IE9,10)에서는 F12를 누른 후에 개발자 도구에서 콘솔탭을 누르면 에러 메시지를 확인할 수 있다.

위의 내용은 문법(Syntax) 에러(Error)가 발생했다는 뜻이다. 작은따옴표는 문자열의 구간을 컴퓨터에게 알려주는 기호인데, 기호가 문자 자체로 사용됐기 때문에 컴퓨터 입장에서는 어디서부터 어디까지가 문자열인지 파악 할 수 없게 된 것이다.

아래와 같이 코드를 변경하면 작은따옴표를 문자열 안에 포함시킬 수 있다.

alert('egoing\'s javascript')

\를 ' 앞에 위치시키면 ' 를 문자열의 시작과 끝을 구분하는 구분자가 아니라 단순히 문자로 해석하도록 강제 할 수 있다. 이러한 기법을 이스케이프(escape)라고 한다.

여러줄의 표시

여러줄을 표시하기 위해서는 아래와 같이 한다. \n는 줄바꿈을 의미하는 특수한 문자다.

alert("안녕하세요.\n생활코딩의 세계에 오신 것을 환영합니다"); 

문자연산

문자와 문자를 더할 때는 아래와 같이 한다.

alert("coding"+" everybody");

결과 : coding everybody

문자의 길이를 구할 때는 문자 뒤에 .length를 붙인다.

alert("coding everybody".length)

결과 : 16

그 외에 문자를 이용한 작업 방법은 자바스크립트 사전을 참고한다.

댓글

댓글 본문
작성자
비밀번호
  1. Byeong Heon Lee
    감사합니다~
  2. 아이노바
    가슴으로 말합니다. 너무 감사합니다.
  3. yousick
    잘봤습니다.감사합니다.
  4. 은하수
    강의 잘 봤습니다. 감사합니다.
  5. harukayuki
    자바 스크립트 배웠는데 이해도 잘안가고 응용도 잘 안되서 어려워서 찾아보다가 여기 알게 되서 봤는데 HTML 도 좀 봤는데 이해가 잘되서 좋습니다. 감사합니다 좋은 컨텐츠 만들어주셔서
  6. vegaplanet
    헐 그렇군요~ 신비로운 세계네요 ㅎㅎ
    대화보기
    • vegaplanet
      오 그런 방법이 있군요! 궁금증 풀어주셔서 감사합니다^^
      대화보기
      • indexOf를 사용하면 가장 앞에있는 것을 찾는것같아요 lastIndexOf를 사용하시면 뒤에있는 o를 찾을수 있어요
        대화보기
        • "hello".indexof(o)=4
          "world".indexof(o)=1 이어서 둘이 더하면 5가 나오는 거 같아요
        • vegaplanet
          왜 5가 나오지요?
          대화보기
          • 박철오
            "hello".indexof(o)+"world".indexof(o) 하면 5가 나옴니다 저도 궁금해서 해봤는데 이게 맞는건지는 잘모르겠네요 :)
            대화보기
            • vegaplanet
              질문 드립니다.

              예를들어
              "hello world".indexOf("o") 라고 입력하면 4가 나오는데 world에 포함된 "o"에 대한 정보는 어떻게 얻나요?
            • 박철오
              감사합니다
            • bigmoon
              이렇게 개념적으로 설명해주셔서 너무 감사드립니다
              코딩1도 모르는 저는 정말 천군마마를 만난게 분명합니다
            • 2017-07-20
              정성스러운 강의, 감사합니다!
            • nevertoolate
              자 현재까지 신나게 보았네요. 또 기대하면서...
              하나하나 자세히 설명해 주셔서 감사합니다.
              그 날을 기대하면서 오늘은 이만
              땡큐
            • 세븐나이츠
              오늘부터 꾸준히 열심히 할게요
            • Seo Yun Seok Tudoistube
              아, 꾸벅꾸벅 졸다가 깨다가... 그래두 끝까지 들을겁니다. 감사합니다^_____^!!!
            • 미네월클
              math가 아니라 Math입니다!
              대화보기
              • 산공인
                Uncaught ReferenceError: math is not defined 오류가 뜹니다!
                math 사용하려면 미리 선언같은 것을 해야하는 것인가요? 영상에는 그런 언급이 없는데 왜이럴까요?
              • sssjunn
                감사합니다
              • 코딩조아
                감사합니다
              • 고베베
                감사합니다. 자바스크립트 뽀개기 화이팅!!
              • 유산균
                와 책보면서 이게뭘까 했던부분이 이해됩니다!
              • 노상현
                감사합니다
              • Jinuine
                감사합니다~
              • koyouhan1991@gmail.com
                고맙습니다.
              • 이리
                감사합니다 20170403
              • Daniel Kim
                2017/4/2 잘봤습니다!
              • 플룻머신
                복습중
              • 최규선
                2017/03/31 수강완료.
                감사합니다.
              • 이승우
                2017/03/27 완료
              • SangHyeok Kim
                2017/03/24 수강완료
              • html:5 하시고 tab하셔야합니다
                대화보기
                • 이승우
                  2017/03/23 1/4 완료
                • 임성민
                  수강 완료했습니다.
                • 김세창
                  수강완료~!
                • 웅정
                  아마 html파일로 저장을 안하고 바로 하셔서 그럴거에요. 한번 먼저 undefined인 문서를 html문서로 저장하시고 시도해 보세요.
                  대화보기
                  • 궁금궁금~
                    서브라임텍스트3를 깔앗는데 html 치고 텝누르니깐 걍 옆으로만 가지는데 3랑 2랑 뭔가 변했나요??아님
                    설정해줘야 하는게 잇나요?
                  • 배워시
                    용기도 주어가며
                  • 광뀨
                    완료
                  • 감사합니다
                  • 정신훈
                    감사합니다.
                  • 밍구
                    감사히 잘 봤습니다. 질문이 있습니다 ^ㅁ^
                    -console 을 사용하는 목적에는 무엇이 있나요? 수업에서는 에러를 모니터링하기 위함인가요?
                    -내가 아닌 다른 사람이 만든 웹페이지(코드 수정할 권한 없음) 도 console 을 통해 (일시적으로라도)제어할 수 있는 건가요?
                  • 연금이
                    2017.01.10 수강완료.

                    기본적인 문법지식은 타 프로그래밍과 비슷하여 내용을 훍고 있습니다.
                  • 으노
                    2016.12.29 수강완료.
                    자바에 대해서 한번 배우고 자바스크립트를 보는 중인데, 차곡 차곡 쌓이는 기분이네요!
                  • 임지호
                    javascript의 데이터형식에는 크게 숫자와 문자가 있다.
                    숫자는 또 크게 정수와 실수로 나뉘고 숫자끼리는 사칙연산이 가능하다(+,*,/,-)
                    사칙연산 뿐 아니라 Math같은 함수를 쓰면 제곱, 제곱근, 난수 등 복잡한 계산도 가능하다.
                    문자는 ""나 ''사이에 기록되어야 한다.
                    간혹 ''사이에 '를 써야 하는 경우 \' 이와 같은 모습으로 기록을 해주어야 컴퓨터가 문자로서 '를 인지한다.
                    \를 이스케이프라 한다.
                    숫자도 ""나 ''사이에 기록되면 문자로 인식된다.
                    문자들을 결합하면 결합한 문자들이 이어서 나온다.
                    문자를 여러줄 쓰고 싶으면 \n이라고 쓰면 된다.(Enter와 같은 역할)
                    문자에서도 .length나 .indexof같은 명령을 쓰면 여러 가지 복잡한 기능을 수행할 수 있다.
                  • 최선화
                    감사합니다~~^6^
                  • Simon Lee
                    Math.sqrt(9); // 3, 3의 제곱근 => 9의 제곱근으로 수정해야 될 것 같습니다.
                  • 김응진
                    코딩을 그대로 하고 크롬으로 켯는데 alert가 안떠요 크롬 설정 문제일까요?ㅠ
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기