Chrome 개발자 도구에서 팝업, 모달 및 애니메이션 디버깅

종종 팝업 위로 마우스를 가져간 다음 개발 도구를 연 다음 요소 탭에서 생성된 코드를 보려고 시도하여 팝업, 메뉴 또는 시간 지정 애니메이션을 디버깅하려고 합니다. 하지만 커서를 움직이면 코드가 사라집니다! 마우스를 올리면 두 요소가 나타나지만 마우스를 움직이면 사라집니다! Chrome 개발자 도구 열기(Cmd + Option + I) 콘솔 탭 열기 다음을 붙여넣고 히트 엔터: setTimeout(function(){debugger;}, 5000) 팝업으로 이동하고 5초 동안 기다리면 디버거가 페이지를 일시 중지하고 코드를 볼 수 있습니다! 디버깅을 즐기십시오! 출처 https://medium.com/@mitchwd/debugging-popups-modals-animations-e833856d80a9

• format_list_bulleted Javascript/jQuery
• · 2023. 6. 27.
• textsms

jQuery $.each() 주의사항

이번 글은 jQuery의 함수인 each의 주의사항을 다뤄본다. each 함수는 기본적으로 for문이라고 봐도 무방하다. jQuery에서 제공하는 일반적인 iterator function 이다. callback 개념이 부족하다면 발생할 수 있는 경우와, each 함수의 return에 대해 알아볼 것이다. 반복문을 쓰는 이유 중 하나의 예로, 배열에 있는 값 중 원하는 값을 찾기 위해 루프를 돌린다고 가정하자. 코드는 아래와 같다. someArray = new Array(); someArray[0] = 't5'; someArray[1] = 'z12'; someArray[2] = 'b88'; someArray[3] = 's55'; someArray[4] = 'e51'; someArray[5] = 'o322'..

• format_list_bulleted Javascript/jQuery
• · 2021. 9. 15.
• textsms

[jQuery] JSON APIs와 Ajax를 이용해 데이터 가져오기

JSON APIs와 Ajax를 이용해 데이터 로딩 및 완료 된 데이터를 처리해 HTML 화면에 출력하는 예제 들어가며 만약 날씨 정보와 같이 수시로 변하는 데이터를 HTML을 통해 화면에 출력을 해주고 싶다면 어떻게 해야할까요? 이처럼 고정값이 아닌, 항상 변하는 값을 HTML을 통해 출력해야 하기 때문에 로컬 파일이나, 클라우드에 있는 파일에서 값을 가져와 HTML페이지에 출력을 해줘야 합니다. 그렇다면 데이터를 어떻게 어디서 어떤 형태로 가져오는지 알아보겠습니다. APIs(Application Programming Interfaces)는 애플리케이션 사이에 소통하는 인터페이스를 말합니다. 우리가 흔히 말하는 Google APIs도 같은 애플리케이션 간에 소통하는 인터페이스를 제공합니다. 우리가 특정 ..

• format_list_bulleted Javascript/jQuery
• · 2021. 4. 30.
• textsms

JQuery 기초 (JQuery 객체, 조작)

참조문서 : http://api.jquery.com/ 제이쿼리는 DOM을 조작하거나 Ajax 요청을 할 때 널리 쓰이는 라이브러리다. 제이쿼리로 할 수 있는 건 모두 DOM API로도 할 수 있다. 하지만 제이쿼리를 쓰면 다음과 같은 장점이 있다. 브라우저 호환성을 걱정안해도 된다. Ajax 관련 API가 무척 단순하다. 내장된 DOM API를 더 유용하고 단순하게 바꾼 메소드를 제공한다. 주로 달러기호($)로 표현하며, 제이쿼리를 불러올 때는 1 cs 이런식으로 CDN을 이용하면 된다. 1. DOM 기다리기 제이쿼리에서는 브라우저가 페이지를 완전히 읽고 DOM을 구축한 다음에만 호출되는 콜백함수가 있다. $(document).ready(function () {} // 단축표기 $(function() {..

• format_list_bulleted Javascript/jQuery
• · 2021. 3. 23.
• textsms

[JQuery][TIP] 특정 영역을 제외한 부분을 클릭했을 때

특정 영역을 제외한 부분을 클릭했을 때 이벤트를 발생시켜야 할 때가 있다. 그때는 다음과 같이 하면 된다. $('html').click(function(e) { if(!$(e.target).hasClass("area")) { alert('영역 밖입니다.'); } }); 즉 특정 영역에 class명을 부여하고 클릭한 곳에 그 클래스명이 없으면 이벤트를 발생시키는 로직입니다.

• format_list_bulleted Javascript/jQuery
• · 2021. 1. 6.
• textsms

[JQuery][TIP]선택한 element 의 attribute로 배열 만들기

One Two Three Four Five 를 다음과 같이 배열로 만드는 방법은 여러가지 겠지만 간단히 map 함수를 이용할 수 있다. [1, 2, 3, 4, 5] var arr = $.map($("li"), function(item) { return $(item).attr("value"); });

• format_list_bulleted Javascript/jQuery
• · 2021. 1. 6.
• textsms

[JQuery][TIP] element 안에 자식 element 변화 없이 텍스트만 변경하기

First Child Last 다음과 같을 때 First 를 Second로 바꾸고 싶을 때 어떻게 하면 될까?! $(".parent").contents() 를 하면 다음과 같이 나온다. ["First", Child, "Last"] $(".parent").contents()[0].textContent = "Second" 하면 First 값이 Second로 바뀐다.

• format_list_bulleted Javascript/jQuery
• · 2021. 1. 6.
• textsms

[JQuery][TIP] 현재 엘레멘트가 보이는지 체크 (check visible)

브라우저에 element가 보이는지 체크하려면 다음과 같이 하면 된다. $(element).is(":visible") 출처: https://chobokkiri.tistory.com/43?category=656562 [초보끼리]

• format_list_bulleted Javascript/jQuery
• · 2021. 1. 6.
• textsms

[JQuery][TIP] Form submit 에서 동적으로 POST parameter 넘기기

submit 하고 나서 동적으로 데이터를 삽입하여 변수를 서버로 전송할 때 동적으로 Param을 넘겨줄 때 다음과 같이 사용하면 된다. 선택자 "#form1" 은 태그의 ID 값을 임의로 넣은 것이다. var input = $("") .attr("type", "hidden") .attr("name", "mydata").val("bla"); $('#form1').append($(input)); 출처: https://chobokkiri.tistory.com/20?category=656562 [초보끼리]

• format_list_bulleted Javascript/jQuery
• · 2021. 1. 6.
• textsms

[jQuery] jQuery Quick API

jQuery Quick API 1. 제어 (1) 선택.add() : 요소를 추가 선택한다. $("p").add("div") // p 요소와 div 요소를 선택한다. .not() : 선택된 확장집합에서 인자에 해당하는 요소를 제거한다.$("p").not(".green") // p 요소의 확장집합에서 class가 green인 요소를 제거한다. .children() : 요소의 고유한 자식으로 구성된 확장 집합을 반환한다. .contents() : 선택한 요소의 자식 요소를 가져온다.(text node 포함)$('.container').contents().filter(function(){}); // class container 요소의 자식요소(text 포함)를 가져와 filter 한다. iframe text를 ..

• format_list_bulleted Javascript/jQuery
• · 2020. 7. 8.
• textsms