본문으로 바로가기

[HTML] 서버돌리지 않고 창 띄우기

category Back-end/Spring 2016. 5. 2. 11:28

서버를 돌릴 필요없이 바로 확인할 수 있다.

노트패드를 다운받는다.


그리고 text문서를 .html을 붙여서 html 파일을 만든다.

이 파일 오른쪽을 눌러 notepad로 수정을 누른다.


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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>
    <head>
    
        <script type="text/javascript">
            
            function hello(message){
                alert(message+" 반갑습니다.");
            }
            window.onload = function() {
                alert("잘됩니다~");
                
                //var p1 = $("#p1");
                var p1 = document.getElementById("p1");
                
                //p1.click()function({...});
                p1.onclick = function() {
                    alert("반갑습니다~");
                };
                p1.onmouseover = function(e) {
                    alert(e.pageX + " " + e.pageY);
                    alert("마우스 안녕?");
                };
                p1.onmouseout = function() {
                    alert("마우스 잘가~");
                };
                p1.onmousewheel = function(e) {
                    console.log(e);
                }
            };
        </script>
        
    </head>
    <body>
        <input    type="button" 
                id="clickButton" 
                value="눌러보세요~"
                onclick="alert('안녕');"
                />        
        <input    type="button" 
                id="clickButton2" 
                value="더블클릭 해보세요~"
                ondblclick="alert('안녕');"
                />    
        <br/><br/>
        <div    id="div1"
                style="width:150px; height:150px; background-color:#000;"
                onclick="for(var i=0; i<10; i++ ) {alert('안되는줄 알았지?');}">
        </div>
        <br/>
        <div    id="div2"
                style="width:150px; height:150px; background-color:#000;"
                ondblclick="alert('안되는줄 알았지?');">
        </div>
        <br/><br/>
        <a href="javascript:void(0);" onclick="alert('^^');">클릭해보세요</a>
        <span    id="span1"
                onclick="hello('안녕?');">
            클릭!!
        </span>
        <input     type="text" id="text1"
                onfocus="alert('선택되었습니다.');"/>
        <input     type="text" id="text2"
                onblur="alert('선택해제되었습니다.');"
                onfocus="alert('선택되었습니다.');"/>
        <p id="p1">onclick 속성을 사용하지 않았습니다~</p>
    </body>
</html>
cs


제이쿼리를 쓰면 무거워지므로

이런 방법으로 쿼리쓰지 않고 작동시킬수 있다.


또한 .hta 파일을 붙이면 어플리케이션으로 바로 볼수 있다.



심화공부를 하기위해 다음의 공부가 필요하다.

자바스크립트 클로져

자바스크립트 프로토타입

자바스크립트 오브젝트

'Back-end > Spring' 카테고리의 다른 글

[JPA] JPA에 관해..  (0) 2016.05.04
[HTML] 자동완성 기능 만들기  (0) 2016.05.03
[HTML5] WebSocket을 이용한 채팅 만들기  (0) 2016.04.22
[HTML5] 웹소켓( WebSockat )  (2) 2016.04.22
[Spring] 게시판 만들기  (0) 2016.04.21