Yhteiskirjoittajat¶

Toteuta funktiot, jotka ottavat tietoja JavaScript-oliona ja muokkaavat sitä antamaan sille erilaisia esitysmuotoja.

Kahdessa edellisessä tehtävässä käytit Stack Overflow -vuosittaista käyttäjäkyselyistä saatua dataa, mutta tällä kertaa käytät julkaisujen tietoja lähteestä dblp tietojenkäsittelytieteen bibliografia.

Koska tietokannassa on valtava määrä dataa, käytetään tässä hakusanoja “Javascript” ja “functional”, jotta data saadaan rajatuksi. Haku kohdistuu vain niihin julkaisuihin, joiden otsikossa esiintyvät nämä molemmat sanat.

HUOM: Tarvitset pari funktiota edellisistä tehtävistä myös tähän. Tee ne ensin loppuun!!

Lataa koodipohja¶

coauthors.zip

Ohjeet¶

Aloita lataamalla ja purkamalla annetut tiedostot. Sinulla pitäisi olla seuraavat neljä tiedostoa:

coauthors.js tämä tiedosto on funktioita varten. Muokkaa ja lähetä pelkästään tämä tiedosto.
index.html tämä tiedosto vastaa kaikkien muiden tiedostojen lataamisesta ja näyttää lopulliset tulokset.
style.css tyylitaulukko, jotta HTML näyttäisi hieman hohdokkaamalta kuin selaimen oletusasetuksilla.

publ.js tämä tiedosto sisältää julkaisutiedot. Tiedon “rakenne” näytetään alla (vaikka dataa tulee lisää):

const publicationsData = [
  {
    _id: '716991',
    authors: {
      author: [
        {
          '@pid': '281/4693',
          text: 'Alexander Sobolev'
        },
        {
          '@pid': '49/5572',
          text: 'Sergey Zykov'
        }
      ]
    },
    title: 'Functional Programming Patterns in JavaScript.',
    venue: 'KES-IDT',
    pages: '299-312',
    year: '2019',
    type: 'Conference and Workshop Papers',
    key: 'conf/kesidt/SobolevZ19',
    doi: '10.1007/978-981-13-8311-3_26',
    ee: 'https://doi.org/10.1007/978-981-13-8311-3_26',
    url: 'https://dblp.org/rec/conf/kesidt/SobolevZ19'
  },
  {
    _id: '1478685',
    authors: {
      author: [
        {
          '@pid': '197/7003',
          text: 'Lukás Janecek'
        },
        {
          '@pid': '94/6230',
          text: 'Robert Pergl'
        }
      ]
    },
    title: 'Analysing Functional Paradigm Concepts - The JavaScript Case.',
    venue: 'WorldCIST',
    pages: '882-891',
    year: '2017',
    type: 'Conference and Workshop Papers',
    key: 'conf/worldcist/JanecekP17',
    doi: '10.1007/978-3-319-56535-4_86',
    ee: 'https://doi.org/10.1007/978-3-319-56535-4_86',
    url: 'https://dblp.org/rec/conf/worldcist/JanecekP17'
  },
  {
    _id: '1535634',
    title: 'React - Facebook&apos;s functional turn on writing Javascript.',
    venue: 'Commun. ACM',
    volume: '59',
    number: '12',
    pages: '56-62',
    year: '2016',
    type: 'Journal Articles',
    key: 'journals/cacm/X16p',
    doi: '10.1145/2980991',
    ee: 'https://doi.org/10.1145/2980991',
    url: 'https://dblp.org/rec/journals/cacm/X16p'
  },
  {
    _id: '2731234',
    authors: {
      author: {
        '@pid': '39/2573',
        text: 'Brian McKenna'
      }
    },
    title: 'Roy - A Statically Typed, Functional Language for JavaScript.',
    venue: 'IEEE Internet Comput.',
    volume: '16',
    number: '3',
    pages: '86-91',
    year: '2012',
    type: 'Journal Articles',
    key: 'journals/internet/McKenna12',
    doi: '10.1109/MIC.2012.56',
    ee: 'https://doi.org/10.1109/MIC.2012.56',
    url: 'https://dblp.org/rec/journals/internet/McKenna12'
  }
];

Kuten huomaat, publicationsData on array, joka sisältää useita julkaisuja. Tässä harjoituksessa meitä kiinnostaa vain “year” (vuosi), “title” (otsikko), ja julkaisujen tekijät eli “authors”.

Yllä oleva kuva näyttää tämän harjoituksen perusidean. Täytät pudotusvalikon (select element) julkaisuvuosien kanssa. Aina kun valinta tehdään ja käyttäjä lähettää lomakkeen eli napsauttaa “Update”-painiketta, se laukaisee muutoksen julkaisutaulukkoon, jolloin näytetään kyseisen vuoden julkaisut. Luettelossa on myös vaihtoehto “all” (kaikki). Jos se valitaan, niin kaikki julkaisut näytetään.

Sinun tehtäväsi on toteuttaa seuraavat funktiot, jotka on kuvattu coauthors.js-tiedostossa:

constructTableRowsHtml(rowData) Kopioi funktiosi edellisestä tehtävästä
constructTableHeadHtml(headings) Kopioi funktiosi edellisestä tehtävästä
GetPublications(publicationsData)

Ottaa ainoana argumenttinaan publicationsData-olion publ.js-tiedostosta

Palauttaa lomakkeen uuden “olion”:

{
  "2010": [
    {
      "title": "Standardized and Extensible Javascript-API for Logging Functionality for the MVP Player.",
      "authors": [
        {
          "@pid": "19/7308",
          "text": "Jörn Heid"
        },
        {
          "@pid": "164/9686",
          "text": "Frank Hess"
        },
        {
          "@pid": "07/7251",
          "text": "Simone Huber"
        },
        {
          "@pid": "03/7308",
          "text": "Martin Haag"
        }
      ],
      "year": "2010"
    },
    {
      "title": "Virtual browser - a web-level sandbox to secure third-party JavaScript without sacrificing functionality.",
      "authors": [
        {
          "@pid": "28/8733",
          "text": "Yinzhi Cao"
        },
        {
          "@pid": "55/4022",
          "text": "Zhichun Li"
        },
        {
          "@pid": "91/8736",
          "text": "Vaibhav Rastogi"
        },
        {
          "@pid": "88/2827-4",
          "text": "Yan Chen 0004"
        }
      ],
      "year": "2010"
    }
  ],
  "2011": [
    {
      "title": "ClojureScript - Functional Programming for JavaScript Platforms.",
      "authors": [
        {
          "@pid": "47/7087",
          "text": "Mark McGranaghan"
        }
      ],
      "year": "2011"
    }
  ],
  "2012": [
    {
      "title": "Roy - A Statically Typed, Functional Language for JavaScript.",
      "authors": [
        {
          "@pid": "39/2573",
          "text": "Brian McKenna"
        }
      ],
      "year": "2012"
    }
  ]
}

Julkaisut on luokiteltu vuosien mukaan. Ja jokaisen vuoden alla on joukko (array) kyseisen vuoden julkaisuja. Jokaisen julkaisun kohdalla vain “title”, “authors”- ja “year”-ominaisuudet palautetaan.

HUOMAA: Ohita julkaisut, joissa ei ole luettelossa kirjoittajia. Niille julkaisuille, joilla on vain yksi tekijä, muunna “authors” omaisuuden arvo taulukoksi (array), joka sisältää vain yhden kirjoittajan olion. Authors-ominaisuuden arvon täytyy olla array!

getYears(publications)

Ottaa ainoana argumenttinaan olion, mikä funktio getPublications(publicationsData) palauttaa

Palauttaa “lajitellun joukon ainutlaatuisia vuosia” (a sorted array of unique years) julkaisuista (nousevassa järjestyksessä). Sinun on poistettava kaikki päällekkäiset arvot taulukosta ennen sen palauttamista.

publications-olion avaimet ovat näiden julkaisujen vuosia. Voit saada joukon (array) kaikki olioavaimet tällä: Object.keys() Katso myös: JavaScript Object.keys(): A Guide

Jos tarvitset apua taulukon (array) lajittelussa, katso: JavaScript-taulukon lajittelu: taulukon elementtien lajittelu

fillOptionList(years)

Ottaa ainoana argumenttinaan “getYears(publications)” funktion palauttaman “years”-taulukon (array)

Silmukoi years-taulukon läpi ja rakentaa valinnat Select-elementille HTML-mallissa.
Jokaisen vaihtoehdon tulee olla seuraavassa muodossa:
<option value="2011">2011</option>

Arvo on vuosi, ja käyttäjälle näytettävä teksti on myös vuosi.
Listan viimeisen elementin tulee olla vaihtoehto kaikkien vuosien valintaan ja sen pitäisi näyttää HTML-muodossa seuraavalta:
<option value="all">All</option>
HUOMAA: Tämän toiminnon tulisi korvata valitun elementin nykyiset vaihtoehdot, eikä vain liittää niitä luettelon loppuun.

constructPublicationRowData(publications, years)
- Argumentit:
  - “publications”: “getPublications(publicationsData)” palauttaa samanmuotoisen datan
  - “years”: “joukko” (array) vuosista, jotka on sisällytettävä tietoihin
- Palauttaa constructTableRowsHtml():lle sopivan julkaisurivitaulukon (array). Jokaisella rivillä tulee olla seuraavat neljä kohtaa: julkaisuvuosi, julkaisun nimi, ensimmäisen kirjoittajan nimi, muiden tekijöiden nimet pilkuilla (,) erotettuina tai tyhjä merkkijono, jos julkaisulla on vain yksi tekijä. Esimerkki tuotetusta rowDatasta:
[ [ "2010", "Standardized and Extensible Javascript-API for Logging Functionality for the MVP Player.", "Jörn Heid", "Frank Hess, Simone Huber, Martin Haag" ], [ "2011", "ClojureScript - Functional Programming for JavaScript Platforms.", "Mark McGranaghan", "" ] ]
constructPublicationsTableHtml(publications, year = null)

Rakenna HTML julkaisuille taulukon perusteella valitun vuoden tai kaikki julkaisut, jos vuotta ei ole annettu

Argumentit:

“publications”: “getPublications(publicationsData)” palauttaa saman muotoisen “olion”

“year”: “kokonaisluku” (integer) tai “merkkijono” (string), joka edustaa valittua vuotta tai “nollaa” (null) jos kaikki vuodet on valittu

Käyttää constructPublicationRowData() taulukon rivitietojen muodostamiseen ja constructTableHeadHtml() ja constructTableRowsHtml() taulukon rakentamiseen

Taulukon otsikoiden tulee olla “Year”, “Title”, “The 1st author”, “Co-authors” (ilman lainausmerkkejä)

Taulukossa tulee olla otsikko: “Publications” (ilman lainausmerkkejä) ja pää ja vartalo tulee kääriä <thead>- ja <tbody>-elementtien sisään vastaavasti.

Palauttaa taulukon HTML:n “merkkijonona” (string).

init()

Tämä toiminto alustaa sovelluksen (lataa kaikki tarvittavat tiedot, päivittää DOM:n, liittää tapahtumakäsittelijät jne.) index.html kutsuu vain init()-funktiota ja sen vastuulla on yhdistää kaikki niin, että sovelluksella on halutut toiminnot, kuten yllä olevassa kuvassa kuvattu ja esitetty. Tämä funktio ei palauta mitään, mutta käyttää muita funktioita seuraavien tehtävien suorittamiseen:

saa julkaisuja publicationsData:sta

saa vuosia julkaisuista

täyttää valitut vaihtoehdot

asettaa taulukon näyttämään ensimmäisen vuoden julkaisut valintaluettelossa (2009)

liittää tapahtumakäsittelijän lomakkeen lähetykseen päivittääkseen taulukon valintojen perusteella

HUOM: käytä taulukon kohteena div-tunnusta “container”

(korvaa tämän div:n sisältö taulukon HTML-koodilla)

HUOMAA 1: Kaikki koodisi menee coauthors.js -tiedostoon, ja tämä on ainoa tiedosto, jonka lähetät tässä tehtävässä.

HUOM 2: Älä nimeä funktioita uudelleen, muuten testit eivät pysty havaitsemaan ja käyttämään niitä.

Avaa index.html selaimessasi. Jos funktiot on toteutettu oikein sinun pitäisi pystyä valitsemaan vuosi luettelosta ja saada taulukko päivittymään omien hakuehtojesi perusteella.

A+ esittää tässä kohdassa tehtävän palautuslomakkeen.