본문 바로가기

Frontend

 (290)
[JavaScript] 이벤트 객체 이벤트 핸들러의 첫번째 파라미터에는 이벤트 객체가 전달된다. event 라고 작성해도 되지만 대게 e 로 작성한다. // 이벤트 객체 (Event Object) const myInput = document.querySelector('#myInput'); const myBtn = document.querySelector('#myBtn'); function printEvent(event) { console.log(event); event.target.style.color = 'red'; } myInput.addEventListener('keydown', printEvent); myBtn.addEventListener('click', printEvent); 위처럼 keydown 이벤트가 발생하면, 이벤트 정보..
[JavaScript] 이벤트 핸들러 등록하기 1. onclick 프로퍼티 활용 새로운 이벤트를 할당하게 되면, 기존의 값을 덮어쓰기 때문에 좋은 방법이라고 하기 어렵다. let btn = document.querySelector('#myBtn'); btn.onclick = function () { console.log('Hi Codeit!'); }; 2. addEventListener 메소드 사용 첫번째 파라미터로 event 내용을 전달하고, 두번째 파라미터로 이벤트 핸들러를 전달한다. 핸들러 부분에는 함수이름 만 전달해주면 됨. event1() 이런식으로 작성하는 경우가 있는데, 그러면 함수가 바로 실행된다. 하나의 요소에 여러가지 독립적인 이벤트를 등록할 수 있음. let btn = document.querySelector('#myBtn'); ..
[알고리즘] 간단한 식 계산하기 / eval() 간단한 식 계산하기 문자열 binomial 의 식을 계산하여 리턴 binomial result "43 + 12" 55 "0 - 7777" -7777 "40000 * 40000" 1600000000 나의 풀이: function solution(binomial) { var array = binomial.split(" ") var a = array[0]*1 var b = array[2]*1 return array[1] == "+" ? a + b : array[1] == "-" ? a - b : a * b } 문자열 binomial 을 공백 " " 을 기준으로 0~2 번 인덱스의 배열로 나눈 후 계산 다른 풀이: const solution = eval 나도 나름대로 짧게 썼다고 생각했는데 몇몇 다른사람들이 푼 ..
[알고리즘] 배열의 원소만큼 추가하기 배열의 원소만큼 추가하기 arr 배열의 요소만큼 반복하는 새 배열을 리턴 arr result [5, 1, 4] [5, 5, 5, 5, 5, 1, 4, 4, 4, 4] [6, 6] [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6] [1] [1] 나의 풀이: function solution(arr) { var answer = [] for(i = 0; i < arr.length; i++) { for(j = 0; j < arr[i]; j++) { answer.push(arr[i]) } } return answer; } 반복문을 사용하여 arr[i] 만큼 반복하여 새 배열에 추가하였음.
[알고리즘] 가까운 1 찾기 / indexOf 가까운 1 찾기 idx 보다 인덱스 값이 큰 수 중 가까운 1의 인덱스 값을 리턴, 값이 없을 경우에는 -1 리턴 arr idx result [0, 0, 0, 1] 1 3 [1, 0, 0, 1, 0, 0] 4 -1 [1, 1, 1, 1, 0] 3 3 나의 풀이: function solution(arr, idx) { for(i = idx; i arr.indexOf(1,idx); indexOf 메소드를 이용하여 1의 값을 찾되, idx 부터 시작하는 값을..
[알고리즘] 접미사인지 확인하기/ endsWith 메소드 접미사인지 확인하기 말그대로 suf가 str의 접미사이면 1을 출력, 아니면 0을 출력 str suf result "banana" "ana" 1 "banana" "nan" 0 "banana" "wxyz" 0 "banana" "abanana" 0 나의풀이: function solution(str, suf) { return str.slice(str.length-suf.length,str.length) == suf ? 1 : 0 } str을 suf의 글자수만큼 slice 한것이 suf와 같으면 1, 아니면 0 을 출력 다른풀이: function solution(str, suf) { return str.endsWith(suf) ? 1 : 0 } endsWith 메소드를 이용해서 위와 같이 작성할 수 있는데, s..
[JavaScript] 노드 삭제와 이동하기 // 노드 삭제와 이동 const today = document.querySelector('#today'); // 요소 노드 선택 const tomorrow = document.querySelector('#tomorrow'); // 노드 삭제하기: Node.remove() tomorrow.remove(); today.children[2].remove(); // today 노드의 자식요소 중에서 2번 인덱스 삭제 // 노드 이동하기: prepend, append, before, after today.append(tomorrow.children[1]); // tomorrow 노드의 자식요소 중 1번 인덱스를 today노드로 이동 tomorrow.children[1].after(today.children[1]..
[알고리즘] 조건에 맞게 수열 변환하기 1 조건에 맞게 수열 변환하기1 50 보다 큰 짝수는 원래 요소 / 2 50 보다 작은 홀수는 원래 요소 * 2 arr result [1, 2, 3, 100, 99, 98] [2, 2, 6, 50, 99, 49] 나의풀이 : function solution(arr) { for(i = 0; i = 50 && arr[i] % 2 == 0) { arr[i] = arr[i]/2 }else if(arr[i] v >= ..

티스토리툴바