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
Selaimet ja kehitystyökalut
3
421
Vastaukset
- 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
Minkähän takia ns. persuille ei tunnu työ maistuvan?
Vaikuttavat olevan joutoväkeä syystä tai toisesta – työttömiä tai työeläkeloisia. Muiden rahoilla pötköttelevää väkeä,824416Olit ihan
Kiihkona silloin. Sen näki ja lähes tunsi. Ei tainnut olla kaukana et olisit vetänyt lähellesi jos siihen olisi hetki tu243008Miksiköhän vasemmistossa on niin paljon ns. tapatyöttömiä ja muita köyhiä?
Tokihan Minja Koskela oli sitä mieltä, että ei terveenkään ihmisen ole pakko tehdä töitä, sitä neuvoa moni vassu noudatt272829Trump huonommassa kunnossa kuin Usasta virallisesti sanotaan?
"Terveys on vakaa mutta ei normaali".Uskallan melkein sanoa,että Trumpin terveydentilaa kaunistellaan.Myös se että se nu1162585Kyllä on Vasemmistoliitosta Koskelan johdolla tullut todellinen ääripuolue
se on niin tulipunainen kuin olla voi, ja selvästi haluaa jatkuvasti eripuraa, ja repiä kansaa kahtia. Siinä on jo vuod172499Suomen veroaste 5 %-yks liian matala
Palauttamalla kokonaisveroaste 1990-luvun tasolle saadaan hyvinvointivaltion palvelut rahoitettua ilman velan ottoa.1122238Kolme neljästä suomalaisesta kannattaa miljonääriveroa
Kertoo vasemmistoliiton teettämä kysely. Veron ulkopuolelle jätettäisiin asunto. "Puolet vastaajista oli sitä mieltä, e1012190Evoluutioon ja alkuräjähdykseen uskominen vaatii todella vahvaa uskoa
Että tyhjästä syntyi ja kehittyi kaikki se mitä näemme ympärillämme.6382068Oletko keskustellut kaivatustasi muiden
Kanssa lähiaikoina? Jos, onko keskustelu ollut positiivista tai negatiivista? Vaikuttaako keskustelut mielipiteeseesi ka342068MTV: Harvinainen haastattelu! Vappu Pimiä kommentoi vihdoinkin uutta TTK-juontajaa
TTK-juontajaspekuloinnit käyvät edelleen kuumana. Kenet sinä haluaisit uudeksi TTK-juontajaksi? Kommentoi alle! Lue,141995