ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JS] 0.JavaScript
    Dev_Study/JavaScript 2021. 6. 16. 20:15
    반응형
    JavaScript란?
    비공식 자바스크립트 로고

    프로그래밍 패러다임 
    : 스크립트 언어,
                                  객체 지향 프로그래밍(프로토타입 기반 프로그래밍),
                                  명령형 프로그래밍,
                                  함수형 프로그래밍,
                                  사건 기반 프로그래밍

    설계자 : 브렌던 아이크
    개발자 : 넷스케이프,모질라 재단,Ecma 인터내셔널
    발표일 : 
    1995년12월 4일
    최근 버전 :
    ECMAScript 2020
    최근 버전 출시일 : 2020년 6월
    파일 확장자 : .js / .mjs


    자바스크립트( JavaScript )는 객체 기반 스크립트 프로그래밍 언어이다.
    이 언어는 
    웹 브라우저 내에서 주로 사용하며,
    다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
    또한 
    Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.
    자바스크립트는 본래
    넷스케이프 커뮤니케이션즈 코퍼레이션 브렌던 아이크(Brendan Eich)가
    처음에는 모카(Mocha)라는 이름으로,
    나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며,
    최종적으로 자바스크립트가 되었다.
    자바스크립트 
    썬 마이크로시스템즈 자바 구문이 유사한 점도 있지만,
    이는 사실 두 언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이고,
    자바와 자바스크립트는 직접적인 관련성이 없다.
    이름과 구문 외에는 자바보다 
    셀프 스킴과 유사성이 많다.
    자바스크립트는 ECMAScript의 표준 사양을 가장 잘 구현한 언어로 인정받고 있으며
    ECMAScript 5 (ES5)까지는
    대부분의 브라우저에서 기본적으로 지원되었으나
    ECMAScript 6 이후부터는 브라우저 호환성을 위해 
    트랜스파일러로 컴파일된다.

    HTML과 자바스크립트

    HTML은 < > 태그로 엘리먼트(element)를 정의한다면,
    이러한 HTML의 <body> Hello, World! </body> 엘리먼트에
    일대일 대응하는 자바스크립트(ECMA스크립트)는

    document.body.innerText = "Hello, World!";

    처럼 정의된다.
    여기서처럼 HTML과 자바스크립트 간에는
    광범위한 호환성을 보장하는 동전의 양면성 같은 구조를 엿볼 수 있는데,
    이것이 가능한 것은 DOM 때문이라고 말할 수 있다.

    한편 자바스크립트는 HTML과의 연동관계에서
    HTML의 로딩시점 또는 초기화와 관련된
    즉시 실행 함수(Immediately invoked function expression)를 제공한다.

    프로그래밍 언어
    한편 자바스크립트에서 사용되는 기초적인 문법의 개념으로는
    속성 메소드를 갖는 객체(오브젝트) 개념이 있으며,
    변수 선언, 함수 정의, 연산자 그리고 제어문등을
    이 프로그래밍 언어의 주요 개념으로 언급할수 있을뿐만아니라
    이 언어가 속한 
    객체 지향 프로그래밍언어(OOP)의 공통적인 주요 개념이기도 한다.

    HTML에 자바스크립트 작성하는법

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
        <title>자바스크립트 페이지</title>
        <!-- <script>태그 사이에 자바스크립트를 작성한다 -->
        <script type="text/javascript">
          function clickTest(){
          	console.log('clickTest function!');
           	alert('clickTest function!');
          }
        </script>
      </head>
      <body>
        <input type="button" value="테스트 버튼" onClick='clickTest()'/>
      </body>
    </html>

     


    자바스크립트 자료형( Primitive )

    ECMAScript표준 기본 자료형 해당 값
    Boolean 참(true), 거짓(false)
    Null 존재하지 않거나 유효하지 않은 주소
    Undefined 값이 할당되지 않은 경우
    Number 이중정밀 64비트 부동소수점 형식(IEEE 754)의
    숫자 데이터 유형
    String 문자를 표현하는 데 사용되는, 문자 열 시퀀스이다.
    Symbol ( ECMAScript6에 추가됨 ) 익명의 객체 속성(object property)을 만들 수 있는
    특성을 가진 원시 데이터 형식(primitive data type)

    자바스크립트 문법

    1. 대소문자를 구별하며 유니코드 문자셋을 이용합니다.

       따라서 다음과 같은 코드도 유효합니다.

    var 갑을 = "병정";
    var Früh = "foobar"; // Früh: 독일어로 "이른"

     

    2. 주석은 공백처럼 행동하며 스크립트 실행 시 버려집니다.

    // 한 줄 주석
    
    /* 이건 더 긴,
     * 여러 줄 주석입니다.
     */
    
    /* 그러나, /* 중첩된 주석은 쓸 수 없습니다 */ SyntaxError */

     

    3. 변수 선언

    JavaScript의 선언에는 3가지 방법이 있습니다.

    -var : 변수를 선언. 추가로 동시에 값을 초기화.

    -let : 블록 범위(scope) 지역 변수를 선언. 추가로 동시에 값을 초기화.

    -const : 블록 범위 읽기 전용 상수를 선언.

     

    var a;
    console.log("a 값은 " + a); // "a 값은 undefined"로 로그가 남음.
    
    console.log('b 값은 ' + b); // b 값은 undefined
    var b;
    
    console.log("c 값은 " + c); // ReferenceError 예외 던짐
    
    let x;
    console.log('x 값은 ' + x); // x 값은 undefined
    
    console.log('y 값은 ' + y); // ReferenceError 예외 던짐
    let y;

    undefined를 사용하여 변수값이 있는지 확인할 수 있습니다.

    아래 코드에서, input 변수는 값이 할당되지 않았고 if문은 true로 평가합니다.

    var input;
    if(input === undefined) {
      doThis();
    } else {
      doThat();
    }

     

    4. 변수 범위( scope )

    어떤 함수의 바깥에 변수를 선언하면,

    현재 문서의 다른 코드에 해당 변수를 사용할 수 있기에 전역 변수라고 합니다.

    만약 함수 내부에 변수를 선언하면,

    오직 그 함수 내에서만 사용할 수 있기에 지역 변수라고 부릅니다.


    자바스크립트 가이드

     

    문법과 자료형 - JavaScript | MDN

    이 장은 JavaScript의 기본 문법과 변수 선언, 자료형 및 리터럴을 다룹니다.

    developer.mozilla.org


    이 글은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0에 따라
    공개된 위키백과 문서
    https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8의 자료를 사용합니다.

     

     

    반응형

    'Dev_Study > JavaScript' 카테고리의 다른 글

    [JS] 객체 ( Object )  (0) 2021.03.10
    [JS] 배열 ( Array )  (0) 2021.03.10
    HTML DOM 메소드  (0) 2021.03.04
    BOM - Window  (0) 2021.03.04
    HTML DOM ( Document Object Model )  (0) 2021.02.19

    댓글

Designed by Tistory.