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

GDSC-DEU · Jul 9, 2024 · b22450a · b22450a
2 parents 667dab8 + daf67e6
commit b22450a
Show file tree

Hide file tree

Showing 19 changed files with 1,068 additions and 48 deletions.
diff --git a/jihongeek/practice/introduction.html b/jihongeek/practice/introduction.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>JavaScript Sandbox</title>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app">
+      <h1>HTTP API 실습</h1>
+      <h4>(그런데 이제 고양이😸 API를 곁들인)</h2>
+      <div>
+        <input type="number"/>
+        <button id="load_cat_image_btn">고양이 사진 불러오기</button>
+      </div>
+      <div id="image_wrapper">
+      </div>
+    <script>
+        // 고양이 사진을 가져와서 img 태그에 보여주는 함수
+        async function loadCatImage() {
+            var photoUrls = [];  
+            var blobDatas = [];
+
+            // 이전에 가져왔던 고양이 사진 삭제
+            var catImageTags = document.getElementsByClassName("cat_image");
+            while (catImageTags.length > 0)
+            {
+                catImageTags[0].remove();
+            }
+            // fetch 함수로 HTTP를 이용해 고양이 사진 불러오기
+            var i = 0;
+            // 입력된 수 만큼 API를 호출해서 사진을 가져오기
+            var number = document.querySelector('input[type="number"]').value;
+            while (i < number)
+            {
+                var response = await fetch("https://cataas.com/cat", {
+                    method: "GET",
+                });
+                // 가져온 사진 데이터를 html 태그에서 사용할 수 있게 만들기
+                var blobData = await response.blob();
+                blobDatas.push(blobData);
+                var imageUrl = window.URL.createObjectURL(blobDatas[i]);
+                photoUrls.push(imageUrl);
+                i++;
+            }
+            i = 0
+            while (i < number)
+            {
+                // 불러온 고양이 사진을 각 img 태그에 보여주기 
+                document.getElementById("image_wrapper").innerHTML += ('<img class="cat_image" src=' + photoUrls[i] + ">");
+                i++;
+            }
+        }
+        // 버튼을 클릭시 LoadCatImage 함수가 호출 되게 하기
+        const loadCatButton = document.getElementById("load_cat_image_btn");
+        loadCatButton.addEventListener("click", loadCatImage);
+    </script>
+    </div>
+  </body>
+</html>
diff --git a/jihongeek/practice/js.html b/jihongeek/practice/js.html
@@ -4,6 +4,34 @@
         <title>WEB1-HTML</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="style.css">
+        <script>
+            var text = {
+                setTextColor : (textColor)=>{
+                    var aTags = document.querySelectorAll('a,p,h2,li');
+                    for (aTag of aTags) {
+                        aTag.style.color = textColor;
+                    }
+                },
+                setBackgroundColor : (backgroundColor)=>{
+                    document.querySelector('body').style.backgroundColor = backgroundColor;
+                },
+                toggleValue : (self)=>{
+                    if (self.value === '야간모드로 변경') {
+                        self.value = '주간모드로 변경';
+                    }
+                    else {
+                        self.value = '야간모드로 변경';
+                    } 
+                },
+            };
+            var nightDayHandler = (self)=> {
+                    var backgroundColor = self.value === '야간모드로 변경' ? 'black' : 'white';
+                    var textColor = self.value === '야간모드로 변경' ? 'white' : 'black';
+                    text.setBackgroundColor(backgroundColor);
+                    text.setTextColor(textColor);
+                    text.toggleValue(self);       
+                }
+        </script>
     </head>
     <body>
         <h1><a href="web.html">WEB</a></h1>
@@ -16,24 +44,7 @@ <h1><a href="web.html">WEB</a></h1>
             <div>
                 <h2>JavaScript에 대하여</h2>
                 <div>
-                    <input type="button" value="노란색" onclick="
-                        var redValue = '255';
-                        var greenValue = '255';
-                        var blueValue = '0';
-                        // 노란색에 해당하는 CSS rgb 프로퍼티 값 만들기 : 문자열 연결 '+'
-                        var backgroundColorValue = 'rgb(' + redValue + ' ' + greenValue + ' ' + blueValue + ')'; // rgb(255 255 0)
-                        // body 태그 background-color 속성 만든 프로퍼티 값(노란색)으로 변경
-                        document.querySelector('body').style.backgroundColor = backgroundColorValue;
-                    ">
-                    <input type="button" value="초록색" onclick="
-                        var redValue = 0;
-                        var greenValue = 255;
-                        var blueValue = 0;
-                        // 초록색에 해당하는 CSS rgb 프로퍼티 값 만들기 : 템플릿 리터럴 사용
-                        var backgroundColorValue = `rgb(${redValue} ${greenValue} ${blueValue})` // rgb(0 255 0)
-                        // body 태그 background-color 속성 만든 프로퍼티 값(초록색)으로 변경
-                        document.querySelector('body').style.backgroundColor = backgroundColorValue; 
-                    ">
+                    <input type="button" value="야간모드로 변경" onclick="nightDayHandler(this)">
                 </div>
                 <p>
                     <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" title="JavaScript MDN 문서">JavaScript (JS) </a>  

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>