2018~/프론트 엔드 기초(HTML, CSS, JavaScript)

JavaScript 1.개요 및 기본구조

반원_SemiCircle 2019. 8. 12. 21:30

JavaScript 란?

  • 사용자(클라이언트)의 동작(+요청)에 반응(+응답)하는 기능을 구현하기 위한 언어
  • 주로 웹 프로그래밍의 프론트 엔드에서 쓰이나, 다른 분야에서도 언어로서 사용
  • 우클릭 방지 기능도 JavaScript로 구현되어있다.

이벤트(Event)

  • 사용자가 하는 행동(동작)

JavaScript 특징

  • 인터프리터 언어 : 프로그램 코드 작성된 한 줄 해석하며 실행
  • 브라우저 엔진마다 실행순서나 원리가 조금 다를 수 있다.

JavaScirpt 의 예

  • 우클릭 방지
  • 구글 메뉴 버튼 클릭 시 위젯 보임
  • 특정 버튼 클릭이나 현재 마우스 위치에 따라 요소의 속성 값이 변함(enable/disable)
  • 마우스 스크롤 시 추가 화면 로딩

JavaScript 코드 작성 태그

<script type="text/javascript">자바스크립트 코드</script>

JavaScript 연습 예제 : index.html

  • 자바스크립트를 이용해 요소에 변화를 주는 방법 예시
  • 나중에는 선택자를 통해 요소 접근하여 변화를 주거나 이벤트에 대한 코드 구현을 주로 할 것
  • 아래 코드는 잘 쓰이진 않는다(태그가 생략되있으므로)
    <!DOCTYPE html>
<html lang="ko">
  <head>
      <script type="text/javascript">
          document.write('Hi!');
      </script>
  </head>
  <body>     
  </body>
</html>

JavaScript 파일 불러오기

  • js폴더에 main.js가 있는 경우
    <script src="js/main.js"></script>

HTML 구조의 이해

  • HTML Trees 를 DOM trees라 한다.
  • Document Object Model. HTML 문서를 이루는 객체 모델
  • 웹 브라우저는 Tree 구조 형태로 적혀있는 HTML문서를 해석(=파싱(Parsing))해서 우리에게 시각적으로 보여준다.
  • 웹 브라우저가 HTML 문서를 우리에게 보여주는 과정은 다음과 같다.
  1. HTML 코드 - DOM tree 분석
  2. 렌더링 - 실제 페이지 제작
  3. 스타일 코드 적용
  4. 3이 반영된 페이지

JavaScript 코드가 위치할 수 있는 위치

  • head에 script가 있는 경우 : HI! 다음 Bye가 생성된다.

  • 즉. html 요소들이 로딩되기 전 실행이 되야하는 경우는 head에 스크립트 작성

    <!DOCTYPE html>
<html lang="ko">
  <head>
      <script type="text/javascript">
          document.write('Hi!');
      </script>
  </head>
  <body>
      <p>Bye~</p>
  </body>
</html>

  • body에 script가 있는 경우 : Bye~ 다음 Hi!가 생성된다.

  • 즉. html 요소들이 로딩된 이후 실행이 되야하는 경우는 body에 스크립트 작성

    <!DOCTYPE html>
<html lang="ko">
  <head>

  </head>
  <body>
      <p>Bye~</p>
      <script type="text/javascript">
          document.write('Hi!');
      </script>
  </body>
</html>

JavaScript는 어디에 작성해야 하는가?

  • 보통 head에 존재
  • 다만 모든 태그가 불러와진 다음에 스크립트 실행이 필요한 경우에는 body에 작성
저작자표시 비영리 변경금지