Code Structure

Video

JavaScript Notes

HTML 
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Beyond Beginner</title>
        <style>
          html {
            font-size: 20px;
            line-height: 1.7;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-weight: 300;
            color: cornflowerblue;
          }
          h1 {
            font-size: 3rem;
          }
          h2 {
            font-size: 2rem;
          }
        </style>
      </head>
      <body>
        <header>
          <h1>Going Beyond the Basics of JavaScript</h1>
          <h2>How to Structure your Scripts</h2>
        </header>
        <script src="./js/main-3.js" type="module"></script>  // the keyword defer could be used to defer loading
      </body>                                                 // of the script, until the DOM content is fully loaded
                                                              // module also does the same thing as defer 
    </html>
JavaScript - default Structure 
    // main.js
    // Moving beyond beginner with scripts
    // 1. Basic code structure
    
    let today = new Date();
    const KEY = 'jhj3245gj23h42j34';
    
    function init() {
      //function to start things off
      console.log(today.toLocaleDateString());
      //add some event listeners
      addListeners();
      //make a call to an API with a callback
      let url = `https://jsonplaceholder.typicode.com/posts?key=${KEY}`;
      getData(url, afterFetch);
    }
    // let init = function(){}   //function expression
    
    function addListeners() {
      console.log('adding listeners to the page');
    }
    
    function getData(url, cb) {
      //do fetch call
      fetch(url)
        .then((res) => res.json())
        .then((content) => {
          //call function to add content
          //call the callback
          if (cb) {
            cb();
          }
        })
        .catch((err) => console.error);
    }
    
    function afterFetch() {
      console.log('data fetch completed');
    }
    
    document.addEventListener('DOMContentLoaded', init);
JavaScript - with Namespaces 
    // main-1.js
    // start using namespaces so your code does not conflict
    // with other libraries
    
    const APP = {                    
      today: new Date(),        
      KEY: 'jhj3245gj23h42j34',
      init: function () {
        //function to start things off
        console.log(APP.today.toLocaleDateString());   //the keyword 'this' instead of APP could also be used
        //add some event listeners
        APP.addListeners();
        //make a call to an API with a callback
        let url = `https://jsonplaceholder.typicode.com/posts?key=${APP.KEY}`;
        APP.getData(url, APP.afterFetch);
      },
      addListeners: function () {
        console.log('adding listeners to the page');
      },
      abc: () => {
        console.log('abc');
      },
      getData() {
        //do fetch call
        fetch(url)
          .then((res) => res.json())
          .then((content) => {
            //call function to add content
            //call the callback
            if (cb) {
              cb();
            }
          })
          .catch((err) => console.error);
      },
      afterFetch() {
        console.log('data fetch completed');
      },
    };
    document.addEventListener('DOMContentLoaded', APP.init);
    
    const CONTACT = {};
    
    const CART = {};
    
    const MAPPING = {};
JavaScript - with IIFEs 
    // main-2.js
    // IIFE - Immediately Invoked Function Expressions
    // Uses namespaces but also lets you control access
    
    const APP = (function () {
      document.addEventListener('DOMContentLoaded', init);
    
      let today = new Date();
      const KEY = 'jhj3245gj23h42j34';
    
      function init() {
        console.log('loaded');
        //function to start things off
        console.log(today.toLocaleDateString());
        //add some event listeners
        addListeners();
        //make a call to an API with a callback
        let url = `https://jsonplaceholder.typicode.com/posts?key=${KEY}`;
        getData(url, afterFetch);
      }
    
      function addListeners() {
        console.log('adding listeners to the page');
      }
    
      function getData(url, cb) {
        //do fetch call
        fetch(url)
          .then((res) => res.json())
          .then((content) => {
            //call function to add content
            //call the callback
            if (cb) {
              cb();
            }
          })
          .catch((err) => console.error);
      }
    
      function afterFetch() {
        console.log('data fetch completed');
      }
    
      return {
        getData,  //shorthand for getData: getData
        today,
        KEY,
      };
    })();
    
    // APP.getData()
    // APP.KEY
    // APP.afterFetch(); - ERROR. Private, is not in return statement
JavaScript - with Modules 
    // main-3.js
    import { PIE, f } from './modules/a.mjs';
    import someFunc, { CAKE } from './modules/b.js';
    // g will be someFunc
    
    const APP = (function () {
      document.addEventListener('DOMContentLoaded', () => {
        console.log(PIE);
        f();
        someFunc();
        console.log(CAKE);
      });
    
      //rest of code just like in main-2
    })();
JavaScript - with Modules 
    // a.mjs (stands for: module js)
    const PIE = 3.14;
    
    function f() {
      console.log('function f inside module a');
    }
    
    function f123() {
      //not accessible
    }
    
    export { PIE, f };
JavaScript - with Modules 
    // b.js
    export const CAKE = 'a lie';
    
    function g() {
      console.log('function g in module b');
    }
    
    export default g;        //only 1 default allowed per page
                             //when called in import line, it can be called anything, e.g. someFunc