Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
devwiki:javascript [2021/08/30 09:53] – [Javascript Advance and Modules] ying | devwiki:javascript [2024/02/03 15:18] (current) – [Timer operation] ying | ||
---|---|---|---|
Line 13: | Line 13: | ||
- | ===== other new codes ===== | + | ===== other new ES6 codes ===== |
+ | * ref : https:// | ||
+ | |||
+ | * new let vs var< | ||
+ | let a = 1 // block scope; local block accessible only | ||
+ | var b = 1 // function scope; global accessible when global declare, local only when local declare | ||
+ | </ | ||
* unpack assignment (destructuring assignment, as from js1.7 = ES6) < | * unpack assignment (destructuring assignment, as from js1.7 = ES6) < | ||
[a, b] = [10, 20]; // Destructuring arrays | [a, b] = [10, 20]; // Destructuring arrays | ||
// same as pyhton: a,b = [10,20] | // 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 |
</ | </ | ||
Line 36: | Line 42: | ||
* button click confetti: | * button click confetti: | ||
* https:// | * https:// | ||
+ | |||
+ | ====== array operation ====== | ||
+ | * array to string <code javascript> | ||
+ | const fruits = [" | ||
+ | let text = fruits.join(';' | ||
+ | </ | ||
+ | * process array <code javascript> | ||
+ | // process like police man in back-door truck, first in last out, last in first out | ||
+ | let truck_queue = [' | ||
+ | deploy_police = main_queue.pop(); | ||
+ | // add new police | ||
+ | cats.push(' | ||
+ | |||
+ | // process like coffee shop, first in first out, last in last out | ||
+ | let coffee_queue = [' | ||
+ | cur_customer = coffee_queue.shift(); | ||
+ | |||
+ | // also can cut queue to like this | ||
+ | coffee_queue.unshift(' | ||
+ | |||
+ | // also add new to coffee queue normall | ||
+ | coffee_queue.push(' | ||
+ | </ | ||
+ | |||
+ | ====== UI interaction operation ====== | ||
+ | |||
+ | * scroll to top for scrollable element <code javascript> | ||
+ | document.getElementById(" | ||
+ | |||
+ | #css part | ||
+ | .coinbox_content{ | ||
+ | float: left; | ||
+ | width: 430px; | ||
+ | height: 100%; | ||
+ | overflow: auto; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ====== 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(' | ||
+ | |||
+ | // method a: Display count down, bad: will still run after time=0 | ||
+ | setInterval(function() { | ||
+ | timer--; | ||
+ | timerIndicator.textContent = formatTimer(timer); | ||
+ | if (timer <= 0) { | ||
+ | alert(' | ||
+ | } | ||
+ | }, 1000); | ||
+ | |||
+ | // method b: will not run after time=0 | ||
+ | function updateTimer() { | ||
+ | timer--; | ||
+ | timerIndicator.textContent = formatTimer(timer); | ||
+ | if (timer <= 0) { | ||
+ | alert(' | ||
+ | } else { | ||
+ | setTimeout(updateTimer, | ||
+ | } | ||
+ | } | ||
+ | updateTimer(); | ||
+ | // end of method b | ||
+ | |||
+ | function formatTimer(seconds) { | ||
+ | const minutes = Math.floor(seconds / 60); | ||
+ | const remainingSeconds = seconds % 60; | ||
+ | return `${String(minutes).padStart(2, | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ====== HTML5 and Javscript ====== | ||
+ | |||
+ | * store data | ||
+ | * localStorage: | ||
+ | * 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(' | ||
+ | console.log(localStorage.getItem(' | ||
+ | |||
+ | localStorage.removeItem(' | ||
+ | localStorage.clear() | ||
+ | |||
+ | // cookie is simple, all in 1 line text, that is for all keys and datas | ||
+ | document.cookie = " | ||
+ | |||
+ | utc_date = new Date(" | ||
+ | console.log(utc_date) | ||
+ | document.cookie = " | ||
+ | document.cookie = " | ||
+ | |||
+ | // read cookie | ||
+ | function getCookie(name) { | ||
+ | const value = `; ${document.cookie}`; | ||
+ | const parts = value.split(`; | ||
+ | if (parts.length === 2) return parts.pop().split(';' | ||
+ | } | ||
+ | console.log(document.cookie) | ||
+ | console.log(getCookie(' | ||
+ | |||
+ | //to remove cookie, just set expire to early date | ||
+ | </ | ||
+ | * 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; | ||
+ | * https:// | ||
+ | * https:// | ||
+ |