![[JavaScript] HTML 파일에서 JavaScript 코드 실행하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlyBlm%2FbtrHdLuh6Os%2FXkRWvncoktQFVHfm5UmNFK%2Fimg.png)
반응형
HTML 파일에서 JavaScript 코드 실행하기
HTML 파일에서 JavaScript 코드를 실행하기 위해서는 <script> </script>로 코드를 감싸줘야 한다.
예를 들어 아래와 같이 Hello DBlog를 Console에 출력하는 JavaScript 코드가 있다고 하자.
let title = "Hello DBlog"
console.log(title)
위 코드를 실행하기 위해서는 다음과 같이 <script> </script> 사이에 코드를 넣어줘야 한다.
<script>
let title = "Hello DBlog"
console.log(title)
</script>
이제 이 코드를 HTML 파일 내부에 넣으면 HTML파일이 실행될 때 Hello DBlog라는 로그가 출력되게 된다.
아래에서 실제로 코드를 실행해보도록 하자.
실행 예제
아래와 같이 <body></body> 내부에 <script>를 넣어 HTML파일을 만들어보도록 하자.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Hello!</title>
</head>
<body>
<p>Hello world! This is HTML5 Boilerplate.</p>
<script>
let title = "Hello DBlog"
console.log(title)
</script>
</body>
</html>
위 HTML파일을 크롬에서 실행하면 다음과 같이 Hello DBlog라는 로그가 두 번 출력되는 것을 확인할 수 있다.
한 번 JavaScript 코드를 두 번 실행하도록 해보자.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Hello!</title>
</head>
<body>
<p>Hello world! This is HTML5 Boilerplate.</p>
<script>
let title = "Hello DBlog"
console.log(title)
</script>
<script>
console.log(title)
</script>
</body>
</html>
위에서 선언된 title 변수는 아래 script에서 재사용이 가능하기 때문에 아래 script에서는 title을 선언하지 않고도 사용할 수 있다.
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] HTML에서 .js 파일 실행하기 : script에서 src 사용해 js 파일 실행 (0) | 2022.07.15 |
|---|