hackyourfuture.dk

Week 1

Learning goals

See this module's learning goals.

Relevant links

HTML interaction

Interacting with the HTML DOM is done through the document object in the browser. With the document object we can get html elements and change them.

For the next js part we use this html.

<html>
  <body>
    <h1>Javascript week 3</h1>
    <div class="queue"></div>
    <div id="test-id"></div>
    <script src="js/review.js"></script>
  </body>
</html>
// use the querySelector to select elements just like in css
const testIdElement = document.querySelector("#test-id");
console.log(testIdElement); // logs the html element with id "test-id"

// Change the inner html of the test-id element
testIdElement.innerHTML = "test";
// Change the background-color of the test-id element. Inline css changes is done via the style attribute on the element
testIdElement.style.backgroundColor = "blue";

// It is also possible to create html elements
// Create a div element
const div = document.createElement("div");
// Change its inner html
div.innerHTML = "We created this div!!!";

// Lest append it to the div with the class queue
const queueDiv = document.querySelector(".queue");
queueDiv.appendChild(div);

Code Commenting

First the straightforward part: how do we place comments in our code?

HTML

W3Schools Comments

<!-- Write
your comments here -->

<!-- Write your comments here -->

CSS

MDN on CSS comments

/* Comment */

/*
A comment
which stretches
over several
lines
*/

JavaScript

Single line comments

// Change heading:
document.getElementById("myH").innerHTML = "My First Page";

Single line comments at end of the line:

const x = 5; // Declare x, give it the value of 5

Writing js documentation: JSDoc

When to comment?

Now for the hard part: when to comment? When you work for different companies, you will see different styles. Embrace something you like, and then learn to let go. Google on "when to comment code?" and you'll find a big bunch of different opinions.

The general concept is, however, that it is there to help make the code more easy to understand. Note, however, that comments can also make code more difficult to understand when not applied properly.

Events

Events in JavaScript are things like: A timer has just finished, a user clicked a button, our page has loaded, someone types into an input element or we have just gotten some data from a server. When these events happen, we usually want to add some functionality. For example, when a user clicks the "like" button (event), we want to increment the "like" counter, and color the "like" button blue. Or when someone clicks "Close cookies" (event) we want to remove the cookie div.

Let's first try to create some js that waits for 2 seconds and the console.logs out "2 seconds has elapsed!"

In JavaScript we use an event listener to listen:

setTimeout(function () {
  console.log("2 seconds has elapsed!");
}, 2000);

// Cool, now let's make a function as a variable:
const fourSecondLog = function () {
  console.log("4 seconds has elapsed!");
};

setTimeout(fourSecondLog, 4000);

Now let's keep track of how many times a button is clicked. To do something whenever a button gets clicked, we use what is called an event listener.

Imagine that the button is noisy. There's someone listening out for the click sound, and every time they hear it, they add 1 to a counter.

const buttonElement = document.querySelector("button");
let counter = 0;

buttonElement.addEventListener("click", function () {
  counter = counter + 1;
  console.log(`Button clicked ${counter} times so far`);
});

You might prefer to assign the event listener to a const, like this:

const buttonElement = document.querySelector("button");
let counter = 0;

const buttonClicked = function () {
  counter = counter + 1;
  console.log(`Button clicked ${counter} times so far`);
};

buttonElement.addEventListener("click", buttonClicked);

Last updated