Notice
Recent Posts
Recent Comments
Link
컴퓨터는 잘못이 없다..
[JavaScript]자바스크립트 7가지 데이터타입 본문
Contents
접기
[배우기 전! JavaScript코드 결과 console에서 확인하는 방법]
> 자바스크립트 변수값 확인방법 크롬웹페이지 우측클릭 - 검사 - console
[Number Type, String Type, 산술연산자, 연결연산자, 식별자 규칙]
-> (1) Number Type과 (2)String Type
<!--
#변수의 식별자 규칙
1. 영문자로 시작한다.(보통 소문자로 시작한다.)
2. 예약어를 쓸 수 없다.
3. 식별자는 숫자로 시작할 수 없다.
#데이터타입
1. 숫자 type(Number type)
2. 문자 type(String type)
#연산
1. 변수로의 연산이 가능하다
2. 숫자로의 연산은 '산술연산자' (+,-,/,*) ex)10+1,a+b
3. 문자의 연결은 '연결연산자' ex)'kim' + 'lee'
-->
<!DOCTYPE html>
<html lang="en">
<head>
생략..
</head>
<body>
<script>//자바 스크립트 공간입니다.
//변수 선언
//숫자 타입 변수 선언
var a = 10;
var b = 10.1;
//a문자 타입 변수 선언(큰따옴표, 작은따옴표 둘다 사용 가능)
var c = "kim";
var d = "lee";
var myName = 'jyshin';
//연산을 할 때 변수명으로 연산을 할수도 있다.
var result = 10-1;
var result = a-1;
var result2 = c+d;
</script>
</body>
</html>
[Boolean Type과 비교연산자]
->(3)Boolean Type
<!--
#데이터타입
1. (논리타입)boolean Type
-> true, false
-> "true", "false" (x)
#비교연산자
1. 비교연산의 결과는 boolean Type으로 반환된다.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_DataType2.html</title>
</head>
<body>
<script>
//참과 거짓을 나타내는 논리 타입(boolean type)
var isRun = true;
var isWait = false;
//헷갈리지 말기~!
var result7 = "true";
var result8 = "false";
//비교연산자(연산 결과는 true,false로 반환한다.)
var result1 = 10>1;
var result2 = 10<=1;
var result3 = 10==10;
var result4 = 10!=10;
var result5 = "kim" == "lee";
var result6 = "kim" != "kim";
</script>
</body>
</html>
[Object Type]
->(4)Object Type
<!--
#데이터타입
1. object Type : 1개의 변수로 여러 datatype의 data를 대입가능
-> (형태) var 변수명 = {key1:value, key2:value...};
-> (알아두기) 변수명.key값 으로 저장된 값 참조 가능한다.
-> (알아두기) array type과는 다르게 순서가 중요하지 않을 때 사용한다.
-> (규칙) key와 value 개념이므로 =아닌 :를 쓴다.
-> (규칙) key와 value는 ,로 구분한다.
2. object Type에 들어갈 수 있는 value확인
{key1:1, key2:2, key3:3....}
{key1 : "kim", key2:"lee"}
{key1 : arr[0], key2: arr[1]} :배열타입 데이터가 들어갈 수 있다.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_DataType3.html</title>
</head>
<body>
<script>
//회원 한명의 정보라고 가정하자
var num = 1;
var name = "김구라";
var addr = "노량진";
//다른 data type을 활용하면 1개의 변수명으로
//회원 한명의 정보를 관리할 수 있다.
//object 타입
var mem1={num:1, name:"김구라", addr:"노량진"};
var mem2={num:2, name:"해골", addr:"노량진"};
var mem3 = {num:num, name:name, addr:addr}; //: 앞은 key이름, :뒤는 script상단의 변수
var info1={empno:8000, ename:"SMITH", sal:5000};
//object 타입 key를 이용하여 value 참조하기
var a = mem1.num;
var b = mem2.name;
var c = mem3.addr;
//object type의 key를 이용하여 value 수정하기
mem1.num = 999;
mem1.name = "jaesungLove";
//object type의 key를 이용하여 함수에서 바로 사용하기
alert(mem1.name);
</script>
</body>
</html>
[Array Type]
->(5)Array Type
<!--
#데이터 타입
1. 배열 타입(array type)
->(형태)var 변수명 = [value1, value2....];
->(알아두기)object type과는 다르게 순서가 중요할 때 사용한다.
->(규칙)인덱스를 이용하여 참조하며 인덱스는 앞에서부터 0부터 시작한다.
2. 배열타입에 들어갈 수 있는 value확인하기
[10, 20, 30...]
["kim","lee"...]
[true, false]
[{},{},{}...] : ★object 타입 데이터가 들어갈 수도 있다.
[[],[],[]] : ★배열 타입 데이터가 들어갈 수도 있다.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_DataType4.html</title>
</head>
<body>
<script>
//여러개의 값을 순서있게 관리하는 array type
//친구의 이름을 순서대로 하나의 묶음으로 관리하기
var names = ["김구라","해골","원숭이","주뎅이","덩아리"];
//부서의 번호를 순서대로 하나의 묶음으로 관리하기
var nums = [10,20,30,40];
//인덱스를 이용한 참조(참조해서 값 불러내기)
var a = names[0];
var b = names[1];
var c = nums[0];
var d = nums[1];
//참조해서 값 수정하기
names[0] = "김재성";
nums[0] = 11;
</script>
</body>
</html>
[Function Type]
->(6)Function Type
<!--
#데이터 타입
1. 함수형 타입(function type)
:함수 타입을 이용하여 특정 시점에 일괄수행 할 자바스크립트 코드를 모아놓을 수 있다.
#QUIZ) 참조하는 코드이다. 각 타입은 무슨타입?
Q1) xxx. -> object type
Q2) XXX[0] -> array type
Q3) xxx() -> function type
Q4) document.querySelectior().innerText...
└document. -> object type
└querySelector() -> function type
└document.querySelector(). -> object type
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_DataType5.html</title>
</head>
<body>
<script>
var f1 = function(){};
var f2 = function(){
console.log("f2함수가 호출되었습니다.")
};
var f3 = function(){
console.log("하나");
console.log("두울");
console.log("세엣");
};
function f4(){
console.log("하나");
console.log("두울");
console.log("세엣");
};
</script>
</body>
</html>
[Undefined Type과 자바스크립트 7가지 데이터타입]
->(7) Undefined Type
<!--
#데이터 타입
1. undefined type
#javascript의 총 7가지의 데이터 타입
1. Number type
2. String type
3. Boolean type
4. Object type
5. Array type
6. Function type
7. Undefined type
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_DataType6.html</title>
</head>
<body>
<script>
//변수를 선언만 하고 값을 대입하지 않으면 undefined가 들어 있다.
var a;
//명시적으로 undefined를 대입한 것과 같다.
var b = undefined;
//a,b 안에는 undefined type이 들어있다고 말할 수 있다.
</script>
</body>
</html>
'공부 > JavaScript' 카테고리의 다른 글
| [JavaScript]document.querySelector() 사용해보기 document.querySeletor()의 value와 innerText 사용해서 산술연산 예제(계산기) 풀어보기 (0) | 2020.11.04 |
|---|---|
| [JavaScript]number type, 대입연산자, 산술연산자, 연결연산자 (0) | 2020.11.04 |
| [JavaScript]자바 스크립트 시작하기 (0) | 2020.11.04 |
'공부/JavaScript' Related Articles
more
Comments
