46-1. jQuery
1. 이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<title>이벤트</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>이벤트 핸들러(이벤트 발생 시 실행될 코드) 연결 방법 종류</h1>
<h3>* 방법 1. 이벤트 메소드를 통한 연결</h3>
<pre>
$('선택자').이벤트메소드(function(){
에빈트 발생 시 실행할 내용;
})
</pre>
<h3 id="test1">클릭해보세요!</h3>
<script>
$(function(){
$('#test1').click(function(){
// console.log(window.event.target);
console.log(this);
$(this).text('클릭하셨네요!');
});
// 더블클릭
$('#test1').dblclick(function(){
$(this).css('color', 'pink');
});
});
</script>
<br><br>
<h3>* 방법 2. on메소드를 호출하는 방법</h3>
<pre>
[ 표현법 ]
$('선택자').on('이벤트명', function(){
이벤트 발생 시 실행할 내용;
});
</pre>
<h4 id="test2">마우스로 클릭도 해보고 올려도보고</h4>
<script>
$(function(){
/*
// 클릭 : click
$('#test2').on('click', function(){
$(this).css('background', 'lime').text('클릭~');
});
// 올려도보고 : mouseenter
$('#test2').on('mouseenter', function(){
$(this).css('color', 'skyblue');
});
*/
/*
$('#test2').on({click : function(){
$(this).css('background', 'lime').text('클릭~');
}, mouseenter : function(){
$(this).css('color', 'skyblue');
}});
*/
$('#test2').on({
mouseenter : function(){
$(this).css('background', 'yellowgreen').text('마우스올라감~');
},
mouseout : function(){
$(this).css('background', 'greenyellow').text('마우스빠져나감~');
},
click : function(){
// 클릭이벤트가 발생한 경우 mouseenter, mouseout 이벤트 핸들러 제거
$(this).off('mouseenter').off('mouseout');
// off('삭제할 이벤트명') : 이벤트 핸들러 제거
$(this).css('background', 'orangered').text('이벤트제거~');
}
});
})
</script>
<br><br><br>
<h3>* 방법 3. on메소드를 쓰는 방법 *****</h3>
<pre>
[ 표현법 ]
$('상위요소선택자').on('이벤트명', '하위요소선택자', function(){
이벤트 발생 시 실행할 내용;
});
</pre>
<div id="wrap">
<h4>h4요소를 클릭해보세요.</h4>
<h5>h5요소를 클릭해보세요.</h5>
</div>
<script>
$(function(){
// $('#wrap>h4').on('click', function(){});
// $('#wrap').children('h4').on('click', function(){});
// ==
$('#wrap').on('click', 'h4', function(){
alert('날 클릭했니??');
});
// 현재 이 문서상의 모든 요소들 중에서 h1 ~ h6에 대해서 클릭 이벤트핸들러를 부여하고 싶다.
/*
$('h1, h2, h3, h4, h5, h6').on('click', function(){
})
*/
// $(document) : 이 문서객체를 제이쿼리화 시킨 것
/*
$(document).on('click', 'h1, h2, h3, h4, h5, h6', function(){
console.log(this);
$(this).css('color', 'aqua');
});
*/
})
</script>
<hr>
<h3>* 동적으로 만들어진 요소에 이벤트 적용</h3>
<!--
동적으로 만들어진 요소 :
처음 문서 로딩시에는 존재하지 않다가 나중에 새롭게 만들어지는 요소
-->
<div id="wrap2" style="border : 1px solid red">
<h6>기존에 존재하는 요소</h6>
<!-- 바로 여기에 -->
</div>
<script>
jQuery(document).ready(function(){
// 방법 1. 이벤트 메소드 호출 => 동적으로 만들어진 요소는 이벤트 적용 안됨
/*
$('#wrap2>h6').click(function(){
$('#wrap2').append('<h6>새롭게 추가된 요소</h6>');
})
*/
// 방법 2. on메소드 => 동적으로 만들어진 요소는 이벤트 적용 안됨
/*
$('#wrap2>h6').on('click', function(){
$('#wrap2').append('<h6>새롭게 추가된 요소2</h6>');
});
*/
// 방법 3. on메소드
$('#wrap2').on('click', 'h6', function(){
$('#wrap2').append('<h6>새롭게 추가된 요소3</h6>');
});
// 동적으로 만들어진 요소에 기존에 존재하는 이벤트를 적용하고자 한다면
// 반드시 3번 방법으로 해야함!!!
// => 문서 로딩이 끝난 후!($(function(){})) 이벤트가 적용된 요소가 누구냐에 따라 달라짐
});
</script>
<hr>
<h3>* 일회성 이벤트</h3>
<p>
이벤트는 딱 한번만 연결할 때 사용
</p>
<pre>
[ 표현법 ]
$('선택자').one('이벤트명', function(){
이벤트 발생 시 실행할 내용;
});
</pre>
<h6 id="test3">단 한번만 클릭할 것!</h6>
<script>
$(function(){
$('#test3').one('click', function(){
alert('나는 한번만 나와~');
});
});
</script>
<hr>
<h3>* 키보드 관련 이벤트</h3>
<p>
키가 눌렸을 때 발생하는 이벤트 <br>
- keydown : 키보드가 모든 키가 눌릴 때 발생 <br>
- keypress : 키보드의 function키, 기능키, 한글을 제외한 나머지 키가 눌릴 때 발생 <br><br>
키가 떼어질 때 발생하는 이벤트 <br>
- keyup
</p>
<input type="text" id="test4">
<script>
$(function(){
$('#test4').keydown(function(){
//console.log('키보드 눌림');
// console.log(this.value);
// console.log($(this).val());
// console.log(typeof($(this).val()));
// console.log($(this).val().length); // 실시간 글자수 세기(keydown은 글자수 하나씩 밀림)
});
$('#test4').keyup(function(){ // keyup은 글자수 정확함
console.log('올라옴');
});
});
</script>
<hr>
<h3>* 글자수 세기 예제</h3>
<div style="border : 1px solid lightgray">
150자 이내로 입력하시오. <br>
<textarea id="content" cols="40" rows="10" style="resize : none;" maxlength="150"></textarea>
<br>
<hr>
<span id="count">0</span> / 150
</div>
<script>
$(function(){
$('#content').keyup(function(){
// console.log($(this).val().length); // textarea도 div와 같이 val을 쓴다!!
$('#count').text($(this).val().length);
});
});
</script>
<hr>
<h3>체크박스!!</h3>
<div id="wrapper">
<div>
<input type="checkbox" id="all" class="batch"> 전체
<input type="checkbox" id="kr" class="batch"> 한식
<input type="checkbox" id="jp" class="batch"> 일식
</div>
<hr>
<div>
<input type="checkbox" class="chk kr"><label>김치찌개</label>
<input type="checkbox" class="chk kr"><label>국밥</label>
<input type="checkbox" class="chk kr"><label>김치</label>
<hr>
<input type="checkbox" class="chk jp"><label>초밥</label>
<input type="checkbox" class="chk jp"><label>타코야끼</label>
<input type="checkbox" class="chk jp"><label>라멘</label>
</div>
</div>
<script>
$(function(){
// 오류를 여기서 또 수정해주자(하위선택을 해제해도 전체나 한식 일식이 계속 선택되어있음)
$('.batch').on('change', function(){
if($(this).prop('checked') == false){
$('#all').prop('checked', false);
}
});
// 숙제... 완벽하게 만들기!!!----------------------------------
// 요소 전체가 선택되면 '전체'가 선택됨
// 한식 하위가 풀리면 '한식'이 풀림
$('.kr').on('change', function(){
})
// 일식 하위가 풀리면 '일식'이 풀림
// 한식 하위가 모두 선택되면 '한식'도 선택됨
// 일식 하위가 모두 선택되면 '일식'도 선택됨
// 전체를 체크하면 모두 체크 되도록
$('#all').on('change', function(){
// console.log('모범시민');
// console.log($('#all').prop('checked')); (attr은 input에서 잘 안먹을떄도 있음..?)
let $all = $('#all').prop('checked');
if($all){
$('.batch, .chk').prop('checked', true);
}
else{
$('.batch, .chk').prop('checked', false);
}
});
$('#kr').on('change', function(){
let $kr = $('#kr').prop('checked');
if($kr){
$('.kr').prop('checked', true);
}
else{
$('.kr').prop('checked', false);
}
});
$('#jp').on('change', function(){
let $jp = $('#jp').prop('checked');
if($jp){
$('.jp').prop('checked', true);
}
else{
$('.jp').prop('checked', false);
}
});
})
</script>
</body>
</html>
2. 안중요한거1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>안중요한거1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>시각적인 효과 메소드(Effect메소드)</h1>
<p>
페이지 내에서 애니메이션 효과를 만들기 위해 사용하는 메소드 <br><br>
</p>
<h3>* show(), hide(), toggle()</h3>
<button id="hide">숨기기</button>
<button id="show">보이기</button>
<button id="toggle">토글</button>
<br><br>
<img src="https://blog.kakaocdn.net/dn/cbGZHs/btqS1VzDCqM/PRWMbgOcKqeAQpqn4l9zfK/img.jpg" id="gukbab">
<br><br>
<h3>* fadeIn(), fadeOut(), fadeToggle()</h3>
<p>
선택된 요소가 점점 투명해지면서 사라지고, 점점 선명해지면서 보여지게 하는 메소드
</p>
<button id="fadeOut">숨기기</button>
<button id="fadeIn">보이기</button>
<button id="fadeToggle">토글</button>
<script>
$(function(){
$('#fadeOut').click(function(){
$('#gukbab').fadeOut(3000);
});
$('#fadeIn').click(function(){
$('#gukbab').fadeInt(3000);
});
$('#fadeToggle').click(function(){
$('#gukbab').fadeToggle(1000);
});
// 숨기기버튼
$('#hide').click(function(){
$('#gukbab').hide(3000); // 시간(ms)
});
// 보이기버튼
$('#show').click(function(){
$('#gukbab').show(3000);
});
// 토글
$('#toggle').click(function(){
$('#gukbab').toggle(1000);
});
})
</script>
</body>
</html>
3. 안중요한거2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>안중요한거2- 아코디언 메뉴 만들기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
div{
background-color : cornflowerblue;
width : 500px;
height : 50px;
line-height : 50px; /* 블럭요소이기 때문에 line-height. 보통 세로길이랑 똑같이 주면됨 */
border : 1px solid darkblue;
border-radius : 10px;
color : white;
padding : 12px;
}
p{
padding : 12px;
width : 500px;
border : 1px solid yellowgreen;
color : forestgreen;
border-radius : 10px;
display : none;
}
</style>
</head>
<body>
<!--
slideDown(), slideUp()
선택된 요소가 점점 아래로 내려오면서 나타났다가
점점 위로 올라가면서 사라지게 하는 메소드
고객센터, FAQ, QNA
-->
<!--
질문은 div
답변은 p
-->
<div>Q. [교환/반품] 상품을 교환/반품하고 싶어요.</div>
<p>A. 반품은 3~4일 정도 걸립니다.</p>
<div>Q. [스미싱] 알 수 없는 번호로 쿠팡 관련 문자를 받았어요.</div>
<p>A. 조심하세요~</p>
<div>Q. [회원탈퇴] 회원 탈퇴는 어떻게 하나요?</div>
<p>A. 회원 탈퇴는 못해요~</p>
<div>Q. [회원서비스] 휴대폰 알림은 어떻게 설정하나요?</div>
<p>A. 알림앱을 여시고... </p>
<script>
$(function(){
$('div').click(function(){
// console.log($(this));
// $(this) : 현재 클릭 이벤트가 발생한 div요소
// $(this).next() : 현재 클릭 이벤트가 발생한 div요소 바로 뒤에 있는 p요소
let $p = $(this).next();
// jQuery방식으로 선택된 요소를 담을 때 변수명 앞에 $를 붙일 수 있음
// $p.slideDown(1000);
// css() => 속성명만 인자값으로 전달하게 되면 속성값을 반환해준다.
// console.log($p.css('display'));
if($p.css('display') == 'none'){ // 속성값이 검정색(string)이니까 ''로 묶어줌
// 기존에 열려있던 p태그는 닫아주기!
$p.siblings('p').slideUp(1000);
// 디스플레이 속성값이 none일 때 열어줌!
$p.slideDown(1000);
}
else{
$p.slideUp(1000);
}
});
});
</script>
</body>
</html>
46-2. W.A.S
Servlet
W.A.S(Web Application Server) : Web Server + Servlet Container(HTML, CSS, J.S)
동적데이터
apache : 정적데이터
Apache Tomcat 실행환경 구성
1. 다운로드(java eclipse버전과 호환 - Tomcat8 다운)
2. 환경설정
problems, servers, console, project explorer, navigator
3. 인코딩 UTF-8 설정
1) window - preferences - general - workspace - text file encoding (UTF-8)
2) window - preferences - general - editors - text editors - spelling - encoding (UTF-8)
3) window - preferences - web - css files - encoding - 맨위( ISO 10646/Unocode(UTF-8) )
4) window - preferences - web - jsp files - encoding - 맨위( ISO 10646/Unocode(UTF-8) )
5) window - preferences - web - HTML files - encoding - 맨위( ISO 10646/Unocode(UTF-8) )
6) window - preferences - XML - XML files - encoding - 맨위( ISO 10646/Unocode(UTF-8) )
7) window - preferences - JSON - JSON files - encoding - 맨위( ISO 10646/Unocode(UTF-8) )
4. eclipse - Apache Tomcat과 연결
window - preferences - Server - Runtime Environment - Apache Tomcat v8.5 (+create a new local server 체크)
- next - directory : C:\development\apache-tomcat-8.5.93 (다운로드 받아 압축 푼 파일) 안으로 들어야됨
- JRE : jdk1.8.0_372
- Finish
------------
5. server 새로 만들기 (host name은 보통 회사는 www)
6. server더블클릭 후, port번호 바꿔주기(서버실행 시 오류 => 기본 8080 충돌) / 파일 업로드 숨김 풀기(체크박스 체크)
도메인 : http://localhost => 사이트 요청할 수 없음 (정상)
=> 정상(가용상태)
도메인 : http://localhost => 사이트 요청할 수 없음(정상)
도메인 : http://localhost:8888 => HTTP상태 404 _ 찾을 수 없음 (정상)
-------------------------------------------------------------------------------------
Project 실행
Static / Dynamic / Automatic
Physical / Logical / Vertual
New Dynamic Web Project 생성
- Default output folder : .class가 저장될 경로 (WebContent/WEB-INF/classes)
- Context root : 프로젝트의 고유한 별칭(고유한 식별값)
- Content directory : 실제 배포되는 폴더(배포 시 압축될 때 실행할 때 필요한 폴더만) (WebContent)
- Generate web.xml deployment descriptor : 꼭 안 만들어도 되지만 체크해서 만들어 줄 것
지구본J 생김~
'FrontEnd > JQuery' 카테고리의 다른 글
| #45. jQuery(content영역관련메소드, 요소생성및제거, 추가적인메소드, 응용예시) (0) | 2023.09.04 |
|---|---|
| #44. jQuery 기본선택자, 추가적인선택자, 필터링관련선택자, 탐색(순회)메소드_조상, 자식, 동위 (1) | 2023.09.01 |