Life goes slowly...

자바스크립트(Javascript)의 Object.freeze() 함수 자바스크립트(Javascript)의 Object.freeze() 함수는 지정된 프로토 타입 객체를 동결하는 함수입니다. 동결된 객체는 변경이 불가능합니다. 이렇게 동결된 객체는 새로운 속성을 추가하려거나 삭제하는것을 방지하는 함수입니다. 동결된 객체는 속성의 불변성을 유지하고 설정 이나 작성 가능성을 방지하는 함수입니다. 또한 객체의 속성 값이 변경되는것 또한 방지합니다. 자바스크립트(Javascript)의 Object.freeze() 함수로 동결된 객체는 어떠한 속성을 추가하거나 삭제가 불가능하며, 만약 그러한 시도가 발생한다면 TypeError 예외가 발생됩니다. //Object.freeze() 함수 사용방법 Object.free..

자바스크립트(Javascript)의 Object.create() 함수 자바스크립트(Javascript)의 Object.create() 함수는 지정된 프로토 타입 객체 및 속성(property)을 갖는 새로운 객체를 생성하는 함수입니다. 자바스크립트(Javascript)의 Object.create() 함수를 사용하기 위해서는 새로 만들 객체의 프로토타입의 객체를 선언해야 합니다. 새로 만들 객체가 null 또는 객체 프로토타입이 아닌 경우에는 TypeError 예외가 발생됩니다. //Object.create() 함수 사용방법 Object.create([ 새로만들 객체], [옵션] ) //생성자 함수를 사용하여 객체 상속을 만듬 function test(id) { this.id = id; } // webTe..

자바스크립트(Javascript)의 Object.assign() 함수 자바스크립트(Javascript)의 Object.assign() 함수는 여러 개의 매개변수 객체 중 target 매개변수 객체에 나머지 객체를 병합하는 함수입니다. 여러 객체의 프로퍼티를 복사하여 첫 번째 객체의 프로퍼티에 추가한 뒤에 그 객체를 반환하는 함수입니다. 자바스크립트(Javascript)의 Object.assign() 함수를 사용하기 위해서는 꼭 타겟(target) 객체를 정해야 합니다. //Object.assign() 함수 사용방법 Object.assign([target 객체], [여러개의 객체] ) var object1 = {a:111}; var object2 = {b:222}; var object3 = {c:333};..

자바스크립트(Javascript)의 async & await 자바스크립트(Javascript)의 async & await는 비동기 처리 패턴 중 최근에 나온 문법으로써 비동기 처리 방식인 콜백 함수와 Promise의 단점을 보완한 패턴 문법입니다. ES8에서 async & await를 도입하여 비동기 처리의 코드를 가독성을 높였습니다. async 함수는 function 앞에 위치하며 함수 내부에 await 문법을 사용하게 됩니다. 만약 외부에서 사용하게 되면 SyntaxError가 발생하게 됩니다. //async & await 기본문법 async function 호출함수() { await 비동기처리_함수(); } 자바스크립트(Javascript)의 async & await 장점 자바스크립트(Javascr..

자바스크립트(Javascript)의 textContent 자바스크립트(Javascript)에서 엘리먼트 및 노드에서 텍스트를 추가를 하거나 엘리먼트에 있는 텍스트를 가져올수 있는 방법입니다. textContent 값은 식별자 노드의 내부 컨텐츠를 Text/plain 으로 파싱한 결과를 보여줍니다. //textContent 사용방법 //텍스트를 추가하기 element.textContent = '내용' //텍스트 값 가져오기 var text = document.body.textContent; console.log(text);

제이쿼리(jQuery)를 사용하여 선택한 요소나 그의 따른 요소의 넓이와 높이를 값을 설정하거나 넓이, 높이 값을 가져올수가 있습니다. 요소(element)의 크기의 영향을 미치는 구성에는 내부의 여백인 padding, 외부의 여백인 margin, 그리고 테두리 선인 border이 있는데, 이 3가지가 요소(element)가 넓이와 높이 값에 영향을 주게 됩니다. jQuery(제이쿼리)의 요소(element)의 높이 측정구하기 jQuery(제이쿼리)로 요소(element)의 높이를 측정하는 방법은 요소(element)의 크기의 영향을 미치는 구성에 따라서 4가지 방법이 있습니다. 여기서 주의할 점은 Javascript(자바스크립트)와 jQuery(제이쿼리)의 높이 구하는 방법은 달라서 헷갈리지 말아야 합..

우리가 자주사용하고 있는 자바스크립트의 제이쿼리(jQuery)를 사용하여 선택한 요소나 그의 따른 요소의 스크롤 위치를 손쉽게 알 수 있고, 스크롤 위치를 설정할 수 있는 함수가 있습니다. 요소의 수직 이나 수평 스크롤 바의 위치를 알 수 있으며, 인수로 전달받은 값으로 수직, 수평의 스크롤 바의 위치를 설정할 수 있습니다. 위치 개념으로는 지역 좌표와 전역 좌표가 있는데 지역 좌표는 부모 노드 기준의 좌표이며, 전역 좌표는 최상위 노드인 Document의 Left와 Top 위치가 0부터 시작합니다. jquery(제이쿼리)의 .scrollLeft() 함수 jQuery(제이쿼리)의 선택한 요소의 수평 스크롤 바의 위치를 얻거나, 선택한 요소의 수평 스크롤 바의 위치를 설정이 가능합니다. //함수 사용방법 ..

자바스크립트의 제이쿼리(jQuery)를 사용하여 선택한 요소나 그의 따른 요소를 감싸기가 가능한 함수가 있습니다. 선택한 요소를 원하는 태그로 감싸기를 할 때 대상 요소나 대상 요소의 하위 요소, 대상 요소의 전부를 감싸기를 할 수 있습니다. jquery(제이쿼리)의 .wrap() 함수 jQuery(제이쿼리)의 .wrap() 함수는 선택한 요소에 새로운 태그로 감싸는 함수입니다. .wrap() 함수는 $() 형식으로 사용되는 함수에서 나오는 문자열 또는 객체로도 감싸기를 할 수 있습니다. //함수 사용방법 $(select).wrap(wrappingElement); // wrappingElement 요소들을 감싸는 요소 $(select).wrap( function() ); //p 요소를 div 태그로 감싸..

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()..

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

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 객체에 속해있는 프로퍼티로 현재 ..