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

GDSC-DEU · Jul 9, 2024 · daf67e6 · daf67e6
2 parents 3851318 + a21be5c
commit daf67e6
Show file tree

Hide file tree

Showing 16 changed files with 848 additions and 30 deletions.
diff --git a/jinwon/JavaScript/2.html b/jinwon/JavaScript/2.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WEB2</title>
+    <style>
+      h1 {
+        text-align: center;
+        font-size: 40px;
+        margin: 0;
+        padding: 20px;
+        border-bottom: 1px solid black; /*제목에 밑줄 생성*/
+      }
+      a {
+        text-decoration: none;
+        color: black;
+      }
+      ol {
+        border-right: 1px solid black;
+        width: 200px;
+        margin: 0;
+        padding: 20px;
+      }
+      #grid {
+        display: grid;
+        grid-template-columns: 250px 1fr;
+      }
+      #text {
+        font-size: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>WEB2</h1>
+    <div id="grid">
+      <script>
+        var coworkers = ["html", "css", "javascript"];
+      </script>
+      <ol id="text">
+        <script>
+          var i = 0;
+          while (i < coworkers.length) {
+            document.write(
+              '<li><a href="http://a.com/' +
+                coworkers[i] +
+                '"target="_blank">' +
+                coworkers[i] +
+                "</a></li>"
+            );
+            i = i + 1;
+          }
+        </script>
+      </ol>
+      <div>
+        <input
+          type="button"
+          value="빨강색"
+          onclick=" 
+      var target=document.querySelector('body')
+      if (this.value==='빨강색'){
+    target.style.backgroundColor='red';
+    target.style.color='black';
+    this.value='주황색'
+    var links = document.querySelectorAll('a');
+          var i = 0;
+          while (i < links.length) {
+            links[i].style.color = 'powderblue';
+            i = i + 1;
+          }
+    } 
+    else if(this.value==='주황색'){
+    target.style.backgroundColor = 'orange';
+    target.style.color= 'black'; 
+    this.value='노랑색'
+    } 
+    else if(this.value==='노랑색'){
+    target.style.backgroundColor = 'yellow';
+    target.style.color= 'black'; 
+    this.value='초록색'
+    }
+    else if(this.value==='초록색'){
+    target.style.backgroundColor = 'green';
+    target.style.color= 'black'; 
+    this.value='파랑색'
+    }
+    else if(this.value==='파랑색'){
+    target.style.backgroundColor = 'blue';
+    target.style.color= 'black'; 
+    this.value='남색'
+    }
+    else if(this.value==='남색'){
+    target.style.backgroundColor = 'indigo';
+    target.style.color= 'black'; 
+    this.value='보라색'
+    }
+    else if(this.value==='보라색'){
+    target.style.backgroundColor = 'purple';
+    target.style.color= 'black'; 
+    this.value='빨강색'
+    } "
+        />
+        <input
+          type="button"
+          value="기본"
+          onclick="
+    var target=document.querySelector('body')
+  target.style.backgroundColor = 'white';
+  target.style.color= 'black';
+
+  var links = document.querySelectorAll('a');
+          var i = 0;
+          while (i < links.length) {
+            links[i].style.color = 'black';
+            i = i + 1;
+          }
+  "
+        />
+        <h3>
+          <p>
+            JavaScript는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍
+            언어로, 일급 함수를 지원합니다.<br />
+            웹 페이지를 위한 스크립트 언어로 잘 알려져 있고, Node.js, Apache
+            CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용합니다<br />
+            JavaScript는 프로토타입 기반, 다중 패러다임, 단일 스레드, 동적
+            언어로, 객체지향형, 명령형, 선언형 스타일을 지원합니다.
+          </p>
+        </h3>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/jinwon/JavaScript/3.html b/jinwon/JavaScript/3.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WEB2</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="color.js"></script>
+    <style>
+      h1 {
+        text-align: center;
+        font-size: 40px;
+        margin: 0;
+        padding: 20px;
+        border-bottom: 1px solid black; /*제목에 밑줄 생성*/
+      }
+      a {
+        text-decoration: none;
+        color: black;
+      }
+      ol {
+        border-right: 1px solid black;
+        width: 200px;
+        margin: 0;
+        padding: 20px;
+      }
+      #grid {
+        display: grid;
+        grid-template-columns: 250px 1fr;
+      }
+      #text {
+        font-size: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>WEB2</h1>
+    <div id="grid">
+      <script>
+        var coworkers = ["html", "css", "javascript"];
+      </script>
+      <ol id="text">
+        <script>
+          var i = 0;
+          while (i < coworkers.length) {
+            document.write(
+              '<li><a href="http://a.com/' +
+                coworkers[i] +
+                '"target="_blank">' +
+                coworkers[i] +
+                "</a></li>"
+            );
+            i = i + 1;
+          }
+        </script>
+      </ol>
+      <div>
+        <input type="button" value="빨강색" onclick="changes(this); " />
+        <input
+          type="button"
+          value="기본"
+          onclick="
+    reset(this);
+  "
+        />
+        <h3>
+          <p>
+            JavaScript는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍
+            언어로, 일급 함수를 지원합니다.<br />
+            웹 페이지를 위한 스크립트 언어로 잘 알려져 있고, Node.js, Apache
+            CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용합니다<br />
+            JavaScript는 프로토타입 기반, 다중 패러다임, 단일 스레드, 동적
+            언어로, 객체지향형, 명령형, 선언형 스타일을 지원합니다.
+          </p>
+        </h3>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/jinwon/JavaScript/color.js b/jinwon/JavaScript/color.js
@@ -0,0 +1,67 @@
+var Link = {
+  SetColor: function (color) {
+    // var links = document.querySelectorAll("a");
+    // var i = 0;
+    // while (i < links.length) {
+    //   links[i].style.color = color;
+    //   i = i + 1;
+    // }
+    $("a").css("color", color);
+  },
+};
+//객체는 property와 property 를 구분할 때 ,를 사용함
+var Body = {
+  SetColor: function (color) {
+    //document.querySelector("body").style.color = color;
+    $("body").css("color", color);
+  },
+  SetBackColor: function (color) {
+    //document.querySelector("body").style.backgroundColor = color;
+    $("body").css("backgroundColor", color);
+  },
+};
+function changes(self) {
+  var target = document.querySelector("body");
+  if (self.value === "빨강색") {
+    Body.SetBackColor("red");
+    Body.SetColor("black");
+    self.value = "주황색";
+    Link.SetColor("gold");
+  } else if (self.value === "주황색") {
+    Body.SetBackColor("orange");
+    Body.SetColor("black");
+    self.value = "노랑색";
+    Link.SetColor("indigo");
+  } else if (self.value === "노랑색") {
+    Body.SetBackColor("yellow");
+    Body.SetColor("black");
+    self.value = "초록색";
+    Link.SetColor("blue");
+  } else if (self.value === "초록색") {
+    Body.SetBackColor("green");
+    Body.SetColor("black");
+    self.value = "파랑색";
+    Link.SetColor("silver");
+  } else if (self.value === "파랑색") {
+    Body.SetBackColor("blue");
+    Body.SetColor("black");
+    self.value = "남색";
+    Link.SetColor("yellow");
+  } else if (self.value === "남색") {
+    Body.SetBackColor("indigo");
+    Body.SetColor("black");
+    self.value = "보라색";
+    Link.SetColor("orange");
+  } else if (self.value === "보라색") {
+    Body.SetBackColor("purple");
+    Body.SetColor("black");
+    self.value = "빨강색";
+    Link.SetColor("black");
+  }
+}
+function reset(self) {
+  var target = document.querySelector("body");
+  Body.SetBackColor("white");
+  Body.SetColor("black");
+  Link.SetColor("black");
+}