[Javascript] event preventDefault() stopPropagation() 차이점 preventDefault(),stopPropagation()는 Event 인터페이스에서 제공하는 메서드 입니다. DOM 내에 위치한 요소들은 Event 인터페이스를 통해 이벤트 관련 다양한 속성과 메서드를 제공받아 이벤트를 수신 받고 받은 이벤트를 처리하는 코드를 실행할 수 있습니다. Event 인터페이스 관련 자세한 정보는 아래 문서를 참고하시면 도움이 되실 것 같네요. https://developer.mozilla.org/ko/docs/Web/API/Event | event.preventDefault() 기본(default)를 막다(prevent)라는 단어에서 유추 할수 있듯이 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다. 예를 들어 앵커태그 태그는 각각 페이지 이동이.. Program/Javascript, JQuery 2021. 2. 13. 16:13
[Javascript] 느낌표 두개(!!) 사용법 (논리 연산자) 자바스크립트의 논리연산자 중 NOT연산자인 (느낌표)는 입력값을 boolean으로 변환하여 값이 true이면 false로 , false이면 true로 값을 리턴합니다. 그럼 !!(느낌표 두개)는 어떤 경우에 사용하는 걸까요? 조건문에서 사용할 경우 부정의 부정이면 긍정이라 조건식에는 변함이 없을 것 같은데 뭔가 다르게 적용 되는 걸까요? 먼저 간단한 예시로 조건문에서 어떻게 적용되는지 알아보겠습니다. ("str") //true("str") !("str") //false !!("str") //true ("")//false("") !("")//true !!("")//false true//true !true//false !!true//true false//false !false//true !!false//fa.. Program/Javascript, JQuery 2020. 11. 5. 09:32
[JQuery] 반복문 each break / continue 사용법 | 반복문 - each() jQuery 사용 중 셀렉터(selector)를 통해 여러 요소를 선택한 뒤 for문 처럼 요소들을 반복하며 특정 작업을 하기 each() 메서드를 사용합니다.// jQeury each() method $.each(object, function(index, item){ }); $(selector).each(function(index, item){ });이때 특정 로직이 만족하면 반복문을 멈추거나(break) 다음요소로 넘어가야할 경우(continue)가 있는데 이때 Jquery each 메서드 내에서는 return "boolean" 값으로 대체하여 사용합니다. break > return false continue > return true | 예제 아래는 실무에서 자주 사용될법한.. Program/Javascript, JQuery 2020. 2. 27. 17:32
[Javascript] submit 인코딩 캐릭터셋 변경, 한글 깨짐 처리( euc-kr / utf-8 ) 개요 페이지 인코딩이 UTF-8인 페이지에서 form submit을 할때 EUC-KR 인 페이지로 요청할 경우 서로 다른 인코딩 때문에 데이터가 깨지는 경우가 발생합니다. (특히 한글 깨짐) 이를 방지하기 위해 submit 할때 인코딩을 변경하여 전송하는 방법을 포스팅 합니다. accept-charset 속성 추가 submit 하려는 form 엘리먼트에 accept-charset 속성을 추가하여 전송할 인코딩셋을 지정해 줍니다. ( euc-kr / utf-8 ) 바로 태그에 속성을 지정하지 않고 Javascript나 Jquery를 통해서 동적으로 속성을 추가해 주셔도 됩니다.//Javascript document.testForm.acceptCharset = "euc-kr" //Jquery $("form[.. Program/Javascript, JQuery 2019. 11. 13. 17:37
[Javascript/Jquery] form, input 동적 생성 및 submit 개요 Form 태그 역시 document내 엘리먼트이기 때문에 필요할때 문서내에 없더라도 동적으로 Form 태그를 생성하여 action method 등 필요한 속성들을 설정하고 전송할 input 엘리먼트를 form안에 생성하여 submit하는 것이 가능합니다. 순수 Javascript와 Jquery 각각 동적으로 form 을 생성하여 submit 하는 방법은 간략하게 소개합니다! Javascript /* Javascript */ // create element (form) var newForm = document.createElement('form'); // set attribute (form) newForm.name = 'newForm'; newForm.method = 'post'; newForm.ac.. Program/Javascript, JQuery 2019. 11. 11. 17:34
[Javascript] 뒤로가기 막기, 뒤로가기 이벤트 제어 ( pushState / popstate ) 개요 브라우저에서 뒤로가기를 누를 경우 IE는 "웹페이지가 만료되었습니다." 크롬은 "양식 다시 제출 확인" 이라는 오류 메시지를 볼 수 있습니다. 해당 증상은 웹페이지 요청시 POST로 전송된 데이터가 있는 페이지를 다시 요청했을경우 나타나며 주로 뒤로가기를 했을때 많이 볼수 있는데 사용자 입장에서는 시스템 오류로 느껴질 수 있습니다. 위 증상의 해결을 위해서 가장 간단한 해결방법은 GET방식으로 데이터를 주고 받는 것입니다. 아니면 AJAX, HASH, history API 등을 활용하여 설계 단계부터 SPA(single page application) 형태로 서비스를 구성하면 위 이슈없이 깔끔한 서비스 구성이 가능 하겠죠! 하지만 레거시 시스템 유지보수중 리스크 없이 위 내용을 쉽게 적용할 수 있는.. Program/Javascript, JQuery 2019. 11. 8. 23:52
[HTML/Javascript] 페이지내 원하는 위치로 이동 하기 ( scrollTo , scrollBy 차이 ) 개요 HTML 페이지 내에서 원하는 위치로 이동시키는 방법 중 특정 name의 엘리먼트를 찾아 이동하는 A 태그를 이용하는 방법과 위치를 기반으로 스크롤을 이동시키는 window 객체내 scrollTo, scrollBy 메서드를 이용하는 방법을 소개합니다. 태그 이용 태그는 Anchor 의 약자로 닻을 의미하듯이 타겟으로 이동시키는 링크로서의 기능과 링크의 타깃이 되는 기능을 모두 수행합니다. 먼저 이동을 시킬 곳(target)에 태그를 위치시키고 해당 엘리먼트에 "name" 속성을 지정해 줍니다. 그리고 또 다른 앵커태그를 생성하여 해당 "href" 속성을 추가하여 위 name을 지정해 주면 클릭시 위 엘리먼트 위치로 이동하게됩니다. .. .. .. window.scrollTo / window.scro.. Program/Javascript, JQuery 2019. 11. 5. 17:00
[Javascript] JSON 데이터 추가, 삭제 (add / delete) 개요 JSON(제이슨, JavaScript Object Notation)이란 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트로 비동기 브라우저/서버 통신 을 위해, 넓게는 XML을 대체하는 주요 데이터 포맷입니다. frontend / backend 모두 자주 볼 수 있는 데이터 포맷으로 json 으로 표기된 오브젝트의 데이터를 javascript에서 추가, 삭제 하는 방법을 간략하게 포스팅 합니다. JSON 데이터 추가 / 삭제 //json object var fruit= {name: "apple", count : 2, price: 3000}; cons.. Program/Javascript, JQuery 2019. 8. 12. 21:07
JQueryUI dialog close 오류 ( cannot call methods on dialog prior to initialization; attempted to call method 'close' ) JQuery UI dialog method Error JQEURY UI(JQuery User Interface)의 dialog 위젯에서 지원하는 메서드중 하나인 close를 이용하여 layer를 닫을때 아래와 같은 에러가 발생할 경우가 있습니다.Uncaught Error: : cannot call methods on dialog prior to initialization; attempted to call method 'close' 케이스마다 원인이 다를 수 있지만 저같은 경우 사이트 구축 초기에는 잘 뜨고 소스 수정도 없었는데 어느 순간부터 에러가 발생하고 있어서 원인 찾는데 시간이 조금 걸렸었네요. 원인은 본문내에 dialog API를 이용하여 modal을 document로 append하는데 레이어내 .. Program/Javascript, JQuery 2019. 3. 21. 19:56
아이폰 브라우저 뒤로가기시 스크립트 리로드 오류 처리( onpageshow / BFCache ) 사파리,파이어폭스등 브라우저 뒤로가기시 스크립트 리로드 오류 처리( onpageshow / BFCache ) 모바일 웹(Hybrid App 등) 개발을 하다보면 OS / 브라우저의 특성에 따른 생각지 못한 이슈가 많이 발생 합니다. 저는 주로 확장프로그램이 다양한 크롬 브라우저를 이용해 디버깅 하고 있는데 이번에 담당하고 있는 시스템에서 아이폰 (IOS) 사파리 브라우저에서 뒤로가기(history.back / 디바이스 뒤로가기 동일)했을때 페이지가 리로드 되지 않고 스크립트가 정상적으로 실행되지 않는 증상이 발생하여 관련 자료를 정리합니다. 원인 - BFCache "뒤로가기" 액션이 있었을 때 각 브라우저 엔진(크롬,익스,사파리,파이어폭스 등)마다 동작하는 로직이 조금씩 다르게 구성되어 있습니다. 사파리.. Program/Javascript, JQuery 2018. 5. 29. 18:26
[HTML5] WebStorage (LocalStorage / SessionStorage) | Web Storage란? - Client에 소량의 데이터를 저장해 두기 위한 Key-Value Storage - 쿠키와 동일하게 도메인마다 Storage가 생성되며 동일 도메인 내에서만 조회 및 생성이 가능하다. - 서로 다른 도메인의 데이터 조작은 막지만 클라이언트는 저장된 값을 임의로 수정할 수 있다 - 저장공간은 모바일 2.5MB, 데스크탑 5~10MB (브라우저, 디바이스마다 상이함) - 데이터의 지속성에 따라 Local Storage와 Session Storage로 나뉨 | Cookie / Web Storage 차이점 - 쿠키는 4KB밖에 저장할 수 없고 도메인별로 최대 저장개수가 20개의 제약사항이 있다. - 모든 쿠키정보를 HTTP요청시 서버에 전송하기 때문에 서버에서 사용할 일이 없다면.. Program/Javascript, JQuery 2017. 7. 27. 02:03
[Javascript] 내장함수 - 타이머함수 (setTimeOut / setInterval / timer / 은행 세션 만료 구현) * 개요 javascript를 이용하여 특정 시간에 따른 기능 제어가 필요할 경우 아래 내장함수를 사용하여 구현한다. * 메서드 정의 setTimeout(function, millisecond) - 일정 시간 후 함수 실행 setInterval(function, millisecond) - 일정 주기로 함수 반복 실행 clearTimeout(id) - 식별자의 setTimeout 동작 중단 clearInterval(id) - 식별자의 setInterval 동작 중단 참고사항 > 시간 - 밀리세컨드 (1000 = 1초) > setTimeout / setInterval은 백그라운드에서 실행되므로 다른 메소드의 동작에 영향을 주지 않음 > 반환값으로 식별자를 반환하는데 이를 이용하여 setTimeout / se.. Program/Javascript, JQuery 2017. 1. 4. 15:15
[Javascript] 외부 페이지로의 데이터 전달 (Callback) ※ Javascript 외부 페이지로의 데이터 전달 (Callback) 외부페이지에서 자사 페이지를 호출하여 데이터 처리 후 다시 데이터 전달이 필요할 경우 아래와 같은 방법으로 전송이 가능합니다. EX) 팝업으로 주소검색 서비스 제공 1. 스크립트 삽입 방식 외부페이지에 사전에 정의한 스크립트를 심어 parent, opener로 접근하여 데이터 전달합니다. ex) 외부페이지에서 팝업으로 호출했을 경우 데이터 처리후 부모창 스크립트 호출해 줌 window.opener.setData(para1,para2); 주의점 - 외부페이지에 setData 스크립트가 정의되어 있어야함 - 동일 도메인일때는 그냥 사용가능 - 서브 도메인일때는 document.doamin.으로 맞춰줘야함. (양쪽페이지 모두) 2. Cal.. Program/Javascript, JQuery 2017. 1. 3. 10:51
[JQuery] checkbox 제어 JQuery checkbox 제어 Selecter $("input:checkbox[name='A']") // 리스트 $("input:checkbox[id='id1']") $('input:checkbox[name="B"]').is (":checked") // true > 하나라도 체크되어있으면 true $('input:checkbox[name="B"]').length; // 6 $('input:checkbox[name="B"]:checked').length; // 3 >체크되어있는 갯수 // 선택된 checkbox 엘리먼트 순환 처리 $('input:checkbox[name="B"]').each(function(){ if(!this.checked){ alert("체크되지 않았습니다."); } }); // .. Program/Javascript, JQuery 2016. 12. 14. 17:22
