November 15, 2022: Javascript

Review: Events

Basic code manipulating the DOM (the HTML)
var myButtonElement = document.querySelector('button')
var h1Element = document.querySelector('h1')
function changeHeader() {
  h1Element.innerText = 'Hi!'
  h1Element.classList.add('big')
}
myButtonElement.addEventListener('click', changeHeader)

What events can we react to?
Here’s a list of events like clickhttps://www.w3schools.com/jsref/dom_obj_event.asp

Lecture/Demo: Loops

Starting files from today’s demo


Full / Finished version of today’s demo with comments

You can find it in my Github demo library.
You can pull the latest through Github Desktop if you have it cloned.

References for today’s code…

.parentElementMDN Reference
.nextElementSiblingMDN Reference
.querySelectorAll()MDN Reference
.classListMDN Reference
These are properties and functions that work on Element-type objects. Here are all of the Element properties and functions… — MDN Reference

Some more code examples and references

  • Conditional Logic (If/Else) is probably best studied with a proper Javascript programming course, but here’s the basic structure…
// code to simulate a coin flip...
var randomNumber = Math.random() // returns a number from 0 to 0.999...
if (randomNumber > 0.5) {
  console.log('coin lands on heads')
} else if (randomNumber < 0.5) {
  console.log('coin lands on tails')
} else if (randomNumber == 0.5) {
  console.log('coin lands standing on the edge')
} else {
  console.log('coin rolls away and disappears forever')
}

Some Inspiration?

There are great websites in hidden corners of the internet. 🙂 I like to see what people have collected on Are.na. Here’s a great collection — https://www.are.na/chia/poetic-web — by an artist/designer named Chia Amisola