scribbledecobble: Don't you want to play?

README

[Katy] Perry filmed a performance of a version of the song [Hot n Cold] with puppet character Elmo from Sesame Street, which was intended to teach children about antonyms. The clip was originally scheduled to run on the 41st-season premiere of the educational children's program on September 27, 2010, however the performance, which was uploaded to YouTube earlier, garnered controversy . . . Before the scheduled airing, Sesame Workshop announced that after controversy over the clip, "We have decided we will not air the segment on the television broadcast of Sesame Street, which is aimed at preschoolers. Katy Perry fans will still be able to view the video on YouTube." Perry mocked the controversy shortly afterwards in a skit during her appearance on Saturday Night Live as a musical guest . . .

— Wikipedia, Hot n Cold (retrieved on 25 Jul 2017)

Little Sinner is a 1935 Our Gang short comedy film directed by Gus Meins. It was the 139th Our Gang short to be released, and the first appearance of two-year old Porky.

Plot

Anxious to go fishing, Spanky skips out of Sunday school, despite the admonitions of his pals Alfalfa, Mildred, Sidney, and Marianne that "Something's going to happen to you." Actually, everything happens to Spanky and his kid brother (Eugene "Porky" Lee) in the course of the morning. Chased out of a private estate by cantankerous caretaker, the two boys wander into a dark, mysterious woods just as an eclipse occurs and at the same time a large group of black worshippers are holding a mass baptism ceremony. Some view the baptism and background singing of the Negro spiritual "I Am Leaning on The Lord", which contains the words: "Why don't you come out of the wilderness" as a racist stereotype. However, as Spanky, Porky and Buckwheat are scared out of the woods, a wilderness, it could merely be a play on the song's words for their situation.

Inevitably, the kids scare the worshippers, and vice versa, culminating in a hectic chase.

— Wikipedia, Little Sinner (retrieved on 25 Jul 2017)

Code

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<style>
  #playground {
  }
  #school {
  }
  #home {
  }
</style>

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<h1>Our Gang Roaming Freely</h1>

<select id="goto">
  <option data-place-id="playground">Let's play!</option>
  <option data-place-id="school">Let's go to school.</option>
  <option data-place-id="home">Let's go home.</option>
</select>

<div id="playground">
  <h2 class="heading">Playground</h2>
  <ul class="list">
    <li>Katy Perry</li>
    <li>Elmo</li>
    <li>Spanky</li>
    <li>Buckwheat</li>
    <li>Froggy</li>
    <li>Alfalfa</li>
    <li>Darla</li>
  </ul>
</div>

<div id="school">
  <h2 class="heading">School</h2>
  <ul class="list">
  </ul>
</div>

<div id="home">
  <h2 class="heading">Home</h2>
  <ul class="list">
  </ul>
</div>

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<script>

  // Declare and set a global constant called gotoElement, and declare
  // and set a global variable called selectedIndex.

  const gotoElement = document.getElementById("goto");
  let selectedIndex = 0;

  /*********************************************************************
   *  Define a function that returns an array of items that correspond
   *  to the items of the value of the parameter named set.
   */
  function toArray(set) {
    const array = [];
    let i = set.length;
    while (--i >= 0) {
      array[i] = set[i];
    }
    return array;
  }

  /*********************************************************************
   *  Define a function that returns an element that a) is within an
   *  element identified by the value of the parameter containerId, and
   *  b) is associated with a class matching the value of the parameter
   *  className.
   */
  function getElementWithClassIn(containerId, className) {
    const
        idSearchString = "#" + containerId,
        classSearchString = "." + className,
        searchString = idSearchString + " " + classSearchString;

    return document.querySelector(searchString);
  }

  /*********************************************************************
   *  Define a function that returns a list element that is within an
   *  element identified by the value of the parameter containerId.
   */
  function getListElementIn(containerId) {

    // Assume the value of containerId matches the id value of an
    // element in the document that contains a list element that is
    // associated with the class name "list".

    const className = "list";
    return getElementWithClassIn(containerId, className);
  }

  /*********************************************************************
   *  Define a function that returns "Our Gang", i.e. a set of list item
   *  elements from the list element within another element identified
   *  by the value of the parameter placeId.
   */
  function getOurGang(placeId) {
    const listElement = getListElementIn(placeId),
          ourGang = toArray(listElement.getElementsByTagName("li"));
    return ourGang;
  }

  /*********************************************************************
   *  Define a function that moves the list item elements referred to by
   *  the parameter ourGang from their current location to the list
   *  element identified by the parameter placeId.
   */
  function moveTo(placeId, ourGang) {
    const listElement = getListElementIn(placeId);
    while (ourGang.length > 0) {
      listElement.appendChild(ourGang.shift());
    }
  }

  /*********************************************************************
   *  Instruct the application to call an anonymous function when the
   *  user changes the currently selected option in the list of options
   *  contained in the element referred to by gotoElement.
   *
   *  Functions that that are called as a result of events firing are
   *  sometimes called listener functions. Notice that the name of the
   *  method used to associate a function with the firing of an event
   *  is called addEventListener.
   *
   *  When listener functions are called as a result of an event firing,
   *  an argument is passed to the listener function; this argument
   *  contains information about the event that occurred. For example,
   *  the property of the argument named target refers to the element
   *  associated with the listener and the event that fired.
   */ 
  gotoElement.addEventListener("change", function(event) {

    // Assume an event object is always passed to the function.

    // Step 1. Set places.
    // -----------------------------------------------------------------
    // Declare a variable named places and set/initialize its value
    // equal to the value the property named target of the parameter
    // named event.

    const places = event.target;

    // Steps 2 a-c. Set oldPlace; update selectedIndex; set newPlace.
    // -----------------------------------------------------------------
    // Declare constant oldPlace and set oldPlace equal to the
    // previously selected option, which is obtained using the value of
    // the global variable selectedIndex. Then set selectedIndex equal
    // to the the index of the currently selected option. Then declare
    // constant newPlace and set newPlace equal to the currently
    // selected option, which is obtained via selectedIndex.

    const oldPlace = places.options[selectedIndex];
    selectedIndex = places.selectedIndex;
    const newPlace = places.options[selectedIndex];

    // Steps 3 a-b. Set oldPlaceId; set newPlaceId.
    // -----------------------------------------------------------------
    // Declare constant oldPlaceId and set oldPlaceId equal to the value
    // of the attribute data-place-id of oldPlace. Similarly, create
    // constant newPlaceId and set newPlaceId equal to the value of the
    // attribute data-place-id of newPlace.

    const oldPlaceId = oldPlace.getAttribute("data-place-id");
    const newPlaceId = newPlace.getAttribute("data-place-id");

    // Steps 4 a-b. Set ourGang; call moveTo.
    // -----------------------------------------------------------------
    // Declare constant ourGang; call getOurGang, passing the value of
    // of oldPlaceId as the argument, and set ourGang equal to the value
    // returned. Finally, call moveTo, passing the values of newPlaceId
    // and ourGang as arguments. The algorithm terminates.

    const ourGang = getOurGang(oldPlaceId);
    moveTo(newPlaceId, ourGang);
  });

</script>

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<style>
  #playground {
  }
  #school {
  }
  #home {
  }
  .kid {
  }
  .adult {
  }
</style>

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<h1>Our Gang Under Adult Supervision</h1>

<select id="goto">
  <option data-place-id="playground">Let's play!</option>
  <option data-place-id="school">Let's go to school.</option>
  <option data-place-id="home">Let's go home.</option>
</select>

<div id="playground">
  <h2 class="heading">Playground</h2>
  <ul class="list">
    <li class="adult">Katy Perry</li>
    <li class="kid">Elmo</li>
    <li class="kid">Spanky</li>
    <li class="kid">Buckwheat</li>
    <li class="kid">Froggy</li>
    <li class="kid">Alfalfa</li>
    <li class="kid">Darla</li>
  </ul>
</div>

<div id="school">
  <h2 class="heading">School</h2>
  <ul class="list">
    <li class="adult">Donald E. Knuth</li>
  </ul>
</div>

<div id="home">
  <h2 class="heading">Home</h2>
  <ul class="list">
    <li class="adult">Mom</li>
    <li class="adult">Dad</li>
  </ul>
</div>

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<script>

  // Declare and set a global constant called gotoElement, and declare
  // and set a global variable called selectedIndex.

  const gotoElement = document.getElementById("goto");
  let selectedIndex = 0;

  /*********************************************************************
   *  Define a function that returns an array of items that correspond
   *  to the items of the value of the parameter named set.
   */
  function toArray(set) {
    const array = [];
    let i = set.length;
    while (--i >= 0) {
      array[i] = set[i];
    }
    return array;
  }

  /*********************************************************************
   *  Define a function that returns an element that a) is within an
   *  element identified by the value of the parameter containerId, and
   *  b) is associated with a class matching the value of the parameter
   *  className.
   */
  function getElementWithClassIn(containerId, className) {
    const
        idSearchString = "#" + containerId,
        classSearchString = "." + className,
        searchString = idSearchString + " " + classSearchString;

    return document.querySelector(searchString);
  }

  /*********************************************************************
   *  Define a function that returns a list element that is within an
   *  element identified by the value of the parameter containerId.
   */
  function getListElementIn(containerId) {

    // Assume the value of containerId matches the id value of an
    // element in the document that contains a list element that is
    // associated with the class name "list".

    const className = "list";
    return getElementWithClassIn(containerId, className);
  }

  /*********************************************************************
   *  Define a function that returns "Our Gang", i.e. a set of list item
   *  elements from the list element within another element identified
   *  by the value of the parameter placeId.
   */
  function getOurGang(placeId) {
    const listElement = getListElementIn(placeId),
          ourGang = toArray(listElement.getElementsByClassName("kid"));
    return ourGang;
  }

  /*********************************************************************
   *  Define a function that moves the list item elements referred to by
   *  the parameter ourGang from their current location to the list
   *  element identified by the parameter placeId.
   */
  function moveTo(placeId, ourGang) {
    const listElement = getListElementIn(placeId);
    while (ourGang.length > 0) {
      listElement.appendChild(ourGang.shift());
    }
  }

  /*********************************************************************
   *  Instruct the application to call an anonymous function when the
   *  user changes the currently selected option in the list of options
   *  contained in the element referred to by gotoElement.
   *
   *  Functions that that are called as a result of events firing are
   *  sometimes called listener functions. Notice that the name of the
   *  method used to associate a function with the firing of an event
   *  is called addEventListener.
   *
   *  When listener functions are called as a result of an event firing,
   *  an argument is passed to the listener function; this argument
   *  contains information about the event that occurred. For example,
   *  the property of the argument named target refers to the element
   *  associated with the listener and the event that fired.
   */ 
  gotoElement.addEventListener("change", function(event) {

    // Assume an event object is always passed to the function.

    // Step 1. Set places.
    // -----------------------------------------------------------------
    // Declare a variable named places and set/initialize its value
    // equal to the value the property named target of the parameter
    // named event.

    const places = event.target;

    // Steps 2 a-c. Set oldPlace; update selectedIndex; set newPlace.
    // -----------------------------------------------------------------
    // Declare constant oldPlace and set oldPlace equal to the
    // previously selected option, which is obtained using the value of
    // the global variable selectedIndex. Then set selectedIndex equal
    // to the the index of the currently selected option. Then declare
    // constant newPlace and set newPlace equal to the currently
    // selected option, which is obtained via selectedIndex.

    const oldPlace = places.options[selectedIndex];
    selectedIndex = places.selectedIndex;
    const newPlace = places.options[selectedIndex];

    // Steps 3 a-b. Set oldPlaceId; set newPlaceId.
    // -----------------------------------------------------------------
    // Declare constant oldPlaceId and set oldPlaceId equal to the value
    // of the attribute data-place-id of oldPlace. Similarly, create
    // constant newPlaceId and set newPlaceId equal to the value of the
    // attribute data-place-id of newPlace.

    const oldPlaceId = oldPlace.getAttribute("data-place-id");
    const newPlaceId = newPlace.getAttribute("data-place-id");

    // Steps 4 a-b. Set ourGang; call moveTo.
    // -----------------------------------------------------------------
    // Declare constant ourGang; call getOurGang, passing the value of
    // of oldPlaceId as the argument, and set ourGang equal to the value
    // returned. Finally, call moveTo, passing the values of newPlaceId
    // and ourGang as arguments. The algorithm terminates.

    const ourGang = getOurGang(oldPlaceId);
    moveTo(newPlaceId, ourGang);
  });

</script>

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<style>
  #playground {
  }
  #school {
  }
  #home {
  }
  .kid {
  }
  .adult {
  }
</style>

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<h1>Our Gang Being Ordered Around</h1>

<select id="goto">
  <option data-place-id="playground">Let's play!</option>
  <option data-place-id="school">Let's go to school.</option>
  <option data-place-id="home">Let's go home.</option>
</select>

<div id="playground">
  <h2 class="heading">Playground</h2>
  <ul class="list">
    <li class="adult">Katy Perry</li>
    <li class="kid">Elmo</li>
    <li class="kid">Spanky</li>
    <li class="kid">Buckwheat</li>
    <li class="kid">Froggy</li>
    <li class="kid">Alfalfa</li>
    <li class="kid">Darla</li>
  </ul>
</div>

<div id="school">
  <h2 class="heading">School</h2>
  <ul class="list">
    <li class="adult">Donald E. Knuth</li>
  </ul>
</div>

<div id="home">
  <h2 class="heading">Home</h2>
  <ul class="list">
    <li class="adult">Mom</li>
    <li class="adult">Dad</li>
  </ul>
</div>

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<script>

  // Declare and set a global constant called gotoElement, and declare
  // and set a global variable called selectedIndex.

  const gotoElement = document.getElementById("goto");
  let selectedIndex = 0;

  /*********************************************************************
   *  Define a function that compares the values of the parameters a
   *  and b and returns a number that is:
   *
   *  - less than zero if the value of a is less than the value of b,
   *  - equal to zero if the value of a equals the value of b, or
   *  - greater than zero if the value of a is greater than the value
   *    of b.
   */
  function compareTextElements(a, b) {
    const aText = a.textContent,
          bText = b.textContent,
          result = aText.localeCompare(bText);
    return result;
  }

  /*********************************************************************
   *  Define a function that returns an array of items that correspond
   *  to the items of the value of the parameter named set.
   */
  function toArray(set) {
    const array = [];
    let i = set.length;
    while (--i >= 0) {
      array[i] = set[i];
    }
    return array;
  }

  /*********************************************************************
   *  Define a function that returns a sorted array of items that
   *  correspond to the items of the value of the parameter named set.
   */
  function toSortedArray(setOfTextElements) {
    return toArray(setOfTextElements).sort(compareTextElements);
  }

  /*********************************************************************
   *  Define a function that returns an element that a) is within an
   *  element identified by the value of the parameter containerId, and
   *  b) is associated with a class matching the value of the parameter
   *  className.
   */
  function getElementWithClassIn(containerId, className) {
    const
        idSearchString = "#" + containerId,
        classSearchString = "." + className,
        searchString = idSearchString + " " + classSearchString;

    return document.querySelector(searchString);
  }

  /*********************************************************************
   *  Define a function that returns a list element that is within an
   *  element identified by the value of the parameter containerId.
   */
  function getListElementIn(containerId) {

    // Assume the value of containerId matches the id value of an
    // element in the document that contains a list element that is
    // associated with the class name "list".

    const className = "list";
    return getElementWithClassIn(containerId, className);
  }

  /*********************************************************************
   *  Define a function that returns "Our Gang", i.e. a set of list item
   *  elements from the list element within another element identified
   *  by the value of the parameter placeId.
   */
  function getOurGang(placeId) {
    const listElement = getListElementIn(placeId),
          ourGang = toSortedArray(listElement.getElementsByClassName("kid"));
    return ourGang;
  }

  /*********************************************************************
   *  Define a function that moves the list item elements referred to by
   *  the parameter ourGang from their current location to the list
   *  element identified by the parameter placeId.
   */
  function moveTo(placeId, ourGang) {
    const listElement = getListElementIn(placeId);
    while (ourGang.length > 0) {
      listElement.appendChild(ourGang.shift());
    }
  }

  /*********************************************************************
   *  Instruct the application to call an anonymous function when the
   *  user changes the currently selected option in the list of options
   *  contained in the element referred to by gotoElement.
   *
   *  Functions that that are called as a result of events firing are
   *  sometimes called listener functions. Notice that the name of the
   *  method used to associate a function with the firing of an event
   *  is called addEventListener.
   *
   *  When listener functions are called as a result of an event firing,
   *  an argument is passed to the listener function; this argument
   *  contains information about the event that occurred. For example,
   *  the property of the argument named target refers to the element
   *  associated with the listener and the event that fired.
   */ 
  gotoElement.addEventListener("change", function(event) {

    // Assume an event object is always passed to the function.

    // Step 1. Set places.
    // -----------------------------------------------------------------
    // Declare a variable named places and set/initialize its value
    // equal to the value the property named target of the parameter
    // named event.

    const places = event.target;

    // Steps 2 a-c. Set oldPlace; update selectedIndex; set newPlace.
    // -----------------------------------------------------------------
    // Declare constant oldPlace and set oldPlace equal to the
    // previously selected option, which is obtained using the value of
    // the global variable selectedIndex. Then set selectedIndex equal
    // to the the index of the currently selected option. Then declare
    // constant newPlace and set newPlace equal to the currently
    // selected option, which is obtained via selectedIndex.

    const oldPlace = places.options[selectedIndex];
    selectedIndex = places.selectedIndex;
    const newPlace = places.options[selectedIndex];

    // Steps 3 a-b. Set oldPlaceId; set newPlaceId.
    // -----------------------------------------------------------------
    // Declare constant oldPlaceId and set oldPlaceId equal to the value
    // of the attribute data-place-id of oldPlace. Similarly, create
    // constant newPlaceId and set newPlaceId equal to the value of the
    // attribute data-place-id of newPlace.

    const oldPlaceId = oldPlace.getAttribute("data-place-id");
    const newPlaceId = newPlace.getAttribute("data-place-id");

    // Steps 4 a-b. Set ourGang; call moveTo.
    // -----------------------------------------------------------------
    // Declare constant ourGang; call getOurGang, passing the value of
    // of oldPlaceId as the argument, and set ourGang equal to the value
    // returned. Finally, call moveTo, passing the values of newPlaceId
    // and ourGang as arguments. The algorithm terminates.

    const ourGang = getOurGang(oldPlaceId);
    moveTo(newPlaceId, ourGang);
  });

</script>

scribbledecobble

Pages

Don't you want to play?

README

See Also

Code