728x90 반응형 SMALL Web/JavaScript43 [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. [JavaScript] 객체 - 6️⃣Location 객체 & Location객체 함수 1. Location객체 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용 2. Location 객체 메서드 protocol: 콜론을 포함하는 http, https, ftp 등 포로토콜 정보를 반환 hostname: 호스트의 이름과 포트번호를 반환 pathname: URL 경로부분의 정보를 반환 href: 페이지 URL 전체 정보를 반환 또는 URL을 지정하여 페이지를 이동 reload(): 새로고침 버튼처럼 현재를 다시 불러옴 location 이동 MDN: Location https://developer.mozilla.org/ko/docs/Web/API/Location Location - Web API | MDN Location 인터페이스는 객체가 연결된 장소.. 2023. 4. 12. 이전 1 2 3 4 5 6 다음 728x90 반응형 LIST
