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. 변수 : 데이터 저장 + 데이터 변경
변수는 데이터를 저장하는 저장소이지만 변경도 가능합니다.
var x = 100; //변수 x저장소에 숫자 100 저장함
var y = 200; //변수 y저장소에 숫자 200 저장함
var z = "javascript"; //변수 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; //변수 x저장소에 숫자 100 저장함
let y = 200; //변수 y저장소에 숫자 200 저장함
let z = "javascript"; //변수 z저장소에 문자열 "javascript" 저장함
x += 300; //변수 x에 값이 100에서 300을 추가해 400으로 변경
y += 400; //변수 y에 값이 200에서 400을 추가해 600으로 변경
z += "jquery"; //변수 z에 값이 "javascript"에서 "jquery" 추가해 "javascriptjquery"으로 변경
document.write(x); //출력
document.write(y); //출력
document.write(z); //출력
결과보기
04. 변수 : 지역변수 + 전역변수 + 매개변수
전역변수는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만, 지역변수는 함수 블록{} 안에서만 사용가능합니다.
let x1 = 100; // x 에 100저장
let y1 = 200; // y 에 200저장
let t1 = "hi"; // t 에 문자열 "hi" 저장
function func() { // 함수 생성
let x1 = 300; // 지역변수 x 에 300저장
y1 = 400; // 전역변수 y 에 400저장
let t1 = "javascript"; // 지역변수 t 에 문자열 "javascript" 저장
document.write("함수안");
document.write(x1); //출력
document.write(y1); //출력
document.write(z1); //출력
}
func(); // 함수 호출
document.write("함수밖");
document.write(x1); //출력
document.write(y1); //출력
document.write(z1); //출력
결과보기
05. 상수 : 데이터 저장 + 데이터 변경X
상수는 이미 선언한 상수에 대해 중복해서 선언 할수 없고, 상수의 값은 재지정할 수도 없습니다.
const x = 100; // 상수 x 100 저장
const y = "javascript"; // 상수 y 200 저장
document.write(y); //출력
x += 200; // 재정의할수 없음
document.write(x); // 출력 오류
결과보기
06. 배열 : 여러개의 데이터를 저장 : 표현 방법 1
배열은 여러개의 데이터를 저장할수 있습니다.
const arr = new Array();
arr[0] = 10; //0번째 arr 변수에 10을 저장
arr[1] = 30; //1번째 arr 변수에 30을 저장
arr[2] = "javascript"; //2번째 arr 변수에 javascript을 저장
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
07. 배열 : 여러개의 데이터를 저장 : 표현 방법 2
배열은 생성자 함수안에 데이터를 저장할수있습니다
const arr = new Array(10, 20, "javascript"); // 생성자에 저장
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
08. 배열 : 여러개의 데이터를 저장 : 표현 방법 3
배열은 생성자 함수를 생략할수있습니다.
const arr = []; // 생성자 함수 생략
arr[0] = 10; //0번째 arr 변수에 10을 저장
arr[1] = 30; //1번째 arr 변수에 30을 저장
arr[2] = "javascript"; //2번째 arr 변수에 javascript을 저장
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
09. 배열 : 여러개의 데이터를 저장 : 표현 방법 4
배열은 생성자 함수를 생략하고 괄호 안에 넣을수도있습니다.
const arr = [10, 30, "javascript"]; // 생성자 생략후 저장
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
10. 객체 : 데이터를 저장(키와 값) : 표현 방법1
객체는 배열처럼 이용할수 있습니다.
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; //a : 이름, 100 : 값
obj.b = 200; // b : 이름, 200 : 값
obj.c = "javascript"; //a : 이름, "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. 객체 : 데이터를 저장(키와 값) : 표현 방법5
객체는 배열안에 객체를 생성할수 있습니다.
const obj = [
{a: 100, b: 300},
{c: "javascript"}
];
document.write(obj[0].a);
document.write(obj[0].b);
document.write(obj[1].c);
결과보기
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);
결과보기
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);
결과보기
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.c); // 결과값이 object로 나오는이유는 명확한 위치를 못찾아서 그렇습니다.
document.write(obj.c.x);
document.write(obj.c.y);
document.write(obj.d);
obj.e();
obj.f();
obj.g();
결과보기
자바스크립트가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.