JavaScript 적용 방법
- HTML 문서 내 <script>
<body>
<script>
JavaScript Code
</script>
</body>- 외부 파일
<body>
<script src="외부 파일">
JavaScript Code
</script>
</body>
//가장 효율적인 방법
<body>
<script defer src="외부 파일">
JavaScript Code
</script>
</body>Strict Mode
'use strict';
- 순수 자바스크립트(Vanilla Script)에 적용
- 자유도가 높은 자바스크립트에 엄격한 문법을 적용
- 선언하지 않은 변수 사용 불가 등 - 자바스크립트 엔진이 더 효율적이고 빠르게 동작 (성능 개선)
출력
- innerHTML / innerText / textContent : HTML 요소에 출력
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="memo"></p>
<script>
document.querySelector("#memo").innerHTML = Memo;
</script>- document.write() : body에 출력
- 테스트 목적
- Popup 창에 내용을 동적으로 보여주기 위해 사용
- 기존 내용이 모두 삭제되므로 주의해서 사용
<button type="button" onclick="openPopup()">팝업</button>
<button type="button" onclick="document.write(5 + 6)">계산</button>
<script>
function openPopup() {
const popup = window.open('', '', 'width=300px height=150px');
popup.document.write('<h1>Popup</h1>');
}
</script>- window.alert() : 경고창에 출력
- 사용자에게 간단한 알림 메시지
- window 키워드 생략 가능
<script>
alert(5 + 6);
</script>- console.log() : 브라우저 콘솔(개발자 도구)에 쓰기
- (.dir / .info / .warn / .error)
- 정보 / 경고 / 에러
- 디버깅을 위해 사용
- 개발자가 연산 결과를 확인하기 위해 사용 - window.print() : 프린터로 출력
- 현재 창의 내용을 프린터를 통해 출력
<body>
<button onclick="window.print()">Print this page</button>
</body>
'LG CNS Camp 2기 > Front-end : JavaScript' 카테고리의 다른 글
| [JavaScript] 현재 시간을 받는 함수 (0) | 2025.04.01 |
|---|---|
| [JavaScript] 조건문 if, else if, else (0) | 2025.04.01 |
| [JavaScript] 연산자 (0) | 2025.04.01 |
| [JavaScript] 자료형 (0) | 2025.04.01 |
| [JavaScript] 변수, 상수 (0) | 2025.03.31 |