데이터 저장하기
01 변수 : 데이터 저장
{
var x = 100;
var y = 200;
var z = "javascript";
document.write(x); //100
document.write(y); //200
document.write(z); //javascript
}
02 변수 : 데이터 저장 + 데이터 변경
{
let x = 100;
let y = 200;
let z = "javascript";
x = 300;
y = 400;
z = "jquery";
document.write(x); //300
document.write(y); //400
document.write(z); //jquery
}
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); //400
document.write(y); //600
document.write(z); //javascriptjquery
}
03-1 변수 : 변수의 종류(지역 변수 + 전역 변수 + 매개변수)
{
// 전연 변수 설정
let x = 100;
let y = 200;
let z = "javascript";
let a = 300;
//지역 변수 설정
function func(){
let x = 100;
let y = 200;
let z = "javascript";
a = 400; //전연 변수 : 변수 값이 300 -> 400 변경
y = 500; //지역 변수 : 변수 값이 200 -> 500 변경
//함수 안
document.write(x); //100
document.write(y); //500
document.write(z); //javascript
document.write(a); //400
}
func();
//함수 밖
document.write(x); //100
document.write(y); //200
document.write(z); //javascript
document.write(a); //400
}
a 값 이해가 안됨.
04 상수 : 변하지 않는 데이터 저장소
{
const x = 100;
const y = 200;
const z = "javascript";
//x = 300;
//y = 400;
//z = "jquery";
//Uncaught TypeError : Assignment to constant variable.
document.write(x); //100
document.write(y); //200
document.write(z); //javascript
}
05 배열 : 여러개의 데이터 저장 : 표현방법1
{
const arr = new Array();
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
document.write(arr[0]); //100
document.write(arr[1]); //200
document.write(Arr[2]); //javascript
}
06 배열 : 표현방법2
{
const arr = new Array(100, 200, "javascript");
document.write(arr[0]); //100
document.write(arr[1]); //200
document.write(arr[2]); //javascript
}
07 배열 : 표현방법3
{
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
document.write(arr[0]); //100
document.write(arr[1]); //200
document.write(arr[2]); //javascript
}
08 배열 : 표현방법4
{
const arr = [100, 200, "javascript"];
document.write(arr[0]); //100
document.write(arr[1]); //200
document.write(arr[2]); //javascript
}
09 객체 : 데이터 저장(키와 값) : 표현방법1
{
const obj = new Object();
obj[0] = 100;
obj[1] = 200;
obj[2] = "javascript";
document.write(obj[0]); //100
document.write(obj[1]); //200
document.write(obj[2]); //javascript
}
10 객체 : 데이터 저장(키와 값) : 표현방법2
{
const obj = new Object();
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
document.write(obj.a); //100
document.write(obj.b); //200
document.write(obj.c); //javascript
}
11 객체 : 데이터 저장(키와 값) : 표현방법3
{
const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
document.write(obj.a); //100
document.write(obj.b); //200
document.write(obj.c); //javascript
}
12 객체 : 데이터 저장(키와 값) : 표현방법4
{
const obj = {
a : 100,
b : 200,
c : "javascript"
};
document.write(obj.a);//100
document.write(obj.b);//200
document.write(obj.c);//javascript
}
13 객체 : 데이터 저장(키와 값) : 표현방법5 : 배열 속에 객체
{
const obj = [
{a:100, b:200},
{c:"javascript"}
];
document.write(abj[0].a); //100
document.write(abj[0].b); //200
document.write(abj[1].c); //javascript
}
14 객체 : 데이터 저장(키와 값) : 표현방법6 : 객체 속에 배열
{
const obj = {
a : 100,
b : [200, 300],
c : {x : 400, y : 500},
d : "javascript"
}
document.write(obj.a); //100
document.write(obj.b); //200, 300
document.write(obj.b[0]); //200
document.write(obj.b[1]); //300
document.write(obj.c.x); //400
document.write(obj.c.y); //500
document.write(obj.d); //javascript
}
15 객체 : 데이터 저장(키와 값) : 표현방법7 : 객체 속에 변수
{
const a = 100;
const b = 200;
const c = "javascript";
const obj = {a, b, c}
document.write(obj.a); //100
document.write(obj.b); //200
document.write(obj.c); //javascript
}
16 객체 : 데이터 저장(키와 값) : 표현방법8 : 객체 속에 함수
{
const obj = {
a : 100,
b : [200, 300],
c : "javascript",
d : function(){
document.write("javascript가 실행되었습니다.");
},
e : function(){
document.write(obj.c + "가 실행되었습니다.");
},
f : function(){
document.write(this.c + "가 실행되었습니다.");
}
}
document.write(obj.a); //100
document.write(obj.b); //200, 300
document.write(obj.b[0]); //200
document.write(obj.b[1]); //300
document.write(obj.c); //javascript
obj.d(); //javascript가 실행되었습니다.
obj.e(); //javascript가 실행되었습니다.
}
반응형
'Frontend > JavaScript' 카테고리의 다른 글
[javascript] 문법 - 데이터 실행하기 (0) | 2021.08.12 |
---|---|
[javascript] 문법정리 - 데이터 불러오기 (0) | 2021.08.12 |
[JAVASCRIPT] clientX, offsetX, pageX, screenX (0) | 2021.08.11 |
[Javascript] 탭 메뉴, 메뉴 하이라이트 구현하기 (0) | 2021.07.29 |
[Javascript] loading 페이지 넣기 (0) | 2021.07.24 |