<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변규진의 홈페이지</title>
<style>
body { background-color: linen; color: green;
margin-left: 40px; margin-right: 40px; } /* body 태그의 배경색을 linen, 색을 green, */
h3 {text-align: center; color: darkred;} /* h3 태그를 가운데 정렬하고 색을 darkred로 설정 */
hr { height: 5px; border: solid grey;
background-color: grey } /* 수평 줄의 높이를 5px, border를 solid grey, 배경 색을 grey로 설정 */
span { color: blue; font-size: 20px; } /* span 태그의 색을 blue, 글자 크기를 20px로 설정 */
a { color: black; } /* a 태그의 링크 글자색을 black으로 설정 */
a:visited { color: black; } /* a 태그의 방문한 링크 글자색을 black으로 설정 */
</style>
</head>
<body>
<h3>변규진의 홈페이지</h3>
<hr> <!-- 수평 줄 생성 -->
<br> <!-- 줄 바꿈 -->
<details>
<summary>과제1</summary>
<ul>
<li><a href="과제1-1.html" target="_blank">과제1-1</a></li> <!-- 순서가 없는 리스트 생성 -->
<li><a href="과제1-2.html" target="_blank">과제1-2</a></li> <!-- a 태그를 이용하여 과제 HTML 문서 링크와 연결 -->
<li><a href="과제1-3.html" target="_blank">과제1-3</a></li> <!-- target="_blank"로 링크 클릭시 새 탭에 사이트 출력 -->
</ul>
</details>
<details>
<summary>과제2</summary>
<ul>
<li><a href="과제2-1.html" target="_blank">과제2-1</a></li>
<li><a href="과제2-2.html" target="_blank">과제2-2</a></li>
<li><a href="과제2-3.html" target="_blank">과제2-3</a></li>
<li><a href="과제2-4.html" target="_blank">과제2-4</a></li>
<li><a href="과제2-5.html" target="_blank">과제2-5</a></li>
<li><a href="과제2-6.html" target="_blank">과제2-6</a></li>
<li><a href="과제2-7.html" target="_blank">과제2-7</a></li>
</ul>
</details>
<details>
<summary>과제3</summary>
<ul>
<li><a href="과제3-1.html" target="_blank">과제3-1</a></li>
<li><a href="과제3-2.html" target="_blank">과제3-2</a></li>
<li><a href="과제3-3.html" target="_blank">과제3-3</a></li>
<li><a href="과제3-4.html" target="_blank">과제3-4</a></li>
<li><a href="과제3-5.html" target="_blank">과제3-5</a></li>
<li><a href="과제3-6.html" target="_blank">과제3-6</a></li>
<li><a href="과제3-7.html" target="_blank">과제3-7</a></li>
<li><a href="과제3-8.html" target="_blank">과제3-8</a></li>
<li><a href="과제3-9.html" target="_blank">과제3-9</a></li>
<li><a href="과제3-10.html" target="_blank">과제3-10</a></li>
<li><a href="과제3-11.html" target="_blank">과제3-11</a></li>
</ul>
</details>
<details>
<summary>과제4</summary>
<ul>
<li><a href="과제4.html" target="_blank">끝말잇기 게임 만들기</a></li>
</ul>
</details>
<details>
<summary>과제5</summary>
<ul>
<li><a href="과제5-1.html" target="_blank">과제 5-1</a></li>
<li><a href="과제5-2.html" target="_blank">과제 5-2</a></li>
<li><a href="과제5-3.html" target="_blank">과제 5-3</a></li>
<li><a href="과제5-4.html" target="_blank">과제 5-4</a></li>
<li><a href="과제5-5.html" target="_blank">과제 5-5</a></li>
<li><a href="과제5-6.html" target="_blank">과제 5-6</a></li>
<li><a href="과제5-7.html" target="_blank">과제 5-7</a></li>
</ul>
</details>
</body>
</html>
[실습 5-1]
프로그램 알고리즘
정수인 문자열을 입력한다.
입력받은 문자열이 정수인지 판별한다.
정수가 아니면 오류 문구를 출력한다.
정수이면 별을1개부터 입력받은 정수까지 하나씩 늘려가며 출력한다.
홈페이지 화면
양의 정수가 입력된 경우
양의 정수가 입력되지 않은 경우
소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제 5-1</title>
</head>
<script>
function star(num) { // 별을 출력하는 함수 정의
n = parseInt(num); // 입력받은 num을 숫자로 변환하여 n에 저장
if(isNaN(n)) { // n이 숫자가 아니면 오류 문구 출력
document.write("입력 오류 입니다.");
}
for(i = 0; i < n; i++) { // 이중 for문으로 별 문자를 n층으로 출력
for(j = 0; j <= i; j++) {
document.write("*");
}
document.write("<br>")
}
}
</script>
<body>
<h3>별 문자 출력하기</h3>
<hr>
<script>
var num = prompt("정수를 입력하세요","1"); // prompt 함수로 정수 입력 받기
star(num); // star 함수 호출
</script>
</body>
</html>
[실습 5-2]
프로그램 알고리즘
&로 각 문자열을 구분하여 문자열들을 입력한다.
입력된 문자열들을&을 기준으로 나누어 배열의 각 요소에 저장한다.
배열의 각 요소에 저장된 문자열들을 낱개로 출력한다.
홈페이지 화면
소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제 5-2</title>
</head>
<body>
<script>
document.write("<h3>문자열 분할</h3><hr>");
var A = prompt("문자열 입력"); // 문자열을 입력받아 string 객체 생성
var arr = A.split("&"); // &를 기준으로 A string을 분할하여 arr 배열에 저장
for(var i=0; i<arr.length; i++) { // arr 배열의 각 요소를 출력
document.write(arr[i]+"<br>");
}
</script>
</body>
</html>
[실습 5-3]
프로그램 알고리즘
책 제목,저자,가격을“,”로 구분하여 입력한다.
입력받은 문자열을“,”를 기준으로 나누어 객체의 요소에 저장한다.
이것을5번 반복하여 총5개의 도서 정보를 입력받는다.
5개의 도서 정보를 출력한다.
각 도서 정보의 가격을 비교하여 최대 값인 도서의 제목을 출력한다.
홈페이지 화면
소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제 5-3</title>
</head>
<body>
<h3>book 객체 배열 만들기</h3>
<hr>
<script>
var bookarr = new Array(); // 책 배열 생성
for(i=0 ; i<5; i++)
{
var input = prompt("콤마(,)로 분리하면서 첵제목 저자 가격 순으로 입력");
var info = input.split(","); // ,를 기준으로 input 문자열 분리
var book = new Object(); // book 객체 생성
book.title = info[0]; // book 객체의 title에 info의 책 제목 저장
book.author = info[1]; // book 객체의 author에 info의 저자 저장
book.price = info[2]; // book 객체의 price에 info의 가격 저장
bookarr[i] = book;
}
for(i=0 ; i<bookarr.length ; i++) // bookarr 배열의 객체들을 출력
{
document.write(bookarr[i].title + ",");
document.write(bookarr[i].author + ",");
document.write(bookarr[i].price + "<br>");
}
var expensive = bookarr[0];
for(i=0 ; i<bookarr.length ; i++) // 가장 비싼 책 비교
{
if(bookarr[i].price > expensive.price)
expensive = bookarr[i];
}
document.write("<hr>");
document.write("<br> 가장 가격이 비싼 책은 " + expensive.title); // 가장 비싼 책 출력
</script>
</body>
</html>
[실습 5-4]
프로그램 알고리즘
재료를 배열에 저장한다.
저장이 끝나고 저장된 양의 배열 크기만큼 반복하여list를 만들어서 배열의 요소인 재료를 출력한다.
홈페이지 화면
소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제 5-4</title>
</head>
<body>
<h3>라면을 만드는데 필요한 재료</h3>
<hr>
<script>
var itemlist = ["라면", "계란", "물", "파"]; // 재료 배열 생성
document.write("<ul>");
// 재료 배열의 길이만큼 반복하여 모든 채료 출력
for (var i = 0; i <= itemlist.length - 1; i++) {
document.write("<li>"+itemlist[i]+"</li>");
}
document.write("</ul>");
</script>
</body>
</html>
[실습 5-5]
프로그램 알고리즘
리스트에 해당하는 부분을 마우스로 클릭한다.
마우스로 클릭된 것이 인식되면 리스트의 배경색을 변경한다.
홈페이지 화면
소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제 5-5</title>
</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>
<script>
var liArray = document.getElementsByTagName("li");
for (i = 0; i < liArray.length; i++) {
var obj = liArray[i];
obj.style.color = 'green';
}
</script>
</body>
</html>
[실습 5-6]
프로그램 알고리즘
border버튼을 누르면“C언어“글자에 테두리가 생긴다.
p버튼을 누르면 태그의 개수를 알림창에 띄운다.
홈페이지 화면
소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제 5-6</title>
</head>
<script>
function line() {
// getElementById() 함수로 id=mySpan인 태그에 접근
var i = document.getElementById("mySpan");
i.style.border = "2px dotted violet"
}
function tag_number() {
// getElementsByTagName() 함수로 p 태그에 접근
var i = document.getElementsByTagName("p");
alert("<p> 태그의 개수는 "+i.length); // p 태그의 개수 출력
}
</script>
<body>
<h3>자바스크립트란?
<button onclick="line()">border</button>
<button onclick="tag_number()">p</button>
</h3>
<hr>
<p>자바스크립트는 웹 프로그래밍 언어로서 웹 페이지를 동적 변경시킬 수 있다.</p>
<p><span id="mySpan">C언어</span>를 아는 사용자는 빠르게 학습할 수 있다.</p>
<p>이벤트 등 GUI 프로그래밍에 필요한 요소들이 있어 학습에 약간의 어려움이 있다.</p>
</body>
</html>
[실습 5-7]
프로그램 알고리즘
스페이드7이 제일 위에 있다.
스페이드7을 클릭하면 스페이드7은 맨 아래로 가고 스페이드3이 제일 위로 올라온다.
스페이드3을 클릭하면 스페이드3은 맨 아래로 가고 스페이드2가 제일 위로 올라온다.
스페이드2를 클릭하면 스페이드2는 맨 아래로 가고 스페이드A가 제일 위로 올라온다.
스페이드A를 클릭하면 스페이드A는 맨 아래로 가고 스페이드7이 제일 위로 올라온다.
1~5반복
홈페이지 화면
소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제 5-6</title>
<style>
/* position을 absolute로 지정 */
div { position: absolute; }
img { position: absolute; }
</style>
</head>
<body>
<h3>z-index 스타일 프로퍼티</h3>
<hr>
<div>
<img id="spadeA" src="spadeA.png" width="100" height="140" alt="스페이드A">
<img id="spade2" src="spade2.png" width="100" height="140" alt="스페이드2">
<img id="spade3" src="spade3.png" width="100" height="140" alt="스페이드3">
<img id="spade7" src="spade7.png" width="100" height="140" alt="스페이드7">
</div>
<script>
// getElementsByTagName() 함수로 img 태그에 접근
var imgarr = document.getElementsByTagName("img");
for (i = 0; i < imgarr.length; ++i) {
var img = imgarr[i]; // 이미지 4개를 각각 배열에 저장
img.style.zIndex = i; // 이미지에 z-index 우선순위 설정
img.style.left = "10px";
img.style.top = "20px";
img.onclick = next; // 이미지를 클릭하면 next() 함수 실행
}
function next() { // 클릭된 카드가 맨 밑으로 들어가고 바로 밑의 카드가 보이는 함수 정의
for (i = 0; i < imgarr.length; ++i) {
var img = imgarr[i];
img.style.zIndex++; // z-index 우선순위에 1을 더해주기
img.style.zIndex %= imgarr.length;
}
}
</script>
</body>
</html>
댓글