:: 오픈프레임워크

오픈프레임워크_Day36

OpenFrameWork 2015. 5. 4. 17:30

### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도

,,, : 같은 항목 내에 구분 기호

목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제

###################################
1. 이론 및 정보
-----------------------------------

*******************DOM에서는 항상 태그 공백을 주의 해야함!!!*******************

-----------------------------------
* item.parentNode.removeChild(item);

위 코드를 보면 부모로 빠져 나가서 지우는 것을 알 수 있다

자기 자신을 지우는 것은 불가능

-----------------------------------
6. 사용자 정의 객체

(1) 클래스 만들기

1) java

class 클래스명{

인스턴스 변수;

...

메서드();

...

}

2) javascript

클래스명 = function(parameter){

this.인스턴스변수 = parmeter;

...

}

(2) 메서드 만들기 (function이 메서드를 만드는 건지, 클래스는 만드는 건지 잘 구별해야함. 리턴값을 받는 변수를 보고)

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

(3) Object를 이용하여 클래스 만들기

var obj = new Object();

obj.id = "hong";

obj.name = "홍길동";

obj.setValue = function(i,n){

this.id = i;

this.name = n;

}

(4) 패키지 만들기

var kr = new Object(); //패키지를 만들때에는 kr = {};

var kr.co = new Object(); // kr.co = {};

kr.abc = function(id,name){

this.id = id;

this.name = name;

}

kr.abc = function(id,name){

this.id = id;

this.name = name;

}

kr.co.ghi = function(id,name){

this.id = id;

this.name = name;

}

-----------------------------------

* 무명 함수 -> 재사용을 하지 않고 여기서만 한번 쓰겠다는 의미, 별도의 함수를 따로 만들지 않음

그리고 이 문법이 클래스를 만드는데 사용됨

-----------------------------------

* 함수와 메서드의 차이

똑같은 function인데 함수와 메서드는

클래스에 소속이 되어 있으면 메서드,

소속이 되어있지 않으면 함수

또한 클래스를 만들때에는 생성자의 역할을 함

-----------------------------------

* 클래스 활용

보통 클래스는 보통 .js 파일(external 방식)로 만들어서 사용

-----------------------------------

7. 이벤트

(1) 이벤트 리스터 방식의 함수

1) addEventListener(이벤트, 이벤트 핸들러, 캡쳐 타입)

attachEvent(이벤트, 이벤트 핸들러) - IE 구버전 방식

2) removeEventListener(이벤트, 이벤트 핸들러, 캡쳐 타입)

detachEvent(이벤트, 이벤트 핸들러) - IE 구버전 방식

(2) 이벤트 정보

function fnClick(){

var event = window.event;

...

var target = e.target; //실제 이벤트 대상의 정보

var target = event.target; //실제 이벤트 대상의 정보

위 두개중 아래?

}

...................................

예전 방식

function fnClick(e){

var target = e.srcElement;

}

-----------------------------------

* 앞으로는 onclick 이런 방식으로 이벤트를 하지 말아라? 디자인은 건들이지 말아라!

프로그래머는 디자인을 건들이지 말아라!!!!

또한 유지보수 측면에서도 힘듬

<input type="button" value = "버튼" onclick="fnProcess1()"/>

-----------------------------------

* *.js 파일들이 모여서 jquery, node.js,.. 같은 것들이 만들어짐

-----------------------------------

###################################
2. 설정 및 그 밖에
-----------------------------------

-----------------------------------

-----------------------------------
###################################
3. 소스코드 또는 실습
-----------------------------------

3-1

/JavascriptExam/WebContent/제7강 DOM/exam2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     window.onload = function (){
          /*
          var root = document.documentElement;//문서의 root를 알려줌
          var body = root.lastChild;
          var lastDiv = body.lastChild;
          var text = lastDiv.firstChild;//c 입니다.를 나타냄
          var value = text.nodeValue;
          // *******************DOM에서는 항상 태그 공백을 주의 해야함!!!*******************
          alert(value);
          */

          /*
          var value = document.documentElement.lastChild.lastChild.firstChild.nodeValue;
          alert(value);
          */

          // 공백 무시하고 찾아 가는 방법
          //alert(document.getElementById("c").innerHTML);
          var divNode = document.getElementsByTagName("div").item(2);
          var childList = divNode.childNodes;
          for (var i = 0; i < childList.length; i++) {
               var child = childList.item(i);

               // 텍스트 노드와 같은지 비교
               if(child.nodeType == 3){
                    alert(child.nodeValue);
               }
          }
     }
</script>
</head>
<body>
     <div id="a">a 입니다.</div>
     <div id="b">b 입니다.</div>
     <div id="c">c 입니다.</div>
</body>
</html>

-----------------------------------

3-2

/JavascriptExam/WebContent/제7강 DOM/exam3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     var count = 0;
     function fnAppendItem() {
          count++;
          var newItem = document.createElement("div");
          newItem.setAttribute("id","item_"+count);

          newItem.innerHTML = "새로 추가된 아이템["+count+"] "+
                    "<input type='button' value='삭제' onclick='fnDeleteItem("+count+")'/>";

          var itemListNode = document.getElementById("itemList");
          itemListNode.appendChild(newItem);
     }

     function fnDeleteItem(count) {
          var item = document.getElementById("item_"+count);
          if(item != null){
               // 부모로 빠져 나가야 삭제가 가능
               // 자기 자신을 삭제가 불가능
               item.parentNode.removeChild(item);
          }
     }
</script>
</head>
<body>
     <input type="button" value="추가" onclick="fnAppendItem()"/>
     <div id="itemList"></div>
</body>
</html>

-----------------------------------

3-3

/JavascriptExam/WebContent/제8강 사용자 정의 객체/exam1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
/*
* class Book{
     String title;
     String author;

     Book(String title,String author){
          this.title = title;
          this.author = author;
     }

     void setValue(String title,String author){
          this.title = title;
          this.author = author;
    }
*/
     window.onload = function(){
          Book = function(title, author){
               this.title = title;
               this.author = author;
          }

          var b1 = new Book('노인과 바다', "해밍웨이");
          alert(b1.title+", "+b1.author);

          Book.prototype.setValue = function(title, author){
               this.title = title;
               this.author = author;
          }

          b1.setValue('아기공룡 둘리', '김수정');
          alert(b1.title+", "+b1.author);
     }
</script>
</body>
</html>

-----------------------------------

3-4

/JavascriptExam/WebContent/js/member.js

Member = function(name, id, sno){
     this.name = name;
     this.id = id;
     this.sno = sno;
};

Member.prototype.setValue = function(name, id, sno){
     this.name = name;
     this.id = id;
     this.sno = sno;
};

Member.prototype.toString = function(){
     return this.name + "[" + this.id + "] : " + this.sno;
};

-----------------------------------

3-5

/JavascriptExam/WebContent/제8강 사용자 정의 객체/exam2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="../js/log.js"></script>
<script src="../js/member.js"></script>
<script>
     window.onload = function(){
          var mem1 = new Member("홍길동", "hong", "7712121");
          log(mem1.toString());
          //log(mem1.getAge()); //나이출력 되게 만들어라

          mem1.setValue("임꺽정", "leem", "0310103");
          log(mem1.toString());
          //log(mem1.getAge()); //나이출력 되게 만들어라
     }
</script>
</head>
<body>
<div id="debugConsole" style="border:1px solid red"></div>
</body>
</html>

-----------------------------------

3-6

/JavascriptExam/WebContent/제9강 이벤트/exam1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
     function fnProcess1(){
          alert("fnProcess1 호출됨...");
     }

     function fnProcess2(){
          alert("fnProcess2 호출됨...");
     }



     window.onload = function(){
          var btn1 = document.getElementById("btn1");
          //btn1.onclick = fnProcess1; // callback함수에 주소를 넘겨줌, callback 처리 방식
          //btn1.onclick = fnProcess2;

          // fnProcess1, fnProcess2 두개의 함수를 click했을때 동작하게 하려면 이벤트 리스터 사용
          //btn1.addEventListener("click", fnProcess1, false);
          //btn1.addEventListener("click", fnProcess2, false);

          // 예전 방식은 아래와 같음
          btn1.attachEvent("onclick", fnProcess1);
          btn1.attachEvent("onclick", fnProcess2);

          // 이벤트 삭제
          //btn1.removeEventListener("click", fnProcess2, false);

          // 예전 방식은 안먹힘?
          btn1.detachEvent("onclick", fnProcess2);
     }

</script>
</head>
<body>
     
     
     
     <input type="button" value = "버튼" id="btn1"/>
</body>
</html>

-----------------------------------

3-7

/JavascriptExam/WebContent/js/event.js

js = {};
js.Event = {};

js.Event.addListener = function (element, name, observer, useCapture){
     useCapture = useCapture || false;

     if(element.addEventListener){
          // 최신 웹 브라우져
          element.addEventListener(name,observer,useCapture);
     }else{
          // 지원 되지 않는 예전 버전
          element.attachEvent("on"+name,observer);
     }
};

js.Event.removeListener = function (element, name, observer, useCapture){
     useCapture = useCapture || false;

     if(element.removeEventListener){
          // 최신 웹 브라우져
          element.removeEventListener(name,observer,useCapture);
     }else{
          // 지원 되지 않는 예전 버전
          element.detachEvent("on"+name,observer);
     }
};

js.Event.getTarget = function (event){
     if(event == null){
          return null;
     }
     else if(event.target){
          // 표준 웹 브라우져일 경우
          return event.target;
     }
     else if(event.srcElement){
          // 구 IE일 경우
          return event.srcElement;
     }
};

-----------------------------------

3-8

/JavascriptExam/WebContent/제9강 이벤트/exam2.html

-----------------------------------

3-9

/JavascriptExam/WebContent/제9강 이벤트/exam3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="../js/log.js"></script>
<script src="../js/event.js"></script>
<script>

     window.onload = function(){
          var btn1 = document.getElementById("btn1");
          js.Event.addListener(btn1, "click", fnProcess1, false);
     }

     function fnProcess1(e){
          // 예전 방식과 최근 방식을 병행하기 위해 아래와 같이 함
          var event = e || window.event;
          var target;
          // 꺼내 오는 방식이 다름. 하나는 e.target, 나머지는 e.srcElement;
          /*
          if(event.target){
               target = event.target;
          }else{
               target = event.srcElement;
          }
          */

          // event.js의 js.Event.getTarget 을 이용해서 쉽게 변경 하시오
          target = js.Event.getTarget(event);

          log("이벤트 대상 : "+target.nodeName);
          log("이벤트 대상의 ID : "+target.id);
          log("이벤트 타입 : "+target.type);
     }

</script>
</head>
<body>
     <input type="button" value="버튼" id="btn1" />
     <br /><br />
     <div id="debugConsole" style="border: 1px solid red"></div>
</body>
</html>

-----------------------------------

###################################
4. 과제
-----------------------------------

4-1
/JavascriptExam/WebContent/제8강 사용자 정의 객체/exam2.html

주석 해결하기

-----------------------------------

###################################
5. 과제 해결
-----------------------------------

-----------------------------------

###################################

6. 기타

-----------------------------------

5월 15일 프로젝트 주제 발표

공부로는 쇼핑몰이 좋으나

트랜드 sns 활용

-----------------------------------

저작자표시 비영리 변경금지 (새창열림)

'OpenFrameWork' 카테고리의 다른 글

오픈프레임워크_Day38 (0)	2015.05.07
오픈프레임워크_Day37 (0)	2015.05.06
오픈프레임워크_Day35 (0)	2015.05.01
오픈프레임워크_Day34 (0)	2015.04.30
오픈프레임워크_Day33 (0)	2015.04.29

일	월	화	수	목	금	토
		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

오픈프레임워크_Day36

'OpenFrameWork' 카테고리의 다른 글

카테고리

달력

링크

티스토리툴바