practice : blinking background

tools = require('../js/tools'); tools.init()

make sure you read this notebook thoroughly before you start

in this notebook :

a simple assignment
plus a few tips to get started

assignment¶

create or reuse a HTML document as a collection of 3 files; it can be your resumé, in that case however you may want to commit them first...

make sure the html <head> loads both the css and js companions
then edit the JavaScript code, so that the background alternates every 1 second between 2 different colours
note that there are many approaches to achieving this, and at least 2:
- either changing properties directly on the DOM,
- or messing with CSS classes
  and early finisher should give both angles a go

in any case you should obtain something like this

tools.sample_from_stem("../samples/41-resume-blinking", {sources_show: false})

tip #1 : run code upon load¶

so, you want to start some code - say call function start() - right after the page loads

the wrong way¶

it is tempting, but totally unsafe, to do something like

<!-- DO NOT DO THIS -->

<script src="thecode.js">
</script>

<script>
start('some-data')
</script>

because:

at the time when start('some-data') gets executed, your page is still in the middle of the loading phase !
you might be lucky and this may work just fine for you, but then it is just a coincidence and that is not right

the proper way¶

the proper way is to attach a callback to the page load event

// attach an (anonymous) function to the 'load' event
document.addEventListener(
    'DOMContentLoaded',                   // the event name
    () => start('some-data')  // the callback: must be a function
)

this time, start() will get called later at a time where you can be sure the document is entirely loaded

tip #2: implementing a cyclic task¶

implementing a cyclic task was done in example 2 already; as a reminder it is based on setInterval():

// not mandatory, but with this soft switch
// we could easily turn the blinking on and off
/*let*/ active = true;

function one_step() {
    if (active)
        console.log("beep");
}

// start the cyclic job: call one_step() every 1s
/*const*/ interval = setInterval(one_step, 1000)

single tasking vs multi tasking

the kind-of equivalent in Python would look like:

while True:
    if active:
        one_step()
    sleep 1

however with such an approach, the Python interpreter can’t do anything else at the same time
notice how here with JS, the browser is still able to do other things !

turning it off¶

quick users may want to implement some sort of trick to turn off the blinking
with the code above, we have 2 options to do that

just do active = false in that case the cyclic task is still there, but does nothing
or cancel the cyclic task altogether, like so
```
clearInterval(interval)
```

tip #3: the browser cache (yet again)¶

the browser cache thingy applies exactly the same with CSS and with JS

tip #4 : use devel tools¶

crucially important to get familiar with these tools
and to turn to them as soon as something does not behave
here you will need to use the most useful ones :
- Elements
- Console
- and to a lesser extent, Sources

Devel Tools : Elements¶

as mentioned earlier already, you can

navigate the DOM
Inspect an element (find an element from a position in the page)
see the CSS rules that apply to an element
find out where these styles come from
see the computed values for each property
interactively change a property and see effect immediately

visualizing a changed property¶

Devel Tools : the Console REPL¶

the place where lands the output of console.log of course quite useful for naive debugging
and that lets you run JavaScript on the fly much like the Python interpreter does
(this is known as a REPL = Read Eval Print Loop)

Devel Tools : Sources¶

occasionnally useful to browse the code actually loaded

Devel Tools : debugger¶

the Sources tab has buit-in debugging features

practice : blinking background

assignment¶

tip #1 : run code upon load¶

the wrong way¶

the proper way¶

tip #2: implementing a cyclic task¶

turning it off¶

tip #3: the browser cache (yet again)¶

tip #4 : use devel tools¶

Devel Tools : Elements¶

visualizing a changed property¶

Devel Tools : the Console REPL¶

Devel Tools : Sources¶

Devel Tools : debugger¶

more on devel tools¶