fullstack-study

스코프  , 호이스팅( hoisting)  , TDZ  스코프( Scope )호이스팅( hoisting )TDZ(Temporal Dead Zone)  1.  스코프(Scope)   스코프(Scope)는 변수 및 함수의 유효 범위를 나타냅니다. 스코프는 코드에서 변수 및 함수에 접근할 수 있는 범위를 결정 하고 변수 및 함수의 충돌을 방지하고 코드의 가독성과 유지 보수성을 향상합니다. 주요한 스코프 유형에는 전역 스코프(Global Scope)와 지역 스코프(Local Scope)가 있습니다. 전역 스코프(Global Scope):전역 스코프는 코드의 어느 곳에서든 접근할 수 있는 스코프입니다.전역 스코프에서 선언된 변수 및 함수는 스크립트의 어디서든 사용할 수 있습니다.전역 스코프에서 선언된 변수는 전역..

Browser Object Model (BOM) JavaScript의 Browser Object Model (BOM)은 웹 브라우저와의 상호작용을 담당하는 객체와 메서드를 제공합니다. 이것은 Document Object Model (DOM)과는 다르며, DOM이 HTML 문서의 구조와 콘텐츠를 다룬다면, BOM은 브라우저와의 상호작용을 다룹니다. window: 전역 window 객체는 브라우저 창을 나타내며, BOM의 루트 역할을 합니다. 브라우저 창을 조작하고, 탐색을 제어하며, 대화상자를 관리하기 위한 속성과 메서드를 제공합니다. navigator: navigator 객체는 브라우저에 관한 정보를 제공합니다. 브라우저의 이름, 버전, 플랫폼 등을 확인하는 데 사용되며, 주로 브라우저의 기능과 기능성을..

form 요소웹 개발에서 사용되는 다양한 HTML 폼 요소들이 있습니다. 이러한 요소들은 사용자로부터 정보를 입력하거나 선택할 수 있도록 합니다. 주요 폼 요소들은 다음과 같습니다텍스트 입력 필드 (Text Input Fields):: 한 줄짜리 텍스트를 입력할 수 있는 상자를 생성합니다. : 비밀번호를 입력받을 때 사용되며, 입력한 문자를 마스킹하여 표시합니다. : 이메일 주소를 입력받을 때 사용됩니다.: 숫자 값을 입력받을 때 사용됩니다. : 전화번호를 입력받을 때 사용됩니다. , , : 각각 날짜, 시간, 날짜와 시간을 입력받을 때 사용됩니다.텍스트 여러줄:: 여러 줄의 텍스트를 입력할 수 있는 상자를 생성합니다.선택 입력 필드 (Select Fields):: 드롭다운 목록을 생성합니다.  요소를 ..

정규표현식 ( 정규식 ) 정규 표현식(regular expression)이란?정규 표현식(Regular Expression)은 문자열을 검색하거나 편집하는 데 사용되는 특수한 문자열 패턴입니다. 이것은 주어진 텍스트에서 원하는 패턴을 찾는 데 도움이 됩니다. 정규 표현식은 다양한 프로그래밍 언어와 텍스트 편집기에서 지원되며, 각 언어 및 편집기에서 약간의 차이가 있을 수 있지만 기본적인 패턴 매칭 및 문자열 검색에 대한 기능은 비슷합니다. 정규 표현식은 일반 문자와 특수 문자를 조합하여 표현되는데, 이들은 다음과 같은 역할을 합니다  일반 문자: 일반적인 문자열을 나타냅니다.메타 문자: 패턴 매칭을 위해 특별히 사용되는 문자입니다. 예를 들어, "."은 어떤 문자와도 일치하고, "*"는 앞선 문자가 0번..

# 비구조화 할당 ( 구조분해 ) 문법 비구조화 할당 문법은 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언할 수 있습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. developer.mozilla.org 비구조화 할당 ex1) const array = [10, 20]; const [a, b] = array; console.log(a); console.log(b); ex2) const..

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. this2. target과 currentTarget의 차이점3. dataset4. animate5. transition # this : 이벤트 한 자기 자신 결과 : click 자신의 값 -> 짜장면결과 : 짜장면 예)let btn = document.querySelector('#btn');btn.onclick = function() {//this -> 이벤트한 대상//클릭한 자기자신 alert(this.id); alert(this.value); }; 예) 메세지 xxxconst message = document.querySelector('#message');const result = document.querySelector('#result');message..

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

# 자바스크립트 이벤트 Mouse EventEvent설명click마우스 버튼을 클릭했을 때dbclick마우스 버튼을 더블 클릭했을 때mousedown마우스 버튼을 누르고 있을 때mouseup누르고 있던 마우스 버튼을 뗄 때mousemove마우스를 움직일 때 mouseover마우스를 요소 위로 움직였을 때mouseout마우스를 요소 밖으로 움직였을 때mouseenter해당 요소에 마우스 커서를 올려다놓았을때mouseleave해당 요소에 마우스 커서를 빼낼때 Keyboard EventEvent설명keydown키를 누르고 있을 때keyup누르고 있던 키를 뗄 때keypress키를 누르고 뗏을 때keyCode키 코드값 , mdn 속성설명e.altKeyAlt 키가 눌렸는지 여부 (true / false)e...