2일차(7) javascript 기초 : data type
[데이터 타입의 종류]
1) number (숫자)
2) string (문자)
3) boolean (참/거짓)
4) object
<data type 예제1> : number, string
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_dataType.html</title>
</head>
<body>
<h1>javascript 데이터 type</h1>
<script>
//number type
let num1=10;
let num2=20;
//string type
let str1='오렌지'; //single 따옴표
let str2="orange1234"; //double 따옴표
let str3=`레몬`; //backtick
//backtick을 이용하면 여러줄의 문자열을 편리하게 작성할 수 있다.
let str4=`
하나
두울
세엣
`;
//연산을 할때 값이 들어있는 변수명으로 연산을 할수도 있다.
let result=num1+num2;
let result2=num1+100;
let result3=num2*10;
</script>
</body>
</html>- 변수 총 9개 (let으로 지정된 것)
1) number (숫자)
console에 입력:
let a=999; → a라는 기억공간에 999를 기억시킴
a의 data type: number, value: 999
2) string (문자)
문자는 ' ' " " ` ` 세가지로 감쌀수있다.
참고) ``은 줄바꿈시 편하게 사용할 수 있다.
- str1에 '오렌지'를 저장함.
str1의 data type은 string, value는 '오렌지'
- 연산자 익히기. 산술연산자(+-)가 우선되어 처리되고, 그 다음이 대입연산자(=)
<data type 예제2> : boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Step01_dataType2.html</title>
</head>
<body>
<h1>javascript 데이터 type</h1>
<script>
// 참과 거짓을 나타낼때 사용하는 boolean type
// boolean type 데이터가 들어가는 변수의 이름을 대화식으로 지으면
// 가독성이 좋다.(isXXX, canXXX)
let isRun=true;
let isWait=false;
let canEat=true;
//왼쪽이 오른쪽보다 큰지 비교
let result=10>1;
//왼쪽이 오른쪽보다 큰지 비교
let result2=10<=1;
//양쪽의 값이 같은지 비교
let result3=10==10;
//양쪽의 값이 다른지 비교
let result4=10!=10;
//양쪽의 값이 같은지 비교
let result5="kim"=="lee";
//양쪽의 값이 다른지 비교
let result6="kim"!=="lee";
</script>
</body>
</html>3) boolean type : 참 / 거짓을 나타낼때 사용 (양자택일)
- 비교연산자(<>) 를 통해 두개의 값을 비교하교 논리결과를 얻어낼수있다.
- 비교연산을 한 결과도 기억시킬 수 있다.
- 이 경우 a의 데이터 타입은 불리언, value는 true
<data type 예제3> : object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_dataType3.html</title>
</head>
<body>
<h1>javascript 데이터 type</h1>
<script>
/*
한명의 회원 정보라고 가졍하자
번호(number), 이름(string), 남자인지 여부(boolean)
*/
let num=1;
let name="바나나";
let isMan=true;
//하나의 변수명으로 여러개의 값을 한번에 관리할 수는 없을까?
let mem1={num:1, name:"바나나", isMan:true}; //object type
let mem2={
num:1,
name:"바나나",
isMan:true
};
//object의 특정 방에 넣을 데이터를 변수명으로 불러와서 넣을 수도 있다.
let mem3={num:num, name:name, isMan:isMan};
//위를 줄여서 아래와 같이 object를 만들 수도 있다.
let mem4={num, name, isMan};
//a는 object type
let a=mem1; //mem1에 있는 object type 값을 a에 복사
//b는 number type
let b=mem1.num;
//c는 string type
let c=mem1.name;
//d는 boolean type
let d=mem1.isMan;
//object 에 저장된 값을 수정해 보기
mem2.num=2;
mem2.name="딸기";
mem2.isMan=false;
//빈 object를 만들고 나중에 필요에따라 방을 추가할 수 있다.
let mem5={};
mem5.num=3;
mem5.name="복숭아";
mem5.isMan=false;
</script>
</body>
</html>- 회원 1명당 변수가 3개씩 있으면 불편하기 때문에 하나의 묶음으로 관리하는 것!
- { key:value, key2:value2, key3:value3, .... } 형태로 입력
특정 key 값으로 어떤 value가 들어가 있음. key와 value를 쌍으로 하여 관리
- { } 안에 있는 값은 줄바꿈해도 무관하다.
- [ 좌측 : ] 은 저장소의 이름(key), [ : 우측 ] 은 저장소(value)!
- 방이 여러 개 있고, 특정 방에 함수를 넣어두었다가 필요할때 찾아서 사용할 수 있다
- key.value 형태로 입력 : 특정 key 값을 찾아가면 어떤 value가 있는 것!
- 이전에 썼던 console. , document. 도 모두 object이며, built-in object이다.
ex) console.log 는 object의 특정 방에 함수를 넣어두었다가 필요할때 꺼내는 것
//a는 object type
let a=mem1; //mem1에 있는 object type 값을 a에 복사
//b는 number type
let b=mem1.num;
//c는 string type
let c=mem1.name;
//d는 boolean type
let d=mem1.isMan;
- mem1에 있는 object type 값을 a 에 복사
mem1 num 방에 있는 값을 b 에 복사
mem1 name 방에 있는 값을 c 에 복사
mem1 isMan 방에 있는 값을 d 에 복사
→ console에서 a:{num: 1, name: '바나나', isMan: true}, b:1, c:바나나, d:true 인 것을 확인할 수 있다.
let mem5={};
mem5.num=3;
mem5.name="복숭아";
mem5.isMan=false;- 위의 mem5와 같이, 빈 방을 먼저 만들고 필요에 따라서 값을 이후에 지정할 수도 있다.
'국비교육(22-23)' 카테고리의 다른 글
| 3일차(2)/javascript 기초 : dataType (0) | 2022.10.07 |
|---|---|
| 3일차(1)/Javascript 기초 : dataType (1) | 2022.10.07 |
| 2일차(6)/Javascript 기초 (0) | 2022.10.06 |
| 2일차(5)/HTML 기초 : <a> (0) | 2022.10.06 |
| 2일차(4)/HTML 기초 : form(2) (0) | 2022.10.06 |