객체지향 클래스 개념 및 JQuery 기본 문법

▣ 클래스 : 연관 있는 함수끼리 묶어놓은 문법

---

■ 만드는 방법

1) 오브젝트 리터럴

2) 함수 방식 클래스

3) 프로토타입 방식 클래스

함수를 사용하기 위해 함수 호출을 해준 것처럼

클래스에 담긴 기능을 사용하기 위해서는 인스턴스를 생성해야함.

※ 인스턴스 = 객체 

function Calc(){
    this.add = function(a,b){
    alert("두 수의 합은"+(a-b)+"입니다.");
    }
    this.sub = function(a,b){
    alert("두 수의 차는"+(a-b)+"입니다.");
    }
    this.mul = function(a,b){
    alert("두 수의 곱은"+(a*b)+"입니다.");
    }
    this.div = function(a,b){
    alert("두 수의 나눈 값은"+(a/b)+"입니다.");
    }
}

순서1) 인스턴스 생성

순서2) 접근연산자(.)를 사용한 프로퍼티와 메서드 접근

var cal1 = new Calc();
 
cal1.add(10,20);

■ 프로퍼티 : 클래스 내부에 만들어진 변수

■ 메서드 : 클래스 내부에 만들어진 함수를 메서드 또는 멤버함수라고 부름 

▣ jQuery : 자바스크립트 DOM 작업을 쉽게하기 위한 크로스브라우징 라이브러리다.

---

■ 자바스크립트 DOM

노드 추가,삭제,이동 , 스타일변경 , 속성변경, 이벤트처리 등의 기능을하는 코어 라이브러리다.

■ jquery 사용법

1) jQuery 라이브러리 연결 

<script src="../libs/jquery-1.10.0.min.js"> </script>

2) ready() 메서드 사용

<script src="../libs/jquery-1.10.0.min.js"></script>
<script>
// 예제 : li 태그 글자색을 빨간색으로 변경하기 
$(document).ready(function(){
$("#menu li").css("color","#f00"); 
})
 
// 예제 : select 선택자가 적용된 노드 지우기
$(document).ready(function(){
$("li.select").remove();
})
 
</script>

※ $ = 함수

▣ 함수 단위 프로그래밍

---

■ 변수

□ 리터럴 방식 : 말 그대로 원시라는 뜻을 가지고 있다.

var age = 10 , var str = "hi";

□ 객체 방식

var age = new Number(10) , str = new String("hi");

보통은 리터럴 방식을 많이 사용한다.

■ 함수

□ 리터럴 방식

var hello = function(){
    alert("hi")
}

□ 일반적인 방식

function hello(){ .. }

 

□ 객체 방식 

var hello2 = new Function("name","alert(name+'님');");

보통은 일반적인 방식을 많이 사용한다.

■ 익명 함수 : 함수 리터럴 방식으로 만들어진 이름없는 함수로서 특정 부분에 사용되거나 

                   일회용 함수로서 쓰임.

$(document).ready(function(){
 
    // 익명함수 사용전
    function hello(){
        alert("hi");
    }
    $("#btnStart").click(hello);
 
 
    // 익명함수 사용후
    $("#btnStart").click(function(){
        alert("hi");    }
    })
 
}

■ 중첩 함수

□ 사용 이유1 : 함수 내부에서만 사용하는 기능을  재사용 또는 

                    구분을 짓기 위해 내부에 만들어둠

예시) 1초에  한번씩 안녕하세요를 출력하세요.

function hello(){
    document.write("안녕하세요");
}
 
 
function startHello(){
    setInterval( hello , 1000);
}

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

function startHello(){
 
    setInterval( function() {
 
    document.write("안녕하세요");
 
  }    , 1000);
 
}

□ 사용 이유2 : 중복 코드 또는 코드 그룹화 제거

함수 내부의 커다란 기능이나 중복코드를 내부함수로 만들어 재사용함.

예시) 텝 메뉴를 만드는데 필요한 기능함수3개가 있다.

이 기능함수는 오직 텝메뉴만을 위해 사용하기 때문에 굳이 외부로 뺄 필요없이

텝 메뉴 함수 내부 안에서 모두 처리하게 한다. 

■ each 반복문

[type1]

$("selector").each(function(index,element) { alert(index + element); });
 
index = 반복문의 회전수
element = $(this) = 현재 선택된 요소

[type2]

$.each(array, function(i,e){ alert(e); } );
 
$.each() 함수는 특정한 집합을 반복문 형태로 사용할 수 있다.

▣ jquery 필터셀렉터

---

페이지에 특정 요소를 잘 추출하려면 필터셀렉터를 알아야한다. https://javacpro.tistory.com/40 [버물리의 IT공부]

 :fitst

첫번째로 일치하는 요소를 가져온다.

 :last

마지막으로 일치하는 요소를 가져온다.

 :even

짝수번째 요소를 모두 가져온다 ( first index : 0 )

 :odd

홀수번째 요소를 모두 가져온다 ( first index : 0 )

 :eq(index)

인자로 전달된 index에 해당하는 요소를 가져온다. ( first index : 0 )

 :gt(index)

인자로 전달된 index 보다 큰 index를 가진 요소를 모두 가져온다.

 :lt(index)

인자로 전달된 index 보다 작은 index를 가진 요소를 모두 가져온다.

 :has(selector)

인자로 전달된 selector 요소를 하나 이상 포함하고 있는 요소를 가져온다.

 :not(selector)

인자로 전달된 selector 와 일치하지 않는 모든요소를 가져온다.

사용예시 : https://jdh5202.tistory.com/447