🔔 자바스크립트!

• 웹 페이지와 교류하기 위해 탄생한 프로그래밍 언어
  • 자바스크립트 엔진이 있는 모든 브라우저, 디바이스에서 동작
    • 크롬: V8 엔진
• HTML/CSS 와 완전 통합
• 웹 페이지에 내장된 JS 프로그램을 스크립트(script) 라고 한다!

📄 매뉴얼과 명세서

ECMA-262 명세서(specification)
MDN JS 매뉴얼

위 문서를 레퍼런스로 참고할 수 있습니다.

🖥️ 개발자 콘솔

브라우저 창에서 F12 를 누르면 개발자 도구를 사용할 수 있습니다.
다음과 같은 행동을 할 수 있습니다.

• 디버깅
• JS 콘솔 사용

🪲 디버깅(debugging)

F12 로 개발자 도구를 열어 디버깅을 해봅시다.

sources 탭에 들어가서, 토글 버튼을 누르면 현재 사이트와 관련된 파일 목록이 나옵니다.

각 영역은 다음과 같이 구성됩니다.

1. 파일 탐색 영역: 페이지 구성에 쓰인 리소스 목록
2. 코드 에디터 영역: 선택한 파일의 소스 코드. 편집도 가능!
3. 자바스크립트 디버깅 영역: 디버깅 관련 기능 제공

Esc 를 누르면 콘솔 창이 열려 입력한 명령어 구문을 실행할 수 있습니다.

좌측의 줄 번호를 클릭하면 해당 라인에 중단점을 설정합니다.
(마우스 우클릭으로, Add conditional breakpoint 를 선택하면 표현식을 입력하게 되고, 표현식이 참일 때만 실행을 중단합니다.)

1. Watch: 표현식을 작성하면 적용되고, 중단 시점에 결과를 보여줌
2. Call Stack: 중단점까지의 코드 실행 경로 표시
3. Scope: 현재 정의된 모든 변수 출력