Differences

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

--- devwiki:javascript [2021/09/02 09:48] – [other new ES6 codes] ying
+++ devwiki:javascript [2022/07/31 05:53] – [array operation] ying
@@ 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>
+====== 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/