Javascript Advance and Modules

  • as javascript program becomes complex, it has new concepts of modules, (like python module, a library of functions)
  • as javascript is inside different browser, means it needs browser support, modern new browser has support new feature of js, but js need to tell them, how modern this JS code is, like type attribute.
    <!doctype html>
    <script type="module">
      // note: module need browser access via http, not file:///
      import {sayHi} from './say.js';
      document.body.innerHTML = sayHi('John');
  • 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)
    [a, b] = [10, 20]; // Destructuring arrays
    // same as  pyhton: a,b = [10,20]
    const my_data = {
      firstName: 'Any',
      lastName: 'One'
    let { firstName, lastName } = my_data // destructuring objects, note the variable name must be same as key name

Useful code

array operation

  • array to string
    const fruits = ["Banana", "Orange", "Apple", "Mango"];
    let text = fruits.join(';');
  • process array
    // 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']

UI interaction operation

  • scroll to top for scrollable element
    document.getElementById("coinbox_content").scrollTop = 0
    #css part
        float: left;
        width: 430px;
        height: 100%;
        overflow: auto;

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
    // 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()
    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();
    //to remove cookie, just set expire to early date
  • note on SameSite attribute needed nowadays to secure cookie been sent to 3rd site:
  • devwiki/javascript.txt
  • Last modified: 2022/07/31 05:53
  • by ying