Life goes slowly...

jQuery(제이쿼리)의 .replaceWith() 함수 자바스크립트(Javascript) - jQuery(제이쿼리)의 .replaceWith() 함수는 선택한 요소를 지정된 요소로 대체 변경하는 함수입니다. 지정되는 요소로는 HTML 코드 형식의 문자열이나 jQuery 객체, DOM 요소 등을 전달받을 수 있으며, 이렇게 선택한 요소를 대체할 수 있는 컨텐츠를 반환 함수를 선택되는 요소로 전달받을 수 있습니다. jQuery(제이쿼리)의 .replaceWith() 함수는 조건에 맞는 요소들을 새로운 요소들로 바꾸고 이전의 요소들은 DOM 내에서 삭제하게 됩니다. //함수 사용방법 $(select).replaceWith(newContent); // newContent 새롭게 대체될 요소 $(select)...

자바스크립트의 jQuery(제이쿼리)에서는 선택 및 지정한 요소의 다음 엘리먼트를 가져오도록 하는 함수를 사용할수있습니다. 지정한 요소에 인접한 다음 요소의 엘리먼트를 선택하는 함수로는 .next(), .nextAll(), .nextUntil() 가 있습니다. jQuery(제이쿼리)의 .next() 함수 자바스크립트의 jQuery(제이쿼리)의 .next() 함수는 선택한 요소의 바로 다음에 위치한 형제의 요소를 선택하는 함수입니다. //함수 사용방법 $(select).next(); $(select).next(selector); jQuery(제이쿼리)의 .nextAll() 함수 자바스크립트의 jQuery(제이쿼리)의 .nextAll() 함수는 선택한 요소의 바로 다음에 위치한 모든 형제의 요소를 선택하는 ..

웹 개발 시 CSS 스타일을 추가하거나 제거하고 변경하기 위해서는 클래스(Class) 속성을 선택자로 사용하게 됩니다. 그 이외의 동적인 스크립트와 액션은 Javascript(자바스크립트)의 ID 값을 사용하게 됩니다. .removeClass() 함수는 이렇게 CSS 스타일을 추가 및 제거, 변경하기 위한 클래스(Class)의 Name을 제거할 때 사용하는 함수입니다. 물론 CSS 파일에서 Class의 Style이 선언되어야 적용이 가능합니다. jQuery의 .removeClass() 함수 jQuery(제이쿼리)의 .removeClass() 함수는 CSS 클래스를 제거하는 함수로 element(요소) 와 Class(클래스)명을 받아서 호출하게 됩니다. 선택한 요소에서 Class 값을 제거하게 됩니다. ...

웹 개발 시 CSS 스타일을 추가하거나 제거하고 변경하기 위해서는 클래스(Class) 속성을 선택자로 사용하게 됩니다. 그 이외의 동적인 스크립트와 액션은 Javascript(자바스크립트)의 ID 값을 사용하게 됩니다. jQuery의 .addClass() 함수는 이렇게 CSS 스타일을 추가 및 제거, 변경하기 위한 클래스(Class)의 Name을 추가할 때 사용하는 함수입니다. 물론 CSS 파일에서 Class의 Style이 선언되어야 적용이 가능합니다. jQuery의 .addClass() 함수 제이쿼리(jQuery)에서 사용하는 Class 명을 추가하여 Style을 적용하는 방법 이외에도 직접 Style을 적용이 가능합니다. .attr() 함수나. css() 함수를 사용하는 방법입니다. //.attr()..

요소(element)에 자바스크립트(Javascript) 이벤트 핸들러를 지정하기 위한 함수로는. bind() , .on(), .live() 가 있습니다. 3개의 함수 모두 같은 역할을 하고 있지만 각각 함수마다 차이점이 있습니다. jQuery의 .bind() 함수 제이쿼리(jQuery)에서 사용되는 가장 기본적으로 사용되는 자바스크립트(Javascript) 이벤트 바인딩 함수입니다. 하지만 제이쿼리 1.7 버전 이후에. on() 함수가 나오면서 새로운 기능이 추가되지 않을 예정으로 점점 사라질 수도 있다는 이야기가 있어서 제이쿼리 1.7버전 이후에는. on() 함수를 사용하라고 가이드 되어 있습니다. 단일 요소(element)를 각 이벤트 처리기에 연결하며 복제된 요소(element)는. bind() ..

jQuery의 .removeAttr() 함수 jQuery의 .removeAttr() 함수는 속성을 값을 삭제할 때 사용됩니다. 자바스크립트의 기본 함수이며 요소(element)의 속성(attribbute)의 값을 삭제할 때 사용됩니다. // 속성값 제거하기 .removeAttr( attributeName ) .removeAttribute( attributeName ) // div 요소의 title 속성을 제거합니다. $( 'div' ).removeAttr( 'title' ); // input 요소의 placeholder 속성을 제거합니다. $( 'input' ).removeAttr( 'placeholder' ); // input 요소의 disabled 속성을 제거합니다. $( 'input' ).remov..

jQuery .attrr() 함수 jQuery의 .attr() 함수는 속성을 값을 가져올 때 사용됩니다. 또한, JQuery의 .attr() 함수를 사용하여 요소(element)의 속성(attribbute)의 값을 쉽게 제어할 수도 있습니다. //함수 사용법 .attr( attributeName ) // 속성값 가져오기 .attr( attributeName , val ) // 속성값 제어하기 //속성값 가져오기 //div 요소의 id 속성의 값을 가져옴 $( 'div' ).attr( 'id' ); //id 요소가 "test" 인 placeholder 속성 값을 가져옴 $( '#test' ).attr( 'placeholder' ); //body 요소의 class 속성의 값을 가져옴 $('body').att..

설명 Method 기능 .offset() 읽기/쓰기 선택된 요소의 좌표를 가져오거나 특정 좌표로 이동 .offsetParent() 읽기 전용 Dom 트리에 존재하는 부모 요소들 중 위치 요소를 기준으로 가장 가까운 요소를 선택 .position() 읽기 전용 부모 요소의 위치를 기준으로 값을 얻는 상대 좌표를 사용하는 방법 .scrollLeft() 읽기/쓰기 선택된 요소의 가로 스크롤 값을 반환하거나 값을 지정 .scrollTop() 읽기/쓰기 선택된 요소의 세로 스크롤 값을 반환하거나 값을 지정 .offset() 함수 .offset( coordinates ) Hello2nd Paragraph Hello left: 10, top: 50 .offsetParent() 함수 .offsetParent( coor..

Method 설명 .append() 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가 .appendTo() 선택된 요소를 해당 요소의 마지막에 추가 .prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가 .prependTo() 선택된 요소를 해당 요소의 첫번째에 추가 .after() 선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가 .insertAfter() 선택한 요소를 해당 요소의 뒤쪽에 추가 .before() 선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가 .insertBefore() 선택한 요소를 해당 요소의 앞쪽에 추가 .clone() 선택한 요소를 복사( 특정 태그안의 내용 모두 복사) .remove() 선택한 요소를 삭제( 태그 안의 내용을 모두 삭제) .app..

자바스크립트(Javascript)의 Location 객체 자바스크립트의 Location 객체는 window 객체의 하위 객체이지만 window 객체를 생략하며서 사용이 가능합니다. 프레임을 사용되는 경우에는 최상위 프레임 문서의 URL만 참조할 수 있고, 하위 프레임의 문서들은 프레임 객체를 이용하기도 합니다. //기본형태 location.속성 또는 메소드 location.속성 = 지정값; 자바스크립트(Javascript)의 location.href 자바스크립트의 location.href는 페이지의 URL 전체 정보를 반환하는 함수로써 URL을 지정하여 페이지를 이동할 수 있습니다. 형태는 속성으로서 주소 히스토리가 기록됩니다. location.href는 location 객체에 속해있는 프로퍼티로 현재 ..

JavaScript(자바스크립트)에서 대화상자로 사용되는 함수들은 많이 있습니다. Alert, Confirm, Prompt 세 가지가 있고 새롭게 Popup 창을 띄우는 형태로써는 모두 같지만 각각 함수마다 역할이 다르며 함수 사용방법이 다릅니다. 자바스크립트 Alert() 함수 자바스크립트의 Alert() 함수는 단순하게 메시지만을 전달하는 함수이며 사용된 후에 반환되는 값은 없습니다. 대부분 사용자에게 경고하는 내용이나 중요한 내용을 전달할 때 사용되는 함수입니다. 대화상자 Popup 창중에 가장 기본적이며 많이 사용되는 함수입니다. alert("Hello World"); 자바스크립트 Confirm() 함수 자바스크립트의 Confirm() 함수는 Alert() 함수와는 다르게 변수에 참/거짓을 저장한..

자바스크립트 Hoisting 자바스크립트의 호이스팅은 모든 선언(var, let, const, function)을 통해서 정의된 변수의 선언문을 유효범위의 최상단으로 끌어올리는 행위를 말합니다. 변수의 범위가 전역 범위, 함수 범위 상황에 따라서 다르게 동작이 되며, 변수의 선언과 할당의 분리라고도 합니다. 전역 범위(globa scope) - 전역 범위에서는 스크립트 단위 최상단으로 끌어 올려집니다. 함수 범위(function scope) - 함수 범위에서는 해당 함수의 최상단으로 끌어 올려집니다. 자바스크립트 함수 표현식 (Function Expression) 자바스크립트에서 변수를 만들고 함수를 변수에 할당해 주는 표현식으로는 hoisting 안됩니다. test(); var test = functi..

자바스크립트 클로저(Closure) 클로저 = 함수 + 함수를 둘러싼 환경(Lexical environment) 클로저(Closure)는 독립적인 변수를 가리키는 함수라고 MDN 웹 문서 사이트에서는 정의되어 있습니다. 자바스크립트의 함수 내부에 함수를 작성을 할 때 그 내부에 생성된 함수를 클로저(Closure)라고 합니다. 차후에 외부 함수의 변수를 사용 가능하도록 하기 위해서 반환하여 사용하는 것이 대부분입니다. 자바스크립트의 클로저에는 세 가지 스코프가 있습니다. 지역내의 지역 범위 (Local Scope) 지역외의 외부 함수 범위 (Outer Functions Scope) 전체지역의 전역 범위 (Global Scope) 클로저(Closure)에 대해서 세 가지 범위, 스코프에 모두 접근은 가능하..

★AJAX (Asynchronous JavaScript + XML ) - 자바스크립트를 사용한 비동기 통신을 말하며 Client와 Server간에 XML 데이터를 주고받는 기술를 말합니다. - DHTML, CSS, XML, XMLHttpRequest등의 기술들을 이용하여 보여주는 기술을 말합니다. 서버의 처리를 기다리지 않고 비동기 요청이 가능하고 서버측 처리를 각 PC에 분산가능 하지만.... AJAX를 사용못하는 브라우져가 있으며 오픈소스여서 보안에 철저히 신경을 써야 합니다. TYPE(method) - GET,POST URL - 데이터를 요청할 페이지(요청 URL) DATA - 요청에 의해 전달되는 param Vaule CONTENTTYPE - 요청 콘덴츠 타입. 생략하면 'application/x..

JavaScript의 Array(배열)은 자바스크립트에서 데이터를 처리할 때 가장 폭넓게 사용되고 있는 데이터의 타입 중 하나이며 손쉽게 배열을 추가하고 삭제를 하는 다양한 조작 함수들을 제공하고 있습니다. Javascript에서 배열(Array)에서 새로운 Value 값을 삭제할 때 사용하는 pop(), shift(), splice() 함수들이 잇습니다. 사용하는 함수에 따라서 배열의 앞이나 뒤에 삭제를 할 수 있습니다. JavaScript의 pop() 함수 JavaScript의 pop() 함수는 Array(배열)의 마지막에 새로운 요소를 삭제하고 난후 변경된 배열의 길이를 반환하는 함수입니다. Array(배열)의 끝에 Value 값을 삭제하는 함수입니다. Array(배열)의 끝에 하나 또는 그 이상의..