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

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

• 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의 함수를 사용하거나 할 때 이용