Differences

This shows you the differences between two versions of the page.

--- devwiki:javascript [2021/08/30 09:57] – [other new ES6 codes] ying
+++ devwiki:javascript [2024/02/03 15:18] (current) – [Timer operation] ying
@@ Line 18: / Line 18: @@
   * new let vs var<code>
-let a = 1 // local block accessible only
+let a = 1 // block scope; local block accessible only
-var b = 1 // global accessible
+var b = 1 // function scope; global accessible when global declare, local only when local declare
 </code>
   * unpack assignment (destructuring assignment, as from js1.7 = ES6) <code>
 [a, b] = [10, 20]; // Destructuring arrays
 // same as  pyhton: a,b = [10,20]
-const Zell = {
+const my_data = {
-  firstName: 'Zell',
+  firstName: 'Any',
-  lastName: 'Liew'
+  lastName: 'One'
 }
-let { a, b} = Zell // destructuring objects
+let { firstName, lastName } = my_data // destructuring objects, note the variable name must be same as key name
 </code>
@@ Line 42: / Line 42: @@
   * button click confetti:
     * https://codemyui.com/confetti-pop-out-on-button-click/
+====== array operation ======
+  * array to string <code javascript>
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+let text = fruits.join(';');
+</code>
+  * process array <code javascript>
+// process like police man in back-door truck, first in last out, last in first out
+let truck_queue = ['Bob', 'Willy', 'Mini'];
+deploy_police = main_queue.pop(); // left ['Bob', 'Willy'] output 'Mini'
+// add new police
+cats.push('Puff', 'George'); // left ['Bob', 'Willy', 'Puff', 'George']
+// process like coffee shop, first in first out, last in last out
+let coffee_queue = ['Bob', 'Willy', 'Mini'];
+cur_customer = coffee_queue.shift(); // left ['Willy', 'Mini'], output 'Bob'
+// also can cut queue to like this
+coffee_queue.unshift('Puff', 'George'); // ['Puff', 'George', 'Willy', 'Bob']
+// also add new to coffee queue normall
+coffee_queue.push('Sam'); // ['Puff', 'George', 'Willy', 'Bob', 'Sam']
+</code>
+====== UI interaction operation ======
+  * scroll to top for scrollable element <code javascript>
+document.getElementById("coinbox_content").scrollTop = 0
+#css part
+.coinbox_content{
+    float: left;
+    width: 430px;
+    height: 100%;
+    overflow: auto;
+}
+</code>
+====== Timer operation ======
+  * If the timer is intended to run indefinitely and you want a continuous countdown, the setInterval method is a simple and suitable choice. To stop, you need to explicitly clear it using clearInterval.
+  * If you want more control over the execution, especially if there are additional conditions for stopping or restarting the timer, the setTimeout recursive approach might be preferred.
+<code javascript>
+let timer = 5 * 60; // Convert minutes to seconds
+const timerIndicator = document.getElementById('timerIndicator');
+// method a: Display count down, bad: will still run after time=0
+setInterval(function() {
+    timer--;
+    timerIndicator.textContent = formatTimer(timer);
+    if (timer <= 0) {
+        alert('Form submit');
+    }
+}, 1000);
+// method b: will not run after time=0
+function updateTimer() {
+    timer--;
+    timerIndicator.textContent = formatTimer(timer);
+    if (timer <= 0) {
+        alert('Form submit');
+    } else {
+        setTimeout(updateTimer, 1000);
+    }
+}
+updateTimer(); // Start the timer.
+// end of method b
+function formatTimer(seconds) {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
+}
+</code>
+====== HTML5 and Javscript ======
+  * store data
+    * localStorage: store locally for ever, across different browser windows
+    * session storage: store locally while the tab is open, remove once closed
+    * cookie: store locally and server on requests, across different browser, support old html4, expire by defined expire
+  * example code <code javascript>
+localStorage.setItem('user','lucy')
+console.log(localStorage.getItem('user'))
+localStorage.removeItem('user')
+localStorage.clear()
+// cookie is simple, all in 1 line text, that is for all keys and datas
+document.cookie = "user=lucy"; // default cookie till the tab session close
+utc_date = new Date("2030/12/31").toUTCString()
+console.log(utc_date)
+document.cookie = "user=lucy;expires="+utc_date+";SameSite=lax" // cookie with expire date in UTC standard format
+document.cookie = "score=121;expires="+utc_date+";SameSite=lax";
+// read cookie
+function getCookie(name) {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop().split(';').shift();
+}
+console.log(document.cookie)
+console.log(getCookie('user'))
+//to remove cookie, just set expire to early date
+</code>
+  * note on SameSite attribute needed nowadays to secure cookie been sent to 3rd site:
+    * option: (SameSite=lax) for normal, (SameSite=strict) for same url, (SameSite=None;Secure) for all but https only.
+    * https://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html
+    * https://www.netsparker.com/blog/web-security/same-site-cookie-attribute-prevent-cross-site-request-forgery/