TOP
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의 값이 javascipt에서 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("04. 변수 : 함수 안");
document.write(x1);
document.write(y1);
document.write(z1);
}
func();
document.write("04. 변수 : 함수 밖");
document.write(x1);
document.write(y1);
// document.write(z1); // 지역변수의 값 출력 불가
결과보기
함수 안
200
300
javascript
함수 밖
100
300
undefined
200
300
javascript
함수 밖
100
300
undefined
05. 상수 : 데이터 저장 + 데이터 변경 X
상수는 데이터의 저장할 수 있으며, 변경은 할 수 없습니다. 상수(const)는 이미 선언한 상수에 대해 중복해서 선언할 수 없고, 상수의 값은 재지정할 수도 없습니다.
const x = 100; // 변경할 수 없다.
const y = 200;
const z = 'javascript';
// x = 200; // error : 값 변경 불가
// y = 400;
// z = jquery;
document.write("05. 상수")
document.write(x);
document.write(y);
document.write(z);
결과보기
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]);
결과보기
07. 배열 : 선언방법2
배열 객체 키워드 선언 후 한꺼번에 할당
const arr = new Array(100, 200, 'javascript'); // 한번에 값 할당
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2] );
결과보기
08. 배열 : 선언방법3
배열 리터럴로 배열 선언 후, 값은 나중에 할당
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 = [100, 200, 'javascript']; // 한번에 값 할당
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
10. 객체 : 선언방법1
객체는 배열과 마찬가지로 키워드를 통해 (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.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.a = 100;
obj.b = 200;
obj.c = 'javascript';
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
13. 객체 : 선언방법 4
객체 리터럴로 선언 후, 바로 값을 할당해 줄 수 있다. 가장 많이 사용하고 편리한 방법
const obj = {
a : 100,
b : 200,
c : 'javascript',
}; // 선언과 동시에 할당
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
14. 객체 : 배열속의 객체
배열의 원소로 객체가 들어올 수 있으며, obj[index].key로 접근한다.
const obj = [
{a : 100, b : 200},
{c : 'javascript'},
]; // 배열 속에 객체
document.write(obj[0].a);
document.write(obj[0].b);
document.write(obj[1].c);
결과보기
15. 객체 : 객체 속의 배열
객체 역시 배열을 원소로 갖는데, obj[key][index]로 접근 가능하다.
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); // 키 c의 값의 값
document.write(obj.c.y);
document.write(obj.d);
결과보기
16. 객체 : 객체 속의 변수
객체안의 변수를 넣으면 편하게 초기화 할 수 있다.
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. 객체 : 객체 속의 배열
객체는 함수 또한 원소로 갖는데, 호출시 객체.함수() 방식으로 호출한다.
const obj = {
a : 100,
b: [200, 300],
c : {x : 100, y : 400},
d : 'javascript',
e : function(){
document.write("e함수 : " +'자바스크립트가 실행되었습니다.');
},
f : function(){
document.write("f함수 : " +obj.d + '가 실행되었습니다.');
},
g : function(){
document.write("g함수 : " + this.d + '가 실행되었습니다.');
},
}
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);
obj.e();
obj.f();
obj.g();