Link
11-28 22:35
«   2020/11   »
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          
Archives
Today
1,619
Total
1,176,191
관리 메뉴

꿈 많은 사람의 이야기

펄 자바스크립트 사용 본문

perl

펄 자바스크립트 사용

이수진의 블로그 이수진의 블로그 2017. 10. 11. 11:27


이번에는 펄을 이용해서

자바스크립트를 사용하는 방법에 대해 알아볼까합니다

펄에 자바스크립트를 적용하려면 당연히 웹 페이지로 제작을 해야겠죠?


간단하게만 사용해보고 넘어가겠습니다

사용 방법만 알면, HTML과 Javascript를 적용하실 줄 아시는 분들은 척척 하실 거라 생각되기 때문입니다~



아마도 펄을 지금 보고 계신 분들은 기본적인 프로그래밍 지식이 있으신 상태에서 오셨을꺼라 생각하기 때문인데요

(왜냐하면 우리나라에선 perl을 먼저 배우지 않고, C, Java 같은 언어를 먼저 배우고 오고 또, 펄이 익숙한 언어는 아니라고 생각해서 입니다. )

진짜 간단하게 사용방법만 설명하고 넘어가겠습니다~


먼저 페이지 숨기기 기능이에요

 

이렇게 할 겁니다!

 

제 블로그 순서대로 따라 오셨다면 웹 페이지에 출력하시는건 아실거에요~

모르시면 perl 거의 초반 목록에 있으니 참고하세요!

소스는 아래와 같습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
print "Content-type: text/html \n\n";
print("<html>");
print("    <head>");
print("        <body>");
print("<p id='hide'>hide~~~</p>");
print("<button id='btn'>click</button>");
print("        </body>");
print("    </head>");
print("</html>");
print("<script> \n");
print("var btn = document.getElementById('btn'); \n");
print("console.log(btn); \n");
print("btn.onclick = function() {  document.getElementById('hide').style.display = 'none';  } \n");
print("</script>");
 
cs

 

이렇게 하시면 되요~

좀 까다롭죠?

하나하나 print해줘야하고요 ㅠㅠㅠ

이렇게 하는거 같더라구요(사실 저도 잘 몰라요)

 

 

제가 공부한게 많이 부족해서 그런것도 있겠지만

혹시 다른 방법 아시면 알려주시면 감사하겠습니다

 

 


그리고 2번째는 아래와 같이

메뉴바를 만들고 마우스 오버, 클릭시 색상이 변하게 할 겁니다!

 

 

 

이렇게 해볼겁니다!


 

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
print("
<!DOCTYPE html>
<head>
    <meta charset=\"UTF-8\">
    <title>Document</title>
    <style>
        
        #topMenu ul{
            overflow: hidden;
        }
        
        #topMenu li{
            width: 200px;
            height: 40px;
            border: 1px solid red;
            float: left;
            background-color: gray;
        }
        
        
    </style>
    
    <script>
 
        var menuStr = ['HOME','GALLERY','PROFILE','GUEST','BOARD'];
        window.onload = function(){
            var topMenu = document.getElementById('topMenu'); 
            var ul = document.createElement(\"ul\");
            topMenu.appendChild(ul);
            var tmpli = null;
            for(var i = 0 ; i < menuStr.length ; i++){
                li = document.createElement(\"li\");
                li.innerText = menuStr[i];
                li.style.listStyle = \"none\";
                li.style.textAlign = \"center\";
                li.style.lineHeight = \"40px\";
                
                ul.appendChild(li);
                
            }
            
            var ulview = ul.getElementsByTagName(\"li\");
            
            for(var i = 0 ; i < ulview.length ; i++){
                ulview[i].onmouseover = function(){
                    if(this != tmpli){
                        this.style.backgroundColor = \"yellow\";
                    }
                    
                }
                
                ulview[i].onmouseout = function(){
                    
                    if(this != tmpli){  
                        this.style.backgroundColor = \"gray\";
                    }
                }
                
                ulview[i].onclick = function(){
                    if(tmpli != null){     
                        tmpli.style.background = \"gray\";
                        this.style.backgroundColor = \"red\"; 
                        tmpli = this; 
                    }
                    else{
                        this.style.backgroundColor = \"red\";
                        tmpli = this;  
                    }
                    
                }
            }
 
        };
    </script>
    
</head>
<body>
   
   <div id = \"page\">
       
       <div id=\"header\">
           
           <h1>menu test</h1>
           <div id=\"topMenu\">
               
           </div>
       </div>
       
   </div>
    
</body>
</html>
");
cs

 

이렇게 됩니다!

 

print 하나하나 하기 싫으시면 이렇게 한번에 해도 되네요!

 

 

소스 하나하나 잘 보시구요

이렇게 적용시킬 수 있습니다.

도움이 되시길 바랍니다

 

0 Comments
댓글쓰기 폼