Jquery

Jquery is used to activate like elements within a HTML document using JavaScript.

It can link JS logic into a webpage via scripts.

To use Jquery, we first need to create a file within the repo called jquery.js. With this, we download the content required from their website and then paste it into the file.

First thing we need to do is to prime it within the HTML document.

<script src="logicFile.js"></script>
<script src="jquery.js"></script>

This primes the HTML document to start using the javascript logic that has been written, as well as activating JQuery.

From here, anything below these two lines can be used to start using JQuery.

<script>
$(document).ready(function(){

//insert code here

});

</script>

This waits for the page to finish loading all of it's elements before running any of the JQuery stuff.

Finding elements to play around in JQuery

Hopefully while we have been writing the HTML, we have a bunch of IDs to point to where our stuff is:

<h1 id=temperature></h1>
<button id="temperature-up">+</button>
<button id="temperature-down">-</button>
<button id="toggle-powersave">powersavetoggle</button>
Power saving mode is: <span id="power-save-status">on</span>
<button id="reset">reset</button>

From here, we can refer to the stuff in the script by searching through the console:

$('#temperature')
// jQuery.fn.init [h1#temperature]

Using this, we can build out what we want.

Showing the values of a variable live in JQuery:

  $('#temperature').text(thermostat._temperature);

Event listeners

We can attach event listeners to elements in the DOM, allowing the page to react to user inputs.

Take a second to think about the flow of what happens when a user interaction happens:

user input > event listener > update model > update view to reflect change in model

in code:

$('#temperature-up').on('click', function() {    // event listener
    thermostat.up();    // update model
    $('#temperature').text(thermostat.temperature);    // update view
});