Life goes slowly...

자바스크립트(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() 함수 사..

자바스크립트(Javascript)의 concat() 함수 자바스크립트(Javascript)의 concat() 함수는 두 개의 문자열을 하나의 문자열로 만들어주는 역할을 하는 함수입니다. 입력값을 문자열 대신 배열을 사용하여 두 개의 배열을 하나의 배열로 만들어주는 역할도 함께 하는 함수입니다. 참고로 기존 배열을 변경하지 않으며 추가된 새로운 배열을 반환하게 됩니다. //문자열 concat() 함수 사용방법 문자열.concat( [문자열] ) //배열 concat() 함수 사용방법 배열.concat( [배열] ) let test1 = "Hello"; let test2 = "World"; console.log(test1.concat(test2)); let arrayTest1 = new Array("Hell..

jQuery의 .replaceWith() 함수 jQuery의 .replaceWith() 함수는 특정 요소나 선택한 요소를 다른 요소로 변환하는 함수입니다. 요소를 변환할때에 조건에 맞게 변환도 가능하며 새로운 조건에 맞춰서 변환할때에는 이전에 요소는 DOM에서 삭제됩니다. 새로운 요소를 대신하여 함수를 사용하여 반환도 가능합니다. // .replaceWith() 함수 사용법 이전요소.replaceWith( 새로운 요소 ) //replaceWith 함수 사용 예시 $( 'h1' ).replaceWith( 'abc' ); $( 'h1' ).replaceWith( $( 'p.a' ) );

자바스크립트(Javascript)의 click() 함수 자바스크립트(Javascript)의 click() 함수는 사용자가 클릭을 하지 않아도 강제적으로 이벤트를 발생시키는 함수입니다. 예시로 input창에 키보드로 입력을 할때에 버튼을 클릭을 하지 않고 강제로 이벤트를 발생시킬때 사용하기도 합니다. //click() 함수 사용방법 element.click() function inputOnkeyup() { document.getElementById('test_btn').click(); } function buttonOnclick() { alert('버튼 이벤트 발생!!'); }

자바스크립트(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..

jQuery의 .queue() 함수 jQuery의 .queue() 함수는 요소에 실행되고 있는 함수의 큐를 보여주는 함수입니다. .queue() 함수는 대기열의 함수와 대기열에 대기하고 있는 함수를 조작하기 위한 함수입니다. 즉 요소에서 실행되고 있는 함수의 큐들을 보여주며, 사용되고 있는 함수들이 실행 유무를 확인이 가능합니다. 모든 요소에는 제이쿼리(jQuery)에 의하여 자체의 함들을을 큐의 형태로 지니게 되는데, 이 큐는 순서에 의하여 액션이 이루어집니다. 하나의 요소에 여러 개의 애니메이션 함수를 실행시키는 방법이 이것에 대하여 기본적인 예시입니다. // .queue() 함수 사용법 .queue( element , [queueName] ) //element - 요소 //queueName - 큐명..

Uncaught TypeError: 'undefined' is not a function 오류 원인 웹 개발 시 Chrome의 console 창에서 Uncaught TypeError: 'undefined' is not a function 에러 메시지가 나타나는 경우가 발생합니다. 이러한 에러 메시지가 발생하는 원인으로는 선언한 함수(function)를 찾을 수 없을 경우이거나 선언한 함수명이 tag ID, name등과 동일한 경우에 함수 내에서 오류가 발생하는 코드가 있다면 발생하는 에러 메시지입니다. 그 이외에도 제이쿼리(jQuery)의 라이브러리가 설치되지 않거나 중복되어 설치되어 있는 경우에도 이러한 에러메시지가 발생합니다. Uncaught TypeError: 'undefined' is not a ..