Kirjautuminen

Haku

Tehtävät

Kilpailu

Algoritmikisa
Putka Open 2020 -kisan
4. kierros: 6.–8.11.

Keskustelu: Nettisivujen teko: Viope-tehtävä: elementin lisääminen painikkeesta

Sivu 1 / 1

Sivun loppuun

kasivitonen [14.10.2020 11:25:26]

Lainaa #

HTML-dokumentissa on painike, jota painaessa kutsutaan funktiota lisaaPainike(). Funktion tulee luoda uusi <button>-elementti ja lisätä se dokumentin <body>-elementin loppuun. Elementtiä painettaessa tulee kutsuafunktiota tervehdi().

Uuden elementin luominen tarvitsee kaksi komentoa. Lisäksi tällä kertaa tarvitaan myös muutama välivaihe.

document.createElement("[haluttu_HTML-tag]"); luo elementin, muttei vielä lisää sitä sivulle. Tallenna tämä muuttujaan, jotta voit muokata sitä ennen sen lisäämistä dokumenttiin.

Muokkaamalla elementin .innerHTML-arvoa sijoitusoperaattorilla (=) voidaan lisätä painikkeeseen tekstiä. Myös id-arvoa voidaan muokata tällä tavalla. Aseta painikkeen id-attribuutin arvoksi "luotuPainike".

Monimutkaisemmat muutokset, kuten onclick-attribuutin lisääminen, vaatii että käytetään setAttribute()-metodia tähän tapaan: [lisättävän_elementin_nimi].setAttribute("[attribuutti]", "[attribuutin_arvo]").

document.[elementti_johon_lisätään].appendChild([lisättävän_elementin_nimi]); lisää luodun elementin halutun elementin loppuun. Append ei ylikirjoita mitään olemassaolevaa, toisin kuin =-operaattori elementin innerHTML muokatessa.


linkki koodista, en saanut sitä kopioitua mitenkään viopen metropolian alustasta:
kuva

tuolla tavalla ei toimi, mikä vialla mahtaa olla ?

noutti [14.10.2020 11:59:18]

Lainaa #

En nyt ihan täysin ymmärrä mitä haet takaa, mutta tässä nyt jotain vinkkiä miten voit nappia painamalla luoda uusia buttoneita ja asettaa niille onClick attribuutin.

JS:

function onButtonClick() {
  let newButton = document.createElement('button');
  newButton.innerText = 'Uusi nappi (Luo uuden napin myös)';
  newButton.id = `lorem_ipsum_${Math.floor(Math.random() * 999)}`
  newButton.onclick = () => onButtonClick();
  document.body.appendChild(newButton);
}

HTML:

<button onclick="onButtonClick()">
  Luo uusi painike
</button>

kasivitonen [14.10.2020 16:31:48]

Lainaa #

En minäkään ymmärrä, tuommoinen tehtävä se on.

Saako tän tuohon:
HTML-dokumentissa on painike, jota painaessa kutsutaan funktiota lisaaPainike(). Funktion tulee luoda uusi <button>-elementti ja lisätä se dokumentin <body>-elementin loppuun. Elementtiä painettaessa tulee kutsuafunktiota tervehdi().

kasivitonen [14.10.2020 18:01:34]

Lainaa #

No nyt sain toimimaan mutta valittaa vielä tommosta:

https://ibb.co/VprqmLQ

AtskaFin [14.10.2020 18:19:33]

Lainaa #

Laitappa koodi näytille

Metabolix [14.10.2020 20:14:01]

Lainaa #

Ensimmäisen viestin perusteella voidaan päätellä, että "luotuPainike" pitäisi olla lainausmerkeissä, koska kyseessä on teksti eikä mikään muuttuja.

kasivitonen [15.10.2020 09:39:44]

Lainaa #

Tervehdi funktio tulostaa moikka sanan, sitä en saa kopioitua opiskelualustasta. mutta tämä:

let luotuPainike = document.createElement('luotuPainike');
  luotuPainike.innerText = 'Uusi nappi (Luo uuden napin myös)';
  luotuPainike.id = 1;
  luotuPainike.onclick = tervehdi();
  document.body.appendChild(luotuPainike);

luotuPainike on oltava nimi.

Tehtävä ei määritä että id on pakko laittaa, mutta varmaan ihan hyvä?
InnherHTML ei toimi tssä vaikka tehtävä sanoo että pitäs käyttää sitä.

kasivitonen [15.10.2020 09:45:32]

Lainaa #

Se toimii nyt ilman LET sanaa, eli tuo alusta ei hyväksy sitä .

AtskaFin [15.10.2020 10:37:00]

Lainaa #

kasivitonen kirjoitti:

Tehtävä ei määritä että id on pakko laittaa, mutta varmaan ihan hyvä?

Luitko tehtävänantoa?

kasivitonen kirjoitti:

Aseta painikkeen id-attribuutin arvoksi "luotuPainike".

Olet laittanut koodissasi id:ksi arvon 1, vaikka käsketään laittaa merkkojono "luotuPainike". Aiemmin laittamasi virhekoodi johtuu arvatenkin tästä.

luotuPainike.id = "luotuPainike";

Metabolix [15.10.2020 12:52:33]

Lainaa #

kasivitonen kirjoitti:

Se toimii nyt ilman LET sanaa, eli tuo alusta ei hyväksy sitä .

Viope-verkkokursseista kannattaa pysyä kaukana, ne ovat ainakin täällä nähdyn perusteella ihan surkeita, vanhentuneita ja täynnä virheitä. Tuostakin tehtävänannosta näkee, että ollaan ihan hakoteillä, nimittäin onclick-käsittelijää ei ikipäivänä asetettaisi setAttribute-funktiolla nykyään. Mutta kun kerran ohje niin vaatii, niin voit tässä tilanteessa ratkaista tehtävän ohjeen mukaisesti.

Täysin epäselväksi jää, mikä tehtävässä tuottaa ongelmia, kun sinulla on tuossa hyvin tarkka ohje ratkaisusta.

kasivitonen kirjoitti:

HTML-dokumentissa on painike, jota painaessa kutsutaan funktiota lisaaPainike().

<button onclick="lisaaPainike()"> tämä on painike </button>

kasivitonen kirjoitti:

document.createElement("[haluttu_HTML-tag]"); luo elementin, muttei vielä lisää sitä sivulle. Tallenna tämä muuttujaan, jotta voit muokata sitä ennen sen lisäämistä dokumenttiin.

function lisaaPainike() {
  var muuttuja = document.createElement("button");

kasivitonen kirjoitti:

Muokkaamalla elementin .innerHTML-arvoa sijoitusoperaattorilla (=) voidaan lisätä painikkeeseen tekstiä. Myös id-arvoa voidaan muokata tällä tavalla. Aseta painikkeen id-attribuutin arvoksi "luotuPainike".

muuttuja.innerHTML = "tekstiä";
muuttuja.id = "luotuPainike";

kasivitonen kirjoitti:

Monimutkaisemmat muutokset, kuten onclick-attribuutin lisääminen, vaatii että käytetään setAttribute()-metodia tähän tapaan: [lisättävän_elementin_nimi].setAttribute("[attribuutti]", "[attribuutin_arvo]"). – – Elementtiä painettaessa tulee kutsuafunktiota tervehdi().

muuttuja.setAttribute("onclick", "tervehdi()");

kasivitonen kirjoitti:

document.[elementti_johon_lisätään].appendChild([lisättävän_elementin_nimi]); lisää luodun elementin halutun elementin loppuun. Append ei ylikirjoita mitään olemassaolevaa, toisin kuin =-operaattori elementin innerHTML muokatessa.

  document.body.appendChild(muuttuja);
}

Ensi kerralla lue tehtävänanto kunnolla ja noudata sitä.

Huomio! Korostan vielä, että yllä oleva koodi (kuten myös tehtävänannon ohjeistus) on surkeaa JavaScriptia eikä siitä pidä ottaa mitään mallia nykyaikaiseen ohjelmointiin.

kasivitonen [15.10.2020 13:49:21]

Lainaa #

Hei
kyseessä on todellakin amkoodari avoin Metropolian ohjelmointikurssi. Ajattelin että näistä kursseista olisi hyötyä työnhaussa. Mahtaako nykyään päästä mihinkään ilman kunnon tutkintoa ? Insinööritutkinnon pohjalta näitä etäkursseja teen.

Lebe80 [15.10.2020 15:00:21]

Lainaa #

Pääsee töihin myös ilman tutkintoa. TällöinKIN kannattaa olla paikka, josta voit esittää osaavasi asiat.

Joillakin tämä paikka voisi olla vaikkapa Github, josta työnantajalle voidaan esittää omia tuotoksia, joillain se on oma domain, jossa töitä (harrastelija tai kaupallisia) voi katsella.

Itse siis ohjelmoinut vapaa-ajallani 10-vuotiaasta lähtien, joten on ollut todella outoa huomata, että työhaastatteluun ohjelmoijaksi hakeva tyyppi on ainoastaan ohjelmoinut ohjelmointikurssilla valmiiksi opettajan suunnittelemia tehtäviä.

kasivitonen [15.10.2020 20:29:15]

Lainaa #

Ok, näin arvelinkin että tuoa GitHUB on se paikka missä voi osoittaa osaamisen.
Itsekin ohjelmoinut 12-vuotiaasta mutta se jäi 25-vuotiaana. Pohjana oli visual basic ja vähän C ja C++.
Uskoisin pärjääväni kunhan opin javascriptin salat, on vähän erilainen oppia.

walkout_ [16.10.2020 06:20:30]

Lainaa #

Kotisivuja pääsee tekemään kyllä mainostomistoihin kun on jotain näyttää hyvin tehtynä kuten vaikka, joku "Lorem ipsum" -mallisivu HTML/CSS-taitosta (jota ei ole edes tehty oikealle maksavalle asiakkaalle), jossa palautelomeke JavaScriptillä-validoituna ja PHP-backend siihen. Eikä ne mitään koulutusta tai aikaisempia työtodistuksia kysy. Mutta sellainen homma tässä on, että nämä voi olla usein pätkätöitä, koska mainostoimistot myy hyvin usein paljon muuta mainosmateriaalia kuin kotisivuja ja pienet mainostoimistot ovat hyvä kohde, koska niillä edellämainitusta syistä ei ole ohjelmoijaa vaikituisesti töissä.

kasivitonen [16.10.2020 08:23:35]

Lainaa #

Niin, ehkä se kuitenkin on hyvä että pääsee alkuun ja saa jalan ovenväliin. Haluan tosiaan tehdä vanhasta harrastuksesta työn. Saahan sitä sitten niistä pätkähommistakin todistuksia ja meriittiä.
Mua on pelottanut se peloittelu että näissä töissä on aikataulut ja hakataan koodia ihan stressissä? Ellei sitten pääse johonkin tuotetaloon missä kehitetään jotain ohjelmaa..

Grez [16.10.2020 09:13:48]

Lainaa #

kasivitonen kirjoitti:

Mua on pelottanut se peloittelu että näissä töissä on aikataulut ja hakataan koodia ihan stressissä?

Stressin määrä riippuu ihan siitä kuinka hyvä oot arvioimaan omaa työmäärää. Eli kyllähän kaikella kaupallisella tekemisellä on joku aikataulu olemassa, harva on valmis maksamaan "ikuisuusprojektista" joka ei valmistu koskaan.

Stressiä siis voi tulla silloin jos "lupaa" tehdä jonkun asian nopeammin kuin missä sen pystyy tekemään. Toki haasteena on ottaa huomioon myös seikat joita ei välttämättä tule ajatelleeksi alkuvaiheessa.

walkout_ [16.10.2020 10:48:53]

Lainaa #

Aikataulut ovat kyllä eniten työnantajan päänvaiva, koska työnantajan yritykselle asikas voi vaatia sopimussakon, jos työ ei tule valmiiksi sovitussa aikataulussa. Mutta tämä ei ole työn tekijän päänvaiva, koska työnantaja sen sopimussakon sitten maksaa jos ei tule valmiista luvatussa aikataulussa.

Minulla ainakin on ollut sopimussakko yhdessä projektissa, jos se myöhästyy kuukauden niin projektista maksetaan vain puolet sovitusta hinnasta ja jos 2 kuukautta niin projekti tehdään loppuun vaikka väkisin ilman mitään korvausta. Asiakas oli alun perin halunnut, että jos projekti on 2 kk myöhässä niin minulle alkaa juosta tuntilasku niin kauan kuin projekti on myöhässä, mutta sanoin asiakkaalle, että lakimieheni mukaan tämä on epäreilua, niin asiakas luopui tästä vaatimuksesta. Mutta tällaista voi olla joskus kun tekee omalla yrityksellä suoraan asiakkaalle eikä ole työnantajan suojan alla, jossa pelaa normaaliin työsuhteeseen perustuva laki. Sopimussakko perustuu ihan siihen, että jos projekti, joka on verkkokauppa niin asiakkaan kassavirta on jäissä niin kauan kun se verkkokauppa on valmis.

Grez [16.10.2020 11:19:39]

Lainaa #

walkout_ kirjoitti:

Mutta tämä ei ole työn tekijän päänvaiva

Joo eihän sitä tietenkään missään töihin liittyvässä tilanteessa kannata stressata, koska loppujen lopuksi worst case scenario on, että työt ei jossain kohti enää jatku*. Kaikki vaan ei pysty ottamaan niin lunkisti jos yhdessä sovitut aikataulut paukkuu.

* Vaikka työnantaja menisi konkkaan sen takia että mitään ei päästä koskaan laskuttamaan asiakkailta, niin saamatta jääneen palkanhan voi hakea palkkaturvasta.

Vakavasti puhuen niin kunnollinen työnantaja ei varmaan junioridevaajan aikatauluarvion varaan rakenna mitään asiakkaille ilmoitettavia deadlineja. Mutta pääkoodarille tms. enemmän aikataulutuksestakin vastaavalle saattaa kyllä stressiä pukata jos on tehty pahoja virhearviointeja ja on taipumusta stresaamiseen.


Sivun alkuun

Vastaus

Muista lukea kirjoitusohjeet.
Tietoa sivustosta