목록프론트엔드/JavaScript+JQuery (33)
가희의자기개발블로그
클래스를 만드는 방법에는 세 가지가 있는데, 가장 간단한 방식인 오브젝트 리터럴 방식으로 클래스를 만들어 보자. 01_ 사용법 오브젝트 리터럴 방식으로 클래스 만드는 방법을 다음가 같은 순서로 나눠 진행하겠다. 단계는 크게 클래스 설계 단계와 설계한 클래스를 사용하는 단계인 객체 사용 단계로 나눠진다. 구분 진행 순서 클래스 설계 단계 1. 문법 2.생성자 정의 방법 3.프로퍼티 정의 방법 4. 메서드 정의 방법 객체 사용 단계 5. 인스턴스 생성 방법 6.객체 외부에서 프로퍼티와 메서드 접근 방법 7.객체 내부에서 프로퍼티와 메서드 접근 방법 우선 가장 첫번째 방법인 문법부터 살펴 보자 1 _ 문법 var 인스턴스 = { 프로터티: 초깃값, ... 메서드:function(){ ... }, ... } 리..
01_소개 jQuery는 Screen객체와 관련된 기능은 제공하지 않는다. 이유는 굳이 전역 객체인 Screen객체를 jQuery로 다시한번 감사서 제공할 기능이 없기 때문이다. 02_전체 화면 크기 구하기 screen.width screen.height 해당 프로퍼티에는 모니터 해상도 정보가 담겨 있다. 03_유효한 전체 화면 크기 구하기 screen.availWidth screen.availHeight Screen 객체의 속성 width와 height에서 운영체제의 작업 표시줄 영역이 제외된 크기입니다.
01_ 문서 크기 구하기 $(document).width() $(document).height() jQuery에서 문서의 전체 너비와 높이를 알 수 잇는 메서드는 이 두가지만 제공한다. 문서 크기를 설정하는 등의 다른 기능은 제공하지 않는다.
01_ 요소의 위치 및 크기 관련 속성 소개 지금까지 html요소의 위치와 크기를 구하기 위해 다음과 같은 구문을 사용했다. $대상.css("left"); $대상.css("width"); 하지만 이 값들은 모두 단위를 포함한 문자열 정보이기 때문에 현재 위치에서 50만큼을 이동을 한다거나 현재 크기를 100만큼 키우는 처리를 하기 위해서는 다음과 같이 형변환을 해야만 한다. $대상.css("left", (parseInt($대상.css("left"))+50+"px"); $대상.css("left", (parseInt($대상.css("width"))+100+"px"); 만약 html 요소의 위치 값과 크기 값을 문자가 아닌 숫자 값으로 얻을 수 있느면 좀더 편하게 작업할 수 있다. 이때 자바스크립트 DOM은 ..
01_일반 이벤트 등록 $대상.on("이벤트이름","이벤트리스너") 02_단축 이벤트 등록 $대상.단축이벤트(이벤트리스너) jQuery에서는 일반적으로 많이 사용하는 이벤트를 좀더 쉽게 사용할 수 있게 단축 이벤트 메서드를 가지고 있다. 예를 들어, click이벤트를 등록하는 경우 단축 이벤트 메서드를 사용하면 다음과 같이 click()메서드를 이용해 처리할 수 있다. 03_등록 이벤트 제거 경우 1 : 특정 이벤트에 대한 리스너를 제거하고 싶은 경우 $대상.off("click",삭제하고 싶은 이벤트 리스너 명) 경우 2 : 특정 이벤트에 걸려있는 모든 이벤트 리스너를 제거하고 싶은 경우 $대상.off("click") 경우 3: 모든 이벤트 종류에 상관 없이 모든 이벤트를 제거하고 싶은 경우 $대상.of..
01_이벤트란? 이벤트란 이름에서 알 수 있듯이 일종의 알림 기능이다. 예를들어, 태그 요소에서 마우스를 클릭하면 웹 브라우저는 마우스와 관련된 여러가지 정보가 담긴 MouseEvent라는 객체를 생성하고 마우스 이벤트를 발생시킨다. 이때, 마우스 이벤트에 들어있는 정보는 클릭한 마우스 버튼 정보, 클릭과 함께 누른 키보드 정보, 해당 페이지에서 클릭한 마우스의 위치 정보가 담긴다. 그리고 이벤트 리스너가 실행되는데 이것은 MouseEvent객체가 리스너 함수로 넘어오게 되기때문이다. 웹페이지에서도 사용자가 마우스를 클릭하거나 키보드 키를 입력하면 브라우저는 입력정보(클릭 위치, 클릭 버튼, 입력키 값 등)을 이벤트에 담아 개발자에게 알려 준다. 개발자는 이정보를 받아 여러가지 용도에 맞게 개발을 진행한..
01_속성값 구하기 $대상.attr("속성이름") $대상.ata("data-속성이름") 일반 속성 값을 구할 때는 attr()메서드를 사용하고 "data-"로 시작하는속성의 경우 data()메서드를 이용하면 좀 더 쉽게 속성값을 구할 수 있다. 01_속성값 설정하기 $대상.attr("속성이름","값") $대상.data("data-속성이름","값")