JavaScript의 첫걸음 ~ 자바스크립트가 뭔가요?

Java Script/MDN 정리

JavaScript의 첫걸음 ~ 자바스크립트가 뭔가요?

Zin0_0 2020. 7. 22. 23:18

그래서, 진짜 어떤 일을 할 수 있나요?

APIs(Application Programming Interfaces)
- 이미 만들어진 코드의 집합체, 개발자들이 만들기 어렵고 힘든 부분을 쉽게 구현하도록 하는 프로그램
- Browser API
  - 웹 브라우저에 설치된 API들로, 컴퓨터 환경구성으로 부터 데이터를 보이게 하고 복잡한 일들을 하게한다.
  - DOM(Document Object Model) API
    - 동적으로 페이지의 스타일을 정하는 등 HTML과 CSS를 알맞게 조정하는 역할
    - 팝업창이나 컨텐츠들이 보여지는 것들 모두 DOM의 결과
  - Geolocation API
    - 지리적인 정보를 검색하게 해준다.
    - Google Maps가 어떻게 위치를 찾고 지도에 표시하는지 알 수 있게 한다.
  - Canvas와 WebGL API
    - 2D와 3D 그래픽을 만들 수 있게한다.
  - Audio and Video API
    - HTMLMediaElement와 WebRTC
    - 음악과 비디오를 웹 페이지에서 재생하고, 웹캠으로 캡처하고 다른 컴퓨터에 표시하는 등의 멀티미디어를 활용할 수 있는 기술 지원
- Third party API
  - 브라우저에 기본적으로 설치된 API가 아닌 인터넷에서 개인적으로 정보와 코드를 얻어 프로그래밍한 것
  - Twitter API
    - 웹사이트에 가장 최근의 트윗을 보여준다.
  - Google Maps API, OpenStreetMap API
    - 웹사이트에 원하는 지도를 넣어주고 추가기능을 지원함
  - 이외 여러 개발, 배포된 API들

웹 페이지에서 JavaScript는 어떤 일을 하나요?

자바스크립트 실행 순서

일반적으로는 위에서 아래로 순차적으로 실행된다.

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태그)에 새로운 문자열 저장
}

p태그의 요소를 para 변수에 저장(1번줄)
그리고 event listener를 붙여(3번줄) p태그가 클릭되었을 때 updateName()코드 블록이 실행된다. (5-8번줄)
위의 코드에서 1번과 3번이 바뀌면 실행 X

해석형(인터프리터) 언어와 컴파일러형 언어
- 인터프리터 언어
  - 코드가 위에서 아래로 순차적으로 실행되고 그 즉시 결과 반환
  - JavaScript는 인터프리터 언어에 해당된다.
- 컴파일러 언어
  - 컴퓨터에 동작되기 전 다른 형식으로 변환하는 언어
  - C와 C++과 같은 언어는 어셈플리어로 컴파일되어 동작

서버측 코드와 클라이언트측 코드
- 클라리언트측 코드
  - 사용자의 컴퓨터에서 작동
  - 클라이언트측 코드가 사용자의 컴퓨터로 다운로드되고 브라우저가 이를 표시
    - 이런 자바스크립트 모듈을 정확히는 클라이언트측 자바스크립트라고 한다.
- 서버측 코드
  - 서버에서 작동되고, 그 결과가 브라우저에 넘어가 표시됨
  - PHP, Python, Ruby, ASP.NET 등이 대표 예
  - Node.js로 JS도 가능
동적 VS 정적 코드
- 동적
  - 클라이언트측 서버측 언어 모두를 가르킨다
  - 각기 다른 상황에서 적절한 정보가 보이고, 컨텐츠를 웹페이지나 앱 상에서 계속적으로 노출시키는 역할을 한다
  - 클라이언트측 자바스크립트는 새로운 HTML 표를 만들어 서버에서 요청한 데이터를 뿌려 사용자에게 보이는 등 동적으로 브라우저 안에서 작동된다.
- 정적
  - 동적으로 바뀌지 않는 페이지를 "정적"페이지라고 한다. (항상 같은 콘텐츠를 보여준다.)

스크립트의 로딩 방법

모든 HTML 요소는 순서대로 페이지에 로드된다
- 만약 자바스크립트를 이용해 HTML 요소를 조작할 경우(정확하게는 DOM), 자바스크립트 코드가 조작 대상인 HTML 요소보다 먼저 실행된다면, 조작할 요소가 존재하지 않는 상태이기 때문에 제대로 동작하지 않음
내부 자바스크립트 예제
```
document.addEventListener("DOMContentLoaded", function() {
  ...
});
```
- DOMContentLoad 이벤트가 발생되었을 때 function()을 실행한다는 의미
  - 따라서, 브라우저가 완전히 로드되고 해석될 때 발생
외부 스크립트 예제
- async
  - 페이지가 나타나는 동안 비동기 방식으로
  - 위의 예제의 경우에 async는 3개의 js파일의 순서를 보장 X
  - defer의 경우 jquery -> script2 -> script3의 순서가 보장된다.
  - 따라서, script2나 script3가 jquery의 함수를 사용하거나 할 때 이용

저작자표시 비영리 동일조건