위치 css, animate, javascript 클래스

◎ 좌표 구하기

(지역좌표, 전역좌표의 차이는 CSS 정리 부분 참조)

지역좌표 : $대상.position().left, top

지역좌표 설정 : 대상.css();

전역좌표 : $대상.offset().left, top

$대상.offset({left:xxx, top:xxx});

부모좌표: $대상.offsetParent();

==========================================================

◎ 요소의 크기

==========================================================

◎ 윈도우 창 관련

console.log('screen');

console.log(screen.width);

console.log(screen.height);

console.log('screen available');

console.log(screen.availWidth);

console.log(screen.availHeight);

console.log('window 기본크기');

console.log(window.innerWidth);

console.log(window.innerHeight);

console.log('$(document) 기본크기 + 메뉴바 + 툴바 (IE 전용)');

console.log($(document).width());

console.log($(document).height());

console.log('$(window) 기본크기 + 메뉴바 + 툴바 + 스크롤바 (IE 전용)');

console.log($(window).width());

console.log($(window).height());

console.log('윈도우 크기 설정 (IE, 팝업창 전용)');

window.resizeTo(100,100);

$(window).on('resize', function(){

var strInfo = '';

strInfo += 'window.outerWidth = '+ window.outerWidth + '<br>';

strInfo += 'window.outerHeight = '+ window.outerHeight + '<br>';

$('#info').html(strInfo);

});

$('#popup').on('click', function(){

var newWindow = window.open('https://www.google.co.kr/', 'testWindow', 'width=500px, height=500px', 'Google');

var outerWidth = window.outerWidth;

var outerHeight = window.outerHeight;

console.log(newWindow.width);

newWindow.moveTo( (outerWidth/2)-250, (outerHeight/2)-250 );

//자기자신 이동 this 대신 self

//self.newWindow.moveTo( (outerWidth/2)-250, (outerHeight/2)-250   );

//팝업창 내부의 신규 팝업창을 띄우는 경우 상대 좌표를 따름

moveBy(dx,dy);

});

===============================================================================

◎ 스크롤 이벤트 처리

console.log('스크롤');

window.pageXOffset

window.pageYOffset

window.scrollTo(x, y);

window.scrollBy(x, y);

//스크롤 이벤트 처리

//$(window).on('scroll', function(){});

===============================================================================

◎ 마우스 좌표 구하기

console.log('마우스 좌표');

//윈도우를 기준으로하는 전역위치

//mouseEvent.clienX, clientY

//문서를 기준으로 하는 전역 위치

//mouseEvent.pageX, paveY

//클릭한 지역위치 구하기

//e.pageX - $(대상).offset().left();

//e.pageY - $(대상).offset().top();

===================================================================

easing.js 를 통해 애니메이션 곡선을 줄 수 있음!

show()

hide()

fadeIn()

fadeOut()

slideDown()

slideUp()

animate()

==================================================================

◎자바스크립트 클래스

리터럴 방식

함수방식

function 클래스이름 () {

this.프로퍼티1: 초기값1,

this.프로퍼티1: 초기값2,

}

프로토타입 방식

클래스명.prototype.메서드1 = function () {

}

=====================================================

●인스턴스

클래스를 사용하기 위해 일반적으로 생성하는 객체

한페이지에 두개의 탭 패널이 있는 경우 두개의 클래스를 만들지 않고 하나의 탭 패널 클래스를 만든 후 두개의 탭 패널 인스턴스를 만들어 사용

ex) var 인스턴스 = new TabPanel();

●객체

인스턴스의 또다른 지칭명.

두 용어 모두 클래스의 실체를 나타냄

● 프로퍼티

클래스 내부에 만드는 변수(멤버 필드)

● 메서드

클래스에 만드는 함수(멤버 변수)

======================================================

● 리터럴 방식 클래스 예제

단! 클래스 1번만 사용가능

======================================================

● 함수 방식 클래스 예제

코드 재사용이 가능

단, 취약점이 있어 잘 사용되지 않음

=======================================================

● 프로토 타입 방식의 클래스 생성

=======================================================

● 예제

/*

//리터럴 방식의 클래스 생성

var user = {

name: '이름자리',

age: '99',

showInfo: function(){

document.write('name = ' + this.name + ", age = " + this.age);

}

}

*/

/*

//함수 방식의 클래스 생성

function User () {

this.name = '이름자리';

this.age = '99';

this.showInfo = function(){

document.write('name = ' + this.name + ", age = " + this.age);

}

}

*/

//프로토 타입 형식의 함수 호출

function User () {

this.name = '이름자리';

this.age = '99';

}

User.prototype.showInfo = function() {

document.write('name = ' + this.name + ", age = " + this.age);

}

$(document).ready(function() {

//메서드 접근

//user.showInfo();

//함수형 클래스 호출

var user = new User();

user.showInfo();

});