이번에는 펄을 이용해서
자바스크립트를 사용하는 방법에 대해 알아볼까합니다
펄에 자바스크립트를 적용하려면 당연히 웹 페이지로 제작을 해야겠죠?
간단하게만 사용해보고 넘어가겠습니다
사용 방법만 알면, 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 하나하나 하기 싫으시면 이렇게 한번에 해도 되네요!
소스 하나하나 잘 보시구요
이렇게 적용시킬 수 있습니다.
도움이 되시길 바랍니다
반응형
그리드형
'perl' 카테고리의 다른 글
| 펄 cgi get, post 진행해보기 (0) | 2017.10.19 |
|---|---|
| 펄 서브루틴(perl subroutine) 활용하기 여러 값 보내서 테이블 출력 (0) | 2017.10.17 |
| 펄 함수(서브루틴) (perl subroutine) (0) | 2017.10.10 |
| 펄 해시(perl hash), 삽입, 삭제(delete), keys함수, values 함수 (0) | 2017.09.25 |
| 펄 배열(perl array) push, pop, 정렬, 역순 (0) | 2017.09.22 |
