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() {..

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..

자바스크립트(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 주소를 리턴하는 코드를 작성하도록 하겠습니다.

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 내의 객체를 말합니다.) 일반 ..

자바스크립트(Javascript)의 ceil() 함수 자바스크립트(Javascript)의 ceil() 함수는 소수점을 올림하여 정수를 반환하는 함수입니다. 자바스크립트(Javascript)의 ceil() 함수를 사용할때에는 Math의 객체를 사용하며, Math 객체에게는 다양한 함수들이 존재하며 그중에 ceil()를 사용하게 되면 소수점을 올려 정수를 반환하게 됩니다. //Math.ceil() 함수 사용방법 Math.ceil( [변환 소수점값] ) console.log(Math.ceil(8.99)); ======================================= 9 자바스크립트(Javascript)의 floor() 함수 자바스크립트(Javascript)의 floor() 함수는 소수점을 버림하여 ..

자바스크립트(Javascript)의 location.port 자바스크립트의 location.port는 페이지의 URL의 포트 번호를 반환하는 함수입니다. 만약 포트번호가 80인 경우에는 아무것도 반환하지 않습니다. //포트번호 확인 location.port; //자바스크립트 포트번호 조회 var port = location.port; console.log(port);

자바스크립트(Javascript)의 eval() 함수 자바스크립트(Javascript)의 eval() 함수는 문자열을 코드로 인식하여 반환하는 함수입니다. 자바스크립트(Javascript)의 다수의 명령문을 나타내는 문자열 도는 표현식에 포함되어 있는 객체의 변수가 속성을 매개변수로 사용됩니다. 만약 주어진 매개변수가 없다면 undefined를 반환하게 됩니다. 자바스크립트(Javascript)의 eval() 함수는 인자로 받은 코드를 caller의 권한으로 수행되는 위험한 함수로써 해커에게 노출되기 쉬운 위험한 함수이기에 사용하지 않는 것이 좋습니다. //eval() 함수 사용방법 eval ( [매개변수] ) console.log(eval("99 + 11")); console.log(eval('9+1'..

자바스크립트(Javascript)의 isFinite() 함수 자바스크립트(Javascript)의 isFinite() 함수는 주어지는 값이 문자인지 아닌지 판단하는 함수입니다. 주어지는 값이 문자열 타입이든 숫자 타입이든지 숫자가 입력되면 True 를 반환하게 되며, 주어진 값이 문자열이라면 False를 반환하게 됩니다. 자바스크립트(Javascript)의 isNaN() 함수와 함께 데이터의 유효성 점검할때 많이 사용되는 함수입니다. //isFinite() 함수 사용방법 iisFinite ( [Value] ) console.log(isFinite("111")); console.log(isFinite("111.11")); console.log(isFinite(111)); console.log(isFinite..