javascript 수업

HTML과 CSS을 다이나믹하게 제어하는 본격 프로그래밍 언어

javascript 수업 HTML과 CSS을 다이나믹하게 제어하는 본격 프로그래밍 언어

데이터형

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

데이터형(data type)

미리 정의되어 있는 특성 값들을 가진 데이터 셋트. 상수라고 하며 변수와는 다르게 변할 수 없다.

문자열(string)

문자를 표현한다. 작은 따옴표(')나 큰 따옴표(")로 묶어서 사용한다.

example1.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			var var1 = 'codingeverybody';
			var var2 = '1337';
			alert(var1 + var2);
			// 문자 'codingeverybody1337';
		</script>
	</head>
</html>

수(number)

수를 작은 따옴표나 큰 따옴표 없이 기술하면 수가 됨

example2.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			var val1 = 10;
			var val2 = 20;
			//30
			alert(val1 + val2);
		</script>
	</head>
</html>

불린(boolean)

비교에 사용되며 true와 false만을 값으로 가진다. (참조 : 조건문편)

example3.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			var result = 1 == 2;
			alert(result);
			if (result) {
				alert('같다');
			} else {
				alert('다르다');
			}
		</script>
	</head>
</html>

배열(array)

연관되어 있는 값들을 하나로 묶어서 관리하기 위해서 사용됨. (참고 : 배열편)

example4.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			var week = new Array('월', '화', '수', '목', '금', '토', '일');
			alert(week);
			var student = ['철수', '영희', '진혁'];
			alert(student[0]); ​
		</script>
	</head>
</html>

객체(object)

연관되어 있는 값과 함수를 하나로 그룹핑해서 관리하기 위해서 사용됨 (참고 : 객체편)

undefined

변수가 정의되지 않았거나, 선언은 되었는데 정의되지 않은 경우

example5.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			var val1;
			alert(val1); // undefined
		</script>
	</head>
</html>

null

값이 없음을 명시적으로 표현할 때

example6.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			var val1 = null;
			alert(val1);
		</script>
	</head>
</html>

typeof

자바스크립트에서 데이터 타입을 확인하는 방법

example7.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			var value = 1;
			alert( typeof value); // number

			var value = 'one';
			alert( typeof value); // string
		</script>
	</head>
</html>

형변환

형변환이란 데이터의 타입을 변환하는 것인데 자바스크립트는 자동으로 형변환을 시도한다.

example8.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			alert(1 + 1);// 2
			alert(1 + '1');// 11, 숫자 1을 문자 1로 자동으로 형변환함
			alert(true + 1);// 2 블리언 true를 숫자 1로 자동으로 형변환
			if (undefined) {
				alert(true);
			} else {
				alert(false)
			}
		</script>
	</head>
</html>

명시적인 형변환을 하기 위해서는 함수 Boolean, String, Number를 이용한다.

example9.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			alert( typeof String(1));
			alert( typeof Number('1'));
			alert( typeof Boolean(1));
		</script>
	</head>
</html>

댓글

댓글 본문
작성자
비밀번호
  1. Jinsuk Jo
    너무 잘 배우고 있습니다.
    전 웹디자이너인데 프로그램에 욕심이 있어서 보게 되었습니다.
    쉽고 잼있는 강의 감사드립니다.^^
  2. visual00
    많이 배웠었는데 아쉽네요 &^^
  3. 미켈란젤로
    고맙습니다^^
  4. 상상초월
    example4.html xp환경 익스플로러에서는 되는데 크롬이나 사파리에서는 경고창이 뜨지 않네요..
    또 윈도우7 환경 에서는 익스플로러 크롬 모두 안됩니다.

    맥에서는 사파리 크롬 모두 안됩니다.
    검색을 해봐도 이유를 잘 모르겠습니다.. 혹시 이유를 아시는분 계신가요?
  5. egoing
    일시적인 이유로 서비스의 주소를
    https://opentutorials.org....../79 에서
    http://opentutorials.org....../79 로 변경 부탁 드립니다.

    불편을 드려서 죄송합니다!
    대화보기
    • visual00
      영상이 안 나옵니다... 다른 토픽들의 영상은 다 잘 나오는데.. 이 자바스크립트 데이터형 편의
      영상이 하나도 안 나옵니다 ㅜㅠ
    • egoing
      그것은 jsfiddle가 html문서를 자동으로 만들어주기 때문입니다. 헷갈릴 수 있는 부분입니다.
      대화보기
      • Derek
        jsfiddle에서 실습하면 왜 html부분은 사라지는 거죠? html은 사라지는 건가요? 아니면 어딘가에 저장해 놓으신건가요?
      • 맛난호빵
        10년차개발자//
        그건 XHTML1.0의 표준입니다. 차세대 표준으로 지목된 HTML5에서는 <script></script>만 선언해줘도 표준에 안걸립니다.

        그리고 컴퓨터에서 돌아가고 있는 이상 '자신도 모르게'되는 것은 없습니다.
        이유가 있기 때문에 수가 문자열로 바뀌는 거죠;;
      • 10년차개발자
        하나의 오류점 발견!! 수(NUMBER)에서 변수를 선언할때 가공 되면서 변수의 형태가 자신도 모르게 String로 바뀌는경우가 있습니다 이럴때는

        parseInt
        Number
        혹은 *1
        로 변수의 설정을 재설정을 해야하는 경우가 생깁니다요~ 쩝;;

        그리고 <script></script> 사이에

        <script type = "text/javascript">
        //<![CDATA[
        //]]>
        </script>
        를 넣어야 웹표준에 걸리지 않아요
      • 아하하
        저도 이걸로 . 왜 이렇게 나오나 했는데 그렇군요
        대화보기
        • 정확히 이해하셨는데 typeof함수를 빠뜨리셨네요
          형변환한다음 typeof함수를 만나고 난 다음에 출력합니다.
          typeof함수의 기능은 위에 나와있다시피 자바스크립트에서 데이터 타입을 확인하는 방법입니다.
          즉, 각각의 변수의 자료형을 반환하죠
          그래서 자료형인 String, Number, Boolean이 나옵니다.
          대화보기
          • kokkins
            항상 감사합니다.

            성우 하셔도 되시겠습니다!
          • freebear
            example9 명시적 형변환이요
            출력이 String , Number, Boolean으로 출력되는데 이게 맞는 것인가요??
            저는 첫번째에서는 숫자 1을 string으로 형변환 하여 문자 1 이 출력되고
            두분째는 문자 1이 숫자 1로 출력, 세번째에는 숫자1이 true(or false)로 출력될거라고 생각했는데
            제가 잘 못 이해한 것인지 아니면 형변환 방법이 잘못 되었는지 모르겠어요 알려주세요
          • Lee, Junghoon
            쉬운 설명 감사합니다. ^^
            형변환이 이런 의미 였군요. 어떻게 보면 당연히 의문을 가졌어야 했는데 그냥 모른척 했네요. ^^
          • meme
            감사합니다^^
          • 격한눈팅
            기본에 방점을 찍고 설명하는 거라, 귀에 쏙 들어옵니다.

            왜 1 이 참인지 몰랐다가.. 여기서 듣게 되네요.
          • 안효선
            형변환 아무 생각없이 쓰고 있었는데, 이게 형변환이 일어나서 결과가 그렇게 나온 거였군요 ^^;;;
          • 강준영
            최고! 정주행 하고있습니다
          • mansang
            스크립트를 처음 접하게 되었는데요. 이해도 쉽고 말씀도 쏙쏙들어옵니다. 좋은 강의 감사합니다.
          • 김창세
            계속 공부중입니다. 많은 도움을 받고 있고요..우리나라 it 발전에 크게 도움이 되는 강의라고 생각됩니다...계속 발전지속되기를 바랍니다. 혹 도울일이 있으면 돕고싶네요..
          • Jibro
            강의 정주행 중입니다 ㅎ 이해가 쉽고 단락이 간결하고 짧게 끝나서 일하는 중간중간 보기에도 좋네요 잘 배우고 있습니다 ^^
          • manorgass
            int, string 등의 형을 직접 명시해주지 않아도 된다는 게 편리하고 좋네요. ;-)
          • egoing
            반영했습니다 ^^
            대화보기
            • sugarui
              매우 소소한.. 형변환 예제의 3번째행 주석이 11이 아니고 2요. 조만간 업데이트하면서 보실 것 같지만요:b
            • Bada_c
              배열 부분 예제 3,4번째줄오류가 있는것 같습니다.var arr2 = [1,2,3];alert(arr2);
              로 변형되야 되지 않을까요?
            • 정원봉
              좋은강좌 감사합니다 도움이 많이 되네요 ^ ^
            • egoing
              수정했습니다. 알려주셔서 감사합니다. ^^
              대화보기
              • 사명구
                http://opentutorials.org/javas... 링크가 없습니다.
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기