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;// Gettingobject.property= value;// Settingobject.method();// Calling a method without argumentsobject.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.
1000 pages of source code (Photo by Mace Ojala)
Some simple JavaScript objects types
value
type
“Hello world!”
String
4
Number
[‘cat’, ‘mouse’, ‘lizard’]
Array
⋮
⋮
🏭 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.
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.