프로그래밍/자바스크립트

자바스크립트 - 정규표현식

정규표현식 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어로 정규 표현식을 이용하면 입력 된 문자열에 대하여 특정 조건 검색, 치환 복잡한 조건문 대신 간단하게 처리 가능 정규 표현식 객체 생성 자바스크립트에서는 RegExp 객체와 문자열 메소드를 조합해 정규 표현식 사용 정규 표현식은 패턴과 선택적으로 사용할수 있는 플래그로 구성되어있음 정규식 메소드 test : 문자열에서 정규식 변수의 값과 일치하는 값이 있으면 true, 없으면 false 반환 match : 문자열에서 정규식 변수의 값과 일치하는 모든 값 반환 replace : 문자열에서 정규식 변수의 값과 일치하는 부분을 새로운 값으로 변경 search : 일치하는 부분의 시작 인덱스 반환 split : 정규식 변수에 지정된 값..

2021. 8. 14. 14:00

프로그래밍/자바스크립트

자바스크립트 - form 이벤트

form 이벤트 document.forms : 문서에 존재하는 form들을 반환 Ex. document.forms.memberJoin : name 속성이 memberJoin인 문서내의 form 반환 Ex. document.forms[0] : 문서 내 가장 첫 번째 form form.elements : 해당 form 내의 name 속성이 일치하는 element 들을 반환함 from.elements.userid : name 속성이 userid인 해당 form 내의 엘리먼트 아이디 비밀번호 비밀번호확인 성별 남자 여자 나이 10대 이하 20대 30대 40대 50대 60대 이상 자기소개 이메일 form 요소 값 다루기 input, textarea : input.value 또는 input.checked(check..

2021. 8. 14. 13:52

프로그래밍/자바스크립트

자바스크립트 - 마우스 이벤트

마우스 이벤트 웹을 개발하다보면 마우스에대한 이벤트가 필요할경우 종종있다. 호버같은경우는 css로 해결가능하지만 버튼을클릭했을시 배경색이변하거나 제일 맨위로 이동하기같은경우는 css로는 해결하기는어렵고 이럴경우 자바스크립트의 이벤트 기능이용하면된다. 종류는 mousedown/mouseup mouserover/mouseout mousemove click dblclick contextmenu click() 클릭을 했을때 이벤트가 발생하는 이벤트 mousedown/mouseup 왼쪽 마우스를 누르고있을땐 mousedown 이벤트 왼쪽 마우스 눌렀다가 뗄땐 mouseup 이벤트가 발생한다. document(문서) 에서 3번의 클릭을 했을경우 좌표값을 나오는것을 확인할수 있음 mouseover/mouseout 마..

2021. 8. 4. 17:12

프로그래밍/자바스크립트

자바스크립트 - WINDOW 객체

WINDOW 브라우저 창에 대한 설정을 하는 객체 window 객체는 자바스크립트의 최상위 객체이며 BOM과 DOM으로 나뉜다. BOM location 객체, navigator 객체, history 객체, screen 객체 DOM document 객체 open() 주소값을 열거나 이동하는 객체 open1 버튼 open2 버튼 setInteval() setTimeout과다르게 계속해서 실행하는 객체 3초 딜레이 걸었으면 3초마다 실행하는 객체임 현재시각 hh : mm : ss clearInterval() setInterval() 을 멈추기 위한 메소드 현재시각 hh : mm : ss 시작 멈춤 실행전 시작 버튼 누른후 멈춘 버튼 누른후 screen 웹 브라우저 화면이 아닌 운영체제 화면의 속성을 가지는 객..

2021. 8. 4. 15:17

프로그래밍/자바스크립트

자바스크립트 - 문서 수정 메소드

노드 생성 createElement() 태그 이름을 사용해 새로운 요소를 만드는 메소드 cloneNode(deep) 요소를 복사하는 메소드 deep == true 일경우 자손도 복사함 deep == false 일경우 자신만 복사함 리스트1 리스트2 노드 삽입 append(), prepend() append() : node 끝에 노드나 문자열을 삽입 prepend() : node 앞에 노드나 문자열을 삽입 리스트1 리스트2 before(), after(); before : node 이전에 노드나 문자열을 삽입 after : node 다음에 노드나 문자열을 삽입 현재 이 엘리먼트 중심으로 실습합니다. remove() node 제거하는 메소드 첫 번째 태그입니다. 두 번째 태그입니다. 세 번째 태그입니다. i..

2021. 8. 3. 15:09

프로그래밍/자바스크립트

자바스크립트 - 주요노드 프로퍼티

innerHTML 요소 안 HTML을 문자열 형태로 받아올 수 있음 요소 안 HTML을 수정하는 것도 가능함 console.log("===== p 태그 요소 읽기 ====="); console.log(document.querySelector(".in").innerHTML); console.log("===== p 태그 수정 ====="); document.querySelector(".in").innerHTML = "뭘까?"; console.log(document.querySelector(".in").innerHTML); textContent 요소 내의 텍스트에 접근할 수 있으며 태그는 제외하고 오로지 텍스트만 추출함 사용자의 입력 값을 받아 처리해야 하는 경우 사용자가 입력한 값은 텍스트로 처리되어야 함 ..

2021. 8. 2. 15:09