본문 바로가기
반응형

develop/javascript17

[JS] append() & appendChild() 비교 append와 appendChild의 차이를 알고 싶어 정리한 글. append() appendChild() 타입 자바 스크립트 함수 DOM 함수 추가 노드 갯수 여러개의 자식요소 설정 가능 한 개만 가능 문자열 노드 추가 지원 가능 DOM 문자열, 또는, 태그와 조합해 여러개의 텍스트 노드, 또는 엘리먼트 노드를 여러개 만들 수 있음 Node object ('p') // p tag DOM String('한글) Node object만 가능 인터넷 익스플로어 미지원 지원 prepend 지원 prepend() 지원 prependChild() 미지원 반환 값 undefined 추가된 노드 참조 인터넷 익스플로어를 지원하지 않아도 된다면 append()를 사용하는 것이 다방면으로 좋다! 2021. 10. 2.
[JS] insertadjacentelement & insertadjacenthtml insertadjacentelement insertAdjacentElement ()는 이미 Dom에있는 요소를 삽입하는 데 사용됩니다. 예를 들어 getElementById ()를 사용하여이 요소를 가져올 수 있다. 이미 만들어진 어떤 Element 형태를 가져오는 역할을 한다. 그래서 createElement로 가져온 것의 적용한다. https://www.w3schools.com/jsref/met_node_insertadjacentelement.asp HTML DOM insertAdjacentElement() Method HTML DOM insertAdjacentElement() Method Element Object Example Move a span element to after the header.. 2021. 9. 28.
[JS] innerHTML & innerText innerHTML와 innerText의 정확한 구분을 하기위해 정리한다. innerText는 문자 그대로 TEXT로만 받아 들인다. innerHTML은 문자 그대로 HTML로 받아 들인다. 그렇기 때문에 서식이 적용된 것을 알 수 있다. 2021. 9. 27.
[JS] 배열을 객체로 배열을 객체로 변환시켜야 하는 방법 const array = [ 'apple', 'banana', 'lemon' ] 1. Object.assign( { } , array ); 객체를 복사하거나, 객체끼리 합하는데 사용 되기도 한다. 배열을 객체로 변환시킨 원리도 { } 빈 객체에, array를 객체로 변환시켜 더했다 생각하면 된다. 객체에서 중복된 값이 있다면 덮어 씌운다. a : 1이 a : 6으로 변경된 것을 알 수 있다. 2. array.reduce( (target, key, index) => { target[index] = key ; return target }, { } ) reduce( ) 메서드는 워낙 중요한 메서드 이기 때문에 추후 따로 정리해야겠다. 3. { ...array } 스프레드 연.. 2021. 9. 10.
[JS] map()에 관하여 map()에 대해 더 자세히 알아야 겠다는 생각이 들어 정리하기! array.map(callbackFunction(currenValue, index, array), thisArg) callbackFunction , thisArg 두 개의 매개 변수, callbackFunction은 currenValue, index, array 세 개의 매개 변수. currentValue : 처리할 현재 요소 index Optional : 처리할 현재 요소의 인덱스 array Optional : map()을 호출한 배열 thisArg Optional : callback을 실행할 때 this로 사용되는 값. 제곱근 구하기 let nums = [4, 9, 16, 25]; let result = nums.map(Math.sqr.. 2021. 9. 6.
[JS] 숫자 야구 게임 [2] 숫자 야구 게임 [1]에 정답이 되는 4개의 임의 숫자를 만들었다. 이 후 각 4개의 숫자를 입력하여 같은 자리에 같은 숫자가 오면 STRIKE, 정답에 들어있는 숫자는 같지만 위치가 다르면 BALL을 반환하는 함수를 구현해봤다. 정답을 question / 시도한 답을 test로 받고, 각 숫자의 위치를 비교하기 위해 문자와 숫자를 배열로 변환시켜 진행했다. test의 경우 숫자로 진행하면 0이 처음왔을때 생략되는 경우를 막기위해 문자로 변환시켰다. String으로 문자로 변환 후 spilt('')를 사용하여 각 숫자별로 문자열로 반환 이 후 반목문을 돌려 각 자리수끼리 비교하여 같은면 strike의 위치로 넣어주고 ballFiter에 strike된 숫자를 test에서 제외 시켜줄 수 있도록 filter.. 2021. 8. 31.
[JS] 숫자 야구 게임 [1] 코딩 테스트 문제로 야구 숫자 게임 맞추기의 난이도가 나왔다는 얘기를 듣고 해 봐야겠다는 생각이 문득 들었다. 이렇게 하면 되겠다는 생각을 가지고 실행했지만 생각보다 난이도가 있어 정리하는 시간을 갖게 됐다. 처리하는 과정은 다음과 같이 생각했다. 정답으로 임의의 숫자를 생성한다 -> 정답과 추측 값의 각 자릿수를 비교하여 STRIKE의 개수를 구한다 -> STRIKE 된 숫자를 제외하고 남은 숫자들을 위치와 상관없이 비교하여 BALL의 개수를 구한다 -> 반복 후 4 STRIKE이면 게임 종료 임의의 4자리 숫자 정답을 만들어보자. console.log를 통해 임의의 값을 나오는 것을 확인했다. Number는 랜덤의 숫자가 정답으로 들어갈 때 중복되지 않게 하기 위해 마련한 장치이다. 입력되는 값이 0.. 2021. 8. 30.
[JS] 임의의 숫자 생성하기 Math.random() 0 ~ 1 사이의 무작위 수를 생성해준다. ex) 0.XXXXXXXXXXXXXXXXXX Math.floor() 숫자를 정수로 변환시켜 준다. 이 두개를 사용하여 Math.floor(Math.random()*10) 을 하게되면 0~9 까지의 임의의 정수를 얻을 수 있다. ( parseInt(Math.random()*10)와 같다 ) [JS] parseFloat() & parseInt() parseFloat(value) : 문자열을 실수로 변경 매개 변수 value : 변환할 값 반환 값 주어진 값에서 부석한 부동소수점 수. 분석할 수 없으면 NaN 숫자로 변경될 수 없는 문자가 들어가있으면 NaN을 반환한다. hyoe-it.tistory.com 0 이상 N 이하인 값을 뽑아내고 싶.. 2021. 8. 30.
[JS] parseFloat() & parseInt() parseFloat(value) : 문자열을 실수로 변경 매개 변수 value : 변환할 값 반환 값 주어진 값에서 부석한 부동소수점 수. 분석할 수 없으면 NaN 숫자로 변경될 수 없는 문자가 들어가있으면 NaN을 반환한다. parseInt(string, radix): 문자열을 정수로 변경 매개 변수 string : 분석할 값. 문자열이 아니면 문자열로 변환(ToString 사용). radix : (선택) 2 ~ 36 진수 2021. 8. 30.
[JS] substring() / substr() 비교 substring() / substr()은 문자열을 추출하는 메서드이다. 사용법이 비슷한 대신 두개의 차이가 헷갈려 정리해 보기로 했다. - str.substring(indexStart[, indexEnd]) - str.substr(start[, length]) 시작점은 같지만, 두번째 인자가 substring은 indexEnd / substr은 length로 차이가 있다. substring은 두번째 인자 값을 미포함, substr은 두번째 인자값을 포함한다. 음수만 입력 된 경우 substring은 기존 값 그대로 / substr은 뒤에서 시작하는 것을 확인 할 수 있다. start숫자만 입력 된 경우 두 수는 같은 값을 반환한다. 2021. 8. 17.
[JS] bubbling & capturing bubbling : 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작 capturing : bubbling의 역순으로 생각하면 된다. 문제점 부모, 자식 구조에서 둘다 click 할 때, 이벤트가 발생하도록 되어진 상황. 자식만 클릭하여 실행하고 싶지만 겹쳐있기 때문에 부모 이벤트도 발생. 해결방안 1. stopPropagation 뜻 그대로 전달을 멈춘다. stopImmediatePropagation과 같이 사용하면 막을 수 있지만 자연스러운 흐름을 강제로 종료하기 때문에 가급적 사용하지 않기. 2. event.target과 evnet.currentTa.. 2021. 7. 4.
[JS] filter 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 메소드 arr.filter(callback(element[, index[, array]]) [, thisArg]) 매개변수 callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. 다음 세가지 매개변수를 받을 수 있다. element : 처리할 현재 요소 index(Optional) : 처리할 현재 요소의 인덱스 array(Optional) : filter를 호출한 배열 thisArg(Optional) : callback을 실행할 때 this로 사용하는 값 function isBigEnough(value) { return value >= 10; } var filtered = [.. 2021. 6. 28.
[JS] sort 배열을 정렬할 때 사용하는 내장 함수 sort() arr.sort([compareFunction]) 기존의 배열 데이터를 변경시킨다. 문자정렬은 알파벳 순서대로, 숫자는 ASCII 코드 순서로 정렬하기 때문에 생각한 대로 정렬되지 않는다. 따라서 아래의 코드를 입력해야 한다. 1) 오름차순 numbers.sort(function(a, b) { return a - b; }); numbers.sort((a, b) => a - b); // 오름차순 2) 내림차순 numbers.sort(function(a, b){ return b - a; )}; numbers.sort((a, b) => b - a); // 내림차순 Object 객체를 가진 리스트도 정렬이 가능하다. const participants = [ { .. 2021. 6. 27.
[JS] for in / for of 그리고 map / reduce 객체를 순환하면서 가져올 때 사용하는 for in과 for of의 차이점이 궁금하여 찾아봤다. for( let item in obj ) / for ( let item of arr ) for in은 객체를 순환 : 객체의 key 값 또는 inde가 필요할 때 for of 는 배열을 순환 : 배열의 값을 가져올 때 for in let obj = { a: 1, b: 2, c: 3 }; for ( let item in obj ) { console.log(item); } // a b c for of let arr = ['a', 'b', 'c']; for ( let item of arr ) { console.log(item); } // a b c 사실 이 외 다른 차이가 있지만, 아직 나의 실력으로는 이해하기가 어.. 2021. 6. 26.
[JS] slice & splic Array.prototype.slice() slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 수정되지 않는다. slice(start, end) start : 추출 시작점 인덱스 undefined인 경우: 0부터 slice 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출 배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열을 반환 end : 추출 종료 기준 인덱스 (end는 제외) 지정하지 않을 경우: 배열의 끝까지 slice 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(2, -1)를 하면 세번째부터 끝에서 두번째 요소까지 추출 배열의 길이와 같거나 큰 수를.. 2021. 6. 25.
[JS] 2차열 배열 2차원 배열이란? 배열 안에 또 다른 배열이 존재하는 것. JS는 모든 것이 객체이기 때문에 배열의 각 요소를 다시 배열로 정의해 중첩하는 식으로 배열을 구현한다. Example let test = [['apple', 2], ['banana', 5], ['mango', 3], ['mandarine', 1]]; console.log(test[0][0]); // apple test[0] = ['apple', 2] -> ['apple', 2][0] = 'apple' test.push(['grape', 7]); console.table(test); // test = [['apple', 2], ['banana', 5], ['mango', 3], ['mandarine', 1], ['grape', 7]]; test... 2021. 6. 24.
[JS] D-day 만들기 D-day 만들기 function inIt() { const nowDate = new Date(); const dDay = new Date('2021-09-30 18:00'); const countDown = dDay - nowDate ; // 1000ms(1초) * 60(1분) * 60(1시간) * 24(1일) * 365(1년) const countDownday = Math.floor(countDown/(1000*60*60*24)); const countDownhour = Math.floor((countDown%(1000*60*60*24))/(1000*60*60)); const countDownMins = Math.floor((countDown%(1000*60*60))/(1000*60)); const .. 2021. 6. 9.
반응형

티스토리툴바