/*
문서객체모델(DOM, Document Object Model)
웹브라우저가 html페이지를 인식하는 방식이며 좁은 의미로는 document객체와
관련된 객체를 말한다. 문서객체를 이용하면 html페이지에 태그(요소, element)를
추가, 수정, 삭제할 수가 있다.
문서객체는 텍스트노드를 갖는객체(h1, button, ...)와 텍스트노드를 갖지 않는
객체(body, input, ...)가 있다.
1. 속성
a. innerHTML : 태그 내부의 문자를 조작
b. style : 태그 스타일을 조작
c. setAttribute(<속성이름>, <속성값> ) : 태그의 속성을 설정
d. getAttribute(<속성이름>) : 태그의 속성을 읽기
2. 매서드
a. createElement(태그) : 정의된 태그(문서객체)를 생성
b. createTextNode(문자열) : TextNode를 생성
c. appendChild(태그) : 지정된 태그를 자식태그로 추가
d. getElementById(id) : id 속성을 가진 태그(문서객체)를 선택
e. getElementByClass(class) : class 속성을 이용해서 문서객체를 선택
f. querySelector(선택자) : 선택자를 이용해서 문서객체를 선택
g. querySelectorAll(선택자) : 선택자를 이용해서 복수개의 문서객체를 선택
*/
window.onload = () => {
document.write('<h1>Hello DOM</h1>');
let header = document.createElement('h1');
let text = document.createTextNode('Hello DOM Two');
header.appendChild(text);
document.body.appendChild(header);
for(let key in header){
document.write(`${key} = ${screen[key]}<br>`);
}
}
<script>
// ECMA6(1025) 도입된 내용 : let/const, class, arrow function,
//template literal(''), 기본데이터타입인 Symbol()...
window.onload = () => {
let img = document.createElement('img');
// console.log(img);
img.src = 'img/bts.jpg';
img.width = 500;
img.height = 300;
document.body.appendChild(img, '<hr>');
//2. set attribute() : blackpink.jpg
let img1 = document.createElement('img');
img1.setAttribute('src', 'img/blackpink.jpg');
img1.setAttribute('width', 500);
img1.setAttribute('height', 300);
document.body.appendChild(img1, '<hr>');
};
</script>
<script>
// TextNode : innerHTML vs innerText
window.onload = () => {
// 1. innerHTML
let output = "";
output += '<ul>';
output += '<li>HTML</li>';
output += '<li>CSS</li>';
output += '<li>JavaScript</li>';
output += '<li>React</li>';
output += '</li>';
document.write(output);
document.write(output);
document.body.innerHTML = output;
document.write('<h1>Document Object Model1</h1>');
document.body.innerHTML = '<h1>Document Object Model2</h1>';
// 2. innerText
document.body.innerText = '<h1>Document Object Model3</h1>';
}
</script>
<script>
// 1.getElementById
window.onload = () => {
let header1 = document.getElementById('header-1');
let header2 = document.getElementById('header-2');
// 문서객체의 속성을 변경
header1.innerHTML = "getElementById('header=1')";
header2.innerHTML = "getElementById('header=2')";
}
// // 2.getElementsByTagName
window.onload = () => {
let headers = document.getElementsByTagName('h3');
//type : collection(즉, 배열이라고 생각)
headers[0].innerHTML = 'getElementsByTagName-1';
headers[1].innerHTML = 'getElementsByTagName-2';
headers[2].innerHTML = 'getElementsByTagName-3';
for(let i in headers){
headers[i].innerHTML = 'for -' + i;
}
}
// 3.getElementsByName
window.onload = () => {
let headers = document.getElementsByName('bbb');
for(let i in headers){
headers[i].innerHTML = 'ByNama -' + i;
}
}
// 4.getElementsByClassName
window.onload = () => {
let headers = document.getElementsByClassName('xxx');
for(let i in headers){
headers[i].innerHTML = 'ByClassNama -' + i;
}
}
</script>
</head>
<body>
<h3 id="header-1" name="aaa" class="xxx" >header-1</h3>
<h3 id="header-2" name="bbb" class="xxx" >header-2</h3>
<h3 id="header-3" name="ccc" class="yyy" >header-3</h3>
</body>
<script>
// 1.querySelector - 문서객체
window.onload = () =>{
let header1 = document.querySelector('#header-1');
let header2 = document.querySelector('#header-2');
header1.innerHTML = 'querySelector 매서드 1';
header2.innerHTML = 'querySelector 매서드 2';
}
// 2. querySelectorAll - 배열형태
window.onload = () => {
let headers = document.querySelectorAll('h3');
for(let i in headers){
headers[i].innerHTML = 'querySelectorAll -' + i;
}
}
// 3. 동적으로 문서객체를 변경하기
// header - 3를 선택해서 header-1처럼 스타일을 변경
// hint) 문서객체라면 속성(스타일과 관련된 속성은 style)
window.onload = () => {
let header3 = document.querySelector('#header-3');
header3.style.border = '2px solid';
header3.style.color = 'blue';
header3.style.backgroundColor = 'orange';
}
// 4. 문서객체를 삭제하기
// header-4를 삭제해 보세요
window.onload = () => {
let header4 = document.querySelector('#header-4');
document.body.removeChild(header4);
}
</script>
</head>
<body>
<h3 id="header-1" style=
"border:2px solid red;
color:green;
background-color:mediumseagreen;"
>Header</h3>
<h3 id="header-2">Header</h3>
<h3 id="header-3">Header</h3>
<h3 id="header-4">Header</h3>
</body>
지구공전.html
<script>
window.onload = function(){
let sun = document.getElementById('sun');
let earth = document.getElementById('earth');
let moon = document.querySelector("#moon"); // 쿼리는 #인지 .인지 표기
// style -화면에서의 절대 위치
sun.style.position = 'absolute';
earth.style.position = 'absolute';
moon.style.position = 'absolute';
sun.style.left = 250 + 'px';
sun.style.top = 250 + 'px';
let earthAngle = 0;
let moonAngle = 0;
setInterval(function(){
let earthLeft = 250 + 150 * Math.cos(earthAngle);
let earthTop = 250 + 150 * Math.sin(earthAngle);
let moonLeft = earthLeft + 50 * Math.cos(moonAngle);
let moonTop = earthTop + 50 * Math.sin(moonAngle);
earth.style.left = earthLeft + 'px';
earth.style.top = earthTop + 'px';
moon.style.left = moonLeft + 'px';
moon.style.top = moonTop + 'px';
earthAngle += 0.1;
moonAngle += 0.3;
}, 1000/10);
}
</script>
</head>
<body>
<div id="sun">●</div>
<div id="earth">○</div>
<div id="moon">*</div>
</body>
알파벳.html
<script>
// A. 생성자함수
// 움직일 수 있는 범위 설정
let canvasWidth = 700;
let canvasHeight = 400;
//알파벳생성자함수
function MovingAlphabet(){
// 알파벳 생성
this.body = document.createElement('h1');
this.body.innerHTML = randomAlphabet();
this.body.style.position = 'absolute';
document.body.appendChild(this.body)
// 알파벳 위치와 속도
this.x = nextRandomInteger(canvasWidth);
this.y = nextRandomInteger(canvasHeight);
this.vx = alphabetSpeed(10);
this.vy = alphabetSpeed(10);
}
//공통함수인 움직이는 메서드
MovingAlphabet.prototype.move = function(){
// 범위 검사
if(this.x<0 || this.x>canvasWidth){this.vx *= -1;}
if(this.y<0 || this.y>canvasHeight){this.vy *= -1;}
// 이동
this.x += this.vx;
this.y += this.vy;
//객체에 스타일(left, top) -> 화면에서 이동
this.body.style.left = this.x + 'px';
this.body.style.top = this.y + 'px';
}
</script>
<script>
// B. 보조함수
// 1. 알파벳 선택함수
let alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
function randomAlphabet(){
return alphabet.charAt(nextRandomInteger(25));
}
// 2. 랜덤하게 알파벳 선택하는 함수
function nextRandomInteger(limit){
return Math.round(Math.random() * limit);
}
// 3. 알파벳의 움직이는 속도를 랜덤하게
function alphabetSpeed(maxSpeed){
return Math.random() * maxSpeed - Math.random() * maxSpeed;
}
</script>
<script>
// C. 메인 로직
window.onload = function(){
// 랜덤하게 생성된 알파벳 객체를 저장할 배열을 선언
let movingAlphabets = [];
//생성할 알파벳 갯수
let count = 26;
for(let i=0; i<count; i++){
movingAlphabets.push(new MovingAlphabet());
}setInterval(function(){
for(let i in movingAlphabets){
movingAlphabets[i].move();
}
}, 1000/60);
}
</script>
'일 > javascript' 카테고리의 다른 글
| js09_builtin (0) | 2023.06.01 |
|---|---|
| js08_events (1) | 2023.06.01 |
| js06_BOM (0) | 2023.05.31 |
| js05_object (0) | 2023.05.31 |
| js04_function (0) | 2023.05.31 |