프론트엔드/JavaScript(19)
-
[javascript] filter()와 map()
filter() Array.prototype.filter() 메서드 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. map, filter, reduce는 순차적 접근 const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"] 구문 arr.filter(callback(element[, index[, array]])[, thisArg]) callb..
2022.06.04 -
[javascript] Truthy값과 falsy값, 단축평가 응용하기
Truthy & falsy Boolean 값인 true, false 를 가지지 않음에도 불구하고 그와 비슷한 효과를 내는 값들이다. 먼저 falsy 값을 알아보자면, 다음과 같다. falsy 값의 종류 false 키워드 false 0 숫자 zero -0 음수 zero 0n BigInt. 불리언으로 사용될 경우, 숫자와 같은 규칙을 따름. 0n은 거짓 같은 값. "" 빈 string null null - 아무런 값도 없음 undefined undefined - 원시값 NaN (en-US) NaN - 숫자가 아님 falsy 값이 자바스크립트에서 불리언 값을 요구하는 부분에 들어가면, 이 값들은 false로 변환된다. 즉 조건문이나 반복문에 들어가면 false로 작동하는 것이다. if (false) if (n..
2022.03.18 -
[javascript] 이벤트와 이벤트 객체
모든 객체object는 고유의 Method()와 Property를 가지고 있다. document.getElimentById('choice').textContent = new Date(); //객체.메서드().프로퍼티 이벤트 The Event interface represents an event which takes place in the DOM. … Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. https://developer.mozilla.org/en-US/docs/Web/API/Event 쉽게 말해 정적인 상황..
2022.02.21 -
자바스크립트 응용편
카운트다운 타이머 1. 남은 시간을 계산하는 함수 var countdown = function (due) { var now = new Date(); var rest = due.getTime() - now.getTime(); var sec = Math.floor(rest / 1000 % 60); var min = Math.floor(rest / 1000 / 60) % 60; var hours = Math.floor(rest / 1000 / 60 / 60) % 24; var days = Math.floor(rest / 1000 / 60 / 60 / 24); var count = [days, hours, min, sec]; return count; } var goal = new Date(); goal.setH..
2021.05.03 -
자바스크립트 기본문법 2 (입력과 데이터 가공: 이벤트, 객체)
이벤트 document.getElementById('form').onsubmit=function(){ console.log('clicked'); } 이벤트에 대입하는 함수의 () 안에는 매개변수가 없고, {} 안에 return 명령어도 없음. => 매개변수와 반환 값이 없는 함수도 존재한다. * onsubmit 이벤트는 전송버튼이 아닌 부모요소 form 에서 발생한다 입력 내용 가져오기 document.getElementById('form').onsubmit=function(){ var search = document.getElementById('form').word1.value; document.getElementById('output').textContent=search+' 검색중...'; retur..
2021.04.23 -
[Javascript] switch문과 if 문
복수의 if 조건문은 switch 문으로 바꿀 수 있다. switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break] } 값과 일치하는 case문이 없으면 default문이 실행된다. break가 없으면 이어지는 case문을 실행한다. let arg = prompt("값을 입력해주세요."); switch (arg) { case '0': case '1': alert( '0이나 1을 입력하셨습니다.' ); break; case '2': alert( '2를 입력하셨습니다.' ); break; case 3: alert( '이 코드는 절대..
2021.04.16