JavaScript (41) 썸네일형 리스트형 25. 정규 표현식 자주 사용하는 정규 표현식 패턴 / ~ / : 시작과 끝 ^ : 패턴의 시작 [ ] : 안의 문자를 찾음 [x-z] : x~z 사이의 문자를 하나를 찾음 x+ : x가 1번이상 반복 x$ : 문자열이 x로 끝남 ^x : 문자열이 x로 시작 \d : 숫자 x{n} : x를 n번 반복한 문자를 찾음 x{n,m} : x를 n번 이상 m번 이하 반복한 문자를 찾음 정규 표현식 예시 아이디 영문 대문자 또는 소문자로, 길이는 4~20자까지 입력 가능 /^[A-Za-z]{4,20}$/ 이름 한글만 사용 /^[가-힣]+$/ 휴대폰 번호 앞번호는 3글자, -, 중간번호는 3글자 또는 4글자, - 마지막번호는 4글자 /^\d{3}-\d{3,4}-\d{4}$/ 이메일 영문 대문자 또는 소문자 또는 숫자로 시작 적절한 위치.. 24. 노드(node) 노드(node) HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장 노드 종류 문서노드: 문서 전체를 나타내는 노드 요소노드: HTML 요소는 요소노드, 속성노드를 가질 수 있음 속성노드: 속성은 모두 속성노드이며, 요소노드에 관한 정보를 가지고 있음 텍스트노드: 텍스트는 모두 텍스트노드 주석노드: 주석은 모두 주석노드 노드의 관계 parentNode 부모노드 노드.parentNode; children 자식노드 노드.children; childNodes 자식노드 리스트 노드.childNodes; firstChild 첫번째 자식노드 노드.firstChild; firstElementChild 첫번째 자식 요소노드 노드.firstElementChild; lastChild 마지막 자식노드 노드.last.. 23. 문서 객체 모델(Document Object Model)[DOM] 문서 객체 모델(Document Object Model)[DOM] HTML문서 또는 XML문서 등을 접근하기 위한 일종의 인터페이스 역할 문서내의 모든 요소를 정의하고 각각의 요소를 접근하는 방법을 제공 document 객체 웹 페이지 자체(body)를 의미하는 객체 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document객체로부터 시작 자바스크립트에서 굉장히 중요함 document 객체 문법 getElementById() 해당 아이디의 요소를 선택 document.getElementById("id명"); getElementsByTagName() 해당 태그 이름의 요소를 모두 선택 document.getElementsByTagName("태그명"); getElementsByClassN.. 22. history 객체, navigator 객체 history 객체 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체 사용자의 개인정보보호를 위해 이 객체의 대부분의 기능을 접근 제한 history 객체의 메소드 back() 페이지 뒤로 이동 forward() 페이지 앞으로 이동 go(0) 새고로침(location.reload()와 같은 기능) history 객체 사용 예제 History 뒤로 앞으로 새로고침 navigator 객체 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 정보를 저장하는 객체 geolocation GPS정보를 수신하는 프러퍼티 navigator 객체 예제 Navigator 21. Location 객체 Location 객체 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용 카카오 홈페이지 예시 Location 객체의 속성 protocol 콜론을 포함하는 http, https, ftp 등 프로토콜 정보를 반환 hostname 호스트의 이름가 포트번호를 반환 pathname URL 경로 부분의 정보를 반환 href 페이지 URL 전체 정보를 반환 또는 URL을 지정하여 페이지를 이동 protocol 콜론을 포함하는 http, https, ftp 등 프로토콜 정보를 반환 reload() 페이지 새로고침(F5) Location 객체 새로고침 이동 20. form 객체 form 객체 일반적인 폼 요소에 접근할 때 사용 document.forms 컬렉션을 이용해서도 접근할 수 있음 폼 객체 접근하기 HTML 아이디: 비밀번호: 폼 접근하기 const frm = document.myform; // name으로 접근 const frm = document.forms['myform']; // name으로 접근 const frm = document.forms[0]; // 한 문서의 여러개의 폼 중 첫번째 폼 접근 const frm = document.getElementById('regform'); // id로 접근, 주로 사용함 아이디 입력상자에 접근하기 const userid = frm.userid; // name 으로 접근 const userid = document.forms.. 19. window 객체 Web Api 객체 BOM(Browser Object Model): 비표준 window 객체 웹 브라우저의 창이나 탭을 표현하기 위한 객체들이며 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음 window.alert() window.confirm() window.prompt() window 객체의 메소드 setTimeOut() 일정 시간이 지난 후 매개변수로 제공된 함수를 실행 const 함수명 = function(){ 실행문; ... } const st = setTimeOut(함수명, 밀리초) clearTimeout() 일정 시간후에 일어날 setTimeOut()를 취소함 // setTimeOut() const 함수명 = function(){ 실행문; ... } const st.. 18. Date 객체 Date 객체 날짜, 시간 등을 쉽게 처리할 수 있는 내장 객체 연도(year) 2자리로 연도를 표기: 1900년 ~ 1999년 4자리로 연도를 표기: 2000년 ~ 월(month) 0 ~ 11, 0(1월), 11(12월) Date 객체를 생성하는 방법 new Date() 현재 날짜 시간을 저장한 객체가 생성 console.log(new Date()); // Fri Apr 07 2023 13:01:20 GMT+0900 (한국 표준시) new Date('날짜 문자열) 해당 특정 날짜와 시간을 저장한 객체가 생성 // 년도를 2자리로 설정하면 1900년 console.log(new Date(23,4,6)); // Sun May 06 1923 00:00:00 GMT+0900 (한국 표준시) new Date(밀.. 이전 1 2 3 4 5 6 다음
