네이처리 노트

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 속성형태 (setAttribute, getAttribute) Array.from([전체배열값]).forEach((각배열값)=>{ 각배열값.addEventListener("click", ()=>{ 각배열값.setAttribute("속성", "값"); // set 각배열값.getAttribute("속성"); // get } } // Style 적용 element.setAttribute("style", "키:값; 키:값"); element.getAttribute("style"); // checked 확인 element.setAttribute("checked", boolean ); element.getAttribute("checked");..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 추가 let newDIV = document.createElement("div"); newDIV.innerHTML = "새로 생성된 DIV입니다."; newDIV.setAttribute("id","myDiv"); newDIV.style.backgroundColor="yellow"; // 결과 새로 생성된 DIV입니다. let newDIV = document.createElement("div"); newDIV.innerHTML = ' 새로 생성된 DIV입니다. '; // 결과 새로 생성된 DIV입니다. 추가할 위치를 지정할 수 있음 El.insertAdjacentHTML("option", "추가할내용"); //El.innerHTML ..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🌘 접근 노드는 text까지 구분한다. element.parentNode // 부모 노드 element.childNodes // 자식 노드 리스트 element.firstChild // 첫 번째 자식 노드 element.lastChild // 마지막 자식 노드 element.nextSibling // 다음 형제 노드 element.previousSibling // 이전 형제 노드 element.children[번호] // 자식 요소 element.firstElementChild // 첫번째 자식 요소 element.previousElementSibling // 이전 요소 element.nextElementSibling // 다음 요..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 0 1 2 3 4 // javascript console.log(document.querySelector("div")); console.log(document.querySelector("div").firstChild); console.log(document.querySelector("div").firstElementChild);

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 마침표 앞에 물음표를 사용하면 유효한 값이 없을 경우에는 undefined를 반환 값이 있을 때에만 마침표 뒤를 실행하기 때문에 오류를 방지할 수 있다. const $ele = document.querySelector(".ele"); // 지금 $ele가 있어? 있으면 margin top 적용해줘. 없음 말고. 에러는 사절임. $ele?.getElementsByClassName.marginTop = "2em"; Reference 1) https://ko.javascript.info/optional-chaining 옵셔널 체이닝 '?.' ko.javascript.info

아래의 링크를 확인해주세요 Reference 1) window open [Javascript] window.open과 window.opener window.open을 이용하여 새로운 창을 열 수 있으며 window.opener를 이용하여 팝업창에서 자신을 오픈한 부... blog.naver.com 2) window width & height [자바스크립트] 화면, 브라우저, 클라이언트의 높이, 너비(폭) 불러오는 속성 동적인 화면을 구성하기 위해서는 브라우저의 크기와 현재값을 알아둘 필요가 있습니다. 현재의 디바이스가 가지는 최대 width 너비의 크기등을 말이죠. webisfree.com

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 document.addEventListener("DOMContentLoaded", ()=>{ // HTML이 완전이 로드 된 후에 실행됨 } ▲ 개인적으로 추천하는 방식 (function(){ // 이렇게도 사용 가능 })();

아래의 링크를 확인해주세요 Reference 1) https://itmining.tistory.com/72 자바스크립트 코딩 컨벤션(스타일 가이드) 이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 이 글은 필자가 속해 있는 팀의 코딩 컨벤션(스타일 가이드)를 맞추기 위해 '더글라스 크락포드의 자바스크립트 코드 컨벤션'을 참고하여 itmining.tistory.com 2) https://pureainu.tistory.com/259 [javascript] 자바스크립트 패턴 - 주석 일반적으로 함수의 매개변수와 반환 값에 대해서는 문서화할 필요가 있다. 주석은 미래에 코드를 읽을 독자에게 주는 힌트이다. 즉, 주석과 함수명 또는 프로퍼티명만 읽고도 코드가 어떤 일을 pureainu.tistory..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 email 형식 확인하기 let reg = /^(([^()\\[\\]\\\\.,;:\\s@"]+(\\.[^()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/; console.log(reg.test(email)) // true or false ▲여러가지 테스트 해 본 결과 제일 좋은 코드 숫자/문자 추출하기 "문자012".replace(/[^0-9]/g, ''); // 012 "문자012".replace(/[0-9]/g, ''); // 문자 Referen..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 new Date() let myDate = new Date(); console.log(myDate); //생성순간의 요일 월 일 년도 시간 시간대 출력 let myDate = new Date(1000); //new Date(숫자); //출력: 1970년 1월 1일 00:00:00 UTC + 1000밀리초(1초) let myDate = new Date('2020-09-01'); //new Date('문자'); //new Date('YYYY-MM-DD'); //시간은 자동으로 자정을 기준으로 함 let myDate = new Date('2020-09-01T18:01:10'); //new Date('YYYY-MM-DDThh:mm:ss')..