오늘 학습 정보
- 날짜/Day: 2026/01/23 (Day10)
- 교재 범위: ~ 8.2 프로그래밍 시작 전 알아 두기 (p.317~329)
- 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처
오늘의 핵심 키워드 3개
- 핵심 키워드 1: 내부/외부 스크립트 연결
- 핵심 키워드 2: 주석(한 줄/여러 줄)
- 핵심 키워드 3: 콘솔 기반 오류 확인(에러 메시지/줄 번호)
개념 정리
2-1) HTML에 자바스크립트 적용(내부 스크립트)
역할: HTML 문서 내부에서 즉시 자바스크립트를 실행/적용
핵심 포인트:
- <script> 태그 콘텐츠 영역에 JS 코드를 직접 작성
기본 형식
- <script> … </script>
짧은 예시(코드):
- <body> <script> document.write(“내부 스크립트 방법”); </script> </body>
2-2) HTML에 자바스크립트 적용(외부 스크립트)
역할: JS 코드를 별도 .js 파일로 분리해 HTML과 연결(유지보수/관리 용이)
핵심 포인트:
- JS는 .js 파일에 작성, HTML에서 src로 파일 경로를 지정해 연결
기본 형식:
- <scriptsrc=”파일경로”></script>
짧은 예시(코드):
- // script.js document.write(“외부 스크립트 방법”);
- <body> <scriptsrc=”script.js”></script> </body>
2-3) script 태그 사용 위치(권장 위치)
역할: 화면 표시 흐름에 영향을 최소화하면서 스크립트를 실행
핵심 포인트:
- HTML은 위 → 아래로 해석되므로, 화면 표시와 관련도가 큰 HTML/CSS가 먼저 해석된 뒤 실행되도록 </body> 직전에 배치
기본 형식:
- </body> 바로 위에 <script …></script>
짧은 예시(코드):
<body>
<!-- 화면에 표시될 내용들... -->
<!-- body 종료 태그 직전에 script 배치 -->
<script src="script.js"></script>
</body>2-4) 자바스크립트 실행/확인 방법(브라우저 콘솔)
역할: 웹 브라우저 개발자 도구(Console)에서 JS를 즉시 실행하며 결과 확인
핵심 포인트:
- 개발자 도구의 Console 탭에서 입력 후 Enter로 실행(브라우저 환경 기반)
기본 형식:
- Console에 JS 코드 입력
짧은 예시(코드):
- document.write(“콘솔창에서 실행하기”);
2-5) 자바스크립트 실행/확인 방법(VSCode Code Runner)
역할: 에디터 안에서 JS 실행 결과를 빠르게 확인
핵심 포인트:
- Code Runner로 실행 시 화면 출력용 document.write()보다는 콘솔 출력용 console.log() 흐름이 적합
기본 형식:
- console.log(값)
짧은 예시(코드):
- console.log(“확장 프로그램으로 출력하기”);
2-6) 주석(Comment) 문법
역할: 코드 설명/메모, 실행 대상에서 제외(읽기 쉬운 코드 작성)
핵심 포인트:
- 한 줄은 //
- 여러 줄은 /* … */ 사용
기본 형식:
- // …
- /* … */
짧은 예시(코드):
- // 한 줄 주석
- /* 여러 줄 주석 (여러 줄 내용을 한 번에 주석 처리) */
2-7) 오류 확인 방법(콘솔 에러 메시지 해석)
역할: 실행 중 발생한 오류의 원인/위치를 빠르게 찾기
핵심 포인트:
- 콘솔에는 “오류 메시지 + 발생 파일 + 줄 번호”가 함께 표시되고, 파일/줄 번호를 클릭하면 해당 위치로 이동 가능
기본 형식:
- 콘솔 에러 확인 → 파일명/줄 번호 클릭 → 코드 수정
짧은 예시(코드):
<body>
<script>
// 오류 발생을 위해 오타 넣기(console -> consol)
consol.log("Hello, Javascript!");
</script>
</body>
* 위 코드 입력시 오류 메시지와 함께 오류 발생 파일명과 코드 줄 번호 출력됨이슈 로그
- 콘솔에서 오류가 나면 당황했는데, “파일명/줄번호 클릭 → 해당 라인으로 이동” 흐름을 알게 되니 수정이 빨라졌습니다.
- Code Runner 실행 시 출력 방식이 달라서 document.write() 대신 console.log()로 정리해두는 게 필요했습니다.
학습단 도서
- 「코딩 자율학습 HTML + CSS + 자바스크립트」
“코딩자율학습단 19기 | 10일차 학습일지 – 자바스크립트 연결(내부/외부) · 주석 · 오류 확인”에 대한 2개의 생각