Section outline

    • 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

      Diagram by Mace Ojala (CC BY-NC-SA)

      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.

      1000 pages of source code

      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.

      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.

      Diagram by Mace Ojala (CC BY-NC-SA)