Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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 more
Archives
Today
Total
관리 메뉴

거니의 velog

230911_JS 강의 본문

대덕인재개발원/대덕인재개발원_Front End

230911_JS 강의

Unlimited00 2023. 9. 11. 08:26

[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
'대덕인재개발원/대덕인재개발원_Front End' Related Articles more