Back Ground

JavaScript 핵심요약 본문

Javascript

JavaScript 핵심요약

Back 2017. 12. 22. 11:00

JavaScript 핵심 요약





1.1 JavaScript의 역사


-javascript는 1955년에 Brendan Eich가 발명.
ECMA가 1997에 표준화


ECMAScript Editions

ECMAScript는 자바스크립트의 토대를 구성하는 스크립트 언어입니다. ECMAScript는 ECMA International 표준화 기구에 의해서 ECMA-262 및 ECMA-402 스펙에서 표준화되었습니다. 다음은 현재까지 승인됐거나 작업 중인 ECMAScript 표준입니다:

이름링크출시 날짜설명
현재판
ECMA-262 2017 (ES 8)Working draft, repository2017ECMAScript 2017 (제8판), 현재 진행 중인 작업.
ECMA-402 4.0Working draft, repository2017ECMAScript 국제화 API 4.0, 현재 진행 중인 작업.
폐기(Obsolete)/역사판
ECMA-262 (ES 1)PDFJune 1997ECMAScript 표준 원본.
ECMA-262 (ES 2)PDFAugust 1998ECMAScript 표준 제2판; 또한 ISO 표준 16262.
ECMA-262 (ES 3)PDFDecember 1999ECMAScript 표준 제3판; JavaScript 1.5에 해당.
errata 참조
ECMA-262 (ES 5)PDFDecember 2009ECMAScript 제5판
ES5 errata 및 ECMAScript 5 support in Mozilla 참조
ECMA-357PDFJune 2004ECMAScript for XML (E4X).
E4X errata 참조.
ECMA-357 Edition 2PDFDecember 2005ECMAScript for XML (E4X).
ECMA-262 (ES 5.1)PDF, HTMLJune 2011이 판은 국제화 표준 ISO/IEC 16262:2011 제3판과 완전히 정렬됨.
ES5 errata 수정 포함, 새로운 기능은 없음.
ECMA-402 1.0PDF, HTMLDecember 2012ECMAScript 국제화 API 1.0.
ECMA-262 2015 (ES 6)PDF, HTMLJune 2015ECMAScript 2015 (제6판).
ECMA-402 2.0PDFJune 2015ECMAScript 국제화 API 2.0.
ECMA-262 2016 (ES 7)HTMLJune 2016ECMAScript 2016 (제7판). 지금 기능은 멈춤. 나중(올해 6월)에 승인될.
ECMA-402 3.0HTMLJune 2016ECMAScript 국제화 API 3.0. 나중(올해 6월)에 승인될.

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/%EC%96%B8%EC%96%B4_%EB%A6%AC%EC%86%8C%EC%8A%A4






1.2 출력과 입력


■ 출력
  • window.alert("출력할 내용")          - 브라우져의 경고창에 출력
  • console.log("출력할 내용")            - 브라우져의 콘솔에 출력
  • document.write("출력할 내용")       - HTML 페이지에 출력
  • 태그이름.innerHTML = 출력할 내용 - HTML 페이지에 태그의 내용변경
■ 입력
  • window.confirm("메세지") - 확이창 입력.   예(true) / 아니오(false) 버튼
  • window.prompt("제목","내용") - 입력한 내용을 문자열로 반환
                                              아무것도 입력안하면, ""(화면버튼) 또는  null(취소버튼)




1.3 자료형 (Data Types)

- type 연산자로 변수나 리터럴의 타입을 확인할 수 있다.
  (객체의 타입을 확인할 때는 instanceof 연산자 사용)

- type로 평가되는 값 : false가 아닌값 전부.
  false로 평가되는 값 : 0, -,0 "", null, false, NaN, undefined

※ 연산자의 결과가 false라면, false로 평가되는 값이다.

기본형

 숫자형

 number

 123, 0, -1, 3.14, 1. 4e3

 문자형

 string

 "abc", '123', '1', "" 

 논리형

 boolean 

 false, true

 기타

 null undefined

 null, undefined 

 파생형 

 object Function

  • 모든 객체의 타입의  object
  • 배열, 함수도 객체다
    하지만 함수의 타입은 function(object가 아님)


1.3-2 자료형 (Data Types) - 실습


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
</head>
<body>
    <h2>typeof로 타입 확인하기</h2>
    <p id="demo"></p>
    <script>
        document.getElementById("demo").innerHTML = 
        typeof "john" + "<br>" + <!-- String -->
        typeof 3.14 + "<br>" + <!-- number -->
        typeof NaN + "<br>" + <!-- number -->
        typeof false + "<br>" + <!-- boolean -->
        typeof [1,2,3,4] + "<br>" + <!-- object -->
        typeof {name: 'john',age:34} + "<br>" + <!-- object -->
        typeof new Date() + "<br>" + <!-- abject -->
        typeof function(){} + "<br>" + <!-- function -->
        typeof myCar + "<br>" + <!-- undefind -->
        typeof null + "<br>" + <!-- object -->
    </script>
</body>
</html>
 
cs






1.4 동적 타입 (Dynamic Type)

 ※생성전에는 진행되지 않는 타입

 - Javascript에서 변수의 타입은 동적으로 결정된다.

 - 값이 저장되지 않는 변수의 타입과 undefined
   
var x; //x의 타입은 undefined, 값도 undefuned



- 값이 저장되어야 변수의 타입이 결정된다.
x =10; //x의 타입은 number, 값은 10



- 다른 타입의 값이 저장되면, 변수의 타입이 바뀐다.

x ="abc"; //x의 타입은 string, 값은 "abc"





1.5 호이스팅 (hoisting)

- 변수나 함수의 선언이 해당 범위(scope)에서 최상단으로 옮겨지는 것
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
num = 6;  //(var 생략)
console.log(num); //6
console.log(num2);
 
/*변수 선언*/
var num; // OK
var num2 = 10;
console.log(num2); // 10
 
 
catName("Chloe"); // OK (생성되지 않은 함수를 먼저 불러도 사용이 가능하다.)
 
/*함수 선언*/
function catName(name){
 console.log("cat's name =" + name);
}
cs

 

 ↓

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var num = 6;  // OK
var num = 2; 
 
function catName(name){
 console.log("cat's name =" + name);
}
 
num = 6;
 
console.log(num); //6
console.log(num2);//undefined
 
 
var num2 = 10;
console.log(num2); // 10
 
catName("Chloe"); // OK 
cs







1.6 변수의 범위 (scope)


- 전역 변수(window의 속성)의 선언(window는 브라우져를 의미)

1
2
3
4
5
6
7
<script>
    var x = 10; //전역변수 x 선언
    var x = 5;  //중복선언 가능. 마지막 선언만 유효
    x = 3; //var x = 3; 과 동일
    console.log(x);        //3
    console.log(window.x); //3
</script>
cs




- 지역 변수의 선언(블럭범위는 없음)

1
2
3
4
5
6
7
8
9
10
11
12
function sum(a,b){//매개변수는 배열,함수 도 받을 수 있다.
    var result = 0; //지역변수
    gResult = 0;    //전역변수 window.gResult = 0 ;
    
    // i는 지역변수. for문 밖에서도 유효
    for(var i=0; i<arguments.length; i++)
        result += arguments[i];
    console.log(i); //OK
}
 
console.log(result); //에러
console.log(gResult);//OK
cs

함수 안에서만 선언되면 전역으로 쓸 수 있다. 





1.7 형변환 (Type conversion)
- 숫자로 변환할 때 사용하는 함수 : Number(), parseInt(), parseFloat()

1
2
3
4
5
6
7
8
9
10
11
12
var x = Number(true);       // x = 1
var x = Number("true");     // x = NaN
var x = Number("123");      // x = 123
var x = Number("123px");    // x = NaN
                                 
var x = parseInt(true);     // x = NaN
var x = parseInt("123");    // x = 123
var x = parseInt("123px");  // x = 123
var x = parseInt("-1e3");   // x = -1    (-1e3 = -1의 10의3제곱  [즉, 0 자릿수 3자리]  )
                                 
var x = parseFloat("-1e3"); // x = -1000 (-1e3 = -1의 10의3제곱  [즉, 0 자릿수 3자리]  )
var x = parseFloat("1");    // x = 1
cs



- 문자열로 변환할 때 사용하는 함수 : String()

1
2
3
4
5
6
7
8
var x = String(123);      // x = "123"
var x = 123+"";           // x = "123"
var x = 123.toString();   // ERROR
 
var v = 123;
var x = v.toString();     // x = "123"
                                 
 
cs



- boolean으로 변환할 때 사용하는 함수 : Boolean(), !!
1
2
3
4
var x = Boolean(123);   //true
var x = Boolean(0);     //false
var x = Boolean("0");   //true
var x = !!123           //true
cs




'Javascript' 카테고리의 다른 글

객체 지향 프로그래밍(생성자와 프로토타입)  (0) 2018.10.04
Date, RegExp 객체  (0) 2018.10.04
javascript 파일 압축 및 복원하기 (***.min.js 파일 만들기)  (0) 2017.05.30
구문  (0) 2016.09.08
javascript 용어  (0) 2016.08.29
'Javascript' Related Articles more
Comments