JavaScript ja ++

Anonyymi

Arvaapa mitä nämä kaksi esimerkkiä tulostaa:

Esimerkki 1:
var a = 4;
var b = a;
document.writeln(a,b);

Esimerkki 2:
var a = 4;
var b = a ;
document.writeln(a,b);

53

858

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Anonyymi

      Tässä lisää ihmettelemistä:

      Esimerkki 1
      var a = 10;
      a ;
      console.log(a);

      Esimerkki 2
      var a = 10;
      a;
      console.log(a);

    • Anonyymi

      Tätä ei taida muut kielet osata:

      var result = 33 - 11 / 3;
      document.writeln(result);

    • Anonyymi

      Javascript ei ole tuttu kieli, mutta arvataan ekaan kysymykseen 5,5 ja 5,4 (jos writeln tulostaa lukujen välisen pilkun).
      Tokassa kysymyksessä molemmat tulostavat 11.
      Kolmas tulostaa 29,33333 tai jos se osaa tulostaa murtoluvun, niin 29 1/3.

      • Anonyymi

        Hyvin meni, tarkkuutta oli viimeisessä useampi desimaali (29.333333333333332).
        Sitähän minä tässä ihmettelin, että tyhjiltään ilman mitään muuttujien tyypityksiä (char, int, short int, long int, float tai double) antaa vastaukseksi liukuluvun noinkin monen desimaalin tarkkuudella, odottelin jotain kokonaislukua.


    • Anonyymi

      Mutta, nyt löytyy JavaScriptin erikoisuus merkin käytössä, joka koskee kumpaakin document.write() ja console.log() tulostusta, nimittäin, jos tulostettava alkaa merkkijonolla, myös merkillä liitetyt luvut käsitellään merkkijonona.

      Normaali tilanne::
      var a = 1;
      var b = 2;
      console.log( a b "kpl" ) // Tulostaa 3kpl

      Erikoista tulostusta:
      var a = 1;
      var b = 2;
      console.log( "No:" a b ) // Tulostaa No:12

      Ja ihan sama tulostatko consoliin vai dokumenttiin.

      • Anonyymi

        Jos tuo ei tuntunut erikoiselta, niin testaapa tämä, jossa aritmeettinen tehtävä on kertolasku:

        var a = 1;
        var b = 2;
        console.log( "No:" a * b ) // Tulostaa No:2

        Nyt taas käsitelläänkin lukuja numeroina eikä merkkijonoina kuten merkin kanssa oli.


    • Anonyymi

      console.log() tulostuksessa käytettävät erikoismerkit ovat kutakuinkin samoja kuin pythonissa, kun taas document.write() tulostuksessa tekstin muotoilu tapahtuu HTML tageja käyttäen.

      document.write("<p><b>JavaScript</b> on mielenkiintoinen komentosarjakieli.</p>");

    • Anonyymi

      Tässä aiemin pyöriteltiin neljän miljardin silmukoita monella kielellä, JavaScript ei vaikuttanut kovinkaan nopealta tässä tehtävässä. Ajan ottoa ei vielä osaa tarjota mutta While silmukka jo onnistuu näin:

      let n = 0;
      while (n <= 4000000000) {
      n ;
      }

    • Anonyymi

      Selain vaikuttaa olevan hyvin epävakaa kun aloitetaan tarkastelemaan millisekunneissa jotain suoritusta. Tämäkin testi vaihteli 40 - 50 sekunnin välillä.

      var Start = performance.now()

      let n = 0;
      while (n <= 4000000000) {
      n ;
      }

      var Stop = performance.now();
      var End = (Stop - Start) / 1000;
      console.log( End.toFixed(2) );

      Tulos tällä kertaa oli 46.43 sekuntia, ei juuri kehumista. Mutta JavaScript näyttää sisältävän tähän tarkoitukseen oikein oman funktionsakin performance.now(). Ja toFixed(2) funktio rajaa desimaalit kahteen. Muutapa siinä ei uutta olekaan.

    • Anonyymi

      GW-BASIC vai oliko VBA tai joku vastaava (en muista), jossa ohjelman alussa asetettiin määriteltiin direktiivi, joka esti uuden muuttujan käyttöön oton ilman esittelyä, tämä sama ominaisuus löytyy myös JavaScript kielestä.

      'use strict';
      a = "Hello World";
      console.log(a);

      'not use strict';
      a = "Hello World";
      console.log(a);

    • Anonyymi

      Joko osaamme paikallistaa virheet. Tässä on sivu ( https://javascript.info/article/devtools/bug.html ), joka sisältää ulospäin näkymättömän virheen. Mikä virhe on kyseessä?

      Joo, aivan liian helppo tehtävä, niille, jotka ovat aieminkin HTML ja JavaScript koodin perehtyneet, mutta muilla saattaakin mennä tosi pitkään virhettä hakiessa.

    • Anonyymi

      Aika mielenkiintoisia on kyullå pohdisdella kaikenlaisia... kuitrnkin

    • Anonyymi

      struct CUSTOMVERTEX {FLOAT X, Y, Z; D3DVECTOR NORMAL;};
      #define CUSTOMFVF (D3DFVF_XYZ | D3DFVF_NORMAL)

      mitä tarkoittaapio tuolainen

    • Anonyymi

      setTimeout(Tehtävä, Aika), hyvin käyttökelpoinen funktio, joka asettaa ajan jonka kuluttua suoritetaan annettu tehtävä. Aika annetaan millisekunneissa. Tein pienen esimerkin joka kirjoittaa Count muuttujan sisältöä, <imput> elementin kenttään. Samalla tämä Count toimii aikana, jonka jälkeen uudestaan palataan kirjoittamaan muuttujan arvo.

      <!DOCTYPE html>
      <html> <head> <title>Hidasteluja</title> </head>
      <body>
      <input type="text" id="Tekstikenttä">
      <script>
      var Count = 1;

      function WriteCount() {
      document.getElementById("Tekstikenttä").value = Count;
      Count = Count 1;
      setTimeout(WriteCount, Count); }

      WriteCount();
      </script>
      </body>
      </html>

      Tämä on siis HTML sivu jossa on JavaScript lohko mukana. En usko että olet vastaavaa aiemmin testannut, vaikka tätä setTimeout() funktion esimerkkejä on runsaasti tarjolla. Siis tässä Count arvo kasvaa koko ajan, ja samalla harvenee uuden arvon kenttään kirjoittaminen, mitä pitempään ajat sitä hitaammaksi käy. Suorituksen pysäyttämismahdollisuutta ei ole, joten vain sivun sulkeminen katkaisee silmukan.

    • Anonyymi

      Tässä esimerkki, kuinka voit esittää kysymyksen. Huomaa kun jätämme <title></title> lohkon pois <head></head> tagien välistä, käyttää selain titlen sijasta tiedosto nimeä.

      <!DOCTYPE html>
      <html><head><meta charset="UTF-8"></head><body>

      <script>
      let answer = "z";
      const OKanswer = "Elias Lönnrot";
      while (answer != OKanswer) {
      answer = prompt("Kuka kirjoitti kalevalan?");
      if (answer.toLoweCase != OKanswer) {
      alert("Väärin meni! Vastaus ei ole: " answer); }; };
      </script>

      <script>
      if (answer != OKanswer) {
      document.write("<h1>No voi ei, se oli " OKanswer "</h1>") }
      else {document.write("<h1>Hienoa, onnistuit!</h1>") }
      </script>

      </body> </html>

    • Anonyymi

      Edellisestä jäi mainitsematta prompt() funktion toinen parametri, eli se hyväksyy oletus vastauksen asettamisen. Tämä seuraava sinun tulee suorittaa "Console" ikkunassa (F12), kopioit vain tekstin liität sellaisenaan, ja painat "Enter".

      var kysymys;
      kysymys = prompt("Sanalaskuri / merkkilaskuri selvittää nopeasti mm. kuinka monta sanaa, merkkiä ja lausetta tekstisi sisältää. Haluatko sellaisen?", "Haluan, tietysti haluan.");
      if (kysymys != null) {
      alert('Se on riittävän yksinkertainen, jotta voimme rakentaa sellaisen. Teemme sen jossakin vaiheessa'
      ' ja paljon, paljon muuta.' "\r\n\r\n" 'Pysy mukana :)');
      }

      Huomioi, että jos painat "Peruuta" painiketta, et saa alert() funktiolla tuotettua viestiä. Kiinnitä huomiota myös siihen kuinka tuotamme pitkän viestin, ja saamme rivinvaihtoja aikaan.

      • Anonyymi

        Lisätään vielä että JavaScript sisältää kolme vuorovaikutteista ponnahdusikkunaa (dialog box); prompt(), confirm() ja alert(), eikä näihin mihinkään voida sisällyttää muuta kuin tekstiä.


    • Anonyymi

      else if lausetta voit käyttää niin monesti kuin on tarvetta, mutta kannattaa harkita switch(..) {..} lauseen käyttöä jos vertailtavia vaihtoehtoja on paljon, näin sanottiin jossakin ohjeessa, ei kerrottu miksi. Esimerkin testaaminen paina ensin F12 ja valitse "Console" välilehti, kaikissa Chromium pohjaisissa selaimissa, ja FireFox pohjaisissa selaimissa oliko se Ctrl Shift K vai Ctrl Shift I, en muista.

      var luku; var msg;
      name = prompt("Anna numero 0 .. 4");
      if (name == "0") { msg = "Nolla"; }
      else if (luku == "1") { msg = "Yksi"; }
      else if (luku == "2") { msg = "Kaksi"; }
      else if (luku == "3") { msg = "Kolme"; }
      else if (luku == "4") { msg = "Neljä"; }
      else { msg = "Tyhjä"; }
      alert(msg)

      • Anonyymi

        Haluat noihin else if:eihhin varmaan name=="1" jne?


      • Anonyymi
        Anonyymi kirjoitti:

        Haluat noihin else if:eihhin varmaan name=="1" jne?

        Hienoa että joku edes ymmärtää mitä niissä tavoitellaan, olet oikeassa, tuo tuli ulos keskeneräisenä, kun "nuolinäppäin ylös", antaa vanhan uudelleen muokattavaksi, ilman että kaiken tarvitsee uudelleen kirjoittaa, syntyy näitä sekaannuksia.


    • Anonyymi

      Nyt selvisi sellainen asia kuin että muuttujia voidaan määritellä pilkulla erotettuna, näin:

      var i=0, j=10, x='testi';

    • Anonyymi

      Nyt yritän perehtyä tiedon tallentamiseen, ja aloitin localStorage varastoon tutustumisen. Ja heti tuli vastaan outoja juttuja, nimittäin yritin tulostaa for -silmukassa varaston avaimet (key). Ohjeitakin löytyi ihan riittävästi, mutta kun sain kaikissa niissä vääriä tulosteita. Joten poikkesin ohjeista ja tein omin avuin for silmukan jonka tulostuskin tuotti oikeita vastauksia.

      OMA
      var key;
      var i = 0;
      for (key in localStorage) {
      i = i 1;
      console.log(key);
      if (i >= localStorage.length) { break; }
      }

      OHJEET NEUVO NÄIN
      var key;
      for ( key in localStorage ){
      console.log(key)
      }

      Mutta tämä oppaan silmukka tuotti seuraavan listan, vaikka varastossa oli vain "test" avain olemassa ja sillä arvo.

      test
      length
      key
      getItem
      setItem
      removeItem
      clear

      Mikä tässä ohjeen silmukassa mättää, noiden ylimääräisten takia tein sen oman silmukan, joka on jo asteen verran monimutkaisempi.

      • Anonyymi

        For...in käy läpi myös objektin prototyyppi-ketjun, joten sieltä löytyy noita muita propertiksiä, vaikka ne ei suoraan itse localStorage-objektissa olekaan. Luultavasti localStoragea ei ole tarkoitettu läpikäytäväksi, koska sellaista funktiota ei ole sinne tehty, mutta yksi tapa, jolla voi käydä läpi vain objektin "omat" propertyt on funktio Object.getOwnPropertyNames().

        for (let key of Object.getOwnPropertyNames(localStorage)) console.log(key);

        Joku "_hjid" ainakin mulle vielä tulee (lienee selainkohtaista mitä kaikkea tauhkaa siellä on).

        Huomaa, että nyt käytetään of:fia, sillä funktio palauttaa listan. Lisäksi, kun laittaa tuon let -määrittelyn muuttujalle key luupin sisään, niin se on lokaali muuttuja, joka näkyy vain luupin sisällä, eikä näin sotke asioita, jos vaikka key olisi jossain muualla määritelty. Itse asiassa siinä voisi käyttää myös "const key" -määrittelyä. Se toimii, vaikka key luupissa muuttuukin. Se taitaa mennä niin, että let/const -tavalla muuttuja key on joka kierros niinkuin siinä "omassa freimissään". Tästä on suunnaton apu, kun esim. asetetaan luupissa jotain event listenereitä, joihin tulee joku indeksi mukaan: jos sen laittaa var:illa, niin muuttujan arvoksi jää se mihin luuppi loppui (ja se tulee olemaan se mitä arvoa jokainen event listeneri käyttää), mutta let/const:illa jokaiseen "menee omansa". Noh, tämä nyt taisi mennä vähän ohi asiasta, mutta tulipahan vain mieleeni :D.


      • Anonyymi
        Anonyymi kirjoitti:

        For...in käy läpi myös objektin prototyyppi-ketjun, joten sieltä löytyy noita muita propertiksiä, vaikka ne ei suoraan itse localStorage-objektissa olekaan. Luultavasti localStoragea ei ole tarkoitettu läpikäytäväksi, koska sellaista funktiota ei ole sinne tehty, mutta yksi tapa, jolla voi käydä läpi vain objektin "omat" propertyt on funktio Object.getOwnPropertyNames().

        for (let key of Object.getOwnPropertyNames(localStorage)) console.log(key);

        Joku "_hjid" ainakin mulle vielä tulee (lienee selainkohtaista mitä kaikkea tauhkaa siellä on).

        Huomaa, että nyt käytetään of:fia, sillä funktio palauttaa listan. Lisäksi, kun laittaa tuon let -määrittelyn muuttujalle key luupin sisään, niin se on lokaali muuttuja, joka näkyy vain luupin sisällä, eikä näin sotke asioita, jos vaikka key olisi jossain muualla määritelty. Itse asiassa siinä voisi käyttää myös "const key" -määrittelyä. Se toimii, vaikka key luupissa muuttuukin. Se taitaa mennä niin, että let/const -tavalla muuttuja key on joka kierros niinkuin siinä "omassa freimissään". Tästä on suunnaton apu, kun esim. asetetaan luupissa jotain event listenereitä, joihin tulee joku indeksi mukaan: jos sen laittaa var:illa, niin muuttujan arvoksi jää se mihin luuppi loppui (ja se tulee olemaan se mitä arvoa jokainen event listeneri käyttää), mutta let/const:illa jokaiseen "menee omansa". Noh, tämä nyt taisi mennä vähän ohi asiasta, mutta tulipahan vain mieleeni :D.

        Aivan, tuo onkin paljon parempi ja lyhyempi kuin tuo minun viritys. No se niistä avaimista. Tässä minulla on sama localStorage haku arvojen osalta. Voiko tämänkin tehdä helpommin.

        var len = localStorage.length;
        for ( let i = 0; i < len; i ) console.log( localStorage.getItem( localStorage.key( i ) ) );


      • Anonyymi
        Anonyymi kirjoitti:

        Aivan, tuo onkin paljon parempi ja lyhyempi kuin tuo minun viritys. No se niistä avaimista. Tässä minulla on sama localStorage haku arvojen osalta. Voiko tämänkin tehdä helpommin.

        var len = localStorage.length;
        for ( let i = 0; i < len; i ) console.log( localStorage.getItem( localStorage.key( i ) ) );

        Tuo vaikuttaa hyvältä. Noin se kannattaa tehdäkin se läpikäynti, en itse tuota key() funktiota muistanutkaan.

        Muuttujan len voi laittaa vielä for:in sisään näin:

        for ( let i = 0, len=localStorage.length; i < len; i ) ...


      • Anonyymi
        Anonyymi kirjoitti:

        Tuo vaikuttaa hyvältä. Noin se kannattaa tehdäkin se läpikäynti, en itse tuota key() funktiota muistanutkaan.

        Muuttujan len voi laittaa vielä for:in sisään näin:

        for ( let i = 0, len=localStorage.length; i < len; i ) ...

        Näin on, var komennon käyttöä muuttujien määrittelyssä kehotetaan välttämään, koska niiden muuttujien näkyvyysalue on globaali. Jossakin ohjeessa jopa väitettiin että var voidaan korvata let ja const määrittelyjä käyttäen kokonaan. Const komentohan teki muuttujasta vakion jonka arvoa ei myöhemmin voi muuttaa.

        localStorage on tarkoitettu string (merkkijono) tyyppisten arvojen tallennukseen, joten kuvien tallennukseen on keksittävä muu ratkaisu, kuten kuvan osoitteen tallentaminen, joka ei sekään tunnu kovin luotettavalta keinolta. Näistä normaaleista perusmenetelmistä:

        setItem(name, value) avaimen ja arvon lisäys,
        removeItem(name) avaimen ja arvon poisto,
        getItem(name) arvon poiminta nimellä
        key(index) arvon poiminta numerolla

        löytyy kivuttomasti helposti omaksuttavaa tietoa, mutta on vielä yksi, jonka osilta mainitaan ettei se olisi tuettu FireFox selaimessa ja se on:

        clear()

        joka poistaa kerralla kaikki arvot. Minulla ei ole FireFox selainta, enkä voi siksi sanoa vieläkö se tänä päivänäkin pitää paikkansa.


    • Anonyymi

      Jos FireFox ei sisällä samanlaista JavaScript tukea localStoragen hallinnassa, on näitä erikoisuuksia muisakin selaimissa. Tämä seuraava toimii ainostaan IE8:

      sessionStorage.begin();
      sessionStorage.name = "Seppo";
      sessionStorage.commit();

      Nimittäin nämä begin() ja commit() komennot puuttuvat muista selaimista.

      localStorage tallennusten tulostus jäi vielä kaipaamaan yhdistettyä avain ja arvoparin tulostusta, siispä se tässä:

      for (let i = 0, len = localStorage.length; i < len; i ){
      let key = localStorage.key(i);
      let value = localStorage.getItem(key);
      alert(`AVAIN: ${key} ARVO: ${value}`);
      }

      Huomioi oikeat hipsut!

    • Anonyymi

      Vielä samasta localStoragesta, nimittäin kiinnitin huomiota tuohon järjestykseen, koska se ei ole avain/arvo parien luontijärjestys, se ei ole myöskään aakkostettu mitenkään, eikä siihen näytä vaikuttavan avaimen eikä arvon sisältö. Onko sinulla jokin selitys tälle järjestykselle. Tällä kertaa GIF animaationa. Kaikki alkaa localStoragen tyhjennyksellä, jonka jälkeen sijoitetaan 4 uutta avain/arvo paria, ja lopuksi tulostetaan.

      Ehkä kerkisit kuvitella että jo nyt unohdin, miten asia hoidetaan näppärästi, kun tuossa edellisessä tuli vain osittain noudatettua ohjettasi, en unohtanut, nyt tein sen antamasi ohjeen mukaan.

      https://s7.gifyu.com/images/tallennusjarjestys.gif

      Arvot sijoitetaan näin:
      localStorage.setItem('avain1', 'arvo1');
      localStorage.setItem('avain2', 'arvo2');
      localStorage.setItem('avain3', 'arvo3');
      localStorage.setItem('avain4', 'arvo4');

      mutta tulostuvat näin:
      AVAIN: avain3 ARVO: arvo3
      AVAIN: avain4 ARVO: arvo4
      AVAIN: avain2 ARVO: arvo2
      AVAIN: avain1 ARVO: arvo1

      • Anonyymi

        Täällä:
        https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
        sanotaan
        "A for...in loop iterates over the properties of an object in an arbitrary order"
        eli järjestys on mikä sattuu. Kai se jotenkin tulee siitä minkälaiseen tietorakenteeseen nuo sitten tallennetaankaan (hashtable:hän se objekti taitaa olla)
        Ja
        https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
        tuo tuottaa samassa järjestyksessä.

        Muuten, Object.keys() on ehkä vielä parempi (lyhyempi ainakin kirjoittaa, en tiedä onko noilla sitten mitään toiminnallista eroa getOwnPropertyNames():n kanssa)

        localStorage.setItem('avain1', 'arvo1');
        localStorage.setItem('avain2', 'arvo2');
        localStorage.setItem('avain3', 'arvo3');
        localStorage.setItem('avain4', 'arvo4');
        console.log(Object.keys(localStorage));

        //--> ["avain3", "avain4", "_hjid", "avain2", "avain1"]
        Ai niin ja tuo _hjid:hän on näköjään tämän suomi24:n joku juttu, joka siellä oli jo valmiiks. (Kun satuin tällä sivulla tuota testaamaan.)

        Ja tuolla keys()-metodista:
        https://developer.mozilla.org/en-US/docs/Web/API/Storage/key
        "The order of keys is user-agent defined, so you should not rely on it."

        Joo, mutta kaiken kaikkiaan ei tuota localStoragea kai ole tarkoitettu läpikäytäväksi(?), vaan ne avaimet, joilla tietoa on tallennettu, täytyy tietää ennalta ja sitten vain hakea arvot getItem():lla.


      • Anonyymi

        Laittamani viesti näköjään poistunut : (. Noh,
        Object.keys(localStorage)
        siis onkin vielä parempi tapa tuohon kaikkien avainten saantiin: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys . Järjestys jossa avaimet tuotetaan on "arbitrary" (tullee siitä miten ne hashtableen häshätäänkään). Kuitenkin se on aina sama kuin mikä for...in loopin järjestys. Storagen key()-metodin järjestyksestä sanotaan "toteutuskohtainen" eikä siihen pidä luottaa. Mutta yleensähän tuota storagea käytettäneenkin, niin että avain/avaimet on aina ennalta tiedossa ja sitten vain haetaan haluttu getItem():lla. Jos esim. taulukon haluaa tallentaa, niin (koska sinne pitää laittaa stringi,) käytetään JSON.stringify() ja JSON.parse():a

        localStorage.setItem("avain1", JSON.stringify([1,2,3]));
        var taulu = JSON.parse(localStorage.getItem("avain1"));
        console.log(taulu);


      • Anonyymi
        Anonyymi kirjoitti:

        Laittamani viesti näköjään poistunut : (. Noh,
        Object.keys(localStorage)
        siis onkin vielä parempi tapa tuohon kaikkien avainten saantiin: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys . Järjestys jossa avaimet tuotetaan on "arbitrary" (tullee siitä miten ne hashtableen häshätäänkään). Kuitenkin se on aina sama kuin mikä for...in loopin järjestys. Storagen key()-metodin järjestyksestä sanotaan "toteutuskohtainen" eikä siihen pidä luottaa. Mutta yleensähän tuota storagea käytettäneenkin, niin että avain/avaimet on aina ennalta tiedossa ja sitten vain haetaan haluttu getItem():lla. Jos esim. taulukon haluaa tallentaa, niin (koska sinne pitää laittaa stringi,) käytetään JSON.stringify() ja JSON.parse():a

        localStorage.setItem("avain1", JSON.stringify([1,2,3]));
        var taulu = JSON.parse(localStorage.getItem("avain1"));
        console.log(taulu);

        Joo, tämän taulukko homman jätän väliin, kun en ole tähän "JSON" juttuun perehtynyt ollenkaan. Mutta tämä linkkisi takaa löytynyt tapa onkin yksinkertaisin, eikä tulostus eikä asettaminenkaan voi enää tästä helpommaksi mennä:

        const x = {
        'avain 1': 'arvo 1',
        'avain 2': 'arvo 2',
        'avain 3': 'arvo 3',
        };

        console.log(Object.keys(x));
        console.log(Object.values(x));

        Hyvä näin.


    • Anonyymi

      SessionStorage on välilehti kohtainen tallennus, ja kooltaan 5Mt, tallenteet menetetään kun välilehti suljetaan.

      LocalStorage taas säilyttää tietonsa niin kauan kunnes ne tuhotaan, kooltaan myös 5Mt.

      Vielä käytettävissä olevan tilan voit selvittää tuolla:
      http://dev-test.nemikor.com/web-storage/support-test/

    • Anonyymi

      SessionStoragen ja LocalStoragen käsittely saa nyt vähäksi aikaa riittää.

      Evästeet on toinen tapa tallentaa tietoa. Tämä tallennustavan rajoitukset vaihtelee enemmän selainkohtaisesti, kuin mitä storage tavalla tapahtuu. Luultavasti jokainen selain pystyy tallentamaan 80 kilotavua yhtä verkkotunnusta kohti.

    • Anonyymi

      Lazarus sai uuden päivityksen, pistän tämän JavaScript kirjoittelun vähäksi aikaa seis ja tutustun Lazaruksen uusiin ominaisuuksiin. Tein kuitenkin esimerkin localStoragen käyttämisestä sivulatauksia tallentavan JavaScriptin varastona.

      https://pastebin.com/YPg0PdZ8

    • Anonyymi

      Pitihän se vielä rustata kävijä (vieras) laskuri, joka varastoi vierailujen määrän evästeeseen (cookie). Yllättävän pitkäksi tuhrautui, mutta toimii tämäkin. Eväste säilyy yhden vuoden viimeisestä vierailusta.

      https://pastebin.com/gChrH7cM

      Huomioi, että et voi kasvattaa vieraslaskurin tilaa käynnistämällä sivun tiedostona C:\Cookie-laskuri.html vaan evästeiden asettamiseen vaaditaan HTTP-protokollan käyttö, eli avaat sivun http://localhost/Cookie-laskuri.html

      • Anonyymi

        Tämä laskuri näyttää vain yhden (oman) selaimen käynnit sivulla: cookie = omaselaincookie., mikä kasvattaa arvoa. Jos halutaan sivulle laskuri kaikista sivulla käynneiistä, se vaatii laskurin tallennuksen palvelinpäähän: joko tehdään laskuri palvelinkoodiin jja tallennus tiedostoon tai kantaan, tai lähetetään käyntitieto johonkin toiseen paikkaan tallennettavaksi ja näytetään vain tulos palvelinsivulla.

        Esimerkki yksinkertaisesta php-laskurikoodista
        http://www.hongisto.info/wp/category/oppaat/php/
        Esimerkki toisesta vaihtoehdosta on joku laskuri/statistiikkasivusto, minkä agentin koodi lisätään sivulle, yleensä js, mikä lähettää tiedon ko l/s-sivustolle ja sitten näyttää ko sivulla
        (esim gostats, se näyttää laskurin sivulla kuvana, mutta kerää muutakin tietoa: loggautumalla gostatsiin sivun omistaja voi nähdä tarkempaa tietoa kävijöistä, mm kävijöiden ip:t) (Javascript-blockerilla voi estää js-agentit, myös adblockerit kute ublock origin estää niitä)


      • Anonyymi
        Anonyymi kirjoitti:

        Tämä laskuri näyttää vain yhden (oman) selaimen käynnit sivulla: cookie = omaselaincookie., mikä kasvattaa arvoa. Jos halutaan sivulle laskuri kaikista sivulla käynneiistä, se vaatii laskurin tallennuksen palvelinpäähän: joko tehdään laskuri palvelinkoodiin jja tallennus tiedostoon tai kantaan, tai lähetetään käyntitieto johonkin toiseen paikkaan tallennettavaksi ja näytetään vain tulos palvelinsivulla.

        Esimerkki yksinkertaisesta php-laskurikoodista
        http://www.hongisto.info/wp/category/oppaat/php/
        Esimerkki toisesta vaihtoehdosta on joku laskuri/statistiikkasivusto, minkä agentin koodi lisätään sivulle, yleensä js, mikä lähettää tiedon ko l/s-sivustolle ja sitten näyttää ko sivulla
        (esim gostats, se näyttää laskurin sivulla kuvana, mutta kerää muutakin tietoa: loggautumalla gostatsiin sivun omistaja voi nähdä tarkempaa tietoa kävijöistä, mm kävijöiden ip:t) (Javascript-blockerilla voi estää js-agentit, myös adblockerit kute ublock origin estää niitä)

        Olet oikeassa, kun tajusin mitä kirjoitit, oikein säpsähdin, voi hitto, koko ajan sitä esittelin laskurina joka seuraa kaikkien kävijöiden vierailuja. Tosiaankin se laskee vain omat käynnit.


    • Anonyymi

      Vieraslaskurin toteuttaminen niin että tieto tallennetaan teksti tiedostoon, vaikuttaa olevan vähemmän mielekäs tapa mutta mahdollinen, joten jätän välistä pois.

    • Anonyymi

      Kuka osaa selittää nämä JavaScriptin oudot funktiot:

      (() => 1 2 3 4 )()
      // 10

      Onko nämä vain "Console" ikkunassa tavoitettavia oikoteitä ?

      • Anonyymi

        Samaten tämä, eihän tuo anna muuta kuin virheen, ja mitä tarkoittaa => merkintä.

        (diameter) => diameter * 3.14159265;
        console.log(diameter)


      • Anonyymi

      • Anonyymi
        Anonyymi kirjoitti:

        Samaten tämä, eihän tuo anna muuta kuin virheen, ja mitä tarkoittaa => merkintä.

        (diameter) => diameter * 3.14159265;
        console.log(diameter)

        Nuolifunktiot ovat ES6:ssa tullut "uutuus". Ne määritellään laittamalla parametrit sulkuihin (tai jos vain yksi parametri, niin sulut voi jättää pois), sitten nuoli =>, ja lopuksi funktion palauttama arvo (yhtenä lausekkeena) tai voi laittaa myös lohkon {...}, jossa on return-lause (tai eihän returnia välttämättä tarvitse, jos funktio ei palauta mitään (ts. palauttaa undefined)).

        Esim.
        x => 2*x
        (x, y) => x y
        Tässä esimerkki lohkon kanssa
        x => {let y = x 1; return x*y;}

        Nuolifunktioissa on this-referenssin kannalta sellainen jippo, että ne eivät "tee omaa this:siään" vaan nuolifunktion sisällä this viittaa siihen, mihin se viittaa nuolifunktion ulkopuolella.

        Tuossa sinun esimerkissä
        "
        (diameter) => diameter * 3.14159265;
        console.log(diameter)
        "
        diameteter on tuossa vain parametri, joten se ei ole määritelty nuolifunktion ulkopuolella (missä tuo console.log on). Jos haluat tulostuksen tapahtuvan funkion sisällä, niin käytä lohko-tapaa (lisäksi laitetaan funktio muuttujaan, jotta sitä voi kutsua myöhemmin):

        const getPerimeter = diameter => {
        console.log(diameter );
        return diameter * Math.PI; //pii löytyy Math-kirjastosta
        };
        getPerimeter(2);


      • Anonyymi
        Anonyymi kirjoitti:

        Nuolifunktiot ovat ES6:ssa tullut "uutuus". Ne määritellään laittamalla parametrit sulkuihin (tai jos vain yksi parametri, niin sulut voi jättää pois), sitten nuoli =>, ja lopuksi funktion palauttama arvo (yhtenä lausekkeena) tai voi laittaa myös lohkon {...}, jossa on return-lause (tai eihän returnia välttämättä tarvitse, jos funktio ei palauta mitään (ts. palauttaa undefined)).

        Esim.
        x => 2*x
        (x, y) => x y
        Tässä esimerkki lohkon kanssa
        x => {let y = x 1; return x*y;}

        Nuolifunktioissa on this-referenssin kannalta sellainen jippo, että ne eivät "tee omaa this:siään" vaan nuolifunktion sisällä this viittaa siihen, mihin se viittaa nuolifunktion ulkopuolella.

        Tuossa sinun esimerkissä
        "
        (diameter) => diameter * 3.14159265;
        console.log(diameter)
        "
        diameteter on tuossa vain parametri, joten se ei ole määritelty nuolifunktion ulkopuolella (missä tuo console.log on). Jos haluat tulostuksen tapahtuvan funkion sisällä, niin käytä lohko-tapaa (lisäksi laitetaan funktio muuttujaan, jotta sitä voi kutsua myöhemmin):

        const getPerimeter = diameter => {
        console.log(diameter );
        return diameter * Math.PI; //pii löytyy Math-kirjastosta
        };
        getPerimeter(2);

        Pakko jättää hautumaan, en saanut tästäkään mitään järkevää irti:

        x => 2 * x
        console.log(x)

        Virhettä pukkaa vaan:
        VM170:2 Uncaught ReferenceError: x is not defined

        Ehkä se sitten joskus selviää, kun sen aika tulee.


      • Anonyymi
        Anonyymi kirjoitti:

        Pakko jättää hautumaan, en saanut tästäkään mitään järkevää irti:

        x => 2 * x
        console.log(x)

        Virhettä pukkaa vaan:
        VM170:2 Uncaught ReferenceError: x is not defined

        Ehkä se sitten joskus selviää, kun sen aika tulee.

        Nuolifunktio on nimetön. Jotta sitä voisi kutsua (jos ei tee heti-kutsua), niin se pitää tallentaa muuttujaan. Esimerkissä

        x => 2 * x

        x on siis parametri, ei funktion nimi. Tehdään näin:

        var f = (x => 2*x)

        Nyt f on funktio, joka kaksinkertaistaa argumenttinsa. Sulut on yllä selkeyttämässä, ne ei olisi pakolliset, sillä lauseke "x => 2*x" suoritetaan ensin ja sitten siitä tullut tulos (eli funktio) tallennetaan muuttujaan f.


      • Anonyymi
        Anonyymi kirjoitti:

        Nuolifunktio on nimetön. Jotta sitä voisi kutsua (jos ei tee heti-kutsua), niin se pitää tallentaa muuttujaan. Esimerkissä

        x => 2 * x

        x on siis parametri, ei funktion nimi. Tehdään näin:

        var f = (x => 2*x)

        Nyt f on funktio, joka kaksinkertaistaa argumenttinsa. Sulut on yllä selkeyttämässä, ne ei olisi pakolliset, sillä lauseke "x => 2*x" suoritetaan ensin ja sitten siitä tullut tulos (eli funktio) tallennetaan muuttujaan f.

        No näin tavaten sain jotain irti. Ymmärsin asian niin että nämä kaksi vastaavat täysin toisiaan, toinen on vain lyhyempi kirjoittaa:

        Lyhyt muoto:
        var f = (x => 2 * x);

        Pitkä muoto:
        var f = new Function("x", "return 2 * x");

        Kumpaakin kutsutaan kehitystyökalujen, "Console" -välilehdellä näin kun halutaan vastaus; paljonko on 10 * 10:

        console.log( f(10) );


    • Anonyymi

      Taas törmäsin outoihin asioihin, tässä 5 "kyselyä" jotka palauttavat arvon "TRUE", siitäkin huolimatta, että tämä kyseinen HTML -dokumentti on täysin tyhjä.

      alert( document.body instanceof EventTarget ); //true
      alert( document.body instanceof Node ); //true
      alert( document.body instanceof Element ); //true
      alert( document.body instanceof HTMLElement ); //true
      alert( document.body instanceof HTMLBodyElement ); //true

      Vieläkö jaksat opastaa. Nyt nimittäin päätin perehtyä näihin HTML -elementtien paikallistamisiin, muutoksien tekemisiin, ja uusien elementtien lisäämisiin ja sijoittamisiin HTML -dokumenttiin. On ehken se mielenkiintoisin asia koko touhussa.

      • Anonyymi

        Hmmm... Siellä ilmeisesti on kuitenkin body. Pääset tutkimaan DOM:n rakennetta kehitystyökalujen (F12) Elements-välilehdellä (ainakin Chromessa). Siellä voi valita Elementin ja poistaa sen painamalla Del.

        JavaScriptillä body:n voisi poistaa näin

        document.body.parentElement.removeChild(document.body);

        //Toinen tapa. Documentin lapsi on html ja sillä lapsi body.
        document.children[0].removeChild(document.body);

        //Poistetaanpa koko html:
        document.removeChild(document.children[0]);
        //Nyt documentti on ainain tyhjä!


        W3schools on aika hyvä tietopankki noihin asioihin (jos et ole jo törmännytkin, se on googlehauissa aika suosittu)
        https://www.w3schools.com/jsref/prop_doc_body.asp


      • Anonyymi
        Anonyymi kirjoitti:

        Hmmm... Siellä ilmeisesti on kuitenkin body. Pääset tutkimaan DOM:n rakennetta kehitystyökalujen (F12) Elements-välilehdellä (ainakin Chromessa). Siellä voi valita Elementin ja poistaa sen painamalla Del.

        JavaScriptillä body:n voisi poistaa näin

        document.body.parentElement.removeChild(document.body);

        //Toinen tapa. Documentin lapsi on html ja sillä lapsi body.
        document.children[0].removeChild(document.body);

        //Poistetaanpa koko html:
        document.removeChild(document.children[0]);
        //Nyt documentti on ainain tyhjä!


        W3schools on aika hyvä tietopankki noihin asioihin (jos et ole jo törmännytkin, se on googlehauissa aika suosittu)
        https://www.w3schools.com/jsref/prop_doc_body.asp

        Kun tein tyhjän tiedoston, jolla on vain nimi, ja sitten siihen kohdistin tuon kyselyn, kaikkiin tuli TRUE vastaus. Sehän tässä hämmensi, että ei voi olla kysymys, tuosta juuri tekemästäni tyhjästä tiedostosta.

        No nyt poistin nuo kaikki tuolla; document.removeChild(document.children[0]); komennolla, ja ajoin saman uudestaan, no nyt tulikin kaikkiin vastaus FALSE, mutta kun painoin F5 kaikki palasi ennalleen.

        Joten ehkä tämä selaimen "Console", ei vaan hyväksy sellaista tilannetta, ettei olisi HTML -dokumentin "pakolliset" elementit olemassa. No oli miten oli tämä asia selvisi tällä, jatketaan, katsotaan missä seuraavaksi kompuroin.


      • Anonyymi
        Anonyymi kirjoitti:

        Kun tein tyhjän tiedoston, jolla on vain nimi, ja sitten siihen kohdistin tuon kyselyn, kaikkiin tuli TRUE vastaus. Sehän tässä hämmensi, että ei voi olla kysymys, tuosta juuri tekemästäni tyhjästä tiedostosta.

        No nyt poistin nuo kaikki tuolla; document.removeChild(document.children[0]); komennolla, ja ajoin saman uudestaan, no nyt tulikin kaikkiin vastaus FALSE, mutta kun painoin F5 kaikki palasi ennalleen.

        Joten ehkä tämä selaimen "Console", ei vaan hyväksy sellaista tilannetta, ettei olisi HTML -dokumentin "pakolliset" elementit olemassa. No oli miten oli tämä asia selvisi tällä, jatketaan, katsotaan missä seuraavaksi kompuroin.

        Jäi sanomatta tuosta https://www.w3schools.com/js/js_operators.asp sivusta jolla noita operaattoreita käsitellään. Kun katsot mitä sanotaan JavaScript Assignment Operators (
        JavaScript sijoitusoperaattorit ), niin eikö ne operaattorit olekin väärin päin,

        esimerkiksi:
        ( =) tulisi olla (= )

        pukkaa virheitä, jos noita uskoo.


      • Anonyymi
        Anonyymi kirjoitti:

        Jäi sanomatta tuosta https://www.w3schools.com/js/js_operators.asp sivusta jolla noita operaattoreita käsitellään. Kun katsot mitä sanotaan JavaScript Assignment Operators (
        JavaScript sijoitusoperaattorit ), niin eikö ne operaattorit olekin väärin päin,

        esimerkiksi:
        ( =) tulisi olla (= )

        pukkaa virheitä, jos noita uskoo.

        = on kyllä oikein. Se siis tarkoittaa, että (jo olemassa olevaa!) muuttujaa kasvatetaan sillä mitä oikealla puolella on. Esim.

        var x = 1;
        x = 1;
        console.log(x);
        //x == 2;


    • Anonyymi

      Ei tuota pitkälle kerinnyt päästä, kun jo apu olisi tarpeen.

      Tässä esimerkissä on kaksi DIV -lohkoa, joissa molemmissa on samalla luokkanimellä olevat lapsi DIV elementit. Tarkoitus olisi vain <div class="eka"> lohkon sisältä löytyvän <div class="kaksi"> lohkon värin muuttaa.

      https://pastebin.com/7AJ6AzdY

      Olen yrittänyt löytää ratkaisun näin ja sadalla muulla tavalla:

      var taks = document.getElementsByClassName("eka")[0];
      if (taks.childNodes.className == "yksi") {
      console.log(taks);
      document.getElementsByClassName("kaksi").style.color = "blue";
      }

      En löytänyt esimerkkejä näistä sisäkkäisistä ClassName luokista, jotain childNodes ohjeita löytyi, mutta vain sille ensimmäiselle elementille, vaikka en saanut niitäkään toimimaan. Vieläkö viitsisit pistää ohjetta?

      • Anonyymi

        Document.querySelector (tai -All, niin löytyy kaikki) on tuohon passeli. Sille annetaan valitsin merkkijono samaan tyyliin kuin mitä CSS-valitsimet ovat. Tässä esimerkki, jossa laitoin tuon vaihdon napin taakse eli koodi löytyy JS-lootasta riviltä 2 eteen päin:

        https://jsfiddle.net/8awhg2bs/

        Jos CSS-valitseminen ei ole tuttua niin piste tarkoittaa, että elementillä pitää olla tietty luokka ja väli tarkoittaa että nyt mennään lapsi elementtiin.

        Tehtävä:
        Muuta toiminta siten, että aina kun nappia painaa, sininen tausta hyppää seuraavaan diviin ja kiertää taas alkuun, kun kaikki on kierretty (oletetaan, että divejä olisi nyt vaikka ["eka", "toka", "kolmas"] tai voisihan sitä aluksi etsiä kaikki divit, joilla on lapsina div, jolla on luokka "yksi" ja jolla on lapsi div, jolla taas luokka "kaksi").


      • Anonyymi
        Anonyymi kirjoitti:

        Document.querySelector (tai -All, niin löytyy kaikki) on tuohon passeli. Sille annetaan valitsin merkkijono samaan tyyliin kuin mitä CSS-valitsimet ovat. Tässä esimerkki, jossa laitoin tuon vaihdon napin taakse eli koodi löytyy JS-lootasta riviltä 2 eteen päin:

        https://jsfiddle.net/8awhg2bs/

        Jos CSS-valitseminen ei ole tuttua niin piste tarkoittaa, että elementillä pitää olla tietty luokka ja väli tarkoittaa että nyt mennään lapsi elementtiin.

        Tehtävä:
        Muuta toiminta siten, että aina kun nappia painaa, sininen tausta hyppää seuraavaan diviin ja kiertää taas alkuun, kun kaikki on kierretty (oletetaan, että divejä olisi nyt vaikka ["eka", "toka", "kolmas"] tai voisihan sitä aluksi etsiä kaikki divit, joilla on lapsina div, jolla on luokka "yksi" ja jolla on lapsi div, jolla taas luokka "kaksi").

        Vaikuttaa erinomaisen kätevältä ja helposti sovellettavalta, hyvä. Perehdyn soveltamiseen paremmin.


    Ketjusta on poistettu 1 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Miehille kysymys

      Onko näin, että jos miestä kiinnostaa tarpeeksi niin hän kyllä ottaa vaikka riskin pakeista ja osoittaa sen kiinnostukse
      Tunteet
      136
      3955
    2. Miksi kaivattusi on

      erityinen? ❤️‍🔥
      Ikävä
      87
      1939
    3. Olen tosi outo....

      Päättelen palstajuttujen perusteella mitä mieltä minun kaipauksen kohde minusta on. Joskus kuvittelen tänne selkeitä tap
      Ikävä
      15
      1821
    4. Haluaisin jo

      Myöntää nämä tunteet sinulle face to face. En uskalla vain nolata itseäni enää. Enkä pysty elämäänkin näiden kanssa jos
      Ikävä
      54
      1432
    5. Kotkalainen Demari Riku Pirinen vangittu Saksassa lapsipornosta

      https://www.kymensanomat.fi/paikalliset/8081054 Kotkalainen Demari Riku Pirinen vangittu Saksassa lapsipornon hallussapi
      Kotka
      53
      1420
    6. Ylen uutiset Haapaveden yt:stä.

      Olipas kamalaa luettavaa kaupungin irtisanomisista. Työttömiä lisää 10 tai enempikin( Mieluskylän opettajat). Muuttavat
      Haapavesi
      132
      1348
    7. VENÄJÄ muuttanut tänään ydinasetroktiinia

      Venäjän presidentti Vladimir Putin hyväksyi tiistaina päivitetyn ydinasedoktriinin, kertoo uutistoimisto Reuters. Sen mu
      Maailman menoa
      98
      1292
    8. Nainen olet valoni pimeässä

      valaiset tietäni tietämättäsi ❤️
      Ikävä
      70
      1176
    9. Mitä toivot

      Tulevilta päiviltä?
      Ikävä
      69
      1043
    10. Hommaatko kinkkua jouluksi?

      Itse tein pakastimeen n. 3Kg:n murekkeen sienillä ja juustokuorrutuksella. Voihan se olla, että jonkun pienen, valmiin k
      Sinkut
      114
      1033
    Aihe