47일차 공부 jQuery
1 교시
** javascript 나 css에서 min.이 붙은 파일
=> 내용은 min.이 없는 파일과 같으나 줄 바꿈이 공백을 없애서 파일의 크기를 최소화한 파일
=> min. 없는 파일은 학습용이고 min. 배포용에서 사용
=> 특별한 경우기 아니면 다운로드 받아서 프로젝트에 삽입하는 형식으로 사용
** jQuery
=> UI 구성, Cross Browsing 구현을 쉽게 해주는 라이브러리
=> ajax 사용을 쉽게 해줌
=> 다양한 플러그인이 존재
1. 사용 방식
=> 외부 링크 이용
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
 |
| 링크로 들어가서 내용을 복사한후 .js 파일을 만들어서 그안에 붙여넣는다 |
=> 또는 직접 다운로드 받아서 프로젝트에 포함시켜서 사용
2~3 교시
2. jquery를 사용할 때 스크립트 순서
1) jquery 링크 설정
2) jquery plugin 링크 설정
3) 사용자 스크립트
3. $(document).ready(function(){})
=> 문서의 구조 파악이 끝나면 수행되는 이벤트핸들러 지정
=> window의 load 이벤트와 유사한데 load 이벤트보다 먼저 처리
window.addEventListener("load", function(event){
})
jquery에서는 위의 코드 대신에 아래 코드를 주로 이용
$(document).ready(function(){
})
4. jquery에서 선택자
$('선택자') 형식으로 사용
=> 기본 선택자
$('*') : 전체 선택
$('태그') : 태그를 선택
$('.클래스이름') : 클래스를 선택
$('#아이디') : 아이디를 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>날씨 가져오기</title>
<!-- jquery 링크 설정 -->
<script src="js/jquery.js"></script>
<!-- 사용자 스크립트 -->
<script>
$(document).ready(function(){
//자바스크립트를 이용한 스타일 변경
document.getElementById("msg1")
.style.color='red';
document.getElementById("msg1")
.innerHTML='글자 변경';
//jQuery를 이용한 스타일 변경
$('#msg2').css('color', 'blue');
$('#msg2').html('내용 변경');
// jquery의 이벤트 처리
$('#outer').click(function(){
$('#outer').css('color', 'red');
});
});
</script>
</head>
<body>
<p id="msg1">javascript 만으로 스타일 변경</p>
<p id="msg2">jQuery로 스타일 변경</p>
<div id="outer">
외부
<p id="inner">내부</p>
</div>
</body>
</html>
5. 속성 접근
=> javascript에서는 속성에 직접 접근해서 값을 가져오거나 설정하지만 jquery에서는 메소드를 호출하는 방식으로 석성에 접근
=> html 메소드와 val 메소드를 이용
html 메소드 -> innerHTML : 여는 태그와 닫는 태그 사이의 내용
val 메소드 -> value : 입력도구의 값
html 메소드나 val 메소드에 매개변수를 대입하지 않으면 getter 의 역할이고 매개변수를 대입하면 setter의 역할
=> attr 메소드
속성이름을 대입하면 속성에 해당하는 값을 리턴하고 속성이름과 값을 대입하면 속성에 값을 설정
6. 객체의 순서를 설정해서 편집하는 메소드
=> after, before, append, appendTo, prepend, prependTo, clone 과 같은 메소드들이 존재
7. 스타일 시트 편집
=> 동적으로 스타일 시트를 편집하고자 하는 경우 sytle('속성이름', '값') 이용
8. 수치조작
=> width, height, innerHeight, innerWidth 등과 같은 메소드를 이용
9. 이벤트 핸들링
=> event : 객체에 발생하는 사용자의 동작이나 사용자의 동작으로 인해 발생하는 시스템의 사건 등
=> event handling : 이벤트가 발생했을 때 수행되는 코드를 작성
=> event handler : 이벤트가 발생했을 때 호출되는 함수나 메소드를 소유한 객체
1) 별도의 함수를 이용
click(함수), dblclick(함수), hover(함수1, 함수2) 등을 이용
2) on, delegate, one 등의 함수를 이용해서 이벤트와 함수를 같이 설정
=> delegate : 이벤트가 발생했을 때 자신이 직접 처리하지 않고 다른 객체에게 이벤트 처리를 위임하는 것
3) preventDefault()
=> 기본적으로 제공되는 이벤트를 제거 (수행하지 않음)
4) stopPropagation()
=> 이벤트 버블링을 제거
=> 이벤트 버블링은 부모와 자식 요소에 동일한 이벤트에 대한 핸들러가 각각 존재하는 경우 자식 요소에 이벤트가 발생했을 때 자식 요소의 이벤트 핸들러가 호출되고 부모에게 이벤트를 전달하는 것
5) trigger(이벤트이름, 데이터)
=> 이벤트를 강제로 발생시키는 것
4 교시
10.animation 관련 함수가 추가
11. ajax 사용을 쉽게 해준다.
=> ajax(Asynchronous Javacript XML)
비동기적으로 데이터를 받아오는 기술
전체 화면 갱신없이 데이터를 비동기적으로 받아와서 일부부분만 수정하는데 주로 이용
SPA(Single Page Application)에서는 많이 사용
=>$.ajax(url, 옵션객체);
옵션객체는 객체이므로 { }안에 묶어서 설정
async: Boolean 타입으로 설정하는데 비동기 여부
complete: 작업이 전부 끝나면 호출되는 핸들러 지정
data: 요청 파라미터(클라이언트가 서버에게 넘겨주는 데이터) - 객체 형태로 설정
datatype: 결과로 넘어오는 데이터 타입을 설정 - xml, json, script, text 등
type: 요청 방식을 설정하는 것으로 GET 또는 POST
success: 데이터를 가져오는데 성공했을 때 호출될 핸들러 설정
error: 데이터를 가져오는데 실패했을 대 호출될 핸들러 설정
success 에 핸들러를 지정할 때 매개변수를 1개 설정하는데 매개변수는 전달된 데이터인데 json의 경우는 파싱을 수행해서 객체 형태로 대입을 해주고 xml 이나 html은 태그 형태로 전달을 해주기 때문에 find 메소드를 이용해서 원하는 태그를 다시 골라내야 함
=>jsonp
ajax는 기본적으로 자신의 도메인 내의 데이터만 가져올 수 있는데 jsonp 서비스는 다른 도메인에서도 ajax 요청이 가능하도록 해주는 서비스
서버에서 설정해야 합니다.
서버에서 jsonp 서비스를 제공하지 않는 경우에는 proxy 서버를 구축해서 ajax로 요청을 하면 다른 프로그래밍 언어가 다운로드를 받아서 다시 전달하는 형태로 구현해야 함
12. 날씨 open API를 이용해서 ajax로 날씨 가져와서 출력
1) openweather API
Сurrent weather and forecast - OpenWeatherMap
Dashboard and Agro API We provide satellite imagery, weather data and other agricultural services that are based on geodata. By using Agro API , you can easily power your solution based on this information. Dashboard is a visual service where you can easy
openweathermap.org
=>회원가입을 하고 api key를 받아야 함
앱키
=>도시이름으로 조회
http://api.openewathermap.org/data/2.5/weather?q=도시이름&appid=앱키
=> 위도 경도를 이용해서 검색
http://api.openewathermap.org/data/2.5/weather?q=도시이름&appid=앱키
2)jquery 사용을 위한 설정
=>WebContent 에 js 디렉토리를 생성: 자바스크립트나 css 그리고 프로젝트에서 사용하는 자원은 코드와 분리시켜 놓는게 좋기 때문에 별도의 디렉토리에 생성
=>웹 사이트에서 jquery를 다운로드
=>js 디렉토리에 파일을 만들고 코드를 붙여넣기
5 교시
6) js 디렉토리에 javascript 파일을 만들고 작성 - weather.js
7) weather.html 파일에 스크립트 링크를 작성
<!-- 사용자 정의 스크립트 사용을 위한 설정-->
<script src="js/weather.js"></script>
{ } : 객체 - 속성명
[ ] : 배열 - [인덱스]
weather.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>날씨 가져오기</title>
<!-- viewport 설정
너비는 디바이스의 너비로 확대 축소는 안되도록-->
<meta name="viewport"
content="width=device-width, user-scalable=no">
<!-- 스타일시트 파일 경로 설정 -->
<link rel="stylesheet" href="style/weather.css">
<!-- jquery 사용을 위한 설정 -->
<script src="js/jquery.js"></script>
<!-- 사용자 정의 스크립트 사용을 위한 설정 -->
<script src="js/weather.js"></script>
</head>
<body>
<div id="weather_info">
<!-- 도시이름 출력 영역 -->
<h1 class="city"></h1>
<section>
<!-- 날씨와 아이콘 출력 영역 -->
<p class="w_id"></p>
<figure class="icon"></figure>
<!-- 온도 출력 영역 -->
<aside>
<p class="temp_max">max</p>
<p class="temp_min">min</p>
</aside>
</section>
<!-- 로딩 이미지 출력 -->
<img class="load_img"
src="images/loading.gif"
width="50px" />
</div>
</body>
</html>
weather.css
* {
margin: 0;
font-weight: normal;
}
p {
margin-bottom: 10px;
}
body {
color: #333;
font-size: 100%;
font-family: sans-serif;
}
#weather_info {
position: relative;
width: 100%;
border: 1px solid #999;
box-sizing: border-box;
padding: 10px;
background: #eee;
background:
url("https://lintvwkbn.files.wordpress.com/2016/03/youngstown-ohio-weather-forecast-cloudy-7.jpg")
no-repeat;
background-size: cover;
color: white;
}
h1 {
background: #666;
padding: 10px;
font-size: 1.8em;
text-align: center;
opacity: 0.8;
}
section {
overflow: hidden;
color: #666;
text-shadow: 1px 1px 1px #999;
padding: 10px 20px;
}
section>.w_id {
text-align: left;
padding-left: 20px;
}
section>figure, section>.temp {
float: left;
width: 33.3%;
}
section>figure>img {
width: 80px;
}
section>.temp {
font-size: 3.4em;
}
aside {
overflow: hidden;
}
aside>p {
font-size: 1.8em;
text-align: right;
}
/* 로딩이미지 */
#weather_info .load_img {
position: absolute;
left: 50%;
top: 50%;
display: none;
}
weather.js
//문서 구조를 파악하고 나면 - document.ready
$(function(){
//요청 주소 만들기
var addr =
'http://api.openweathermap.org/data/2.5/weather?q=mokpo&APPID=8cb79fa7fc8457f9fc0c7c59625471a1';
//로딩 이미지 출력
$('#weather_info .load_img').show();
//ajax 요청
//url 이 데이터를 가져올 주소
//type은 요청 방식
//data는 파라미터
//success는 데이터를 가져왔을 때 호출되는 메소드고
//매개변수는 가져온 데이터
$.ajax({
url:addr,
type:'get',
data:{},
success:function(result){
//데이터 확인
//console.log(result);
//국가명과 일출과 일몰 - 객체
var sys = result.sys;
//도시이름 정보 - 문자열
var name = result.name;
//날씨 - 배열
var weather = result.weather;
//온도 - 객체
var main = result.main;
//국가명
var country = sys.country;
//현재, 최고 , 최저 기온 가져오기
var temp = main.temp;
var temp_min = main.temp_min;
var temp_max = main.temp_max;
//구름상태, 날씨상태 코드, 날씨 아이콘 정보
var wmain = weather[0].main;
var wid = weather[0].id;
var icon = weather[0].icon;
//아이콘 가져오기
var icon_url =
"http://openweathermap.org/img/w/" + icon;
//데이터 출력
//도시이름과 국가를 출력
$(".city").html(name + "/" + country);
//아이콘 출력
$(".icon").html("<img src='" +
icon_url + ".png'/>");
//구름 상태 출력
$(".w_id").html(wmain);
//온도 출력
$(".temp").html('현재기온:' + parseInt((temp-273.15)) + '°');
$(".temp_max").html('최고기온:' + parseInt((temp_max-273.15)) + '°');
$(".temp_min").html('최저기온:' + parseInt((temp_min-273.15)) + '°');
//로딩 이미지 숨김
$('#weather_info .load_img').hide();
}
});
});
6~7 교시
13. Open API 사용
1) url - 요청 주소
https://dapi.kakao.com/v2/search/vclip
2) parameter - 클라이언트가 서버에게 넘겨주는 데이터
=> key-value 형태
=> 파라미터는 url?이름=값&이름=값...
=> ajax 요청을 할때는 url 뒤에 붙이지 않고 별도로 설정이 가능
{이름:값, 이름:값...} 으로 생성한 후
javascript 일 때는 send(생성한 객체)를 호출
jquery 에서는 data:생성한 객체 로 설정해도 된다.
url 뒤에 붙이는 경우는 반드시 인코딩을 해주어야 하고 별도로 묶어서 전송하는 경우에는 자동으로 인코딩이 설정된다.
3) header 존재 여부를 확인
=> header도 파라미터와 동일한 방식으로 생성하고 data 대신에 headers에 설정
14. Kakao 동영상 검색 결과를 이용한 페이징 구현
1) Kakao에서 검색 API
내 rest api key : b3e85f6ff630b63d0def9987ba895dde
2) html 파일을 생성하고 본문을 작성
kakao.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>카카오 동영상 검색</title>
<link rel="stylesheet"
href="style/kakao.css">
<script src="js/jquery.js"></script>
<script src="js/kakao.js"></script>
</head>
<body>
검색할 동영상
<input type="text" id="clipname" value="블랙핑크" />
<input type="button" id="searchbtn" value="검색" />
<!-- 출력 영역 -->
<div id="disp"></div>
</body>
</html>
3) javascript 파일을 생성하고 작성 - js 디렉토리의 kakao.js
var apikey = ""
//출력 영역 저장
var disp = null;
//페이지 번호 저장
pageno = 1;
$(function(){
//출력 영역 찾기
disp = document.getElementById("disp");
//검색 함수 호출
search();
//스크롤 하는 위치가 문서의 가장 하단이라면
$(window).scroll(function(){
//스크롤 위치
var scrollHeight =
$(window).scrollTop()
+ $(window).height();
//현재 출력 중인 문서 높이
var documentHeight =
$(document).height();
//스크롤 하는 위치와 문서의 높이가 같으면
//다음 페이지의 데이터를 가져오기
if(scrollHeight == documentHeight){
search(pageno + 1);
}
});
//검색 버튼을 누르면 데이터 검색
$('#searchbtn').click(function(){
search();
});
})
//페이지 번호를 매개변수로 받아서 페이지 번호에 해당하는 데이터를
//찾아와서 disp 영역에 출력하는 함수
function search(no){
//페이지 번호를 설정
if(no == undefined){
pageno = 1;
}else{
pageno = no;
}
//ajax 요청
$.ajax({
url:'https://dapi.kakao.com/v2/search/vclip',
data:{
query:$('#clipname').val(),
page:pageno,
size:30
},
headers:{Authorization : "KakaoAK 06fab290c9f4eb6f130c09796d57bc30"},
type:'get',
success:function(result){
//검색 버튼을 눌렀을 때는 지우고 쓰기
if(pageno == 1){
disp.innerHTML = '';
}
//데이터 출력
var documents = result.documents;
for(var i=0; i<documents.length; i=i+1){
var d = documents[i];
disp.innerHTML +=
'<p><a href="' + d.url + '">' + d.title + '</p>';
}
}
});
}