자바스크립트 실행 방법 (Console, Script)

자바스크립트를 작성하고 실행하는 방법은 크게 3가지가 있습니다. 초보자일 때는 브라우저의 콘솔을 주로 활용하고, 실제 웹사이트를 만들 때는 HTML 파일에 연결해서 사용합니다.

1 브라우저 콘솔 (Console) 사용하기

가장 빠르고 간편하게 코드를 테스트해 볼 수 있는 공간입니다. 크롬 브라우저에서 F12 키(또는 개발자 도구)를 누르고 Console 탭을 클릭하세요.

Elements Console Sources Network Performance

top

Default levels

>console.log("Hello, World!");
<·Hello, World!

2 HTML 내부에 직접 작성 (내부 스크립트)

HTML 문서의 <head> 나 <body> 끝부분에 <script> 태그를 열어 직접 코드를 작성합니다. 짧은 코드에 적합합니다.

index.html

                        1
2
3
                    
                        <script>

                          console.log("HTML 파일 안에서 실행됩니다!");

                        </script>

3 외부 자바스크립트 파일 연결 (가장 권장됨)

확장자가 .js인 자바스크립트 전용 파일을 따로 만들고, HTML에서 불러와서 사용합니다. 코드 관리가 훨씬 편해집니다.

index.html

script.js

                        1
2
                    
                        <!-- HTML 파일 안에서 외부 JS 파일 로드 -->

                        <script src="script.js"></script>

// 브라우저 개발자 도구(F12) -> Console 탭을 열고 아래 코드를 입력해보세요! console.log("환영합니다! 첫 번째 자바스크립트 코드가 실행되었습니다."); // 결과창에 위 문구가 출력되는 것을 볼 수 있습니다.