Selaimet ja kehitystyökalut

Turbo-Urpo1

Johdatus JavaScriptiin selainten omilla työkaluilla.

JavaScript on suosituin skriptikieli Internetissä. Se on saatavana HTML: lle ja verkolle, ja sitä käytetään laajalti palvelimilla, tietokoneilla, kannettavissa tietokoneissa, tablet-laitteissa ja älypuhelimissa.

JavaScript on kevyt komentosarjakieli, joka voidaan lisätä suoraan HTML-sivulle. Kun JavaScript lisätään HTML-sivulle, kaikki nykyaikaiset selaimet osaavat suorittaa sen, ja mikä parasta JavaScript on helppo oppia.

Jokainen selain sisältää kehitystyökalut, joilla voit kirjoittaa, käyttää ja tarkastella koodin tuloksia, jotka toimivat vuorovaikutuksessa verkkosivun kanssa.

No niin aloitetaan.

1. Avaa selain ja kirjoita osoiteriville ( about:blank ) , näin saadaan täysin tyhjä verkkosivu auki.
2. Paina F12, näin avaat kehitystyökalut näkyville.
3. Valitse Console -välilehti.
4. Kopioi tai kirjoita konsoliin alla oleva esimerkki

// JavaScriptin alkeita osa 1
// Avaa about:blank sivu
// Tulostetaan jo ladattuun sivuun sisältöä
// Kirjoita seuraavat 2 riviä.
// Käytä sitovaa rivinvaihtoa. (Shift Enter)

document.write ( "<h1 id='x'> Tämä on otsikko </h1>");
document.write ( "<p> Tämä on kappale. </p>");

// Suorita koodi kovalla rivinvaihdolla (Enter)

Voit varmistaa tästä kuvasta, että kaikki meni niin kuin piti.
https://s33.postimg.cc/l9s5esmul/about_blank_-_Chromium_057.png?dl=1

3

440

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Turbo-Urpo1

      Edellisessä lisättiin sisältöä tyhjälle sivulle, se olisi voitu tehdä mille tahaansa sivulle. Nyt sitten muutetaan sitä lisättyä sisältöä. Huomasti varmaan että <h1> elementti oli yksilöity id -tunnuksella, ja juuri tuota me tarvitaan tässä seuraavassa esimerkissä. Kopioi tai kirjoita alla oleva konsoliin:

      // Edellä lisättiin sisältöä, nyt muutetaan sitä

      x = document.getElementById ("x") // Etsi elementti
      x.innerHTML = "JavaScript esimerkki"; // Muuta sisältöä

      // Suorita koodi kovalla rivinvaihdolla (Enter)

      Tästä kuvasta voit varmistaa että meni oikein:
      https://s33.postimg.cc/ao8a2mgh9/about_blank_-_Chromium_058.png?dl=1

      Nämä kuvat on tarpeen koska en tiedä miten tämä sivusto käsittelee kun mukana on kahdenlaisia hipsuja, itse asiassa JavaScripti koodissa joudutaan käyttämään kolmea eri hipsu -merkintää.
      ( 'x' ) ( "x") ja (`x`). Jos vielä kehtaan laittaa painike esimerkin niin siinä nämä kolme ovat mukana.

      -

      FireFox-selaimen kehitystyökalu Scratchpad

      Scratchpad tarjoaa mahdollisuuden kokeilla JavaScript-koodia. Voit kirjoittaa, käyttää ja tarkastella koodin tuloksia, jotka toimivat vuorovaikutuksessa verkkosivun kanssa.

      Toisin kuin Web-konsoli , joka on suunniteltu tulkitsemaan yhtä koodi-riviä kerrallaan, Scratchpadin avulla voit muokata suurempia JavaScript-koodilohkoja ja suorittaa sen sitten eri tavoin riippuen siitä, miten haluat käyttää tulosta.

      Scratchpadin avaaminen omassa ikkunassaan:

      Scratchpadin voi avata omassa ikkunassaan useilla eri tavoilla:
      • Voit avata sen painamalla Shift F4, tämä saattaa olla helpoin tapa.

      • Voit avata sen myös valikkopalkista Työkalut --> Web kehitystyökalut (englannin kielisiä) --> Scratchpad.

      • Voit avata sen napsautamalla työkalurivillä hampurilaisen-kuvaketta otsikkorivin oikeassalaidassa, ja sitten Web kehitystyökalut (englannin kielisiä) --> Scratchpad.

    • Turbo-Urpo1

      Kehitystyökalut eivät ole vain nörtin apuna, ne auttavat myös tavanpulliaista löytämään suoratoisto osoitteet, yle on hyvin helppo, mutta näiden kanavien kanssa menee jo varmasti aikaa, ja vaikka löytäisitkin, ei nämä toistu KODI:ssa: http://web.canlitvlive.io/kanallar/genel-kanallar.html

    • Turbo-Urpo1

      Lisää DHTML sisältöä, kopioi tai kirjoita alla oleva konsoliin, ja suorita painamalla Enter.

      // Onclick-tapahtuma on vain yksi monista tapahtumista
      // joiden käsitteleminen onnistuu JavaScriptin avulla

      document.write ("<h1> Onclick-tapahtuma </ h1>");
      document.write (`<button type = "button" onclick = "alert ('JavaScript, reagoi tapahtumiin')"> Napsauta minua! </ button>`);

      // Huom: Nuoli-näppäimillä (ylös/alas), voit selata suoritettuja
      // komentoja, ja suorittaa saman muokattuna uudestaan.

      // Näin tuotettu HTML-dokumentin sisältö on
      // Dynaamisen HTML:n (DHTML) sisällön tuottamista.

      Tässä kuva, malliksi:
      https://s33.postimg.cc/petv9dirh/about_blank_-_Chromium_060.png?dl=1

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

    Luetuimmat keskustelut

    1. Me työeläkeläiset äänestämme SDP:tä

      SDP on luonut koko työeläkejärjestelmän, jonka hedelmistä saamme nyt nauttia. Kansaneläkelaitos on Maalaisliiton tekele,
      Maailman menoa
      172
      5007
    2. Eikö tunnukin kamalalta, kun en

      anna periksi vaikka parhaasi olet tehnyt antaaksesi täystyrmäyksen? Ja kyllähän minä monta iskua olen saanut ja maannut
      Ikävä
      81
      3626
    3. SDP on selvästi paras valinta äänestyskopissa

      Puolueella on arvomaailma kohdallaan, sillä on hyvä CV itsenäisen Suomen historiassa vastuunkantajana ja hyvinvointivalt
      Maailman menoa
      40
      2628
    4. SDP:n selitykset ontuu pahasti - "On käsitelty heti, mutta kukaan ei tiedä"

      Kokoomuslaiset pistää taas demareita nippuun. Tuppuraisen mukaan mukaan SDP:n useat ahdistelutapaukset on käsitelty het
      Maailman menoa
      40
      2278
    5. Kenen juontajan pitäisi voittaa tänään Kultainen Venla? Ehdolla Pimiä, Holma ja Vaaherkumpu

      Kultainen Venla gaalassa jaetaan tänään tv-alan palkintoja. Yksi suosituimmista kategorioista on Juontaja. Vappu Pimiä
      Suomalaiset julkkikset
      99
      2188
    6. Oletko nainen turhautunut, kun en tule juttelemaan siellä?

      Haluaisin tottakai tulla. Älä käsitä väärin. Ehkä ensi kerralla?
      Ikävä
      29
      2077
    7. Antti Lindtman: "Ainahan kaikenlaisia huhuja liikkuu"

      Näin hän siis vastaa SDP:n häirintäkohuun, väistelee vastuutaan Juttuhan on niin, että Lindtman ja Tuppurainen on tasan
      Maailman menoa
      72
      2071
    8. Mitä saa sanoa?

      Palstalla tänään sanottua: ” Kaikki riippuu siitä, miten asian esittää,” Onko siis niin, että saa muita pomottaa ja
      80 plus
      87
      2013
    9. Onko olemassa miehiä, jotka haluavat yhteydenpitoa?

      Silloin tällöin viestiä, puntarointeja arkielämästä, ikäänkuin pientä viihdettä ilman sen kummallisempaa. Tällaista miet
      Sinkut
      21
      1536
    10. Mitä Trump itse pitäisi siitä, jos häntä solvattaisiin

      Kuten hän solvasi muita mm. Macronia? Kyllä ei huumori enää kukkisi. White house on nykyään pelkkä vitsi vain, ei mitään
      Maailman menoa
      113
      1443
    Aihe