01. 변수 : 데이터 저장
변수는 데이터를 저장하는 저장소 입니다. 이 저장소에는 숫자, 문자, 함수, 객체 등을 저장할 수 있습니다.
var x = 100; //변수 x에 100을 저장함
var y = 200; //변수 y에 숫자 200을 저장함
var z = "javascript"; //변수 z에 문자열 "javascript" 를 저장함
document.write(x);
document.write(y);
document.write(z);
결과보기
02. 변수 : 데이터 저장 + 데이터 변경
변수는 데이터를 저장하는 저장소 입니다. 변수는 데이터를 변경하기도 합니다.
let x = 100;
let y = 200;
let z = "javascript";
x = 300; //변수 x의 값이 100에서 300으로 변경됨
y = 400; //변수 y의 값이 200에서 400으로 변경됨
z = "jquery" //변수 z의 값이 "javascript"에서 "jquery"로 변경
document.write(x);
document.write(y);
document.write(z);
결과보기
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
변수는 데이터를 저장하는 저장소 입니다. 변수는 데이터를 변경하기도 하고 추가하기도 합니다.
let x = 100;
let y = 200;
let z = "javascript";
x += 300; //x변수에 300을 더해줌
y += 400; //y변수에 400을 더해줌
z += "jquery"; //z변수에 "jquery"를 더해줌
document.write(x);
document.write(y);
document.write(z);
결과보기
04. 변수 : 변수의 종류 : 지역변수 + 전역변수
전역변수는 함수 블록{ } 밖이나 안에서 자유롭게 사용 가능하지만 지역변수는 함수 블록{ } 내에서만 사용할 수 있습니다.
let x1 = 100; //전역변수
let y1 = 200; //전역변수
function func(){
let x1 = 100; //지역변수
let z1 = "javascript";//지역변수
x1 = 200; //지역변수 100 --> 200으로 변경
y1 = 300; //전역변수 200 --> 300으로 변경
document.write("함수 안");
document.write(x);
document.write(y);
document.write(z);
}
func();
document.write("함수 밖");
document.write(x);
document.write(y);
document.write(z);
결과보기
200
300
javascript
함수 밖
100
300
undifined
05. 상수 : 데이터 저장 + 변경X
상수는 데이터를 저장하는 저장소 입니다.
그러나 변경 할 수 없습니다.
상수(const)는 이미 선언한 상수에 대해 중복해서 선언할 수 없고 상수의 값을 재지정할 수도 없습니다.
const x = 100;
const y = 200;
const z = "javascript";
//x = 300;
//y = 400;
//z = "jquery"
document.write(x);
document.write(y);
document.write(z);
결과보기
06. 배열 : 데이터 순차적으로 저장 : 표현 방법1
상수 const를 new Array를 통해 선언해줍니다.
const arr = new Array();
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
07. 배열 : 데이터 순차적으로 저장 : 표현 방법2
가로로 정렬했던 arr부분을 new Array( )안에 넣어 더욱 간편하게 해줍니다.
const arr = new Array(100, 200, "javascript");
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
08. 배열 : 데이터 순차적으로 저장 : 표현 방법3
07번의 방법보다 더 편리하게 const arr=[ ];로 표현해주고, 그 밑에 arr[ ] = ? 을 가로로 정렬합니다.
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
09. 배열 : 데이터 순차적으로 저장 : 표현 방법4
위의 배열 방법들은 조금 복잡할 수 있으므로 깔끔하게 const arr = [값, 값, 값]; 으로 정리해줍니다.
const arr = [100, 200, "javascript"];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
10. 객체 : 데이터 저장(키와 값) : 표현 방법1
객체는 키와 값으로 구성된 데이터 값을 저장합니다.
첫번째 표현 방법입니다.
const obj=New Object( );로 표현하고 [ ]을 주로 씁니다.
const obj = new Object();
obj [0] = 100;
obj [1] = 200;
obj [2] = "javascript";
document.write(obj [0]);
document.write(obj [1]);
document.write(obj [2]);
결과보기
11. 객체 : 데이터 저장(키와 값) : 표현 방법2
객체로 데이터 값을 저장할 수 있는 두번째 방법입니다.
const obj=New Object( );로
표현하고 obj.?=? 형태로 씁니다.
const obj = new Object();
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
12. 객체 : 데이터 저장(키와 값) : 표현 방법3
객체로 데이터 값을 저장할 수 있는 세번째 방법입니다.
const obj={ };로 표현하고
obj.?=? 형태로 씁니다.
const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
13. 객체 : 데이터 저장(키와 값) : 표현 방법4
객체로 데이터 값을 저장할 수 있는 네번째 방법입니다.
const obj={, , ,
};로 간편하게 씁니다.
const obj = {a:100, b:200, c:"javascript"};
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
14. 객체 : 데이터 저장(키와 값) : 표현 방법5
객체로 데이터 값을 저장할 수 있는 다섯번째 방법입니다.
const obj=[{
},{ }];로 씁니다.
const obj = [
{a:100, b:200},
{c:"javascript"}
];
document.write(obj[0].a);
document.write(obj[0].b);
document.write(obj[1].c);
결과보기
15. 객체 : 데이터 저장(키와 값) : 표현 방법6
객체로 데이터 값을 저장할 수 있는 여섯번째 방법입니다.
const
obj={ : , :[ , ] ,{ } , };로 씁니다. { }안에 다양한
형태가 들어갈 수 있습니다.
const obj = {
a: 100,
b: [200, 300],
c: {x: 400, y: 500},
d: "javascript"
}
document.write(obj.a);
document.write(obj.b[0]);
document.write(obj.b[1]);
document.write(obj.c.x);
document.write(obj.c.y);
document.write(obj.d);
결과보기
16. 객체 : 데이터 저장(키와 값) : 표현 방법7
객체로 데이터 값을 저장할 수 있는 여섯번째 방법입니다.
const
obj={ : , :[ , ] ,{ } , };로 씁니다. { }안에
다양한 형태가 들어갈 수 있습니다.
const a = 100;
const b = 200;
const c = "javascript";
const obj = {a, b, c} //변수를 객체 속에 넣음
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
17. 객체 : 데이터 저장(키와 값) : 표현 방법7
객체로 데이터 값을 저장할 수 있는 여섯번째 방법입니다.
const obj={ : , :[ , ] ,{ } ,
};로 씁니다. { }안에 다양한 형태가 들어갈 수 있습니다.
const obj = {
a : 100,
b : [200, 300],
c : {x:400, y:500},
d : "javascript",
e : function( ){
document.write("자바스크립트가 실행되었습니다.");
},
f : function( ){
document.write( obj.d + "가 실행되었습니다.");
},
g : function( ){
document.write( this.d + "가 실행되었습니다.");
}
}
document.write(obj.a);
document.write(obj.b[0]);
document.write(obj.b[1]);
document.write(obj.b);
document.write(obj.c.x);
document.write(obj.c.y);
//document.write(obj.c); //[object object]로 출력되고 document.write(obj.c[0])이런식으로 하면 에러남!
document.write(obj.d);
obj.e( ); //함수여서 실행문 자체를 document로 실행시켜주면 오류가 남. 그 자체로 실행문이어서 함수 실행시켜주는 것처럼 해주어야 됨
obj.f( );
obj.g( );
결과보기
200
300
200, 300
400
500
javascript
자바스크립트가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.