글
-
[jQuery] 제이쿼리의 선택자Legacy/Web 2015. 7. 14. 10:35
앞서 자바스크립트의 선택자에서와 같은 주의사항이 있다.DOM을 선택하려면 body보다 제이쿼리가 나중에 실행되어야 한다는 것이었다.이렇게 하는데에 jQuery에는 두 가지 방법이 있다. 1. $(document).ready(function(){실행문});2. $(function(){실행문}); 위의 두 방법은 영역에 모든 문서 객체를 로딩한 후 실행문을 실행한다. 직접 선택자와 인접 관계 선택자제이쿼리를 이용한 CSS와 속성 변경방법1. $("#tistoryWrap").css("color", "blue"); => id가 tistoryWrap인 요소를 찾아 css를 적용한다.2. $("img").attr("width", "300"); => img 태그의 속성(attribute) 을 적용 기본 선택자의 종류..
-
[jQuery] 제이쿼리란Legacy/Web 2015. 7. 14. 10:18
제이쿼리는 모질라의 자바스크립트 개발자였던 존 레식이 창시하였다. 제이쿼리는 자바스크립트를 이용해 만든 라이브러리 언어이다.제이쿼리에서는 자바스크립트의 호환성 문제(IE 8버전 이하와 다른 브라우저)를 해결하였다.자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 했고 개발하는 데도 많은 시간이 들었다. 하지만 제이쿼리는 애니메이션을 쉽게구현할 수 있고 다양한 효과를 지원하는 메소드를 제공한다. 제이쿼리 라이브러리 연동제이쿼리를 사용하는 방법은 두 가지가 있다. 첫 번째는 제이쿼리 사이트에 접속해서 제이쿼리 라이브러리 파일을 직접 다운받아 웹 문서에 연동하는 다운로드 방식이고, 두 번째 방법은 온라인에서 제이쿼리 라이브러리 파일을 제공하는 네트워크에서 파일을 연동하여 가져오는 네트워크 전송 ..
-
[JavaScript] 이벤트Legacy/Web 2015. 7. 14. 06:43
브라우저에서 방문자가 취하는 모든 동작을 이벤트라고 한다. 예를 들어 마우스로 특정 요소를 클락하거나 마우스를 올리고 내리는 행위 등 모든 동작이 이벤트이다. 이 이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 한다. 즉, 이벤트 발생 시 자바스크립트 코드가 실행된다. 주로 많이 사용되는 이벤트의 종류는 다음과 같다. 마우스 이벤트 onmouseover 지정한 요소에 올라갔을 때 발생 onmouseout 지정한 요소에서 벗어났을 때 발생 onmousemove 지정한 요소에서 움직일 때 발생 onclick 지정한 요소를 클릭 했을 때 발생 ondblclick 지정한 요소를 더블클릭 했을 때 발생 키보드 이벤트 onkeypress 지정한 요소를 키보드가 눌렸을 때(눌렀다뗌) onk..
-
[JavaScript] JavaScript Event HandlerLegacy/Web 2015. 7. 13. 21:13
http://lhm38317.blog.me/10042523469 onabort 이미지의 다운로드를 중지할 때 (브라우저의 중지버튼) onactivate 개체가 활성화될 때 발생 (태그의 기능이 작용할 때 발생하는 이벤트로 예를 들어 링크를 누를 경우 링크가 옮겨질때 발생하는 것을 감지하는 이벤트 핸들러) onafterprint 문서가 출력되거나 혹은 출력하기 위해 출력미리보기를 한 후에 발생 onafterupdate 데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되었을 때 발생(데이터 개체부분 참조) onbeforeactivate 개체가 활성화 상태로 되기 바로 직전에 발생 (onactivate 참고) onbeforecopy 선택 영역이 시스템의 클립보드로 복사되기 바로..
-
[JavaScript] DOM(Document Object Model)Legacy/Web 2015. 7. 13. 05:34
HTML 문서의 구조를 가리켜 문서 객체 모델(DOM)이라고 한다. HTML 문서의 각 태그마다 기능(Method)와 속성(Attribute)가 있다. 태그는 페이지를 링크로 이동시키는 기능을 수행한다. 또한 href, title, target 속성이 존재한다. 이 태그 역시 문서 객체의 하나이다. 이처럼 HTML 태그는 각각의 기능과 속성을 가지고 있는 문서 객체이다. DOM을 배우는 주된 목적은 자바스크립트를 이용해 문서 객체를 선택하고 속성 또는 CSS를 적용하기 위해서이다.하지만 자바스크립트 DOM은 IE 8 이하 버전과 그 외 크롬, 파이어폭스, 사파리 등의 브라우저들 간에 호환성이 떨어진다는 단점이 있다. 하지만 jQuery는 이런 호환성이 떨어지는 단점들을 모두 해결하였다. 선택자HTML에서..
-
[JavaScript] BOM(Browser Object Model)Legacy/Web 2015. 7. 13. 02:27
BOM은 브라우저 객체를 의미한다.브라우저 객체는 그럼 무엇인가? 그것은 브라우저에 내장된 객체를 뜻하는데, 이것 역시 표현이 너무 모호하다.다음과 같이 예시를 들어보면 어떨까?window 라는 객체는 브라우저 객체의 최상위 객체가 된다. 이 window 객체 밑에는 각각 document, screen, location, history, navigator 객체들이 존재하고 있다.이름들에서 감이 오지 않는가? 브라우저의 크기, 위치 같이 우리가 사용하는 인터넷 익스플로러, 크롬, 파이어 폭스 같은 브라우저 들을 통제할 수 있는 객체일 것 같다는 느낌이 든다. 우선 window 객체에 존재하는 메소드 들을 살펴보자. window 객체메소드 open() 새 창을 열 때 사용한다. alert() 경고 창을 띄운..
-
[JavaScript] 자바스크립트의 객체Legacy/Web 2015. 7. 12. 02:21
자바스크립트에는 클래스가 존재하지 않는다. 자바스크립트에서 객체는 크게 내장 객체, 브라우저 객체 모델(BOM), 문서 객체 모델(DOM)으로 나눌 수 있다. 1. 내장 객체내장 객체는 자바스크립트 엔진에 내장되어 있어, 필요한 경우 생성해서 사용할 수 있다. 대표적인 내장 객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math), 정규 표현(RegExp)객체 등이 있다. 2. 브라우저 객체 모델(Browser Object Model)브라우저에 계층적으로 내장되어 있는 객체들을 브라우저 객체 모델(BOM)이라고 한다. 대표적인 브라우저 객체로는 window, screen, location, history, navigator 객체 등이 존재한다. 3. 문서 객체 모델(Docume..