Stack Overflow -tilastot¶

Lataa malli¶

stackoverflow_stats.zip

Ohjeet¶

Tässä harjoituksessa toteutat kolme funktiota, jotka ottavat tilastotiedot ja rakentaa HTML-taulukkoesitys tiedoista. Yllä oleva kuva näyttää odotetun tulos.

Aloita lataamalla ja purkamalla harjoitustiedostot. Sinulla pitäisi olla seuraava viisi tiedostoa:

• functions.js tämä tiedosto on funktioita varten. Muokkaa ja lähetä tämä tiedosto.

• index.html tämä tiedosto vastaa kaikkien muiden tiedostojen lataamisesta ja näyttää lopullisia tuloksia.

• style.css tyylitaulukko, jotta taulukko näyttää yllä olevan kuvan kaltaiselta.

• index.js vastaa kaikkien toteuttamiesi funktioiden kutsumisesta ja sitten HTML-taulukon päivittäminen tulosten perusteella.

• techStats.js tämä tiedosto sisältää vuosittaiset henkilömäärät, jotka ovat olleet osoitteessa kunkin tekniikan kanssa työskentelyn aikana. Tietojen “rakenne” on näkyy alla (vaikka dataa on enemmän):

  const techStats = {
    2011: {
      JavaScript: 1421,
      Java: 919,
      PHP: 789,
      Python: 576
    },
    2012: {
      Java: 2349,
      JavaScript: 3129,
      PHP: 1926,
      Python: 1212
    },
    2013: {
      Java: 3024,
      JavaScript: 4743,
      PHP: 2328,
      Python: 1883,
    }
  };
  
  Objektissa "techStats" on vuosi-avaimet, arvot ovat objekteja,
  jossa käytetyt teknologiat ovat avaimina ja mainintojen määrä arvoina.
  

Sinun tehtäväsi on toteuttaa seuraavat kolme toimintoa, jotka on kuvattu functions.js-tiedostossa:

1. buildRowData(yearlyTechStats, selectedTechs, firstYear, lastYear)

• Vastaanottaa “techStats”-objektin tai vastaavan objektin ensimmäisenä parametrina yearlyTechStats (Älä oleta sen olevan täsmälleen sama objekti!!)

• Toinen parametri selectedTechs on joukko teknologioista, jotka ovat valittu näytettäväksi HTML-taulukossa

• Kaksi viimeistä parametria “firstYear” ja “lastYear” ovat “kokonaislukuja”, jotka edustavat “vuosien vaihteluväli” tilastoista, jotka sisällytetään HTML-taulukkoon. Voit olettaa, että “ensimmäinen vuosi” <= “viime vuosi”.

• Funktio palauttaa taulukon, jossa jokainen sisäinen taulukko edustaa yksi rivi HTML-taulukossa. Ensimmäisen kohteen tulee olla tekniikan nimi ja muut ovat mainintojen määrä jokaiselta valitulta vuodelta. Palautusarvon tulee olla samanlainen kuin seuraavat (jos valitut tekniikat olivat “JavaScript” ja “PHP” ja vuodet 2012-2013):

  [
    ["JavaScript", 3129, 4743],
    ["PHP", 1926, 2328]
  ]
  

• Jokaiselle vuodelle ja/tai teknologialle, josta ei ole tilastoja, lukumäärä maininnan tulee olla 0 (nolla). Tarkista määrittelemättömät tai olemattomat arvot.

2. constructTableRowsHtml(rowData)

   • Ottaa parametrin “rowData”, joka on samanmuotoisten taulukoiden joukko buildRowData()-funktio palauttaa

   • Palauttaa taulukon rivien HTML-koodin rivin “rowData” perusteella. Palautettavan HTML:n tulee olla yksi merkkijono, jolla on seuraava muoto jokaiselle taulukon riville:

   <tr><td>JavaScript</td><td>3129</td><td>4743</td></tr>
   

3. constructTableHeadHtml(headings)

• Ottaa joukon “otsikot” ainoana argumenttina

• palauttaa taulukon otsikkorivin HTML-koodin “merkkijonon” toimitettujen otsikoiden perusteella

• Jos otsikot on seuraava: [“Teknologia”, 2012, 2013] tuloksena oleva HTML pitäisi näyttää tältä:

  <tr><th>Technology</th><th>2012</th><th>2013</th></tr>
  

HUOM 1: Tässä käyttöönottamasi toiminnot tarvitaan seuraavassa harjoituksessa. Eli sinun on suoritettava tämä harjoittele ennen seuraavaa.

HUOMAA 2: Kaikki koodisi menee functions.js -tiedostoon, ja tämä on ainoa tiedosto, jonka lähetät tässä harjoituksessa.

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

HUOM 4: Tämä on tärkeää ja se on toistettava! Tässä käyttöönottamasi toiminnot tarvitaan seuraava harjoitus. Toisin sanoen sinun on suoritettava tämä harjoitus ennen seuraavaa.

Avaa index.html selaimessasi. Jos toiminnot on toteutettu oikein sinun pitäisi nähdä taulukko, joka näyttää samanlaiselta kuin yllä olevassa kuvassa oleva taulukko.

buildRowData(techStats, ["JavaScript", "PHP"], 2012, 2015)

Array [ (5) […], (5) […] ]

const rowData = buildRowData(techStats, ["JavaScript", "PHP"], 2012, 2015)
constructTableRowsHtml(rowData)

"<tr><td>JavaScript</td><td>3129</td><td>4743</td><td>3784</td><td>11970</td></tr><tr><td>PHP</td><td>1926</td><td>2328</td><td>1713</td><td>6531</td></tr>"

constructTableHeadHtml(["Technology", 2012, 2013, 2014, 2015])

"<tr><th>Technology</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th></tr>"