[JavaScript] 2일차 변수값 저장

01_변숫값 저장

var 변수A = 데이터; // 데이터가 변수 A에 저장됩니다.

var 변수 B = 변수 A; // 변수 B에 변수 A가 저장되는 것이 아니라 변수 A에 들어있는 값이 복사돼 저장됩니다.

Q.01 변수 data1를 만든 후 숫자 데이터1234를 저장해 주세요. 그리고 변수 data2를 만든 후 data1의 값을 저장해 주세요.

A.01

var data1 = 1234;

var data2 = data1;

02_변숫값 변경

var 변수이름 = 데이터;

변수이름 = 신규 데이터1;

변수이름 = 신규 데이터2;

Q.01 변수 data1을 만든 다음 초깃값을 10으로 한 후 데이터를 다시 20으로 또 다시 한 번 30으로 변경해 주세요.

A.01

var data1 = 10;

data1 = 20;

data1 = 30;

그럼 여기서 ex1 과 ex2 의 차이점은?

1.

var data1 = 10;

var data1 = 20;

var data1 = 30;

2.

var data1 = 10;

data1 = 20;

data1 = 30;

결과 

1,2번 모두 data1에 최종적으로 30이라는 값이 저장된다는 점은 같다. 하지만 1번은 data1이라는 똑같은 저장공간이 세 번이나 만들어지는 것이므로,

실무에서는 1번처럼 사용하는 일은 없어야 합니다.

03_변수에 어떤 값이 들어 있는지 확인하기

01.alert()

02.document.write()

03.console.log()

01_alert()

alert() 함수는 특정 정보를 사용자에게 메시지 창으로 알려주기 위해 주로 사용합니다. 변수의 내용을 쉽게 눈으로 확인할 수 있습니다.

사용법

alert(데이터);

실행화면

var name="jiwon";

alert(name);

02_document.write()

Document라는 객체에서 제공하는 write() 기능은 HTML 문서의 body 영역에 <div> 와 같은 HTML 태그 내용을 출력해줍니다.

사용법

document.write(데이터[, 데이터...]);

실행화면

var name="jiwon";

document.write("name = "+name);

03_console.log();

개발을 하다 보면 문법적으로 전혀 문제가 없음에도 불구하고 어떤 경우에는 정상적으로 동작하고 어떤 경우에는 동작이 제대로 안되는 경우가 있습니다.

이를 논리적인 오류인 버그라고 부르고 이 버그를 찾아 없애는 작업을 디버깅이라고 합니다.

console.log() 기능은 앞의 두가지 기능과는 달리 전문 디버깅 도구입니다.

console.log 기능은 웹킷 엔진을 사용하는 브라우저인 크롬과 사파리에서만 사용 가능하며 출력값은 모든 디버깅 기능을 가지고 있는 인스펙터화면의

콘솔영역에 출력됩니다.

사용법

console.log(데이터[, 데이터....])

실행화면

var name="jiwon";

console.log("name= "+name);

04_정리

기능	전문 디버깅 기능	주용도
alert(변수이름)	x	사용자에게 특정 정보를 팝업 창을 이용해 알려주고 싶을 때 사용합니다.
document.write(변수이름)	x	body 영역에 HTML 태그정보를 출력할 때 사용합니다.
console.log(변수이름)	o	전문 디버깅 함수로서 특정 변수의 값을 확인할 때 사용합니다.