dukDukz
2021.03.25 JS Document. 의 활용 본문
developer.mozilla.org/ko/docs/Web/API/Document
what_is_js.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
/* 1. 변수의 타입
ingoo ="1";
ingoo2 = 1;
ingoo3 = new Date(); //data type : object
console.log(typeof(ingoo));
console.log(typeof(ingoo2));
console.log(typeof(ingoo3));
*/
/***************************************************************************/
/* 2. 함수의 동작
// 함수는 호출 시에만 동작한다.
function sum(a,b,c){ //함수를 만들고 각각 3개의 변수를 선언
console.log(a+b+c);
}
// setInterval() 과 같은 모양 - 함수 호출
sum(1,2,3); // a=1, b=2, c=3
console.log((sum(1,2,3)));
a = sum(1,2,3); //이건 불가능 sum(1,2,3)가 datatype이 없기 때문에 a에 저장이 불가능함
*/
/**************************************************************************/
/*3. return 을 쓰는 경우
function sum(a,b,c){ //이걸 해결하기 위해 return을 씀 - return은 어떤 값(데이터 타입)까지만 만들어준다.
return a+b+c;
}
a = sum(1,2,3);
console.log(a);
console.log(typeof(a)); // type of a : number
*/
/*******************************************************************************/
/* 목표 : 사각형의 넓이를 구하는 함수 만들기*/
// 세로가 10~1까지 가로가 10~1까지 있는 각각의 넒이를 구하라
/*
function box(width, height){
return width*height; // return은 함수의 결과 값을 가지고만 있는거다.
}
box1 = box(10,10);
box2 = box(9,9);
box3 = box(8,8);
box4 = box(7,7);
box5 = box(6,6);
box6 = box(5,5);
box7 = box(4,4);
box8 = box(3,3);
box9 = box(2,2);
box10 = box(1,1);
console.log(box1);
console.log(box2);
console.log(box3);
console.log(box4);
console.log(box5);
console.log(box6);
console.log(box7);
console.log(box8);
console.log(box9);
console.log(box10);
*/
</script>
</head>
<body>
</body>
</html>
what_is_obj.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="root">
<div class="na1">
</div>
</div>
<div id="parent-id">
<p>hello world 1</p>
<p class="test">hello world 2</p>
<p class="test">hello world 3</p>
<p>hello world 3</p>
<p>hello world 4</p>
</div>
<input id = "btn2" type="button" >
<button id= "btn3"></button>
<script type="text/javascript">
div = document.querySelector('#root'); // document 객체 안에서 querySelector 이 동작을 실행함 string으로 가져옴
console.log(typeof(div)); //object
console.log(div);
//작성을 위한 문서 스트림을 엽니다. window.open 과 같은 기능
//document.open('https://naver.com','id','width="400" height="300"'); //팝업 허용하면 열림
var get_class = document.getElementsByClassName('na1');
console.log(get_class);
var parentDOM = document.getElementById("parent-id");
console.log(typeof(parentDOM));
var test = parentDOM.getElementsByClassName("test"); // a list of matching elements, *not* the element itself , 엘리먼트들이 배열 안에 들어 있는 것, 이 자체로는 엘리먼트라고 할 수 없음
console.log(typeof(test));
console.log(test); //HTMLCollection[1]
for (var i = 0; i < test.length; i++) {
test[i].style.color = 'red';
}
//정상 출력됨
delBtn = document.createElement('button');
btnText = document.createTextNode('버튼1');
delBtn.onclick = function(){
alert('warning');
}
delBtn.appendChild(btnText); //버튼 1 텍스트 출력
parentDOM.appendChild(delBtn); // 버튼 1 출력
//정상 출력됨
Btn = document.createElement('button');
Btn.innerHTML = '버튼!!';
Btn.setAttribute('id','btn1');
parentDOM.appendChild(Btn);
//btn2 = document.querySelector('#btn2'); // 이건 필요가 없음
document.querySelector('#btn2').value = "버튼2";
// value 값 출력 안됨
btn3 = document.querySelector('#btn3');
//btn3.setAttribute('value', '버튼3');
//document.setAttribute("#btn3-1").value = "버튼3";
//정상 출력됨
btn4 = document.createElement('input');
btn4.setAttribute("type","button");
btn4.setAttribute("value","버튼입니다");
parentDOM.appendChild(btn4);
//출력 안됨
btn5 = document.setAttribute('button');
btn5.value('버튼5');
parentDOM.appendChild(btn5);
//출력 안됨
btn6 = document.createElement('button');
btn6.setAttribute("type","button");
btn6.setAttribute('value','버튼6');
parentDOM.appendChild(btn6);
</script>
</body>
</html>'웹 개발 > JAVASCRIPT' 카테고리의 다른 글
| 2021.03.30 버튼으로 슬라이드 제어 오류_해결 + 슬라이드 정지/재생 (0) | 2021.03.30 |
|---|---|
| 2021.03.25 경일 배너 만들기 (애니메이션) (0) | 2021.03.25 |
| 2021.03.24 JS에 대해 (0) | 2021.03.24 |
| 2021.03.23 사진 슬라이드 _ js (2) | 2021.03.23 |
| To do list_ Array 배열 없이 요소 삭제하기 (4) | 2021.03.23 |
'웹 개발/JAVASCRIPT' Related Articles
more
