Life goes slowly...

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

jQuery의 .clone() 함수 jQuery의 .clone() 함수는 선택한 요소를 복사하는 함수입니다. .clone() 함수는 일치하는 요소 집합의 전체 복사본을 만드는 함수입니다. 또한 요소뿐만 아니라 요소가 가지고 있는 이벤트를 함께 복사하는 함수입니다. // .clone() 함수 사용법 .clone( [withDataAndEvents] ) //withDataAndEvents - 이벤트 핸들러와 데이터 요소와 함께 복사해야하는지 여부를 나타내는 부울값 ========================= Main is title ------------------------------------------------------------------- Main is title Main is title

jQuery의 .not() 함수 jQuery의 .not() 함수는 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 함수입니다. .not() 함수를 사용 시에는 기준을 지정하여 기준과 일치하지 않는 오쇼를 선택 항목에서 반환되고 일치하는 요소는 제거하도록 합니다. // .not() 함수 사용법 .not( [선택자] ) //a 요소중에 test 클래스 값으로 가지지 않는 것을 선택하는 예제 $("a").not("a.test").css("color","red") .not() 함수의 반대 함수로는 .filter() 함수가 있습니다.

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

자바스크립트의 제이쿼리(jQuery)에서 애니메이션 효과를 사용할 수 있는 함수로 .animate() 함수가 있습니다. .animate() 함수는 여러 CSS 스타일 속성을 이용하여 새로운 애니메이션 효과를 만들 수 있습니다. jquery(제이쿼리)의 .animate() 함수 jQuery(제이쿼리)의 .animate() 함수는 수치 CSS 속성을 제어하여 움직이는 애니메이션 효과를 만들어 냅니다. 반드시 CSS 속성 MAP 데이터를 필요로 하며, 이 데이터 MAP은 .css() 함수에 인자로 사용하는 데이터 맵과 유사합니다. //.animate() 함수 사용법 $(선택자).animate(css스타일 ,[지속시간] ,[시간당속도함수] [콜백 함수]); CSS 스타일 : 필수이며, 이펙트 효과를 구성할 CS..

자바스크립트의 제이쿼리(jQuery)에서 이펙트(effect) 효과를 표현하는 함수들이 있습니다. 그중에 해당 요소에 페이드(fade) 효과를 표현하는 함수인 .fadeIn(), .fadeOut() 함수가 있습니다. jquery(제이쿼리)의 .fadeIn() 함수 jQuery(제이쿼리)의 .fadeIn() 함수는 선택한 요소를 서서히 나타나게 표현하는 함수입니다. 나타나게 하는 시간을 설정할 수 있는데 시간 설정을 문자나 숫자로 정할 수 있습니다. 그 이외의 옵션에 나타나게 하는 모양도 설정이 가능합니다. //.fadeIn() 함수 사용법 .fadeIn( [duration], [ easing ]); //duration - 시간설정 //easing - 모양설정 //.fadeIn() 나타나는 시간설정 .fa..

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

자바스크립트의 제이쿼리(jQuery)의 .detach() 함수는 선택한 요소를 문서에서 제거하는 함수입니다. .remove() 함수와 비슷한 성격을 가지고 있는 함수이기는 하지만 .detach() 함수는 제거한 요소를 저장하여 다시 사용할 수 있는 함수입니다. .detach() 함수는 노드를 document에서 제거하는 동시에 캐싱하여 추후에 다시 사용이 가능합니다. jquery(제이쿼리)의 .detach() 함수 jQuery(제이쿼리)의. tetach() 함수를 요소를 제거하면서 변수에 저장을 할 수 있습니다. //.detach() 함수 사용법 .detach( [selector 요소] ); Cut //id가 test인 버튼을 삭제하고 변수 del에 저장함

웹 페이지 개발 중에 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..

자바스크립트의 제이쿼리(jQuery)를 사용하여 선택한 요소의 css 속성 값을 가져오거나 style 속성을 추가하는 함수로 .css() 함수가 있습니다. jquery(제이쿼리)의. css() 함수 jQuery(제이쿼리)의 .css() 함수를 통하여 속성 값을 가져올 수 있습니다. //.css함수를 사용하여 속성값 가져오기 .css( propertyName ) $("#test").css("color"); jQuery(제이쿼리)의 .css() 함수를 통하여 속성 값을 추가하기도 가능합니다. //.css함수를 사용하여 속성값 추가하기 .css( propertyName, val ) $("#test").css("color", "blue"); .css() 함수와 비슷한 성격을 가지고 있는 함수로써는 HTML 요소..

HTML의 input text의 Value값의 maxlength 속성을 이용하여 입력받을 데이터의 최대 크기 및 최소 크기를 설정이 가능합니다. 하지만 maxlength 속성은 한글과 영문, 숫자, 특수문자 등을 고려하지 않고 있습니다. 단순하게 문자열의 Length으로 입력을 제한하고 있는 경우가 많습니다. 따라서 이때에는 입력받는 데이터의 length 보다는 Byte를 체크하고 있습니다. 특히 input Text가 아닌 textarea 경우에는 maxlength를 체크하기 어렵습니다. 인코딩에 따라서 한글, 영문, 숫자, 특수문자 등 모두가 Byte가 다르게 설정됩니다. 보통 한글은 2~3 Btye이기 때문입니다. 웹사이트를 서핑하는 도중에 Byte 길이를 체크하는 여러 방법을 찾았습니다. //FOR..