JavaScript - 자바스크립트(JavaScript)란?

 

 

 

JavaScript란

 

• 자바스크립트(JavaScript)는 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어이다.
          - 인터프리터 : 한 줄 단위로 번역과 동시에 프로그램을 즉시 실행시키는 프로그램
• 자바스크립트는 ECMA스크립트 표준을 따르는 대표적인 웹 기술이다.
          - ECMA(European Computer Manufacturers Association) : 표준화 기구

 

 HTML이 웹 문서의 뼈대 역할로 CSS가 그 뼈대를 꾸며주는 역할이라면 자바스크립트는 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부르고, 스크립트는 웹 페이지의 HTML안에 작성 가능하며 웹페이지 로드 시 자동으로 실행된다. 브라우저에는 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어 있다.

 

 엔진이 스크립트를 읽고(파싱) 읽어들인 스크립트를 기계어로 전환(컴파일)하면 기계어로 전환된 코드가 실행된다라는 점에서 인터프리터 방식으로 소스를 해석하기 때문에 전체를 해석해 놓은 컴파일 언어와는 차이가 있다. 즉 자바스크립트 실행은, 작성된 html문서를 브라우저에서 읽어 들이면 바로 실행을 확인할 수 있다.

 

 

 

JavaScript의 기능

 

• 페이지에 새로운 HTML 추가
• 기존 HTML과 스타일의 수정
• 마우스 클릭 및 이동, 키보드 키 누름 등의 사용자 행동에 반응
• 네트워크를 통해 원격 서버에 요청(Ajax 기술 등)
• 쿠키(Cookie) 사용
• 클라이언트 측에 데이터 저장(Local Storage)

---

 

JavaScript와 개발자 도구

 

 브라우저별로 개발자 도구(Developer Tools)를 제공하는데 크롬의 경우 F12 키를 눌러 실행한다. 브라우저 창에서 원하는 부분을 확인하고 싶으면 원하는 위치에 우클릭 후 검사를 누른다. 자바스크립트 소스 코드 중 console.log()는 브라우저에서 출력하는 것이 아니라 개발자 도구의 console 패널에서 출력하고 스크립트 구문을 디버깅할 때 자주 사용한다.

 

개발자 도구의 Console

 

---

 

JavaScript 작성 방식

 

• internal 방식
       - script 태그 영역에 작성해서 실행되게 하는 방법
       - type="text/javascript"는 HTML4에서는 필수였으니 HTML5에서는 필수가 아니다.
       - language 속성은 자바스크립트가 기본 언어이므로 작성할 필요가 없다.
  

  <script>
      //JavaScript 한 줄 주석
  /*
      JavaScript
      여러 줄 주석 
      줄 바꿈이 있다면 세미콜론 자동 삽입
  */
      console.log('Hello!')
      console.log('JavaScript!')
  </script>

• external 방식
         - 별도의 js 파일을 작성해서 가져다 사용하는 방법
         - 브라우저의 캐싱으로 js 파일을 다시 다운로드할 필요가 없어지기 때문에
           스크립트가 길어지면 별도의 js 파일로 작성하는 것이 좋다.
  

  <script src="../resources/js/sample.js"></script>​

• inline 방식
         - 태그에 직접 소스 코드를 작성해서 실행되게 하는 방법
  

  <button onclick="alert('버튼 클릭 확인');">경고창 출력</button>
  <button onclick="console.log('버튼 클릭 확인');">콘솔창 출력</button>​