• Sometimes in our code, we may want to delay some action. Enter Timers!
  • setTimeout(); 
    
    < !-- HTML Code -->
    < button onclick="delayAlert()">Start the Timer< /button>

    //JS Code
    var timer;

    function delayAlert() {
        timer = setTimeout(newAd, 3000);
    };

    function newAd() {
        alert('Want to buy some stuff?');
    };
  • clearTimeout(); 
    
    function cancelAd() {
        clearTimeout(newAd);
    };
  • setInterval(); 
    
        var repeatGreet = setInterval(greetUser, 1000);

        function greetUser() {
            alert('Hello!!!!!!');
        };
  • clearInterval(); 
    
    function cancelGreeting() {
        clearInterval(repeatGreet);
    };
  • Let's try it!
    1. Write a program that prompts the user for a time (in ms) they want to wait.
    2. Take the response and create a setTimeout. After the time expires, alert the user with a random quote.
    3. Add an interval that prompts for a number of how often the user wants to be alerted and have the message change every time the alert happens. HINT: DO NOT write multiple messages, have JS change it for you.
    4. Create two buttons: one that cancels the timeout, and one that cancels the interval.
  • Often, we will want to store data in an easily retrievable space that is faster than accessing a Database. Enter Browser Storage!
  • Session Storage lasts only for one session. Sessions last as long as the browser is open and persists past refreshes.
  • Local Storage lasts for as long as developer allows it, persists across several sessions indefinitely.
  • setItem();, getItem();, and clearItem();
  • Let's try it!
    • Mock up a log in (prompt for un and pw) and store the username in local storage under "user."
    • Create buttons to change the value of user, clear the value of user, and alert the value of user.
    • How can this be used in our final project?
  • How can we use this in our todo app?
  • Immediately Invoked Function Expression: basically an anonymous function that gets called immediately.
  • Benefits: mainly around keeping scope contained where you want it. Consider the following: 
    
    var v = 1;
    var getValue = (function(x) {
        return function() {
            alert(x);
        };
    }(v));
    v = 2;

    getValue();
    //What do you expect the value that is alerted to be? copy this code and run it to see...
  • This is the scope binding I mentioned earlier. The main usefulness of this comes in frameworks, but they are useful when you want to constrain the scope of something.

You may have seen 'use strict' in examples as you have been Googling answers. The purpose of this setting is to intentionally change the rules that your JS code applies to itself. It is a variant of JavaScript, and it has some complicated implications. In a nutshell, strict mode:

  1. Converts mistakes to errors
  2. Sometimes allows for optimization of how the compiler builds your JS
  3. Introduces future rules that will be adopted into JS in the coming versions of JS by forcing partial adherence to those rules.

If you have not already, you can start utilizing event handlers in your code along with your array structures.

  • When the submit button is clicked on your todo form, get the user input and add it to an array
  • Create a function that will clear out the list and loop over the array to print out all of the todo items.
  • Each todo item should have a button to delete the item and a checkbox to mark the item as finished by using strikethrough on the text for a handful of seconds, then remove the todo item and move it to the "done" list.
  • The "done" list should be stored somewhere that persists so the user can come back to it. It should also disappear from the view after a couple minutes, but be able to be recalled by the click of a button.