Web

쌍용 강북 교육센터 국비학원 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로 짝지어(맵핑) 새로운 배열을 만들어 주는 것이다...

쌍용 강북 교육센터 국비학원 Day 47일차 Number 주요 method 숫자.toLocaleString ('en') -> 숫자를 3자리 마다 콤마를 찍어서 문자열로 변환시켜줌. 숫자.toFixed (num) -> 소수 (파라미터) num의 자리까지 반올림 해주는 메소드. 그 이후는 반올림하고 절삭. string 타입으로 리턴. 숫자.toPrecision (num) -> num의 길이만큼 추출한 후 반올림해준다. string 타입으로 리턴. getElement JavaScript에서 Element (태그, 요소)를 잡는 6가지 방법 1. 태그를 가지고 선택자를 잡는 방법 document.getElementsByTagName ("태그명") -> NodeList 타입으로 반환해준다. 마치 배열과 비슷하다...