JavaScript 시작하기

 

시작하기 이전에

Live Server 확장 프로그램 설치

   - vscode 내의 extension(확장) 부분에서 Live Server를 설치해 주세요.

 

 

1. html 파일 만들기 

   - index.html 파일에 들어가 ! 를 입력하면 기본적인 html 형식을 제공받습니다.

     이를 Emmet Abbreviation 이라고 합니다.

 

 

 

2. main.js 파일을 만들고, script 태그로 헤더에 연결해주기

   - script 태그에 src를 입력하여 외부 js파일을 만들 수 있습니다.

   - javascript를 먼저 읽은 뒤에 body 태그를 읽을 수 있도록 하기 위해 defer 속성을 추가해 줍니다.

 

 

 

3. js 파일이 잘 작동하는지 확인해보기

main.js 파일 작성

Live Server 실행

   - main.js 파일에 hello world 를 출력하는 코드를 입력해봅니다.

   - 그 뒤, index.html 파일을 우클릭하고 Open with Live Server를 입력하여 실행시킵니다.

console 에서 실행되는지 확인

   - 실행한 웹 창에서 f12키를 눌러 개발자 도구를 열고, console을 눌러서 hello world가 출력되는지 확인합니다.

   - 제대로 출력된다면 성공입니다.