본문 바로가기
○ WEB/19.00 MDN web docs

자바스크립트란 무엇인가?

by 0ver-grow 2019. 8. 9.
반응형

JavaScript가 뭔가요? 

JS란?

JS는 스크립트 혹은 프로그래밍 언어. 보통 클라이언트 측에서 웹페이지를 동적으로 다룰 때 사용. 그러나 서버측에서 Node.js와 같은 패키지를 이용해여 사용되기도 한다. 표준 웹기술 레이어 케이크에서 3번째 층

HTML은 제공할 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 드응로 정의하고 부여하는 마크업 언어

CSS는 배경색 폰트 등의 레이아웃을 지정 -> HTML컨텐츠를 꾸며주는 스타일 규칙 언어

 

예시

<p>Player 1: Chris</p>
p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor:pointer;
}
const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

마지막 버전의 텍스트 라벨을 클릭하여 어떻게 되는 지 확인해봅시다. (이 데모는 Github에서도 볼 수 있습니다. source code 나 run it live를 참고해보세요!)

 

JS의 기능

  • 변수안에 값을 저장할 수 있습니다. 위의 예시를 보면, 작성된 새로운 이름을 name이라는 변수에 저장하였습니다.
  • 프로그래밍에서 '문자열(strings)'이라고 불리는 문자들도 조작 가능합니다. 위 예시에 보면 "Player 1:"이라는 문자열을 name이라고 만든 변수와 겹합하여 "Player 1: Chris"라는 글을 완성할 수 있었습니다.
  • 웹 페이지상의 이벤트에 응답하는 코드를 작성할 수 있습니다. 예제에서 사용한 click 이벤트를 통해 요소가 언제 클릭되고, 텍스트 라벨을 업데이트 시킬지 정의하였습니다.

코어 자바스크립트 언어(core JavaScript language) 기반의 기능성

소위 Application Programming Interfaces (APIs) 라는 것은 여러분의 자바스크립트 코드에 사용할 수 있는 추가적인 강력한 마법들을 제공. API는 이미 만들어진 코드의 집합체라고 볼 수 있으며, 개발자들이 만들기 어렵고 힘든 부분을 쉽게 구현하도록 하는 프로그램이라고 볼 수 있습니다. 마치 집에서 가구를 만들 때 직접 디자인하고, 재료를 구하고, 재단하고, 못을 박고 하는 등 혼자서 모든 것을 하는 대신 가구 만들기 키트를 사는 것과 같다.

APIs는 크게 2가지로 구분된다. Browser APIs 그리고  3rd party APIs크게 2가지로 구분된다.                                    Browser API는 웹 브라우저에 설치된 API들, 컴퓨터 환경구성으로 부터 데이터를 보이게 하고 복잡한 일을 처리

  • DOM (Document Object Model) API 는 동적으로 페이지의 스타일을 정하는 등 HTML과 CSS를 알맞게 조정하는 역할을 합니다. 우리가 매일 보는 팝업창이나, 위의 사진과 같이 컨텐츠들이 보여지는 것들이 모두 DOM의 결과
  • Geolocation API은 지리 정보 검색. 이는 Google Maps이 어떻게 위치를 찾고 지도에 표시하는지 알 수 있게 함
  • Canvas 와 WebGL API는 2D와 3D 그래픽 제작. 이러한 웹 기술을 사용하여 다양하고 재미있는 것들을 지원 —Chrome Experiments 와 webglsamples을 참조해보자.
  • HTMLMediaElement 와 WebRTC 같은 Audio and Video API는 음악과 비디오를 웹 페이지 상에서 재생, 웹캠 캡처, 다른 컴퓨터에 표시 등의 멀티미디어를 활용할 수 있는 재미있는 기술을 지원. (Snapshot demo를 한번 참조.)

실제 배포가 되는 코드처럼 여러 사용자가 사용할 수 있음을 고려하여 cross browser testing(여러 브라우저를 이용하여 테스트)를 해보는 것이 좋을 것입니다.

Third party API 는 브라우저에 기본적으로 설치된 API가 아닌 인터넷에서 개인적으로 정보와 코드를 얻어 프로그래밍한 것(이러한 API 들은 고급 과정)

 

웹 상에서 JS가 하는 일

브라우저에서 웹페이지를 불러올 때 어떤 일이 발생할까? (참고. CSS동작과정)

브라우저에서 웹페이지를 불러올 때, 실행 환경(브라우저 탭)안에서 HTML, CSS, Javascript 코드가 실행. 마치 공장에서 원재료(코드)가 일련의 과정을 거쳐 제품(웹페이지)으로 탄생되는 것과 같다. 

자바스크립트는 HTML +CSS 가 결합 -> 웹페이지에 올려짐 -> 브라우저의 자바스크립트 엔진에 의해 실행. 이는 페이지의 구조와 스타일등을 정해놓고, 자바스크립트가 실행된다는 것과 같은 의미.

동적으로 user interface를 update하는 JS는 DOM API 통해 HTML과 CSS를 수정함. JS가 HTML과 CSS 전에 실행되면 문제 발생함.

 

JS 실행 순서 / 해석형언어인 JS

위에서 아래로 순차적으로 실행되어 결과 즉시 반환. 브라우저 동작 전에 다른 방식으로 코드 변환활 필요 없음. 순서에 주의해서 코드를 작성해야 한다.

const para = document.querySelector('p');
//HTML 요소 중 p태그를 선택

para.addEventListener('click', updateName);
//para에 저장된 객체가 클릭되었을 때 updateName 함수를 실행

function updateName() {
  let name = prompt('Enter a new name');
  //'Enter a new name'과 입력란 출력하여 입력받은 값을 name에 저장
  para.textContent = 'Player 1: ' + name;
  //papa(p태그)에 새로운 문자열 저장
}

위 코드를 아래 코드의 순서로 작성하면 실행안됨

function updateName() {
  let name = prompt('Enter a new name');
  //'Enter a new name'과 입력란 출력하여 입력받은 값을 name에 저장
  para.textContent = 'Player 1: ' + name;
  //papa(p태그)에 새로운 문자열 저장
}

para.addEventListener('click', updateName);
//para에 저장된 객체가 클릭되었을 때 updateName 함수를 실행

const para = document.querySelector('p');
//HTML 요소 중 p태그를 선택

JS는 해석형언어이므로 순차적으로 실행되어 반환하는 반면 컴파일러언어는 C/C++은 컴퓨터에 의해 동작되기 전 다른 형식으로 변환하는 언어이다.

 

서버사이드 코드, 클라이언트사이드 코드

클라이언트측 코드란 사용자의 컴퓨터에서 작동되는 코드. 웹페이지를 보고자 한다면, 클라이언트측 코드가 사용자의 컴퓨터로 다운로드되고 브라우저가 이를 표시. 이러한 자바스크립트 모듈을 정확히는 클라이언트측 자바스크립트라고 합니다.

서버측 코드는 서버에서 작동되고, 그 결과가 사용자의 브라우저에 넘어가 표시한다. PHP, Python, Ruby, ASP.NET등이 서버측 웹 언어의 대표적 예이다. Node.js란 환경을 통해 서버측에서도 자바스크립트가 사용 가능하다. Dynamic Websites – Server-side programming에서 서버측 자바스크립트에 대해 더 알 수 있습니다.

 

동적 VS 정적 코드

"동적"이라는 말은 모두(클라이언트측 언어 + 서버측 언어)를 포함한다는 의미.

서버측 코드는 DB로 부터 데이터를 보내는 등 동적으로 새 컨텐츠들을 만든다.

클라이언트측 JS는 새 HTML표를 만들어 서버에서 요청한 데이터를 뿌려 사용자에게 보이는 등 동적으로 브라우저 안에서 작동. 동적으로 바뀌지 않는 페이지를 '정적'페이지라고 한다.(항상 같은 컨텐츠를 보여줌)

 

 

웹 페이지에 JS를 어떻게 넣을까?

자바스크립트는 CSS와 같은 방식으로 HTML 페이지에 적용됩니다. CSS는 외부의 스타일시트를 적용하기 위해 link 요소를 사용하거나 내부의 스타일시트를 적용하기 위해 style 요소를 사용하는 반면,자바스크립트는 HTML상에서 오직 script 태크만으로 사용이 가능합니다. 

JS를 적용하는 방법은 크게 2가지이다. html에 직접 넣는 인라인방법 / html에 script태그로 js파일의 경로를 집어넣는 방법이 있다.

 

내부의 JS

body태그에 script태그를 만들고 그 안에 JS코드를 삽입한다.

<body>
	<script>
    	document.addEventListener("DOMContentLoaded", function() {
          function createParagraph() {
            let para = document.createElement('p');
            para.textContent = 'You clicked the button!';
            document.body.appendChild(para);
          }

          const buttons = document.querySelectorAll('button');

          for(let i = 0; i < buttons.length ; i++) {
            buttons[i].addEventListener('click', createParagraph);
          }
        });
    </script>
</body>

 

외부의 JS

body태그에 script태그를 만들어서 <script src="js파일위치/js파일이름"></script> 을 입력해준다.

 

인라인

인라인방법은 다음처럼 HTMl 속에 JS코드를 쓴다.

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}
//HTML 내의 <scirpt>태그 내부에 작성
<button onclick="createParagraph()">Click me!</button>

그러나 이 방법은 효율적이지 않다. JS와 함께 HTML을 쓰므로 복잡함

또한 함수를 만들기 위한 모든 버튼 마다 onclick="createParagraph()" 속성을 포함해야함

JavaScript 코드만으로도 모든 버튼에 함수를 연결. 위의 내용을 의도한대로 수정한다면 다음과 같습니다:

const buttons = document.querySelectorAll('button');
//모든 <button>태그를 List 형태로 buttons 변수에 저장한다.

for (let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}
//복수이기 때문에 for를 사용해 루프를 돌린다.

 

반응형

'○ WEB > 19.00 MDN web docs' 카테고리의 다른 글

이번 수업의 구성은 크게 4파트이다.  (0) 2019.08.09

관련글

티스토리툴바