반응형 Study/JavaScript5 JavaScript 미니 프로젝트 Todo List 배운점 localStorage 사용하여 브라우저를 껐다가 다시 접속해도 기존에 입력된 항목이 유지될 수 있도록 설정 localStorage 는 key - value 형식으로 저장된다. 입력값을 JSON 객체로 생성하고 JSON.stringify() 이용하여 localStorage 저장한다. 저장값 불러올 때는 JSON.parse() 으로 객체화 한다. 참고 사이트 https://ko.javascript.info/localstorage localStorage와 sessionStorage ko.javascript.info Todo list + 2023. 9. 12. JavaScript 미니 프로젝트 _ 숫자 맞추기 게임 배운점 상수 const 객체 선언 시 객체의 주소가 저장되기 때문에 객체 내부의 속성을 변경하는 것은 가능하다. js 코드를 분리해서 DOM을 사용하려면 defer 키워드를 붙여줘야 한다. innerHTML을 이용해 start 버튼을 생성하고 const 객체 값을 변경했더니 화면에서 적용이 안되는 문제를 발견했다. 그 이유는 아래와 같다. ‘innerHTML+=’ 사용 시 주의점 기존 내용 삭제 기존 내용과 새로운 내용을 합친 새로운 내용을 씀 즉, innerHTML+=는 기존 코드를 덮어 씌우기 때문에 기존에 연결해 놓은 객체들이 업데이트가 안되는 문제가 발생하였던 것이다. 문제해결 → button을 innerHTML 을 이용해 생성하지 않고, createElement 를 이용해 객체로 추가하였다. H.. 2023. 9. 11. DOM 노드와 주요 프로퍼티 DOM 노드 클래스 DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원한다. 계층 구조 최상위에는 EventTarget 이 있다. 속성과 프로퍼티 속성 HTML 에서 쓰인다. HTML 에서 태그는 여러개의 속성을 가질 수 있다. 프로퍼티 DOM 객체 안에서 쓰인다. 브라우저는 HTML을 파싱해서 DOM 객체를 만든다. HTML 표준 속성을 인식하고 이를 DOM 프로퍼티로 만든다. 표준이 아닌 속성은 메서드를 이용해 접근이 가능하다. 표준이 아닌 속성에는 사용자가 지정한 속성이 있다. 프로퍼티 속성 타입 모든 타입 가능, 각 표준 프로퍼티의 타입은 명세서에 설명되어 있음 문자열 이름 대·소문자 구분 대·소문자 구분하지 않음 속성과 함께 쓰이는 메서드: elem.hasAttribute(name) – 속성 .. 2023. 8. 30. 문서 객체 모델 DOM DOM (Document Object Model) 이란? XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다. 웹 페이지 내의 모든 콘텐츠를 객체로 나타내 준다. document 객체를 이용해 페이지 내 무엇이든 접근 가능하다. DOM 트리 HTML/XML 문서는 브라우저 안에서 DOM트리로 표현된다. 아래 document.body 는 태그를 객체로 나타낸 것이다. // 배경을 붉은색으로 변경하기 document.body.style.background = "red"; // 1초 후 원상태로 복구하기 setTimeout(() => document.body.style.background = "", 1000); DOM 다루기 개발자 도구를 사용하면 DOM을.. 2023. 8. 29. 이전 1 2 다음 반응형
