728x90 반응형 SMALL Web96 [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. [JavaScript] 객체 - 4️⃣ Window 객체 & Window 객체 함수, setTimeout(), setInterval(), clearTimeout(), clearInterval() 1. Window 객체 웹 브라우저의 창이나 탭을 표현하기 위한 객체들이며 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음 2. Window 객체 메서드 alert(): 경고 대화 상자를 표시 confirm(): 사용자가 응답해야 하는 대화 상자를 표시 prompt(): 사용자가 명령 대화상자에 입력하는 텍스트를 반환 setTimeout(): 일정 시간이 지난 후 매개변수로 제공된 함수를 실행(밀리초) clearTimeout(setTimeout()함수의 변수명): 일정 시간후에 일어날 setTimeout()함수를 취소함 const 함수명 = function(){ 실행문; ... } const st = setTimeout(함수명, 밀리초); setTimeout setInterval.. 2023. 4. 11. [JavaScript] 객체 - 3️⃣Date 객체 & Date 객체 함수 1. Date 객체 날짜, 시간 등을 쉽게 처리할 수 있는 내장 객체 날짜와 시간 등 구성요소를 가져오는 메서드는 모두 현지(호스트 시스템의 위치)의 시간대 사용 1-1. Date 객체 생성방법 new Date(): 현재 날짜 시간을 저장한 객체가 생성 new Date('날짜 문자열'): 해당 특정 날짜와 시간을 저장한 객체가 생성 new Date('밀리초'): 1970년 1월 1일 0시 0분 0초를 기준으로 해당 밀리초만큼 지난 날짜와 시간을 저장한 객체가 생성 new Date(년, 월, 일, 시, 분, 초, 밀리초): 해당 날짜와 시간을 저장한 객체가 생성 1-2. 연도(year) 2자리로 연도를 표기: 1900년 ~ 1999년 4자리로 연도를 표기: 2000년 ~ 1-3. 월(month) 0 ~ 1.. 2023. 4. 11. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음 728x90 반응형 LIST
