Life goes slowly...

preventDefault()는 제이쿼리(jquery)에서 이벤트 위임을 통하여 다수의 요소(elemnet)에 공통으로 적용되는 이벤트 핸들러를 공통된 상위 요소에 단 한 번의 연결만으로 동작할 수 있도록 하는 함수입니다. 쉽게 말하자면 preventDefault() 함수는 취소 할수 있는 이벤트들을 취소하도록 하는 함수이지만 모든 이벤트 전파를 막지는 못하고 이벤트를 취소만 가능합니다.. 발생하는 이벤트들의 Default 액션이 발생하지 않는다는 의미입니다. 하지만 모든 이벤트가 취소가능한 이벤트는 아님을 명심해야 합니다. 이벤트의 취소 가능 여부는 event.cancelable를 사용하여 확인이 가능합니다. //preventDefault() 함수 사용법 event.preventDefault() 제이쿼..

자바스크립트(Javascript)의 부모노드 접근방법 parentNode은 자바스크립트(Javascript)에서 부모 element나 노드에 접근하는 방법으로, 현재 element의 부모 노드가 포함된 노드 List를 반환합니다. 이때 반환되는 노드 List에는 element의 노드 뿐만 아니라 주석 노드와 같은 비요소 노드를 포함합니다. //parentNode 사용방법 element.parentNode 1. 철수 2. 동건 3. 토마스 4. 원빈 5. 인성 console.log(document.getElementById("test").parentNode) [object HTMLUListElement] { accessKey: "", addEventListener: function addEventListe..

자바스크립트(Javascript)의 자식노드 접근방법 childNodes은 자바스크립트(Javascript)에서 자식 element나 노드에 접근하는 방법으로, 현재 element의 자식 노드가 포함된 노드 List를 반환합니다. 이때 반환되는 노드 List에는 element의 노드 뿐만 아니라 주석 노드와 같은 비요소 노드를 포함합니다. //childNodes 사용방법 element.childNodes 1. 철수 2. 동건 3. 토마스 4. 원빈 5. 인성 console.log(document.querySelector("ul").childNodes) [object NodeList] { 0: [object Text] { addEventListener: function addEventListener() {..

제이쿼리(jquery)에서 가장 많이 사용하고 자주 사용하고 있는 엘리먼트의 형제 엘리먼트를 찾아주는 함수입니다. siblings() 함수는 자신을 제외한 형제 엘리먼트를 찾는 함수입니다. 형제 엘리먼트의 class를 추가하거나 삭제할 때 많이 사용되는 함수입니다. //siblings() 함수 사용법 elements.siblings([filter]) 제이쿼리(jQuery)의 siblings() 함수 제이쿼리(jQuery)의 siblings() 함수는 지정한 선택자의 형제 요소를 모두 선택합니다. 1. 철수 2. 동건 3. 토마스 4. 원빈 5. 인성 ===================================== //id 가 test 요소를 제외하고 나머지 요소가져오기 $("li#test").sibl..

UTC(Coordinated Universal Time) 협정 세계시란 국제적인 표준시간의 기준으로 사용되는 시간을 말합니다. 1972년 1월 1일부터 시행되어 국제 표준시, 국제 사회가 사용하는 과학적인 시간의 표준을 말합니다. 기존에 사용되었던 평균 태양시 기준의 그리니치 표준시(GMT)를 대체하여 사용하기 시작된 표준시간입니다. UTC에서 0시, 기준점에 달하는 도시는 영국의 런던으로써 런던을 기준으로 +,-로 시간을 계산하며 대한민국은 런던을 기준으로 +9 시입니다. 자바스크립트(Javascript)로 UTC -> Local 변경 UTC형식의시간은 마지막에 Z가 붙는 것으로 알 수가 있으며 UTC 시간대가 아닐 경우에는 ±hh:mm, ±hhmm, ±hh을 붙이게 됩니다. 따라서 UTC 날짜를 현지..

자바스크립트(Javascript)의 객체 정렬하기 자바스크립트(Javascript)의 함수 중에는 객체(Object) 배열을 정렬할 수 있는 sort() 함수가 있습니다. sort() 함수는 배열의 요소를 적절한 위치에 지정한 뒤에 그 배열을 반환하는 함수입니다. sort() 함수는 내림차순으로 정렬을 하며 오름차순으로 정렬을 하기 위해서는 reverse() 함수를 사용하면 됩니다. //sort 함수로 정렬하기 let monthsData = ['March', 'Jan', 'Feb', 'Dec']; monthsData.sort(); console.log(monthsData); let countData = [1, 5, 8, 3, 13, 1000, 33]; countData.sort(); console.log..

자바스크립트(Javascript)의 엑셀 다운로드 하기 자바스크립트(Javascript)에서 HTML로 된 table 형태로 된 데이터를 엑셀로 다운로드를 받는 방법입니다. 프론트엔트 개발에 많이 사용될거라 생각되어 작성하여 봅니다. Java 형태로 된 개발은 많이 사용되었지만 API로 호출하여 가져온 데이터를 HTML 형태로 만들어져 있는 Table 데이터를 자바스크립트(Javascript)로 엑셀 다운로드 하는 방법입니다. Column 1 Column 2 Column 3 데이터1_1 데이터1_2 데이터2_1 데이터2_2 데이터3_1 데이터3_2 엑셀다운로드 버튼의 onclick 이벤트를 생성하여 제이쿼리(jQuery)로 클릭 이벤트 함수를 만들면됩니다. //엑셀 다운로드 함수 $('#buttonExc..

Cookie(쿠키)란 클라이언트 로컬에 저장되는 키와 값의 데이터입니다. 사용자 인증이 유효한 시간을 명시 가능하며, 유효시간이 정해지면 브라우저가 종료되더라도 인증은 유지됩니다. //jquery 라이브러리에 있는 cookie 플러그인을 사용하면 됩니다. 제이쿼리(jQuery) Cookie 생성하기 제이쿼리(jQuery)로 Cookie를 생성할때 옵션을 정할수 있습니다. // Cookie 생성 - 브라우저를 닫을때 cookie 삭제 $.cookie('test', '1111'); // 7일 뒤에 만료 Cookie 생성 $.cookie('test', '1111', { expires: 7 }); // 전체 사이트에 대해 7일 뒤에 만료 Cookie 생성 $.cookie('test', '1111', { expi..

Radio Button의 제이쿼리(jQuery) 이벤트를 통하여 제어가 가능합니다. 1 2 3 4 제이쿼리(jQuery)의 radio button 체크된 value 값 확인 제이쿼리(jQuery)를 활용하여 라디오 버튼의 체크된 value 값을 확인할 수 있습니다. // radio button 체크된 value 값 출력 console.log($('input[name="radioType"]:checked').val()); 제이쿼리(jQuery)의 value 값으로 radio button 체크하기 제이쿼리(jQuery)를 활용하여 value 값을 통하여 라디오 버튼의 체크를할 수 있습니다. // value 값으로 radio button 체크하기 // value 값 2 radio button 체크하기 $('i..

자바스크립트(Javascript)에서 버튼(Button) 영역에 disabled 속성을 추가 및 삭제하여 버튼을 클릭하거나 클릭을 하지 못하도록 활용을 해보도록 하겠습니다. 자바스크립트의 disabled 속성 활용하기 Jquery로 disabled 속성 활용하기 자바스크립트(Javascript)뿐만 아니라 제이쿼리(JQuery)에서도 활용이 가능합니다. 제이쿼리(JQuery)의 attr 함수를 사용하여 disabled 속성을 활용할 수 있습니다.

element 내부에 가지고 있는 innerText와 innerHTML 차이점은 무엇일까요? innerText은 element 내부에 있는 text 값들을 말하며 innerHTML는 element 내부에있는HTML이나 XML 모두를 말합니다. 안녕하세요 Hello World!! 자바스크립트(Javascript) 값 가져오기 innerText는 설정한 엘리먼트의 보이는 텍스트 값을 가져옵니다. ===================== 안녕하세요 Hello World!! innerHTML는 엘리먼트의 HTML 구조 모두를 가져옵니다. ===================== 안녕하세요 Hello World!! 자바스크립트(Javascript) 값 설정하기

자바스크립트(Javascript) E-Mail 유효성 검사 자바스크립트(Javascript)에서 입력값을 정규식 표현을 통하여 유효성 검사를 할 수 있습니다. 특히 누구나 하나씩은 가지고 있는 이메일의 유효성 검사는 자주 사용하는 방식입니다. 정규표현식을 처리하는 함수를 하나 생성한뒤에 입력하는 E-Mail 주소를 리턴하는 코드를 작성하도록 하겠습니다.

selectbox의 제이쿼리(jQuery) 이벤트를 통하여 제어가 가능합니다. 나라선택 Korea United States Japan China Canada Hong Kong 제이쿼리(jQuery)의 selectbox change 이벤트 제이쿼리(jQuery)를 활용하여 selectbox change 이벤트를 사용할수있습니다. // selectbox의 change 이벤트 $("#country").change(function() { console.log(this.value); }); // selectbox의 on 이벤트 $(document).on('change',"#country", function() { console.log($(this).val()); });

List Check 번호 이름 Check 1 철수 Check 2 영수 Check 3 토마스 Check 4 순이 Check 5 창모 jQuery의 checkbox 여부 확인 jQuery를 활용하여 checkbox 리스트의 전체 갯수와 checked 된 갯수를 확인 가능합니다. // checkbox의 전체 갯수 $("input:checkbox[name=chkList]").length // checkbox의 선택된 갯수 $("input:checkbox[name=chkList]:checked").length // checkbox의 전체 체크 $("input[name=chkList]:checkbox").prop("checked", true); jQuery의 each문을 통하여 checked된 value 값 가져오..

자바스크립트(Javascript)의 this 란? 자바스크립트(Javascript)의 this란 일반적으로 메소드를 호출한 객체가 저장되어 있는 속성을 말합니다. 하지만 메소드를 호출할때 뿐만 아니라 일반 함수를 호출할때에도 만들어지기도 하며 이벤트가 호출될때에도 this의 속성이 만들어지기도 합니다. 자바스크립트(Javascript)의 this 종류 1. 일반 함수에서의 this (Window 내의 객체를 말합니다.) 2. 이벤트 리스너에서의 thins (이벤트를 발생한 객체를 말합니다.) 3. 메소드의 this (메소드를 호출한 객체를 말합니다.) 4. 일반 중첩함수의 this (Window 내의 객체를 말합니다.) 5. 메소드 내부의 중첩함수의 this (Window 내의 객체를 말합니다.) 일반 ..