ALL

쌍용 강북 교육센터 국비학원 Day 56일차 $선택자1.find(선택자2) - 선택자1 안에 있는 선택자2를 가르키는 것이다. $.prev(); - 선택자의 바로 앞 형제태그 (엘리먼트)를 가르키는 것이다. $.children(); - 선택자의 자식(손자 X) 태그만을 가리키는 것이다. $.parent(); - 선택자의 부모요소 (부모태그)를 가르키는 것이다 $.siblings(); - 선택자의 형제요소 (형제태그) 중 선택자 (자기자신)을 제외한 나머지 모든 형제요소를 가르키는 것이다. $.prev(); - 선택자의 바로 앞의 형제요소를 가리키는 것이다. $.next(); - 선택자의 바로 뒤의 형제요소를 가리키는 것이다. $.fadeIn , fadeOut (second); - 선택자에 해당되는 내용물..

쌍용 강북 교육센터 국비학원 Day 55일차 Tabs 자주 사용하는 tab 메뉴 구현하기 탭 메뉴를 클릭하면 버튼이 활성화 되어 해당 탭 메뉴 내용이 나타나게 한다. addClass() 메소드와 removeClass() 메소드, :eq 메소드를 사용해 구현하였다. 탭 구현의 예 - https://jqueryui.com/tabs/ ※ .eq() 또는 :eq() 메소드 - 선택한 요소의 인덱스 번호에 해당하는 요소를 찾는다. 같은 부모의 자식중에서 '숫자'번째 에게 접근한다. .index()는 숫자만 반환하는 것에 비해 .eq()는 요소를 반환하기 때문에 요소의 컨트롤에 매우 유용하다. Storage 스토리지는 로컬 스토리지 (localStorage) 와 세션 스토리지 (sessionStorage) 가 존재..

쌍용 강북 교육센터 국비학원 Day 54일차 JQuery 주요 메소드 $.bind() , $.on() bind(), on() 둘 다 이벤트(event) 처리기능을 하는 메소드이지만 약간의 차이가 있다. 선택자를 잡을때 선택자가 태그에 직접 기술한 것이라면 선택자를 제대로 잡을수가 있으나 스크립트내에서 기술한 것이라면 선택자를 못 잡아올수도 있다. 이러한 경우 $(document).on() 메소드를 사용해야 한다. (jQuery에서는 on 메소드를 사용하는 것을 권장하고 있다.) $(document).on( "이벤트종류", "선택자", function( ){ } ); [문법] $.on ( events , selector , data , function( ) ); 1 2 3 4 (selector와 data는..

쌍용 강북 교육센터 국비학원 Day 53일차 JQuery 제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리이다. 웹페이지 상에서 요소(Element) 를 쉽게 찾고 조작할 수 있으며 네트워크, 애니메이션 등 다양한 기능을 제공하고 있다. 거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어나고 메소드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원한다. 관련 플러그인들이 웹상에 공개되어 있으며 플러그인을 직접 구현하거나 확장할 수 있다. 공식 웹사이트(www.jquery.com)와 수많은 레퍼런스를 통해 쉽게 접근이 가능하다. JQuery 적용 첫 번째 방법은 API를 직접 다운받아 사용하는 방법으로 파일은 c..

쌍용 강북 교육센터 국비학원 Day 53일차 정규표현식 정규표현식 (Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단이다. 정규표현식 객체 만들기 /로 시작해서 /로 끝나고 ; 세미콜론을 붙여주면 된다. Example ) regexp = / pattern / flags ; regexp = new RegExp ('pattern' , [ 'flags' ] ); [propVal=] RegExp.propName; 정규표현식은 기본적으로 대, 소문자를 구분한다. 정규표현식은 기본적으로 공백, 탭, 개행키도 구분한다. ' \ ' (escape 문자) 다음에 오는 정규식패턴 1개 문자( ^ $ ..

쌍용 강북 교육센터 국비학원 Day 52일차 우편번호 검색하기 구현 보통 포털사이트의 회원가입시에 주소를 기입할때 이용하는 우편번호 검색코드이다. 우편번호 검색을 누르면 해당주소를 검색해서 입력해 우편번호와 주소를 자동으로 입력해주는 팝업창이다. 다음에서 배포하는 코드를 사용해 구현했다. required 속성 (유효성 검사) form 태그에서 required 속성이 적용되는 input 태그 , radio , textarea 태그들은 모두 유효성 검사를 해줄 필요가 없다. 하지만 required 속성이 안 먹히는 것은 모두 유효성 검사를 해주어야 한다. checkbox 는 required 속성이 먹히지만 모든 체크박스에 required 속성을 주면 모든 체크박스에 체크를 해주어야 하기 때문에 require..

쌍용 강북 교육센터 국비학원 Day 51일차 URL, URI, URN URI는 (Uniform Resource Identifier) URL은 (Uniform Resource Locator) URN은 (Uniform Resource Name) 의 약자이다. 자원의 식별자(URI), 위치(URL), 이름(URN)으로 유추해 볼 수 있다. URI : 통합 자원 식별자(Uniform Resource Identifier, URI) 인터넷에 있는 자원을 나타내는 유일한 주소이다. URI의 존재는 인터넷에서 요구되는 기본조건으로서 인터넷 프로토콜에 항상 붙어 다닌다. URI의 하위개념으로 URL, URN 이 있다 URL : URL(Uniform Resource Locator, 문화어: 파일식별자, 유일자원지시기) 네..

쌍용 강북 교육센터 국비학원 Day 50일차 Date 객체 생성 -> new Date() 는 new Date() 가 실행되는 시점에 날짜 및 시간 데이터를 갖고 오는 것이다. 출력하게 되면 요일명 월 일 년도 시:분:초 GMT기준시간을 표시해준다. get 날짜함수 -> 날짜 데이터에서 필요한 형식만 갖고 오는 함수이다. 종류 리턴값 getFullYear() YYYY getMonth() MM (월은 0부터 시작하기 때문에 +1을 해야한다.) getDate() DD getDay() 0 ~ 6 (일 ~ 토) getHours() HH getMinutes() MM getSeconds() SS getMilliseconds() mmm toLocaleString() 년, 월, 일 시간의 데이터 포맷형식으로 리턴 set..

쌍용 강북 교육센터 국비학원 Day 49일차 노드 탐색하기 .parentNode.parentNode 부모노드의 부모노드를 리턴 .parentNode 부모노드를 리턴 .childNodes 모든자식노드들을 리턴 .firstChild 첫째자식노드를 리턴 .lastChild 마지막자식노드를 리턴 .nextSibling 같은 레벨의 노드중 이전 노드를 리턴 (바로밑 - 형제노드) .previousSibling 같은 레벨의 노드중 이전 다음를 리턴 (바로위 - 형제노드) ※ 주의할 점은 태그사이에 띄어쓰기를 하거나 태그를 줄 바꿈을 해버리면 띄어쓰기나 줄바꿈을 텍스트 노드(text node) 로 취급해버리므로 원하는 노드의 값을 가지고 오지 않고 undefined 가 나온다. 이렇게 undefined 가 나오지 않..

쌍용 강북 교육센터 국비학원 Day 48일차 Array 주요 메소드 1. 배열명.splice() (start, count, element) -> 배열의 특정 위치에 배열 요소를 추가하거나 삭제하는데 사용한다. 삭제할 경우 리턴값은 삭제한 배열 요소이다. 삭제한 요소가 없으면 빈 배열을 반환한다. start - 수정할 배열 요소의 인덱스 count - 추가할 경우 count 값은 0, 삭제할 경우 element 없이 삭제할 요소 개수를 넣는다. 2. 배열명.reverse() -> 배열의 요소를 역순으로 만들어준다. 3. 배열명.sort() 배열의 요소를 문자열로 변환한 후 오름차순으로 정렬한다. map() 메소드는 반복문을 돌며 배열 안의 요소들을 1대1로 짝지어(맵핑) 새로운 배열을 만들어 주는 것이다...