js강의 (1~11)

GDSC-DEU · Jun 30, 2024 · 4815efd · 4815efd
1 parent 6d8b492
commit 4815efd
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 23 deletions.
diff --git a/yoojin/ex1.html b/yoojin/ex1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <h1>JavaScript</h1>
+    <script>
+        document.write('hello world');
+    </script>
+    <h1>html</h1>
+    1+1
+</body>
+</html>
diff --git a/yoojin/ex2.html b/yoojin/ex2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <input type="button" value="hi" onclick="alert('hi')">
+    <input type="text" onchange="('changed')">
+    <input type="text" onkeydown="alert('key down')">
+</body>
+</html> 
diff --git a/yoojin/html/3.html b/yoojin/html/3.html
@@ -1,25 +1,38 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title>WEB1 - JavaScript</title>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
+  <head>
+    <style>
+      .js {
+        font-weight: bold;
+        color: red;
+      }
+      #first {
+        color: green;
+      }
+      span {
+        color: blue;
+      }
+    </style>
+  </head>
+  <body>
     <h1><a href="index.html">WEB</a></h1>
-    <div id="grid">
-<ol>
-    <li><a href="1.html">HTML</a></li>
-    <li><a href="2.html">CSS</a></li>
-    <li><a href="3.html">JavaScript</a></li>
-</ol>
-<div id="article">
-<h2>JavaScript</h2>
-<p>
-    JavaScript often abbreviated as JS, is a programming language and core technology of the Web, alongside HTML and CSS. 99% of websites use JavaScript on the client side for webpage behavior.[10]
-Web browsers have a dedicated JavaScript engine that executes the client code. These engines are also utilized in some servers and a variety of apps. The most popular runtime system for non-browser usage is Node.js.
-JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[11] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).
-</p>
-</div>
-</div>
+    <h2 style="background-color: coral; color: powderblue">JavaScript</h2>
+    <p>
+      <span id="first" class="js">JavaScript</span> often abbreviated as JS, is
+      a programming language and core technology of the Web, alongside
+      <span>HTML</span> and <span>CSS</span>. 99% of websites use
+      <span class="js">JavaScript</span> on the client side for webpage
+      behavior.[10] Web browsers have a dedicated
+      <span class="js">JavaScript</span> engine that executes the client code.
+      These engines are also utilized in some servers and a variety of apps. The
+      most popular runtime system for non-browser usage is Node.js.
+      <span class="js">JavaScript</span> is a high-level, often just-in-time
+      compiled language that conforms to the ECMAScript standard.[11] It has
+      dynamic typing, prototype-based object-orientation, and first-class
+      functions. It is multi-paradigm, supporting event-driven, functional, and
+      imperative programming styles. It has application programming interfaces
+      (APIs) for working with text, dates, regular expressions, standard data
+      structures, and the Document Object Model (DOM).
+    </p>
+  </body>
 </html>
diff --git a/yoojin/site/style.html b/yoojin/site/style.html
@@ -11,7 +11,7 @@
     />
   </head>
 
-  <>
+  <a>
     <h1>
       Chanel &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Miu Miu
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Louis Vuitton
@@ -60,6 +60,7 @@ <h1>
       font-optical-sizing: auto;
       font-style: normal;
     }
+
     body {
       background-image: url("https://i.pinimg.com/originals/b4/13/d5/b413d592ab5d7811fce6ac305d0ce89e.jpg");
       background-size: cover;

diff --git a/yoojin/site/trend.html b/yoojin/site/trend.html
@@ -43,7 +43,6 @@
         font-style: normal;
       }
 
-
 
     body {
       background-image: url("https://i.pinimg.com/originals/b8/0c/d0/b80cd0006f50e5a989e99086d83249da.jpg");