Scene 2. Let’s break the web

In which we take what we have learned so far, venture out to the web, and cause some chaos.

Core concept: Objects

An object represents a-thing-in-the-world. Let’s continue with websites

Objects have properties and methods. Objects are collections of those (and almost nothing more)

object = {
    property1: value1,
    property2: value2,
    ...
}

What’s the point? 🤔❓

Types and the type/token distinction is a classic topic in Philosophy. (Depending on your position), the type itself is abstract, but however shared with all the concrete objects of that type. Many objects have the same type, and we can operate on all of them if we can operate on the type;.

• any array can be sorted
• any paragraph can be made green
• any button can be clicked
• pixels of any image can be manipulated
• any post can be liked
• any user can be followed
• any cookie can be sold
• any email has sender, recipient, date and subject
• …

Objects have properties and methods

object.property;          // Getting
object.property = value;  // Setting

object.method();          // Calling a method without arguments
object.method(argument);  // Calling a method with arguments

Earlier we already set the innerText property of an HTML p (=paragraph) object

innerText = "Hello world"

And called log method of the console object

console.log("Hello world!")

Programming is basically all about organizing statements like the above to manipulate objects, their properties and their methods in some interesting and relevant way.

Some simple JavaScript objects types

 

🏭 Guided activity
What else you could imagine represented as objects?

Beyond simple types, when we surf the web, one very complex object we manipulate is document. It represents the current webpage we have loaded in the browser. You can read more e.g. in Ulrich Kaiser, Ilka-Mestemacher and Theresa Ulbricht’s Webtechnologie (1)

🏭 Guided activity
Read Montfort chapter 3 Modifying a Program and add more words to https://nickm.com/memslam/stochastic_texts.html, which is a version of Theo Lutz’s Stochastische Texte (1959).

Selecting elements of document

🏭 Guided activity
Input a “CSS selector”, return the first matching element.

document.querySelector('.btn').click() // querySelector selects the 1st match

Now let’s select all the elements of a type, and do something for each.

document.querySelectorAll('img').forEach(image => {
    a_twist = "rotate(0.5turn)";
    image.style.transform = a_twist;
})

🏭 Guided activity
What happened? What would be next, small steps?

Different twist for each image

document.querySelectorAll('img').forEach(image => {
    a_twist = "rotate(" + Math.random() + "turn)";
    image.style.transform = a_twist;
})

Setting element’s contents

e.innerText = "Hello world!"

Hiding elements by setting HTMLElement.hidden, after selecting them with from the document.

🏭 Guided activity
A basic ad blocker works like the above code. Who is using an ad blocker? Discuss what do you think about your ad blocker, and and blockers in general?

🏭 Guided activity
Select a media player on a website with audio or video files, and manipulate it’s playback speed. The players will be audio or video objects.

Exploration of breaking the web

Same as last time, but with more feeling! This time Work with a friend; use https://www.w3schools.com/js for help.