31-1. Script 태그 / html 파일에서 js 파일 호출
이제까지 JavaScript 코드를 레플릿의 에디터에서 작성했습니다. repl.it에서 JavaScript 코드만 있어도 스크립트가 작동되도록 환경을 만들어주었기 때문입니다. 하지만 진짜 개발을 할 때는 JavaScript 파일 만으로는 JavaScript 가 작동되지 않습니다.브라우저가 존재해야 하고, JavaScript파일을 호출하는 html파일이 있어야 합니다. 그래서 다시 html, js파일을 모두 볼 수 있는 공간으로 넘어왔습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> </head> <body> <script src="index.js"></script> <script> function sayHi() { console.log('여기는 index.html파일입니다.'); } sayHi(); </script> <h1>html 페이지</h1> </body> </html>
이렇게 작성된 index.js 은 index.html 에서 불러와주고 있었습니다.
<script src="index.js"></script>
자바스크립트 파일 이름이 index.js 인데, 이름은 어떻게 지어도 상관없습니다. index.html에서 링크만 잘 시켜주면 됩니다. 왼쪽에서도 index.js의 탭에서 'rename' 으로 자바스크립트 파일을 바꾸고, 아래처럼 index.html을 수정하면 됩니다.
<script src="whatever.js"></script>
31-2. html 내부 JavaScript 코드의 위치
잠시 JavaScript 코드 위치에 대해 설명해드리겠습니다. JavaScript 코드는 js 파일에만 작성해야 할 것 같지만, html 코드 내에도 JavaScript 코드를 작성할 수 있습니다. 대신 html 파일내에 <script> 태그가 있어야 합니다.
⭐<script>태그 내에 JavaScript 코드를 작성할 수 있습니다.⭐
<script>태그 내에는 html 태그는 작성할 수 없습니다. 왼쪽 index.html에 JavaScript 코드를 넣어보았습니다.
<script> function sayHi() { console.log('여기는 index.html파일입니다.'); } sayHi(); </script>
HTML 파일에 자바스크립트 코드를 넣으려면 안에 작성해야 브라우저가 자바스크립트 코드라고 인식하게 됩니다. JavaScript 코드를 넣는 방법은 이렇게 여러 가지가 있지만, 유지보수나 관리 차원에서 이제까지 했던대로 index.js 와 같이 외부 파일에 작성하는게 가장 좋은 방법입니다.
