03. 데이터타입, 대화상자

1. 데이터 타입(Data Type)

- 프로그램에서 다룰 수 있는 값의 종류
- 자바스크립트는 선언시 타입을 정하기 않았기 때문에 많은 문제가 발생할 수 있음
- 자바스크립트의 타입 유연성을 해결하기 위해 MS의 타입스트립트가 탄생

1	숫자형(number)	정수와 실수를 따로 구분하지 않음 모든 수를 실수 하나로만 표현
2	문자형(string)	'' , " " 또는 ``로 둘러싸인 문자의 집합
3	논리형(boolean)	참(true)과 거짓(false)으로 표현되는 값 false, 0, '', null, underfined는 모두 거짓(false)로 판정 false가 아닌 모든 값은 참(True)로 판정함
4	underfined, null	underfined: 타입이 정해지지 않은 타입(변수 선언 후 값이 정해지지 않은 경우) null: null을 저장한 값, 값이 없는 것(객체일 경우만 해당)
5	심볼형(symbol)	유일하고 변경불가능한 기본값을 만듧 객체 속성의 key로 사용 서로 같은 걸 넣어도 메모리가 다른 곳에 저장되고 다른 객체가 된다. (파이썬과 다름)
6	객체형(object)	어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합 key : value pair로 구조로 저장 자바스크립트의 변수는 타입이 고정되어 있기 때문에 같은 변수에 다른 타입의 값을 대입할 수 있음

//number형

   const num1=10;
   const num2=11.11;
   const num3=10e6;
   console.log(num1);   // 10 출력
   console.log(num2);   // 11.11 출력
   console.log(num3);   // 10000000 출력
   console.log(typeof(num1));   // number 출력
   console.log(typeof(num2));   // number 출력
   console.log(typeof(num3));   // number 출력
   console.log('==============');

//string형

  const num4=10;
  const num5=5;
  const str1='hello javascript';
  const str2='hello world' ;
  const str3='10' ;
  console.log( typeof(str1)); //string 출력
  console.log(num4 + num5);  //15 출력 (숫자자형)
  console.log(num4 + str1);   //10hello javascript 출력 (문자형)
  console.log(str1 + str2); // hello javascripthello world 출력
  console.log(str1 + ' ' + str2); // hello javascript hello world 출력

  console.log(`자바스크립트에서 문자열은 쌍따옴표 또는
따옴표로 둘러싸인 문자의 집합을 의미`);
  // 자바스크립트에서 문자열은 쌍따옴표 또는 따옴표로 둘러싸인 문자의 집합을 의미 출력

//`: 파이썬의 '''와 유사한 의미

console.log(`str1:${str1},str2:${str2}`) //str1:hello javascript, str2:hello world

//자동형변환

  console.log(num4 + str3);  // 1010 출력 (더하기만 문자형)
  console.log(num4 - str3);  // 0 출력 (숫자형)
  console.log(num4 * str3); // 100 출력 (숫자형)
  console.log(num4 / str3);  // 1 출력 (숫자형)
  console.log('===============')

// 논리형
   const b1=true;
   const b2=false;
   console.log(typeof(b1)) //boolean 출력
   console.log(typeof(b2)) //boolean 출력
   console.log(b1); //true 출력
   console.log(b2); //false 출력
   console.log(10>5);  //true 출력
   console.log(10<5);  //false 출력

// undefined

   let num;
   console.log(num); //undefined 출력
   console.log(typeof(num)); //undefined 출력

// null

   let obj1={};
   console.log(obj1); // { } 출력
   console.log(typeof(obj1)); // object 출력

   let obj2=null;  // 가리킴은 있는데, 값이 없다.
   console.log(obj2);   // null 출력
   console.log(typeof(obj2)); // object 출력 (비어있음)

</script>

</body>

자동타입변환

- 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용

* NaN(Not a Number)

- '정의되지 않은 값이나 표현할 수 없는 값' 이라는 의미
- 숫자로 변환할 수 없는 연산을 시도

타입변환 함수

강제로 타입을 변환할 수 있는 함수
- Number(): 문자를 숫자로 변환
- String(): 숫자나 불린 등을 문자형으로 변환
- Boolean(): 문자나 숫자등을 불린형으로 변환
- Object(): 모든 자료형을 객체형으로 변환

*parsentInt(): 문자를 소수없는 정수형으로 변환

* parsentFloat(): 문자를 실수형으로 변환

console.log(`현재 num1의 타입:${typeof(num1)}`)
//현재 num1의 타입: string

console.log(`현재 num2의 타입:${typeof(num2)}`)
//현재 num1의 타입: string

console.log(`Number(num1)의 타입:${typeof(Number(num1))}`)
//Number(num1)의 타입: number

console.log(`Number(num2)의 타입:${typeof(Number(num2))}`)
//Number(num1)의 타입: number

console.log(`String(num1)의 타입:${typeof(String(num1))}`)
//String(num1)의 타입: string

console.log(`Boolean(num1)의 타입:${typeof(Boolean(num1))}, ${Boolean(num1)}`)
//Boolean(num1)의 타입: boolen, true

console.log(`Object(num1)의 타입:${typeof(Object(num1))}`)
//Object(num1)의 타입: object

console.log(`parseInt(num1)의 타입:${typeof(parseInt(num1))}, ${parseInt(num1)}`)
//parseInt(num1)의 타입: number, 10

console.log(`parseFloat(num1)의 타입:${typeof(parseFloat(num1))}, ${parseFloat(num1)}`)
//parseFloat(num1)의 타입: number, 10

console.log('===============')

console.log( `num1+num2=${num1+num2}`) //num1+num2=105

console.log( `num1+num2=${Number(num1)+Number(num2)}`) //num1+num2=15

console.log( `num1+num2=${parseInt(num1)+parseInt(num2)}`) //num1+num2=15

</script>

</body>

2. 자바스크립트 대화상자

Web API: 브라우저에서 제공하는 API (Application Progranmming Interface)
- alter(): 사용자에게 메세지를 보여주고 확인을 가다림
- confirm(): 사용자에세 메세지를 보여주고 확인이나 취소를 누르면 결과를 불린값으로 변환
- prompt(): 사용자에게 메세지를 보여주고 사용자가 입력한 문자열은 반환

alter() 사용하기

alert('안녕하세요 자바스크립트!');

</script>

</body>

confirm() 사용하기

const result=confirm('확인 또는 취소를 눌러주세요!');

console.log(result);

</script>

</body>

확인

취소

prompt() 사용하기_1

const name=prompt('당신의 이름을 입력하세요');

console.log(typeof(name));

console.log(name);

</script>

</body>

김사과 입력

prompt() 사용하기_2

const year = prompt('당신의 출생년도를 입력하세요');

console.log(2024-year);

</script>

</body>

1996 입력

prompt() 사용하기_3

</script>

</body>

10, 15 입력

prompt() 사용하기_4

const name=prompt('당신의 이름을 입력하세요');

const kor=Number(prompt('당신의 국어점수를 입력하세요'));

const math=Number(prompt('당신의 수학점수를 입력하세요'));

const eng=Number(prompt('당신의 영어점수를 입력하세요'));

const tot = kor + eng + math;

const avg = tot / 3;

console.log(`${(name)}님의 성적표:`);

console.log(`국어: ${kor}점`);

console.log(`수학: ${math}점`);

console.log(`영어: ${eng}점`);

console.log(`총점: ${tot}점`);

console.log(`평균: ${avg}점`);

</script>

</body>

'Web > JavaScript' 카테고리의 다른 글

06. 함수(Function) (0)	2024.04.16
05. 배열(Array) (0)	2024.04.16
04. 연산자, 제어문, 반복문 (0)	2024.04.16
02. 변수(let), 상수(const) (0)	2024.04.16
01. 자바스크립트(JavaScript) (0)	2024.04.12

leesarr-study

03. 데이터타입, 대화상자

1. 데이터 타입(Data Type)

2. 자바스크립트 대화상자

'Web > JavaScript' 카테고리의 다른 글

티스토리툴바

03. 데이터타입, 대화상자

1. 데이터 타입(Data Type)

2. 자바스크립트 대화상자

'Web > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바