Life goes slowly...

자바스크립트(Javascript)의 isNaN() 함수 자바스크립트(Javascript)의 isNaN() 함수는 주어지는 값이 숫자인지 아닌지 판단하는 함수입니다. 여기서 NaN은 "Not a Number"의 약자입니다. 주어지는 값이 문자열 타입이든 숫자 타입이든지 숫자가 입력되면 fasle를 반환하게 되며, 주어진 값이 문자열이라면 true를 반환하게 됩니다. 숫자로 이루어진 값에 특수문자가 있는 경우에는 true를 반환하기도 합니다. new Date()는 false를 반환하게 되며 new Date().toString()은 문자이기에 true를 반환합니다. //isNaN() 함수 사용방법 isNaN ( [Value] ) console.log(isNaN("111")); console.log(isNaN(..

자바스크립트(Javascript)의 parseInt() 함수 자바스크립트(Javascript)의 parseInt() 함수는 문자열을 분석하여 특정 진수를 사용한 숫자(정수)로 변환하는 함수입니다. 문자열을 변환하여 소수점일 경우에 소수점 이하를 버리고 정수로 변환합니다. 만약에 string 형태의 문자열의 첫 글자를 숫자(정수)로 변경이 불가능하다면 NaN(Not a Number) 값을 반환하게 됩니다. 또한 옵션 값이 2보다 작거나 36보다 큰 경우에도 NaN(Not a Number) 값을 반환합니다. 입력된 값이 공백으로 시작하게 되면 공백은 무시하고 처리하게 됩니다. //parseInt() 함수 사용방법 parseInt ( [string 문자열], [옵션값] ) console.log(parseInt..

자바스크립트(Javascript)의 parseFloat() 함수 자바스크립트(Javascript)의 parseFloat() 함수는 텍스트를 소수점 표현이 가능한 실수로 변환하는 함수입니다. 만약에 텍스트가 아닌 숫자로 입력하게 되면 NaN(Not a Number) 값을 반환하게 되며, 첫 번째로 입력한 값이 숫자인 경우에는 공백 뒤에 나머지 텍스트는 제거되고 반환하게 됩니다. 문자열을 숫자로 변환할때에는 정수가 아닌 실수로 변환하게 됩니다. 입력된 값이 공백으로 시작하게 되면 공백은 무시하고 처리하게 됩니다. //parseFloat() 함수 사용방법 parseFloat ( [string 문자열] ) console.log(parseFloat(3.14)); console.log(parseFloat('3.14..

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