반원 블로그

JavaScript 1.개요 및 기본구조 본문

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에 작성
저작자표시 비영리 변경금지

'2018~ > 프론트 엔드 기초(HTML, CSS, JavaScript)' 카테고리의 다른 글

JavaScript 4. 조건문 (if, switch) 과 반복문( while, for,foreach ), 배열  (0) 2019.08.14
JavaScript 3.연산자(산술, 비교, 삼항, 논리)  (0) 2019.08.12
JavaScript 2.변수, 변수 스코프(영역)  (0) 2019.08.12
Firebase 1.개요, 프로젝트 생성  (0) 2019.08.12
BootStrap 1.부트스트랩 개요  (0) 2019.08.12
CSS 3. CSS파일 불러오기  (0) 2019.08.12
CSS 2.Box Model, margin, padding, border  (0) 2019.08.12
CSS 1.CSS란? CSS 적용 방법(요소, 선택자)  (0) 2019.08.12
'2018~/프론트 엔드 기초(HTML, CSS, JavaScript)' Related Articles more
Comments