My StudyRoom

toggle메서드는 두가지 특징이 있다!!

1) 시간 매개 변수 전달 시 :

$('img').toggle(1000);

애니메이션메서드로써  hide(),show() 효과를 적용

2) 함수 매개 변수 전달 시 :

 cilck이벤트로써 전달된 함수를 순차적으로 클릭할때마다 실행시켜줌 

.toggle(함수1, 함수2, 함수3);

=>  첫번째 클릭 : 함수1 실행

두번째 클릭 : 함수2 실행

세번째 클릭 : 함수3 실행

네번째 클릭 : 함수1 실행   => 반복 실행

※ hover는 모바일에서는 지원이 안된다 (클릭만 가능 !)

var Array = document.getElementsbyClassName('a');

for (var i=0; i<Array.length; i++){

Array[i].addEventListener('click',handleClick);

}

function handleClick(e){

this.style.color = 'red'

}

[  onclick 사용 ]

<button onclick="click(this)">1</button>

<button onclick="click(this)">2</button>

function click(a){

a.classList.add('red');

}

http://www.devkuma.com/books/3

https://www.codingfactory.net/jquery-table-of-contents

[ Event ]

웹브라우저에서 버튼클릭, 마우스 움직이는 등의 모든 행위가 '이벤트,'

이벤트 발생 시 함수의 실행문이 수행되도록 이벤트를 지정하는 것 '이벤트 핸들러'

1. click 메서드 : click

2. mouseover / mouseout 메서드 (반복)

: 자식요소까지도 이벤트가 발생됨

: 마우스가 범위 안에 있으면 반복 실행 됨

3. mouseenter / moseleave 메서드 (exporer 전용 이벤트) (일회성)

: 자기 자신(해당 요소)에 마우스포인터가 와야 발생

   -> 말그대로 enter 할 때 , 마우스 포인터가 해당요소에 들어왔을 때 함수 실행

   ->  말그대로 leave할 때, 마우스포인터가 해당요소를 벗어날 때 함수 실행

: 마우스가 들어왔을 시점에 한 번 실행 됨

4. hover 메서드

: hover( Infunction(){} , Outfunction(){});

: mouseenter와 mouseleave를 한 번에 입력 

5. toggle 메서드

: 누를 때마다 실행 함수를 차례 대로 번갈아 가면서 실행

: 선택된 요소에 대해 hide(), show()를 번갈아서 실행 됨

6. bind 메서드 ( 이벤트 연결 )

: 여러 이벤트를 공통된 함수에 연결

: 개체와 이벤트를 묶어주는 역할

: event 이름을 인자로 넘겨 해당 event와 같은 효과를 나타냄

: bind(eventName, function(event){})

     : 참고  http://www.nextree.co.kr/p9529/

http://jinolog.com/programming/javascript/2011/03/21/jquery-ready-function.html

[  createElement ]

- element를 create 함

[ appendChild ]

- child를 append(덧붙이다) 함

[ innerHTML ]

     - HTML 노드로 인식 -> html 태그를 해석할 수 있음

- 객체의 시작태그와 종료태그 사이의 HTML을 가져오거나 삽입

- HTML, TABLE, TBODY, TFOOT, THEAD, TR 객체 요소에서의 innerText 속성은 값을 가지고 올 수만 있고 설정할 수는 없다. 

  테이블과 관련한 요소의 값을 변경하려면 테이블 오브젝트 모델을 별도로 이용해야 한다.

[ innerText ]

- 스트링, 즉 텍스트만 인식 

- 시작 태그와 종료 태그 사이에 텍스트를 가져오거나 삽입 (table)

- COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 객체 요소에서의 innerHTML 속성은 값을 가지고 올 수만 있고 설정할 수는 없다.

[ outerHTML/ outerText ]

- inner와 비슷 하지만 outer는 태그를 포함해서 값을 취하고, inner는 시작태그와 종료태그 사이에서 값을 취함

[ 함수 스코프(scope) ]

- 함수스코프 : 변수 또는 함수의 유효범위

- 전역변수 / 전역함수 : 자바스크립트 어디에서나 사용 가능, 호출 가능

  지역변수 / 지역함수 : 스코프 영역에서만 사용 가능, 호출 가능

- 지역 변수 : 스코프 영역에서 선언한 변수, 스코프 영역에서만 사용할 수 있음

- 지역 함수 : 스코프 영역에서 선언한 함수, 스코프 영역에서만 호출할 수 있음