Yhteiskirjoittajat¶

Tee funktiot, jotka ottavat tietoja JavaScript-objektina ja manipuloivat sitä antamaan sille erilaiset esitysmuodot.

Kahdessa edellisessä harjoituksessa käytit Stack Overflow -vuotisen käyttäjän tietoja tutkimuksia, mutta tällä kertaa käytät julkaisujen tietoja dblp tietojenkäsittelytieteen bibliografia.

Koska tietokannassa on valtava määrä tietoa, olemme käyttäneet hakusanoja “Javascript” ja “functional” rajoittavat tiedot julkaisuihin, jotka sisältävät molemmat sanat otsikossaan.

HUOM: Tarvitset pari toimintoa edellisistä harjoituksista myös tähän. Tee ne ensin loppuun!!

Lataa mallit¶

coauthors.zip

Ohjeet¶

Aloita lataamalla ja purkamalla harjoitustiedostot. Sinulla pitäisi olla seuraava 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. “rakenne”. tiedot 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 näet, objekti publicationsData on joukko, joka sisältää useita julkaisuja. Tässä harjoituksessa meitä kiinnostaa vain “vuosi”, “nimi”, ja julkaisujen “tekijät”.

Yllä oleva kuva näyttää tämän harjoituksen perusidean. Täytät pudotusvalikon luettelo (valittu elementti) julkaisuvuosien kanssa. Aina kun valinta tehdään ja käyttäjä lähettää lomakkeen eli napsauttaa “Päivitä”-painiketta, joka laukaisee muutos julkaisutaulukkoon siten, että se näyttää julkaisut tuolta vuodelta. Luettelossa on myös vaihtoehto “kaikki”. Jos valittu, niin kaikki julkaisut näytetään.

Sinun tehtäväsi on toteuttaa seuraavat toiminnot, jotka on kuvattu kohdassa coauthors.js-tiedosto:

constructTableRowsHtml(rowData) Kopioi funktiosi edellisestä harjoituksesta
constructTableHeadHtml(headings) Kopioi funktiosi edellisestä harjoituksesta
GetPublications(publicationsData)

Ottaa ainoana argumenttina publicationsData-objektia publ.js-tiedostosta

Palauttaa lomakkeen uuden “objektin”:

{
  "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 kyseisen vuoden julkaisuja. Jokaisen julkaisun kohdalla vain “otsikko”, “authors”- ja “year”-ominaisuudet palautetaan.

HUOMAA: Ohita julkaisut, joissa ei ole luettelossa kirjoittajia, ja niille julkaisut, joilla on vain yksi tekijä, muuntavat “tekijöiden” omaisuuden arvon taulukkoon, joka sisältää vain yhden tekijän objektin. Kirjoittajien arvo omaisuuden tulee aina olla joukko esineitä!

getYears(publications)

Ottaa ainoana argumenttinaan objektin kohteesta getPublications(publicationsData) toiminto

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

julkaisut-objektin avaimet ovat näiden julkaisujen vuosia. Voit saada joukon kaikkia objektiavaimia Object.keys() Katso myös: JavaScript Object.keys(): A Guide

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

fillOptionList(years)

Ottaa ainoana argumenttinaan “getYears(publications)” -parametrin palauttama “years”-taulukko toiminto

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ää seuraavalta HTML:ltä:
<option value="all">Kaikki</option>
HUOMAA: Tämän toiminnon pitäisi korvata valitun elementin nykyiset asetukset, eikä vain liitä niitä luettelon loppuun.

constructPublicationRowData(publications, years)
- Argumentit:
  - “julkaisut”: “getPublications(publicationsData)” palauttaa saman muotoisen “objektin”
  - “vuodet”: “joukko” vuosista, jotka on sisällytettävä tietoihin
- Palauttaa constructTableRowsHtml():lle sopivan julkaisurividatan “taulukon”. Jokaisella rivillä tulee olla nämä 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 rivitiedoista:
[ [ "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:

“julkaisut”: “getPublications(publicationsData)” palauttaa saman muotoisen “objektin”

“vuosi”: “kokonaisluku” tai “merkkijono”, joka edustaa valittua vuotta tai “nolla” jos kaikki vuodet on valittu

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

Taulukon otsikoiden tulee olla “Vuosi”, “Otsikko”, “Ensimmäinen kirjoittaja”, “Yhteistekijät” (ilman lainausmerkkejä)

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

Palauttaa taulukon HTML:n “merkkijonona”.

init()

Tämä toiminto alustaa sovelluksen (lataa kaikki tarvittavat tiedot, päivittää DOM:n, liittää tapahtumakäsittelijät jne.) index.html vain kutsuu init()-funktiota ja se on vastuulla Tämän toiminnon avulla voit yhdistää kaiken sovelluksella olevalla tavalla haluamasi toiminnot yllä olevassa kuvassa kuvatulla ja näkyvällä tavalla. Tämä toiminto tekee ei palauta mitään, mutta käyttää muita toimintoja seuraavien tehtävien suorittamiseen:

saada julkaisuja publicationsData-sivustosta

saada vuosia julkaisuista

täytä valitut vaihtoehdot

aseta taulukko näyttämään ensimmäisen vuoden julkaisut valintaluettelossa (2009)

liitä tapahtumakäsittelijä lomakkeen lähetykseen päivittääksesi taulukon valinnan 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ä harjoituksessa.

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

Avaa index.html selaimessasi. Jos toiminnot on toteutettu oikein sinun pitäisi pystyä valitsemaan vuosi luettelosta ja päivittää taulukko omasi perusteella valinta.

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