20일: BOM과 DOM, window.onload(), addEventListener()를 활용한 js 문제풀이
2021.12.9.Thur.
✍ 복습
BOM과 DOM
- 프로그래밍의 목표는 생산성!
- 소프트웨어의 위기: 소프트웨어 개발의 지연
- Object Model: ex)html요소를 js입장에서는 객체로 취급
- 현재 프로그래밍의 기본 개념은 객체 지향 프로그래밍(Object Oriented Programming)
- BOM(Browser Object Model): js가 웹 브라우저를 객체로 취급하는 방식 → window, history, location, document, navigator
- DOM(Document Object Model): document 객체를 가지고 작업 → SAX(읽기전용), DOM(읽기/쓰기)
- DOM level 0: 이해하기 쉽고 간단
- DOM level 2: html과 js를 분리
<input type="text" id="age">
<button id="print">출력</button>
<script>
const age = document.querySelector('#age');
const print = document.querySelector('#print');
// 이벤트가 발생하는 곳: #print 이곳에 addEventListener
print.addEventListener('click',function(){
alert('fire')
});
}
</script>
JS 예제
- 성인 여부 확인
- 프로그래스바
- 숫자 입력받아 더하기
- 덧셈 계산기
- 덧셈 뺄셈 계산기
- select를 이용한 계산기
Author And Source
이 문제에 관하여(20일: BOM과 DOM, window.onload(), addEventListener()를 활용한 js 문제풀이), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wontwopunch/20일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)