[자바스크립트] 2022.01.25(화) 코드정리

Whatever·2022년 1월 26일
0

자바스크립트

목록 보기
6/24

로컬스토리지.html

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // sessionStorage는 사용법이 정확히 localStorage와 같음
    // 단지 사이트를 벗어나면 자동으로 삭제되고, localStorage는
    // 자동으로 지워지지 않음(영구저장소)

    //localStorage는 문자열만 저장이 가능하고, Object자체를 저장하진
    //못하는 제약사항을 가지고 있음.
    localStorage.setItem("민정키", "민정값"); //값 생성
    localStorage.jin="유진인 넘 멋져"; //setItem메소드 안쓰고 json방식
    localStorage.setItem("중호키", "중호값"); //키, 값 생성
    localStorage.setItem("중호키", "중호작은키값") //같은 key값이면 value가 수정된다.
    alert(localStorage.length);
    alert(localStorage.jin);

    // alert(localStorage.getItem("민정키")); //키의 값 읽기
    localStorage.removeItem("중호키"); //지우기
    // alert(localStorage.key(0)); // key값 자체를 알고싶을 때
    // localStorage.clear(); //전부 싸악 지우기

</script>

영적질문.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //document.write
        /*
        function myprint(p_msg){
            document.write(p_msg);
        }
        */
        //document객체의 write메소드를 myprint로 쓰겠다.
        myprint = document.write.bind(document); // 문법적 오류? 없음
        myprint("<h1>BTS vs BlackPink </h1>");
        myprint("<h1>BlackPink 씅 </h1>");
    </script>
</body>
</html>

움직이기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #id_ball{
        position:absolute;
        width:100px;
        height:100px;
        border:3px solid pink;
        border-radius: 50%;
        left:0;
        top:150;
        background-image: url("./images/roze01.jpg");
        background-size: 100px 100px;
        /*transform: rotate(45deg);*/
    }
    #id_bar{
        position: absolute;
        width:300px;
        height: 30px;
        background-color: black;
        border: 3px solid pink;
    }

</style>
<body>
    <input type="button" id="id_press" value="눌렁바">
    <input type="button" id="id_stop" value="멈춰">
    <div id="id_ball"></div>
    <div id="id_bar" style="left:30px;top:400px;"></div>
<script>
    // DOMContentLoaded vs onLoad 차이도 알아둘것
    var v_ball = document.getElementById("id_ball");
    var v_btn = document.querySelector("#id_press");
    var v_stop = document.querySelector("#id_stop");
    var v_bar = document.querySelector("#id_bar");
    var v_timer; //전역변수 선언

    window.addEventListener("keydown",function(){
        // alert(event.keyCode); // 화살표 먼저 확인
        if(event.keyCode == 37){ //왼쪽
            if(parseInt(v_bar.style.left) > 0){
                v_bar.style.left = parseInt(v_bar.style.left) - 10 + "px";
            }
        }

        if(event.keyCode == 39){ //오른쪽
            if(parseInt(v_bar.style.left) <= window.innerWidth){
                v_bar.style.left = parseInt(v_bar.style.left) + 10 + "px";
            }
        }

    });

    v_stop.addEventListener("click",function(){
        clearTimeout(v_timer);  // 타이머 멈추기(reset)
        v_start=false;
    });

    var v_mvW = 10;
    var v_mvH = 10;
    var v_gakdo = 0;
    
    
    // alert(bar_t);
    
    function f_go(){
        var bar_l = parseInt(v_bar.style.left);
        var bar_r = parseInt(v_bar.style.left) + 300;
        var bar_t = parseInt(v_bar.style.top);
        // alert(parseInt(v_ball.style.left));
        v_gakdo = (v_gakdo + 10) % 360; 
        if(!v_ball.style.left){ // 인라인 스타일이 정의가 되어있지 않다면
            v_ball.style.left = "0px";
            v_ball.style.top = "0px";
        }
        v_ball.style.left =  parseInt(v_ball.style.left) + v_mvW + "px";
        v_ball.style.top =  parseInt(v_ball.style.top) + v_mvH + "px";
        var v_right = parseInt(v_ball.style.left) + 100;
        var v_bottom = parseInt(v_ball.style.top) + 100;
        var v_c = parseInt(v_ball.style.left) + 50;

        v_ball.style.transform="rotate(" + v_gakdo + "deg)";
        //왼쪽, 오른쪽 끝에 닿았을 때
        if((v_right >= window.innerWidth) || (parseInt(v_ball.style.left) <=0)){
            v_ball.style.transform="rotate(45deg)";
            v_ball.style.transform="skewX(45deg)";
            v_mvW = -v_mvW;
        }
        //위, 아래 끝에 닿았을 때
        if((v_bottom >= window.innerHeight) || (parseInt(v_ball.style.top) <= 0)){
            // v_ball.style.transform="rotate(45deg)";
            v_ball.style.transform="rotate(45deg) skewY(45deg)";
            v_mvH = -v_mvH;
        }

        
        //bar의 왼쪽끝, bar의 오른쪽 끝, bar의 윗면(v_top) == ball의 bottom이 ball의 밑바닥과 닿았을 때
        if(v_bottom == bar_t && bar_l <= v_c && v_c <= bar_r ){ //
            // alert(bar_l +"/"+  v_c + "/" +bar_r);
            v_ball.style.transform="rotate(45deg) skewY(45deg)";
            v_mvH = -v_mvH;
            v_mvW = -v_mvW;
        }
        if(v_barBottom -200 < parseInt(v_ball.style.top))
            
        /*  //왼쪽 끝에 닿았을 때
        if( ){
            v_mvW = -v_mvW;
        } */
            
        // alert(window.innerWidth) // 사용자보는 창 넓이를 알 수 있음
        //버튼을 눌렀을 때 - false / 버튼을 누르지 않았을 때(자동적) - true
        // if(flag){
        //     setTimeout(f_go, 150, flag=true); // 재귀 호출
        // }
        v_timer = setTimeout(f_go, 50) //재귀 호출
    }
    
   // 코드 안에서 자신을 조금 어필하려면 !나 ?을 괜히 적당히 써준다
   var v_start=false;
    function f_proxy(){
        if(!v_start){
            f_go();
            v_start=!v_start;
        }

    }
        
    v_btn.addEventListener("click", f_proxy);
    //v_btn.addEventListener("click", f_go, {once : true});

    
    /* 요게 옛날거
    v_btn.onclick = function(){
        alert("나 눌렀닝?");
    }
        동시에 하면 나머지 하나만 출력됨
    v_btn.onclick = function(){
        alert("나 눌렀닝? 아마");
    }
     */

    /* 요게 나중꺼
    v_btn.addEventListener("click", function(){
        alert("내가 먼저");
    });
    v_btn.addEventListener("click", function(){
        alert("내가 나중");
    });
    */

    /*
    window.onload = function(){
        v_ball.style.left = "300px";
    }
    */

</script>    
</body>
</html>

확인문제.html

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    var blackpink = [
        {"name":"로제", "position":"grade1"},
        {"name":"제니", "position":"grade2"},
        {"name":"리사", "position":"grade3"},
        {"name":"지수", "position":"grade4"}
    ]
    var v_pos = {
        "grade1":"사장",
        "grade2":"전무",
        "grade3":"상무",
        "grade4":"이사"
    }

    var v_tblStr = "<table border=1>";
    v_tblStr += "<tr><th>넘버</th><th>이름</th><th>직책</th></tr>"

    for(var i=0; i <blackpink.length; i++){
        v_tblStr += "<tr>";
        v_tblStr += "<td>" + (i+1) + "</td>";
        v_tblStr += "<td>" + blackpink[i].name + "</td>";
        v_tblStr += "<td>" + v_pos[blackpink[i].position] + "</td>";
        v_tblStr += "</tr>";
    }

    v_tblStr += "</table>";
    document.write(v_tblStr);
</script>

callback함수.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    //Callback함수 -> 말 그대로 뒤에 불린다고 해서 콜백 함수

   function f_bbb(){
       alert("bbb");
   }

   function f_ccc(){
       alert("로제 Gone");
   }

   //자바스크립트는 함수도 함수의 매개변수로 받을 수 있음
   //이런걸 멋진말로 first class 언어라고 부름
   function f_aaa(p_fc){
       alert("aaa");
      // f_bbb();         // f_bbb 콜  이것이 callback
      p_fc();
   } 

//   f_aaa(f_bbb);
//   f_aaa(f_ccc);

   var f_arr = function(p_arr,p_cb){
        for(var i=0; i<p_arr.length; i++){
            p_cb(i,p_arr[i]);
        }
   }

   var v_arr = ["흥","칫","뿡","킁"];
   f_arr(v_arr,function(p_inx,p_val){
        if(p_val == "뿡"){
            v_arr[p_inx]="뿡뿡";
        }
        if(p_inx == 0){
            v_arr[p_inx]="로제 짜앙!";
        }
   });

   alert(v_arr);



</script>

this다루기.html

<!DOCTYPE html>
<meta charset="UTF-8">
<body>
    <input type="button" value="눌러바앙" class="bts">
</body>
<script>
    function f_ck(p_arg1,p_arg2){
        alert(this.name + p_arg1 + p_arg2);
    }

    var v_sulgi = {
        name:"슬기로운 슬기 "
    }
    var v_bts = document.querySelector(".bts");
    v_bts.addEventListener("click",f_ck.bind(v_sulgi,"반장 "," 안녕"));

    //this때문에 짜장난다면, 직접 제어하세요
    // call, apply, bind(중요)

    function f_this(p_arg1,p_arg2){
        console.log("체킁:",this, p_arg1, p_arg2);
    }

   // f_this(); // this -> window
   //f_this.call(document);
   var v_roze ={
       name:"나의 로젱"
   } 
   //f_this.call(v_roze,"지수","리사");
   //f_this.apply(v_roze,["로제","제니"]);
   //call vs apply 차이는 apply는 매개변수를 배열에 담아서 한번에 넘겨야 함
   //선택해서 1개만 잘 쓰면 됨, 고참이 apply  쓰면 다  call  바꿔버림

   //f_this.bind(v_roze,"로제","PL")();
   //var f_new = f_this.bind(v_roze,"로제","PL");
   //f_new("반장","이해되지용?");
   //bind는 함수를 실행시켜주는 것이 아니고, 
   //암묵적으로 this가 세팅된 새로운 함수를 만들어서 그 
   //그 Reference(함수 포인터)를 리턴함

</script>

this에관한고찰

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
   //this 대체 넌 뭐닝?, 넘 어려웡
   //alert(this); //? window
   function f_check(){
       //alert(this); //? why?
       console.log(this);
   }
   //window.f_check(); // 앞에 window가 생략되어 있었음!!
   //var v_var = "변수지용";
   window.v_var = "변수지용";
   //alert(v_var);  // 확인

   var v_roze= {}; // {msg:function(){..}}
   v_roze.msg = function(){
       console.log(this);//?
   }
  // v_roze.msg();
  v_roze.jinsuk= f_check;
  v_roze.jinsuk();  //?
</script>
profile
Whatever
이전 포스트

[자바스크립트] 2022.01.24(월) 코드정리

다음 포스트

[자바스크립트] 2022.01.26~27 코드정리(CRUD 게시판)

0개의 댓글