[J.S] 1. 자바스크립트 코드 작성 방법

1.0. 코드 작성 방법

웹 브라우저에 표시할 HTML 문서에 자바스크립트 적용시 HTML 문서와 자바스크립트 파일을 연결해야 함

웹상에서 단순히 자바스크립트 코드를 실행 한다면, console 창이나 editor를 사용 가능 

1.1. HTML 파일과 자바스크립트 연결하기

HTML 과 자바 스크립트를 연결 하는 두가지 방법:

1.1.1. 내부 스크립트 방법

HTML 파일에서 <script></script> 태그의 콘텐츠 영역에 자바 스크립트를 작성 하는 방식

1.1.2. 외부 스크립트 방법

Js확장자로 된 파일을 별도 생성

생성한 파일에 자바스크립트 코드를 작성 후 문서로 연결

1.1.3. Script 태그 사용 위치

Script 태그는 항상 body 태그의 종료전에 사용 

내부 외부 스크립트 방식이 모두 동일 

1.2. 자바스크립트 코드 실행하기 

웹 상에서 작동하는 것과 별개로 단순히 자바스크립트만 실행 하고 싶다면?

웹브라우저의 콘솔창이나 VScode 확장프로그램을 이용

1.2.1. 콘솔창 사용하기

 

• 크롬 브라우저에서 F12 키를 눌러 개발자 도구를 열고, Console 탭으로 이동
• > 꺽쇠 화살표 옆 입력란을 클릭하면 커서가 활성화
• 자바스크립트 코드를 작성한 후 Enter를 누르면 결과가 바로 출력

 

 

1.2.2. 확장 프로그램 사용하기

VS Code와 같은 코드 에디터에 Code Runner 같은 확장 프로그램을 설치하여 .js 파일을 직접 실행

*주의 : 확장프로그램을 사용하면 document.write() 대신에  console.log() 메서드를 사용. 

글씨가 보이지 않거나 깨져서 나온다면 최신 버전 Node.js를 설치 후 피시 재부팅 후 다시 시도.   

 

 

*해당 문서는 김기수 님께서 작성하신 HTML+CSS+자바스크립트 책을 읽고 이해한대로 자바스크립트를 요약한 정리입니다. 

본 문서는 상업적인 목적으로 사용이 불가능 함을 고지 합니다. (개인 공부를 남기기 위한 목적임을 명백히 고지 합니다.)