JavaScript (46) 썸네일형 리스트형 ele.children 속성 HTML Collection 자료형 forEach 반복문 돌리기 - HTML 요소의 children 속성과 데이터 타입 - const ele = document.querySelector('#target'); const chld = ele.children; HTML 엘리먼트의 children 속성은 자료형이 HTML Collection 이다. list처럼 보이기는 하지만, 엄밀히 말해서 list는 아니다. forEach 반복문은 인덱스를 따로 설정할 필요 없이 배열 안에 있는 요소들로 반복문을 돌릴 수 있는 편한 함수다. 하지만 forEach는 배열에서 쓸 수 있는 함수이기 때문에 HTML Collection 은 forEach를 쓸 수 없다. - HTML Collection 반복문 돌리는 법 - 그럼 HTML Collection 데이터는 반복물을 돌릴 수 없을까? HT.. [JavaScript] 동적으로 추가한 <script>가 실행되지 않을 때 - 나중에 추가하는 그럼에도 실행되지 않았다. 아니, 요소가 잘 로드되어 있는데, 실행은 되지 않는다니...? - ele.append() 함수를 이용했을 때 ( 실행 X ) - 어떤 요소를 추가할 때, 여러 가지 방법이 있다. 하지만 그 기능이나 의도가 조금씩 다르다. 요소에다가 append() 함수를 이용해서 - ele.innerHTML 속성을 이용해서 - ele.appendChild 함수를 이용해서 / 정리 ele.append() > text 상태 그대로 추가 ele.innerHTML > 요소로써 추가되지만 실행은 안 됨 ele.appendChild() > 요소로써 추가되고 실행도 됨 - 220712 [JavaScript] 팝업창 다른 페이지에서 불러올 때 script 주의할 점 ~~~~~~ 버튼을 클릭하면 팝업창을 하나 불러온다. 팝업창 안에 script 태그를 심어 놓았다. 그 팝업창 안에서 쓸 이벤트나 함수들은 모두 그 script 안에 넣어 두었다. 팝업창을 불러올 때 그 팝업창이 작동하는 데에 필요한 기능은 다같이 묶어서 불러올 수 있도록 해 두었다. 그런데 리로드를 아무리 해도 자바스크립트가 실행되지 않았다. script 태그가 작동하지 않는 원인이 무엇일까? 어찌된 영문인지 하나씩 실험해 보았다. 1. 자바스크립트 안에 치명적인 문법 오류가 있어서 애초에 로드조차 되지 않는 경우 > JavaScript는 문법에 굉장히 너그러운 언어다. Java나 C를 써 본 사람은 안다. 데이터 타입이나 null 체크, 변수 선언에 얼마나 너그러운 언어인지. 그럼에도 치명적인 문법 .. [JavaScript] Uncaught ReferenceError: fn is not defined at HTML Element onclick 원인 이유과 해결 방법 Uncaught ReferenceError: FuncName is not defined at HTML Element onclick 에러 메세지를 해석하자면 이렇다 "A 함수를 실행하라고 했는데 A 함수가 어딨는지 모르겠다." 간단히 말하자면 함수를 못 찾고 있다는 뜻이다. 함수를 찾지 못하는 이유는 여러 가지가 있을 수 있다. 에러가 나는 원인을 하나씩 알아보고 디버깅 방법을 알아보자. 1. 함수 이름에 오타가 있는 경우 아마 이 경우가 가장 흔하고 많을 것 같다. 개발자의 원수, 바로 오-탈자다. 예를 들어 내가 실행하라고 했던 함수는 ABC()인데 내가 만들어 놓은 함수는 ABc()인 경우다. > 함수 이름을 x() / z() 처럼 간단한 이름으로 바꿔보자. > 아니면 함수를 정의하는 곳과 부르는 곳.. [JavaScript] 팝업창에서 닫기 버튼이 작동하지 않을 때 제목을 클릭하면 팝업이 하나 뜬다. 팝업 안에는 'X'표 버튼이 있다. 해당 팝업을 닫는 버튼이다. X 팝업 안에는 a 태그도 있다. 이 a 태그를 클릭하면 또 다른 팝업이 뜬다. 팝업 위에 팝업이 뜨는 구조다. 이상한 점이 있다. 처음 팝업을 열고 나서 바로 닫기 버튼을 클릭하면 이때는 팝업이 잘 닫힌다. 그런데 첫 번째 팝업을 열고 두 번째 팝업까지 띄운 후에 팝업을 모두 닫으려고 하면 작동이 잘 안 됐다. 나중에 열었던 팝업은 닫아지지만 처음에 열었던 팝업은 닫아지질 않았다. 닫기 버튼이 제대로 작동하지 않았다. X 함수가 작동하는지 확인하려고 alert를 띄워 봤다. 첫 번째 팝업만 열고 닫으면 'hello'와 'world'가 모두 떴다. 그런데 두 번째 팝업까지 열고 나서 닫으면 'world'만.. [JavaScript] onclick="window['funcName']" 의미와 뜻, 원리 간혹 이렇게 생긴 이벤트 핸들러를 본다. run 내가 알던 보통 모양새는 이렇다. run 이 둘은 차이가 뭘까? window['displayFruits'](); 이건 뭐하자는 뜻일까? 스크립트 태그 안에 아래와 같은 배열을 각각 변수 안에 넣어두자. 크롬을 실행하고 개발자 도구를 열어서 콘솔에 window를 출력해 보자. 그 안을 펼쳐 보면 window가 들고 있는 여러 가지 데이터들을 들여다볼 수 있다. 자세히 찾아 보면 window 가 'fruitList' 는 들고 있고, 'colorList' 는 들고 있지 않다는 걸 알 수 있다. 그럼 이 fruitList 에 접하는 방법은 window 안에서 'fruitList'라는 key로 value 를 받아오면 될 거라고 짐작할 수 있다. window['fru.. JavaScript - html 요소 중 특정 class 가 포함돼 있는지 확인하는 함수 $(document).on('click', 'a.btnType', function(){}); document.addEventListener('click', (e) => { console.log("DOMLoaded click event"); console.log(e); if (e.target.parentNode.tagName == 'a' && e.target.parentNode.classList.contains('btnType')) { e.preventDefault(); } }); html 요소가 특정 class 를 포함하는지 확인하는 방법 어떤 html 요소의 class가 특정 class를 포함하고 있는지 확인하는 방법이 있다. ele.classList 에 접근하면 가지고 있는 class 이름들을 lis.. 자바스크립트 천 단위 콤마 찍기 및 제거하기 - 숫자 자료형 천 단위 콤마 찍기 - 장바구니에 있던 상품들을 구매하는 화면을 만들고 있었다. 서버로부터 item list를 받아온다. 그리고 item 하나씩 row를 생성한다. 참고로 여기서 createNewCell()은 내장 함수가 아니다. input 태그 요소를 되돌려주도록 직접 만든 함수다. function addRowsToCartTable(list) { //기존에 있던 row들 지우기 const tbody = document.querySelector('tbody#orderList'); while (tbody.firstChild) { tbody.removeChild(tbody.firstChild); } //서버로부터 받아온 리스트 안에서 row를 하나씩 꺼내오기 list.forEach((item.. 이전 1 2 3 4 5 6 다음
