ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 자바 스크립트
      프로그래밍 언어/규격 2011. 10. 3. 21:48
      the scripting language of the WWW
      JavaScript, aka Mocha, aka LiveScript, aka JScript, aka ECMAScript

      a object-oriented general-purpose programming language

      JavaScript는 Netscape에서 Brendan Eich (Mozilla의 공동설립자로 현재는 CTO로 있습니다.)가 90년대 초에 웹페이지를 다이나믹하게 하기 위해서 만들었다.

      Netscape가 JavaScript를 Ecma International 에 제출하게 되고 1996년 11월에 ECMA-262를 위한 스펙을 제정하는 작업에 들어갔으며 1997년 7월에 첫번째 에디션

      1995년
      넷스케이프 네비게이터 2.0에서 1.0

      1996년
      ECMA스크립트 1.1
      Netscape 3.0에서 1.1
      Internet Explorer 3.0 JScript

      DOM Level 0
      document
      .images[]
      .forms[]

      1997년
      1.2
      Netscape 4.0, IE 4
      document
      .layers[] // 넷스케이프 네비게이터 4.0
      .all[] // 인터넷 익스플로러 4.0

      DHTML
      (X)HTML
      CSS
      자바스크립트

      비표준 확장 모드(quirks mode)
      DOCTYPE

      HTML 4.0

      1998년
      W3C DOM Level 1
      e.g. var xpos = document.getElementById('myelement').style.left

      SpiderMonkey는 Netscape에서 Brendan Eich가 C로 구현한 JavaScript의 첫번째 인터프리터였으며 지금도 파이어폭스와 Adobe의 제품들에서 사용되고 있다.

      1999년
      마이크로소프트는 CSS와 새 W3C DOM 표준을 잘 지원하는 익스플로러 5를 출시했다

      1999년 말
      ECMA-262 Edition 3; ES3
      정규표현식
      try/catch를 통한 예외처리

      현재의 대부분의 브라우저가 지원

      2000년
      DOM Level 2
      getElementById()
      이벤트 모델

      2002년 Tantek Çelik이 박스 모델 핵

      CSS로 표현하기 어려운 부분은 자바스크립트와 DOM을 사용하자.
      브라우저의 지원 문제로 원하는 CSS를 사용할 수 없다면 자바스크립트와 DOM이 대안이 될 수 있다. 

      2005년 인터넷 익스플로러 7의 베타 버전

      2009년
      ECMA-262의 5번째 Edition; ES5

      ES 2015 (ES6)


      if (document.getElementById) {
         var element = document.getElementById('MyId');
      }
      else {
         alert('Your browser lacks the capabilities required to run this script!');
      }


      <head>
      <script type="text/javascript">
      ..
      </script>
      /*
      <SCRIPT LANGUAGE = "JavaScript">
      <!--
          ..
      // -->
      </SCRIPT>
      */
      <script type="text/javascript" src="file.js"></script>
      </head>

      주석
          /* .. */
          // ..

      문자열 상수
          '..'
              \'


      JavaScript 언어는 입출력 개념이 없다

      외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존


      변수 (Variables)

      새로운 변수는 var 키워드로 선언


      연산자 (Operators)

      산술 연산자

      +, -, *, /, %(나머지 연산자), ++, --; 할당연산자: =, += 와 -=

      문자열 연산자

      +(문자열 이어붙이기), +=


      문자열에 어떤 수 (또는 다른 값)를 더하면 일단 모두 문자열로 바뀐다

      빈 문자열에 어떤 값을 더하는 것은 해당 값을 문자열로 바꾸는 요령

      비교

      문자열과 수 양쪽 모두에서 동작


      <, >, <= 와 >=

      상동

      이중 등호 (==) 연산자, !=

      서로 다른 타입을 줄 경우 타입 강제 변환을 수행

      삼중 등호 연산자 (===), !==

      값을 비트로 취급하는 연산자

      && 와 || 연산자

      삼중 연산자

      ?:


      if ( typeof a == "undefined" ) ..


      타입

      숫자 (Number)

      부울 (Boolean)

      {true | false}

      false, 0, 빈 문자열 (""), 수가 아님을 뜻하는 NaN, null, 와 undefined은 모두 false

      Boolean()

      if 문과 같이 부울값이 필요한 경우를 만나게되면 자동으로 변환

      부울 연산자

      ! (논리적 부정)

      객체 (Object)

      이름-값 쌍(name-value pairs)의 모임

      Python의 Dictionaries

      Perl 과 Ruby의 Hashes

      C 와 C++ 의 Hash tables

      Java 의 HashMaps

      PHP의 Associative arrays

      "이름" 부분은 JavaScript 문자열

      값은 객체를 포함하여 아무 JavaScript 값


      문자열 (String)

      함수 (Function)

      배열 (Array)

      날짜 (Date)

      정규식 (RegExp)

      수학(Math)

      널 (Null)


      Window

      Document

      Form

      정의되지않음 (Undefined)


      숫자 (Numbers)

      이중정밀도 64비트 형식 IEEE 754 값


      덧셈, 뺄셈, 계수 (또는 나머지) 연산을 포함하는 표준 산술 연산자

      문자열을 정수로 변환

      parseInt("123", 10)

      NaN ("Not a Number" (수가 아님)을 줄인 약자)

      isNaN()

      Infinity

      -Infinity


      문자열 (Strings)

      유니코드 문자들


      빈 문자열에 어떤 값을 더하는 것은 해당 값을 문자열로 바꾸는 요령


      .length

      .charAt()

      .replace()

      .toUpperCase()


      * 배열 (Arrays)

      .length


      > var a = new Array();

      > a[0] = "dog";

      > a[1] = "cat";

      > a[2] = "hen";


      > var a = ["dog", "cat", "hen"];

      > a[100] = "fox";



      for (var i = 0, len = a.length; i < len; i++) {

          // a[i] 로 뭔가를 수행

      }


      for (var i = 0, item; item = a[i]; i++) {

          // item 으로 뭔가를 수행

      }



      * 제어 구조

      && 와 || 연산자는 첫번째 식을 평가한 결과에 따라서 두번째 식을 평가를 실행하는 단축평가(short-circuit) 논리를 사용

      Be mindful though when using && with code that has side effects


      the operators && and || in Javascript, is that they do not return a boolean value (true or false), but the value of the last operand they evaluate


      객체에 접근하기 전에 null 객체인지, 아닌지를 검사

      var name = o && o.getName();

      기본 값 설정

      var name = otherName || "default";

      삼중 연산자

      ?:

      숫자나 문자열을 기반으로 다중 분기되는 문장



      Prototype.js

      JQuery



      다트

      다트2js

      커피스크립트

      레드햇 세이론

      마이크로소프트 타입(Type)스크립트


      - 모질라
      asm.js
      - 구글
      포터블 NaCl(PNaCl)
      c.f. 페퍼JS(pepper.js)
      네이티브클라이언트(NaCl)



      참조 사이트:

      http://blog.outsider.ne.kr/643

      https://developer.mozilla.org/en-US/docs/JavaScript/Guide

      https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript





      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바