열심히 끝까지
디바이스 융합 자바(Java) day33 - jQuery 라이브러리,jQuery CDN,아코디언메뉴,광고(및 갤러리),마우스이벤트,키보드엔터이벤트 본문
디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(수업내용)
디바이스 융합 자바(Java) day33 - jQuery 라이브러리,jQuery CDN,아코디언메뉴,광고(및 갤러리),마우스이벤트,키보드엔터이벤트
노유림 2022. 7. 27. 17:46[오늘 수업]
jQuery 라이브러리
자바 스크립트에서 자주 사용되는 라이브러리 널리 사용됨
존재하는 이유 : 자바 스크립트가 사용되는 것이 제멋대로, 복잡하기 때문에 쉽게 사용하고 싶다고 반영된 것
기본 제공되는 라이브러리가 아니다!
몇가지 import 해야한다.. 뭔가를 새로 넣겠다 하면 어려워함..
<우리가 직접 확보>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 라이브러리</title>
</head>
<body>
<!-- 자바 스크립트에서 자주 사용되는 라이브러리 널리 사용됨 -->
<!-- 존재하는 이유 : 자바 스크립트가 사용되는 것이 제멋대로, 복잡하기 때문에 쉽게 사용하고 싶다고 반영된 것 -->
<!-- 기본 제공되는 라이브러리가 아니다! -->
<!-- 몇가지 import 해야한다.. 뭔가를 새로 넣겠다 하면 어려워함.. -->
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
// jQuery라이브러리를 이용한 코드를 작성
// $ : 객체표시
// $앞에 있는 객체가 로드되면 ready()안에 들어간 기능을 수행해줘!
$(document).ready(function(){
console.log('jquery 라이브러리 연결 완료!');
});
</script>
</body>
</html>
- jQuery라이브러리를 이용한 코드를 작성
<script src="js/jquery-3.6.0.min.js"></script> 확보
$().ready();
- $ : 객체표시
- $앞에 있는 객체가 로드되면 ready()안에 들어간 기능을 수행해줘!
jQuery CDN
<라이브러리를 직접 확보할 수 없거나, 쓸 수 없을 때>
<!-- 네트워크 많이 잡아먹지 않는 방향으로 진행 -->
jQuery 측에서 직접 제공하는 것 사용
<CDN을 실습에서는 사용할 수 있음>
<jQuery CDN>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
>> 인터넷이 연결되어 있지 않으면 사용 불가!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery CDN</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style type="text/css">
header, div,nav,ul,li,footer {
margin:5px;
}
</style>
</head>
<body>
<!-- 네트워크 많이 잡아먹지 않는 방향으로 진행 -->
<script type="text/javascript">
$(document).ready(function(){
$('.logo').css('border', '5px solid lightgreen');
$('#gnb').css('border', '1px solid red');
$('footer, .left, .right').css('border','2px solid gray');
// 여러개 한꺼번에 작업 가능!
});
</script>
<header id="header">
<div class="logo">로고</div>
<div class='search'>검색하기</div>
<nav id='gnb'>
<ul>
<li>메뉴1
<ul>
<li>메뉴1-1</li>
<li>메뉴1-2</li>
</ul>
</li>
<li>메뉴2</li>
</ul>
</nav>
</header>
<div id='content'>
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
</div>
<footer id='footer'>
회사 소개<br>
개인정보처리방침
</footer>
</body>
</html>
* 전체 선택자를 쓰는건
웹 자원을 많이 쓰는 요인
>> 느려지게 만든다(서비스)
>> *이 아닌 header, div,nav,ul,li,footer 라고 하나하나씩 작성해 사용
>> 사용하는 기술을 모두 하나하나씩 언급하는 것이 좋음
<jquery가 위에서 script로 있는데도 출력이 잘 되네요?>
- 화면에 모든 파일이 적재되고 진행
- 다이렉트로 읽어서 문제가 진행됬기 때문에 script를 아래로 놔뒀어야 했지만
파일이 준비되면 진행되기 때문에 상단배치 해도 괜찮다!
<강사님 문제>
: 이번 문제는 잘 모르는게 많아 강사님 것을 참조함
: 과제칸이 아닌 수업칸에 작성
메뉴1
메뉴1-1
메뉴1-1-1
메뉴1-1-2
메뉴1-2
메뉴1-2-1
메뉴1-2-2
메뉴1-3
메뉴1-3-1
메뉴1-3-2
메뉴2
메뉴2-1
메뉴2-2
메뉴3
입장하면
메뉴1
메뉴2
메뉴3
누르면 안에 있는 것이 보이고 보이고.. 진행
Hint)
toggleClass()를 사용해볼 것
class 속성을 +,-
class="on"
class="off"
>> 시도해 본 내용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>강사님 문제</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
#menu {
position: absolute;
width: 50%;
height: 100%;
background: lightgray;
}
#menu a {
display: block;
padding: 20px;
border: 1px solid black;
}
#menu a.m, ul a {
background: lightpink;
}
#menu a.m.on {
color: red;
}
#menu li ul {
display: none;
}
#menu li ul.on {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<script>
$(document).ready(function() {
$("#menu a.m").click(function() {
$(this).next('ul').slideToggle(200);
});
});
</script>
<ul id="menu">
<li><a href="#" class="m">메뉴1</a>
<ul>
<li><a href="#" class="m">메뉴1-1</a>
<ul>
<li><a href="#">메뉴1-1-1</a></li>
<li><a href="#">메뉴1-1-2</a></li>
</ul></li>
<li><a href="#" class="m">메뉴1-2</a>
<ul>
<li><a href="#">메뉴1-2-1</a></li>
<li><a href="#">메뉴1-2-2</a></li>
</ul></li>
<li><a href="#" class="m">메뉴1-3</a>
<ul>
<li><a href="#">메뉴1-3-1</a></li>
<li><a href="#">메뉴1-3-2</a></li>
</ul></li>
</ul></li>
<li><a href="#" class="m">메뉴2</a>
<ul>
<li><a href="#">메뉴2-1</a></li>
<li><a href="#">메뉴2-2</a></li>
<li><a href="#">메뉴2-3</a></li>
</ul></li>
<li><a href="#" class="m">메뉴3</a>
<ul>
<li><a href="#">메뉴3-1</a></li>
<li><a href="#">메뉴3-2</a></li>
<li><a href="#">메뉴3-3</a></li>
</ul></li>
</ul>
</body>
</html>>> 강사님 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아코디언 메뉴</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
#menu {
position: absolute;
width: 50%;
height: 100%;
background: lightgray;
}
#menu a {
display: block;
padding: 20px;
border: 1px solid black;
}
#menu a.m, ul a {
background: lightpink;
}
#menu a.m.on {
color: red;
}
#menu li ul {
display: none;
}
#menu li ul.on {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<script>
$(document).ready(function() {
$("#menu a.m").click(function() {
$(this).next().addBack().toggleClass("on").end().find(".m, ul").removeClass("on").end().parent().siblings().find(".m, ul").removeClass("on");
return false;
});
});
/*
$(this).next().addBack().toggleClass("on")
자신요소와 자신의 서브메뉴들에게 on class속성 추가
this next()
.find(".m, ul").removeClass("on")
자신의 하위 서브 메뉴들 초기화(on class속성 제거)
.parent().siblings().find(".m, ul").removeClass("on");
다른 메뉴들도 초기화
*/
</script>
<ul id="menu">
<li><a href="#" class="m">메뉴1</a>
<ul>
<li><a href="#" class="m">메뉴1-1</a>
<ul>
<li><a href="#">메뉴1-1-1</a></li>
<li><a href="#">메뉴1-1-2</a></li>
</ul></li>
<li><a href="#" class="m">메뉴1-2</a>
<ul>
<li><a href="#">메뉴1-2-1</a></li>
<li><a href="#">메뉴1-2-2</a></li>
</ul></li>
<li><a href="#" class="m">메뉴1-3</a>
<ul>
<li><a href="#">메뉴1-3-1</a></li>
<li><a href="#">메뉴1-3-2</a></li>
</ul></li>
</ul></li>
<li><a href="#" class="m">메뉴2</a>
<ul>
<li><a href="#">메뉴2-1</a></li>
<li><a href="#">메뉴2-2</a></li>
<li><a href="#">메뉴2-3</a></li>
</ul></li>
<li><a href="#" class="m">메뉴3</a>
<ul>
<li><a href="#">메뉴3-1</a></li>
<li><a href="#">메뉴3-2</a></li>
<li><a href="#">메뉴3-3</a></li>
</ul></li>
</ul>
</body>
</html>
--광고, 갤러리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>광고, 갤러리</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#content{
width:200px;
margin:20px;
}
#content .page{
text-align:right;
margin:5px;
}
#content .page button{
background: lightblue;
color:white;
width:20px;
height:20px;
overflow:hidden;
border:none;
line-height:1.5;
}
#content .pic{
width:150px;
height:150px;
border:3px solid blue;
overflow:hidden;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var total=$('.pic > div').length; // 정수값을 넣지 않아도 알아서 카운팅 : 4
var curr=1;
$(".pageInfo > span:first").text(curr); // 첫번째 second가 있거나 하지 않음
$(".pageInfo > span:last").text(total); // 마지막
$(".nextBtn").click(function(){
curr++;
if(curr>total){
curr=1;
}
$(".pageInfo > span:first").text(curr);
$(".pic div:first").insertAfter(".pic div:last");
});
$(".prevBtn").click(function(){
curr--;
if(curr<1){
curr=total;
}
$(".pageInfo > span:first").text(curr);
$(".pic div:last").insertBefore(".pic div:first");
});
});
</script>
<div id='content'>
<div class="page">
<span class='pageInfo'>
<span></span> / <span></span>
</span>
<button class='prevBtn'>< 이전</button>
<button class='nextBtn'>> 다음</button>
</div>
<div class="pic">
<div><img alt="1번째 사진" src="images/1.png"></div>
<div><img alt="2번째 사진" src="images/2.png"></div>
<div><img alt="3번째 사진" src="images/3.png"></div>
<div><img alt="4번째 사진" src="images/4.png"></div>
</div>
</div>
</body>
</html>
-- 마우스이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 이벤트</title>
<style type="text/css">
div{
margin:20px;
padding:40px;
background-color:lightgray;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.box1').mouseover(function(){
$('.result').append('<strong>마우스오버</strong>');
});
$('.box2').mouseenter(function(){
$('.result').append('<em>마우스엔터</em>');
});
});
</script>
<div class='box1'>마우스오버</div>
<div class='box2'>마우스엔터</div>
<div class='result'></div>
</body>
</html>
-- 키보드엔터 (내가 해본 것)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>키보드 엔터</title>
<style type="text/css">
input{
width:200px;
height:20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#search").keyup(function(e){ // 입력 창의 값에 keyup값 발생
if(e.keyCode==13){ // 그 코드가 13(enter)이면
alert($("#search").val()); // 창 띄우기
$('#out').val($(this).val()); // + 출력값에도 그대로 출력
}
});
});
</script>
<strong>검색창</strong>
<br>
입력 : <input type="text" id="search">
<br>
출력 : <input type="text" id="out">
</body>
</html>