nezumi/javascript-training
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/javascript-training.git synced 2026-09-23 04:09:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Init example for event and localStorage

Browse Source
This commit is contained in:
nezumi
2023-08-16 17:25:30 +07:00
parent 3671d1fcfe
commit 3647419f2d
2 changed files with 184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Sample/events_and_localStorage/index.html
+82
View File
@@ -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>
Sample/events_and_localStorage/index.js
+102
View File
@@ -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)}`);
}