'하이브리드 프로그래밍' 태그의 글 목록

하이브리드 프로그래밍

특강 2일차 (오전) - 자바스크립트 2015.01.06

특강 2일차 (오전) - 자바스크립트

2015. 1. 6. 09:25

하이브리드 특강 2일차 오전: 자바스크립트

웹에서 가져온 데이터를 뿌려줄때 자바스크립트를 이용해 DOM을 제어함

생성자를 이용한 객체 생성

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>
<meta charset="UTF-8">
<title>생성자 함수를 이용한 객체 생성</title>
<script type="text/javascript">
// 생성자 함수 지정
function Student(name, korean, math, english, science) {
this.이름 = name;
this.국어 = korean;
this.영어 = english;
this.수학 = math;
this.과학 = science;
 
// 메서드
this.getSum = function(){
return this.국어 + this.수학+ this.영어 + this.과학
};
this.getAverage = function(){
return this.getSum() / 4;
};
this.toString = function(){
return this.이름 + ', ' + this.getSum() + ',' + this.getAverage();
};
}
 
// 생성자 함수를 이용한 객체 생성
var student = new Student('홍길동', 100, 90, 98, 97);
document.write(student.toString());
</script>
</head>
<body>
</body>
</html>
Colored by Color Scripter
cs

라이브러리를 만들어서 이용할떄 위와 같이 사용

위와 같은 형태로 자바스크립트 상속도 가능(이번 수업에서는 배우지 않는다)

애플릿 -> 플래쉬 -> 자바스크립트

DOM 객체 트리 생성

출력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
window.onload = function() {
//변수 선언
var output = '';
output += '<ul>';
output += '	<li>JavaScript</li>';
output += '	<li>JQuery</li>';
output += '	<li>Ajax</li>';
output += '</ul>'
 
//innerHTML 속성에 문자열을 할당
document.body.innerHTML = output;
};
</script>
</head>
<body>
 
</body>
</html>
cs

요소선택

window.onload : HTML 문서가 완전히 업로드 된후 자바 스크립트 실행

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
window.onload = function () {
var spans = document.getElementsByTagName('span');
spans[0].innerHTML = '호수';
spans[1].innerHTML = '들판';
 
};
</script>
</head>
<body>
    <span>하늘</span>
    <span>하늘</span>
    
</body>
</html>
Colored by Color Scripter
cs

For 문 이용해서 요소 선택후 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
window.onload = function () {
var spans = document.getElementsByTagName('span');
 
for (var i = 0; i<spans.length; i++){
if(i%2==1){
spans[i].innerHTML = '우주';
} else {
spans[i].innerHTML = '지하';
}
}
};
</script>
</head>
<body>
    <span>하늘</span>
    <span>하늘</span>
    <span>하늘</span>    
</body>
</html>
Colored by Color Scripter
cs

ID를 이용한 접근

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
window.onload= function(){
//문서 객체를 가져옴
var header1 = document.getElementById('header_1');
var header2 = document.getElementById('header_2');
 
header1.innerHTML = '하하';
header2.innerHTML = '호호';
};
</script>
</head>
<body>
    <h1 id="header_1">Header</h1>
    <h1 id="header_2">Header</h1>
</body>
</html>

태그에 접근하는 많은 방법중 가장 빈번한 방법은 태그와 아이디

Event - inline 이벤트 처리

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event - 인라인 이벤트 처리</title>
</head>
<body>    
    <input type="button" value="이동" onclick="location.href='http://www.naver.com'">
    
    <!-- 한라인에 여러 이벤트 삽입 끝을 제외하고는 ; 삽입  -->
    <input type="button" value="확인" onclick="alert('클릭');alert('클릭')">    
</body>
</html>
Colored by Color Scripter
cs

이벤트 연결 처리

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event - script에서 이벤트 처리</title>
<script type="text/javascript">
window.onload = function(){
var header = document.getElementById('header');
 
//이벤트가 발생할 때 호출되는 함수 
function whenClick(){
alert('Click');
}
 
//이벤트 연결 
header.onclick = whenClick;
};
</script>
</head>
<body>
    <div id="header">클릭</div>    
</body>
</html>
Colored by Color Scripter
cs

다른 이벤트 연결 처리

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event - script에서 이벤트 처리</title>
<script type="text/javascript">
window.onload = function(){
var header = document.getElementById('header'); 
 
//이벤트 연결 
header.onclick = function whenClick(){
alert('클릭');
}
};
</script>
</head>
<body>
    <div id="header">클릭</div>    
</body>
</html>
Colored by Color Scripter
cs

자바스크립트 기본이벤트와 기본 이벤트 제거를 학습해야 한다.

기본 이벤트 연결 및 제거 예제

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
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 이벤트</title>
<script type="text/javascript">
    window.onload = function(){
        var aa = document.getElementById('aa');
        //이벤트 연결 
        aa.onclick=function(){
            alert('이벤트 연결');
            
            //기본 이벤트 제거 
            return false;
        };
        
        var myForm = document.getElementById('myForm');
        
        //이벤트 연결
        myForm.onsubmit = function(){
            alert('이벤트 연결');
            
            // 기본 이벤트 제거
            return false;
        };
    };
</script>
</head>
<body>
    <a id="aa" href="http://www.naver.com">이동</a>    
    <br><br>
    <form id="myForm" action="a.jsp" method="get">
        <input type="text" name="name"><br>
        <input type="submit" value="전송">
        
    </form>
</body>
</html>

이벤트 버블링 (모든 브라우저에서 지원하므로 표준)

자시쪽에서 부모쪽으로 이벤트 전파

이벤트 캡쳐링(IE는 지원하지 않는다)

부모쪽에서 자식쪽으로 이벤트 전파

전달 막는것 예제

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
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 전파</title>
<script type="text/javascript">
    window.onload = function(){
        //문서 객체에 접근
        
        var header = document.getElementById('header');
        header.onclick = function(){
            alert('header');
            //this : 이벤트가 발생한 객체
            this.style.background='pink';            
        };
        
        var paragraph = document.getElementById('paragraph');
        paragraph.onclick = function(e){
            alert('paragraph');
            this.style.background='yellow';
            /*
                인터넷 익스플로러 8이하의 버전은 이벤트가 발생할 때 이벤트 객체를
                window.event 속성으로 전달하지만, 다른 브라우저는 핸들러의 
                매개 변수로 전달
                인터넷 익스플로러 9이상에서는 매개변수, window.event 둘 다 지원                
            */
            
            var event = e || window.event;
            
            //이벤트 전달을 제거            
            event.cancelBubble = true;
            if(event.stopPropagation){
                event.stopPropagation()
            }            
                        
        };
    };
</script>
</head>
<body>
    <h1 id="header">header
        <p id="paragraph">Paragraph</p>
    </h1>
    
</body>
</html>
Colored by Color Scripter
cs

자바스크립트 마무리

'App Development > Hybrid Programming' 카테고리의 다른 글

특강 3일차 (오후) - AJAX, JQueryMobile (0)	2015.01.07
특강 3일차 (오전) - JQuery, AJAX (0)	2015.01.07
특강 2일차 (오전, 오후) - 제이쿼리 (0)	2015.01.06
특강 1일차 (오후) (0)	2015.01.05
특강 1일차 (0)	2015.01.05

PREV 1 NEXT

Software Engineer Ethan