728x90 반응형 전체 글220 [자바스크립트] innerText와 innerHTML 차이점 자바스크립트에서 뭔가 값을 집어넣을때 제일 많이 사용해서 값을 넣을때 쓰는 속성이라 생각했는데 값을 불러오는 속성이었다😱 element.innerText; 이 속성은 element 안의 text 값들만을 가져옴 element.innerHTML; innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옴 element.innerText = "A"; element.innerText에 html을 포함한 문자열을 입력하면, html코드가 문자열 그대로 element안에 포함 → A 이대로 출력 element.innerHTML = "A"; 위와 같이 element.innerHTML 속성에 html코드를 입력하면, html element가 element안에 포함 위 예제에서 'i.. 2021. 2. 2. [자바스크립트] Event.path / Event.composedPath Event.path - 이벤트가 발생된 노드에서 최상위 노드(Window) 까지의 상하관계를 배열로 표현해 놓은 것 예를 들면 아래와같은 구조 div 에서 이벤트를 발생시켜 path 출력시 ['div', 'body', 'html',.... ] 형태로 출력됨 ... const span1 = event.path[1].childNodes[0].innerHTML; - 이벤트 발생한 곳의 부모 노드(0 번이 자기자신.. 갈수록 부모노드)가 가진 첫번째 요소의 내용을 가져 온다는 내용 Event.composedPath - path 와 composedPath 동일한 내용 - composedPath를 권장 - 브라우저 마다 호환성이 다르기 때문에 호환되지 않는 브라우저에서 사용할 때는 폴리필을 참고 developer... 2021. 1. 29. [자바스크립트] ToDoList 만들기 기본 Ver. - 로직 input에 text를 입력하고 엔터를 치면 할일목록 리스트가 생성되고 ❌를 누르면 삭제되는 시스템 저장된 리스트는 새로고침해도 남아있음 ToDoList 만들기 응용 Ver. 에 더 자세한 설명을 해서 중복되는 설명은 거의 생략함 이해가 안되는 경우 응용편 참고하세요↓↓↓↓ coding-with-jina.tistory.com/130 [자바스크립트] ToDoList 만들기 응용 Ver. - 로직 input 빈칸에 할일을 적으면 Pending에 리스트로 저장되었다가 ⭕를 누르면 Finished로 넘어가고 ❌를 누르면 삭제됨 그리고 Finished 리스트에서 🔁를 누르면 다시 Pending으로 넘어가는 시스템 1) HTML - coding-with-jina.tistory.com 1) HTML - 화면구성 2).. 2021. 1. 29. [자바스크립트] ToDoList 만들기 응용 Ver. - 로직 input 빈칸에 할일을 적으면 Pending에 리스트로 저장되었다가 ⭕를 누르면 Finished로 넘어가고 ❌를 누르면 삭제됨 그리고 Finished 리스트에서 🔁를 누르면 다시 Pending으로 넘어가는 시스템 1) HTML - 화면구성 Pending Finished 2) CSS는 일단 생략 3) JavaScript - HTML과 연결 const form = document.querySelector(".input-form"); const formInput = form.querySelector("input"); const pendingList = document.querySelector(".pending-ul"); const finishedList = document.querySelector(".fin.. 2021. 1. 29. [자바스크립트] Event.target Event.target - 자바스크립트의 이벤트 중 클릭한 요소를 가져오는 방법으로 event 객체의 target 사용 - 예를 들면 form 태그 디폴트값에 의해 form태그 안에 있는 input에서 엔터를 누르면 자동으로 값이 어딘가로 보내져버리는 데 우리는 이 값을 다른 곳에 저장해 사용해야하기 때문에 디폴트 값인 이벤트를 멈추게 하는 메서드 - 이벤트가 일어난 곳을 알고 싶으면 event.target을 사용하면 됨. target은 클릭이 일어난 element 자체를 반환하게 되고, 우리는 이 안에 적혀있는 텍스트를 가져옴으로써 현재 어떤 버튼에서 사용자가 클릭을 눌렀는지 파악할 수 있는 것 사용예시) coding-with-jina.tistory.com/123 2021. 1. 29. [에러] Uncaught ReferenceError: Cannot access 'pending' before initialization Uncaught ReferenceError: Cannot access 'pending' before initialization 원인 : 코드에서 변수선언을 함수보다 밑에다 둠 해결 : 변수선언을 위로 올렸더니 해결 2021. 1. 29. 이전 1 ··· 17 18 19 20 21 22 23 ··· 37 다음 728x90 반응형
