본문 바로가기

푸로그래밍/JS

[JS] HTML 요소 크기가져오기. (offsetWidth, clientWidth, scrollWidth, getBoundingClientRect 필자는 얼마전에 JS에서 HTML 요소의 크기를 가져와서 계산해야하는 일이 발생했다. 예전에 어렴풋이 사용한 기억이 있어서, IDE의 코드 자동완성기능을 믿고, 그냥 element.width라고 쳐보니 많은 속성들이 나왔다. 속성이 여러개가 있다는 것은 분명 차이가 있을것이고 제품에서는 정확한 결과를 내야하기 때문에 이 차이들을 알 필요가 있다. 알아보자. 1. element.offsetWidth (Height) element.offsetWidth는 margin을 제외한, padding값, border값까지 계산한 값을 가져온다. (일반적으로 많이쓰임) 아래의 코드를 보자 글씨글씨글씨글씨글씨글씨글씨글씨 실행을 시켜 보면 위와같이 margin을 제외한 초록색 부분까지의 크기, padding값과 border.. 더보기
[JS] if 대신 사용이 가능한 연산자, 삼항 연산자란? 삼항 연산자란? 삼항 연산자는 참과 거짓에 따른 2개 이상의 조건 선택이 있을 때 하나를 선택할 수 있도록 만들어졌습니다. 주로 if문이 필요하지 않은 간단한 조건문 계산에 사용합니다. 문법 (조건) ? a : b (조건) 이 참일 때 a를 실행, 거짓일 때 b를 반환(실행)합니다. 예시 let a = 20; if(a < 15){ console.log("a가 15보다 작다!"); }else{ console.log("a가 15보다 크다!"); } // a가 15보다 크다! 이런 간단한 if문은 간단하게 삼항 연산자로 표현이 가능합니다. let a = 20; console.log("a가 15보다" + (a < 15 ? "작다!" : "크다!")); // a가 15보다 크다! 조금 더 긴 if문도 가능합니다... 더보기
[JS] Array 관련 매소드 Array.prototype.forEach 자 행님덜 이번에는 Array관련 매소드를 설명드리도록 하겠읍니다. 이 함수들은 ES6에서 새로 추가된 것이 아닙니다. 따라서 킹터넷 갓스플로러에서도 사용하는것이 가능합니다. 선행하면 좋은 글: https://so4869.tistory.com/20 이 글을 쓰는 목적은 제가 이러한 함수들을 공부하면서 인터넷을 뒤져본 결과, 잘못된 정보도 많았고, 쓸데없는 정보도 많았습니다. 해당 검색결과는 제가 글을쓰려는 주제로 구글에다가 검색해 본 결과입니다. 벌써 이렇게 간단하게 검색만 해보아도 ES6과 관련을 지어서 글을 써 놓으신 분들이 많습니다. 하지만 여기서 설명하려는 Array.prototype.forEach Array.prototype.reduce Array.prototype.filter Array.pro.. 더보기
[JS] 화살표 함수 Arrow Function 이 함수는 아쉽게도 모든 웹개발자들에게 사랑받는 킹터넷 갓스플로러에서는 사용이 불가하다. 정말정말아쉽다. 기본문법 일단 기본적으로 일반 함수와의 용법의 차이를 살펴보면 이렇다. function testFunc(arg = 'aaaa'){ console.log(arg); } let testFunc = function(arg = 'aaaa'){ console.log(arg); } let testFunc = (arg = 'aaaa') => { console.log(arg); } 이렇게 텍스트로 살펴만 보면 형식의 차이일뿐 별다른 차이는 보이지 않는다. 이런식으로 기존 함수형태와 같이 기본값을 정해 줄 수도 있다. 물론 전개식도 사용이 가능하다. let testFunc = arg => console.log(arg.. 더보기
[JS] ES6 구조분해할당 배열, 객체의 값을 각각의 변수에 담을 수 있다. ES6이라 킹터넷 갓스플로러는 안됨. 사실 익스는 ES5코드도 실행하는데 장애가 있다. let a, b; [a, b] = [10, 20]; console.log(a, b); // 10, 20 이렇게 변수를 교환할 수 있다. let a, b, arr; [a, b, ...arr] = [0, 1, 2, 3, 4, 5]; console.log(a, b, arr); // 0, 1, [2, 3, 4, 5 이렇게 전개식을 사용할수도있다. let a, b; {a, b} = {b: 123, a: 456} console.log(a, b); // 456, 123 Object도 ㅆㄱㄴ Object는 Key값에 의해 매칭된다. let a, b, obj; {a, b, ...obj.. 더보기

티스토리툴바