728x90
반응형
SMALL
HTML 파일과 자바스크립트 연결하기 - 총 2가지(내부 스크립트 or 외부 스크립트)
[내부 스크립트 방법]
html 파일에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 스크립트 방법</title>
</head>
<body>
<script>
document.write('내부 스크립트 방법');
</script>
</body>
</html>
<script.js 문서>
document.write("외부 스크립트 방법");
[외부 스크립트 방법]
js 확장자로 된 별도의 파일을 생성하고 생성한 파일에 자바스크립트 코드를 작성한 뒤, html 문서와 연결하는 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 스크립트 방법</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
<script 태그 사용 위치>
script 태그는 항상 body 태그의 종료 태그 바로 전에 사용합니다. 이는 내부와 외부 전부 동일합니다.
<body>
<script src="script.js"></script>
</body>
body 요소의 종료 태그 전에 script 태그를 작성하는 이유?
웹 브라우저는 html 문서를 첫 번째 줄부터 순차적으로 해석합니다. 사용자에게 바로 보여줘야 하는 영역은 html과 css이고 만약, head 태그 내부에 script 태그를 사용하여 파일을 해석하는데 오래 걸릴 경우 웹 브라우저는 해석하지 못하고 대기 상태가 되기 때문 / JavaScript는 화면에 표시하는 웹 구성 요소에 동적 효과를 부여하는 데 큰 목적이 존재
자바스크립트 코드 실행하기
콘솔창 사용하기
자바스크립트는 웹 브라우저에서 실행되는 언어 -> 웹 브라우저의 콘홀창에서 자바스크립트를 바로 작성해 실행 가능
F12키 개발자 도구 -> 콘솔(Console)
프로그래밍 언어를 실행하는 방법 크게 컴파일 방식 or 인터프리터 방식
컴파일 방식 - 코드를 실행하기 전, 모든 코드를 컴퓨터가 이해할 수 있는 기계어로 한 번 변환한 후 실행하는 방식
인터프리터 방식 - 코드를 한 번에 한 줄씩 실행하는 방식
자바스크립트는 인터프리터 방식
728x90
반응형
LIST
'프론트엔드(Web) > JavaScript' 카테고리의 다른 글
| JavaScript 조건문, 반복문 (1) | 2024.07.16 |
|---|---|
| JavaScript 함수 및 자료형, 연산자 (1) | 2024.07.16 |
| JavaScript - 매개변수 패턴 (0) | 2024.07.08 |
| JavaScript - 호이스팅(함수 선언과 표현 구분) (0) | 2024.07.08 |
| JavaScript - While, Do While 반복문 (0) | 2024.07.08 |