HTML 문서에 자바스크립트를 적용하고 싶다면 HTML 문서와 자바스크립트 파일을 연결해야 함
-> 단순히 코드를 실행하는 것이 목적이면 콘솔창이나 에디터 사용 가능
HTML파일과 자바스크립트 연결하기
내부 스크립트 방법
HTML 파일에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법
ex)
<body>
<script>
document.write("내부 스크립트 방법");
</script>
</body>외부 스크립트 방법
js 확장자로 된 별도의 파일을 생성하고 생성된 파일에 자바 스크립트 코드 작성 후, HTML 문서와 연결하는 방법
// script.js
document.write("외부 스크립트 방법");<body>
<script src="script.js"></script>
</body>script 태그는 항상 body 태그의 종료 태그 바로 전에 사용
-> 내부, 외부 동일
script 태그 사용 위치
<body>
<!-- 외부 스크립트 -->
<script src="script.js"></script>
<!-- 내부 스크립트 -->
<script></script>
</body>당장 사용자에게 보여줘야 하는 영역은 HTML과 CSS가 가장 관련도가 큼
-> 만약 head 태그안에 script 태그를 사용했는데 파일을 해석하는데 10초가 걸린다면, 웹 브라우저는 10초 동안 다음 줄을 해석 못하고 대기
자바 스크립트는 화면에 표시되는 웹 구성요소에 동적 효과를 부여하는데 목적이 있어 웹 브라우저에 구성 요소를 처음 표시할때는 당장 실행할 필요 없음
-> body 요소 종료 태그 전에 script 태그 사용
자바 스크립트 코드 실행하기
콘솔
웹 브라우저에서 작동하는 것과 별개로 단순 js 코드를 실행하고 싶다면, 웹 브라우저 콘솔창이나 VScode 같은 확장 프로그램 이용
이전 코드 내역을 지우기 위해서는 clear console, clear console history 사용
확장 프로그램
VSCode에서 Code Runner 확장 프로그램 사용 시 에디터 내부에서 js 코드 실행결과 확인 가능
우측 상단 플레이 버튼 클릭
확장 프로그램 사용 시 에디터에서는 웹 브라우저 없이 바로 실행하므로 console.log() 메서드 사용
주석
// 주석
/* 주석 */자바 스크립트 오류 확인 방법
컴파일 방식 : 코드 실행하기 전에 모든 코드를 컴퓨터가 이해할 수 있는 기계어로 한번 변환환 후 실행하는 방식
인터프리터 방식 : 코드를 한번에 한줄씩 실행하는 방식
자바 스크립트는 인터프리터 방식
-> 한줄 씩 실행하다 보니 오류가 발생하면 오류가 발생하는 시점과 줄 번호를 알려주고, 오류 발생 시점부터 실행을 멈춤
<body>
<script>
// 오류 발생 위해 오타
consol.log('hello. javascript!');
</script>
</body>
Uncaught ReferenceError 에러 발생
