<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<div id="hian">
<div>희</div>
<div>환</div>
</div>
<div id="hian">인호</div>
<div id="hian">소희</div>
<div id="hian">초록</div>
<input type="text" class = "yj" value="가"><br>
<input type="text" class = "yj" value="나"><br>
<input type="text" class = "yj" value="다"><br>
<input type="text" class = "yj" value="라"><br>
</body>
<script>
// function -> class
// prototype -> 메모리 공유
// 즉각실행함수 -> 핵심코드 보호 및 초기화
// jQuery 안의 callback 스타일
// 메소드체이닝 , return this -> 생성자 함수의 return this와 맥락상 구별!
// 읽기에는 메소드 체이닝을 일반적으로 구현하지 못함
// jQuery 핵심 코어부분(간략버전 , 흐름 이해하기)
(function(){
const $ = function(cssSel){
return new myDom(cssSel);
}
const myDom = function(cssSel){
let domElems = document.querySelectorAll(cssSel);
this.length = domElems.length;
for(let i = 0; i < domElems.length; i++){
this[i] = domElems[i];
}
return this; // class의 의미로(생성자로 쓰겠다는 명시적 표현)
}
window.$ = $; // $->const $를 가리킴, 참조방식이어서 지역변수 $와 전역변수 $가 가리키는 곳이 같다
$.fn = myDom.prototype; // 이게 밖으로 빠지면 , 사용자도 쉽게 메소드 추가 가능!
})();
// jQuery Plug-in 방식을 이용해서 필수 메소드 몇개만 직접 만들어보자
// html() , innerHTML 속성을 편하게 제어해주는 메소드!
// html() -> 읽기 , html("asd") -> 전부쓰기 , html(function(pIdx , pVal){}) -> 부분조작
// html메소드 직접 구현하기
$.fn.html = function(pArg){
// pArg가 안 넘어 왔을 때(pArg == undefined) -> 읽기 동작(여러개 있을 때는 무조건 첫번째)
// 보통 읽기(그결과가 바로 필요할때)에는 메소드 체이닝을 구현하지 않는다
if(!pArg){
return this[0].innerHTML;
}
// pArg에 문자열이 넘어왔을 때 , 전부 쓰기
if(typeof(pArg) == "string"){
for(let i = 0; i < this.length; i++) {
this[i].innerHTML = pArg;
}
return this; // 끝내기
}
// pArg에 function(콜백함수)이 넘어왔을때 , 부분조작
if(typeof(pArg) == "function" ){
for(let i = 0; i < this.length ; i++){
// callback 함수에서 this값을 편하게 쓰기 위해 call사용
this[i].innerHTML = pArg.call(this[i],i, this[i].innerHTML);
}
return this; // 끝내기 , 메소드 체이닝을 위해 , 현재 객체를 리턴
}
}
// val method(value 속성 제어)
$.fn.val = function(pArg){
if(!pArg){
return this[0].innerHTML;
}
return this; // 끝내기
// pArg에 문자열이 넘어왔을 때 , 전부 쓰기
if(typeof(pArg) == "string"){
for(let i = 0; i < this.length; i++) {
this[i].innerHTML = pArg;
}
return this; // 끝내기
}
// pArg에 function(콜백함수)이 넘어왔을때 , 부분조작
if(typeof(pArg) == "function" ){
for(let i = 0; i < this.length ; i++){
// callback 함수에서 this값을 편하게 쓰기 위해 call사용
this[i].innerHTML = pArg.call(this[i],i, this[i].innerHTML);
}
return this; // 끝내기 , 메소드 체이닝을 위해 , 현재 객체를 리턴
}
}
// 꼭 직접 만들어 보는 걸 추천(attr 메소드)
// style을 제어하는 css 메소드 , 매개변수가 최대 2개
$.fn.css = function(pArg1 , pArg2){ // 1:속성명(무조건) , 2:빈값 , 해당속성의값 , 콜백함수
if(!pArg2){
return this[0].style[pArg1]; // 읽기
}
if(typeof(pArg2) == "string"){
for(let i = 0; i < this.length; i++){ // 전부 쓰기
this[i].style[pArg1] = pArg2;
}
return this; // 메소드 체이닝
}
if(typeof(pArg2) == "function"){
for(let i = 0 ; i < this.length ; i++){
this[i].style[pArg1] = pArg2.call(this[i] , i , this[i].style[pArg1]);
}
return this; // 메소드 체이닝
}
}
$("div").css("color" , "blue"); // 전부쓰기
alert($("div").css("color")); //? 빈값?
$("div").css("color",function(pInx , pVal){
// console.log(pInx , this);
if(pInx == 5){
return "green";
}
return "gray";
}).html("<h1>인호 IT관상</h1>");
//alert($(".yj").val()); // 매개변수 없이 넘기면 첫번째 텍스트의 value값을 읽어온다;
$(".yj").val("전부 쓰기?") // 전부 쓰기
.val(function(pInx , pVal){
if(pInx == 3){
return "가ㅁㅁ나 다";
}
return pVal;
})
console.log($("div")[1]) // 이런식으로 꺼내면 jquery 객체인가 아닌가?
jQuery 객체가 아니고 dom객체임! dom객체이기때문에
console.log($("div")[1].val()) 이런형태로 사용 불가
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 개발자가 알아야 할 CSS , 특히 레이아웃
// display , position , overflow , z-index , transform 이정도는 필수로
// 인트라넷에서 활용
window.open("//google.com" , "d", "width=300, height=300, left=50 , top=300");
</script>
display : 화면에 보였다가 감췄다가(보이고 안보이고)
position(위치) , overflow(스크롤) , z-index(레이어) , transform(가끔 재미요소)
window.open -> 지양하는 추세이지만 , 인트라넷 같은 경우에는 쓰면 상당히 유용하고 편하다
범용적인 서비스 사이트를 개설하는 경우 , 소비자가 막을 수 있어서 선택에 주의
-> 이 대안으로 나온것이 모달이고 css를 갖다 쓰는건 문제 없지만, 자신만의 모달을 만들 수 있어야 한다
모달직접 만들어보기 , 나의모달.html 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
body에 전체 내용을 작성하지 않는다
함수이름({}) // 함수 호출문법
jsonFlickrFeed({
... ... ...
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="disp"></div>
<script>
const myDisp = document.querySelector('#disp');
// 호출되는 함수를 미리 만들어 둔다 , 그래야 호출 되니까
const jsonFlickrFeed = function(pData){
alert("호출되나?");
console.log(pData);
let recvItems = pData.items;
for(let i = 0 ; i < recvItems.length ; i++){
let item = recvItems[i];
console.log(item.media.m);
}
}
</script>
<script src="https://www.flickr.com/services/feeds/photos_public.gne?tags=cat&format=json"></script>
</body>
</html>
