본문 바로가기
728x90
반응형
SMALL
[JavaScript] 이터레이터(Iterator) & 이터러블(Iterable) 1. 이터레이터(Iterator) 반복 처리가 가능한 객체 내부적으로 next() 메서드를 가지며 next()메서드는 IteratorResult 객체 value와 done이라는 프로퍼티를 가진 객체를 반환함 2. 이터러블(Iterable) 반복이 가능한 객체 Symbol.Iterator 메서드가 있어야 하며 Symbol.Iterator는 이터레이터 객체를 반환해야 함 String, Array, Map, Set...등 객체 for 문법으로 반복이 가능 이터러블 이터러블2 MDN: Itreation https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols Iteration protocols - JavaScript | .. 2023. 4. 19.
[JavaScript] 이벤트 전파(Event Propagation) - 방식, 전파 막는 방법 이벤트에 대해 자세히 알고싶다면? ⬇️⬇️⬇️ 더보기 https://coding-yesung.tistory.com/137 [JavaScript] 이벤트(Event) - 이벤트 타입(Event Type), 이벤트 타겟(Event Target), 이벤트 리스너(Event Listener 1. 이벤트(Event) 웹 브라우저가 알려주는 HTML 요소에 대한 사건이 발생 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음 자바스크립트는 비동기식 이벤 coding-yesung.tistory.com 1. 이벤트 전파(Event Propagation) 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정 document 객체나 html 문서의 요소에서.. 2023. 4. 19.
[JavaScript] 이벤트(Event) - 이벤트 타입(Event Type), 이벤트 타겟(Event Target), 이벤트 리스너(Event Listener), 이벤트 객체(Event Object) 1. 이벤트(Event) 웹 브라우저가 알려주는 HTML 요소에 대한 사건이 발생 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델 이벤트 등록 객체.addEvenetListener(이벤트타입, 이벤트리스너) 이벤트 제거 객체.removeEventListener(이벤트타입, 이벤트리스너) function sendit(e){ // e.target(button), e.type(click) } 2. 이벤트객체(Event Object) 특정 타입의 이벤트와 관련이 있는 객체 이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있음 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트 대상을 나.. 2023. 4. 19.
[JavaScript] URL & URI - 정의, 차이점, URL의 이스케이프 처리와 디코딩 1. URL(Uniform Resource Locator) ✔️ 웹 사이트 주소 + 컴퓨터 네트워크 상의 자원 네트워크상에서 리소스의 위치를 나타내기 위한 규약 자원 식별자와 위치를 나타냄 특정 웹사이트의 주소에 접속하기 위해서는 웹사이트의 주소뿐만 아니라 프로토콜(https, http, sftp, smp 등)을 함께 알아야 접속이 가능한데, 이들을 모두 나타내는 것이 URL임 2. URI (Uniform Resource Identifier) URI는 인터넷상의 리소스 자원 자체를 식별하는 고유한 문자열 시퀀스 3. URL과 URI의 차이점 URI= 식별자, URL=식별자+위치 3-1. URL은 일종의 URI이다. google.co.kr은 URI, 리소스의 이름만 나타내기 때문 https://google.. 2023. 4. 19.
[JavaScript] wrapper class 1. wrapper class 란❓ 기본 타입에 해당하는 데이터를 객체로 포장해 주는 클래스 1-1. Primitive Tpyes(기본타입, 원시타입) string, number, bigint, boolean, undefined, symbol, null (8개) 기본 타입은 객체가 아니며, 메서드와 프로퍼티가 존재하지 않는 데이터 기본 타입은 프로퍼티와 메서드를 정의할 수 없음 new 키워드를 사용하여 원시 타입을 래퍼 객체로 생성할 수 있지만, 주로 사용하는 방법은 아님 let a = 'apple' // 리터럴 표기 let b = new String('apple') // 객체형 표기 a === b //false 기본타입(원시타입) 래퍼 클래스 string String number Number bigin.. 2023. 4. 19.
[JavaScript] 자바스크립트 객체 활용법 1. 객체에 접근하기 Object 클래스는 JavaScript의 데이터 유형 중 하나 JavaScript의 거의 모든 객체는 Object의 인스턴스 객체 활용법 1-1. 동적으로 객체 속성에 접근하기 객체 활용법 1-2. 객체 생성 함수 만들기 객체 활용법 ✅Fruit 생성자를 만들고 위와 같은 결과를 동일하게 출력할 수 있게 객체를 만들어 출력해보자. (단, Fruit(name, emoji) 형태로 만듦) function Fruit(name, emoji){ this.name=name this.emoji=emoji this.display = () => { console.log(`${this.name}: ${this.emoji}`) } } const lemon = new Fruit('lemon', '🍋').. 2023. 4. 14.
[JavaScript] 자바스크립트의 함수 메모리 할당 & 함수 작성 팁 1. 자바스크립트의 메모리 관리 자바스크립트는 객체가 생성되었을 때 자동으로 메모리를 할당하고 더 이상 필요하지 않을 때 자동으로 해제합니다(가비지 컬렉션) 1-1. 함수의 기본과 함수 선언시 메모리 할당 값을 선언할 때 자동으로 메모리를 할당 함수작성법 💡 함수 작성의 팁! 조건식이 있을 때 조건을 만족하지 않는 경우 함수 도입 부분에서 함수를 미리 종료시켜 조건식에 부합할 때만 값을 반환 함수작성법 1-2. 함수 매개변수의 기본값 매개변수의 기본값은 무조건 undefined undefined와의 연산은 NaN arguments: 함수에 전달된 인수에 해당하는 Array형태의 객체 함수작성법 1-3. 콜백 함수 함수작성법 ✅ 문제 특정 숫자를 입력하면(매개변수) 해당 숫자까지 출력하는 함수를 작성 예).. 2023. 4. 14.
[JavaScript] 정규 표현식으로 특정 패턴의 문자열 생성하기! 1. 정규 표현식(Regular Expression: Regex) 문자열에서 특정 문자 조합을 찾기 위한 패턴 📍정규 표현식을 사용하는 예 - 회원가입 아이디: [ ] * 아이디는 4자리 이상, 16자리 이하 * 영문 대문자 또는 소문자로 시작해야함 이름: [ ] * 한글만 사용 비밀번호: [ ] * 비밀번호는 4자리 이상 또는 15자리 이하 * 대문자 1개이상, 소문자 1개이상, 숫자 1개이상, 특수문자 1개이상 2. 정규 표현식 생성 2-1.리터럴 표기 다음과 같이 슬래시로 패턴을 감싸서 작성( / ~ / ) const regex = /ab+c/ 2-2. 생성자 호출 RegExp 객체의 생성자 호출 바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출처에서 가져오는 패턴의 경우 사용 const re = .. 2023. 4. 12.
[JavaScript] 노드(node)란? & 노드 종류와 관계, 노드 생성/추가/제거/복제하기! 1. 노드(node)란❓ HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장 2. 노드 종류 문서노드: 문서 전체를 나타내는 노드 요소노드: HTML 요소는 요소노드, 속성노드를 가질 수 있음 속성노드: 속성은 모두 속성노드이며, 요소노드에 관한 정보를 가지고 있음 텍스트노드: 텍스트는 모두 텍스트노드 주석노드: 주석은 모두 주석노드 3. 노드의 관계 parentNode: 부모 노드 children: 자식 childNodes: 자식 노드 리스트 firstChild: 첫번째 자식 노드 firstElementChild: 첫번째 자식 요소 노드 (처음 등장하는 요소) lastChild: 마지막 자식 노드 nextSibling: 다음 형제 노드 previousSibling: 이전 형제 노드 4. 메서드.. 2023. 4. 12.
[JavaScript] 객체 - 9️⃣ document 객체 & 문서 객체 모델(DOM) 1. document 객체 웹 페이지 자체(body)를 의미하는 객체 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document객체로 부터 시작 2. 프로퍼티 getElementById(): 해당 아이디의 요소를 선택(요소하나만 접근). 주로 많이 사용! getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택(배열로 반환) getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택(배열로 반환) getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택(배열로 반환) querySelectorAll(): css 선택자로 선택되는 요소를 모두 선택(배열로 반환) querySelector(): css 선택자로 선택되.. 2023. 4. 12.
[JavaScript] 객체 - 8️⃣ navigator 객체 & geolocation 1. navigator 객체 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 정보를 저장하는 객체 2. geolocation GPS 정보를 수신하는 프로퍼티 navigator MDN https://developer.mozilla.org/ko/docs/Web/API/Navigator Navigator - Web API | MDN Navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다. developer.mozilla.org 2023. 4. 12.
[JavaScript] 객체 - 7️⃣ history 객체 & history 객체 함수 1. history 객체 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체 사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 기능을 접근 제한 2. history 객체 메서드 back(): 페이지 뒤로 이동 forward(): 페이지 앞으로 이동 go(0): 새로고침, location.reload()와 같은 기능 history 다음 홈페이지 뒤로 앞으로 새로고침 MDN: History https://developer.mozilla.org/ko/docs/Web/API/History History - Web API | MDN History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다. developer.m.. 2023. 4. 12.
728x90
반응형
LIST

티스토리툴바