JavaScript 변수와 변수명 , 저장가능 데이터형 , alert( ) escape사용

[ JavaScript 변수 ]

 : 변수는 '데이터를 저장(보관)하는 장소'

   변수에 데이터를 저장한다는 의미는 '저장 되어 있는 데이터(값)를 호출'할 수도 있다는 뜻 

 

★ 변수에 새로운 데이터가 저장되면 기존 데이터는 사라진다. ★

var num=10;  		    // num에는 10 저장

var subject="JavaScript"
subject="jQuery"            // subject에는 jQuery 저장

 

[ 여러 개의 변수를 정의하는 방법 ]

 1) 각각 지정하여 만들기

var num1; //num1 변수 생성 
var num2; //num2 변수 생성
num1=10;  //num1에 숫자 데이터 10 저장
num2=20;  //num2에 숫자 데이터 20 저장 

 

 2) 한번만 정의하고 쉼표(,)로 구분

var num1,num2;   //num1,num2 변수 생성
num1=10;         //num1에 숫자 데이터 10 저장
num2=20;         //num2에 숫자 데이터 20 저장

 

 3) 한번만 정의하고 데이터값 바로 지정 

var num1=10, num2=20;  // num1,num2 변수를 생성 후 각각 숫자 데이터 10,20 저장

 

[ 변수명 관련 주의 사항 ]

 1) 대소문자 구분

var num;
Num=10;  (X)
num=10;  (O)

 

 2) 띄어쓰기 

var n um=10;  (X) 띄어쓰기 불가!

 

 3) 첫 글자

  ⓐ 숫자 불가

var 1num=10;  (X)  변수명의 첫 글자에는 숫자가 올 수 없다.

 

  ⓑ 특수문자 불가 , but 예외적으로 특수문자 중 '_'와 '$'는 사용 가능

var %num=10;  (X)
var $num=10;  (O)
var _num=10;  (O)

 

 4) 사용 불가 예약어

     : 변수명으로 자바스크립트 예약어들 사용 불가!

       * 예약어 * : 자바스크립트에서 특별한 명령을 수행하기 위해 미리 정의해 놓은 키워드 

var break=0;     (X)
var continue=0;  (O)

 

 5) 기타 변수명 관련 규칙 

     : 변수의 이름에 일정한 규칙을 만들어 사용 가능 

       변수, 함수, 객체에도 이름이 필요하며 이름에 대한 일정한 규칙이 있어야 코드를 좀 더 알아보기 쉽게 만들 수 있다. 

 

★ '변수명' 과 '함수명' => Camel 표기법 

                        '객체' => Pascal 표기법 

 

ⓐ camel(카멜) 표기법

   : 이름이 여러 개의 단어로 만들어 질 경우 두번째의 단어부터 첫 글자를 대문자로 표시 

     마치 낙타의 등처럼 생겼다고 하여 '낙타기법' 이라 불리움.

userAge, createElement(), getElementById()

   

ⓑ Pascal(파스칼) 표기법 

   : 각 단어의 첫 글자를 대문자로 표시합니다.

UserAge, SpeedDirection()

 

ⓒ Underscore(언더스코어) 표기법 

    : 언더바를 이용하여 이름을 만듭니다.

user_age, time_process()

     

[ 변수에 저장 가능한 데이터형 ]

1) String(문자) 데이터 

    : 문자 데이터는 ' ' 또는 " " 로 표현 가능

var str1= '앙뇽';
var str2= "앙뇽";

 

 문자 안에 문자가 들어갈 경우

var str1='앙뇽하니 "앙뇽"';
var str2="앙뇽하니 '앙뇽'";

 

2) Number(숫자) 데이터

var num1=10;
var num2=10.5;

     

3) Boolean(논리) 데이터 

    : '참' 과 '거짓'값을 의미 

      변수에 0 값 저장 => false 

      변수에 0 이외의 숫자값 => true

var temp1=true
var temp2=false;

var temp1=0;   //false 의미 
var temp2=1;   //true  의미 

 

4) Array(배열) 데이터

var array=["daru","jenny","tan"];

 변수에 배열이 저장되는 형태

• [0]   =>   "daru"
• [1]    =>   "jenny"
• [2]   =>    "tan"

5) Object(객체) 데이터

var exam={name:"daru",age:5};

 변수에 객체가 저장되는 형태

• name  =>  daru
• age      =>  20

6) Function(함수) 데이터 

var unitChange=function() {
var trans = num/100;
document.write(num+'cm는'+trans+'m입니다.');
};

 

7) Undefined/Null 데이터 

   undefined는 변수에 값이 저장되어 있지 않거나 객체의 속성이 정의되어 있지 않을 때 undefined 값을 반환

var obj1;
document.write(obj1);  // obj1 변수에 값이 없는 상태이기 때문에 obj1=undefined 

   null은 변수에 값이 있는 상태에서 변수의 값을 빈(empty) 상태로 만들 때 사용하거나 객체가 존재하지 않을 때 null값을 반환      

var obj2=10;
var obj2=null;

 

  >> Boolean의 인식 : 변수에 undefined나 null값이 저장되면 boolean은 false로 인식 

var obj1;       // false
var obj2=null;  // false

 

* 참고 * 

alert( ) 함수에서는 '<br>'태그로 행이 바뀌지 않아 '이스케이프 시퀀스' 사용 

'\'은 역슬래시를 의미하며 키보드의 '￦' 의미 

이스케이프 문자	설명
\n	행 바꿈
\t	탭 문자
\\	역 슬래시
\'	작은 따옴표
\"	큰 따옴표