StackOverflow-tietojen käsittely¶

Lataa malli¶

manipulate_stackoverflow.zip

Ohjeet¶

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 tietojen lataamisesta ja näyttää lopulliset tulokset.

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

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

• stackOverflow.js tämä tiedosto sisältää vuosittaiset henkilömäärät, jotka ovat olleet osoitteessa kyselyn aikaan kunkin tekniikan parissa työskenteleminen tai haluaisit työskennellä kunkin tekniikan kanssa teknologiaa tulevaisuudessa. Edelliseen harjoitukseen verrattuna dataa on nyt enemmän. Mukana ei ole vain nykyteknologiaa, vaan myös tulevaisuuden teknologioita.

Tietojen “rakenne” näkyy alla (vaikka dataa tulee lisää):

const stackOverflowStats = {
  2016: {
    currentTech: {
      Angular: 8823,
      JavaScript: 27385,
      PHP: 12780,
      Python: 12282,
      React: 2541,
    },
    futureTech: {
      JavaScript: 18012,
      PHP: 6541,
      Angular: 11013,
      Python: 13495,
      React: 6597
    }
  },
  2017: {
    currentTech: {
      JavaScript: 22998,
      Python: 11816,
      PHP: 10371,
    },
    futureTech: {
      Python: 12458,
      JavaScript: 16204,
      PHP: 5284
    },
    currentDbs: {},
    futureDbs: {},
    currentLibs: {
      React: 6140,
      Angular: 12025
    },
    futureLibs: {
      React: 6733,
      Angular: 7019
    },
    currentPlatforms: {},
    futurePlatforms: {}
  }
};

Kuten näet, objektilla stackOverflowStats on eri avaimet objekteissa eri vuosina. Tässä harjoituksessa olemme kiinnostuneita vain current technologies, jotka näkyvät minkä tahansa näppäimillä, jotka alkavat sana current.

Tässä harjoituksessa toteutat kaksi uutta toimintoa ja käytät myös kaikkia toimintoja edellisestä harjoituksesta. Yhdessä näitä toimintoja käytetään rakentamaan enemmän interaktiivinen teknologioiden taulukko. Yllä oleva kuva näyttää odotetun tuloksen. Kuten näet, taulukko on nyt dynaamisempi ja päivittyy käyttäjien mukaan valinnat.

Nämä toimet sisältävät:

1. Aloitusvuoden valitseminen

2. Loppuvuoden valitseminen

3. Tekniikan valinta

4. Tekniikan valinnan poistaminen

Jokainen näistä toimista käynnistää taulukon päivittämisen vastaavasti. Sinun tehtäväsi on toimittaa taulukon päivittämiseen tarvittavat tiedot ja toiminnot.

Edellisessä harjoituksessa sinulle annettiin techStats.js-tiedosto, jossa oli vuosiluku teknologiatilastot Stack Overflow -kyselyn tiedoista. Tässä harjoituksessa kuitenkin Sinun tehtäväsi on tarjota toiminto, joka rakentaa samat tiedot tiedoista tiedostossa stackOverflow.js.

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

1. buildRowData(yearlyTechStats, selectedTechs, firstYear, lastYear) Copy your function from previous exercise

2. constructTableRowsHtml(rowData) Copy your function from previous exercise

3. constructTableHeadHtml(headings) Copy your function from previous exercise

4. function buildYearlyTechStats (techStats)

• Takes stackOverflowStats or similarly structured object as only argument and builds and returns the yearly technology statistics you are familiar with from the techStats object in the previous exercise having the following format:

  {
    "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,
    }
  }
  

• Sisällytä vain nykyisten teknologioiden tiedot, eli vain avaimet, jotka alkavat sanalla “current” (currentTech, currentDbs jne.)

5. function updateTable (table, yearlyTechStats, selectedTechs, firstYear, lastYear)

• Päivittää HTML-taulukon valittujen teknologioiden ja tilastojen perusteella

• Sisältää viisi argumenttia:

  • table: “HTMLTableElement” tämä on päivitettävän HTML-taulukon DOM-elementti

  • yearlyTechStats: objekti, jonka muoto on sama buildYearlyTechStats() funktio palauttaa ja buildRowData() hyväksyy ensimmäisenä argumenttina

  • selectedTechs: “joukko” tekniikoita, jotka on valittu näytettäväksi HTML-taulukossa

  • firstYear ja lastYear: kokonaisluvut, jotka edustavat vuosien vaihteluväliä HTML-taulukkoon sisällytettävistä tilastoista. Voit olettaa muodon olevan “alkuvuosi” <= “loppuvuosi”.

• Käyttää buildRowData(), constructTableHeadHtml() ja constructTableRowsHtml() funktioita taulukon päivittämiseen. Sinun tulee päivittää myös taulukon <thead> ja <tbody> elementit.

HUOMAA 1: Kaikki koodisi menee functions.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 nähdä taulukko, joka näyttää samanlaiselta kuin yllä olevassa kuvassa oleva taulukko.

Attention

Jos lähetystäsi ei hyväksytä, tässä on muutamia vinkkejä toimintojesi testaamiseen.

Avaa index.html selaimessa. Varmista, että toimintosi löytyy ikkunasta avaamalla konsoli ja kirjoittamalla:

buildYearlyTechStats(stackOverflowStats)

Palautusarvon tulisi olla jotain tällaista:

Object { 2011: {…}, 2012: {…}, 2013: {…}, 2014: {…}, 2015: {…}, 2016: {…}, 2017: {…}, 2018: {…}, 2019: {…}, 2020: {…} }

Jos edellinen vaihe näytti hyvältä, yritä kirjoittaa:

const yearlyTechStats = buildYearlyTechStats(stackOverflowStats)
const rowData = buildRowData(yearlyTechStats, ["JavaScript", "PHP"], 2012, 2015)
constructTableRowsHtml(rowData)

Tällä kertaa sinun pitäisi saada seuraava HTML (kaiken ei tarvitse olla yhdellä rivillä):

"<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>"

Lopuksi testaa updateTable kirjoittamalla:

const table = document.querySelector('table')
updateTable(table, yearlyTechStats, ["JavaScript", "PHP"], 2012, 2015)

Tuloksen pitäisi olla:

undefined

mutta sivun taulukon tulisi päivittyä: