[JAVASCRIPT] Chapter 1 변수 1

오늘부터 자바스크립트 +jquery 완정정복 스터디 책을 통해 자바스크립트와 jquery를 공부해보도록 하겠습니다.

Lesson 01 변수 소개

1. 변수란?

변수는 물건을 보관했다가 필요할때 다시 꺼내 사용하는 창고입니다.

창고와 변수의 차이점은 보관하는 내용이 물건이나 데이터이냐 차이입니다

- 변수는 데이터를 저장하는 장소

- 변수는 데이터를 읽고 쓰고 할 수 있는 장소

2. 변수는 이럴 때 사용

- 특정 사이트의 로그인 상태 유무를 변수에 저장합니다

- 게임점수도 변수에 저장합니다

- 장바구니 상품목록도 변수에 저장합니다

Lesson 02 변수만들기

1. 변수 하나 만들기

var 변수이름 = 값;

- var

 var는 변수 선언을 의미하는 키워드입니다.

- ;(세미콜론)의 의미

 문장 맨 뒤에 붙이는 세미콜론은 문장의 끝을 의미합니다

정리하면 = 연산자를 기준으로 var에 의해서 변수이름으로 변수가 만들어지고 이후 우측에 있는 데이터가 변수에 저장(대입)됩니다

예제 1 나의 나이가 담긴 변수 age를 만들기

var age= 25;

2. 변수 여러 개 만들기

방법 1 var를 이용해서 여러 줄로 변수 구분을 하는경우

var 변수이름1= 데이터;

var 변수이름2=데이터;

....

예제 2 이름과 나이를 저장한 변수를 만들기

var age=25;

var name="컴공돌이";

방법 2 콤마(,)를 이용해서 변수 구분을 하는 경우

var 변수이름1= 데이터[, 변수이름2=데이터]....;

예제 2 이름과 나이를 저장한 변수를  콤마(,)를 이용해서 만들기

var name="컴공돌이",age= 25;

3. 변수이름 만들 때 주의사항

변수이름을 만들 때는 다음과 같이 총 5가지 정도 주의해야 할 내용이 있습니다.

1. 숫자로 시작하면 안됩니다.

var 1st=10; //에러

2. 대소문자 구분: name과 Name은 완전히 다른 변수입니다.

var name="컴공돌이";

var Name="컴공돌이";

3. 변수는 대문자가 아닌 소문자로 시작해야합니다.

var Name= "컴공돌이"; 

대신

var name= "컴공돌이";

4. 변하지 않는 환경 변수의 값을 담는 상수 변수는 모두 대문자로 만들어야합니다.

var DB_NAME="컴공돌이";

var ADMIN_ID="컴공돌이";

DB이름이나 관리자 아이디처럼 한번 저장후 변경하면 안되는 값이 있습니다.

이런 상수 값을 담는 변수는 다른 변수와 구분이 될 수 있게 변수 이름을 모두 대문자로 만듭니다.

자바와 달리 자바스크립트는 변수를 대문자로 만든다고 해서 값을 못 바꾸거나 하진 않습니다.

일종의 무언의 약속이라 대문자로 된 변수를 만나게 되면 값을 변경하면 안되는 변수라고 생각하고 넘어갑시다.

5. 여러 단어가 조합되는 경우 다음과 같이 낙타 표기번(camelcase)으로 작성합니다.

var userName="컴공돌이";

var selectMenuIndex=1;

일종의 관행일뿐 반드시 이럴 필요는 없습니다.

6. 자바스크립트에서 이미 정의된 예약어(키워드)를 사용하면 안됩니다

* 예약어 목록

break, case, catch, continue, default, delete, do, else, finally, for, function, if ,in instanceof, new, return ,switch, this, throw, try, typeof, var, void, whlie, with

var calss ="test1" //에러

var for ="test2"; //에러

var if="test3"; //에러

모든 키워드를 외울 필요는 없습니다.

Lesson 03 변수에 저장할 수 있는 데이터 종류

1. 데이터 위치

데이터 위치는 일반적으로 =를 기준으로 우측에 변수는 좌측에 옵니다

2. 데이터 종류

변수에 저장할 수 있는 데이터 종류는 다음과 같이 총 8개 정도 됩니다.

- 숫자(number)

- 논리(boolean)

- 문자(string)

- 함수(function)

- 클래스(class)

- 클래스 인스턴스(class instance)

- undefined

- null

*숫자형

var score=100;

숫자형은 크게 정수형과 실수형으로 나눠 집니다. 10진수와 실수형은 일반적으로 사용하는 숫자이며 16진수는 글자색이나 배경색을 나타낼 때 주로 사용합니다

예제 1 여러분의 나이 몸무게를 각각 age,weight 변수에 담아줍니다

var age=28;

var weight=61.5;

*문자형

var userName="컴공돌이";

문자열이란? 일상생활에서 사용하는 글자를 프로그래밍 동네에서는 문자열이라고 부를 뿐 다른 차이는 없습니다

예제 2 여러분의 아이드를 id라는 변수에 저장합니다

var id="컴공돌이";

예제 3 여러분의 나이를 age라는 변수에 문자열 값으로 저장해주세요

var age="25";

---------------------------------------------------------------------------------------------

var age=30과

var age="30"은 다릅니다

위에 age는 숫자형이고 밑에 age는 문자열을 의미합니다

---------------------------------------------------------------------------------------------

*논리형

var login=true;

프로그래밍을 하다 보면 참(ture,1)이냐 거짓(false,0)이냐를 저장해야 하는 경우가 많습니다. 이런 데이터를 프로그래밍 동네에서는 논리형이라고 합니다. 논리형에는 오직 참(true,1)과 거짓(false,0) 두 가지 값이 존재하며 다음과 같은 경우를 예로 들 수 있습니다.

예제 4 현재 날씨가 추운지 아닌지 cold 변수에 담아 표현해주세요

var cold= true;

예제 5 로그인 유무를 login 변수에 담아봅시다

var login=true;

*Undefined

변수에 undefined가 저장되어 있다면 이것은 일반적으로 변수를 만든 후 초기화하지 않은 상태를 의미하며 다음과 같은 경우에 해당합니다.

예제 6 변수를 선언하고 그 변수에 값을 대입하지 않는 경우

var data1;

alert("data1 ="+data1);

실행결과

   data1= undefined

예제 7 함수 인자 값 없이 함수를 호출하는 경우

function myFunc(data1){

alert("data1 ="+data1);

}

myFunc("value1");

myFunc();

실행결과

     data1= value1

     data1= undefined

예제 8 존재하지 않은 객체의 프로퍼티에 접근하는 경우

function Myclass(){

this.name="컴공돌이";

}

var test1= new Myclass();

alert("test1.name =" +test1.name);

alert("test1.userName + "+test1.userName);

실행결과

this.name = 컴공돌이

this.username= undefined

*null

null의 뜻은 아무것도 참조하고 있지 않다라는 의미가 담겨있으며 주로 객체를 담을 변수를 초기화 할대 많이 사용합니다

예제 9 null 값으로 데이터를 초기화 하는경우

// 숫자 변수 초기화

var data1=0;

// 문자 변수 초기화

var data2='';

// 논리형 변수 초기화

var data3= false;

// 객체 변수 초기화

var data4 =null;

Lesson 4 변숫값 저장 및 변경

1 변수값 저장

변수에는 상수뿐만 아니라 또 다른 변수 자체를 저장 할 수 있습니다. 이때 구문을 어떻게 해석해야 하는지 알아봅시다

var 변수A= 데이터;

*var 변수B= 변수A;

var 변수C= 변수A+데이터+변수B;

* 변수B에 변수A가 저장되는 것이 아니라 변수B에 변수A값에 들어잇는 값이 복사됩니다

해석 전

var data1= 10;

var data2= data1;

var data3= data1+20+data2;

해석 후

var data1= 10;

var data2= 10;

var data3= 10+20+10;

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

var data1 =1234;

var data2= data1;

2. 변수값 변경

var 변수이름 = 데이터;

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

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

변수에 저장돼 있는 값을 다른 값으로 변경하는 방법은 비교적 간단합니다. var를 붙이지 않은 상태에서 변수에 값을 대입해주면 됩니다.

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

var data1=10;

data1=20;

data1=30;

Lesson 5 변숫값이 자동으로 읽혀지는 경우

1. 우측에 변수를 두는 경우(변수에 들어 있는 값이 읽혀 다른 변수에 대입하는 경우)

변수A = 변수B(우측에 있을 때)

우측에 변수를 두면 변수 자체가 넘어가는 것이 아니라 변수안에 들어 있는 데이터가 복사되어 좌측 변수에 저장됩니다.

*정확히 이야기 하면 데이터 중 숫자,문자,논리 데이터만이 복사되며 배열,함수,객체 데이터 등은 실제 데이터가 들어 있는 주소가 복사됩니다.

예제1 다음 구문이 어떻게 해석되는지 설명해주세요

var name="컴공돌이";

var temp= name;

설명

name 변수에 들어 있는 값이 복사돼 temp 변수에 대입됩니다

2. 함수 호출 시 변수를 매개변수 값으로 사용하는 경우

함수(변수A);

아직 배우지 않은 함수 호출과 함께 변수를 사용하는 경우에도 값이 복사되어 매개변수(파라미터)로 넘어갑니다. 함수, 함수호출, 매개변수는 함수 부분에서 자세히 다룹니다

예제 2 다음 구문이 어떻게 해석되는지 설명해주세요

function test1(userName){

alert("username = "+userName);

}

var name ="컴공돌이";

test1(name);

설명

test1(name);을 호출하면 test1("컴공돌이")로 변경됩니다

3. 연산자와 함께 사용하는 경우

변수A = 변수B 연산자 변수C;

2장에서 배울 연산자와 함께 변수를 사용하는 경우에도 변수에 저장된 값이 자동으로 읽혀져서 사용됩니다.

예제3 다음 구문이 어떻게 해석되는지 설명해주세요

var num1=10;

var num2=20;

var result=num1+num2;

alert(result);

var result= num1+num2를 호출하면 var result= 10+20으로 변경되어 계산됩니다.

남은 부분은 다음에 이어서 포스팅하도록 하겠습니다