자바스크립트 설치 방법

오늘은 자바스크립트를 처음 입문하시는 분들을 위해 실습 환경 구축, 웹 브라우저 실습 방법에 대해 알아보려고 합니다.

실습 환경 구축

1. 구글에 들어가서 "visual studio code" 라고 검색을 하고 Download를 클릭합니다.
(오른쪽 설명 보시면 아시겠지만 다양한 언어를 코딩할 수 있는 코드 편집기입니다.)

2. 개인의 컴퓨터에 따라 다운로드 버튼을 클릭해줍니다.

동의합니다 클릭 후 다음

원하시는 경로에 저장하시면 됩니다

다음

PATH에 추가는 환경변수 설정에서 이 프로그램의 PATH를 추가할 것인지를 묻는 것 입니다.

확인해 보시고 설치 클릭

3. 설치를 완료합니다.

이렇게 실습 환경 설치를 완료하였습니다.

웹 브라우저 실습 방법

비주얼 스튜디오 코드의 실행 화면

 

1. 상단에 File -> Open Folder를 클릭해줍니다.

 

2. 본인이 원하시는 경로에 폴더를 지정해줍니다. (저는 바탕화면에 새 폴더를 만들어서 지정해주었습니다)

 

3. 다음과 같이 폴더가 생겼고 우 클릭 후 New File 클릭

 

4. hello.html 이라고 만들어줍니다.

 

5. doc라고 검색을 한 뒤, Ctrl + 스페이스 바를 눌러주면 다음과 같이 나오고 Enter를 눌러줍니다.

 

6. 다음과 같이 html 태그로 구성된 내용들이 나오게 됩니다.

 

HTML을 잘 모르신다면 태그, 요소, 속성에 대해 알아야합니다.

태그를 사용해 만들어진 것을 요소라고 합니다.

(위 사진 참고)
갈색 : 시작태그, 끝태그 (항상 시작태그와 끝태그로 구성되어 있습니다)
빨간색 : 속성
파란색 : 속성값

(다른 예시)
<img src = "abc.png"></img>

<img> : 시작태그
</img> : 끝태그
<im src = "abc.png" : 여기서 src는 속성이며 어떤 사진을 불러올 것인지 지정하는 것입니다.

간단히 설명 드렸지만 HTML이 무엇인지, 태그가 무엇인지 잘 모르신다면 검색해 보시길 바랍니다.

 

7. scri를 입력하고 Ctrl + 스페이스바를 누르면 사진과 같이 나오고 Enter

 

그러면 나오게 되는 <script></script> 태그가 보이게 되고, 이 태그 안에 자바스크립트 코드를 작성하는 것 입니다.
사진 14번 라인과 같이 코드를 작성해줍니다.

console.log() -> 이 메소드는 주로 디버깅을 목적으로 변수나 문자 등을 출력하기 위해 주로 사용합니다.

개인이 작업을 하다가 어디까지 값이 넘어오는지? 변수의 값이 제대로 넘어오는지 등 그외에도 다양하게 활용합니다.

 

 

9. 구글이나 파이어폭스 등 웹 페이지에 hello.html 파일을 드래그해서 가져다 놓습니다.

 

10. F12(개발자 도구)를 눌러준다면 다음과 같이 Hello가 출력되는 것을 확인할 수 있습니다.