[JavaScript] Script의 적용 방식과 Object Model

Script 사용 방식

• inline 방식
  • 태그에 직접 스크립트 기술
    • onclick 내 script 문법을 사용하면 실행 가능

    <input type="button" onclick="alert('Hello World!')" value="Hello ~~" />
    

    • 정보(HTML) + 제어(script) 형태로 유지보수가 굉장히 힘듦 / 처리문제 발생
• script Tag 방식 : <script></script>
  • onclick 내용을 addEventListener(click, function()) 형태로 변경
  • inline 방식의 이벤트 부분을 외부 코드로 작성
  • 하나의 element를 지정하여 출력
  • 정보와 제어를 분할하여 유지보수 편리
• script 파일 분리 방식
  • 외부 파일을 불러와 실행
  • src 속성에 파일의 링크 및 위치를 삽입하여 load
  • 파일을 서로 분리하여 유지보수의 편의성 증가 및 중복 제거
  • 캐시를 통해 저장해 파일을 보관한다
  • script 파일을 불러올 수 있음
  • <script src="./script.js"></script>

Object Model

• JSC(JavaScript Core) / BOM(Browser Object Model) / DOM(Document Object Model)
• 여러 구성요소를 객체로 만드는 것
• 객체 : 제어할 수 있는 무언가 → getElementById( )를 사용해 객체를 찾을 수 있음
• → DOM 사용

1. Window
   • 창 전체를 객체로 사용
   • DOM, BOM, JSC는 모두 Window객체의 자식객체
   • 자주 사용하는 alert, document 등은 window.alert, window.document 이다.
2. BOM
3. DOM
4. JSC
   • BW, GAS, Node.js 모두의 공통 언어
   • Object, Array, function, Date 등…

자세한 DOM, BOM은 다음에 알아보자