April 1~28, 2021 - Front-end(JavaScript)

#Front-end(JavaScript)

 

 

*4월1일~28일

-function, callback, apply, closure, self-invocation, jquery 등

 

 

*Function

-var x = function (a, b) {return a * b}; //익명함수

-arguments.length // parameter들의 길이를 가져올 수 있음; 배열형으로 형성되어 있음.

-ES5, ES6용 따로 정의; 자바스크립트만으로 개발하는 회사에서 주로 보임;

-optional param

 

function(x, y = 2) {

    //y는 빈값일 시 2로 둠; overloading

}

 

*function callback관련

-call은 function에 적용한다고 생각하면됨;

-부름 당한 놈이 부른놈을 다시 찾는 개념;

source: w3schools.com

 

source: w3schools.com

 

*function apply관련

-array로 관리됨;

-call보다 더 많이 씀;

-기본적으로 던질 객체가 없을 시 null로 둠;

 

-기존

Math.max.apply(1, 2, 3));

 

-apply 적용

Math.max.apply(null, [1,2,3]);

 

*function closures

-변수에 대한 범위 설정을 담당하는 것; 매우 중요;

-function 안이면 local, 밖이면 global;

-왜쓰냐...?! -> 외부 데이터 가져올 때, 전역변수가 겹치면 문제가 되기에 -> closure의 self-invoking을 활용해서 읽을때는 위쪽부모만, 실행때는 아래쪽 자식만 실행하는것... -> 즉, self-invoking 자체가 외부와 별도로 고유 영역을 만드는 개념... 

-vuejs, react 라이브러리, 프레임웍 등에서 closure 구조가 많음; 추가학습하기

 

let name ="김민구";

 

function print() {

    var name = "박진우";

}

 

-같은 이름은 가지는 전역변수와 지역변수가 있을 때 이 둘은 서로 다른 변수임.

-하나를 변경하더라도 다른것에는 영향이 없음.

-함수 내에서 전역 변수와 같은 이름의 지역변수를 정의해 버리면, 전역변수는 가려져서 사용할 수 없게됨.

-전역 변수의 수명은 웹페이지가 살아 있는 동안까지 살아있습니다.

-지역변수는 함수가 호출될 때 함수 안에서 생성되고, 함수가 종료될 때 지워집니다.

 

function greeting(param) {  //김민구, 박진우param으로 들어감;

    var greeting = "안녕! ";

 

    return function() { //리턴을 펑션으로

        console.log(greeting + name);   //지역변수 greeting + param이 합쳐져 출력됨;

    };

}

 

let greeting1 = greeting("김민구");

let greeting2 = greeting("박진우");

 

greeting1();

greeting2();

 

//result

안녕! 김민구

안녕! 박진우

 

 

-self-invocation(자가호출); 한 구조    = immediately invoked function

source: w3schools.com

*mozilla closure 추가 설명 

-https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

-init()은 지역 변수 name과 함수 displayName()을 생성한다. displayName()은 init() 안에 정의된 내부 함수이며 init() 함수 본문에서만 사용할 수 있다. 여기서 주의할 점은 displayName() 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init()에서 선언된 변수 name에 접근할 수 있다. 만약 displayName()가 자신만의 name변수를 가지고 있었다면, name대신 this.name을 사용했을 것이다.

 

-코드

function init() {

  var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.

  function displayName() { // displayName() 은 내부 함수이며, 클로저다.

    alert(name); // 부모 함수에서 선언된 변수를 사용한다.

  }

  displayName();

}

init();

 

*literal formatting, expression language

-1번키 앞 (` `); 물결키, 'reversed apostrophe'

-console.log(`이 도형의 크기는 ${width} * ${height} 입니다.` ); // 안에있는 것을 문자열 그 자체로 인식함;

 

  <script>

    let width = 100;

    let height = 100;

 

    console.log(`이 도형의 크기는 ${width} * ${height} 입니다.`);

  </script>

 

    log창

    이 도형의 크기는 100 * 100 입니다.

 

 

*JS 예제 관련 정리

-math.random() * 1001 // 0~1000

-numArr.length-1 // 가장 뒷번호; index number로 적어도 좋지만, 실무에서는 이렇게;

-객체는 forIn, 배열은 forOf

-if,else 구조 시 삼항연산자 자주 씀, 조건 ? 결과1 : 결과2;

 

document.getElementById("input").value >= 2 ? a : b;

 

-입력한 인원수만큼 input 만들기

 

document.getElementById("printBtn").addEventListener("click",function(){

 

let lis = '';

for (let i = 0; i < parseInt(document.getElementById("num").value); i++) {

lis +='<li>이름 : <input type="text" name="un"> ';

lis += '나이 : <input type="number" name="age"></li>';

}

 

document.getElementById("inputArea").innerHTML = lis;

});

 

-firstElementChild.value // CSS selector로 element value값만 가져오는 것;

 

let lis = document.querySelectorAll("#inputArea li");   //id inputArea 밑의 <li> 모두;

 

for (let li of lis) {

let infoObj = {};

infoObj.name = li.firstElementChild.value;

infoObj.age = li.lastElementChild.value;

 

-switch case는 부등호 쓸 수 없음, 따라서 switch (num / 10) { case 10: case 9: 과 같이 써야함... 차라리 if, else가 좋을 듯;

 

-obj 방만 만들고, 그안에 넣는건 뒤에 해도 됨;

 

let obj = { };

obj.score = score;

obj.sum = sum; 

 

-backend에서는 자료 받아서 자유자재로 연결하고 다룰 수 있는 능력이 중요함;

 

-DOM 방식으로 값 추가하기

 

<ul id="inputArea"></ul>

 

let ul = document.getElementById("inputArea");

 

for (let i = 0; i < 6; i++) {

let li = document.createElement("li");

li.append((i+1)+"번째 과목 점수 : ");

let input = document.createElement("input");

input.setAttribute("type", "number");

input.setAttribute("min", 40);

input.setAttribute("max", 100);

li.append(input);

ul.append(li);

}

 

    인원수 입력 : <input type="number" name="" id="nop">

    <button type="button" id="btn">확인</button>

    <div id="inputArea"></div>    

    <div id="printArea" style="display: none;">

        <table>

            <thead>

                <tr>

                    <th>이름</th>

                    <th>국어</th>

                    <th>영어</th>

                    <th>수학</th>

                    <th>총점</th>

                </tr>

            </thead>

            <tbody></tbody>

        </table>

    </div>

    <ul id="criteria" style="display: none;">

        <li>번째 사람 이름을 입력하세요 : <input type="text"></li>

        <li>번째 국어 점수를 입력하세요 : <input type="number"></li>

        <li>번째 영어 점수를 입력하세요 : <input type="number"></li>

        <li>번째 수학 점수를 입력하세요 : <input type="number"></li>

    </ul>

 

        document.getElementById("btn").addEventListener("click", function () {

            let nop = parseInt(document.getElementById("nop").value);  //입력한 숫자만큼 클론 생성; parseInt = Number 모두 감쌌을때 숫자형태로 바꿔줌;

            for (let i = 0; i < nop; i++) {

                let clone_ul = document.getElementById("criteria").cloneNode(true);  //클론 생성

                clone_ul.style.display = "block";   //보이기 처리

                document.getElementById("inputArea").appendChild(clone_ul);  //클론을 inputArea라는 div의 child로 삽입

            }

 

            let inputArea = document.getElementById("inputArea");

 

            let idx = 0;

            for (let ul of inputArea.children) {  //ul들이 children

                for (let li of ul.children) { //li들이 children

                    li.insertBefore(document.createTextNode(idx + 1), li.firstChild);  //각 리스트 앞에 번호 붙이는 것, li가 가지고있는 child는 input밖에없으므로, 첫째자식인 input 앞에 삽입;

                    // li.innerHTML = (idx+1) + li.innerHTML;

                }

                idx++;

            }

            let printBtn = document.createElement("button");

            printBtn.setAttribute("id","printBtn");   //결과 출력 버튼 삽입

            printBtn.innerText ="결과 출력하기";

            document.body.insertBefore(printBtn,document.getElementById("printArea"));  //결과 출력 버튼 위치 지정

 

 

        document.addEventListener("click",function(e){  // -대상객체 동적 위임 방법; JS는 스크립트 방식이기에 읽었을 당시 없는것을 실행하려하면 에러 뜸;

                                                                       

            if(e.target.id=="printBtn"){ //모든 event 중, e == printBtn인거만 가져와서 이벤트 발생시킴.

                // console.log("버튼 클릭 테스트!!!!");

                let scores = [];

                let inputArea = document.getElementById("inputArea");

 

                for (let ul of inputArea.children) {  //ul들이 children~

                    let score = [];

                    for (let li of ul.children) {   //li들이 children~

                        let val = li.firstElementChild.value;

                        // console.log(isNaN(val));

                        score.push(isNaN(val) ? val : parseInt(val));  // String과 number 함께 배열에서 들어올때 구분해서 받기; 넘버가 아니면 val 자체로 받고, 넘버면 parseInt 처리해서 숫자로 받기

                    }

 

                    let sum = 0;

                    for (let i = 1; i < score.length; i++) {

                        sum += score[i];

                    }

                    score.push(sum);

                    // console.log(score.toString());

                    scores.push(score);

                }

                // printTable(scores);

                printTable2(scores);

            }         

        });

 

-for each 방식

        function printTable2(param_arr){

            let tbodyTag = document.querySelector("#printArea tbody");

            let tbody = '';

 

            param_arr.forEach(score => {

                tbody += '<tr>';

                    score.forEach(val => {

                        tbody += '<td>' + val +'</td>';    //forEach arrow 방식; 

                    });

                tbody += '</tr>';

            });

            tbodyTag.innerHTML = tbody;

            document.getElementById("printArea").style.display ="block"; //다시 보이기

        }

 

-for of 방식

        function printTable(param_arr){

            let tbodyTag = document.querySelector("#printArea tbody");  //tbody select

            let tbody = '';

            for (let score of param_arr) {

                tbody += '<tr>'

                for (let val of score) {

                    tbody += '<td>' + val +'</td>';  //forOf방식

                }

                tbody += '</tr>';

            }

            tbodyTag.innerHTML = tbody;

            document.getElementById("printArea").style.display ="block";

        }

 

 

-2차원배열; 그냥 5층 각 10개 방이면, 5개짜리 배열안에 각 10개 방씩 넣기;

 

arr[0~4];

arr[0] = [0~9];

 

        let floorArr = [];

        let roomArr = [];

 

        for (let i = 0; i < 10; i++) {

          roomArr[i] = 0;      

        }

        for (let i = 0; i < 5; i++) {

          floorArr[i] = roomArr;  //2차원 배열 5*10

        }

 

-this = class로 생성된 instance 말하는 것;

 

 

-isErr = true, false; // boolean 이용해서 에러상황때 alert 띄울 수 있음;

 

hotel.roomsArray[floorInfo-1][roomInfo-1] = param_sel == 2 ?

            (function(){

                if(curr_status == 1) {

                    alert("현재 사용중인 객실입니다!");

                    isErr = true;

                }

                return 1;

            })()

            :

            (function(){

                if(curr_status == 0) {

                    alert("현재 빈 객실입니다!");

                    isErr = true;

                }

                return 0;

            })();

 

 

-switch case 상 arguments 받아서 처리

 

switch (parseInt(arguments[0])) {

                case 1:

                    li += "객실 현황 출력";

                    break;

                case 2: case 3:

                    li += arguments[1] + "호 " + (arguments[0]==2?"입실":"퇴실")

                    + (arguments[2]?" - 오류": " - 완료") ;

                    break;

                default:

                    li += "호텔이용을 종료합니다";

                    document.getElementById("status").style.display ="none";

                    document.getElementById("menu").style.display ="none";

                    break;

            }

 

-CSS용 selector/selectorAll 사용 가능

 

document.querySelector("#status tbody").innerHTML = this.table;

let x = document.querySelectorAll("p.intro"); // array 형태로 불러올 수 있음;

 

*JSON

-key는 반드시 string, "name" 형태여야 함. javascript는 key는 그냥 name임;

-function, undefined, date 등 제외 다 넣을 수 있음;

-application/json

 

{ "employee": ["kim","park","lee"] }

 

*AJAX

-asynchronous javascript and xml / 비동기

-reloading없이 페이지 업데이트;

-Jquery와 함께 주로 사용함;

-php 맛보기

 

<?php

$data = new DateTime;

$data -> setTimeZone(new DateTimeZone('asia/seoul'));

echo $data -> format('H:i:s');

?>

 

*DOM

-HTMLCollection / getelementsbyID

-Nodelist / querySelectors

-childNodes는 text까지 가져옴 / children은 HTML collection만 받음;

-->childnode고 어쩌고 jquery에서는 고민 안해도됨... JS core로 웹페이지 설계시는 중요함;

 

childNodes는 text까지 다 잡음, children은 element만 잡음.

 

-태그 사이 글자는 value가 아닌 innerText로 가져와야 함;

 

  <h1 id="title">가져올 글자</h1>

    let a = document.getElementById("title").innerText;

 

 

*jquery

-JS를 쉽게 사용할 수 있게 해주는 lib;

-CDN contents delivery network

-사용전 소스 꼭 불러오기!!!

  <!-- <script src="res/jquery-3.5.1.min.js"></script> -->

  

 

 

    /* html 소스를 모두 읽으면 내부 실행 시키는 코드 */

    $(document).ready(function() {

 

    });

 

    /* html 소스를 모두 읽으면 내부 실행 시키는 코드 - 축약형 */

    $(function() {

            /* jquery방식 */

            //ID를 이용한 접근

            let title2 = $("#title").text();

            // console.log(title2)

 

            //CSS selector를 이용한 접근, 아주 중요함.

            $("ul li:first-child").text(title2);

            $("ul li:nth-child(2)").text("6");

            $("ul > li:nth-child(3)").text("7");

            });

     });

 

let isShow = false;

 

      $("#btn").on("click", function () {

        if(!isShow) {

          $("ul").show();

          isShow = true;

        } else {

          $("ul").hide(); //해당 코드 숨기기

          isShow = false;

        }

      });

 

-addeventlistener -> jquery 방식으로 변경;

 

       document.getElementById("input").addEventListener("click", function () {

        

       });

 

      $("#btn").on("click", function () {

        $("ul").show(); //해당 코드 노출시키기

        $("#title").hide();

      });

 

-$(selector).method();   // selector가 매우 중요! css와 거의 흡사함;

 

$(this).hide(); // 

$("p").hide(); // tag

$((".test").hide()  // class

$("#test).hide() // id 

$("ul li:first-child") // first와 같음;

$("[href]");

$("a[target='_blank']") // ("input[type="text"]")

 

-Event On 함수; key와 function value로 구성됨;

 

$("p").on( {

    mouseenter: function () {

            $(this).css("background-color", "lightgray");},

    mouseleave: function() {

            $(this).css("background-color", "lightblue");}

    }

);

 

-스크립트언어는 읽었는지 안읽었는지가 매우 중요함; 따라서 하기와 같이하면 button이 늦게 만들어짐에 관계없이 alert창이 불러짐;

 

    $(function () {

      $(document).on("click", "button", make_text);  //document에서, button을 읽어서 실행 / "button" 자리에 "#btn2"와 같이 id값이나 ".btn2" 와 같이 클래스도 됨 

 

      function make_text() {

        alert("동적 버튼 실행");

      }

      $("ul").html("<li><button type='button'>동적버튼</button></li>");  //html로 특정 코드 삽입!

    });

 

*jquery DOM getter & setter 연습

 

text() //innerText

html() // innerHtml

val() // input안의 value

 

<h1>jQuery - <span class="span_h1">Get Content and Attributes</span></h1>

  <p id="result"></p>

  <p id="result2"></p>

  <p id="result3"></p>

 

  <form action="">

    <input type="number" name="num">

    <input type="number" placeholder="숫자만 입력하세요">

    <input type="number" id="num" value="1245" readonly>

    <input type="number" value="1245" disabled>

    <input type="number" min="0" max="9999" step="2">

    <input type="submit" value="전송">

  </form>

  <p id="result11"></p>

  <p id="result12"></p>

 

  <script>

    //getter & setter

    $("#result").text($("h1").html()); //html은 tag들 다 포함(내부태그 + text), text는 text만;;;  text안에 들어가니깐 <span>까지 노출됨;

    $("#result2").html($("h1").text());

    $("#result3").html($("h1").html()); //html안에 들어가니깐 <span>과 같은 태그가 사라진채로 노출

 

    $("#result11").text($("#num").val());

    $("#result12").html($("input[name='num']").val());

    $("input[name='num']").val($("#num").val());

    console.log($("input[name='num']").val().length == 0); // length == 0이면 값이 없는것,

  </script>

 

-text나 html에 function을 쓰고 param을 주면, 그대로 param을 돌려받을 수 있음; 기본적으로 익명함수 형태로 사용함;

 

<p id="test1">This is a <b>bold</b> paragraph.</p>

 

  $("#btn1").click(function(){

    $("#test1").text(function(i, origText){   //index와 origText는 필수!!

      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

    });

  });

 

source: w3schools.com

 

 getter:   let h1_id = $("#desc").attr("class");  //desc라는 id값을 가진 것 중, class attr의 값;

 setter:   $("ul").html("<li>" + h1_id + "</li>");

 setter:    $("ul").attr("class", "h1s");

 

            //객체 방식으로 넣기;

setter:    $("hr").attr( {

           "class":"h1s", "style":"color=red; width:300px"});

 

-add new HTML content

 

append()는 뒤로 넣는것; prepend()는 앞으로 넣는 것;

after() 선택된 것 뒤; before() 선택된 것 앞;

 

    <h1>

        Element를 추가하는 방법 append(), prepend(), before(), after()

    </h1>

    <ul>

        <li>id="result1"</li>

        <li>id="result2"</li>

        <li>id="result3"</li>

        <li>id="result4"</li>

 

    </ul>

    <script>

        $("ul").append("<li>id=result5</li>");

        $("ul").prepend("<li>id=result6</li>");

        $("ul").before("<hr>");

        $("ul").after("<hr>");

 

        $("ul").append("<li>id=result7</li>", "<li>id=result8</li>");

        $("ul").prepend("<li>id=result9</li>", "<li>id=result10</li>");

 

        // before는 선택된 엘리먼트를 기준으로 붙이기 때문에

        // 가장 나중에 붙인 엘리먼트가 가장 가까운 곳에 존재함

        // 멀티파라미터를 쓸 경우 파라미터 순서(모습) 그대로 붙음

        $("ul").before("<hr id='id1'>");

        $("ul").before("<hr id='id2'>");

        $("ul").before("<hr id='id3'>");

        $("ul").before("<hr id='id1-1'>","<hr id='id2-1'>", "<hr id='id3-1'>");

               

       // after도 선택된 엘리먼트를 기준으로 붙이기 때문에

        // 가장 나중에 붙인 엘리먼트가 가장 가까운 곳에 존재함

        $("ul").after("<hr id='id4'>");

        $("ul").after("<hr id='id5'>");

        $("ul").after("<hr id='id6'>");

        

        // 주의! 단, after는 멀티 파라미터를 이용할 경우

        // 순차적으로 파라미터의 순서(모습) 그대로 붙음

        $("ul").after("<hr id='id7'>","<hr id='id8'>", "<hr id='id9'>");

        </script>

 

 

-remove, empty HTML

 

remove는 아예 휴지통채로 버리는 것;

empty는 휴지통을 비우는것;

 

$("li").empty();

$("li").remove();

 

    $("h1").find("button").eq(0).on("click", function() {   // eq 인덱스 번호 찾는 함수;

      $("ul").remove();

    });

 

  <h1>

    <button type="button">  //eq(0); 

      Element를 삭제하는 방법 remove()

    </button>

  </h1>

  <ul>

    <li>id="result1"</li>

    <li>id="result2"</li>

    <li>id="result3"</li>

    <li>id="result4"</li>

  </ul>

  <h1>

    <button type="button"> //eq(1);

      Element의 하위 요소를 삭제하는 방법 empty()

    </button>

  </h1>

 

-하지만 뭐니뭐니해도 id가 젤 나음..

 

    $("#remove").on("click", function() {

      $("ul").remove();

    });

 

    $("#empty").on("click", function() {

      $("li").empty();

    });

 

-css적용 시, class를 활용많이함; '.class'

 

addClass()

removeClass()

toggleClass() // 있으면 지우고, 없으면 넣고

 

.fs3 {

    font-size: 3em;

}

.fcr {

    color: red;

}

 

//css 미리 설정 해놓은 후, addClass로 효과만 연결

$("ul").addClass("fs3"); // 효과 적용

$("ul").addClass("fs3 fcr"); // 효과 둘다 적용

 

$("ul").removeClass("fs3"); // 효과 삭제

 

$("button").on("click".function() {

    $("ul").toggleClass("fcr");

});

 

-css()도 get, set의 속성을 모두 가지고 있음;

 

$("h1").css("color","red"); // set

$("h1").css("color"); // get

 

$("h3").css( { "color","red", "font-size":"5em" } ); //객체형 set,

 

        $("button").on("click",function(){

            $(this).css("border", "3px solid red").css("width","200px").css("height","100px"); //chain형;  this로 버튼 자신;

        });

 

 

*jquery dimensions

 

get

-$("#title").width(); height();

-대부분 element가 border까지 포함하기에 하단 2개만 주로 쓰게됨;

-outerWidth();  // border까지 포함

-$("#gogo").outerWidth(true) -> element의 총넓이 구할 수 있음; margin까지 포함

 

set

-$("#div").width(500).height(500); //param을 던져서 세팅

-set은 거의 css에서함,, get만 주로 사용!!

 

 

*travel 사이트 jquery로 변경

        <h1>

            Travel

        </h1>

        <div class="navi">

            <a class="links" id="home" onclick="click_city('home');">Home</a>

            <a class="links" id="seoul" onclick="click_city('seoul');">Seoul</a>

            <a class="links" id="tokyo" onclick="click_city('tokyo');">Tokyo</a>

            <a class="links" id="paris" onclick="click_city('paris');">Paris</a>

        </div>

        <img src="res/home.PNG" alt="" id="photo">

    </div>

    <script>

        function click_city(cityName){ //이미지명, id명을 param으로 접수;

            $("#photo").attr("src","res/"+cityName +".png");

           

            let anchors = $(".links");

            for (let i = 0; i < anchors.length; i++) {                

                $(anchors[i]).css("font-weight","normal").css("font-size","1em"); //모든링크 노멀처리

            }

            $("#"+cityName).css("font-weight","bold").css("font-size","2em"); //클릭된 cityName은 리세팅     

        }

    </script>

 

*Jquery Traversing / trace

 

ancestors

-parent = this느낌;

-parents = 모든 조상들 다 찾음; li > ul > div 까지~

-parentsUntil =  div찍을 시 div 직전까지, div 미포함;

 

descendants

-children() = 바로 아래 모든 자식들

-find() = 특정값 찾는것, 아주 많이 씀; $("div").find("span");  / 자식 객체 중에 찾는 것;

 

siblings

-next()

-nextAll() = 전체다

-nextUntil() = 직전까지

-prev()

-prevAll()  = selected 기준 전체 뒤

-prevUntil() 

-nextAll("h1") = 뒤에있는 모든 h1을 가져옴;

 

etc

-first() = first-child 느낌;

-last() 

-eq(1) = nth-child(1) 느낌; 활용도가 높음  / eq($("div").length-1) = last();

-$("p").filter(".intro"); = 지목한 대상 중에 찾는것,, 즉 p 태그 중 intro class

-$("p").not(".intro");  = 지목한 대상 중 intro class가 아닌 것; filter의 정반대 개념;

 

*javascript core -> jquery(chatting)

    $("#btn").on("click", function () {

      let p = "<div class=\"receiver\">" + $("#chat").val() + "</div>";

      $("#chat").val("");

      $("#body").html($("#body").html() + p);  //setter는 그안에 값을 넣는 것

      $("#chat").focus();

    });

 

    // document.getElementById("btn").addEventListener("click", function () {

    //   let p = "<div class=\"receiver\">" + document.getElementById("chat").value + "</div>";

    //   document.getElementById("chat").value = "";

    //   document.getElementById("body").innerHTML = document.getElementById("body").innerHTML + p;

    //   document.getElementById("chat").focus();

    // });

 

-false 처리는 괄호 없이!!

 

$("#name").attr("disabled", false);

 

*Jquery Effect

-$("p").hide(); / show();

-hide(4000); // 4초 동안 사라짐;

-show(2000); // 2초동안 나타남;

-hide(1000, function() { } ); // 콜백형태로도 사용가능; 어떠한 것들을 순서대로 실행해보고자할때;

-fadeIn() / fadeOut() / fadeToggle();   (3000), ("slow") (3000, function() {}  등 옵션;

-slideDown() / slideUp() / slideToggle(); // 메뉴창 같은 곳 사용할 수 있을듯~?

-stop(); // 애니메이션 자체를 멈추게 하는 기능; toggle의 경우 resume시 다음으로 넘어감;

-animate... // 다양한 기능이 있음....

 

-페이지 아래에서 위로 올리는 기능

 

$("html").animate( {scrollTop: 0}, 2000); //2초동안 올라가는 이펙트 나옴;

 

-Chaining

 

.slideUp(2000)

.slideDown(2000);

 

-keyboard event

 

keydown() // 누른상태

keyup() // 누른 후 뗀 상태

 

$(document).on("keydown", function(e) {

    $("#result").append("<li>" + e.key + "</li>");

    console.log(e.key === " "); // 스페이스바

});

 

$(document).on("keydown", function(e){

 

if(e.key == 'q'){

 

alert("q 키를 누르셨습니다");

}

});

 

*eq활용한 이벤트 구현; 홀짝

 

    //span안에 랜덤값 넣기

    for (let i = 0; i < $("#box").children().length; i++) {

      $("#box").children().eq(i).text((Math.floor(Math.random() * 99)) + 1);

    };

 

    //홀수,짝수 이벤트 구현

    $("#evenBtn").on("click", function () {

      for (let i = 0; i < $("#box").children().length; i++) {

        //짝수처리

        if (Number($("#box").children().eq(i).text()) % 2 == 0) {

          $("#box").children().eq(i).css("background-color", "rgb(161, 161, 226)");

        }

        //홀수처리

        else {

          $("#box").children().eq(i).css("background-color", "white");

        }

      }

    });

 

-button이벤트 id값으로 불러와서 처리하기

 

//홀짝 이벤트 구현

    $("button").on("click", function() {   //모든 버튼 불러온뒤

      if($(this).attr("id") == "evenBtn") { // evenBtn에 이벤트 부여

        for (let i = 0; i < $("#box").children().length; i++) {

        //짝수처리

        if (Number($("#box").children().eq(i).text()) % 2 == 0) {

          $("#box").children().eq(i).css("background-color", "rgb(161, 161, 226)");

        } else {

          $("#box").children().eq(i).css("background-color", "white");

        }

      }

      }

      else if($(this).attr("id") == "oddBtn") { // oddBtn에 이벤트 부여

        for (let i = 0; i < $("#box").children().length; i++) {

        if (Number($("#box").children().eq(i).text()) % 2 == 1) {

          $("#box").children().eq(i).css("background-color", "rgb(161, 161, 226)");

        } else {

          $("#box").children().eq(i).css("background-color", "white");

        }

      }

      }

    });

 

-param 받는법

 

-each로 각각 값 가져오는 법

 

$("#evenBtn").on("click", function() {

    $(".card").each(function() {  //특정 class내에 있는 모든 children을 하나씩 가져옴!

        $(this).text() % 2 == 0? 

            $(this).css("background-color","black") : $(this).css("background-color","white");

    })

});

 

*버전 관련

-2.3.1  / 순서대로 core, meta, update....

-core가 바뀌면 기본적인 프레임이 변함, meta는 그보다는 낮은 단계, update는 간단한 버그 수정

-front는 변경이 쉬우나, back은 구조 변경에 시간이 많이들어서 업뎃이 자주 이루어지지는 않음.. 있는거 운영임!

 

*js.map 파일은 무엇?

-간단하게 말하자면 디버깅에 필요한 파일임. js파일을 배포할때 압축이나 난독화해서 배포하는 경우가 있는데 이 경우 파일사이즈가 줄어서 성능향상에는 도움이 될지는 몰라도 코드가 읽기 어려워져서 디버깅에 애로사항이 발생하는데 map파일을 사용할경우 압축된 js파일일지라도 원본 소스처럼 디버깅 가능하게 됩니다.