- DOM - 응용문제 풀어보기
1.
buttond을 만들고 클릭하면 onclick을 이용하여 함수 fun1을 호출하고 결과를 출력합니다
script
<script>
const a = document.getElementsByTagName("h2");
document로 변수 a에 h2태그 객체를 넣어주고
const fun1 = () => {
console.log(a[0].innerText);
fun1이 호출되면 a의 [0]번쨰 칸을 text로 출력합니다
}
</script>
2.
button을 만드는 방식은 위와 같습니다 다른점은 fun2함수를 호출합니다
script
<script>
const b = document.getElementsByTagName("h3");
변수 b에 document로 태그가 h3인 객체를 담습니다
const fun2 = () => {
alert(b[0].innerHTML);
fun2함수를 만들고 호출되면
alert속성으로 b변수의 [0]번째 칸을 html속성으로 출력합니다
}
</script>
3.
이번에는 함수 fun3을 호출합니다
<script>
const a = document.getElementsByTagName("h2");
const b = document.getElementsByTagName("h3");
const divAll1 = document.getElementById('id1');
const fun3 = () => {
divAll1.innerText = a[0].innerText + " " + b[0].innerText;
divAll1.innerText에 a의[0]번째칸의 innertext 와
b의 [0]번째칸의 innertext를 연결해줍니다
문자열에서의 + 는 연결을 뜻합니다
}
</script>
4.
기출 변형입니다 버튼 4를 누르면 함수 fun4를 호출합니다
이번 문제는 상당히 자주사용하고 중요하기 때문에
2가지 방법 모두 알아보겠습니다
<script>
const fun4 = () => {
string 값으로 필요한 내용 그리기
const divAll2 = document.getElementById('id2')
let ul = "<ul>";
divAll2에는 body에 있는 div를 객체로 담습니다
let ul에는 문자 <ul>를 담습니다
for (let i = 1; i <= 100; i++) {
ul += "<li>" + i + "</li>"
이제 for문을 이용하여 1부터 100까지의 수를
변수 ul에 담긴 문자와 이어 붙여줍니다
( ul = <ul> <li> i(1,2,3,...) </li> )
}
ul += "</ul>;
이렇게 li의 입력이 끝나면 마지막으로 ul에 </ul>을 이어 붙여줍니다
( ul = <ul> <li> i(1,2,3,...) </li> </ul> )
divAll2.innerHTML = ul;
이후 divAll2 객체에 ul을 대입하여 출력합니다
javascript method 활용하기
const divAll2 = document.getElementById('id2')
const ul = document.createElement("ul");
이번 방식은 didAll2뿐만 아니라 ul까지 객체로 만들어줍니다
for (let i = 1; i <= 100; i++) {
const li = document.createElement("li");
li 객체를 생성합니다
li.appendChild(document.createTextNode(i));
appendchild는 <태그> 여기 <태그> 여기부분에 값을 넣어줍니다
document.createTextNode로 i를 사이에 넣어줍니다 document의 메소드입니다
ul.appendChild(li);
appendChild를 이용하여 위에서 i를 넣어 만들어진 li객체를 넣어줍니다
만들어진 li를 ul의 자식 태그로 추가
}
마지막으로 divAll2에 ul을 넣어
fun4가 호출되면 출력되게 만들어줍니다
divAll2.appendChild(ul);
}
</script>
- DOM - 응용 이미지 변경
이미지 교체 버튼을 누르면 이미지가 변경되게 script를 사용해봅시다
<body>
<img src="../images/호구마2.png" alt="" id="img1">
먼저 호구마2라고 이름지은 고구마 사진을 넣어줍니다
<button onclick="changeImg()">이미지 교체</button>
버튼을 누르면 이미지 교체이기 때문에
button 태그에 이벤트 onclick을 사용합니다
onclick 이벤트가 발생하는 경우 함수 cjangeImg가 호출됩니다
</body>
<script>
const changeImg = () => {
const img = document.getElementById('img1');
호구마2 이미지를 넣은 img태그의 객체를 만들어줍니다
img.src = "../images/호구마1.png";
img.src에 새로운 이미지의 경로를 대입하여
함수가 호출되면 출력되는 이미지의 경로를 바꿔 사진을 변경합니다
}
</script>
- script로 style 제어하기
javascript에서 html의 style을 넣어주거나 수정하는 방법을 알아보겠습니다
<body>
<h2 onclick="fun2()" id="id1">곧 점심시간</h2>
h2태그에 이벤트 onclick를 설정해 클릭하면 함수 fun2를 호출합니다
</body>
<script>
const fun2 = () => {
const ele = document.getElementById('id1');
ele에 h2의 객체를 만들어줍니다
style 변경의 양식입니다
css속성 제어하기
ele.style.color = "red";
ele.style.backgroundColor = "black";
}
</script>
- 구구단을 표에 출력하기
아래 구구단 출력 버튼을 누르면 이렇게 표가 출력되게 만들어봅시다
body안의 div태그안으로 구구단 출력문을 넣어봅시다
<body>
<div id="id1">
<!-- 여기에 구구단이 출력됩니다 -->
</div>
<button onclick="fun1()">구구단 출력</button><br>
button 태그에 onclick이벤트로 클릭하면 함수 fun1이 호출됩니다
</body>
<script>
const fun1 = () => {
const result = document.getElementById("id1");
result에 div태그의 객체를 담습니다
let tableElement = "<table class='table table-hover'>";
tableElement에 문자열 "<table>"을 담습니다
(class는 bootstrap입니다)
for (let i = 2; i <= 9; i++) {
tableElement += "<tr>";
tableElement += "<td>" + i + "단</td>";
for (let j = 1; j <= 9; j++) {
tableElement += "<td>" + i * j + "</td>";
}
tableElement += "</tr>";
}
tableElement += "</table>";
result.innerHTML = tableElement;
}
1~100 출력과 마찬가지로
for문을 이용하여 talbeElement에 문자열을 이어 붙여줍니다
+= 를 꼭 주의하며 사용합시다
document의 메소드를 이용하여 출력하는 방법도 있습니다
fun1 = () => {
const divAll1 = document.getElementById('id1');
const table = document.createElement("table")
div태그와 table 태그의 객체를 만들어줍니다
for (let i = 2; i <= 9; i++) {
const tr = document.createElement("tr");
const th = document.createElement("th");
tr태그 th태그의 객체를 만들어줍니다
th.appendChild(document.createTextNode(i + "단"))
appendChild를 이용하여 th객체의 th태그의 사이에 i + "단"을 끼어 넣습니다
tr.appendChild(th);
appendChild를 이용하여
th객채의 th태그사이에 tr객체의 tr태그를 사이에 넣습니다
for (let j = 1; j <= 9; j++) {
const td = document.createElement("td");
td태그의 객체를 만들었습니다
td.appendChild(document.createTextNode(i * j));
appendChild 를 이용하여 td객체 사이에 i*j를 넣어줍니다
tr.appendChild(td);
appendChild를 이용하여
tr태그 사이에 td태그를 넣어줍니다
}
table.appendChild(tr);
appendChild를 이용하여
table 태그 사이에 tr 태그를 넣어줍니다
}
document객체의 메소드로 1~100까지의 숫자출력하기에서 사용된
2번째 방법의 응용입니다 읽어보고 이해가 안된다면 다시공부합시다
여기서 중요하게 봐야하는 부분은 td태그와 th태그의 객체 생성부분입니다
// class 추가
// table.classList.add('table', 'table-hover');
// document객체의 메소드를 사용했을때 class를 추가하는 방법
table.setAttribute('class', 'table table-hover');
divAll1.appendChild(table);
}
</scrupt>
- 입력값을 가져와 다른 태그에 넣어주기
입력2:에 입력된 수를 입력값 확인을 누르면 입력한 값은 :에 들어가게 만들어봅시다
중요한 부분만 알아보고 넘어가겠습니다
<body>
입력1: <input type="text" id="id1" name="id1" onkeyup="fun2()"> <br>
입력2: <input type="text" id="id2" name="id2" onblur="fun3()"> <br>
input 태그에 type은 text 사용하여 사용자가 텍스트바에 입력 할 수 있게 하였습니다
onblur 이벤트를 이용하여 사용자가 텍스트바를 떠나면 함수 fun3을 호출합니다
<input type="button" value="입력값 확인" onclick="fun1()"><br>
<!-- 입력2에 입력한 값을 아래에 출력해보기 -->
입력한 값은: <span id="result1"></span>
</body>
<script>
const fun1 = () => {
const input1 = document.getElementById("id1");
console.log(input1);
console.log(input1.value);
const input2 = document.getElementById("id2");
console.log(input2);
console.log(input2.value);
// const input1byName = document.getElementsByName("id1");
// console.log(input1byName[0].value);
// const input2byName = document.querySelector('input[name="id2"]');
// console.log(input2byName.value);
}
const fun2 = () => {
const input1 = document.getElementById('id1');
console.log(input1.value);
}
함수 fun3의 기능입니다
fun3이 호출되면 input2에 입력된 값을
span태그에 넣어줍니다
const fun3 = () => {
const input2 = document.getElementById('id2');
input 태그를 객체로 만들어줍니다 이름은 input2입니다
const span = document.getElementById('result1');
span 태그를 객체로 만들어줍니다
span.innerHTML = input2.value;
span.innerHTML에 input2객체의 벨류를 대입해줍니다
}'나의 수업일지' 카테고리의 다른 글
- DOM - 응용문제 풀어보기
1.
buttond을 만들고 클릭하면 onclick을 이용하여 함수 fun1을 호출하고 결과를 출력합니다
script
<script>
const a = document.getElementsByTagName("h2");
document로 변수 a에 h2태그 객체를 넣어주고
const fun1 = () => {
console.log(a[0].innerText);
fun1이 호출되면 a의 [0]번쨰 칸을 text로 출력합니다
}
</script>
2.
button을 만드는 방식은 위와 같습니다 다른점은 fun2함수를 호출합니다
script
<script>
const b = document.getElementsByTagName("h3");
변수 b에 document로 태그가 h3인 객체를 담습니다
const fun2 = () => {
alert(b[0].innerHTML);
fun2함수를 만들고 호출되면
alert속성으로 b변수의 [0]번째 칸을 html속성으로 출력합니다
}
</script>
3.
이번에는 함수 fun3을 호출합니다
<script>
const a = document.getElementsByTagName("h2");
const b = document.getElementsByTagName("h3");
const divAll1 = document.getElementById('id1');
const fun3 = () => {
divAll1.innerText = a[0].innerText + " " + b[0].innerText;
divAll1.innerText에 a의[0]번째칸의 innertext 와
b의 [0]번째칸의 innertext를 연결해줍니다
문자열에서의 + 는 연결을 뜻합니다
}
</script>
4.
기출 변형입니다 버튼 4를 누르면 함수 fun4를 호출합니다
이번 문제는 상당히 자주사용하고 중요하기 때문에
2가지 방법 모두 알아보겠습니다
<script>
const fun4 = () => {
string 값으로 필요한 내용 그리기
const divAll2 = document.getElementById('id2')
let ul = "<ul>";
divAll2에는 body에 있는 div를 객체로 담습니다
let ul에는 문자 <ul>를 담습니다
for (let i = 1; i <= 100; i++) {
ul += "<li>" + i + "</li>"
이제 for문을 이용하여 1부터 100까지의 수를
변수 ul에 담긴 문자와 이어 붙여줍니다
( ul = <ul> <li> i(1,2,3,...) </li> )
}
ul += "</ul>;
이렇게 li의 입력이 끝나면 마지막으로 ul에 </ul>을 이어 붙여줍니다
( ul = <ul> <li> i(1,2,3,...) </li> </ul> )
divAll2.innerHTML = ul;
이후 divAll2 객체에 ul을 대입하여 출력합니다
javascript method 활용하기
const divAll2 = document.getElementById('id2')
const ul = document.createElement("ul");
이번 방식은 didAll2뿐만 아니라 ul까지 객체로 만들어줍니다
for (let i = 1; i <= 100; i++) {
const li = document.createElement("li");
li 객체를 생성합니다
li.appendChild(document.createTextNode(i));
appendchild는 <태그> 여기 <태그> 여기부분에 값을 넣어줍니다
document.createTextNode로 i를 사이에 넣어줍니다 document의 메소드입니다
ul.appendChild(li);
appendChild를 이용하여 위에서 i를 넣어 만들어진 li객체를 넣어줍니다
만들어진 li를 ul의 자식 태그로 추가
}
마지막으로 divAll2에 ul을 넣어
fun4가 호출되면 출력되게 만들어줍니다
divAll2.appendChild(ul);
}
</script>
- DOM - 응용 이미지 변경
이미지 교체 버튼을 누르면 이미지가 변경되게 script를 사용해봅시다
<body>
<img src="../images/호구마2.png" alt="" id="img1">
먼저 호구마2라고 이름지은 고구마 사진을 넣어줍니다
<button onclick="changeImg()">이미지 교체</button>
버튼을 누르면 이미지 교체이기 때문에
button 태그에 이벤트 onclick을 사용합니다
onclick 이벤트가 발생하는 경우 함수 cjangeImg가 호출됩니다
</body>
<script>
const changeImg = () => {
const img = document.getElementById('img1');
호구마2 이미지를 넣은 img태그의 객체를 만들어줍니다
img.src = "../images/호구마1.png";
img.src에 새로운 이미지의 경로를 대입하여
함수가 호출되면 출력되는 이미지의 경로를 바꿔 사진을 변경합니다
}
</script>
- script로 style 제어하기
javascript에서 html의 style을 넣어주거나 수정하는 방법을 알아보겠습니다
<body>
<h2 onclick="fun2()" id="id1">곧 점심시간</h2>
h2태그에 이벤트 onclick를 설정해 클릭하면 함수 fun2를 호출합니다
</body>
<script>
const fun2 = () => {
const ele = document.getElementById('id1');
ele에 h2의 객체를 만들어줍니다
style 변경의 양식입니다
css속성 제어하기
ele.style.color = "red";
ele.style.backgroundColor = "black";
}
</script>
- 구구단을 표에 출력하기
아래 구구단 출력 버튼을 누르면 이렇게 표가 출력되게 만들어봅시다
body안의 div태그안으로 구구단 출력문을 넣어봅시다
<body>
<div id="id1">
<!-- 여기에 구구단이 출력됩니다 -->
</div>
<button onclick="fun1()">구구단 출력</button><br>
button 태그에 onclick이벤트로 클릭하면 함수 fun1이 호출됩니다
</body>
<script>
const fun1 = () => {
const result = document.getElementById("id1");
result에 div태그의 객체를 담습니다
let tableElement = "<table class='table table-hover'>";
tableElement에 문자열 "<table>"을 담습니다
(class는 bootstrap입니다)
for (let i = 2; i <= 9; i++) {
tableElement += "<tr>";
tableElement += "<td>" + i + "단</td>";
for (let j = 1; j <= 9; j++) {
tableElement += "<td>" + i * j + "</td>";
}
tableElement += "</tr>";
}
tableElement += "</table>";
result.innerHTML = tableElement;
}
1~100 출력과 마찬가지로
for문을 이용하여 talbeElement에 문자열을 이어 붙여줍니다
+= 를 꼭 주의하며 사용합시다
document의 메소드를 이용하여 출력하는 방법도 있습니다
fun1 = () => {
const divAll1 = document.getElementById('id1');
const table = document.createElement("table")
div태그와 table 태그의 객체를 만들어줍니다
for (let i = 2; i <= 9; i++) {
const tr = document.createElement("tr");
const th = document.createElement("th");
tr태그 th태그의 객체를 만들어줍니다
th.appendChild(document.createTextNode(i + "단"))
appendChild를 이용하여 th객체의 th태그의 사이에 i + "단"을 끼어 넣습니다
tr.appendChild(th);
appendChild를 이용하여
th객채의 th태그사이에 tr객체의 tr태그를 사이에 넣습니다
for (let j = 1; j <= 9; j++) {
const td = document.createElement("td");
td태그의 객체를 만들었습니다
td.appendChild(document.createTextNode(i * j));
appendChild 를 이용하여 td객체 사이에 i*j를 넣어줍니다
tr.appendChild(td);
appendChild를 이용하여
tr태그 사이에 td태그를 넣어줍니다
}
table.appendChild(tr);
appendChild를 이용하여
table 태그 사이에 tr 태그를 넣어줍니다
}
document객체의 메소드로 1~100까지의 숫자출력하기에서 사용된
2번째 방법의 응용입니다 읽어보고 이해가 안된다면 다시공부합시다
여기서 중요하게 봐야하는 부분은 td태그와 th태그의 객체 생성부분입니다
// class 추가
// table.classList.add('table', 'table-hover');
// document객체의 메소드를 사용했을때 class를 추가하는 방법
table.setAttribute('class', 'table table-hover');
divAll1.appendChild(table);
}
</scrupt>
- 입력값을 가져와 다른 태그에 넣어주기
입력2:에 입력된 수를 입력값 확인을 누르면 입력한 값은 :에 들어가게 만들어봅시다
중요한 부분만 알아보고 넘어가겠습니다
<body>
입력1: <input type="text" id="id1" name="id1" onkeyup="fun2()"> <br>
입력2: <input type="text" id="id2" name="id2" onblur="fun3()"> <br>
input 태그에 type은 text 사용하여 사용자가 텍스트바에 입력 할 수 있게 하였습니다
onblur 이벤트를 이용하여 사용자가 텍스트바를 떠나면 함수 fun3을 호출합니다
<input type="button" value="입력값 확인" onclick="fun1()"><br>
<!-- 입력2에 입력한 값을 아래에 출력해보기 -->
입력한 값은: <span id="result1"></span>
</body>
<script>
const fun1 = () => {
const input1 = document.getElementById("id1");
console.log(input1);
console.log(input1.value);
const input2 = document.getElementById("id2");
console.log(input2);
console.log(input2.value);
// const input1byName = document.getElementsByName("id1");
// console.log(input1byName[0].value);
// const input2byName = document.querySelector('input[name="id2"]');
// console.log(input2byName.value);
}
const fun2 = () => {
const input1 = document.getElementById('id1');
console.log(input1.value);
}
함수 fun3의 기능입니다
fun3이 호출되면 input2에 입력된 값을
span태그에 넣어줍니다
const fun3 = () => {
const input2 = document.getElementById('id2');
input 태그를 객체로 만들어줍니다 이름은 input2입니다
const span = document.getElementById('result1');
span 태그를 객체로 만들어줍니다
span.innerHTML = input2.value;
span.innerHTML에 input2객체의 벨류를 대입해줍니다
}