본문 바로가기

프로그래밍

 (97)
[JQuery 요약 정리] 3. 객체 선택 3. 객체 선택1) filter() 메소드- 문서 객체를 필터링- 사용방법: 매개변수에 '선택자' 혹은 'function (index){return index;}의 형태로 사용- 사용 예시$('h1).filter(':even').css('color', 'red') -> h1 중 짝수 요소 빨간색으로 변경$('h1).filter(function (index){return index % 3 == 0;}).css('color', 'red')-> h1 중 3의 배수 요소를 빨간색으로 변경 2) end() 메소드- 문서 객체 선택을 한 단계 뒤로 돌림(ex. filter() 메소드의 선택 제거)- 메소드 체이닝을 통해 다양한 조건을 한꺼번에 입력할 시에 유용*메소드 체이닝: 여러가지 메소드를 연결해서 사용하는 것..
[JQuery 요약 정리] 2. 선택자(Selector) 2. 선택자(Selector)1) 전체 선택자 $('*')- 페이지에 있는 모든 객체를 선택 2) 태그 선택자 $('태그명')- 해당 태그를 선택 3) ID 선택자 $('#ID명')- 해당 ID를 선택 4) 클래스 선택자 $('.클래스명')- 해당 클래스를 선택 5) 자손 선택자 $('부모요소 > 자손요소')- 부모요소의 자손요소를 선택(인접 하위 요소)- 예시$('body > div') body의 하위에 위치한 div 태그만 선택 6) 후손 선택자 $('부모요소 후손요소')- 부모요소의 후손요소를 선택(모든 하위 요소)- 예시$('body > div') : body의 하위에 위치한 모든 div 태그 선택 7) 속성 선택자- 요소의 속성 조건에 맞는 요소를 선택- 기본형태: 요소[속성=값]- 예시$('i..
[JQuery 요약 정리] 1. JQuery 기본 1. JQuery 기본1) JQuery 개요- JQuery: 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리 2) 목적- 문서 객체 모델(Document Object Model)과 관련된 처리를 쉽게 구현- 일관된 이벤트 연결을 쉽게 구현- 시각적 효과를 쉽게 구현- Ajax 어플리케이션을 쉽게 개발 3) 사용 방법- 다운로드 후 스크립트 내에서 참조다운로드 URL: https://jquery.com/download/참조코드: - 웹을 통해서 참조(CDN 방식)참조 URL 받는 곳: https://code.jquery.com/ 4) 기본 형태- $('선택자').함수명(); 5) $(document).ready()- 문서가 준비되면 실행될 함수- 자바스크립트의 window.onload = fu..
[JavaScript 요약 정리] 17. 쿠키와 저장소 17. 쿠키와 저장소1) 쿠키- 키와 값이 들어있는 데이터 조각- 이름, 값, 파기 날짜, 경로 정보 존재 2) 쿠키 생성- document.cookie = 'Name=Value;Expires=만료;Domain=도메인;Path=경로;Secure';Name, Value: 데이터를 저장하고 읽는데 사용하는 속성 // 필수Expires: 쿠키의 파기 날짜 (GMT 혹은 UTC 형식 날짜 입력) // 미입력: 브라우저 종료시 파기Secure: 쿠키의 보안 연결 여부 3) 쿠키 제거- Expires 속성을 현재 이전의 날짜로 설정 4) 쿠키 읽기- 쿠키 읽기 예시var cookies = document.cookie.split(';');var value = '';for(i in cookies) {if(cookies..
[JavaScript 요약 정리] 16. 정규 표현식 16. 정규 표현식1) 정규 표현식 객체- 자바스크립트의 기본 내장 객체 중 하나- 생성 방법var regExp1 = new RegExp('text');var regExp2 = /text/; - 정규 표현식 객체의 메소드test() : 정규 표현식과 일치하는 문자열 존재 여부 반환exec() : 정규 표현식과 일치하는 문자열 반환 2) 정규 표현식을 사용하는 String 객체의 메소드match(regExp): 정규 표현식과 일치하는 부분 반환replace(regExp, replacement): 정규 표현식과 일치하는 부분 변경search(regExp): 정규 표현식과 일치하는 부분의 위치 반환split(regExp): 정규 표현식을 기준으로 문자열을 잘라 배열 반환 3) 대체 문자- replace() 메..
[JavaScript 요약 정리] 15. 예외 처리(Exception handling) 15. 예외 처리(Exception handling)1) 예외(Exception)- 프로그램 실행 중 발생하는 오류- 에러(Error)는 프로그램 실행 전에 발생하는 오류를 의미- 다양한 이유로 예외가 발생할 수 있기 때문에 개발자는 미리 대비를 해야함 2) 기본 예외 처리- 예외처리: 예외가 발생하지 않도록 사전에 해결하는 것- 조건문을 이용해서 예외가 발생할 상황을 방지하는 것- 예시if(num
[JavaScript 요약 정리] 14. 이벤트(Event) 14. 이벤트(Event)1) 이벤트(Event)- 웹브라우저가 사용자와 상호작용 할 수 있도록 이벤트를 설정- 웹 브라우저마다 이벤트 사용 방식이 다르기 때문에 JQuery등의 보완 라이브러리 사용 - 종류: 마우스, 키보드, HTML 프레임, HTML 입력양식, 유저 인터페이스, 구조 변화, 터치 - 용어이벤트 이름 or 이벤트 타입 -> 이벤트의 이름이벤트 리스너 or 이벤트 핸들러 -> 특정 요소의 이벤트 속성에 연결된 함수이벤트 속성 -> 특정 요소에 이벤트를 직접 연결할 때 사용하는 속성기본 이벤트 -> 요소 자체가 내장한 이벤트이벤트 모델 -> 이벤트를 연결하는 방법 - 이벤트 모델의 종류DOM Level 0 : 인라인 이벤트 모델, 기본 이벤트 모델DOM Level 2 : IE 이벤트 모델..
[JavaScript 요약 정리] 13. 문서 객체 모델(DOM) 13. 문서 객체 모델(DOM)1) DOM(Document Object Model)- 넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식- 좁은 의미로는 document 객체와 관련된 객체의 집합- HTML 페이지는 트리 모양으로 구성, 각 요소를 노드라고 칭함element node: html 태그 의미text node: element node 안에 들어있는 텍스트- 자바스크립트에서는 속성도 하나의 노드로 구분 2) document 객체 다루기- document 객체는 텍스트 노드를 가진 객체와 텍스트 노드가 없는 객체로 분류- document 객체의 노드 생성 메소드createElement(tagName) : 요소 노드 생성createTextNode(text) : 텍스트 노드 생성 - docu..

티스토리툴바