본문 바로가기

자바스크립트54

Javascript 소수점 반올림 다루는 api

Math.ceil(소수) : 소수점 올림, 정수 반환 Math.floor(소수) : 소수점 버림, 정수 반환 Math.round(소수) : 소수점 반올림, 정수 반환 Math.ceil(소수)는 크거나 같은 값 중에서 가장 작은 정수를 integer로 반환합니다. Math.floor(소수)는 작거나 같은 정수 중에 가장 가까운 수를 integer로 반환합니다. Math.round(소수)는 입력값을 반올림한 수와 가장 가까운 정수 값을 반환합니다. 참고 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/floor developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global.. 2021. 4. 19.

[Javascript]HTML 요소에서 동일 클래스 이름에 동작 부여하기

안녕하세요. 한 번은. 개발을 하다가, 동일 클래스를 가지는 요소들에 동일한 값을 Javascript를 통해서 넣어줘야 하는 상황이 있었습니다. 저는 단순히, document.querySelector('.클래스 이름');을 부여한 변수에 innerText를 사용해서 Javascript로 구한 값을 정성스럽게 넣어주었습니다. 그런데, 값은 가장 상위의 클래스에만 반영되고, 그 밑으로 동일한 클래스를 가지는 요소들에는 Javascript값이 들어가지 않았습니다. 원인은, document.querySelector입니다. 이 api는 단순 코드 가장 위에서부터 처음 매칭되는 클래스 요소만을 가져옵니다. 그 밑에 동일한 클래스 이름을 가지는 html 요소는 고려하지 않는 api입니다. 동일한 클래스 이름을 가지는.. 2021. 4. 19.

[Javascript] Web 이벤트 전파 막는 방법과 프론트 개발자가 반드시 알아야 하는 개념.

이벤트 버블링 하위의 객체에서 이벤트가 발생했을 경우, 상위 요소까지 이벤트가 전달되는 현상을 말합니다. 가장 하위 요소인 class_3을 눌렀더니, 콘솔에 모든 요소의 click 이벤트가 발생한 것을 확인할 수 있습니다. 이벤트 버블링이 발생한 현상입니다. 코드는 아래와 같습니다. Javascript에서 이벤트 버블링을 막는 방법 이벤트가 전파되지 않도록 하는 event 객체에 stopPropagation() 함수를 사용합니다. MDN Web API > Event > Event.stopPropagation() 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다. Vue.js에서 이벤트 버블링을 막는 방법 이 현상을 막는 방법은 다음과 같습니다. HTML 요소에서 이벤트 전파를 막는 방법입.. 2021. 3. 3.

[Javascript] 배열에 특정 원소가 있는지 찾는 방법

indexOf() 개인적으로 가장 편한 방법인 것 같습니다. 배열 안에서 찾으려는 값과 정확하게 일치(===)하는 첫번째 원소의 index를 리턴합니다. 만약 값이 없으면, -1을 반환합니다. indexOf()함수는 문자열에서도 사용할 수 있습니다. 문자열에서 특정 원소의 자릿수를 반환합니다. lastIndexOf() 그럼 반대로, 문자열의 뒤에서부터 찾으려고 한다면, 어떻게 하면 될까요? 문자열.lastIndexOf('찾을 문자열'); 을 하면 됩니다. 마찬가지로 찾는 문자가 없으면 -1을 반환합니다. includes() 배열이 특정값을 포함하고 있는지 여부를 true/false로 반환합니다. 2021. 2. 9.

[Javascript] Web API DOM 클래스 다루기

HTML 요소의 클래스 이름을 변경하는 방법. MDN 문서 : className 예시 코드 html kisBlog css //css .title-red { color: 'red'; } .title-blue { color: 'blue'; } Javascript //Javascript const title = document.querySelector('.title-red'); if (title.className !== 'title-red') { title.className = 'title-red'; } else { title.className = 'title-blue'; } 클래스 이름 변경하는 법 MDZ : Element.classList Element.classList 프로퍼티는 DOMTokenList를.. 2021. 2. 5.

[Javascript] HTTP 요청과 응답 처리하는 방법. 프론트 개발자가 알아야 하는

Javascript HTTP 통신 하는 방법 ⚡️ XMLHttpRequest MDN-XMLHttpRequest 객체 짧게 XHR이라고 부릅니다. XHR은 객체입니다. 서버와 통신을 위해서 사용됩니다. HTTP 프로토콜 뿐만 아니라 file, ftp 도 지원합니다. 페이지 갱신 없이 필요한 데이터를 받아 올 수 있는 장점이 있습니다. ⚡️ fetch() MDN Fetch Web API ES6에 생긴 기능입니다. Javascript의 Web API의 비동기 네트워크 통신 함수입니다. XHR 대체제로 나온 기능입니다. 브라우저에 있는 Javascript 엔진을 통신 기능으로 사용합니다. 📩 GET 요청 사용 예시 //MDN 코드 사용 fetch('http://example.com/movies.json') .t.. 2021. 2. 1.

[Javascript] 알파벳 문자열 대소문자 변경 함수

안녕하세요. Javascript의 내장함수로 알파벳 문자열의 대소문자를 변경해주는 함수가 있습니다. ABCD -> abcs로 바꾸던지, abcd -> ABCD로 이 함수를 사용해서 변경할 수 있습니다. 바로, 다음 함수들입니다. toLowerCase(); toUpperCase(); 사용 방법은 다음과 같습니다. let a = "ABC abc"; a.toUpperCase(); console.log(a); //결과 : "ABC abc" => 문자열 자체를 바꾸지 않습니다. a = a.toUpperCase(); console.log(a); // 결과 "ABC ABC" let b = "ABC abc"; b.toLowerCase(); console.log(b); //결과 : "ABC abc" => 문자열 자체를 .. 2021. 1. 30.

[Javascript] 제대로 된 문자, 숫자, 배열 객체 원소 정렬을 사용하는 방법

안녕하세요. 회사에서 에 문자와 숫자를 정렬하는 기능을 추가해야 했습니다. v-data-table vuetify의 에는 정렬 기능이 기본적으로 있어서 처음엔 을 사용했었습니다. 그런데, 표에 의 에 checkbox까지 들어가야 하는 디자인의 요구사항이 있었습니다. 물론 에도 에checkbox를 넣고 사용할 수 있는 기능이 있지만, 디자인대로 구현하기에는 어려움이 있었습니다. 그래서, 차라리 테이블의 목록을 정렬하는 기능을 제가 만드는 것이 낫겠다고 생각했습니다. 그래서 이번 포스팅에서는 Javascript를 사용해서 api를 통해서 받아온 [{},{},{} ...] 배열을 어떻게 정렬을 하는지에 대해서 알아보기 위해서 이번 문서를 작성하게 되었습니다. 재미있게 봐주세요. *목차 1. Javascript .. 2021. 1. 29.

[Javascript]자바스크립트에서 날짜 사용법

개요 api를 통해서 날짜 데이터를 전달할 때에는 어떤 값을 넘겨주는 것이 맞는 것일까요? 2021-01-12? 아니면, 밀리초? Javascript 내장 날짜 함수 Date() Date 객체는 밀리초의 값을 가집니다. 현재 날짜 구하기 const date = new Date(); // Mon Aug 23 2021 12:00:45 GMT+0900 (일본 표준시) 컴퓨터는 날짜 정보의 차이를 날짜 +시간 정보를 밀리세컨드 단위로 변환한 후에 계산을 합니다. 밀리 세컨드는 1/1000초입니다. let 객체명 = new Date(밀리 세컨드); let 객체명 = new Date(년,월,일,시,분,초,밀리 세컨드); let 변수명 = new Date('2020.04.22'); // Mon Apr 22 2019 .. 2021. 1. 28.

Javascript 변수 선언 가장 기본적인 질문

Javascript에서 가장 원초적인 구분지식1 var, let, const의 차이점 변수 재선언 변수 재할당 var 가능 가능 let 불가능 가능 const 불가능 불가능 재선언 var name = 'John'(O) var name = 'mark'(O) let name = 'John'(O) let name = 'mark'(X) 2021. 1. 25.

티스토리툴바