Javascript #2 - 자바스크립트 Hello World!

최근에 맥북프로를 구매하면서 비주얼 스튜디오 코드의 사용법이 조금은 바뀌었다. 빨리 익숙해져야지..! 본격적으로 자바스크립트를 시작해보겠다. 대부분의 프로그래밍 언어를 배우면 시작하는 것! 바로 'Hello World!' 를 출력해보자!

1. Hello World! 출력하기!

일단 언제나 그랬듯 Visual Studio Code를 실행시켜준다. 자바스크립트 프로젝트 디렉토리를 만들고, main.js를 생성해준다. 자바스크립트의 출력문은!!

console.log("Hello World!");

이는 console이라는 API에 log라는 함수를 호출하여 사용하는 코드이다.

VSC가 아닌 node.js를 활용해도 자바스크립트를 공부할 수 있지만, 아직 필자는 프론트엔드 개발자가 목표이기 때문에 Visual Studio Code에서 HTML 문서를 만들어 자바스크립트와 연동하여 진행하겠다. ( 나중에 백엔드 분야에도 관심이 생기면 node.js도 공부할 예정 )

자바스크립트의 출력문

index.html 문서와 main.js를 연동하였다.

그 다음, 출력결과를 확인하려면? 전에 받아둔 'Live server'라는 익스텐션을 통해 확인할 수 있다. (VSC 익스텐션 관련 포스팅은 조만간 정리하여 포스팅 할 예정)

Hello World! 가 정상적으로 출력되었다.

Live server 를 이용해 브라우저를 켠 다음, 윈도우 사용자는 ctrl + shift + i, 맥 사용자는 command + option + i 를 눌러주면 개발자 환경 툴을 볼 수 있다. 필자는 맥북 이용자이기 때문에 후자의 방법을 사용했다. 그 다음, console이라는 탭을 클릭하면? 정상적으로 출력됐는지 확인할 수 있다.

 

※ 추가

개발자 환경 툴 탭 의 종류

1. elements = HTML과 CSS가 어떻게 이루어져 있는지, 자신이 짠 HTML, CSS 코드를 검사할 수 있다.

2. console = console 탭에서 자바스크립트 코드를 직접 입력하고 실행해 볼 수 있다.

3. source = 코드가 수행되는 과정을 디버깅할 때 유용하게 쓸 수 있다.

4. network = 얼마나 많은 크기의 데이터들을 주고 받는지 알 수 있다.

 

※ 자바스크립트 공식사이트

ecma-international.org

--> 실질적으로 많이 가는 사이트 : developer,mozila.org