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. 고스트프리
    완료헀습니다.
  2. 이머구
    Math.sqrt(9); // 3, 3의 제곱근 -----> 제곱근9 가 맞는 표현인거 같습니다.
  3. 이병학
    감사합니다.
  4. GoldPenguin
    완료했습니다.
  5. 기오뎅기
    좋은강의 감사합니다.
  6. 수복
    좋은 강의 잘 들었습니다.
  7. 송성태
    "Thank" + " " + "you!";
    그런데,
    "everyday".indexOf("e");
    하니까 앞에 있는 'e'만 출력되네요.
    뭔가 보조 수단이 있을 것 같은데요...
  8. 이성준
    어렵지만 화이팅!
  9. 오빠는다르다
    감사합니다~!!!글로 읽어도 너무 이해가잘되요!
  10. Byeong Heon Lee
    감사합니다~
  11. 아이노바
    가슴으로 말합니다. 너무 감사합니다.
  12. yousick
    잘봤습니다.감사합니다.
  13. 은하수
    강의 잘 봤습니다. 감사합니다.
  14. harukayuki
    자바 스크립트 배웠는데 이해도 잘안가고 응용도 잘 안되서 어려워서 찾아보다가 여기 알게 되서 봤는데 HTML 도 좀 봤는데 이해가 잘되서 좋습니다. 감사합니다 좋은 컨텐츠 만들어주셔서
  15. 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랑 뭔가 변했나요??아님
                    설정해줘야 하는게 잇나요?
                  • 배워시
                    용기도 주어가며
                  • 광뀨
                    완료
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기