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);
결과보기
200
javascript
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);
결과보기
600
javascriptjquery
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
변수는 데이터를 저장하는 저장소이고, 데이터를 변경 또는 추가 할 수 있습니다.
let x = 100;
let y = 200;
let z = "javascript";
x += 300; // 변수 x의 값이 x + 300으로 변경됨
y -= 400; // 변수 y의 값이 y - 400으로 변경됨
z += "jquery" // 변수 z의 값이 z + "jquery"로 변경됨
document.write(x);
document.write(y);
document.write(z);
결과보기
-200
javascriptjquery
04. 변수 : 지역변수 + 전역변수 + 매개변수
변수는 어디에 쓰냐에 따라 지역변수와 전역변수로 나눌 수 있습니다. '전역 변수'는 함수 블록 { } 밖이나 안에서 자유롭게 사용 가능하지만, '지역 변수'는 함수 블록 { } 내에서만 사용할 수 있습니다.
let x = 100; // 전역변수
let y = 200; // 전역변수
function func() {
let x = 100; // 지역변수
let z = "javascript"; // 지역변수
x = 200; // 지역변수 내 x 값이 100에서 200으로 변경됨
y = 300; // 전역변수 내 x 값이 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);
결과보기
200
javascript
06. 배열 : 데이터 저장(여러개) : 표현방법1
배열은 여러개의 데이터를 저장할 수 있는 저장소입니다. 그 중 첫 번째 방법입니다.
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]);
결과보기
200
javascript
07. 배열 : 데이터 저장(여러개) : 표현방법2
배열을 표현하는 두번째 방법입니다.
const arr = new Array(100, 200, "javascript");
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
200
javascript
08. 배열 : 데이터 저장(여러개) : 표현방법3
배열을 표현하는 세번째 방법입니다. 배열 생성자 함수(new Array)를 생략할 수 있습니다.
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
200
javascript
09. 배열 : 데이터 저장(여러개) : 표현방법4
배열을 표현하는 네번째 방법입니다.
const arr = [100, 200. "javascript"];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
200
javascript
10. 객체 : 데이터 저장(키와 값) : 표현방법1
객체는 키와 값으로 구성된 데이터 값을 저장합니다. 그 중 첫번째 방법입니다. 객체의 데이터는 obj[순서] = 값으로 나타낼 수 있습니다.
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]);
결과보기
200
javascript
11. 객체 : 데이터 저장(키와 값) : 표현방법2
객체를 표현하는 두번째 방법입니다. 객체의 데이터는 obj.[키] = 값으로 나타낼 수 있습니다.
const obj = new Object();
obj.a = 100; // obj(객체).a(키) = 100(값)
obj.b = 200;
obj.c = "javascript";
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
200
javascript
12. 객체 : 데이터 저장(키와 값) : 표현방법3
객체를 표현하는 세번째 방법입니다. 객체 생성자 함수(new Object)를 생략할 수 있습니다.
const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
200
javascript
13. 객체 : 데이터 저장(키와 값) : 표현방법4
객체를 표현하는 네번째 방법입니다.
const obj = {a:100, b:200, c:"javascript"};
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
200
javascript
14. 객체 : 데이터 저장(키와 값) : 표현방법 5 : 배열 속의 객체
객체를 표현하는 다섯번째 방법은 배열 속의 객체가 있을 경우입니다.
const obj = [
{a:100, b:200},
{c:"javascript"}
];
document.write(obj[0].a);
document.write(obj[0].b);
document.write(obj[1].c);
결과보기
200
javascript
15. 객체 데이터 저장(키와 값) : 표현방법6 : 객체 속의 배열
객체를 표현하는 여섯번째 방법은 객체 속의 배열이 있을 경우입니다.
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);
결과보기
200
300
400
500
javascript
16. 객체 : 데이터 저장(키와 값) : 표현방법7 : 객체 속의 변수
객체를 표현하는 일곱번째 방법은 객체 속의 변수가 있을 경우 입니다.
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);
결과보기
200
javascript
17. 객체 : 데이터 저장(키와 값) : 표현방법8 : 객체 속의 함수
객체를 표현하는 여덟번째 방법은 객체 속의 함수가 있을 경우 입니다.
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); // b 값 전체를 출력 -> , 포함해서 나옴
document.write(obj.c.x);
document.write(obj.c.y);
//document.write(obj.c); // [object object]로 출력, 정확한 설명 필요
document.write(obj.d);
obj.e(); // 함수는 실행문, document.write(실행문)안에 넣으면 출력되지 않음
obj.f();
obj.g();
결과보기
200
300
200,300
400
500
// [object object]
javascript
자바스크립트가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.