자바스크립트는 어떻게 사용할까?
HTML 파일과 자바스크립트 연결 방법
--
웹 브라우저에 표시할 HTML 문서에 자바스크립트를 적용하기 위해서는
HTML 문서와 자바스크립트 코드를 연결해야 한다.
단순 자바스크립트 코드 실행이 목적이라면 에디터에서 .js파일에 코드를 작성하거나 콘솔차에 작성
내부 스크립트를 통해 연결
HTML 파일에서 바로 "script 태그"를 통해 콘텐츠 영역에 자바스크립트 코드를 작성한다.
예시 코드
<body>
<!-- 코드 생략 -->
<script>
document.write("내부 스크립트 방법");
</script>
</body>script 태그는 head태그나 body태그 어디에든 작성해도 상관없지만
일반적으로 body태그에서 가장 마지막에 작성하는 것을 권장한다.
웹 브라우저는 HTML 문서의 첫 줄부터 순차적으로 읽어오기 때문에
당장 보여줘야 하는 HTML과 CSS를 먼저 구성한 뒤에 마지막으로 JS가 적용되는 것이 이상적이다.
외부 스크립트를 통해 연결
.js 확장자로 된 별도의 파일(자바스크립트 파일)을 생성하여 해당 파일에 자바스크립트 코드를 작성 후
해당 파일의 경로를 이용하여 HTML 문서와 연결한다.
예시 코드
document.write("외부 스크립트 방법");<body>
<script src="script.js"></script>
</body>--
자바스크립트 코드 실행 방법
--
웹 브라우저에서 동작하는 것과는 별개로 단순 코드 실행이라면
웹 브라우저의 콘솔창을 이용하거나 에디터(VSCode 등)를 이용할 수 있다.
웹 브라우저 콘솔창
1. 크롬 브라우저에서 주소창에 "about:blank"를 입력하여 빈 페이지를 연다.
2. F12를 눌러 개발자 도구를 열고 콘솔창(Console)으로 이동
3. 콘솔창에 코드를 작성 후 "엔터"키를 누르면 코드가 실행되어 웹 브라우저 화면에 출력된다.
만약 이전에 작성한 코드 내역을 지우고 싶다면 우클릭 후 지우면 된다.
- Clear console : 콘솔창의 내용을 지움
- Clear console history : 콘솔창에 입력한 모든 코드 기록을 지움
에디터
VSCode와 같은 에디터에서 코드를 작성하여 실행하는 것으로
VSCode에서는 Code Runner 확장 프로그램을 통해
에디터 내부에서 자바스크립트 코드의 실행 결과를 바로 확인 가능하다.
결과를 보기 위해서는 해당 js파일을 불러오는 HTML 문서가 존재해야 한다.
<body>
<script src="script.js"></script>
</body>
document.write();와 console.log(); 차이
- dodument.write() : 웹 브라우저에 텍스트를 표시
- console.log() : 웹 브라우저 없이 에디터의 콘솔에 출력
(만약 글자가 깨진다면 Node.js를 설치)
--
주석
--
한 줄 주석
// 주석 내용
여러 줄 주석
/*
주석 내용
*/--
자바스크립트 실행 방법 (+오류 확인 방법)
--
프로그래밍 언어를 실행하는 방법에는 크게 2가지 존재한다.
- 컴파일 방식 : 코드를 실행하기 전에 모든 코드를 컴퓨터가 이해할 수 있는 기계어로 변환 후 실행
- 인터프리터 방식 : 코드를 한 번에 한 줄씩 실행
자바스크립트는 인터프리터 방식으로 실행된다.
결과를 콘솔에 출력하는 경우 콘솔에서 오류를 확인할 수 있지만
웹 브라우저에 출력하는 경우 브라우저 개발자 도구에서 먼저 오류를 확인할 수 있다.
--
