BOM (브라우저 객체 모델(Browser Object Model))
웹 서비스 개발은 브라우저와 밀접한 관련이 있습니다. 모든 서비스는 사실 웹 브라우저를 바탕으로 실행이 되니까요.
이 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model)이라고 부릅니다. 이 브라우저 객체 모델(BOM)을 이용해서 Browser와 관련된 기능들을 구성합니다. DOM은 이 BOM 중의 하나입니다.
DOM (문서 객체 모델(The Document Object Model))
문서 객체란 <html>이나 <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 합니다. (그럼 html문서의 태그들이 객체에 담긴 상태를 의미하는 것일까요? )
여기에 Model을 붙였는데 Model이라는 영어 단어에는 모형, 주형이라는 의미도 있고 모듈이라는 의미도 있습니다. 비슷하게 여기서는 문서 객체를 '인식하는 방식'이라고 해석할 수 있습니다.
이제 조금은 명확해 지지 않았나요? 이제 조금 더 명확하게 DOM을 정의해보겠습니다. DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있습니다.
이제 DOM을 보게 되면 웹 브라우저가 html 페이지를 인식하는 방식을 이야기 하거나 문서 객체(document object)와 관련된 객체의 집합에 관한 이야기라는 것을 쉽게 추측할 수 있습니다.
addEventListener를 이용해서 버튼을 만들기
<body>
<button id="btn">버튼</button>
<script type="text/javascript">
let btn = document.querySelector("#btn") // 데이터타입 : Object, 객체로 반환해서 나타낸다.
// or-> let btn = document.getElementById('btn')
btn.addEventListener('click',clickBtn)
function clickBtn(){
console.log('hellow world!')
} // btn.addEventListener -> btn이 HTML에 관련된 객체여야만 addEventListener를 쓸 수 있다.
// addEventListener : 인자값은 총 2개이며 첫번째 인자값에는 String(이벤트명)을 넣습니다.
// 두번째 인자값에는 콜백(callback) 내용을 넣습니다.function aa(num1,num2){
return num1 + num2
}
aa(1,2)
let obj = {
sum:aa, // aa,
}
console.log(obj.sum) // ƒ aa(num1,num2){ return num1 + num2 } function 함수(param){
console.log(" '함수' 안에서 실행 : ", param)
param()
}
function 테스트(){
console.log('hello world!')
}
함수(테스트)
// 매개변수에 함수가 들어오는 경우가 callback
// 인자값에 함수를 집어넣을 수 있다 함수 코드를 넣을 수 있다. -> ()쓰지 않고 넣을 수 있다.
// 그러면 함수를 실행시키기 위해선 어떻게 해야하나? -> param()이처럼 콜백(callback)은 인자값에 함수를 넣어서 함수안에서 다른 함수를 실행시키고 싶을 때 사용하는 것이다.
심화단계 --
function 함수(type,param){
if(type =="click"){
param()
} else{
console.log("type를 console로 입력해주세요")
}
}
function 테스트(){
console.log('hello world!')
}
함수("click", 테스트)
// -> 함수 매개변수에 type, param을 넣고 type에 click이라는 string 인자값을 넣음으로써 연결지을 수 있다.
---------------------------------------------------------------------------------------
let elementObj = {
addEventListener : 함수,
}
// elementObj.addEventListener("click", 테스트) 1.
// =
// elementObj.addEventListener("click", [함수코드]) 2.
3.
elementObj.addEventListener("click", function() { console.log('익명함수')})
elementObj.addEventListener("click", function() { console.log('두번째')})
elementObj.addEventListener("click", () => {console.log('세번째')})
elementObj.addEventListener("click", () => console.log('네번째'))
elementObj.addEventListener("click", _ => {console.log('다섯번째')})
// 함수코드를 넣는 방법
// 1. 함수를 정의한 다음에 함수명만 작성해서 보내기.
// 2. 익명함수를 바로 작성해서 보내는 방법도 있다.
// 3. 익명함수를 Arrow 함수로 바꿔서 보내는 방법도 있다.
script 외부연결과 onload
자바스크립트 파일을 따로 만들어준다 -> index2.js
<head> 부분에 src="/index2.js를 추가로 넣어준다.
<title>Document</title>
<script type ="text/javascript" src="./index2.js"></script>
</head>
onload
onload에는 2가지 방식이 있다
1. 첫 번째는 옛날에 주로 쓰던 방식으로 window.onload = function( ) { }가 있다.
// 옛날문법 13년전에 사용
window.onload = function(){
// body부분은 코드를 인식하지 않는다 하지만 onload를 통해 함수 code block 안에 넣으면 전체가 로드가 되면서 실행이된다.
const btnElement = document.querySelector('#btn')
console.log('index2.js : ' , btnElement)
}
2. 두 번째는 요즘에 주로 쓰는 방식으로 window.addEventListener( 'DOMContentLoaded', ( ) => { })
window.addEventListener('DOMContentLoaded', () => { //DOMContentLoaded : HTML이 끝나면 실행한다.
// DOMContentLoaded는 HTML만 실행하기 때문에 시간이 더 적게 걸린다.
// code block
const btnElement = document.querySelector('#btn')
console.log('index2.js DOM Conetent Loaded : ' , btnElement)
'Javascript' 카테고리의 다른 글
| javascript 10일차 querySelectorAll( ), setInterval( ), setTimeout( ) (0) | 2022.01.12 |
|---|---|
| javascript 9일차 TO DO LIST 만들기 (0) | 2022.01.11 |
| Javascript 7일차 (0) | 2022.01.07 |
| Javascript 6일차 (0) | 2022.01.07 |
| Javascript 5일차 (0) | 2022.01.05 |
