본문 바로가기

분류 전체보기122

[JavaScript] 객체배열에서 이벤트가 발생한 객체의 속성값 알아오는 예제 버튼을 누르면 색깔과 함께 색이름이 나오는 웹페이지이다. 위의 arrBtn 배열에서 색이름을 가져와서 색깔과 마찬가지로 화면에 띄워야 한다. 다양한 방법이 있겠지만 태그.click() 안에서 색깔을 화면에 띄우는 방식들을 살펴보겠다. 1. button 의 id 로 hangul 을 주고, .prop('id')로 id 값을 알아오는 방법 $(event.target).prop('id') 는 button 태그에서 준 id 값의 속성, 즉 ${item.hangul} 을 의미하는 것이다. 즉, id 값을 미리 주고 그 id 값을 가져오는 방법이다. 2. $(event.target).index() 를 이용하는 방법 정보가 들어있는 arrBtn 배열에서 arrBtn[클릭한 타겟의 인덱스].hangul 값이 곧 색이름이.. 2022. 2. 26.
[JavaScript] 동일한 id 속성을 여러개 준다고? (2탄) 아래와 같이 객체배열 arr_product 를 선언했다. 그리고 아래와같이 태그 안의 span 태그와 input 태그, 그리고 아래의 td 태그에 같은 id 값으로 위 배열의 productId 에 대한 value 를 주었다. 제품 각각에 대한 가격, 주문수량, 총 주문금액을 입력하는 태그에 led, camcorder 라는 공통된 id 값을 가지게 된 것이다. 이해에 도움이 되도록 표를 만들었다. led의 가격 led의 주문수량 led의 총주문금액 => 모두 id 가 led camcorder의 가격 camcorder의 주문수량 camcorder의 총주문금액 => 모두 id 가 camcorder 그래서 가격에 대한 정보, 주문수량에 대한 정보, 총 주문금액에 대한 정보를 가져올 때, id 를 포함한 태그 정.. 2022. 2. 23.
[TIL] 2022년 2월 4주차 코드는 깃헙에 올리므로 여기서는 공부한 내용을 요약하는 식으로 정리합니다. 2월 21일 저번주에도 강조했지만 라디오나 체크박스는 항상 name 이 똑같아야한다! 계속해서 배열명.forEach(function(elt, i, array) {}); 를 다양하게 활용해보고 있다. 상품의 주문수와 가격을 추가상품의 가격과 함께 계산하는 계산서를 만들었는데 어려웠다. 기억해야할 것 1. 서로 다른 태그에 배열의 어떤 key 에 대한 value 값으로서 같은 id 를 주면 ( 원래 id 값은 유일해야 하지만 이렇게 쓰는게 좋을 때가 있다. ) 다른 태그의 같은 id 로 원하는 값을 금방 알아올 수 있다. 글로 작성하면서 다시 이해했다. 2022.02.23 - [분류 전체보기] - [JavaScript] 동일한 id .. 2022. 2. 21.
[JavaScript] for 반복문에서 in 으로 key 가져오는 예제! 어렵거나 한 내용은 아닌데 for 문에서 in 을 이렇게 쓰는구나.. 하고 깨달아서 작성하는 글이다. 다음과 같이 객체배열을 만들었다고 가정하자. 눈여겨 봐야 할 것은 객체배열 안에 answers 객체가 또 들어있는 형태라는 것이다. 이때, answers 의 key 에 대한 값들을 가져오고자 한다면 다음과 같이 할 수 있다. answers 라는 객체의 속성을 가져오는 거라서 answers.1, answers.2 ... 이렇게 가져온다고 예상할 수 있지만 객체명.속성명 에서 속성명에는 변수가 사용될 수 없다. 반면, 객체명[속성명] 은 속성명에 변수가 사용될 수 있다. 그래서 answers[속성명] 의 형태로 answers 의 key 에 해당하는 값들을 불러온 것이다. 2022. 2. 20.
[JavaScript_에러잡기] RangeError: Maximum call stack size exceeded 원인 알아보니 이 오류의 원인은 다양했지만 나는 원인을 잘 모르겠는? 무한재귀에 빠진 것 같았다. 함수의 재귀호출로 인해 스택 영역의 사이즈가 초과했다는 것이다. 해결 88 라인은 func_currentDate() 를 선언한 라인이고, 위에가 문제의 170 라인인데 결국 setTimeout(func_currentDate_loop(), 1000); 에서 괄호를,,, 무려 괄호를....!! 제거하지 않아서 생긴 문제였다. 함수 호출부분이랑 안에 로직 보면서 고민했던 것이 무색하게 괄호를 제거하니 에러가 사라졌다. 이런 경우도 있으니 나같은 누군가에게 도움이 되면 좋겠다... 2022. 2. 20.
[JavaScript] 동일한 id 속성을 여러개 준다고? (1탄) 그렇다. 그럴 때가 있다. 노드.parentNode.parentNode - 부모노드 의 부모노드 노드.parentNode - 부모노드 노드.childNodes - 모든자식노드들 노드.firstChild - 첫째자식노드 노드.lastChild - 막내자식노드 노드.nextSibling - 나의바로밑동생노드(형제노드) 노드.previousSibling - 나의바로위형노드(형제노드) 위의 내용을 이용하면 어떤 태그를 기준으로 약간의 조정만 더한다면 주변의 다른 태그를 잡아올 수 있다. 조심할 사항은 태그사이에 띄어쓰기를 하거나 태그를 줄 바꿈을 해버리면 띄어쓰기나 줄바꿈을 텍스트 노드(text node)로 취급해버리므로 원하는 노드의 값을 가지고 오지 않고 undefined 가 나온다. 이렇게 undefine.. 2022. 2. 18.

티스토리툴바