자바스크립트 시작하기

3. 바닐라 자바스크립트(Vanilla JS)

• 프레임워크나 라이브러리를 사용하지 않는 순수한 자바스크립트를 의미하는 용어
• 바닐라 자바스크립트 = 순수 자바스크립트
• 자바스크립트 - 브라우저단에서 표시되는 웹 페이지를 제어하는 목적으로 개발되고 사용되는 언어
• 과거의 자바스크립트는 브라우저의 호환성 문제, 사용의 편리성 등의 이유로 순수 자바스크립트 만을 사용해서 개발 어려움
• (jQuery와 같은 별도의 라이브러리 함께 사용)
• 최근 프론트엔드 개발에서 많이 사용되는 프레임워크(React.js, Vue.js, Angular js) 라이브러리 X 순수 자바스크립트 기반으로 제작된 프레임워크

4. Hello, Javascript!

HTML <script> 태그 사이에 자바스크립트 코드를 작성

    <script>
        document.write("Hello, Javascript!");
    </script>

5. internal, external, inline

• 내부(internal) 자바스크립트 HTML문서 내부에 <script> 태그 사용해서 작성

      <script>
          document.write("Hello, Javascript!");
      </script>

• index.html
• 외부(external) 자바스크립트 외부에 별도의 .js파일을 만들고 연결해서 사용

  	document.write(’Hello, External Script!’);
  

  index.html
• <script src="main.js"></script>
• main.js
• 인라인(inline) 자바스크립트 이벤트 속성을 HTML 속성으로 사용해서 코드를 작성

  	<button onclick="document.write('Helllo, Inline Script!')">인라인 스크립트</button>
  

• index.html

6. 자바스크립트 작성법 정리

• 주의
• 외부 자바스크립트 방법을 사용할 때는 내부 자바스크립트 방법과 혼합해서 사용X
• 버튼을 누르면 버튼이 사라지는 이유
• document.write() 라는 자바스크립트 코드가 body 태그 안의 내용을 전부 지우고 소괄호() 안에 추가된 문자를 body 태그 안에 새롭게 추가하는 기능을 하기 때문

7. 주석(Comment)

• 프로그래밍 코드 내부에서 어떠한 내용을 메모처럼 작성하기 위해서 사용할 수 있는 문법
• 한 줄 주석　윈도우 ctrl + /　맥 cmd + /

	// 한 줄 주석

• 여러 줄 주석　윈도우 alt + shift + a　맥 option + shift + a

	/*
		여러 줄 주석
		여러 줄 주석
		여러 줄 주석
	*/

8. Code Runner

Code Runner 익스텐션 설치

• HTML 파일 없이 javascript 코드 실행 가능
• document.write() 대신 console.log() 사용

• 체크 시 코드러너 익스텐션 실행될 때 마다 이전 기록은 사라지고 새롭게 출력됨