실행방법과 실습환경

생활코딩 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743)

---

 Javascript 실행 방법 

브라우저에서 자바스크립트를 실행하기 위해서 필요한 것은 "브라우저"와 "자바스크립트 코드를 작성할 수 있는 에디터"가 필요하다.

 

에디터는 각각의 운영체제에 기본적으로 내장되있는 것을 사용하면 된다.

windows는 메모장, MAC은 텍스트에디트를 이용하면 된다.

하지만, 좀 더 편리하게 실습하려면 Sublime Text, visual studio code와 같은 에디터의 도입도 고려하면 좋다. ( 작성자도 visual stdio code를 사용하고 있다 ^_^ )

 

본 글에서는 windows기반으로 하였기 때문에 에디터는 메모장을 사용하였다.

---

아래 소스코드와 같이 html 파일을 만들고 거기에 자바스크립트를 실행하는데 특별하게 필요한 것이 없다.

위 소스에서 빨간색으로 표시한 것은 자바스크립트이다.

 

작성 후 .html 확장자로 지정하고, 파일 형식은 모든 파일로 한다.

인코딩 부분도 UTF-8로 변경시켜주고 원하는 경로에 저장하면 된다.

 

만들어준 소스코드를 실행하기 위해, 브라우저를 키고 ctrl + o 키를 눌러서 저장했던 파일을 불러와주면 된다.

 

그러면 아래와 같이 소스 코드가 실행되는 것을 확인할 수 있다.

---

 콘솔 사용법 

직접 소스코드를 변경하기 귀찮을 때, 좀 더 손 쉽게 자바스크립트 코드를 실행하는 방법에 대해서 알아보자.

 

[F12] 키를 눌러서 개발자 도구를 켜준다.

개발자 도구의 콘솔 환경에서 자바스크립트 코드를 입력하고, Enter키를 누르면 코드가 실행되는 것을 확인할 수 있다.

해당 콘솔창에서는 html을 작성하지 않고, 자바스크립트 코드만 작성하면 된다.

 

---

 에디터 ( IDE ) 

코딩에 좀 더 편하고, 많은 기능을 제공해주는 개발 도구를 '에디터'라고 한다.

도구는 자신에게 필요한 도구를 찾아서 사용하면 된다.

 

본 글 작성자는 'Sublime Text'와 'Visual Studio Code'를 추천한다.