221122 Visual Studio Code(이철희쌤 4일차)

Gukbbap·2022년 11월 22일
VisualStrudiodditddit보강ddit이철희쌤ddit철희쌤철희쌤
0

보강

목록 보기
5/7
//간략버젼으로 jQuery 코아 만들깅
var myDom = function(p_sel){
    var elems = document.querySelectorAll(p_sel);
    return this; // 생략가능, 명시적표현
}

객체의 속성이 옮겨담기는 것을 눈으로 확인해 보자

<body>
    <div>경환</div>
    <div>용택</div>
    <div>유화</div>
</body>
<script>
//간략버젼으로 jQuery 코아 만들깅
var myDom = function(p_sel){
    var elems = document.querySelectorAll(p_sel);
    // 옮겨 담깅
    this.length = elems.length;
    for(var i=0; i<elems.length; i++){
        this[i] = elems[i];
    }
    return this; // 생략가능, 명시적표현
}
var divs = new myDom("div");
console.log(divs);
</script>
<body>
    <div>경환</div>
    <div>용택</div>
    <div>유화</div>
</body>
<script>
var merong = function(p_sel){
    return new myDom(p_sel);
}
var myDom = function(p_sel){
    var elems = document.querySelectorAll(p_sel);
    // 옮겨 담깅
    this.length = elems.length;
    for(var i=0; i<elems.length; i++){
        this[i] = elems[i];
    }
    return this; // 생략가능, 명시적표현
}
var divs = merong("div");  
//팩토리패턴이라고도 하고 프록시패턴이라고도 한다. 
   굉장히 중요하다.
console.log(divs); 
</script>

즉각실행함수는 코드 밖에서 안쪽을 건들고 싶어도 건들 수가 없다.
때문에 코드에 보호가 가능해지고 중요하다는 것을 표기하기에도 좋다.

  !function(){
    $ = function(p_sel){
        return new myDom(p_sel);
    }
    var myDom = function(p_sel){
        var elems = document.querySelectorAll(p_sel);
        // 옮겨 담깅
        this.length = elems.length;
        for(var i=0; i<elems.length; i++){
            this[i] = elems[i];
        }
        return this; // 생략가능, 명시적표현
    }
}();
  
<body>
    <div>경환</div>
    <div>용택</div>
    <div>유화</div>
</body>
<script>
//간략버젼으로 jQuery 코아 만들깅

//new를 없애고 시퍼용
!function(){
    var $ = function(p_sel){
        return new myDom(p_sel);
    }

    var myDom = function(p_sel){
        var elems = document.querySelectorAll(p_sel);
        // 옮겨 담깅
        this.length = elems.length;
        for(var i=0; i<elems.length; i++){
            this[i] = elems[i];
        }
        return this; // 생략가능, 명시적표현
    }

    window.$ = $; // 참조, 전역$와 지역$가
  				  //  같은 곳을 가르킴. 
  				  //  블럭 안에서도 전역변수를 선언할 수 있게 됨
}();

전역변수($)에 eq라는 메소드를 추가 하고 싶으면

$.fn.eq = function(p_index){
    return this[p_index];
}

이런식으로 대입해 줄수 있다.

console.log( $("div").eq(1).innerHTML);

이런식으로 사용이 가능하고 이를 출력해보면

용택이 출력되는 것을 확인 할 수 있다.

스크립트에서 innerHTML대신 사용할 수 있는 HTML메소드가 있다.
이도 필수 메소드를 만들어 보겠다.

//jQuery 필수 메소드 맹글어 보깅
$.fn.html=function(){

}

참고사이트 https://jquery.com/

책보다 더 자세하게 설명이 되어 있다.
다만 영어라서...... 힘들뿐이지.....T^T...

html의 패턴을 확인해보자면
제이쿼리 홈페이지에서

검색에 html을 누르면

여러개가 나오는데
callback 함수를 확인하자면

인덱스와 스트링이 사용할 수 있다고 알려준다.

$.fn.html=function(){} 의 ()'괄호' 안에는 매개변수가 최대 1개만 올 수 있다.
함수 또는 문자열이 올수 있다.
물론 없을 수도 있다.

매개변수가 넘어오지 않을때는 undifinde가 담기게 된다.

설명을 위해 억지로 매개변수 값을 생성해보자면

$.fn.html=function(p_arg){
    if(!p_arg){  // 매개변수 값이 안 넘어 왔을 때, 읽기
		return this[0].innerHTML; 
      //선택된것중에 1번째(0번째)에 있는것들을 읽도록 만들었다.
    }

    if(typeof(p_arg) == "string"){  // 전부 쓰기
		for(var i=0; i<this.length; i+) {
          this[i].innerHTML = p_arg;
        }
    }
     //for문안에 있는 모든 값을 사용할 수 있도록 만들었다.

    if(typeof(p_arg) == "function"){  // 골라서 쓰깅
     for(var i=0; i<this.length; i++){
       p_arg(i,this[i].innerHTML)
     }
	 //callback 함수가 왔을 때
    }
}

와 같이 3개의 형식으로 나눠놨다.

상황에 따른 작동 유무를 확인해 볼 것이다.
첫번째것을 확인 하기 위해 아래와 같이 입력하면

alert($("div").html());


첫번째 내용이 출력되는 것을 확인 할 수 있다.

$("div").html("<h1>조경환</h1>"); // 전부쓰깅

html 문자열 안에 위와 같이 입력되면 문자열 인식으로 전부쓰기가 된다.

함수가 오면 callback 함수가 되면

제이쿼리 코어에서 값이 2개가 되기 때문에
값이 2개가 되어야 한다.

$("div").html(function(index,htmlStr){

})

이를 실행해보자면

$("div").html(function(index,htmlStr){
    alert(index + " : " + htmlStr);
})



순차적으로 출력되는 것을 확인 할 수 있다.

인덱스가 1번 2번 교차하고 싶다면

$("div").html(function(index,htmlStr){
    //alert(index + " : " + htmlStr);
    if(index == 1){
        return "졸려용";
    }
})

처럼 주면
1번일때 p_arg가 this.[i]에 넣어줘야 한다.
그래서

if(typeof(p_arg) == "function"){  // 골라서 쓰깅
       for(var i=0; i<this.length; i++){
          this[i].innerHTML=p_arg(i,this[i].innerHTML)
       }
    }

와 같이 넣어 줘야 한다.
this.innerHTML 을 써줘야
값이 할당이 된다.

이렇게 출력되는데 1번째에 '졸려용'이 출력되고
나머지는 undefiend가 들어가진다
이는 자동으로 return이 들어가기 때문이고
이를 없애려면
원래 가졌던 값

$("div").html(function(index,htmlStr){
    //alert(index + " : " + htmlStr);
    if(index == 1){
        return "졸려용";
    }
    return htmlStr;
})

을 출력해야 나머지 객체가 그대로 return이 되서

와 같이 제대로 출력 된다.

$("div").html(function(index,htmlStr){
    //alert(index + " : " + htmlStr);
    if(index == 1){
        return htmlStr + "만만세";
    }
    return htmlStr; // 원래 가진 값 리턴!
})

와 같이 준다면

기존에 있던 내용에 '만만세'가 추가되어서

이와 같이 출력 된다.

조건을 나열해서 필요한 부분을 수정하면 된다.

여기에 메소드 체인을 사용려면 읽기가 아닌 쓰기에 붙여준다.

메소드 체인을 위해서

return this;

이렇게 붙이면 다시 사용할 수 있게 된다.

$("div").html(function(index,htmlStr){
    //alert(index + " : " + htmlStr);
    if(index == 1){
        return htmlStr + "만만세";
    }
    if(htmlStr == "유화"){
        return "그림장인 " + htmlStr; 
    }
    return htmlStr; // 원래 가진 값 리턴!
}).html(function(index,htmlStr){
    if(index == 0){
        return "<h1>경환인 귀여워용?</h1>";
    }
    return htmlStr;
})

return this를 붙임으로서 위와 같은 코드 작성이 가능해진다.

실행시키면

이렇게 중복으로 처리 할 수 있게 된다.

✔ 프론트 프레임워크가 도입되면서 jQuery를 만들어서 사용 하는것이 중요해진다.

제이쿼리 필수 메소드중에
attr은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다.

HTML은 무조건 innerHTML 속성만 다루는데
attr은 type, name, id, value 와 같은 속성값을 컨트롤 할 수 있다.

attr(type)=type을 제어
attr(name)=name을 제어
attr(id)=id를 제어
attr(value)=value를 제어

하는 기능을 가지고 있다.

오늘 보강 최종 코드

위에 내용을 적을까 말까 하다가 적어는 두는데
음.....

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
    .test {
        color:yellow;
        font-size: 4em;
        background-color: black;
    }
</style>
<body>
    <div>경환</div>
    <div>용택</div>
    <div>유화</div>
  <input type="text" name="aaa"  value="흥"><br>
  <input type="text" name="bbb"  value="치"><br>
  <input type="text" name="aaa"  value="뿌"><br>
  <input type="text" name="bbb"  value="웅">
</body>
<script>
//간략버젼으로 jQuery 코아 만들깅

//new를 없애고 시퍼용
!function(){
    var $ = function(p_sel){
        return new myDom(p_sel);
    }

    var myDom = function(p_sel){
        var elems = document.querySelectorAll(p_sel);
        // 옮겨 담깅
        this.length = elems.length;
        for(var i=0; i<elems.length; i++){
            this[i] = elems[i];
        }
        return this; // 생략가능, 명시적표현
    }

    window.$ = $; // 참조, 전역$와 지역$가 같은 곳을 가리킴
    $.fn = myDom.prototype;
}();

//이제 jQuery 플러그인 처럼 즉각실행함수 밖에서 메소드 추가가 가능
// html(),attr(),val(),css(),prop(),on()
// 꼬옥 잠시 시간 내서 val() 과 css() 정도 만들어 보면, 가치가 높아질것임

$.fn.eq = function(p_index){
    return this[p_index];
}
//jQuery 필수 메소드 맹글어 보깅

$.fn.on = function(eName,eCb){
    for(var i=0; i<this.length; i++){
        this[i].addEventListener(eName,eCb.bind(this[i]));
    }
    return this; // 메소드 체인닝!
}


$.fn.attr= function(param1,param2){
    if(typeof(param1) == "string" && !param2){  // 읽깅
        return this[0].getAttribute(param1);
    }

    if(typeof(param1) == "string" && typeof(param2)=="string"){
        for(var i=0; i<this.length; i++){
            this[i].setAttribute(param1,param2);
            //this[i][param1] = param2;
        }
    }

    if(typeof(param1) == "string" && typeof(param2)=="function"){
        for(var i=0; i<this.length; i++){
           this[i].setAttribute(param1,param2.call(this[i],i,this[i].getAttribute(param1)));
        }
    }
    return this;   // 메소드 체인닝!
}



$.fn.html=function(p_arg){
    if(!p_arg){  // 매개변수 값이 안 넘어 왔을 때, 읽기
        return this[0].innerHTML;
    }

    if(typeof(p_arg) == "string"){  // 전부 쓰기
        for(var i=0; i<this.length; i++){
            this[i].innerHTML = p_arg;
        }
    }

    if(typeof(p_arg) == "function"){  // 골라서 쓰깅
       for(var i=0; i<this.length; i++){
          this[i].innerHTML=p_arg.call(this[i],i,this[i].innerHTML)
       }
    }

    return this; // 메소드 체인닝을 위해성
}

//alert($("input").attr("value"));

/*
$("input").attr("type",function(index,attrVal){
    //alert(index + ": "  + attrVal);
    if(index == 2){
        return "button";
    }
    return attrVal;  // 원래 값 리턴
});


$("div").html(function(index,htmlStr){
    console.log("this체킁:",this);
    $(this)  // dom 객체를 jQuery객체로 변환
    //alert(index + " : " + htmlStr);
    if(index == 1){
        return htmlStr + "만만세";
    }
    if(htmlStr == "유화"){
        return "그림장인 " + htmlStr; 
    }
    return htmlStr; // 원래 가진 값 리턴!
}).html(function(index,htmlStr){
    if(index == 0){
        return "<h1>경환인 귀여워용?</h1>";
    }
    return htmlStr;
}).attr("class","test")
.on("click",function(){
    console.log(this); // 결과값 눈으로 확인!
    alert("나 눌렀닝?");
})
*/
//alert($("div").html()); // 읽기, 항상 선택된 것들 중 첫번째만 읽음
//$("div").html("<h1>조경환</h1>"); // 전부쓰깅

var $divs = $("div");  // 여러번 사용해야 되면 꼭 변수로 받아서 사용
$divs.html();          // 메소드 체인닝을 많이 이용
$divs.html("메롱");



//var divs = new myDom("div");

//var divs = $("div");
//console.log(divs);

/*
console.log(divs);
divs[0].innerHTML = "<h1>메롱</h1>";
*/
</script>

여기까지는 ES5버전으로 진행
앞으로는 ES6 버전 이상으로 사용해야 하는데
이와 관련해서 정리해주신다고 함
현재는 ES11 버전이 있다고 하심

잊을까봐 적어두는거지만
음성 녹음 파일은 나스에..
경로 d.OpenDISK\ddit이철희쌤보강
파일명 221122vsCode 4
profile
Gukbbap
Johannes
이전 포스트

221121 Visual Studio Code(이철희쌤 3일차 2)

다음 포스트

221123 Visual Studio Code(이철희쌤 5일차)

0개의 댓글