vanilla_js_toy

LiJell · May 19, 2022 · 70b23e2 · 70b23e2
1 parent fa9382a
commit 70b23e2
Show file tree

Hide file tree

Showing 22 changed files with 555 additions and 0 deletions.
diff --git a/Front-End/JavaScript/Vanilla_Toy_PJ/Adding_tag_js_to_html.md b/Front-End/JavaScript/Vanilla_Toy_PJ/Adding_tag_js_to_html.md
@@ -0,0 +1,79 @@
+# Adding tag js to html
+
+## 폴더 구조
+
+Vanilla_JS_Toy
+
+- css
+  - style.css
+- img
+  - 0.jpg
+  - 1.jpg
+  - 2.jpg
+  - 3.jpg
+  - 4.jpg
+- js
+  - clock.js
+  - greetings.js
+  - quotes.js
+  - background.js
+- index.html
+
+---
+
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="css/style.css" />
+    <title>Momentum</title>
+  </head>
+  <body>
+    <form id="login-form" class="hidden">
+      <input
+        required
+        maxlength="15"
+        type="text"
+        placeholder=" What is your name?"
+      />
+      <button>Log In</button>
+      <!-- <input type="submit" value="Log In" /> -->
+    </form>
+    <h2 id="clock">00:00:00</h2>
+    <h1 id="greeting" class="hidden"></h1>
+    <div id="quote">
+      <span></span>
+      <span></span>
+    </div>
+
+    <script src="js/greetings.js"></script>
+    <script src="js/clock.js"></script>
+    <script src="js/quotes.js"></script>
+    <script src="js/background.js"></script>
+  </body>
+</html>
+```
+
+- javascript에서 `img` 태그를 추가해보자
+
+```javascript
+const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg"];
+
+const chosenImg = images[Math.floor(Math.random() * images.length)];
+
+const bgImg = document.createElement("img");
+
+bgImg.src = `img/${chosenImg}`;
+
+// tag adding
+document.body.appendChild(bgImg);
+// 가장 아래에 추가
+//document.body.prepend(bgImg); 가장위에
+//동일하게 동작
+```
+
diff --git a/Front-End/JavaScript/Booleans.md → ...End/JavaScript/Vanilla_Toy_PJ/Booleans.md b/Front-End/JavaScript/Booleans.md → ...End/JavaScript/Vanilla_Toy_PJ/Booleans.md
diff --git a/Front-End/JavaScript/Vanilla_Toy_PJ/Clock.md b/Front-End/JavaScript/Vanilla_Toy_PJ/Clock.md
@@ -0,0 +1,129 @@
+# Clock
+
+- `setInterval`: 일정 기간마다 `function`이 동작 하게함
+- `setTimeout`:  interval과 비슷하지만 동작을 다르게함 
+- `new Date()`: 날짜를 가져옴
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+  - date 관련 내용
+
+![image-20220519235955400](C:\Users\hanju\TIL\image.assets\image-20220519235955400.png)
+
+## 폴더 구조
+
+- Vanilla_JS_Toy
+  - css
+    - style.css
+  - js
+    - clock.js
+    - greetings.js
+  - index.html
+
+---
+
+## Interval
+
+```javascript
+const clock = document.querySelector("h2#clock");
+
+function sayHello() {
+  console.log("hello");
+}
+
+// argument 1: function that I want to run, argument 2: how often (ms)
+setInterval(sayHello, 5000);
+```
+
+## Timeout
+
+```javascript
+const clock = document.querySelector("h2#clock");
+
+function sayHello() {
+  console.log("hello");
+}
+
+// argument 1: function that I want to run, argument 2: how often (ms)
+// setInterval(sayHello, 5000);
+setTimeout(sayHello, 5000);
+```
+
+---
+
+## Clock 만들기
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="css/style.css" />
+    <title>Momentum</title>
+  </head>
+  <body>
+    <form id="login-form" class="hidden">
+      <input
+        required
+        maxlength="15"
+        type="text"
+        placeholder=" What is your name?"
+      />
+      <button>Log In</button>
+      <!-- <input type="submit" value="Log In" /> -->
+    </form>
+    <h2 id="clock">00:00:00</h2>
+    <h1 id="greeting" class="hidden"></h1>
+    <script src="js/greetings.js"></script>
+    <script src="js/clock.js"></script>
+  </body>
+</html>
+
+```
+
+```javascript
+const clock = document.querySelector("h2#clock");
+
+function getClock() {
+  const date = new Date();
+  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+}
+
+// argument 1: function that I want to run, argument 2: how often (ms)
+getClock();
+setInterval(getClock, 1000);
+```
+
+- 시계는 잘 동작하지만, 1초일 때 00:00:01 이 아니라, 00:00:1으로 나온다
+- 수정해보자
+  - `padStart`를 사용해보자
+    - `padEnd`는 뒤에 붙여줌
+  - 길이가 2가 아닐 때 "0"을 앞에 넣어줘
+  - 하지만 string만 가능하다
+
+![image-20220520001207803](C:\Users\hanju\TIL\image.assets\image-20220520001207803.png)
+
+- 아래처럼 수정
+
+![image-20220520001727261](../../image.assets/image-20220520001727261.png)
+
+---
+
+## 수정본
+
+```javascript
+const clock = document.querySelector("h2#clock");
+
+function getClock() {
+  const date = new Date();
+  const hours = String(date.getHours()).padStart(2,"0");
+  const minutes = String(date.getMinutes()).padStart(2,"0");
+  const seconds = String(date.getSeconds()).padStart(2,"0");
+  clock.innerText = `${hours}:${minutes}:${seconds}`;
+}
+
+// argument 1: function that I want to run, argument 2: how often (ms)
+getClock();
+setInterval(getClock, 1000);
+```
+
diff --git a/Front-End/JavaScript/Data_Type.md → ...nd/JavaScript/Vanilla_Toy_PJ/Data_Type.md b/Front-End/JavaScript/Data_Type.md → ...nd/JavaScript/Vanilla_Toy_PJ/Data_Type.md
diff --git a/Front-End/JavaScript/Events.md → ...t-End/JavaScript/Vanilla_Toy_PJ/Events.md b/Front-End/JavaScript/Events.md → ...t-End/JavaScript/Vanilla_Toy_PJ/Events.md
diff --git a/Front-End/JavaScript/Function.md → ...End/JavaScript/Vanilla_Toy_PJ/Function.md b/Front-End/JavaScript/Function.md → ...End/JavaScript/Vanilla_Toy_PJ/Function.md
diff --git a/Front-End/JavaScript/Vanilla_Toy_PJ/Getting_Username.md b/Front-End/JavaScript/Vanilla_Toy_PJ/Getting_Username.md
@@ -0,0 +1,86 @@
+# Getting Username
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Momentum</title>
+  </head>
+  <body>
+    <form id="login-form">
+      <input
+        required
+        maxlength="15"
+        type="text"
+        placeholder=" What is your name?"
+      />
+      <button>Log In</button>
+      <!-- <input type="submit" value="Log In" /> -->
+    </form>
+    <h1 id = "greeting" class="hidden"></h1>
+
+    <script src="app.js"></script>
+  </body>
+</html>
+```
+
+```css
+.hidden {
+    display: none;
+}
+```
+
+```javascript
+const loginForm = document.querySelector("#login-form");
+const loginInput = loginForm.querySelector("input");
+const greeting = document.querySelector("#greeting");
+
+//string 만 포함될 땐 대문자로 하는게 관습
+const HIDDEN_CLASSNAME = "hidden";
+
+function onLoginSubmit(event) {
+  event.preventDefault();
+  loginForm.classList.add(HIDDEN_CLASSNAME);
+  const username = loginInput.value;
+  greeting.innerText = "Hello " + username;
+  greeting.classList.remove(HIDDEN_CLASSNAME);
+}
+
+loginForm.addEventListener("submit", onLoginSubmit);
+```
+
+![image-20220519161350358](C:\Users\hanju\TIL\image.assets\image-20220519161350358.png)
+
+![image-20220519161404696](C:\Users\hanju\TIL\image.assets\image-20220519161404696.png)
+
+- Class name을 삭제해주고 추가해주면서 동작하는 방식
+
+---
+
+- greeting.innerText에서 다른 방식으로 string과 변수를 합치는 방법
+
+```javascript
+const loginForm = document.querySelector("#login-form");
+const loginInput = loginForm.querySelector("input");
+const greeting = document.querySelector("#greeting");
+
+//string 만 포함될 땐 대문자로 하는게 관습
+const HIDDEN_CLASSNAME = "hidden";
+
+function onLoginSubmit(event) {
+  event.preventDefault();
+  loginForm.classList.add(HIDDEN_CLASSNAME);
+  const username = loginInput.value;
+  // greeting.innerText = "Hello " + username; 아래와 동일하게 동작
+  greeting.innerText = `Hello ${username}`
+  greeting.classList.remove(HIDDEN_CLASSNAME);
+}
+
+loginForm.addEventListener("submit", onLoginSubmit);
+
+```
+