Merge branch 'main' of https://github.com/GDSC-DEU/Web-Basic-Study-23-24

GDSC-DEU · Aug 13, 2024 · c8b01ba · c8b01ba
2 parents 1db7984 + 7d5408f
commit c8b01ba
Show file tree

Hide file tree

Showing 31 changed files with 454 additions and 103 deletions.
diff --git a/eunjin/JavaScript-1/js.html b/eunjin/JavaScript-1/js.html
@@ -7,6 +7,22 @@
   </head>
   <body>
     <h1>JavaScript</h1>
+    <input
+      type="button"
+      value="night"
+      onclick="
+      document.querySelector('body').style.backgroundColor='black';
+      document.querySelector('body').style.color='white';
+    "
+    />
+    <input
+      type="button"
+      value="day"
+      onclick="
+    document.querySelector('body').style.backgroundColor='white';
+    document.querySelector('body').style.color='black';
+    "
+    />
     <script>
       document.write(1 + 1);
     </script>

diff --git a/eunjin/JavaScript-1/about.html → eunjin/JavaScript-2,3/about.html b/eunjin/JavaScript-1/about.html → eunjin/JavaScript-2,3/about.html
@@ -4,49 +4,8 @@
     <title>stardew web</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="style.css" />
+    <script src="colors.js"></script>
   </head>
-  <style>
-    body {
-      margin: 0;
-    }
-    a {
-      color: grey;
-    }
-    #a1 {
-      color: green;
-    }
-    h1 {
-      text-align: center;
-      border-bottom: 5px solid green;
-      padding: 20px;
-      margin: 0px;
-    }
-    #grid {
-      display: grid;
-      grid-template-columns: 230px 1fr;
-    }
-    #grid2 {
-      padding: 20px;
-    }
-    ol {
-      border-right: 5px solid;
-      color: green;
-      margin: 0px;
-      padding: 30px;
-    }
-    #now {
-      color: crimson;
-    }
-    @media screen and (max-width: 650px) {
-      #grid {
-        display: block;
-      }
-      ol {
-        border-right: none;
-        border-bottom: 5px solid;
-      }
-    }
-  </style>
   <body>
     <h1><a href="index.html" id="a1">스타듀밸리</a></h1>
     <div id="grid">
@@ -56,6 +15,12 @@ <h1><a href="index.html" id="a1">스타듀밸리</a></h1>
         <li><a href="graphic.html">게임 제작 (그래픽)</a></li>
       </ol>
       <div id="grid2">
+        <input
+          id="night_day"
+          type="button"
+          value="night"
+          onclick="nightDayHandler(this);"
+        />
         <h2>스타듀밸리란?</h2>
         <p>
           <b

diff --git a/eunjin/JavaScript-1/code_music.html → eunjin/JavaScript-2,3/code_music.html b/eunjin/JavaScript-1/code_music.html → eunjin/JavaScript-2,3/code_music.html
@@ -4,49 +4,8 @@
     <title>stardew web</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="style.css" />
+    <script src="colors.js"></script>
   </head>
-  <style>
-    body {
-      margin: 0;
-    }
-    a {
-      color: grey;
-    }
-    #a1 {
-      color: green;
-    }
-    h1 {
-      text-align: center;
-      border-bottom: 5px solid green;
-      padding: 20px;
-      margin: 0px;
-    }
-    #grid {
-      display: grid;
-      grid-template-columns: 230px 1fr;
-    }
-    #grid2 {
-      padding: 20px;
-    }
-    ol {
-      border-right: 5px solid;
-      color: green;
-      margin: 0px;
-      padding: 30px;
-    }
-    #now {
-      color: crimson;
-    }
-    @media screen and (max-width: 600px) {
-      #grid {
-        display: block;
-      }
-      ol {
-        border-right: none;
-        border-bottom: 5px solid;
-      }
-    }
-  </style>
   <body>
     <h1><a href="index.html" id="a1">스타듀밸리</a></h1>
     <div id="grid">
@@ -56,6 +15,12 @@ <h1><a href="index.html" id="a1">스타듀밸리</a></h1>
         <li><a href="graphic.html">게임 제작 (그래픽)</a></li>
       </ol>
       <div id="grid2">
+        <input
+          id="night_day"
+          type="button"
+          value="night"
+          onclick="nightDayHandler(this);"
+        />
         <h2>게임 제작 (코딩, 음악)</h2>
         <p>
           게임의 개발자인 에릭 바론은 전공 수업에서 Java를 배웠지만, C#과 유사한

diff --git a/eunjin/JavaScript-2,3/colors.js b/eunjin/JavaScript-2,3/colors.js
@@ -0,0 +1,29 @@
+function SetLinkColor(color) {
+  var alist = document.querySelectorAll("a");
+  var size = 0;
+  while (size < alist.length) {
+    alist[size].style.color = color;
+    size = size + 1;
+  }
+}
+function SetBodyColor(color) {
+  document.querySelector("body").style.color = color;
+}
+function SetBackgroundColor(color) {
+  document.querySelector("body").style.backgroundColor = color;
+}
+function nightDayHandler(self) {
+  if (self.value === "night") {
+    self.value = "day";
+    SetBackgroundColor("black");
+    SetBodyColor("white");
+
+    SetLinkColor("yellow");
+  } else {
+    self.value = "night";
+    SetBackgroundColor("white");
+    SetBodyColor("black");
+
+    SetLinkColor("green");
+  }
+}
diff --git a/eunjin/JavaScript-1/graphic.html → eunjin/JavaScript-2,3/graphic.html b/eunjin/JavaScript-1/graphic.html → eunjin/JavaScript-2,3/graphic.html
@@ -4,6 +4,7 @@
     <title>stardew web</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="style.css" />
+    <script src="colors.js"></script>
   </head>
   <body>
     <h1><a href="index.html" id="a1">스타듀밸리</a></h1>
@@ -14,6 +15,12 @@ <h1><a href="index.html" id="a1">스타듀밸리</a></h1>
         <li><a href="graphic.html" id="now">게임 제작 (그래픽)</a></li>
       </ol>
       <div id="grid2">
+        <input
+          id="night_day"
+          type="button"
+          value="night"
+          onclick="nightDayHandler(this);"
+        />
         <h2>게임 제작 (그래픽)</h2>
         <p>
           생계는 기본적으로 여자친구가 해결했지만, 정말 어려웠을 때 자신도

diff --git a/eunjin/JavaScript-1/index.html → eunjin/JavaScript-2,3/index.html b/eunjin/JavaScript-1/index.html → eunjin/JavaScript-2,3/index.html
@@ -4,23 +4,10 @@
     <title>stardew web</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="style.css" />
+    <script src="colors.js"></script>
   </head>
   <body>
     <h1><a href="index.html" id="a1">스타듀밸리</a></h1>
-    <input
-      type="button"
-      value="night"
-      onclick="
-    document.querySelector('body').style.background='black';
-    document.querySelector('body').style.color='white';"
-    />
-    <input
-      type="button"
-      value="day"
-      onclick="
-    document.querySelector('body').style.background='white';
-    document.querySelector('body').style.color='black';"
-    />
     <div id="grid">
       <ol>
         <li><a href="about.html" class="saw">스타듀밸리란?</a></li>
@@ -30,6 +17,12 @@ <h1><a href="index.html" id="a1">스타듀밸리</a></h1>
         <li><a href="graphic.html">게임 제작 (그래픽)</a></li>
       </ol>
       <ul>
+        <input
+          id="night_day"
+          type="button"
+          value="night"
+          onclick="nightDayHandler(this);"
+        />
         <li>작성자 : 이은진</li>
         <li>소속 : GDSC DEU</li>
       </ul>

diff --git a/eunjin/JavaScript-1/stardew.jpg → eunjin/JavaScript-2,3/stardew.jpg b/eunjin/JavaScript-1/stardew.jpg → eunjin/JavaScript-2,3/stardew.jpg
diff --git a/eunjin/JavaScript-1/style.css → eunjin/JavaScript-2,3/style.css b/eunjin/JavaScript-1/style.css → eunjin/JavaScript-2,3/style.css
diff --git a/eunjin/modernJS/app.js b/eunjin/modernJS/app.js
@@ -0,0 +1,33 @@
+const title = document.querySelector("div.hello:first-child h1");
+
+var color = "black";
+
+function handleTitleColor() {
+  if (color == "black") {
+    title.style.color = "blue";
+    color = "blue";
+  } else if (color == "blue") {
+    title.style.color = "black";
+    color = "black";
+  }
+}
+
+function handleMouseEnter() {
+  if (title.style.color == "black") {
+    title.style.color = "yellow";
+  } else if (title.style.color == "blue") {
+    title.style.color = "green";
+  }
+}
+
+function handleMouseLeave() {
+  if (title.style.color == "yellow") {
+    title.style.color = "black";
+  } else if (title.style.color == "green") {
+    title.style.color = "blue";
+  }
+}
+
+title.addEventListener("click", handleTitleColor);
+title.addEventListener("mouseenter", handleMouseEnter);
+title.addEventListener("mouseleave", handleMouseLeave);
diff --git a/eunjin/modernJS/index.html b/eunjin/modernJS/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div class="hello">
+      <h1 style="color: black">하이하이</h1>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/jihongeek/forNomadLecture/20240730.md b/jihongeek/forNomadLecture/20240730.md
@@ -0,0 +1,23 @@
+# 20240730
+HTML Document 객체를 통해 자바스크립트에서 Html 객체를 다룰 수 있다.
+웹브라우저가 html을 보여주는 객체로 만들어 주어서 javascript로 조작가능 
+class와 id등의 정보로 document아래에 있는 html object를 가져온다음 자바스크립트로 하위 속성을 가져오고 설정할 수 있다
+# document 객체에서 html element 불러오기
+```javascript
+document.getElementById("id 문자열") // id 값으로 Element 가져오기
+document.getElementsByClassName("class 문자열") // class 값으로 Element 배열 가져오기
+document.getElementsByTagName("태그 이름 문자열") // // class 값으로 Element 배열 가져오기
+```
+
+
+## 만능 querySelector
+```javascript
+document.querySelector("CSS 선택자 표기법 문자열") // CSS 선택자로 Element 가져오기. 단, 여러개일 경우 첫번째만!
+document.querySelectorAll("CSS 선택자 표기법 문자열") // CSS 선택자로 Element 배열 가져오기 
+```
+
+
+addEventListener와 함수로 이벤트 처리  => 그냥 객체에 함수를 바로 넣어버리면 안되는 것일까? 가능하지만 동작 방식이 약간 다르다.
+
+객체에 바로 할당 : 여러 번 수행했을 때 마지막 함수로 한다.(덮어쓰기)
+addEventListener와 함수로 이벤트 처리 : 이벤트에 대한 함수를 누적한다(여러 함수다 실행된다)
diff --git a/jihongeek/forNomadLecture/app.js b/jihongeek/forNomadLecture/app.js
@@ -0,0 +1,12 @@
+const header = document.querySelector("h1");
+
+function headerClickHandler() {
+    console.log("🍅");
+}
+header.onclick = headerClickHandler;
+header.onclick = ()=>{
+    console.log("Tomato");
+}
+header.addEventListener("click",()=>{
+    console.log("Tomato");
+});
diff --git a/jihongeek/forNomadLecture/index.html b/jihongeek/forNomadLecture/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>🍅</h1>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/jinwon/NOMAD/3강/app.js b/jinwon/NOMAD/3강/app.js
@@ -0,0 +1,44 @@
+const h1 = document.querySelector("div.hello:first-child h1");
+function handleTitleClick() {
+  console.log("title was clicked");
+  h1.style.color = "blue";
+}
+
+function handleMouseEnter() {
+  h1.innerText = "mouse is here";
+  /*console.log("mouse is here");*/
+}
+function handleMouseLeave() {
+  h1.innerText = "mouse is gone";
+  /*console.log("leave is here");*/
+}
+function handleWindowResize() {
+  /*화면 크기가 줄어들면 배경화면 색이 변함*/
+  document.body.style.backgroundColor = "tomato";
+}
+function handleWindowCopy() {
+  /*복사할 경우 copier 알림창이 나타남*/
+  alert("copier");
+}
+function handleWindowOffline() {
+  /*와이파이 꺼지면 알림창*/
+  alert("SOS no wifi");
+}
+function handleWindowOnline() {
+  /*와이파이 연결되면 알림창 */
+  alert("wifi");
+}
+
+h1.addEventListener("click", handleTitleClick);
+
+h1.addEventListener("mouseenter", handleMouseEnter);
+
+h1.addEventListener("mouseleave", handleMouseLeave);
+
+window.addEventListener("resize", handleWindowResize);
+
+window.addEventListener("copy", handleWindowCopy);
+
+window.addEventListener("offline", handleWindowOffline);
+
+window.addEventListener("online", handleWindowOnline);