4 분 소요

2022. 05. 12. 수업내용 정리

시작(기본적인 소개…)


  • 자바스크립트

    자바스크립트는 객체(object) 기반의 스크립트 언어입니다.

    HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하여, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.

    자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.

    현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.

  • 자바스크립트의 역사

    자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어졌습니다.

    처음에는 모카라는 이름으로 개발되었으나, 그 후에 라이브스크립트(LiveScript), 최종적으로는 자바스크립트(Javascript)라는 이름으로 변경됩니다.

  • 자바스크립트의 특징

    자바스크립트가 가지고 있는 언어적 특징은 다음과 같습니다.

    1. 자바스크립트는 객체 기반의 스크립트 언어입니다.
    2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다.
    3. 자바스크립트는 객테 지향형 프로그래밍 함수형 프로그래밍을 모두 표현할 수 있습니다.

    ★ 인터프리터 언어 vs 컴파일러 언어

    컴파일러 언어 인터프리터 언어
    코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신 코드로 변환한 후 실행한다. 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간코드인 바이트코드로 변환한 후 실행한다.
    실행 파일을 생성한다. 실행 파일을 생성하지 않는다.
    컴파일 단계와 실행단계가 분리되어 있다.
    명시적인 컴파일 단계를 거치고, 명시적으로 실행 파일을 실행한다.
    인터프리터 단계와 실행 단계가 분리되어 있지 않다.
    인터프리터는 한 줄씩 바이트코드로 변환되고 즉시 실행한다.
    실행에 앞서 컴파일은 단 한 번 수행한다. 코드가 실행될 때마다 인터프리트 과정이 반복 수행된다.
    컴파일과 실행 단계가 분리되어 있으므로 코드 실행 속도가 빠르다. 인터프리트 단계와 실행 단계가 분리되어 있지 않고 반복 수행되므로 코드 실행 속도가 비교적 느리다.



  • 자바와 자바스크립트

    두 언어는 서로 직접적인 관련은 없으며, 두 언어 모두 C언어 기반으로 만들어졌기에 문법상 비슷한 부분이 있는 것을 제외하고는
    다른 점이 훨씬 많습니다.

    자바 자바스크립트
    컴파일 언어 인터프리터 언어
    타입 검사를 엄격하게 함. 타입을 명시하지 않음.
    클래스(class) 기반의 객체 지향 언어 프로토타입(prototype) 기반의 객체 지향 언어



  • 자바스크립트 표준

    1996년에 넷스케이프(Netscape)는 자바스크립트를 국제 표준안으로 만들기 위해 ECMA(European Computer Manufacturers Assocation)에 제출합니다.

    그 결과 ECMA는 ECMAScript라는 새로운 표준을 제정하였고, 그 첫번째 버전인 ECMA-262를 1997년에 공표합니다.

    ECMAScript는 자바스크립트뿐만 아니라 마이크로소프트의 JScript나 어도비의 액션스크립트도 따르는 국제 표준이 됩니다.

    현재 자바스크립트의 최신 표준은 2015년에 발표된 ECMAScript6 입니다.

    자바스크립트에 대한 최신 표준 (참조)

    Standard ECMA-262 : ECMAScript 2017 Language Specification 8th edition (June 2017) =>

    자바스크립트에 대한 더 자세한 설명

    MOZILLA DEVELOPER NETWORK : JavaScript =>

  • 자바스크립트 문법

    실행문은 세미콜론(;)으로 구분됩니다.

    var x = 10;
    var result = x + 3;
    


    자바스크립트는 대소문자를 구분합니다.

    자바스크립트에서 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확히 구분해서 사용해야 합니다.

    var javascript = 10;// 변수 javascript와 Javascript는 서로 다른 두 개의 변수로 인식됨.
    var Javascript = 20;
    Var Script = 30; // 변수의 선언은 'var'키워드로만 할 수 있으며, Var로는 동작하지 않음.
    



  • 리터럴

    리터럴은 직접 표현되는 값 그 자체를 의미합니다.

    다음 예제에서 등장하는 값들은 모두 리터럴입니다.

    12 // 숫자 리터럴
    "javascript" // 문자열 리터럴
    '안녕하세요' // 문자열 리터럴
    true // 불리언 리터럴
    



  • 식별자(identifier)

    식별자는 변수나 함수의 이름을 작성할 때 사용되는 이름을 의미합니다.

    자바스크립트에서 식별자는 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용할 수 있습니다.

    식별자는 숫자와 구별이 쉽도록 숫자로는 시작할 수 없습니다.

    자바스크립트는 유니코드(unicode) 문자셋을 사용합니다.

    • 식별자 작성방식

      식별자를 작성할 때는 다음과 같은 작성 방식을 사용할 수 있습니다.

      1. Camel Case 방식
      2. Underscore Case 방식


      Camel Case 방식이란 식별자가 여러 단어로 이루어질 경우, 첫 번째 단어는 모두 소문자로 작성하고, 그 다음 단어부터는 첫 문자만

      대문자로 작성하는 방식입니다.

      Underscore Case 방식은 식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들은 언더스코어(_)로 연결하는 방식입니다.

      var firstVar = 10; // Camel Case
      function my_first_func { // Underscore Case
          var firstLocalVar = 20; // Camel Case
      }
      

      ★ 자바스크립트에서는 하이폰(-)은 뺄셈을 위해 예약된 키워드(예약어)이므로, 식별자를 작성할 때는 사용할 수 없습니다.

      ★ 자바스크립트는 식별자를 작성할 때, 관행적으로 Camel Case 방식을 많이 사용합니다.

  • 키워드

    몇몇 단어들을 특별한 용도로 사용하기 위해 미리 예약하고 있습니다.

    이렇게 미리 예약된 단어들을 키워드 또는 예약어(reserved word)라고 합니다.

    이러한 키워드들은 프로그램 내에서 식별자로 사용할 수 없습니다.

    var firstVar = 10;      // var는 변수의 정의를 위해 예약된 키워드입니다.
    function myFirstFunc {  // function은 함수의 정의를 위해 예약된 키워드입니다.
        var secondVar = 20; // var는 변수의 정의를 위해 예약된 키워드입니다.
    }
    



  • 주석

    주석(comment)이란 코드 내에 삽입된 일종의 설명문입니다.

    주석은 작성자나 다른 개발자나 나중에 코드를 수정할 때 참고할 수 있으며, 웹 페이지 개발 시 디버깅에도 사용됩니다.

    이러한 주석은 자바스크립트 코드의 어느 부분에라도 작성할 수 있으며, 웹 브라우저의 동작에 전혀 영향을 미치지 않습니다.


    자바스크립트 주석은 다음과 같은 두 가지 형식을 지원합니다.

    1. 한 줄 주석 : //
    2. 여러 줄 주석 : /*	주석문	*/
    
    var x = 10;
    // var y = 20; 한 줄의 주석문 : 이 부분은 실행되지 않을 것입니다.
    /*
    x = x + y;
    여러 줄의 주석문 :
    이 부분 또한 실행되지 않을 것입니다.
    */
    


    여러 줄 주석 안에 한 줄 주석을 삽입할 수도 있습니다.

    var x = 10;
    /*
    // var y = 20;
    */
    

    ★ 하지만 여러 줄 주석은 중첩하여 사용할 수 없다는 점 주의!!!

  • 자바스크립트 출력

    자바스크립트는 여러 방법을 통해 결과물을 HTML페이지에 출력할 수 있습니다.

    자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다.

    1. window.alert() 메소드
    2. HTML DOM 요소를 이용한 innerHTML 프로퍼티
    3. document.wirte() 메소드
    4. console.log() 메소드


    지금은 이러한 방법들이 있다는 것만 인지하고 위의 메소드 및 프로퍼티를 이용한 방법들은 차후 따로 정리하여 수업자료로 올릴 예정입니다.

  • 자바스크립트 적용방법

    1. 내부 자바스크립트 코드로 적용
    2. 외부 자바스크립트 파일로 적용

    이 내용 역시 출력 내용과 마찬가지로 차후에 수업 자료에서 보여줄 예정이므로 자세한 사항은 pass~

댓글남기기