📅2024. 01. 18 29일차

---

📝 JavaScript란?

• “HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 언어”
• 객체기반 스크립트 언어
• 동적 언어이다.

컴파일 언어

• 소스코드를 작성하고 그 코드를 build 과정을 거쳐서 컴파일 한다. 그 결과물로 실행파일을 실행하는 형태의 개발언어.
• 실팽파일 -> 어셈블리어(거의 기계어)
• 실행속도 ↑
• 실행을 하고 디버깅도 하고 결과를 보려면 컴파일 과정이 필요하다.

스크립트 언어

• 소스코드를 작성하면 그 소스코드를 직접 실행하는 언어
• 실행속도 낮음
• 인터프리터 -> 소스코드 번역기(그때그때 번역(실행))

• 현대의 프로그래밍 소프트웨어&하드웨어 ↑ 스크립트 언어도 빠른속도를 보장
  -> c,c++같은 언어보단 절대적으로 느리다.

DOM (문서 객체 모델)

• 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.
• 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다.

DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이기도 하다. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 한다.

트리 자료 구조로 구축이 되기 때문에, HTML 문서는 최종적으로 하나의 최상위 노드(root 노드)에서 시작해
자식 노드들을 가지며, 아래로만 뻗어나가는 구조로 만들어지게 된다.

• 예시
  

이렇게 HTML 문서 안에 h2 태그로 감싸진 text가 존재하고 있을 것 이다.
해당 문서는 트리 구조로 표현한다면 아래 처럼 표현할 수 있다.

---

jquery

• jQuery는 javascript를 함수로 구현해 놓은 라이브러리 이다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- J Query 사용 할 준비 : html 박스 맨 위에 적는다-->

📒kakaopay securities 페이지 만들기

• 1차시도 Top-Bar 구현

• 2차시도 1차 메뉴 세부 디자인 중

• 3차시도 2차 메뉴 레이아웃

• 4차시도 hover 이벤트, 높이 구해오기, this, find, children, height