fullstack-study

얕은 복사와 깊은 복사 얕은 복사(Shallow Copy) : 참조형의 1차원 데이터만 복사 깊은 복사(Deep Copy) : 참조형의 모든 차원 데이터를 복사 얕은 복사 : 주소값까지만 복사 깊은 복사 : 실제 데이터까지 복사 원시타입 : Call by value number , string , boolean , undefined , null , symbol 참조타입 : Call by reference 배열, 객체 Call by value(값에 의한 호출, 값의 복사) Call by reference(참조에 의한 호출, 주소의 복사) 예시 1) const arr = [ 10,20,30 ] const arrCopy = arr const 키워드로 선언된 arr( 안에 담기 주소값 )는 변환되지 않습니다. ..

# Object와 JSON차이점, 스프레드연산자, 나머지연산자, 옵셔널 체이닝   Object와 JSON의 차이점 JavaScript Object : JS Object JSON(JavaScript Object Notation) : JSON Object   JS Object : 객체의 내용을 기술하기 위한 텍스트 파일 JSON Object : JS Engine 메모리 안에 있는 데이터 구조 https://fullstack-eun.tistory.com/46 [ javascript ] 06. 원시타입, 참조타입, 객체원시(Primitive) 타입, 참조(Reference) 타입 자바스크립은 크게 원시타입과 참조타입 2가지로 나눕니다. 원시타입은 number, bigint, string, boolean, ..

# 기본함수, 익명함수, 화살표함수  기본 함수 복습하고 이어서 보세요 https://fullstack-eun.tistory.com/45 [ javascript ] 05. 템플릿 리터널 , 함수, 내장함수# 템플릿 리터널 백틱(`)을 사용 let test='hi'; let output = `철수 ${hi}` console.log( output ) 함수 생성방법 파라미터정의하기 반환값 익명함수 즉시실행함수 함수 함수는 하나의 단위로 실행할 수 있도록fullstack-eun.tistory.com  예시)1)function make(numbers) { let results = []; for (const number of numbers) { if (number % 2 != 0) { ..

window, 스크롤, 마우스 좌표, getBoundingClientRect  # windowwindow.open(url, windowName, [windowFeatures]);window.open(url, 창이름,옵션);옵션의 이름설명width창 너비height창 높이location주소 표시줄 표시 여부 (yes 또는 no)scrollbars스크롤 막대 표시 여부resizable창 크기의 변경 기능 여부toolbar도구 모음 표시 여부status상태 표시줄 표시 여부menubar메뉴 막대 표시 여부 let w = window.open( 'http://www.naver.com', 'naver', 'height=600,width=600');setTimeout(() => { w.clos..

createElement , append, prepend , video , table 1. 요소 생성 : createElement2. appendChild3. append , prepend4. video5. 테이블 추가,삭제  설명mdnappendChild()상위 노드의 하위 노드 목록 끝에 노드를 추가바로가기append()상위 노드의 하위 노드 목록 끝에 노드를 추가바로가기prepend()상위 노드의 하위 노드 목록 앞에 노드를 추가바로가기createElement ()새로운 노드 생성바로가기  # appendChild , createElementcreateElement () : document.createElement() 새 태그를 반환appendChild() : 지정된 상위 노드의 하위 노드 목록 끝..

클래스 조작 1. className 2. classList 3. getComputedStyle 4. setProperty 명령어 설명 mdn Element.className 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정 바로가기 Element.classList 클래스 추가 삭제 등 바로가기 getComputedStyle CSS 속성값 가져오기 바로가기 setProperty CSS 속성에 대한 새 값을 설정 바로가기 # className 속성의 값을 가져오거나 설정 형식 element.className element.className += newClassName; element.className = "class1 class2"; 예) Homepage Services About Contact let m..

1. this 2. target과 currentTarget의 차이점 3. dataset 4. animate 5. transition # this : 이벤트 한 자기 자신 결과 : click 자신의 값 -> 짜장면 결과 : 짜장면 예) let btn = document.querySelector('#btn'); btn.onclick = function() { //this -> 이벤트한 대상 //클릭한 자기자신 alert(this.id); alert(this.value); }; 예) 메세지 xxx const message = document.querySelector('#message'); const result = document.querySelector('#result'); message.addEventLi..

# 이벤트흐름 : 버블링과 캡처링 자바스크립트 이벤트 핸들링에서 "버블링(Bubbling)"과 "캡처링(Capturing)"은 이벤트가 DOM 트리를 통해 전파되는 방식을 설명합니다. 이 두 용어는 이벤트의 전파 방향을 설명하는데 사용됩니다.  1. 캡처링 (Capturing)캡처링은 이벤트가 최상위 요소에서 시작하여 하위 요소로 이동하는 단계입니다. 이벤트가 트리의 루트에서 시작하여 이벤트 대상 요소까지 이동합니다.2. 버블링 (Bubbling)버블링은 이벤트가 대상 요소에서 시작하여 최상위 요소로 이동하는 단계입니다. 이벤트가 발생한 요소부터 시작하여 부모 요소, 그 부모의 부모 요소로 계속해서 이동합니다.이벤트 전파 단계캡처링 단계: 이벤트는 최상위 요소에서 시작하여 대상 요소로 향합니다. 대상 요..

# 자바스크립트 이벤트 Mouse Event Event 설명 click 마우스 버튼을 클릭했을 때 dbclick 마우스 버튼을 더블 클릭했을 때 mousedown 마우스 버튼을 누르고 있을 때 mouseup 누르고 있던 마우스 버튼을 뗄 때 mousemove 마우스를 움직일 때 mouseover 마우스를 요소 위로 움직였을 때 mouseout 마우스를 요소 밖으로 움직였을 때 mouseenter 해당 요소에 마우스 커서를 올려다놓았을때 mouseleave 해당 요소에 마우스 커서를 빼낼때 Keyboard Event Event 설명 keydown 키를 누르고 있을 때 keyup 누르고 있던 키를 뗄 때 keypress 키를 누르고 뗏을 때 keyCode 키 코드값 , mdn Focus Event Event..

1. document.querySelector("선택자")2. document.querySelectorAll("선택 자명")3. innerHTML , innerText, textContent4. 속성5. DOM 탐색6. transitionend  설mdnquerySelector("선택자")해당 선택자를 만족하는 요소하나반환바로가기querySelectorAll("선택자명")해당 선택자를 만족하는 모든요소반환바로가기선택자 바로가기innerHTML 바로가기innerText 바로가기textContent 바로가기 # document.querySelector("선택자")let element = parentNode.querySelector(selector); # document.querySelectorAll("선택 ..