Koulutehtäviin apua (ohjelmointi / HTML)

[Apex]

Kaveri tehtävien kanssa pulassa. Pakollinen kurssi, vaikka suuntautunut jo muihin opintoihin. Lienee siis teille eksperteille ns. "easy task".

Mutta tässä tehtävä, voisitteko hieman auttaa, miten ratkaista?

 

[Desgorr]

Mikä on koodi tällä hetkellä? Vaikka en JavaScriptiä tunne niin tuossa ei tosiaan taideta vaatia kun funktio, jossa kerrotaan tuo numero itsellään ja tulostaa tämä konsoliin.

 

[Apex]

Tuossa on kaikki, mitä tehtävässä tällä hetkellä. Onko noilla tiedoilla ratkaisematon?

 

[Desgorr]

Ei ole ratkaisematon. Olisi vain kiva nähdä se nykyinen koodi mitä on saatu aikaiseksi. En usko, että täällä kukaan sitä valmista koodia kuitenkaan antaa. Tuo on muutenkin sen verran yksinkertainen juttu, että riittää kun käy pari sivua jotain JavaScript kurssia läpi.

Avainsanoina tarvitsee tietää:
-Funktion alkeet ja ehkä muuttujat
-Konsoliin tulostus

Tuossa on kuitenkin jo valmis mitä sisällön pitää olla ja minkälainen tulosteen pitää olla. Napista kun painaa niin se kutsuu tuota funktiota ja laskee numeron sisällön neliönä sekä tulostaa konsoliin tuon rivin.

 

[mRkukov]

Javascriptillä vain:

Funktio oikealla nimellä (laskeNelio).
Funktion hakee elementin id perusteella ja ottaa sen sisällön talteen.
Funktio tekee kertolaskun.
Funktio tulostaa sen konsoliin.

Toteutus: tee itse

Ps. Ohjelmointi on 90% ajasta muiden valmiiden koodien kopiointia ja pientä muokkausta. Googlea vain käyttämään.

 

[Apex]

Mikä tuossa pielessä? Herjaa console.log osiota.

 

[Hyrava]

Mikä tuossa pielessä? Herjaa console.log osiota.

Mitähän se herjaa? Siitä varmaan voisi päätellä mikä on vikana.

Yleisesti, kannattaa varmaan laittaa itse virheilmoitus näkyville kun kysyy apua. Samoin koodin voisi laittaa ihan tekstinä, vaikka code-tagien sisään eikä kuvana niin auttajien olisi helpompi tutkia syytä.

 

[Apex]

Mitähän se herjaa? Siitä varmaan voisi päätellä mikä on vikana.

Yleisesti, kannattaa varmaan laittaa itse virheilmoitus näkyville kun kysyy apua. Samoin koodin voisi laittaa ihan tekstinä, vaikka code-tagien sisään eikä kuvana niin auttajien olisi helpompi tutkia syytä.

Tuossa virheilmoitus.

Toimin tässä välikätenä ja apuna kaverilleni - en siis itse ole ongelman äärellä. Tästä syystä en code-tageja voi suoraan hyödyntää.

 

[Hyrava]

Tuossahan tuo näkyy, tehtävänannossa määriteltiin että vastaus pitää olla täsmälleen oikein, kuvassa näkyy selkeästi että se ei ole vaan välilyönnit puuttuvat. Ja tuohan on vain tehtävän tarkastajan ilmoitus eikä oikea virheilmoitus. Itse koodihan siis toimii, tosin eri tavalla kuin tarkastaja haluaa.

Ja vaikka oletkin välikätenä niin kai kaverisi osaa tekstinä asioita lähettää?

 

[Zvona]

On se JS vaan ihmelaitos, kun osaa laskea kertolaskutkin stringeistä (tekee toki type conversionin, kun kertolasku). Esim. plussalaskuna homma ei toimisi.

Koodi voisi näyttää pikemminkin tältä:

const laskeNelio = () => {
  const numero = parseInt(document.querySelector('#numero').textContent);

  if (isNaN(numero)) {
    throw Error('Epäkelpo numero');
  }

  console.log(`Luvun ${numero} neliö on ${Math.pow(numero, 2)}`);
};

Tuossa itse tehtävänannossa (ja esimerkkikoodissa) on valitettavasti useita epäkelpoja oletuksia enkä edes ymmärrä, miksi tällaista opetetaan. Tehtävän tarkoitus lienee ratkaista typerä ongelma typerällä tavalla. Vaikka suoraan voitaisiin opettaa itse ongelman ratkaisemista. Ilman, että tarvitsee mennä edes syvään päätyyn. Noh, toivottavasti myöhemmin "päästään eteenpäin" tuolla tasolla. Mutta IMO sekä opettajan että opiskelijoiden ajantuhlausta tuollainen...

 

[Brejk]

On se JS vaan ihmelaitos, kun osaa laskea kertolaskutkin stringeistä (tekee toki type conversionin, kun kertolasku). Esim. plussalaskuna homma ei toimisi.

Koodi voisi näyttää pikemminkin tältä:

const laskeNelio = () => {
  const numero = parseInt(document.querySelector('#numero').textContent);

  if (isNaN(numero)) {
    throw Error('Epäkelpo numero');
  }

  console.log(`Luvun ${numero} neliö on ${Math.pow(numero, 2)}`);
};

Tuossa itse tehtävänannossa (ja esimerkkikoodissa) on valitettavasti useita epäkelpoja oletuksia enkä edes ymmärrä, miksi tällaista opetetaan. Tehtävän tarkoitus lienee ratkaista typerä ongelma typerällä tavalla. Vaikka suoraan voitaisiin opettaa itse ongelman ratkaisemista. Ilman, että tarvitsee mennä edes syvään päätyyn. Noh, toivottavasti myöhemmin "päästään eteenpäin" tuolla tasolla. Mutta IMO sekä opettajan että opiskelijoiden ajantuhlausta tuollainen...

Eiköhän tuossa ole tarkoitus oppia vain tuo onclick handler ja esim. soveltaa jotain aikaisemmin opittua, kuten muuttujien ja stringien yhdistämistä. Jos ihan ummikkoja kyseessä, niin vähän turhaa että heti pitäisi sisäistää validoinnit ja muut jutut. Parempi mennä pienin askelin eteenpäin niin tulee onnistumisen tunteita ja ei ala ahdistamaan kun ei ymmärrä kaikkea.

 

[Zvona]

Eiköhän tuossa ole tarkoitus oppia vain tuo onclick handler ja esim. soveltaa jotain aikaisemmin opittua, kuten muuttujien ja stringien yhdistämistä. Jos ihan ummikkoja kyseessä, niin vähän turhaa että heti pitäisi sisäistää validoinnit ja muut jutut. Parempi mennä pienin askelin eteenpäin niin tulee onnistumisen tunteita ja ei ala ahdistamaan kun ei ymmärrä kaikkea.

Juu, ymmärrän kyllä oppimisen tavoitteet sinänsä. Itsekin ollut joskus ummikkona koulun penkillä. Mutta se, että lähestytään hieman vanhakantaisella ajattelulla ja jätetään paljon mahdollisuuksia virheille, ei ole mielestäni kovin loppuun asti ajateltua. Melkein samalla vaivalla, kun saisi opetettua asiat oikein.

Mutta AP kyllä toteaa, että "pakollinen kurssi vaikka suuntautunut muihin opintoihin...", että sinänsä tämä rant voidaan koeta myös aiheettomaksi ja hyväksyn sen täysin

Edit: ja täytyy myöntää, että ponnistelin tämän kanssa aikasen pitkään ennen kuin sain ratkaistua tehtävän (tulokset näkyvät siis konsolissa):

 

[arcane]

Edit: ja täytyy myöntää, että ponnistelin tämän kanssa aikasen pitkään ennen kuin sain ratkaistua tehtävän (tulokset näkyvät siis konsolissa):

Koodisi tähän tehtävään löytyy sanakirjan kohdasta "over-engineering".

 

[Zvona]

Koodisi tähän tehtävään löytyy sanakirjan kohdasta "over-engineering".

Todellakin. Jäi vain askarruttamaan että mitä kaikkea pitää yksinkertaisessakin toteutuksessa ottaa huomioon, jotta se toimisi kuin junan vessa :|

Itse kun nakuttelee React Nativea, niin tuotannossa sovellus vain kaatuu. Siitä sitten käyttäjäpalautteen myötä crashlyticsistä ihmettelemään, että miksi käyttäjät syöttävät desinaali-erottimeksi pisteen sijaan pilkun.

 

[Hyrava]

Todellakin. Jäi vain askarruttamaan että mitä kaikkea pitää yksinkertaisessakin toteutuksessa ottaa huomioon, jotta se toimisi kuin junan vessa :|

Itse kun nakuttelee React Nativea, niin tuotannossa sovellus vain kaatuu. Siitä sitten käyttäjäpalautteen myötä crashlyticsistä ihmettelemään, että miksi käyttäjät syöttävät desinaali-erottimeksi pisteen sijaan pilkun.

Juu, ehkä koulutehtävässä voi hieman oikoa joissakin asioissa (joka ei välttämättä tulevaisuuden kannalta ole fiksua) mutta tosielämässä on tullut monesti huomattua että ensin on joku noin 10 rivin pieni skriptinpätkä ja kun rupeaa ottamaan huomioon vähän asioita niin yhtäkkiä tuon 10 rivin lisäksi onkin 100 riviä syötteen sanitointia, validointia ja kaikenmaailman virhekäsittelyä.

 

[japo2101]

No kyllä tuonkin saa ihan 10 rivillä tehtyä sisältäen virheenkäsittelyn, validoinnin ja sanitoinnin. Tuo jopa hallitsee esim syötteen "0.00.5" mikä tuossa aikaisemmassa tulostuu väärin "Luvun 0 neliö on 0".

const laskeNelio = (): void => {
  const value: string = document.querySelector("#numero").value.replace(",", ".");

  if (isNaN(value) || !value){
    console.log(`Syöte ${value} ei ole kelvollinen`);
    return;
  }
  console.log(`Luvun ${value} neliö on ${Math.pow(value, 2)}`);
};
document.querySelector("#painike").addEventListener("click", laskeNelio);

Ja jos HTML:n puolella laittaa inputille: type="number" niin pääset replacestakin eroon.

Testauksen voisi hoitaa vaikka näin:

Spoileri

testeistä pari huomiota:
testitLaskeNelio muutin objektiksi niin pystytään hakemaan lähtöarvot ja tulokset suoraan input/result nimillä eikä tarvitse muistaa että mikä olikaan arrayn toka arvo.
Codepenissä olleet testit eivät tarkistaneet mitä konsoliin oikeasti tulostetaan vaikka se oli alkuperäinen koulutehtävä joten muutin testit korvaamaan console.log-funktion omalla funktiolla saadakseni sille annetun arvon.

const ajaTestit = () => {
  // save original values
  const [savedClog, savedFromValue] = [console.log, document.querySelector("#numero").value];

  // set testing values
  let testResult: number = null;
  console.log = (value: string): void => testResult = value;

  const testitLaskeNelio: {input: any, result: string}[] = [
    { input: 2, result: "Luvun 2 neliö on 4"},
    { input: 1.5, result: "Luvun 1.5 neliö on 2.25"},
    { input: "2", result: "Luvun 2 neliö on 4"},
    { input: "1,5", result: "Luvun 1.5 neliö on 2.25"},
    { input: "beep", result: "Syöte beep ei ole kelvollinen"},
    { input: null, result: "Syöte  ei ole kelvollinen"},
  ];

  const tuloksetLaskeNelio = testitLaskeNelio.every((testi) => {
    document.querySelector("#numero").value = testi.input;
    document.querySelector("#painike").click();

    const result = testResult === testi.result;
    console.info(`TESTI: aja laskeneliö arvolla: ${testi.input}, tulos: ${result ? "onnistui" : "epäonnistui"}`);

    // nullify test result to not mix up the next test
    testResult = null;

    return result;
  });

  // reset original values
  [console.log, document.querySelector("#numero").value] = [savedClog, savedFromValue];

  if (tuloksetLaskeNelio) {
    console.log("%cTestit laskeNelio() menevät läpi", "color:green");
    return;
  }
  console.error("Testit laskeNelio() eivät mene läpi");
};

document.querySelector("#testit").addEventListener("click", ajaTestit);

Töissä sitten on melkeimpä aina käytössä joku lomakepalikka mikä hoitaa validoinnin, formatoinnin jne. Viimeistään bäkäri laittaa tiedot oikeaan muotoon.