Life goes slowly...

자바스크립트의 제이쿼리(jQuery)를 사용하여 일정 시간 뒤에 콜백 함수를 실행하는 방법에는 .setTimeout() 함수를 사용하게 됩니다. .setTimeout() 함수 이외에도 일정 시간이 지난 후 애니메이션 큐를 지연하여 실행하기 위한 함수로 .delay() 함수가 있습니다. jquery(제이쿼리)의 .delay() 함수 jQuery(제이쿼리)의 .delay() 함수는 일정 시간이 경과한 후에 다음 코드를 강제적으로 실행하도록 지연시간을 생성하는 함수입니다. 단 큐를 가진 애니메이션에만 적용되는 함수입니다. 실행 중인 함수를 정해진 시간만큼 중지하기도 하는 함수입니다. // .delay()함수 사용방법 .delay( [중지할 시간] , [ queueName ] ) //p 태그의 엘리먼트가 5초후..

자바스크립트(Javascript)의 attr()과 prop() 차이점 자바스크립트(Javascript)에서 선택자를 통하여 선택한 엘리먼트를 append 하여 새롭게 생성하는 엘리먼트에 속성을 지정할 때 많이 사용하는 attr() 함수와 prop() 함수가 있습니다. attr()과 prop() 함수의 차이점은 무엇이 있을까 알아보도록 하겠습니다. jQuery(제이쿼리) 1.6 버전 이전에는 attr() 함수와 prop() 함수의 차이는 없었지만 1.6 버전 이후에는 구분되어 있습니다. attr() 함수는 엘리먼트가 가지고 있는 속성값이나 정보를 조회할 때 사용하는 함수이며, prop() 함수는 엘리먼트가 가지고 있는 상태를 제어할 때 사용하는 함수입니다. 폼의 속성 값을 확인하거나 변경할 때에는 prop..

자바스크립트의 제이쿼리(jQuery)를 사용하여 현재 선택한 요소와 함께 이전에 선택한 요소도 함께 선택하는 함수입니다. .addBack() 메소드는 현재 선택된 요소의 이전 요소를 한번 더 찾아주는 필터링 역할의 함수입니다. jquery(제이쿼리)의 .addback() 함수 jQuery(제이쿼리)의 .addback() 함수는 현재 선택한 요소와 이전 요소를 함께 동시에 효과를 나타내는 함수입니다. //함수 사용방법 $([선택자]).addBack(); $([선택자]).addBack([선택자]); //ul의 하위 태그중에서 li를 선택하고 처음에 선택했던 ul 태그도 함께 선택하기 $("ul").find("li").addBack();

자바스크립트(Javascript)의 escape() 함수 자바스크립트(Javascript)의 escape() 함수는 알파벳과 숫자 및 특수문자(*,@,-,_,+,.,/)를 제외한 문자를 모두 16진수로 인코딩하는 함수입니다. escape() 함수는 쉼표와 세미콜론 같은 문자가 쿠키 문자열과의 충돌을 피하기 위하여 사용됩니다. 숫자를 escape() 함수를 사용하여 인코딩하게 되면 문자 타입으로 변환하여 반환됩니다. 아스키 문자가 아니라면 escape() 함수를 통하여 모두 유니코드 형식으로 인코딩 되어 반환됩니다. 그 인코딩 되어 변환된 문자는 16진수 형식으로 표시되며 1바이트 문자는 %XX 형태로 변환되며, 2바이트 문자는 %uXXXX 형태로 변환됩니다. 이러한 처리를 이스케이핑(escaping)이라..

자바스크립트(Javascript)의 console() 함수 자바스크립트(Javascript)의 console 함수는 대부분 디버그 확인용으로 많이 사용하게 되는 함수입니다. 대표적으로 console.log가 있습니다. console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있도록 제공하는 함수로써 동작의 방식은 브라우저마다 다르고, 표준으로 여겨지는 기능도 여러 가지가 있습니다. // console() 함수 종류 console.log(); console.info(); console.warn(); console.error(); console.dir(); //코드 호출 count를 확인할때 사용하는 console 함수 console.count(); //코드 수행시간을 확인할때 사용하는 console 함수 ..

자바스크립트(Javascript)의 fromCharCode() 함수 자바스크립트(Javascript)의 fromCharCode() 함수는 지정된 유니 코드 값을 받아서 문자열로 반환하는 함수입니다. 문자열, 지정된 별도의 숫자 유니코드 인코딩으로 문자열의 각 문자의 정적인 방법입니다. UTF-16 유니코드의 시퀀스로부터 값을 받아야 하며 문자열을 생성하여 반환하는 함수입니다. // fromCharCode() 함수 사용방법 String.fromCharCode(n1, n2, ..., nX) let test1 = String.fromCharCode(9733); let test2 = String.fromCharCode(104,101,108,108,111); let test3 = String.fromCharCod..

자바스크립트(Javascript)의 repeat() 함수 자바스크립트(Javascript)의 repeat() 함수는 주어진 문자열을 옵션의 count 만큼 반복하여 붙인 다음에 새로운 문자열로 반환하는 함수입니다. 문자열을 반복한 값을 반환하는 함수인 repeat() 함수로써 반복문을 사용하여 반환도 가능합니다. 반복의 횟수인 count는 양의 정수여야 하며 무한대보다 작고, 최대 문자열 크기를 넘어서는 안됩니다. // repeat() 함수 사용방법 string.repeat( [반복 count]) let test = "123"; testRepeat = test.repeat(3); console.log(testRepeat); let strTest = ['A', 'B', 'C', 'D', 'E']; for(..

자바스크립트(Javascript)의 includes() 함수 자바스크립트(Javascript)의 includes() 함수는 배열 값(Object)에 특정 값이나 특정 문자가 포함되어 있는지 확인하기 위한 함수입니다. 배열 안에 특정 값이 포함되어 있는지 확인하기 위하여 기본적으로 반복문을 사용하여 확인하기도 합니다. 자바스크립트(Javascript)의 indexOf() 함수를 사용하여 반환도 가능하지만 true/false를 반환하는 includes() 함수를 사용하기도 합니다. // includes() 함수 사용방법 object.includes( [검색 문자], [검색 할 위치]) let test = [1,2,3,4,5,1,2,3] console.log(test.includes(3)); console.l..

자바스크립트(Javascript)의 History 인터페이스 자바스크립트(Javascript)의 History 인터페이스는 브라우저의 세션 기록을 불러온 탭 도는 프레임의 방문 기록을 조작할 수 있는 방법을 제공하는 인터페이스입니다. History 인터페이스는 어떠한 속성에도 상속되지 않는 특징을 가지고 있습니다. history의 객체는 사용자 히스토리에서의 앞 뒤 이동이 가능하도록 유용한 함수와 속성들을 제공합니다. 하지만 사용자의 개인정보를 보호하기 위하여 이 객체에 접근하는 방법을 일부 제한하기도 합니다. 간단하게 요약하자면 History 인터페이스는 현재 열고 있는 페이지의 이동 상태를 확인 할수 있고 이동 및 조작이 가능합니다. //History 인터페이스 사용방법 history.length//..

자바스크립트(Javascript)의 removeEventListener() 함수 자바스크립트(Javascript)의 removeEventListener() 함수는 등록되어 있는 이벤트 리스너를 제거하는 함수입니다. 이벤트를 제거할때에는 제거할 엘리먼트(element) 요소가 필요하고, click이나 keypress 등의 이벤트 타입이 필요하며, 제거할 이벤트 callbakc 함수가 필요로 합니다. removeEventListener() 함수는 EventTarget에 등록되었던 이벤트 리스너를 제거하는데, 이 이벤트 리스너는 이벤트 종류와 이벤트 리스너 함수 자체의 조합으로 식별되어 제거되며, 제공되었던 다양한 옵션의 일치하는 이벤트 리스너만 제거가 가능합니다. //removeEventListener() ..

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() 함수 사..