코딩기록하는 블로그

Document.querySelector()는 : 요소를 찾는 것 특정 name 이나 id 를 제한하지않고 css선택자를 사용하여 요소를 찾습니다. -보통 자바스크립트 맨상단에 쓴다 (#sections) -> #은 ID 를 가진 요소를 찾는 것 (.sections) -> .은 class명을 가진 요소를 찾는 것 ('li') ->일반 태그 찾는거 한개의 요소만 찾을 수 있으며, 동일한 클래스명을 가진 객체가 있을 경우 html 문서 내의 첫번째를 나타내는 요소를 반환한다 아래 예제는 문서에서 "myclass"라는 클래스를 사용하는 첫 번째 요소를 반환합니다. var el = document.querySelector(".myclass"); 좀 더 복잡한 선택자 아래 예제처럼 정말 강력한 선택자도 사용할 수 ..

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는게 없으면 null을 반환합니다. 주의할 점 선택자에 해당하는 첫번째 요소만 선택한다 고정된?..자주쓰는거는 맨처음에 써주는게좋다 document.querySelector('li'); 는 태그를 의미한다. document.querySelector('.activiteC); 는 .이 들어가면 classname을 의미한다. document.querySelector('#activiteI); 는 #이 들어가면 ID를 의미한다. 문법 document.querySelector( 'selector' ) 예를 들어 document.querySelector( '.input_butt..

input 박스를 클릭 했을떄 나오는 테두리 색상 변경하기 input:focus {outline:2px solid #d50000;} input 박스를 클릭 했을떄 나오는 테두리 색상 없애기 input:focus {outline:none;}

자바스크립트는 html 태그 어디든 넣어도 동작하지만 위쪽에 놓을 경우 가벼운 자바스크립트 코드들이 있는 경우 잘 작동하지만 무거운 자바스크립트 코드들과 내용이 많이 있는 경우 그 코드를 불러오고 실행 하느라 아래있는 html 코드들이 로딩되지 못하게 될 것이고 브라우저가 렌더링 되는 것에 방해가 될 수 있다 무거운 자바스크립트 라도 body 하단에 놓게 되면 html과 css가 모두 동작한 다음에 불러오기 때문에 하단에 놓는게 좋다 그리고 문서의 DOM(document object model) 구조가 완료된 시점에서 실행되기 때문에 따로 추가 설정을 할 필요가 없기때문이다.

1번 18세 이상일 경우 true 그 외 false 반환하기 2번문제 3번문제 ㅡㅡㅡㅡ 4번문제

for...in문 해당 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성들(프로퍼티)에 대해 반복한다 객체의 Key값에 접근 가능 Value값에는 직접 접근 불가 모든 객체에 사용 가능하다 (열거할 수 있는 프로퍼티란 내부적으로 enumerable(열거자) 플래그가 true로 설정된 프로퍼티를 의미한다) (keys는 열거 가능한 속성, valueOf는 열거 불가능한 속성) 참조> https://itboxs.tistory.com/353

이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 버튼 클릭, 엔터 누르기 등 같은 것을 할 때 발생하는 것을 의미한다 UI 이벤트 - 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용을 할 때 발생 키보드이벤트 - 사용자가 키보드를 이용할 때 발생 마우스이벤트 - 사용자가 마우스나 터치화면을 사용할 때 발생 포커스이벤트 - 포커스이벤트 폼이벤트 - 폼이벤트 이벤트 리스너란? 해당 이벤트에 대해 대기중인 것. 항상 리스닝 중. 해당 이벤트가 발생했을 때 등록했던 이벤트 리스너가 실행된다. window가 load될 때 function 부분이 실행되는 대표적인 이벤트 리스너 코드 해당 이벤트가 발생했을 때 등록했던 이벤트 리스너가 실행된다 이벤트 리스너는 항상 on +..

구현하고 싶은 기능 1. 입력창에 할 일을 작성하고 + 버튼을 누르면 아래 회색 리스트에 표시되게 하기 2. 할일 목록 글씨나 그 주변을 클릭하면 체크 표시 뜨고 줄 그어지고 회색바 진하게 변경시키기 3. 할일 목록 옆 x를 누르면 할일 목록 삭제되기

JS TYPES Primitive Type(원시 타입) Reference Type(참조 타입) Number Null 🔑 Object 📂 Array String Undefined Function Boolean Symbol(ES6) Biglnt(ES6) Primitive Type(원시 타입) 기본형 데이터는 값을 그대로 할당한다. 메모리상에 고정된 크기로 저장되며 원시 데이터 값 자체를 보관하므로, 불변적이다. 기본적으로 같은 데이터는 하나의 메모리를 사용한다.(재사용) 원시자료형이 할당될 때에는 변수에 값(Value) 자체가 담긴다 Reference Type(참조 타입) 참조 타입은 변수에 할당할때 값이 아닌 데이터의 주소(reference)를 저장한다. Primitive Type(원시 타입) - 객체가 ..

📌array(배열)을 사용하는 이유 여러개의 데이터를 하나로 묶어서 쓸 수 있다 코드를 짧고 간단하게 짤 수 있다 연관성 있는 데이터를 변수에 저장하므로 데이터를 찾는데 용이하다 let color1 = 'pink' let color2 = 'yellow' let color3 = 'green' let color4 = 'mint' . . . color에 대한 데이터를 각각 변수로 주게되다고 하면 이렇게 많아지게 되는데 배열을 사용하면 color에 하나로 묶어서 만들 수 있다. const color = [ ' pink ' , ' yellow ' , ' green ' , ' mint ' ..........] 여러가지의 데이터를 하나의 그룹으로 묶을때 사용한다.