티스토리 뷰
1. 문서 객체 모델 ( DOM )
- 웹 문서를 메모리로 읽어 들여 트리형태의 구조로 변환한 것이 DOM이다.
- + 각 요소별 포함관계에 맞게 구조를 구성하게 된다.
- 문서의 각종 요소는 요소 노드(태그)로, 텍스트는 텍스트 노드로 변환한다.
- + 텍스트 노드는 title 태그나 h1태그 내에 작성하는 텍스트와 같은 것이 해당된다.
- 변환된 트리 구조를 이용하면, 자바스크립트로 웹 문서를 조작할 수 있다.
- + createElement()로 통해 요소 노드를, createTextNode()로 텍스트 노드를 생성할 수 있다.
- + 문서객체의 속성값을 설정하는 방법 : 요소.setAttrbute(속성, 값);
2. 제이쿼리
- 2006년에 출시된 자바스크립트 라이브러리
- 오픈소스로 제공되어 무료로 사용할 수 있으며, 주로 문서조작에 사용한다.
- 자바스크립트 코드 형식을 좀 더 직관적으로 이해할 수 있도록, 짧고 단순한 코드 형태로 변형하여 제공한다.
- 웹에서 제공하는 제이쿼리 라이브러리에 접속하여 제이쿼리를 사용할 수 있다.
- + script 태그 내에서 src 속성으로 해당 URL을 작성하면, 사용할 수 있다.
[ 1. Date 객체 응용 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - Date 객체 응용(***)</title>
</head>
<body>
<div id="digclock"></div>
<script>
function digclock() {
console.debug(`digclock() invoked.`);
let today = new Date();
let day = `${today.getMonth() + 1 }월 ${today.getDate()}일`;
let time = `${today.getHours()}시 ${today.getMinutes()}분 ${today.getSeconds()}초`;
// 월은 0월부터 시작하기에 1을 더해줘야 한다. (**)
document.querySelector("#digclock").innerHTML = day + time; // document.querySelector (*****)
setTimeout('digclock()', 1000);
// setTimeout() 내장 함수는 매 1초마다 지정된 함수를 호출하는데 사용한다. (**)
// 이 함수는 1. 호출할 함수명, 2. 주기( timeout, 밀리세컨드 단위로 지정해야한다. ) 지정해야 한다.
// 단, 1회성 설정이기에, timeout을 설정하여 함수를 계속 불러오도록 설정하였다. ( 함수 내에 설정해야 한다. )
// 핸들러에는 함수명만 적어주면 되기에, digclock 또는 digiclock()으로 작성해도 정상 작동한다.
// timeout 뒤에 인자값을 작성할 수도 있다.
} // dig clock
digclock();
// setInterval 내장함수는 "매"주기에 따라서, 자동으로 지정된 타임아웃 핸들러(함수)를 호출한다. (**)
setInterval(digclock, 1000);
// setInterval은 타임아웃을 지정해 주지 않아도 무한반복해 준다.
// 콘솔창을 보게 되면 함수가 얼마나 호출되고 있는지 확인할 수 있다.
</script>
</body>
</html>[ 2. 문서 객체 생성 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 문서객체(***)</title>
<script>
// 1. DOM 트리에 추가할 새로운 요소 노드( = 태그 )를 생성
// 2. 새로운 요소노드에 추가할 컨텐츠( = 텍스트 노드 )를 생성
// 3. 1 + 2 => 새로운 완전한 요소노드를 만들고
// 4. body 태그( = body 요소 노드 )에 추가!! -> 새로운 요소가 렌더링된다.
function add(){
let h3 = document.createElement('h3'); // 요소 노드 생성
let h3_content = document.createTextNode("내 이름은 홍길동이다!!"); // 텍스트 노드 생성
h3.appendChild(h3_content); // 요소 노드와 텍스트 노드 연결 (***)
document.body.appendChild(h3); // 생성된 문서 객체를 body에 추가 (***)
// appendChild는 자식으로 붙여라라는 의미이다. ( 자식이 있다면, 그 다음 자식으로 추가한다. )
}// add
</script>
</head>
<body>
<!-- 특정 태그 또는 여러 태그들에 이벤트 핸들러를 설정하려면, 다음 4가지의 개념을 알고 있어야 한다. -->
<!-- 1. Event Target : 어떤 이벤트가 발생하는 태그 -->
<!-- 2. Event Type : 발생할 이벤트의 유형 (ex. onclick은 마우스 클릭 이벤트이다!) -->
<!-- 3. Event Listener : 이벤트가 발생하길 기다리는 자 ( ex. onclick 속성 ) -->
<!-- 4. Event Handler : 이벤트가 발생했을 때, 이벤트를 기다리는 자 -->
<a href="#" onclick="add()">당신의 이름은 무엇입니까??</a>
<!-- 클릭하면 문서객체가 body에 추가되게 된다. -->
<!-- console 창에 document를 작성하면, 우리가 적은 코드가 보이게 된다. -->
</body>
</html>[ 3. 문서 객체 속성값 설정 ] (*)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 문서객체 - 속성설정</title>
<script>
function add(){
let img = document.createElement('img'); // 이미지 태그 생성
// 이미지 태그가 가지고 있는 속성의 값
img.src = "https://picsum.photos/id/684/600/400";
img.width = 200;
img.height = 200;
document.body.appendChild(img); // 생성된 이미지 태그를 doby에 추가
} // add
</script>
</head>
<body>
<a href="#" onclick="add();">[이미지 추가]</a>
<!-- 클릭을 할때마다 이미지가 추가되게 된다. -->
</body>
</html>[ 4. 문서 객체 속성 생성 및 변경 - setAttribute ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 문서객체 속성 생성(***)</title>
<script>
function add(){
// 1. 새로운 요소노드로 img 태그 생성
let img = document.createElement('img');
console.log(img instanceof Node);
console.log(img instanceof Element);
console.log(img instanceof HTMLElement);
console.log(img instanceof HTMLImageElement); // img 태그는 이에 해당하기에 위의 부모 태그에도 모두 들어갈 수 있다.
// 2. 새로운 img 태그에 속성 설정
img.setAttribute('src',"https://picsum.photos/id/684/600/400");
img.setAttribute('width', 100);
img.setAttribute('height', 100);
// + 이처럼 없는 속성도 생성할 수 있다.
img.setAttribute('id', 'picsum');
// setAttribute는 있는 속성은 값을 변경해 주고, 없는 속성은 만들어 준다. (***)
// 3. 새로운 img 태그 body에 추가
document.body.appendChild(img);
} // add
</script>
</head>
<body>
<a href="#" onclick="add();">[이미지 추가]</a>
</body>
</html>[ 5. 문서 객체 스타일 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 문서 객체 스타일</title>
<script>
function textstyle(){
document.getElementById('msg').style.color = "blue";
document.querySelector('#msg').style.fontSize = "30px";
document.querySelector('#msg').style.fontStyle = "italic";
} // textstyle()
function texthidden(){
document.querySelector('#msg').style.visibility = "hidden"; // hidden은 none과 다르게 자리는 남겨둔다.
} // text hidden()
function textvisible(){
document.querySelector('#msg').style.visibility = "visible";
} // textvisible()
// HTMLElement(요소).addEventListener('이벤트타입', 함수);를 통해 이벤트를 추가할 수 있다. (***)
// 이벤트는 w3school에서 더 자세히 확인할 수 있다.
</script>
</head>
<body>
<p id="msg">문서 객체 스타일 변경하기</p>
<input type="button" onclick="textstyle();" value="텍스트 스타일 변경">
<input type="button" onclick="texthidden();" value="텍스트 숨기기">
<input type="button" onclick="textvisible();" value="텍스트 보이기">
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 70일차 - 제이쿼리 ( 선택자 / 메소드 ) (*****) (0) | 2022.06.08 |
|---|---|
| KH 69일차 - 제이쿼리 ( jQuery ) 선택자 (***) (0) | 2022.06.07 |
| KH 67일차 - 자바스크립트 ( 사용자 정의 객체 / 배열 객체 / Date 객체 ) (*****) (0) | 2022.06.02 |
| KH 66일차 - 자바스크립트 ( 배열 / 객체 ) (****) (0) | 2022.05.31 |
| KH 65일차 - 자바 스크립트 ( 함수 / ES6 / 배열 (*****) ) (0) | 2022.05.30 |
댓글