11. javascript - null, undefined 리터럴

 null 리터럴 

  - 예약어
  - 어떠한 객체도 나타내지 않는 특수한 값
  - 연산에 따라 값이 변환
         산술 연산 시 : 0
      문자열 연산 시 : "null"
         논리 연산 시 : false 


 undefined 리터럴 

  - 변수가 선언은 되었지만 값이 할당되지 않은 변수에 접근하거나, 
     존재하지 않는 객체 프로퍼티에 접근할 경우 반환되는 값
  - 연산에 따라 값이 변환
          산술 연산 시 : NaN
       문자열 연산 시 : "undefined"
          논리 연산 시 : false

 EX)

 var a;
 obj = {};
			
 document.writeln("a: " + a + '<br/>');
 document.writeln("obj: " + obj + '<br/>');  
 document.writeln("obj.prop: " + obj.prop + '<br/>');		
			
 obj = null;
 document.writeln("null 값을 할당한 obj: " + obj + '<br/>');
 document.writeln('<br/>');

 if(!a)
	document.writeln("변수 a 초기화 하세요 <br/>");
 if(!obj)
	document.writeln("obj는 참조하는 객체가 없습니다."); 

결과

10. javascript - boolean 리터럴

 Boolean 리터럴 

  - 참(true), 거짓(false) 값을 가짐
  - 조건식 비교의 결과로 값이 생성
  - 연산의 방법에 따라 값이 변환됨
       산술 연산 시 :  true = 1, false = 0
    문자열 연산 시 : true = "true", false = "false"
       논리 연산 시 : 0, undefined, null, NaN, "" = false

 EX)

 var  a = 0;
 var b = undefined;
 var c = null;
 var d = NaN;
 var e = "";
			
 document.writeln("!0 : " + !a + '&ltbr/&gt');  // true
 document.writeln("!undefined : " + !b + '&ltbr/&gt');  // ture
 document.writeln("!null : " + !c + '&ltbr/&gt');  // true
 document.writeln("!NaN : " + !d + '&ltbr/&gt');  // true
 document.writeln('!""' + !e + '&ltbr/&gt');  // true
 document.writeln('&ltbr/&gt');

9. javascript - 함수 리터럴, function Literal

 *함수 

  - 어떤 입력 값을 이용해 미리 정의된 로직을 처리하여 반환하는 것
  - 객체 프로퍼티에 할당될 수 있는, 실행 가능한 코드
  - 객체의 메소드 = 객체 프로퍼티에 저장된 함수 
  - 함수도 데이터 타입 중 하나로 다룰 수 있기 때문에 변수, 배열, 프로퍼티에 저장 가능 
      + 다른 함수의 전달 인자로 넘겨줄 수 도 있음

 함수 리터럴 

  - function 키워드에 이어 소괄호 에는 매개변수를, 대괄호 안에는 실행 코드와 return 문을 사용
  ( *반환값이 없는 return 문 or return 문이 없다면 : undefined 를 반환한다 )

 var add = function(n1, n2){   // function 키워드를 붙여 사용
     return n1 + n2;
 };

 EX)

 var add = function(n1, n2){
     return n1 + n2;
 };
 
 document.writeln("add(11,22)" + add(11,22) );

8. javascript - 객체 리터럴, object Literal

 * 객체 

    - 이름이 붙어 있는 값(프로퍼티)들의 모임
    - 프로퍼티에는 어떠한 값이라도 담을 수 있음
    - 프로퍼티 접근시 : 객체명. 프로퍼티 명;  or 객체명["프로퍼티 명"]; 
   
    - 함수가 프로퍼티에 저장될 경우 프로퍼티의 이름이 메소드 명이 됨
    - 객체의 메소드 호출시 : 객체명 . 메소드 명();       


 객체 리터럴 

    - 객체를 표현하는 방식
    - 중괄호 ( { } )로 전체를 감싸고 프로퍼티의 이름과 값을 콜론( : ) 으로 구분
    - 각 프로퍼티는 콤마( , )로 구분    

 // dog라는 객체 생성
 var dog = {
   name: "Bob",
   age : 3,
   color: "brown",
   weight: 15
};

7. javascript - 배열 리터럴, Array Literal

 * 배열 

   - 배열 내 데이터 값은 모든 데이터 타입 가능
   - 배열명[인덱스] 를 사용해 해당 원소의 값(=데이터 값) 을 가져오거나 변경할 수 있음
   - 배열 인덱스의 유효 범위 : 0 ~ 배열의 원소개수 -1 
   - 원소 개수는 length 프로퍼티에 접근하여 알아냄

 배열 리터럴 

  - 배열 생성 방식 중 하나로 콤마( , ) 로 구분한 값을 대괄호( [ ] )로 감싸서 표현

 var a = [];  // 빈 배열
 var b = [10, 20 ,30 ,40];
 var c = ["ABC", "DEF", "GHI"];
 var d = [[10, 20], [30, 40], [50, 60]];  // 배열을 원소로 갖는 배열

6. javascript - 문자열 리터럴, String Literal

 문자열 리터럴 

 - 유니코드 문자들을 ' ' or " " 로 둘러싸서 표현

 var str1 = 'hello!';  // ' ' 를 사용
 var str2 = "this is string";   // " " 를 사용

 - ' ' 로 만든 문자열 내에서는 " " 포함 가능
   " " 로 만든 문자열 내에서는 ' ' 포함 가능

 var str1 = ' 작은 따옴표로 만든 문자열은 큰 따옴표(")를 포함할 수 있다. '; // ' '로 만든 문자열
 var str2 = " 큰 타옴표로 만든 문자열은 작은 따옴표(')를 포함할 수 있다. ";  // " " 로 만든 문자열

 - 한 줄을 넘을 수 없음, 문자열 리터럴 내에서 줄 바꿈 표현시 이스케이프 시퀀스 중 ＼n 사용 

 var str = "첫번 째 줄 \n 다음 줄로 넘어갑니다. "; 
// But, 웹 페이지에서는 이스케이프 시퀀스 \n 대신 <br/> 태그를 사용해야 줄바꿈이 동작함.

* javascript - 이스케이프 시퀀스, Escape Sequence

 이스케이프 시퀀스 

이스케이프 시퀀스	의미	유니코드
＼0	널 문자	＼u0000
＼b	백 스페이스	＼u0008
＼t	수평 탭(tab)	＼u0009
＼n	줄 바꿈	＼u000A
＼v	수직 탭(tab)	＼u000B
＼f	새로운 페이지로 이동	＼u000C
＼r	현재 행의 처음으로 이동	＼u000D
＼"	큰 따옴표	＼u0022
＼'	작은 따옴표	＼u0027
＼＼	역 슬래시	＼u005C
＼xXX	두 개의 16진수 XX에 의해 지정되는 Latin-1 문자	-
＼uXXXX	네 개의 16진수 XXXX에 의해 지정되는 유니코드 문자	-

4. javascript - 리터럴, Literal

* 리터럴,Literal
 : 프로그램 코드 상에서 데이터 값을 표현하는 방식

 javascript의 리터럴 

  - 숫자 리터럴(Number Literal)
    
  - 문자열 리터럴(String Literal)

  - 배열 리터럴(Array Literal)

  - 객체 리터럴(Object Literal)

  - 함수 리터럴(Function Literal) 

  - boolean 리터럴

  - undefined / null 리터럴

5. javascript - 숫자 리터럴, Number Literal

숫자 리터럴 

  - 정수 리터럴 
     : 10, 16 진수로 표현
       * 16진수 리터럴: 0x 로 시작, 이어서 16진수 숫자를 붙여 표현
       *  8진수 리터럴: 0 으로 시작

  - 부동 소수점(floating point) 리터럴
     : 소수점을 가질 수 있음, 두 가지 표기법이 존재

       1) 실수 표기법
          : digits. digits

 var a = 11.22;
 var b = 3.14; 

       2) 지수 표기법
          : digits . digits (e | E) [(+ | -)digits]

 var a = 1.5e25; // 1.5 * 1025 
  var  b = 5.78E-21;  // 5.78 * 10-21

  * 모든 숫자 데이터는(정수, 실수 구분 X) typeof 연산 결과로 "number" 를 반환


 숫자 리터럴의 상수값
 

상수값	의미
Infinity	무한대를 나타냄 isFinite() 함수가 false 반환 = 무한대 == 비교연산 사용 가능
NaN (Not a Number)	숫자가 아님을 나타냄 == 비교연산 사용 못함 반드시 isNaN()함수 사용 : 숫자일 경우 = false / 숫자가 아닐 경우 = true (* typeof NaN 의 결과 = "number")
Number.MAX_VLAUE	숫자로 표현할 수 있는 가장 큰 수 정의
Number.MIN_VALUE	숫자로 표현할 수 있는 가장 작은 수 정의
Number.POSITIVE_INFINITY	양의 무한대
Number.NEGATIVE_INFINITY	음의 무한대

3. javascript - 변수, 데이터 타입

 변수 선언 

  - var 키워드 사용
   var 변수명 [=초기값];

   선언시 초기값 지정은 마음대로!
     ... 초기값 주지 않을 경우, 값을 저장할 때 까지 해당 변수는 undefined 상태

 var a;  // undefined 상태
 var b = 10;  

 데이터 타입 

 - 저장되는 값에 따라 변수의 타입이 결정됨

 var a = 10;
 b = "문자열";  // b의 데이터 타입: string
 b = 11;    // number로 데이터 타입이 바뀜

 - 기본형 값을 저장하는 데이터 타입 
   

number	정수, 실수 구분하지 않음
string	' ' " " 로 문자열 표현, 가변적
boolean	참(true), 거짓(false) 표현
null	어떠한 객체도 나타내지 않는 특수한 값
undefined	선언 되었지만 값이 할당되지 않은 변수에 접근하거나 존재하지 않는 객체 속성의 접근 할 때 반환되는 값

 - 참조 값을 저장하는 참조형 데이터 타입
    : 값 자체가 아닌 그 값을 가진 위치 정보를 가짐
    : 동적으로 할당, 필요 없을때 가비지 컬렉션(garbage collection)에 의해 메모리 회수

배열 arrray	데이터 값들의 모임 배열의 각 데이터 값은 0부터 시작하는 하나의 인덱스 번호를 가짐 각 데이터 접근 시 : 배열명.[인덱스번호]를 이용
객체 object	이름이 붙은 값(프로퍼티, Property)들의 모임 객체 프로퍼티 접근 시 객체명.프로퍼티 명 or 객체명[“프로퍼티 명”] 사용
함수 function	실행 가능한 코드

* 기본형/참조형 데이터 타입의 변수 선언 & 메모리 할당

  

  - 기본형 : 값을 그냥 저장

 var num= =10;
 var str = "javascript";

 

    

  



- 참조형 : 데이터를 저장하고 있는 공간의 주소 값을 저장 

 var arr = [10, 20, 30, 40];
 var point = { x: 100, y:200 };

2. javascript - 문장/식별자 규칙 , 주석

문장 규칙 

 - 문장 끝에 세미콜론 ; 을 붙인다
 - 대소문자 구분
 - 문장 내의 화이트 스페이스(탭, 공백, 줄바꿈)는 무시된다.


식별자 규칙

 - 첫번째 문자 : A-Z a-z _ $  ... 숫자 사용 불가
   나머지 문자 : A-Z a-z _ $ 0-9 
 - 예약어 사용 불가 


주석 

 : 코드에 대한 설명을 기술
  - 단일 행:  // 주석 처리할 내용 
  - 블록 : /*  주석 처리할 내용   */

예약어, reserved word

프로그래밍 언어 중 의미가 고정되어 있고, 

사용자가 작성하는 프로그램 상태에 따라 의미를 변경할 수 없는 단어.

해당 언어 특유의 규칙에 따라 의미가 고정되어 있어 프로그램 내에서 변수, 상수, 함수명으로 사용하지 못함.

ex)

  javascript의 예약어 : boolean break case if else typeof ..... 

파싱, Parsing

컴파일러 / 번역기가 원시 부호를 기계어로 번역하는 과정의 한 단계

각 문장의 문법적인 구성 , 구문을 분석하는 과정

1. javascript 시작!

 javascript ? 

- 웹 브라우저에 내장되어 있는 스크립트 언어
- 객체지향 프로그래밍 언어
- 인터프리터 방식
   : 번역, 실행을 런타임 때 모두 처리
- 동적이면서 약한 타입의 언어
   : 모든 변수 선언 시 var 키워드 사용, 변수의 값을 지정 후 타입이 지정됨

 동작 방식 

  1. 스크립트 코드 파싱 - 전역 스코프에 변수와 함수가 등록
  2. 스크립트 코드 실행
  3. 함수 호출
  4. 함수 파싱 - 함수 스코프에 매개 변수 등록
  5. 함수 실행

 기술 방식 

  - 인라인(Inline) 스크립트 방식 
     : html 페이지 내 <script> 태그 아래에 코드 작성
  - 외부 스크립트 방식
     : 코드를 외부 파일에 작성하고, <script> 태그의 src 속성 값으로 파일 명을 지정해줌


+++
   - 하나의 <script> 태그에서 인라인 / 외부 동시 작성 불가 
      src 속성을 사용해 외부 스크립트 방식을 사용했다면 인라인 스크립트의 내용은 무시됨.
   - <script> 태그는 <head> or <body> 태그 아래에 작성 가능

스크립트 언어, script language

스크립트 언어
 : 컴파일을 하지 않고, 작성 후 바로 실행 시킬 수 있는 언어


* 서버측 스크립트 언어
   : 어플리케이션 서버가 웹 서버 내 코딩해 놓은 파일을 직접 처리 후 브라우저로 보내줌
   : ASP(Active Server Page), PHP(Professional Hyperyext Preprocessor), JSP(Java Server Page)

* 클라이언트 측 스트립트 언어
   : 요청한 파일을 브라우저에 전송, 브라우저는 해당 파일 내의 스크립트 언어 해석해 페이지를 동적으로 만들어 줌
   : javascript, CSS, Ajax(Asynchoronous Javascript and XML)