[JS] 전문가교육 2일차 - 오후

IT 2014. 5. 25. 15:29

HTML5 + CSS3 + HTML5 API

            구조       표현       동작(JavaScript)



객체지향 자바스크립트(con.)


13. call & apply (★★★중요)

call과 apply는 jQuery 같은 프레임워크에서 굉장히 많이 쓰인다.

  • this가 가리키는 객체를 변경시킴
  • Function에 정의돼 있음
  • func.call(thisObj, arg#1, arg#1, ... arg#n)
  • func.apply(thisObj, [arg#1, arg#1, ...arg#n])
    - 배열로 전달 가능
  • func()로 호출해야하지만 func.call(), func.apply()로 호출 가능
    - call(), apply() 메서드 인자는 func() 메서드 인자로 전달된다.
16. 상속
  • 프로토타입 멤버 상속
  • 상속 통합 구현
  • 멤버 확장
    - 기존 언어(Java)의 extend를 흉내 내는 기법
    - Object의 prototype에 추가해 놓고 사용
    모든 프로토타입은 Object의 prototype을 상속받는다. 따라서 Object의 prototype에 extend함수를 붙여주고 function으로 parent를 받고 for문에서 속성을 하나씩 빼와서 property에 저장을 하는데 속성의 갯수만큼 돈다. 근데 parent[property]를 현재 객체(this[property])에 저장하는 것이다.


18. 내장객체
  • Array
    var ar = [1,2,3,4,5];
    console.log(ar.length);    //5
    var data = ar.shift() //2,3,4,5
    var data2 = ar.unshift(0) //unshift는 할당문이 필요 0,1,2,3,4,5
    ar.unshift(30);
    console.log(Ar.length);    //5

    무엇을해도 ar은 변하지 않는다. 이런 것을 "Mutable"하다라고 한다.
    배열의 크기는 늘릴 수 없다. 왜냐하면 배열은 한번 선언할때 크기를 정하니까..
    Java의 경우 런타임 시간에 크기 선언을 한다. -> int[] a = new int[3];
    C의 경우에는 int a[3];이라고 선언을 하고 나중에 a = new int[5];라고하는 것은 방이 5개인 것을 새로 만든것이지 배열의 크기를 바꾼것이 아니다.
  • 정규표현식
  • JSON


19. 네임스페이스

  • 라이브러리의 독립성을 보장
  • 빈 객체를 하나 만들어준다.
    var People = {};



이벤트 프로그래밍

1. 이벤트와 이벤트 핸들러

  • 이벤트와 이벤트 핸들러 정의 및 종류
    - 이벤트(event)
    - 이벤트 핸들러(Event Handler)
      • 이벤트를 처리하는 기능
      • 이벤트 처리 루틴
      • HTML 문서에서 발생하는 이벤트는 onxxx 식으로 이벤트 핸들러 속성이 정의되어 있따.
        ex) 클릭 이벤트 : onclick
  • 이벤트 핸들링
    - HTML 태그의 속성으로 등록    //HTML태그와 이벤트 함수가 섞여서 비추천하는 방법
    ex) <input ........ onclick="handler()">
    - 요소 객체의 메서드로 등록
    ex) document.getElementById("options").onclick = function() { ...; }
  • 이벤트 핸들러
    - 함수의 인자로 event 객체가 전달됨, 함수 정의시 선언안해도 자동 전달됨
    - 이벤트 핸들러 코드에서 false를 반환하면 요소의 기본적인 액션을 취소시킨다.
      • event.preventDefault();와 같음

0123


event.html


Colored By Color Scripter™

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head> <title>이벤트 예제</title>
    <script>
        window.onload = function() {
            //var pElement = document.querySelector("p");    처음 <p>만 선택
            var pElement = document.querySelector("p#one");    //<p> 중 id값이 one인 element만 반환
            pElement.onclick = function() {
                this.textContent = "감사합니다";
            }
            var pElement2 = document.querySelector("p#three");
            pElement2.onclick = function() {
                this.textContent = pElement.textContent;
            }
        }
    </script>
</head>
<body>
    <p id="one">여기를 클릭하세요 1</p>
    <p>여기를 클릭하세요 2</p>
    <p id="three">여기를 클릭하세요 3</p>
    <p>여기를 클릭하세요 4</p>
    <p>여기를 클릭하세요 5</p>
</body>
</html>



2. DOM Level 2 이벤트 핸들링

  • 이벤트 핸들링
    - elem.addEventListener(string type, Function handler, useCqpture);
    • type : 핸들링 하고 싶은 이벤트. DOM Level0 의 이벤트 핸들러에서 on을 빼면 된다.
    • handler : 이벤트가 발생했을 경우 호출될 이벤트 핸들링 함수. 인자로 이벤트 객체가 전달된다.
    • useCapture : true일 경우 이벤트 버블링 현상일 캡처링 단계에서만 호출되도록 한다. false(default)일 경우 타겟 단계와 버블링 단계에서 호출됨.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head> <title>이벤트 예제</title>
    <script>
        window.onload = function() {
            //var pElement = document.querySelector("p");    처음 <p>만 선택
            var pElement = document.querySelector("p#one");    //<p> 중 id값이 one인 element만 반환
            pElement.onclick = function() {
                this.textContent = "감사합니다";
            }
            var pElement2 = document.querySelector("p#three");
            pElement2.onclick = function() {
                this.textContent = pElement.textContent;
            }
            var pElement3 = document.querySelector("p#two");
            pElement3.addEventListener("click", function() {
                this.textContent = "Hello~~";
            });
            
        }
    </script>
</head>
<body>
    <p id="one">여기를 클릭하세요 1</p>
    <p id="two">여기를 클릭하세요 2</p>
    <p id="three">여기를 클릭하세요 3</p>
    <p>여기를 클릭하세요 4</p>
    <p>여기를 클릭하세요 5</p>
</body>
</html>





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head> <title>이벤트 예제</title>
    <script>
        window.onload = function() {
            //var pElement = document.querySelector("p");    처음 <p>만 선택
            var pElement = document.querySelector("p#one");    //<p> 중 id값이 one인 element만 반환
            pElement.onclick = function() {
                this.textContent = "감사합니다";
            }
            var pElement2 = document.querySelector("p#three");
            pElement2.onclick = function() {
                this.textContent = pElement.textContent;
            }
            var pElement3 = document.querySelector("p#two");
            pElement3.addEventListener("click", function() {
                this.textContent = "Hello~~";
            });
            var pElement4 = document.querySelector("#four");
            pElement4.addEventListener("click", function() {
                alert(pElement3.textContent);
            });
            
        }
    </script>
</head>
<body>
    <p id="one">여기를 클릭하세요 1</p>
    <p id="two">여기를 클릭하세요 2</p>
    <p id="three">여기를 클릭하세요 3</p>
    <p id="four">여기를 클릭하세요 4</p>
    <p>여기를 클릭하세요 5</p>
</body>
</html>



3. 이벤트 캡처링/버블링 예

캡처링 : 바깥에서부터 안쪽으로 이벤트가 처리된다

버블링 : 안쪽에서부터 바깥으로 이벤트가 처리된다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script>
        window.onload = function() {
            var elements = document.querySelectorAll("div");
            for(var i=0; i<elements.length; i++) {
//function(event)에서 event생략해도 자동으로 event들어간다.
                elements[i].addEventListener("click", function(event) {
                    console.log(this.getAttribute("id"));
                    event.stopPropagation();
                }, true);
            };
        };
    </script>
</head>
<body>
    <div id="a">AAAAAA
        <div id="b">BBBBBB
            <div id="c">CCCCCC
            </div>
        </div>
    </div>
</body>
</html>



5.

onoffline : 오프라인이면 로컬에 저장된걸 읽는다.

ononline : 온라인이면 서버에 올린다

저작자표시

'IT' 카테고리의 다른 글

[PhoneGap] Cordova 3.0 설치 (Android, Tizen - Windows)  (1) 2014.06.18
[JS] 전문가교육 2일차 - 오전  (0) 2014.05.25
[JS] 전문가교육 1일차 - 오후  (0) 2014.05.24
[JS] 전문가교육 1일차 - 오전  (0) 2014.05.24
Posted by 밍쫑
,

티스토리툴바