내가 원하는 이미지이름을 검색하면 해당 이미지가 출력된다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="mSch" value=""><input id="mBtn" type="button" value="이미지검색"><br>
<div id="disp"></div>
<script>
const mySch = document.querySelector("#mSch");
const myBtn = document.querySelector("#mBtn");
const myDisp = document.querySelector("#disp");
const preURL = "<https://www.flickr.com/services/feeds/photos_public.gne?tags=>";
const postURL = "&format=json";
myBtn.addEventListener("click", function(){
let schWord = mySch.value;
let realURL = `${preURL}${schWord}${postURL}`;
console.log("체크 :", realURL); // 디버깅 용
let myScript = document.createElement("script");
myScript.src = realURL;
document.head.appendChild(myScript);
});
// 호출하는 함수를 미리 만들어 줌 , 다른말로 JSONP(JSON Padding)라 부름
function jsonFlickrFeed(pArg){
myDisp.innerHTML = ""; //$("#myDisp").empty(); => $("#myDisp").html("")
console.log("체크 : ", pArg);
let items = pArg.items;
for(let i=0; i<items.length; i++) {
let imgURL = items[i].media.m;
let imgTag = document.createElement("img");// $("<img>")
imgTag.width = 200;
imgTag.height = 200;
imgTag.src = imgURL;
myDisp.appendChild(imgTag); // 실제 document에 추가
}
}
</script>
</body>
</html>
