javascript 문법

< 브라우저 개발자도구를 이용한 로그 출력 >

- console.log("message") [ IE9 이하는 작동하지 않을 수 있다]

:: var console = window.console || {log:function(){}; 를 상단에 추가하면 에러가 나지 않고 서비스가 가능.

- console.dir(object)

:: 지정한 객체를 콘솔 창에 보내고 객체 시각화 도우미에 표시

:: 시각화 도우미를 사용하여 콘솔 창에서 속성을 검사할 수 있다.

[ 기본 문법 ]

< 프로그램 구성 요소 >

* 키워드(Keyword)

:: 미리 정의된 단어들로 사용자가 다른 목적으로 사용될 수 없다.

:: 예약어(reserved word)라고 표현

:: 키워드로 정의되어 있는 것을 변수로 사용하면 javascript는 키워드로 인식하므로 변수의 역할을 할 수 없다.

* 식별자(Identifier)

:: 사용자에 의해 정의되고 사용되어 지는 것으로 Object명, 변수명이나 함수명 등을 들 수 있다.

:: 특수한 목적으로 사용되는 변수나 함수명은 다른 변수나 함수와 구분해야 하므로 자기만의 독특한 이름을 가져야 한다.

* 리터럴(Literals)

:: 변수는 프로그램 실행 중 변할 수 있는 값인 반면, 리터럴 또는 상수(Constant)는 변할 수 없이 고정되어 있는 값.

* 연산자(Operator)

:: 프로그램 수행 중 연산을 처리하기 위해 사용되는 것으로 산술연산자, 논리연산자, 비교연산자, 대입연산자 등이 있다.

* 주석(Comment)

:: 프로그램의 설명을 위해 들어가는 문장

:: 프로그램 실행 외에 아무런 영향을 주지 않음

:: 다른 사람이 프로그램을 이해하는데 도움을 주기 위해 사용

-단문주석( //내용)

-여러줄주석( /* 내용 */

* <!-- -->

:: 자바스크립트를 지원하는 브라우저를 제외한 다른 브라우저는 <script>태그를 무시하게되어 <script>태그 안의 코드가

그대로 화면에 나타나게됨

:: 이 주석태그를 이용하여 코드를 보이지 않게 한다.

* ,(콤마)

:: 변수 선언에서 연속적인 식별자들을 구분

* ()(괄호)

:: 함수 정의와 호출 시 매개변수 목록을 보유

:: 표현식 우선순위를 변경하기 위해 사용하거나 제어 문장과 자료형 변환에서 표현식을 수용한다.

* {}

:: 배열을 초기화하거나 함수,지역 영역(local scope)을 설정하기 위해 사용

* .(dot)

:: Object의 메소드나 속성을 접근하기 위해 사용

* []

:: 배열(matrix) 자료형을 정의하거나 매트릭스에 있는 값을 참조

* ;(semicolon)

:: 한 문장의 끝을 의미

:: 한줄에 여러 문장을 기술할 수 있고 생략가능

* 공백문자(white space)

:: 프로그램의 구성 요소를 구분하는 기능을 가짐

:: 공백에 space,tab문자 포함

< 상수(Literal) or 변수(Variable)>

* 상수

- 정수

:: 10진수형 : 숫자 0~9로 구성된 자연수

:: 8진수형 : 0~7로 구성되며, 상수 앞에 0을 붙임

:: 16진수형 : 0~9,A~F 이내로 구성되며 상수 앞에 0x 를 붙임

- 실수

:: 소수점 이하의 수치를 다룰 수 있는 숫자 자료형

- 논리형

:: 비교연산이나 논리연산에 사용되는 값인 참과 거짓을 나타내는 true,false 두 가지 값만을 갖는 자료형

- 문자열(String)

:: 0개 혹은 그 이상의 문자들로 구성된 "" 혹은 ''로 묶여진 문자들의 나열

:: 길이가 0개인 문자열도 존재할 수 있다.

- null

:: 지정되지 않은 값

:: 정의되지 않은 상태를 나타내는 값을 나타낼 목적으로 특수하게 사용되는 자료형

:: 값이 정해지지않은 변수의 값이나 prompt대화상자에서 취소 버튼을 눌렀을 때 반환되는 값 등을 나타내는데 사용

:: javascript의 null은 길이가 0인 문자열, 즉 ""와는 다르다.

* 변수

- 형식

:: var 변수명[= 초기값][, 변수명 ..]

- 변수 선언 예

:: var a, b;

:: var a = 1;

% 세미콜론은 생략 가능하나 일반적으로 붙여서 사용

- 변수, Object, 함수명 작성규칙

:: 알파벳이나 _ 로 시작해야 한다

:: 대문자와 소문자 구분

:: 스페이스, 콤마, 물음표, 인용부호 사용 불가능

:: 예약어 사용 불가능

:: 한글이름 사용 불가능

* 자바스크립트 데이터 타입

:: 기본타입과 참조 타입으로 구분

- 기본 데이터 타입

:: 숫자, 문자열, boolean, undefined, null

- 참조 데이터 타입

:: 객체, 배열

* undefined 와 null

:: 값이 비어있음을 나타냄

- undefined

:: 값이 저장되지(초기화되지) 않은 변수

:: 변수 자체의 값이 undefined

:: 타입이자 값

- null

:: 개발자가 명시적으로 값이 비어있음을 나타내는데 사용

:: 변수의 값은 결과가 null이 아니라 Object

:: 빈 객체를 참조하는 특별한 값

:: null타입의 변수를 확인해야할 때 typeof 연산자를 사용하지 않고 일치연산자(===)를 사용해 확인

< 자바스크립트 자료형 검사>

* typeof 연산자

:: 자료형을 확인 할 때 주로 사용

:: a = typeof( 값 );

< 자바스크립트 자료형 변환 >

* 자동 자료형 변환

:: 숫자와 문자열을 덧셈 연산 할 경우 문자열이 우선

:: 그 외 사칙 연산자는 숫자가 우선

* 숫자와 문자열 자료형 변환

:: 자동으로 자료형이 변환되는 것 이외에 강제로 자료형을 변환하는 방법

:: 문자열로 변환 - String()함수

:: 숫자로 변환 - Number()함수

var inputString = "123";
console.log(typeof(inputString)); // string
 
var numberInput = Number(inputString);
console.log(typeof(numberInput)); // number
 
var stringInput = String(inputString);
console.log(typeof(stringInput)); // string

* 불린 자료형 변환

:: 불린으로 변환 : Boolean()함수

:: 아래 5가지 제외한 모든 경우 true

:: 문자열 '0'과 문자열 'false'는 문자열이므로 true

b = Boolean(0); 
b = Boolean(NaN);
b = Boolean('')
b = Boolean(null);
b = Boolean(undefined);

 

< 연산자 >

* 산술 연산자 

- + : 덧셈 연산자

- - : 뺄셈 연산자

- * : 곱셈 연산자

- / : 나눗셈 연산자

- % : 나머지 연산자

- - : 부호의 반전

- ++ : 증가 연산자

- -- : 감소 연산자

* 문자열 결합 연산자

:: 문자열을 대상으로 하는 기본적인 연산자 기능은 병합

- + : 두개의 피 연산자 문자열을 병합한 문자열이 결과

- += : 문자열 병합기능을 가진 대입 연산자

* 비교 연산자

:: 오퍼랜드가 두 개인 이항 연산자로 수식을 오퍼랜드로 취하여 결과 값이 참인 경우 true, 거짓이면 false를 반환

- < : ~보다 작다

- <= : ~보다 작거나 같다

- > : ~보다 크다

- >= : ~보다 크거나 같다

- == : ~와 같다

- === : 동치

- != : ~와 같지 않다

- !== : 동치 아님

* 논리 연산자

- && : AND(논리곱)

- || : OR(논리합)

- ! : NOT(논리 부정)

* 비트 연산자

- ~ : 해당 비트를 반전( 0->1, 1->0)

- & : 비트 단위 AND

- | : 비트 단위 OR

- ^ : 비트 단위 Exclusive OR

- >> : 산술적 우측 Shift 연산자

- << : 산술적 좌측 Shift 연산자

- >>> : 논리적 우측 Shift 연산자

* 대입 연산자

:: 대입 연산자 '='는 좌우의 값이 서로 같다(equal)는 수학적인 의미가 아닌, 우측의 값을 좌측에 대입(assign) 한다는 의미를 갖고 있다.

- = : 우변의 값을 좌변에 대입

- += : 덧셈 연산자

- -= : 뺼셈 연산자

- *= : 곱셈 연산자

- /= : 나눗셈 연산자

- %= : 나머지 연산자

- <<= : 산술적 좌측 Shift 연산자

- >>= : 산술적 우측 Shift 연산자

- >>>= : 논리적 우측 Shift 연산자

- &= : 비트 단위 AND

- ^= : 비트 단위 Exclusive OR

- |= : 비트 단위 OR

*  조건 연산자 

:: 삼항 연산자 또는 선택연산자라 한다.

:: 자바 언어중 유일하게 피연산자(operland)가 3개 필요한 연산자

- 형식

:: 변수 = 조건식 ? 값1 : 값2;

:: 조건이 참이면 값1, 거짓이면 값2를 갖는다

< 문장 및 제어 구조 >

* if문

:: 다음 조건이 참일 경우 특정 문장을 수행하고자 할 때 사용되는 문장

//[형식1
 
if(조건식)
    문장1;
    문장2;
 
:: 조건식이 만족할 경우 문장1을 수행한 후 문장2를 수행
만족하지 않을 경우 문장2를 수행
조선식이 만족할 때 수행되는 문장1이 두개 이상이 오면 중괄호로 묶어서 블록 처리
 
// 형식2
 
if(조건식)
    문장1;
else
    문장2;
문장3;
 
:: 조건식이 만족하는 경우 문장1을 수행한 후 문장3을 수행
만족하지 않을 경우 문장2를 수행한 후 문장3을 수행
문장1이나 문장2가 두개 이상이 오면 중괄호로 묶어서 블록 처리
 
// 형식3
 
if(조건식1)
    문장1;
else if(조건식2)
    문장2;
else
    문장3;
 
문장n
 
:: 조건식1이 참이면 문장1 수행하고, 거짓일 경우 조건식2로 넘어간다
조건식2가 참이면 문장2를 수행하며, 모두 만족하지 않을 시 문장3을 수행
모든 조건 수식을 수행한 후 문장n을 수행\

* switch~case문

:: 다중 선택문이라 하고 switch문 다음의 수식 값에 따라 실행 순서를 여러 방향으로 분기할 때

사용되는 문장

// 형식1
 
switch(수식){
    case 상수 1 : 문장1; break;
    case 상수 2 : 문장2; break;
    default : 문장 n; break;
 
:: 수식 결과값과 case문의 상수가 일치하는 곳의 문장을 실행
:: 만족하는 상수가 없으면 default의 문장n을 수행
:: break가 case문 뒤에 없을 경우 다음 case문의 문장을 계속해서 수행

* while문

:: 조건식을 먼저 비교하여 조건식이 참일 경우 특정 영역을 반복 수행하는 문장

:: 반복 횟수가 정해져 있지 않거나 반복횟수가 많은 경우 사용

// 형식1
 
while(조건식){
    
    실행문;
}
 
:: 실행문이 하나인 경우 중괄호 생략 가능
:: while(true)와 같이 조건식을 true로 설정하면 무한루프(infinite loop)가 된다.
:: 조건식이 거짓일 경우 한 번도 수행하지 않는다.

* do ~ while문

:: 특정한 영역을 반복 수행하는 반복문으로 조건식을 나중에 비교

// 형식1
 
do {
    실행문;
 }
while(조건식);
 
:: 실행문을 먼저 수행한 후에 조건식을 비교하기 때문에 조건식을 만족하지 않아도 
루프의 몸체에 해당하는 실행문은 적어도 한번은 실행

* for문

:: 정해진 횟수만큼 반복해야 하는 경우 유용하게 사용되는 반복문

:: 반복 실행해야 하는 실행문이 하나인 경우 중괄호 생략 가능

// 형식1
 
for(수식1; 수식2; 수식3){
    실행문
}
 
:: 수식1은 루프 변수의 초기화를 위해 사용되어지며 한 번만 실행되며 ,(콤마)를 이용해 동시에 여러 
변수의 초기 값을 설정할 수 있다.
 
:: 수식2는 조건식을 나타내는 것으로 수식2가 만족하면 루프를 반복 수행하며 
수식2가 참이면 실행 문을 실행하고 수식3을 실행한 후 수식2의 조건식을 검사한다.
처음에 수식2가 거짓이면 for문은 루프를 한 번도 실행하지 않는다.
 
:: 수식3은 루프 변수의 재초기화를 위해 사용되어지며 ,(콤마)를 이용해 여러 문장을 동시에 수행할 수 있다.
:: for(;;;)처럼 조건식에 아무것도 기술하지 않으면 무한루프가 된다.

* break문

:: 반복문이나 switch문 내의 블록으로부터 제어가 빠져나오기 위해서 사용되어진다.

:: break ;

:: while, do~while,for,switch문과 함께 사용되어지며 반복문에 사용되는 경우 한 번에 하나의 반복문을 빠져나올 수 있다.

:: if()문에 의한 블록에서는 적용되지 않는다.

* continue문

:: 반복문(while,do~while,for) 와 함께 사용됨

:: 반복문의 제어식(조건)으로 실행제어를 옮기는 문장

:: continue;

:: 반복문 실행도중 continue문을 만나면 반복 구역 중 continue문 이후의 문장은 수행되지 않고 조건식으로 제어를 옮긴다.

:: 한 번에 하나의 반복문의 제어식으로 실행 제어를 옮긴다.

* return문

:: 함수의 실행을 끝내고 함수의 호출한 부분으로 되돌려주기 위해 사용됨

:: return; OR return 반환값;

:: 함수내의 나머지 부분의 실행과 상관없이 함수의 실행을 강제로 종료하고 제어를 호출한 쪽으로 

넘기기 위해 사용되어 진다.

:: return이 생략된 경우 메서드의 마지막 문장을 수행한 후 제어권을 넘긴다.

:: return 반환값;은 반환될 내용을 호출한 곳으로 반환한 후 제어를 호출한 쪽으로 넘긴다.