1. (2)
<!DOCTYPE html>
<html>
<head>
<title>라면을 끓이는 순서</title>
<meta charset="utf-8">
</head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="A">
<li>물을 끓인다.</li>
<li>라면과 스프를 넣는다.</li>
<li>파를 썰어 넣는다.</li>
<li>5분 후 <strong>맛있게</strong> 먹는다.</li>
</ol>
<script>
let list = document.getElementsByTagName("li");
for (let i=0; i<list.length; i++){
let li = list[i];
li.style.color = "green";
}
</script>
</body>
</html>
(3)
<!DOCTYPE html>
<html>
<head>
<title>라면을 끓이는 순서</title>
<meta charset="utf-8">
</head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="A" onclick="this.style.backgroundColor='yellowgreen'">
<li>물을 끓인다.</li>
<li>라면과 스프를 넣는다.</li>
<li>파를 썰어 넣는다.</li>
<li>5분 후 <strong>맛있게</strong> 먹는다.</li>
</ol>
</body>
</html>
2. (2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 연습</title>
<script>
function drawLine(){
let span = document.getElementById("mySpan");
span.style.border = "2px dotted violet";
}
</script>
</head>
<body>
<h3>자바스크립트란?</h3>
<hr>
<button onclick="drawLine()">border</button>
<button>p</button>
<p>자바스크립트는 웹 프로그래밍 언어로서 웹 페이지를 동적 변경시킬 수 있다.</p>
<p><span id="mySpan">C언어</span>를 아는 사용자는 빠르게 학습할 수 있다.</p>
<p>이벤트 등 GUI 프로그래밍에 필요한 요소들이 있어 학습에 약간의 어려움이 있다.</p>
</body>
</html>
(3)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 연습</title>
<script>
function drawLine(){
let span = document.getElementById("mySpan");
span.style.border = "2px dotted violet";
}
</script>
</head>
<body>
<h3>자바스크립트란?</h3>
<hr>
<button onclick="drawLine()">border</button>
<button>p</button>
<p>자바스크립트는 웹 프로그래밍 언어로서 웹 페이지를 동적 변경시킬 수 있다.</p>
<p><span id="mySpan">C언어</span>를 아는 사용자는 빠르게 학습할 수 있다.</p>
<p>이벤트 등 GUI 프로그래밍에 필요한 요소들이 있어 학습에 약간의 어려움이 있다.</p>
</body>
</html>
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 연습</title>
<style>
span {
visibility : hidden;
color : blue;
}
</style>
</head>
<body>
<h3>다음 빈 곳에 숨은 단어?</h3>
<button onclick="show()">show/hide</button>
<hr>
<ul>
<li>I (<span>love</span>) you.</li>
<li>CSS is Cascading (<span>Style</span>) Sheet.</li>
<li>응답하라 (<span>1988</span>)</li>
</ul>
</body>
<script>
function show(){
let spanArray = document.getElementsByTagName("span");
for (let i = 0; i < spanArray.length; i++){
span = spanArray[i];
if (span.style.visibility == "hidden") {
span.style.visibility = "visible";
}
else span.style.visibility = "hidden";
}
}
</script>
</html>
(위와 같이 코드를 적으면, 첫번째 클릭에 show/hide가 작동안하는 문제가 있음.
해결방법은 window.getComputedStyle과 getPropertyValue를 사용하면 됨. 아래 코드 참고)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 연습</title>
<style>
span {
visibility: hidden;
color: blue;
}
</style>
</head>
<body>
<h3>다음 빈 곳에 숨은 단어?</h3>
<button onclick="show()">show/hide</button>
<hr>
<ul>
<li>I (<span>love</span>) you.</li>
<li>CSS is Cascading (<span>Style</span>) Sheet.</li>
<li>응답하라 (<span>1988</span>)</li>
</ul>
</body>
<script>
function show() {
let spanArray = document.getElementsByTagName("span");
for (let i = 0; i < spanArray.length; i++) {
let span = spanArray[i];
let visibility = window.getComputedStyle(span).getPropertyValue("visibility");
if (visibility == "hidden") {
span.style.visibility = "visible";
} else {
span.style.visibility = "hidden";
}
}
}
</script>
</html>
4.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 연습</title>
</head>
<body>
<h3>계산해봅시다</h3>
<hr>
<p> 2 + 4 = <span onclick="this.innerHTML = eval(2+4)">답</span></p>
<p> 4 * 20 + 64 = <span onclick="this.innerHTML = eval(4*20+64)">답</span></p>
<p> 20/5-8*2 = <span onclick="this.innerHTML = eval(20/-8*2)">답</span></p>
</body>
</html>
5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div { position : absolute; }
img { position : absolute; }
</style>
</head>
<body>
<h3>z-index 스타일 프로퍼티</h3>
<hr>
<div onclick="changeImg()">
<img src="media/spade-A.png" width="100" height="140" alt="스페이드A">
<img src="media/spade-2.png" width="100" height="140" alt="스페이드2">
<img src="media/spade-3.png" width="100" height="140" alt="스페이드3">
<img src="media/spade-7.png" width="100" height="140" alt="스페이드7">
</div>
<script>
let imgArray = document.getElementsByTagName("img");
//z인덱스 값을 수정, z인덱스가 클 수록 앞에 보임
for (let i=0; i<imgArray.length; i++){
imgArray[i].style.zIndex = i;
imgArray[i].style.left = "10px";
imgArray[i].style.top = "20px";
}
function changeImg() {
for(let i=0; i<imgArray.length; i++) {
let obj = imgArray[i];
obj.style.zIndex++;
obj.style.zIndex %= imgArray.length;
}
}
</script>
</body>
</html>
6.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>innerHTML</h3>
<hr>
<p onclick="ask()" id="p">이번 여름에는 어디로 여행을 갈까요?</p>
<script>
function ask(){
let user = prompt("HTML 텍스트 혹은 그냥 텍스트를 입력하세요. ","");
let p = document.getElementById("p");
p.innerHTML = user;
}
</script>
</body>
</html>
7. (1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>클릭하면 90도 회전합니다.</h3>
<hr>
<img src="귤먹는햄스터.jpg" width="200" height="200" alt="햄스터사진" onclick="rotation(this)">
<script>
function rotation(obj){
obj.style.transform = "rotate(90deg)";
}
</script>
</body>
</html>
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>클릭하면 90도 회전합니다.</h3>
<hr>
<img src="귤먹는햄스터.jpg" width="200" height="200" alt="햄스터사진" onclick="rotation(this)">
<script>
deg = 90;
function rotation(obj){
obj.style.transform = "rotate(" + deg + "deg)";
deg += 90;
}
</script>
</body>
</html>
8. (1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>클릭하면 90도 회전합니다.</h3>
<hr>
<img src="귤먹는햄스터.jpg" width="200" height="200" alt="햄스터사진" onclick="sizeChange(this)">
<script>
function sizeChange(obj){
obj.style.transform = "scale(2,1)";
}
</script>
</body>
</html>
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>클릭하면 90도 회전합니다.</h3>
<hr>
<img src="귤먹는햄스터.jpg" width="200" height="200" alt="햄스터사진" onclick="sizeChange(this)">
<script>
let size = 2;
function sizeChange(obj){
obj.style.transform = "scale(" + size + ",1)";
size++;
}
</script>
</body>
</html>
9.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>클릭하면 90도 회전합니다.</h3>
<hr>
<ol type="A" style ="background-color: yellowgreen" onclick="addList(this)">
<li>물을 끓인다.</li>
</ol>
<script>
function addList(parent){
let user = prompt("라면을 끓이는 순서를 입력하라", "");
let list = document.createElement("li");
list.innerHTML = user;
parent.appendChild(list);
}
</script>
</body>
</html>
10. (1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>클릭하면 90도 회전합니다.</h3>
<hr>
<div>
<p>Q. 거울아 거울아 세상에서 누가 제일 예쁘니?</p>
<button onclick="addAnswer(this,'백설공주')">답보기</button>
</div>
<div>
<p>Q. 죽느냐 사느냐 어떤 것이 문제인가?</p>
<button onclick="addAnswer(this,'둘다')">답보기</button>
</div>
</ol>
<script>
function addAnswer(obj, answer){
let p = document.createElement("p");
let parent = obj.parentElement;
p.innerHTML = answer;
parent.appendChild(p);
}
</script>
</body>
</html>
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>클릭하면 90도 회전합니다.</h3>
<hr>
<div>
<p>Q. 거울아 거울아 세상에서 누가 제일 예쁘니?</p>
<button onclick="addAnswer(this,'백설공주')">답보기</button>
</div>
<div>
<p>Q. 죽느냐 사느냐 어떤 것이 문제인가?</p>
<button onclick="addAnswer(this,'둘다')">답보기</button>
</div>
</ol>
<script>
function addAnswer(obj, answer){
let p = document.createElement("p");
let parent = obj.parentElement;
p.innerHTML = answer;
p.addEventListener("click",
function() {
let p = this.parentElement;
p.removeChild(this);
})
parent.appendChild(p);
}
</script>
</body>
</html>'1학년 > 명품 HTML+CSS+JS' 카테고리의 다른 글
| 10. 윈도우와 브라우저 관련 객체 실습문제 정답 (2) | 2023.12.08 |
|---|---|
| 10. 윈도우와 브라우저 관련 객체 이론문제 정답 (1) | 2023.12.07 |
| 8. HTML DOM과 Document 이론문제 정답 (0) | 2023.12.06 |
| 7. 자바스크립트 코어 객체와 배열 실습문제 정답 (5) | 2023.12.04 |
| 7. 자바스크립트 코어 객체와 배열 이론문제 정답 (1) | 2023.12.03 |