Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 객체 비교
- 자동차수리시스템
- 집합_SET
- 환경설정
- 예외처리
- NestedFor
- 메소드오버로딩
- cursor문
- 참조형변수
- exception
- 다형성
- Java
- oracle
- 추상메서드
- 제네릭
- 사용자예외클래스생성
- 자바
- 컬렉션 타입
- 대덕인재개발원
- 생성자오버로드
- 정수형타입
- 컬렉션프레임워크
- 한국건설관리시스템
- EnhancedFor
- 어윈 사용법
- GRANT VIEW
- 오라클
- 인터페이스
- 예외미루기
- abstract
Archives
- Today
- Total
거니의 velog
230911_JS 강의 본문
[imgInterval.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="자바스크립트25" />
<meta name="keywords" content="대덕인재개발원, html, 자바스크립트25" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>자바스크립트25</title>
<link href="css/style13.css" rel="stylesheet" type="text/css" />
<style>
div {
border: 1px dotted green;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
}
input[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
#result1 {
overflow: auto;
}
#result1 img {
display: block;
float: left;
width: calc(100% / 6);
cursor: pointer;
transition: all 0.4s;
}
#result1 img:hover {
opacity: 0.5;
}
</style>
<script>
// 시작버튼 클릭하면
// var sid;
// var gstart;
// const proc1 = (start) => {
// // start 확인 버튼 객체 변수
// start.style.display = "none";
// gstart = start;
// var imgIdx = document.querySelectorAll('img'); // nodeList로 리턴 - 배열
// var i=0;
// var imgRes = document.querySelector('#result1');
// sid = setInterval(function(){
// // img의 첫번째를 선택 - result1으로 이동
// imgRes.appendChild(imgIdx[i]);
// if(i>=5) i = 0;
// else i++;
// }, 1000);
// }
// 종료버튼 클릭하면
const stop = () => {
clearInterval(sid);
// 시작버튼 다시 보이게
gstart.style.display = "inline";
}
var sid;
var gstart;
const proc1 = (start) => {
// 전역변수로 넣기
gstart = start;
start.style.display = "none";
// result1를 검색 - 부모로 사용
var imgRes = document.querySelector('#result1');
sid = setInterval(function(){
// 첫번째 이미지 선택
var selectImg = document.querySelector('img');
// 첫번째 이미지가 사라지면서 뒤로 추가됨.
imgRes.appendChild(selectImg);
}, 500);
}
</script>
</head>
<body>
<hr color="red" />
<h1>
이미지의 첫 번째를 선택하여 뒤로 이동하기
</h1>
<br />
<div id="result1">
<img src="images/Chrysanthemum.jpg" alt="Chrysanthemum" />
<img src="images/Desert.jpg" alt="Desert" />
<img src="images/Hydrangeas.jpg" alt="Hydrangeas" />
<img src="images/Jellyfish.jpg" alt="Jellyfish" />
<img src="images/Koala.jpg" alt="Koala" />
<img src="images/Lighthouse.jpg" alt="Lighthouse" />
</div>
<input type="button" value="시작" onclick="proc1(this);" />
<input type="button" value="종료" onclick="stop();" />
<hr color="red" />
</body>
</html>
[location.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="자바스크립트26" />
<meta name="keywords" content="대덕인재개발원, html, 자바스크립트26" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>자바스크립트26</title>
<link href="css/style13.css" rel="stylesheet" type="text/css" />
<style>
div {
border: 1px dotted green;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
}
input[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
</style>
<script>
const proc1 = () => {
location.href = "http://localhost/webpro/0911/test.jsp?id=aa";
}
const proc2 = () => {
// 배열 생성
var arr = ["Hello", "Javascript", "CSS", "jQuery", "JSON", "사랑은 늘 도망가"];
// 배열의 문자를 선택 - random을 이용
var rand = Math.floor(Math.random() * arr.length); // arr[rand]
// result2에 출력 - appendChild, innerHTML - document 변경
var res = document.getElementById("result2");
res.innerHTML = arr[rand];
res.style.color = "red";
res.style.fontSize = "2rem";
// 현재 문서로 다시 올아오기 - reload() - 출력 이전의 문서로 다시 돌아오기
setTimeout(function(){
location.reload();
}, 500);
}
const proc3 = () => {
location.replace('imgInterval.html');
}
const proc5 = () => {
location.href = "test.jsp?id=dd";
}
</script>
</head>
<body>
<hr color="red" />
<h1>
location 객체 1
<br />
uri의 정보를 얻거나 설정한다.
</h1>
<br />
<input type="button" value="location1" onclick="proc1();" />
<div id="result1"></div>
<hr color="red" />
<h1>
location 객체 2
<br />
reload(); 현재 문서를 다시 로드한다.
</h1>
<br />
<input type="button" value="location2" onclick="proc2();" />
<div id="result2"></div>
<hr color="red" />
<h1>
location 객체 3
<br />
replace(); 현재 문서를 다른 문서로 대체한다.
</h1>
<br />
<input type="button" value="location3" onclick="proc3();" />
<div id="result3"></div>
<hr color="red" />
<h1>
location 객체 4
<br />
location.href 사용하는 방법
<br />
onclick="location.href='test.jsp?id=dd'"
<br />
</h1>
<br />
<input type="button" value="location4" onclick="location.href='test.jsp?id=dd'" />
<div id="result4"></div>
<hr color="red" />
<h1>
location 객체 5
<br />
location.href 사용하는 방법
<br />
onclick="location.href='test.jsp?id=dd'"
<br />
href="test.jsp?id=dd"
<br />
href에서 스크립트 함수 호출 : href="javascript:proc5()
</h1>
<br />
<a href="#" onclick="location.href='test.jsp?id=dd'">공지사항</a>
<a href="test.jsp?id=dd">공지사항</a>
<a href="javascript:proc5()">공지사항</a>
<div id="result5"></div>
<hr color="red" />
</body>
</html>
[test.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page isELIgnored="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String userId = request.getParameter("id");
%>
<h1>
<%= userId %>님 환영합니다!
</h1>
<div id="result1"></div>
<script>
/* var str = "protocol : " + location.protocol + " <br />";
str += "hostname : " + location.hostname + " <br />";
str += "port : " + location.port + " <br />";
str += "host : " + location.host + " <br />";
str += "search : " + location.search + " <br />";
str += "pathname : " + location.pathname + " <br />";
console.log(str); */
var str = `protocol : ${location.protocol} <br />`;
str += `hostname : ${location.hostname} <br />`;
str += `port : ${location.port} <br />`;
str += `host : ${location.host} <br />`;
str += `search : ${location.search} <br />`;
str += `pathname : ${location.pathname} <br />`;
str += `href : ${location.href} <br />`;
console.log(str);
window.onload = function(){
document.getElementById("result1").innerHTML = str;
}
</script>
</body>
</html>
[listChildGet.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="자바스크립트27" />
<meta name="keywords" content="대덕인재개발원, html, 자바스크립트27" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>자바스크립트27</title>
<link href="css/style13.css" rel="stylesheet" type="text/css" />
<style>
div {
border: 1px dotted green;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
input[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
ol, ul {
list-style: none;
}
img {
display: block;
width: 20%;
border-radius: 50%;
}
</style>
<script>
const proc1 = () => {
// ul요소 검색
var getUl = document.getElementsByTagName("ul")[0];
var getUl = document.querySelectorAll("ul")[0];
var getUl = document.querySelector("ul");
var getUl = document.querySelector("#result1 ul");
console.log(getUl);
var items = getUl.querySelectorAll("li");
var str = "";
for(i=0; i<items.length; i++) {
// console.log(items[i].firstChild);
// alert(items[i].firstChild.data);
str += items[i].firstChild.data + "<br />";
}
document.querySelector("#result1 div").innerHTML = str;
}
const proc2 = () => {
// 문자열 배열 생성
var arr = ["사과", "바나나", "체리", "두리안", "가지", "수박", "참외", "포도"];
// 랜덤 발생
// console.log(arr.length);
var rand = Math.floor(Math.random() * arr.length);
// console.log(rand);
// 문자열 선택 - textNode를 생성
var selectTxt = arr[rand];
// console.log(selectTxt);
var node = document.createTextNode(selectTxt);
// p태그 생성
var pTag = document.createElement("p");
// p태그에 text 객체를 자식으로 추가
var pInnerTxt = pTag.appendChild(node);
// 부모를 검색 - result2 검색
var divRes2 = document.getElementById("result2");
// 부모에 새로운 text(selectTxt)를 추가한다.
// divRes2.appendChild(node);
// 부모에 새로운 p태그를 자식으로 추가.
divRes2.appendChild(pTag);
}
const proc3 = () => {
// result3 요소 검색
var getUl = document.querySelector("#result3 ul");
console.log(getUl);
// li를 검색
var items = getUl.querySelectorAll("li");
console.log(items);
// li의 갯수만큼 반복으로 문자text 객체의 값을 얻어온다.
var str;
for(i=0; i<items.length; i++) {
str = items[i].firstChild.data;
console.log(str);
str = str.trim();
// 문자text 객체의 값으로 img 객체를 생성한다.
var img = document.createElement("img");
img.src = "images/" + str + ".jpg";
img.alt = str;
// img 객체를 현재 li태그에 추가한다.
items[i].appendChild(img);
}
}
const proc4 = (item) => {
// item : 클릭한 li 객체
// 문자text 객체의 값 가져옴
var str = item.firstChild.data;
str = str.trim();
// img 객체를 생성한다.
var img = document.createElement("img");
img.src = "images/" + str + ".jpg";
img.alt = str;
// img 객체를 현재 li태그에 추가
item.appendChild(img);
}
</script>
</head>
<body>
<hr color="red" />
<h1>
list 객체 가져오기
</h1>
<br />
<input type="button" value="domObj1" onclick="proc1();" />
<div id="result1">
<ul>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
<li>List Item4</li>
<li>List Item5</li>
</ul>
<div></div>
</div>
<hr color="red" />
<h1>
랜덤으로 문자열 발생하여 div요소에 문자열 추가하기
<br />
문자열은 배열에 저장
</h1>
<br />
<input type="button" value="domObj2" onclick="proc2();" />
<div id="result2"></div>
<hr color="red" />
<h1>
list 객체 가져오기 2 - img 객체 생성
</h1>
<br />
<input type="button" value="domObj3" onclick="proc3();" />
<div id="result3">
<ul>
<li>
Chrysanthemum
</li>
<li>
Desert
</li>
<li>
Hydrangeas
</li>
<li>
Jellyfish
</li>
<li>
Koala
</li>
</ul>
<div></div>
</div>
<hr color="red" />
<h1>
list 객체 가져오기 3 - img 객체 생성, list를 클릭했을 때 this에 이미지 생성
</h1>
<br />
<div id="result4">
<ul>
<li onclick="proc4(this)">
Chrysanthemum
</li>
<li onclick="proc4(this)">
Desert
</li>
<li onclick="proc4(this)">
Hydrangeas
</li>
<li onclick="proc4(this)">
Jellyfish
</li>
<li onclick="proc4(this)">
Koala
</li>
</ul>
<div></div>
</div>
<hr color="red" />
</body>
</html>
'대덕인재개발원 > 대덕인재개발원_Front End' 카테고리의 다른 글
230912_jQuery 강의 (0) | 2023.09.12 |
---|---|
230912_JS 강의 (0) | 2023.09.12 |
230908_과제 1 : HTML과 CSS로 웹 사이트 만들기 (0) | 2023.09.08 |
230908_JS 강의 (0) | 2023.09.08 |
230907_JS 강의 (0) | 2023.09.07 |