Life goes slowly...

Uncaught TypeError: ~.replace is not a function 오류 원인 웹 개발 시 Chrome의 console 창에서 Uncaught TypeError: ~.replace is not a function 에러 메시지가 나타나는 경우가 발생합니다. 이러한 에러 메시지가 발생하는 원인으로는 replace를 하려고 하는 데이터가 parseInt, 즉 숫자일 때에 발생하는 오류입니다. 이러할 때에는 문자열로 교체하고 replace 하게 되면 정상적으로 오류를 해결할 수 있습니다. 또한 인코딩이 지정되지 않으면 원시 버퍼가 반환되기 때문에 발생하는 오류이기도 합니다. replace() 함수는 원시 버퍼가 아닌 인코딩 처리한 문자열로 처리되어야 하는 함수입니다. replace를 하려고 하..

자바스크립트(Javascript)의 addEventListener() 함수 자바스크립트(Javascript)의 addEventListener() 함수는 지정한 이벤트가 대상에 전달될 때마다 호출해야 할 함수를 설정할 때에 사용됩니다. 대부분의 대상은 Element나 Document 이겠지만 이벤트를 지원하는 모든 객체를 대상으로 지정이 가능합니다. addEventListener() 함수는 이벤트 지정의 주어진 유형에 따라서함수나 객체를 이벤트 처리기 목록에 추가하여 이벤트가 이루어지게 됩니다. addEventListener() 함수는 이벤트를 등록하는데 가장 권장하는 방식이며 여러 개의 이벤트 핸들러를 등록하여 사용이 가능합니다. //문자열 addEventListener() 함수 사용방법 target.a..

자바스크립트(Javascript)의 endsWith() 함수 자바스크립트(Javascript)의 endsWith() 함수는 확인하고자 하는 문자열에서 특정 문자열로 끝나는지 확인하는 함수입니다. 확인하고자 하는 특정 문자열이 있는 경우에는 True을 반환하게 되며, 그렇지 않은 경우에는 False을 반환하게 되는 함수입니다. 검색해야 할 문자열은 필수 요소이며, 문자열은 대소문자를 구분합니다. 문자열의 길이도 옵션에 포함되며, 문자열 길이를 넣지 않는 경우에는 전체 문자열을 대상으로 검색하게 됩니다. //문자열 endsWith() 함수 사용방법 문자열.endsWith( [검색하고자 하는문자], length ) //length - 문자열중 어디까지 검색할지 정하며, 만약 값을 설정하지 않으면 전체를 대상으..

자바스크립트(Javascript)의 startsWith() 함수 자바스크립트(Javascript)의 startsWith() 함수는 확인하고자 하는 문자열에서 특정 문자열로 시작하는지 확인하는 함수입니다. 확인하고자 하는 특정 문자열이 있는 경우에는 True을 반환하게 되며, 그렇지 않은 경우에는 False을 반환하게 되는 함수입니다. 검색해야 할 문자열은 필수 요소이며, 문자열은 대소문자를 구분합니다. 문자열의 길이도 옵션에 포함되며, 문자열 길이를 넣지 않는 경우에는 전체 문자열을 대상으로 검색하게 됩니다. //문자열 startsWith() 함수 사용방법 문자열.startsWith( [검색하고자 하는문자], length ) //length - 문자열중 어디까지 검색할지 정하며, 만약 값을 설정하지 않으..

jQuery의 .hover() 함수 jQuery의 .hover() 함수는 제이쿼리의 마우스 이벤트 함수중 하나입니다. .hover() 함수로 선택한 요소에 마우스 포인트를 올렸을 때와 떠났을 때 이벤트 효과를 넣을 수 있습니다. 마우스의 다양한 이벤트 관련 메서드 중 하나로 특정 엘리먼트 위에 올리게 되면 발생하는 이벤트 중 하나입니다. hover() 함수는 CSS의 :hover 선택자를 사용하는 것과 동일한 방식으로 동작을 하게 되지만 css에 사용할 때에는 새로운 스타일을 적용하는 것이 목적이지만 제이쿼리(jQuery)는 이벤트를 적용하기 위한 조작임을 잊지 말아야 합니다. 자바스크립트(javascript)의 mouserover 등의 이벤트와 동일하다고 생각하면 됩니다. // .hover() 함수 사..

자바스크립트(Javascript)의 charCodeAt() 함수 자바스크립트(Javascript)의 charCodeAt() 함수는 문자의 index에 해당하는 유니코드(Unicode) 값을 반환하는 함수입니다. 자바스크립트(Javascript)의 문자열 내의 문자는 왼쪽에서 오른쪽으로 인덱스가 매겨집니다. 유니코드(Unicode)는 시스템의 문자를 표현하기 위한 표준언어입니다. 자바스크립트(Javascript)의 charAt() 함수와 비슷한 형태이기는 하지만 charAt() 함수는 index에 해당하는 문자를 반환하며 charCodeAt() 함수는 index에 해당하는 유니코드(Unicode) 값을 반환하는 차이가 있습니다. //charCodeAt() 함수 사용방법 문자열.charCodeAt( [ind..

자바스크립트(Javascript)의 charAt() 함수 자바스크립트(Javascript)의 charAt() 함수는 문자열에서 지정된 위치에 존재하는 문자를 찾아서 반환하는 함수입니다. 자바스크립트(Javascript)의 문자열 내의 문자는 왼쪽에서 오른쪽으로 인덱스가 매겨집니다. 인덱스의 순번은 0부터 시작되고 마지막 인덱스 순번은 -1으로 매겨지게 됩니다. 인덱스가 문자열의 길이를 벗어나게 되면 빈 문자열을 반환합니다. charAt() 함수는 인덱스(index)로 주어진 값에 해당하는 문자를 반환합니다. //charAt() 함수 사용방법 문자열.charAt( [index] ) let test1 = "Hello World"; console.log(test1.charAt(0)); console.log(t..

Uncaught Error : Bootstrap's Javascript requires jQuery 오류 원인 웹 개발 시 Bootstrap을 많이 사용하고 있습니다. 하지만 Bootstrap의 기능은 잘 되고 있지만 Chrome의 console 창에서 Bootstrap의 에러 메시지가 보일 경우가 있습니다. 이는 자바스크립트(Javascript) 나 제이쿼리(jQuery)의 문제로 보일 수도 있습니다. 이는 Bootstrap 사용시 제이쿼리(jQuery)가 필수적으로 요구되기 때문입니다. 제이쿼리(jQuery)가 정상적으로 로드되지 않아서 발생하는 에러 메시지입니다. 이러한 문제의 해결 방법은 Html 페이지에서 Bootstrap을 로드하기 전에 제이쿼리(jQuery)의 라이브러리를 먼저 임포트 하면 ..

Cannot read property 'push' of undefined 오류 원인 자바스크립트(Javascript)의 콘솔(Console) 창에 Cannot read property 'push' of undefined 에러가 나타나는 경우가 있습니다. 이는 자바스크립트(Javascript)에서 배열에 요소를 추가하려고 하는 함수에서 오류가 발생하는 현상입니다. 배열과 함수 내부를 Data를 추가하도록(Data를 push 하도록) 정의하였지만 정상적으로 추가되지 않아서 발생하는 오류입니다. Cannot read property 'push' of undefined의 에러가 발생할 때에는 제일 먼저 추가하려는(push 하려는) 배열의 형태를 확인하고, 또한 배열 선언을 확인해봐야될것입니다.

jQuery의 .fadeToggle() 함수 jQuery의 .fadeToggle() 함수는 요소의 투명도를 조절하는 함수로써 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이도록 하는 함수입니다. fadeToggle() 함수를 사용하여 투명도(opacity)를 조절하여 0으로 낮췄을때에 display 속성을 none 처리하여 페이지의 레이아웃 영향을 미치지 않도록 합니다. 옵션에 있는 duration을 조정하여 값에 따라서 속도를 조절하도록 가능합니다.(단위값은 밀리세컨드입니다.) // fadeToggle() 함수 사용법 .fadeToggle( [duration], [easing], [callback] ) duration - 시간 값 easing - 특수한 효과 callback - 콜백 함수 dura..

자바스크립트(Javascript)의 search() 함수 자바스크립트(Javascript)의 search() 함수는 문자열에서 조건 문자열을 찾아서 몇 번째 위치에 확인을 해주는 함수입니다. 매칭 되는 첫 번째로 매치되는 인덱스를 반환하게 되지만, 만약 찾지 못한다면 -1을 반환하게 됩니다. 쉽게 말하자면 검색되는 문자열의 위치값을 반환하게 됩니다. //search() 함수 사용방법 문자열.search( [찾기위한 문자열] ) let test1 = "Hello World"; let test2 = "안녕하세요 자바스크립트"; console.log(test1.search("wor")); console.log(test2.search("자바스크립트")); console.log(test1.search("Hello..

자바스크립트(Javascript)로 스크린 가로길이를 체크할 때에는 두 가지의 함수를 사용하여 체크를 할 수 있습니다 첫 번째로는 스크린 전체 가로길이를 체크하는 방법이며, 두 번째로는 사용이 가능한 가로길이를 체크하는 방법입니다. //모니터 전체 가로 길이의 확인 screen.width //모니터 사용가능 가로 길이의 확인 screen.availWidth 자바스크립트(Javascript)로 스크린 높이를 체크하는 방법도 넓이를 체크하는 방법과 같이 두가지의 함수를 사용하여 체크를 할 수 있습니다. 전체 모니터의 높이와 사용 가능한 모니터 높이를 제크 하는 방법입니다. //모니터 전체 높이 확인 screen.height //모니터 사용가능 높이 확인 screen.availHeight

Http로 URL값을 전달할 때 오직 영문자와 숫자만으로 전달 시에 인코딩이 필요할 때가 있습니다. 다양한 특수문자나 문자가 URL에 포함되어 전달될 때에 제대로 인식을 하지 않는 경우가 발생하기 때문입니다. 자바스크립트(Javascript)의 encodeURIComponent() 함수는 영문자의 대,소문자, 숫자 그리고 *-_. 을 제외하고 모든 문자를 유니코드 형식으로 변환하여 주게 됩니다. 인터넷 URL에 사용되는 특수문자 :;/=?& 특수문자까지 모두 변환을 하여 인터넷 주소를 하나의 변수에 넣을 수 있습니다. https://www.w3schools.com/tags/ref_urlencode.asp HTML URL Encoding Reference HTML URL Encoding Reference ..

웹 페이지 개발 중에 input Text에 숫자만 입력하는 부분이 많이 있습니다. 그중에 자바스크립트(Javascript) 방법 중 가장 많이 사용되는 방법을 알아보도록 하겠습니다. 자바스크립트(Javascript)의 정규식 사용 자바스크립트(Javascript)의 oninput 이벤트 속성에 넣어서 정규식을 입력하는 방법입니다. 또 하나는 자바스크립트(Javascript)의 onKeup 이벤트 속성에 정규식을 입력하는 방법입니다. 자바스크립트(Javascript)의 함수 사용 자바스크립트(Javascript)의 onkeypress 이벤트를 사용하여 키보드 이벤트 keycode를 제어함으로써 숫자만 입력을 가능하도록 하는 방법입니다. function checkNumber(){ if(event.keyCod..

자바스크립트의 제이쿼리(jQuery)를 사용하여 테이블 형식의 Row를 Drag and Drop 하는 라이브러리입니다. Drag and Drop를 통하여 테이블 게시글 순서를 변경하는데 많이 사용됩니다. jquery.tablednd.js 라이브러리 페이지 https://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/ Table Drag and Drop JQuery plugin I’ve been using JQuery for a while now and really agree with its tag line that it’s the “The Write Less, Do More, JavaScript Library”. We’ve also got this code..