Init example for event and localStorage

2026-09-22 20:01:31 +00:00 · 2023-08-16 17:25:30 +07:00
parent 3671d1fcfe
commit 3647419f2d
2 changed files with 184 additions and 0 deletions
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Javascript Training</title>
+  </head>
+  <body>
+    <h1>Javascript Training</h1>
+
+    <!-- Inline Event Handler Attributes -->
+    <!-- <button onclick="changeText()">Click me</button>
+
+    <p>Try to change me.</p> -->
+
+    <!-- Event handler Properties -->
+    <!-- <button>Click me</button>
+
+    <p>I will change.</p> -->
+
+    <!-- <section>
+      <div id="one">One</div>
+      <div id="two">Two</div>
+      <div id="three">Three</div>
+    </section> -->
+
+    <!-- <div id="menu">
+      <button data-action="save">Save</button>
+      <button data-action="load">Load</button>
+      <button data-action="search">Search</button>
+    </div>
+
+    <script>
+      class Menu {
+        constructor(elem) {
+          this._elem = elem;
+          elem.onclick = this.onClick.bind(this);
+        }
+
+        save() {
+          alert("saving");
+        }
+
+        load() {
+          alert("loading");
+        }
+
+        search() {
+          alert("searching");
+        }
+
+        onClick(event) {
+          let action = event.target.dataset.action;
+          if (action) {
+            this[action]();
+          }
+        }
+      }
+
+      new Menu(menu);
+    </script> -->
+
+    <button data-toggle-id-set="subscribe-mail">
+      Show the subscription form
+    </button>
+
+    <form id="subscribe-mail" hidden>Your mail: <input type="email" /></form>
+
+    <script>
+      document.addEventListener("click", function (event) {
+        let id = event.target.dataset.toggleIdSet;
+        if (!id) return;
+
+        let elem = document.getElementById(id);
+
+        elem.hidden = !elem.hidden;
+      });
+    </script>
+
+    <script src="./index.js"></script>
+  </body>
+</html>
@@ -0,0 +1,102 @@
+// Inline event handler attributes
+
+// Function to modify the text content of the paragraph
+// const changeText = () => {
+//   const p = document.querySelector("p");
+
+//   p.textContent = "I changed because of an event handler property.";
+// };
+
+// Add event handler as a property of the button element
+// const p = document.querySelector("p");
+// const button = document.querySelector("button");
+
+// const changeText = () => {
+//   p.textContent = "Will I change?";
+// };
+
+// const alertText = () => {
+//   alert("Will I alert?");
+// };
+
+// // Events can be overwritten
+// button.onclick = changeText;
+// button.onclick = alertText;
+
+// Event listeners
+// Function to modify the text content of the paragraph
+const p = document.querySelector("p");
+const button = document.querySelector("button");
+
+const changeText = () => {
+  p.textContent = "Will I change?";
+};
+
+const alertText = () => {
+  alert("Will I alert?");
+};
+
+// Multiple listeners can be added to the same event and element
+// button.addEventListener("click", changeText);
+// button.addEventListener("click", alertText);
+
+// button.addEventListener("dblclick", changeText);
+// button.addEventListener("mouseenter", changeText);
+// button.addEventListener("mouseleave", changeText);
+// button.addEventListener("mousemove", changeText);
+
+// Test the key and code properties
+// document.addEventListener("keydown", (event) => {
+//   console.log("key: " + event.key);
+//   console.log("code: " + event.code);
+// });
+
+// Pass an event through to a listener
+/*
+document.addEventListener("keydown", (event) => {
+  var element = document.querySelector("p");
+
+  // Set variables for keydown codes
+  var a = "KeyA";
+  var s = "KeyS";
+  var d = "KeyD";
+  var w = "KeyW";
+
+  // Set a direction for each code
+  switch (event.code) {
+    case a:
+      element.textContent = "Left";
+      break;
+    case s:
+      element.textContent = "Down";
+      break;
+    case d:
+      element.textContent = "Right";
+      break;
+    case w:
+      element.textContent = "Up";
+      break;
+  }
+});
+*/
+
+// const section = document.querySelector("section");
+
+// // Print the selected target
+// section.addEventListener("click", (event) => {
+//   console.log(event.target);
+// });
+
+const person = {
+  firstName: "Phan",
+  lastName: "Huu Loi",
+  age: 22,
+};
+
+localStorage.setItem("test", 1);
+localStorage.setItem("person", JSON.stringify(person));
+
+for (let i = 0; i < localStorage.length; i++) {
+  let key = localStorage.key(i);
+  alert(`${key}: ${localStorage.getItem(key)}`);
+}