2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
MinsoftK
089682cb 1 parent a46baedf

test how to use object in js

Inline Side-by-side
Showing 3 changed files with 166 additions and 22 deletions
...@@ -5,36 +5,38 @@ ...@@ -5,36 +5,38 @@
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 <link rel="stylesheet" href="style.css"> 6 <link rel="stylesheet" href="style.css">
7 <script> 7 <script>
8 +function LinksSetColor(color){
9 + var alist=document.querySelectorAll('a');
10 + var i =0;
11 + while(i<alist.length)
12 + {
13 + alist[i].style.color=color;
14 + i+=1;
15 + }
16 +}
17 +function bodySetColor(color){
18 + document.querySelector('body').style.color= color;
19 +}
20 +function bodySetBackGruondColor(color){
21 + document.querySelector('body').style.backgroundColor= color;
22 +}
8 function nightDayHandler(self){ 23 function nightDayHandler(self){
9 - var target=document.querySelector('body');
10 if(self.value==='night') 24 if(self.value==='night')
11 { 25 {
12 - target.style.backgroundColor= 'black'; 26 + bodySetBackGruondColor('black')
13 - target.style.color= 'white'; 27 + bodySetColor('white');
14 self.value= 'day'; 28 self.value= 'day';
15 29
16 - var alist=document.querySelectorAll('a'); 30 + setColor('powderblue');
17 - var i =0; 31 +
18 - while(i<alist.length)
19 - {
20 - alist[i].style.color='powderblue';
21 - i+=1;
22 - }
23 }else{ 32 }else{
24 - target.style.backgroundColor= 'white'; 33 + bodySetBackGruondColor('white')
25 - target.style.color= 'black'; 34 + bodySetColor('black');
26 self.value= 'night'; 35 self.value= 'night';
27 36
28 - var alist=document.querySelectorAll('a'); 37 + setColor('blue');
29 - var i =0;
30 - while(i<alist.length)
31 - {
32 - alist[i].style.color='blue';
33 - i+=1;
34 - }
35 } 38 }
36 -} 39 + }
37 -
38 </script> 40 </script>
39 </head> 41 </head>
40 <body> 42 <body>
...@@ -111,7 +113,10 @@ i+=1; ...@@ -111,7 +113,10 @@ i+=1;
111 } 113 }
112 --> 114 -->
113 115
114 -<!-- button 1 usage array and Loop for chage style --> 116 +<!-- button 1 usage array and Loop for chage style
117 + self를 통한 input의 객체 지정해주기
118 + 지정해주기전에는 전역객체를 가르키게 된다.
119 + -->
115 <input id="night_day" type="button" value="night" onclick=" 120 <input id="night_day" type="button" value="night" onclick="
116 nightDayHandler(this); 121 nightDayHandler(this);
117 "> 122 ">
......
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta charset="utf-8">
5 + <title></title>
6 + </head>
7 + <body>
8 + <h1>how to make object</h1>
9 + <script>
10 + var coworkers = {
11 + "designer":"minsung",
12 + "programmer":"sdy"
13 + };
14 + document.write("programmer: "+coworkers.programmer+"<br>");
15 + document.write("designer: "+coworkers.designer+"<br>");
16 + coworkers.bookkeeper="duru";
17 + document.write("bookkeeper: "+coworkers.bookkeeper+"<br>");
18 + coworkers["data scientist"] ="taeho";
19 + document.write("data scientist: "+coworkers["data scientist"]+"<br>");
20 + </script>
21 +
22 + <h2>iterate</h2>
23 + <script>
24 + for(var key in coworkers){
25 + document.write(key+' : ' +coworkers[key]+'<br>');
26 + }
27 + </script>
28 +
29 + </body>
30 +</html>
1 +<!doctype html>
2 +<html>
3 +<head>
4 +<title>KHU KHU Chat</title>
5 +<meta charset="utf-8">
6 +<link rel="stylesheet" href="style.css">
7 +<script>
8 +
9 + var Links={
10 + SetColor:function(color){
11 + var alist=document.querySelectorAll('a');
12 + var i =0;
13 + while(i<alist.length)
14 + {
15 + alist[i].style.color=color;
16 + i+=1;
17 + }
18 + }
19 +
20 + }
21 + var Body = {
22 + SetColor:function(color){
23 + document.querySelector('body').style.color= color;
24 + },
25 + SetBackGruondColor:function(color){
26 + document.querySelector('body').style.backgroundColor= color;
27 + }
28 + }
29 +
30 + function nightDayHandler(self){
31 + if(self.value==='night')
32 + {
33 + Body.SetBackGruondColor('black')
34 + Body.SetColor('white');
35 + self.value= 'day';
36 +
37 + Links.SetColor('powderblue');
38 +
39 + }else{
40 + Body.SetBackGruondColor('white')
41 + Body.SetColor('black');
42 + self.value= 'night';
43 +
44 + Links.SetColor('blue');
45 + }
46 + }
47 +</script>
48 +</head>
49 +<body>
50 + <input id="night_day" type="button" value="night" onclick="
51 + nightDayHandler(this);
52 + ">
53 +
54 + <!-- button2 making and using function -->
55 + <input id="night_day" type="button" value="night" onclick="
56 + nightDayHandler(this);
57 + ">
58 +
59 + <div id="grid">
60 + <ol>
61 + <li><a href="whatiskhuchat.html" class="saw">What is KHU chat? </a></li>
62 + <li><a href="loginmain.html" class="saw">로그인</a></li>
63 + <li><a href="signinmain.html" class="saw">회원가입</a></li>
64 + <li><a href="question.html" class="saw">문의사항</a></li>
65 + <li><a href="afterlogin.html" class="saw">로그인이후</a></li>
66 + </ol>
67 + <div id="article">
68 + <h2>회원가입</h2>
69 + <div id="inputset">
70 + <form class="signinform" action="loginmain.html">
71 + <label for="email">Email:</label><br>
72 + <input type="text" name="email"><br>
73 +
74 + <label for="password">password:</label><br>
75 + <input type="password" name="password"><br>
76 +
77 + <label for="name">이름:</label><br>
78 + <input type="text" name="name"><br>
79 +
80 + <label for="age">나이:</label><br>
81 + <input type="text" name="age"><br><br>
82 +
83 + <label for="sex">성별:</label><br>
84 + <input type="radio" value="man" name="sex">남자<br>
85 + <input type="radio" value="woman" name="sex">여자<br><br>
86 +
87 + <label for="work">직업:</label><br>
88 + <input type="radio" value="nowork" name="work">무직<br>
89 + <input type="radio" value="Hstudent" name="work">중/고생<br>
90 + <input type="radio" value="Ustudent" name="work">대학생<br>
91 + <input type="radio" value="worker" name="work">직장인<br><br>
92 +
93 + <label for="interesting">관심사(중복선택가능):</label><br>
94 + <input type="checkbox" value="movie" name="interesting">영화<br>
95 + <input type="checkbox" value="song" name="interesting">노래<br>
96 + <input type="checkbox" value="study" name="interesting">공부<br>
97 + <input type="checkbox" value="coding" name="interesting">코딩<br><br>
98 +
99 + <input type="submit" value="회원가입신청">
100 + </form>
101 + </div>
102 +
103 +
104 + </div>
105 + </div>
106 +
107 +
108 + </body>
109 + </html>