JQuery - (1)

JQuery - (1)

2022. 10. 8. 14:49ㆍDev.Program/JSP & Javascript

728x90

웹서버에 웹애플리케이션 배포

이클립스 WAR 만들기

C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps

웹서버에 FunWeb.war 넣기

C:\Program Files\Apache Software Foundation\Tomcat 8.0\bin

Tomcat8w.exe 오른쪽버튼- 관리자 권한으로 실행

서버 start

지금은 실행중이라 Stop만 나옴

이클립스 꺼져있어야함(2개 동시 실행 못함)

웹브라우저 - http://localhost:8080/FunWeb/main/main.jsp

< JQuery >

자바스크립트로 만든 프로그램
함수들의 모임

WebContent 밑에 js 폴더랑 js_jQuery1 폴더 새로 만들기

https://jquery.com/

컴프레스 - 엔터키 없애고 다 한 줄에 나오는거

우린 언 컴프레스

자바파일 아니고 자바스크립트라 라이브러리에 넣을 필요 없음

js 폴더 안에 넣기

열어보면 이렇게 함수들이 있다!
전부 분석하기는 힘드니까 자주 쓰는 것들! 분석하도록
jQuery 중에서는 ajax을 제일 많이 씀

이렇게 함수들 만들어져 있다.
함수들 어떻게 사용하는 건지 형태, 예제 등등이 다 나와있음

js_jQuery1 밑에 test1.jsp 만들기
script src로 경로 써줘야 jQuery 쓸 수 있다! (보통 head 안에 많이 씀! body 끝에 쓰기도)
<script src="../js/jquery-3.5.0.js"></script>

스크립트 안에 jQuery 쓰겠단 걸 알려줘야함
src가 있어야 이게 동작이 됨!

jQuery를 문서(document)로해서 함수(function)를 사용할 준비(ready)가 되었다는 뜻

실행창

======== js_jQuery1 에 test2.jsp 만들기

< .css() : 모양 꾸미는 함수 >

전체 적용 (‘*’)

// h1 태그 대상 : 글자색 파란색
$('h1').css('color', 'blue');

추가

# document 랑 this 는 작은따옴표 안붙이는데 나머지는 전부 대상 이름 작은따옴표(‘’)안에 넣어줌

id랑 class 값 넣어주기

// ta이름 대상 : 글자색 녹색
$('#ta').css('color', 'green');

추가

// ta2이름 대상 : 글자색 오렌지색
$('.ta2').css('color', 'orange');

추가

input 태그 추가
태그는 같은데 속성값이 다른 건 jQuery로 부를 때 어떻게 할까?

// 태그[속성=값]
// input 태그에 type 속성 값이 text 라는 값 : 글자색 검정
$('input[type=text]').css('color', 'black');

추가
text는 검정색, 나머지 비밀번호는 위에서 전체 적용했던 거랑 똑같이 빨간색이 나온다

$('input[type=text]').val("텍스트 상자 입력된 값");

추가
이렇게 value 값 지정가능

body에 table 추가(table 첫번째 행 번호 0번부터 시작)

// 태그 짝수, 홀수, 첫번째, 마지막 등등 대상지정해서 적용가능
// 태그:odd → 홀수,태그:even → 짝수, 태그:first → 첫번째, 태그:last → 마지막
$('tr:odd').css('background', 'yellow');

// tr 태그 짝수번째 배경색 pink
$('tr:even').css('background', 'pink');
// tr 태그 첫번째 배경색 green
$('tr:first').css('background', 'green');

추가

======== test3.jsp

body 에 h1 태그 3개 추가

$(document).ready(function(){
// 대상.함수();
// .css( propertyName )
// .css( propertyName, value )
// propertyName Type: String
// value Type: String or Number
// .css( propertyName, value ) // 값
// .css( propertyName, function ) // 함수
// Function( Integer index, String value ) ⇒ String or Number
// .css( properties )
});

property ⇒ 속성값 (ex) color, background ... )

var c = $('h1').css('color');
alert(c);

h1의 글자색 검정을 변수 var c 에 담음!
출력창 : 검정 rgb(0, 0, 0);

이렇게 할 경우 모든 색이 다 바뀜

> function 을 이용하여 하나씩 따로 떼내서 색을 바꿔주고 싶다!

value 값 자리에 function 넣어주기!

$('h1').css('color', function(index){
alert(index);
});

일단 index 값 출력해보기
차례대로 나옴!
순서마다 다른 색을 주고싶다!

배열을 활용해서 0번째는 red, 1번째는 green, 2번째는 blue 가 나오게 배열 하나 만들어줌

// 배열활용
var a = ['red', 'green', 'blue'];
$('h1').css('color', function(index){
// alert(index);
alert(a[index]);
});

인덱스 값 대로 색이 잘 출력되는지 확인해보기

return a[index];

추가

// 배열활용
var a = ['red', 'green', 'blue'];
$('h1').css('color', function(index){
// alert(index);
// alert(a[index]);
return a[index];
});

최종 코드
실행창

$('h1').css('color', 'red').css('background', 'pink');

추가
이렇게 .css 로 여러가지 속성을 추가할 수 있다! 근데 .css 두 번 쓰자나~~ 이걸 properties로 한꺼번에 적는 게 가능하다

$('h1').css({
color:'blue',
background:'skyblue'
});

한 번에 쓰기 가능! (properties ⇒ 세미콜론 안적음)

// 속성 color : 'red', 'green', 'blue'
// background : 'pink', 'yellow', 'skyblue'
var b = ['pink', 'yellow', 'skyblue'];
$('h1').css({
color:function(index){
return a[index];
},
background:function(index){
return b[index];
}
});

======== test4.jsp 만들기

js2 폴더에서 이미지 가져오기

body 에 이미지 추가
너비 높이 추가
화면 실행결과

< .attr() : 속성 바꾸는 함수 >

// 대상.함수() 대상.attr()
// .attr( propertyName )
var w = $('img').attr('width');
alert(w);

width 값 출력

// 이미지 태그 width 400 변경
// .attr( propertyName, value )
$('img').attr('width', 400);

너비가 400으로 늘어남! (속성 값 변경)

// .attr( propertyName, function )
// width 100 200 300
var a = [100, 200, 300];
$('img').attr('width', function(index){
return a[index];
});

// .attr( properties )
// width 200 height 400
$('img').attr('width', 200).attr('height', 400);
$('img').attr({
width: 200,
height: 400
});

다음시간에는 효과주는 거 할 거

<test4.jsp>

// src "3.jpg" "4.jpg" "5.jpg"
// border 10 20 30
var s = ['3.jpg', '4.jpg', '5.jpg'];
$('img').attr({
src:function(index){
return s[index];
},
border:function(index){
return (index+1)*10;
}
});

추가
이미지도 바뀌고 테두리선도 생김!

어떤 대상에 글자를 덮어써서 보여줄 때 (아이디 중복 같은 거!) → html

게시판 같은건 글 추가로 보여줄 때 - append

======== test5.jsp

< .html() : 기존 내용 덮어쓰기 >

추가해주기

// .html()
var h = $('h1').html(); // ⇒ h1 대상 내용을 가져옴
alert(h);

// .html( htmlString Type : htmlString )
$('h1').html("html함수"); // => h1 대상 내용을 덮어서 씀

⇒
바뀜(내용 덮어쓰기)

// .html( function )
// Type : Function( Integer index, htmlString oldhtml ) ⇒ html
$('h1').html(function(index){
// 변수 이름 index라고 해도 되고 i라고 해도 되고
// alert(index); ⇒ 차례로 0, 1, 2 뜸
return index;
});

⇒
바뀜 (index 값 리턴 받았기 때문)

// Type : Function(Integer index, htmlString oldhtml) ⇒ html
$('h1').html(function(index, oldhtml){
alert(oldhtml); // h1태그 대상 기존 내용 가져옴
return oldhtml + index; // 기존 값에 추가로 내용 덮어쓰기
});

⇒
인덱스 값 0, 1, 2 붙어서 나옴

body 에 div 태그 추가

// div 태그에 "html함수" 글자 넣기
$('div').html("html함수");

div 태그 내에 글자 생김

// div 태그에 *기존내용* 변경 내용 덮어서 씀
$('div').html(function(index, oldhtml){
return '*' + oldhtml + '*';
});

⇒
앞 뒤로 * 붙이기

⇒ 나중에 아이디 중복체크할 때 html() 함수 쓸 거!

======== test6.jsp

< .append() : 기존 내용 뒤에 추가하기 >

// 대상.append() 기존태그 뒷부분 추가
$('body').append("<h2>head2</h2>")

안에 내용은 그대로 유지 하면서 바디 뒷부분에 추가 됨
⇒

body에 div 태그 추가해주기

$('div').append(function(index){
return index;
});

추가
인덱스가 뒷부분에 추가됨

body 안에 이미지 태그 추가
div로 묶어주고 id 값 im 추가!

// div id="im" 태그에 첫번째 이미지 뒷부분에 추가
$('div#im').append($('img').first());

// 반복 setInterval() 시간마다 반복
setInterval(function(){
$('div#im').append($('img').first());
}, 2000);

2000 이 2초라는 뜻!

2초마다 움직임

======== test7.jsp

< .each() : 반복함수 >

별 기능 없음... 그냥 반복시켜주는 거

body에 h1 태그 추가

head 에 스타일 추가
이렇게 수동으로 css를 적용하는 방법이 있다

< addCalss() : class 추가 >

$('h1').each(function(index){
// alert(index);
$('h1').addClass('high'); ⇒ 추가된 부분
});

공통적으로 적용됨

스타일을 각각 적용시켜주기 위해 전부 색을 다르게 주기

// 1. 대상 태그
$('h1').each(function(index){
// alert(index);
$(this).addClass('high_' + index);
});

그 대상은 this 를 사용 ( this 는 작은따옴표 안에 안넣음 )

> 2차원 배열 만들기

$.each(대상, 함수);

대상이 변수기 때문에 $의 괄호 안에 넣지 않고, each 안에 같이 넣어줌.

// 2. 대상 배열변수
var arr = [
{name:'naver',link:'http://www.naver.com'},
{name:'daum',link:'http://www.daum.net'},
{name:'nate',link:'http://www.nate.com'},
{name:'jquery',link:'http://www.jquery.com'}
];
// $.each(대상, 함수);
$.each(arr, function(index, item){
// item = 순서에 해당하는 내용 저장
// alert(index); // 0, 1, 2, 3 출력
alert(item.name + item.link);
});

alert(item); 출력

alert(item.name + item.link); 출력

*json → DB에서 데이터를 가져올 때 데이터 기호 형태

**xml → DB에서 데이터를 가져올 때 데이터 태그 형태

body에 h2 태그 추가

$.each(arr, function(index, item){
// h2 태그 추가 item.name
$('h2').append(item.name); ⇒ 추가된 부분
});

<br>태그 추가하면
이렇게 한줄씩 나옴
링크까지 추가하고 싶다
링크도 나옴
하이퍼링크로 적용하고 싶을 때 (문자는 “”안에 넣고, 변수들은 밖으로 나오도록)
태그로 나옴!

> 테이블에 넣기….

$.each(arr, function(index, item){
$('table').append("<tr><td>"+item.name+"</td><td>"
+item.link+"</td></tr>");
});

테이블로 만들기

======== js_jQuery2 폴더 만들기 (이제 이벤트 함수들 배워보자!)

======== test1.jsp

이벤트 대상.함수()

body에 h1 태그 추가

< .bind() >

< .click() >

// h1 대상 클릭했을때
$('h1').bind('click', function(){
alert('클릭');
});
$('h1').click(function(){
alert('클릭2');
});

클릭했을 때 alert 창 뜬다

$('h1').click(function(){
// 클릭한 대상 내용을 ‘click’으로 변경
$(this).html('click');
});

⇒
클릭했을 경우 이렇게 바뀜

$('h1').bind('click', function(){
alert('클릭');
// 이벤트 한 번만 하고 종료
$(this).unbind();⇒ 이 부분 추가 unbind();
});

한 번 실행하고 종료!

$('h1').click(function(){
// alert('클릭2');
// 클릭한 대상 내용을 'click' 변경
// $(this).html('click');
// 클릭 대상에 기존내용을 가져와서 "+" 추가
$(this).html(function(index, oldhtml){
return oldhtml + '+';
});
});

append 는 뒤에 추가만 되지만, oldhtml 로 추가하는 건 기존내용을 가지고 와서 덮어쓰기 하는 것

클릭하는 만큼 뒤에 ‘+’ 추가됨 ( 앞 쪽에 unbind(); 함수는 주석처리 )

< .mouseover() >

body 에 이미지 추가하기

// img 대상 마우스오버(mouseover()) 시
// 마우스 오버 한 대상 : 속성(attr()) 값 src = '2.jpg' 로 변경
$('img').mouseover(function(){
$(this).attr('src', '../js_jQuery1/2.jpg');
});

⇒
마우스 오버 했을 때 이미지가 바뀜!

// img 대상 마우스아웃(mouseout()) 시
// 마우스아웃 한 대상 : 속성(attr()) 값 src = '1.jpg' 로 변경
$('img').mouseout(function(){
$(this).attr('src', '../js_jQuery1/1.jpg');
});

마우스아웃 시 원래 이미지로 돌아감!

// 대상.함수().함수().....
$('img').mouseover(function(){
$(this).attr('src', '../js_jQuery1/2.jpg');
}).mouseout(function(){
$(this).attr('src', '../js_jQuery1/1.jpg');
});

적용 대상이 같기 때문에 뒤에 바로 붙여줘도됨! (마우스 오버와 마우스 아웃 합침)

======== test2.jsp

body 부분에 form 태그 추가

// id="myform" 대상으로 submit() 이벤트 발생
// 아이디 메시지 출력 alert(아이디value값) .val()
// 비밀번호 메시지 출력 alert(비밀번호value값) .val()
$('#myform').submit(function(){
alert($('#myid').val());
alert($('#mypass').val());
});

입력했을 때
입력값 alert 창 뜬다!

// 전송 중지 : 기존 기능 중지
return false;

return false 를 통해서 전송중지가 가능

⇒ 이걸 통해서 아이디가 비어있을 경우, 포커스 & 전송중지 제어가능

// 아이디 비어있으면 "아이디입력하세요" 포커스, 전송중지
// 비밀번호 비어있으면 "비밀번호입력하세요" 포커스,전송중지
if(!$('#myid').val()) {
alert("아이디를 입력하세요");
$('#myid').focus();
return false;
} else if (!$('#mypass').val()) {
alert("비밀번호를 입력하세요");
$('#mypass').focus();
return false;
}