Työkalut

Tällä sivulla käydään läpi kurssilla käytettävät työkalut ja niiden asennus. Se, mitä sivun rakenteesta tarkistetaan ja miksi, käsitellään luentomateriaalin työkaluluvussa.

Editori

Hyvä editori Javascriptin kirjoittamiseen on Visual Studio Code. Huom. tämä on eri asia kuin Visual Studio.

Live Server -laajennuksesta on paljon apua: se tarjoilee tiedostot oikean WWW-palvelimen kautta ja päivittää selaimen automaattisesti. Tämä on tärkeää, koska osa asioista — mm. moduulit ja fetch — ei toimi lainkaan, jos avaat sivun suoraan tiedostojärjestelmästä file://-osoitteella.

Visual Studio Code on iso ja raskas ohjelma, eikä sitä tarvita kaikkeen: pieniin kokeiluihin riittää selaimen konsoli. Jos et halua Microsoftin telemetriaa, käytä VSCodiumia, joka on samasta lähdekoodista käännetty versio. Myös Neovim, Emacs, Sublime Text ja Zed sopivat javascript-koodaukseen hyvin. Valitse työkalu, jonka osaat, äläkä opettele uutta editoria samaan aikaan uuden kielen kanssa.

Emmet: rakenne muutamalla merkillä

Emmet on Visual Studio Coden sisäänrakennettu ominaisuus, jota ei tarvitse asentaa erikseen. Kirjoita lyhenne ja paina sarkainta, niin siitä avautuu kokonainen rakenne. Tämä on ylivoimaisesti nopein tapa kirjoittaa HTML:ää käsin.

ul>li*5              →  ul, jonka sisällä viisi li-elementtiä
div.kortti>h2+p      →  div class="kortti", sisällä h2 ja p
tr>td*3              →  taulukon rivi kolmella solulla
ul>li.rivi$*3        →  li-elementit luokilla rivi1, rivi2, rivi3
a[href=#]{Linkki}    →  a-elementti attribuutteineen ja tekstisisältöineen
!                    →  koko HTML5-dokumentin runko

Emmet toimii myös CSS:ssä: m10 laajenee muotoon margin: 10px; ja df muotoon display: flex;.

Yksi asetus kannattaa muuttaa heti. Emmet kirjoittaa oletuksena tyhjät elementit HTML-tyyliin <br>, mikä ei kelpaa XHTML:ssä. Lisää asetuksiin:

"emmet.syntaxProfiles": {
  "html": { "selfClosingStyle": "xhtml" }
}

Tämän jälkeen Emmet tuottaa <br /> ja <img ... />, eli juuri sitä mitä kurssilla tarvitaan. Tarkista silti muotoilutoiminnon jälkeen, ettei kauttaviivoja ole kadonnut.

Pikanäppäimet, jotka kannattaa opetella

Näistä on eniten hyötyä juuri HTML-, CSS- ja javascript-koodin kanssa. macOS:llä Ctrl on useimmiten Cmd.

Kaikki pikanäppäimet näkee ja niitä voi muuttaa valinnalla Ctrl+K Ctrl+S.

Asetuksia, joista on hyötyä tällä kurssilla

Asetukset avautuvat komentopaletista komennolla Preferences: Open User Settings (JSON).

{
  // muotoile tiedosto automaattisesti tallennettaessa
  "editor.formatOnSave": true,

  // kun muutat avaustagia, lopetustagi muuttuu mukana
  "editor.linkedEditing": true,

  // kurssin koodityyli: kaksi välilyöntiä, ei sarkaimia
  "editor.tabSize": 2,
  "editor.insertSpaces": true,

  // siisti lopputulos: ei rivin lopun välilyöntejä, rivinvaihto tiedoston loppuun
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  // Emmet kirjoittaa tyhjät elementit XHTML-muodossa
  "emmet.syntaxProfiles": {
    "html": { "selfClosingStyle": "xhtml" }
  },

  // jos .xhtml-tiedostot eivät saa HTML-väritystä ja täydennystä
  "files.associations": {
    "*.xhtml": "html"
  }
}

editor.linkedEditing on erityisen hyödyllinen XHTML:ssä: kun lopetustagi muuttuu automaattisesti avaustagin mukana, yksi klassinen muotovirheiden lähde katoaa kokonaan.

Muita mainitsemisen arvoisia: File → Auto Save säästää Ctrl+S-painallukset, Alt+Z kytkee rivinvaihdon päälle pitkille riveille, ja sticky scroll pitää funktion tai lohkon otsikon näkyvissä, kun selaat pitkää tiedostoa. Sulkuparien värittäminen ja sulkuparin korostus ovat nykyään mukana vakiona, joten niihin ei tarvita laajennusta.

Hyödyllisiä laajennuksia

Laajennukset asennetaan sivupalkin laatikkokuvakkeesta tai näppäimillä Ctrl+Shift+X. Älä asenna niitä kymmentä kerralla — ota yksi kerrallaan ja katso, onko siitä oikeasti hyötyä.

• ESLint — tärkein. Katso yllä.
• Live Server — tarjoilee tiedostot WWW-palvelimen kautta ja päivittää selaimen automaattisesti. Vaihtoehto on Microsoftin oma Live Preview, jossa esikatselu aukeaa suoraan editorin viereen.
• Error Lens — näyttää virheilmoituksen suoraan sen rivin perässä, jolla virhe on, eikä vain alleviivauksena. Aloittelijalle tämä on yllättävän suuri parannus, koska virhe ei jää huomaamatta.
• axe Accessibility Linter — huomauttaa saavutettavuusongelmista jo kirjoitusvaiheessa: puuttuvat alt-tekstit, otsikkotasojen hypyt, lomakekenttien puuttuvat nimet. Sopii tämän kurssin aiheisiin erinomaisesti.
• IntelliSense for CSS class names in HTML — täydentää luokkien nimet omista tyylitiedostoistasi. Estää tehokkaasti kirjoitusvirheet luokkanimissä, jotka ovat muuten hankalia löytää: mikään ei kerro virheestä, tyyli vain jää tulematta.
• Prettier — muotoilee koodin automaattisesti yhtenäiseen muotoon. Hyödyllinen, jos sisennysten kanssa menee aikaa. Huomaa, että Prettier hoitaa ulkoasun ja ESLint virheet; ne eivät korvaa toisiaan.
• Code Spell Checker — löytää kirjoitusvirheet sekä sivun tekstisisällöstä että muuttujien nimistä. Suomen kielen sanasto asennetaan erillisenä laajennuksena.

Sisäänrakennettuina ovat jo mm. HTML:n ja CSS:n täydennys, CSS:n värivalitsin (klikkaa värikoodin vieressä olevaa neliötä), kuvien esikatselu src-attribuutin päällä, tiedostopolkujen täydennys ja Git-integraatio. Näihin ei siis tarvita laajennuksia.

Koodin tarkistus

ESLint omassa editorissa

Suositus: käytä ESLintiä omassa editorissasi. Se on nykyään käytännössä ainoa aktiivisesti kehitetty JavaScript-linter ja tuntee kielen uusimmat ominaisuudet. Se löytää virheet jo kirjoitusvaiheessa, ennen kuin sivua on edes avattu selaimessa.

Asenna ESLint-laajennus Visual Studio Codeen. Lisäksi projektikansioon tarvitaan konfiguraatiotiedosto eslint.config.js:

import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      globals: { window: "readonly", document: "readonly", console: "readonly" }
    }
  }
];

Varsinainen ESLint asennetaan npm:llä:

npm init -y
npm install --save-dev eslint @eslint/js

Npm tulee Node.js:n mukana. Node.js on ympäristö, jolla voi suorittaa javascriptia muuallakin kuin selaimessa; se ei kuulu tämän kurssin aiheisiin, mutta työkalut asennetaan sillä.

Jos npm:n asentaminen ei onnistu, esimerkiksi yliopiston mikroluokassa, pura projektikansioosi valmis paketti eslint.zip.

JSHint kurssin tehtäväpohjissa

Kurssin viikkotehtäväpohjissa on käytössä JSHint, joka toimii suoraan selaimessa ilman asennuksia ja kirjoittaa huomionsa konsoliin. Se on ollut käytössä pitkään ja on siksi valmiina pohjissa.

JSHint ei kuitenkaan tunne kaikkia uusia kielen ominaisuuksia. Se saattaa siis valittaa koodista, joka on täysin kelvollista ja toimii selaimessa oikein — esimerkiksi uusimmista syntaksirakenteista. Älä säikähdä tällaista varoitusta äläkä ala kirjoittaa koodia vanhanaikaisesti sen takia. Jos epäilet virheilmoituksen aiheellisuutta, tarkista sama koodi ESLintillä: se on ajan tasalla.

Käytännön työnjako on siis tämä: ESLint on työkalusi kirjoittaessa, JSHint on tehtäväpohjan sisäänrakennettu apuri. Kummankin virheilmoitukset kannattaa lukea, mutta ristiriitatilanteessa ESLint on oikeassa.

JSHintin saa myös käyttäjäskriptinä mille tahansa sivulle: jshint.user.js. Käyttäjäskriptien asentamisesta kerrotaan alempana.

//@ts-check

Kirjoita tiedoston alkuun seuraava rivi, jos haluat Visual Studio Coden ajavan TypeScriptin tyyppitarkistuksen ohjelmakoodillesi. Koodisi ei tarvitse olla TypeScriptiä.

//@ts-check

Mahdolliset ongelmat näet Problems-ikkunassa (View | Problems, Ctrl+Shift+M). Tämä löytää yllättävän suuren osan kirjoitusvirheistä ja on ilmainen, koska TypeScript-palvelin tulee VS Coden mukana. Saatat saada myös joitain turhia virheilmoituksia.

Selaimen kehittäjätyökalut

Firefoxin ja Chromen kehittäjätyökalut ovat tärkein työkalusi. Ne avataan F12-näppäimellä tai valikosta Tools → Browser Tools → Web Developer Tools.

• Web Console (Shift+Ctrl+K) — virheilmoitukset ja console.log-tulosteet. Konsoliin voi myös kirjoittaa ja ajaa koodia suoraan.
• Konsolin monirivitila (Ctrl+B tai nuolipainike konsolin oikeassa laidassa) on kokeiluihin paljon kätevämpi kuin yhden rivin kehote: siinä voi kirjoittaa kokonaisen funktion, ajaa sen ja muokata koodia uudelleen ilman että kaikki pitää kirjoittaa alusta.
• Debugger — koodin askellus ja breakpointit. Opettele tämä; se säästää enemmän aikaa kuin mikään muu yksittäinen taito.
• Inspector — sivun elementit ja tyylit. Tästä pääsee myös käsiksi javascriptin tuottamaan rakenteeseen: klikkaa html-elementtiä hiiren oikealla ja valitse Copy → Outer HTML.
• Accessibility Inspector — saavutettavuusongelmat, mm. puuttuvat nimet ja riittämättömät kontrastit.

Huom. Firefoxin Scratchpad poistettiin Firefox 72:sta (2020). Sen tilalla ovat konsolin monirivitila ja kehittäjätyökalujen Snippets-toiminto sekä palvelut kuten JSFiddle ja CodePen.

JSON-datan tutkimiseen kätevä on JSON editor online.

Web Developer -laajennus

Web Developer on Chris Pederickin selainlaajennus, joka lisää selaimeen oman valikon ja työkalupalkin. Se on edelleen ylläpidetty (Firefox-versio 3.0, kesäkuu 2024) ja saatavilla Firefoxille, Chromelle, Edgelle ja Operalle. Laajennuksessa on useita toimintoja, joita selaimen omista kehittäjätyökaluista ei löydy suoraan.

Asennus: Firefox · Chrome

Asennuksen jälkeen selaimen työkalupalkkiin ilmestyy hammasratasikoni, jota klikkaamalla valikko aukeaa.

Tarkista aina oman versiosi valikot. Laajennus on kirjoitettu kahdesti kokonaan uudelleen (versiot 2.0 vuonna 2017 ja 3.0 vuonna 2024), ja uudelleenkirjoitusten yhteydessä osa vanhoista toiminnoista on kadonnut. Verkosta löytyvät ohjeet ovat usein vuosia vanhoja ja kuvaavat toimintoja, joita ei enää ole. Ajantasainen luettelo löytyy laajennuksen omasta versiohistoriasta.

Validointi

Tools-valikosta löytyvät valmiit validaattorit:

• Validate HTML lähettää sivun osoitteen W3C:n validaattorille. Tämä toimii, kun sivu on julkisesti näkyvillä verkossa.
• Validate Local HTML lähettää sivun sisällön validaattorille. Tämä on se, jota tarvitset, kun sivu on omalla koneellasi, kirjautumisen takana tai muuten sellaisessa paikassa, johon validaattori ei pääse käsiksi.
• Validate CSS tekee saman tyylitiedostolle.
• Validate Links tarkistaa, ovatko sivun linkit rikki. Tämä on kätevä ennen harjoitustyön palautusta.
• Valikossa on lisäksi saavutettavuustarkistuksia ja muita ulkoisia validaattoreita.

Uusimmissa versioissa Tools-valikkoon voi lisätä myös omia ulkoisia työkaluja ja antaa niille pikanäppäimet. Näppäinyhdistelmät löytyvät ja niitä voi muuttaa Options-valikosta.

View Source

View Source -toiminto palasi laajennukseen versiossa 3.0. Se näyttää sivun lähdekoodin ja osaa avata sen myös ulkoisessa editorissa.

Huom. Vanhemmissa Firefox-versioissa laajennuksessa oli erillinen View Generated Source, joka näytti javascriptin muokkaaman rakenteen. Se katosi versiossa 2.0 (2017), kun laajennus kirjoitettiin uudelleen Firefoxin uudelle laajennusrajapinnalle, eikä ole palannut. Dynaamisesti tuotetun rakenteen tarkistamiseen käytetään siis selaimen omia kehittäjätyökaluja, katso alla.

Muita hyödyllisiä toimintoja

• Disable → Disable Styles → Disable All Styles näyttää sivun ilman CSS:ää. Jos sisältö on tällöin luettavassa järjestyksessä ja otsikkotasot ovat järkevät, sivun rakenne on todennäköisesti kunnossa. Tämä on nopea saavutettavuustarkistus.
• Disable → Disable JavaScript kertoo, mitä sivusta jää jäljelle ilman skriptejä.
• Outline → Outline Block Level Elements ja Outline Headings piirtävät elementtien rajat näkyviin. Otsikoiden piirtäminen paljastaa heti, jos otsikkotasoissa on hyppyjä tai jos jokin ei ole oikea otsikko vaan lihavoitu kappale.
• Information → Display Element Information kertoo klikatun elementin attribuutit, tyylit ja sijainnin rakenteessa.
• Images → Display Alt Attributes näyttää kuvien alt-tekstit — puuttuvat huomaa heti.
• Forms → Display Form Details näyttää lomakekenttien nimet ja tyypit, mikä auttaa lomakkeita käsittelevän koodin kirjoittamisessa.
• Resize testaa sivua eri näyttöko'oilla.
• Miscellaneous → Clear Cache on hyödyllinen, kun selain sinnikkäästi näyttää vanhaa versiota tiedostostasi.

Sivun rakenteen tarkistaminen

Selain korjaa rikkinäistä HTML:ää automaattisesti, ja jokainen selain korjaa sitä hieman eri tavalla. Siksi rakennevirhettä ei välttämättä itse huomaa lainkaan: sivu näyttää omalla koneella oikealta, kunnes korjauskyky loppuu tai joku avaa sivun toisella selaimella ja rakenne hajoaa.

Firefox XML-tilassa

Yksinkertaisin ja nopein tapa bongata rakennevirheet on nimetä tiedosto .xhtml-päätteellä ja avata se Firefoxilla. Firefox jäsentää tiedoston tällöin oikealla XML-jäsentimellä, joka pysähtyy heti ensimmäiseen muotovirheeseen ja kertoo rivinumeron. Palaute tulee sekunneissa eikä vaadi mitään asennettavaa. Kurssin tehtäväpohjat ovat tästä syystä .xhtml-muotoisia.

Jotta sama tiedosto toimisi myös HTML-dokumenttina, html-elementin avaustagin on oltava seuraavaa muotoa:

<html xmlns="http://www.w3.org/1999/xhtml" lang="fi" xml:lang="fi">

xmlns-attribuutti on pakollinen XML-jäsennystä varten, ja lang- sekä xml:lang-attribuuteissa on oltava sama arvo, jotta kumpikin jäsennin ymmärtää kielen samoin.

XML-tila on tiukka, ja juuri se on sen hyöty. Muista näiden lisäksi:

• Jokainen elementti on suljettava. </li>, </p> ja </td> eivät ole valinnaisia.
• Tyhjät elementit itsesuljetaan: <br />, <img ... />, <meta ... />, <input ... />.
• Ei-tyhjää elementtiä ei koskaan itsesuljeta. <script src="x.js" /> ja <div /> rikkoutuvat HTML-jäsentimessä; kirjoita <script src="x.js"></script>.
• Kaikki attribuuttien arvot lainausmerkeissä, myös numerot: colspan="2".
• XML:ssä ei ole totuusarvoattribuutteja, joten kirjoita checked="checked", selected="selected", disabled="disabled", required="required", defer="defer".
• XML tuntee vain viisi nimettyä entiteettiä: &, <, >, " ja '. Kaikki muut, kuten  , rikkovat sivun. Käytä numeerista viittausta ( ) tai kirjoita merkki suoraan UTF-8-tiedostoon (ä, ©).
• Osoitteissa oleva & on kirjoitettava muodossa &: <a href="haku?a=1&amp;b=2">.

Kun sivu tarjoillaan tyyppinä application/xhtml+xml, myös javascript-koodin on noudatettava tiukempia sääntöjä: document.write ei ole olemassa lainkaan, ja innerHTML hyväksyy vain hyvinmuodostuneen fragmentin. Kumpaakaan ei kannata jäädä kaipaamaan — rakenna DOM-solmut document.createElement- ja textContent-kutsuilla, mikä on muutenkin parempi tapa ja suojaa samalla injektiohaavoilta. Moduuliskriptit vaativat XHTML-tilassa lisäksi async="async"-attribuutin, katso alla.

W3C:n validaattori

W3C:n validaattori (nykyisin Nu Html Checker) tarkistaa hyvinmuodostuneisuuden lisäksi myös sen, ovatko elementit sallituissa paikoissa ja onko pakolliset attribuutit annettu. Firefoxin XML-tila ei näistä välitä, joten työkalut täydentävät toisiaan.

Validaattorille voi antaa osoitteen, ladata tiedoston tai liittää koodin tekstikenttään. Web Developer -laajennuksen Tools-valikko tekee tämän puolestasi.

Dynaamisesti tuotetun sivun tarkistaminen

Kun javascript-koodi muokkaa sivun sisältöä, sivu muuttuu dynaamisesti. Mikään ei estä tuottamasta javascriptillä rikkinäistä html-koodia. Tavallinen validointi ei auta, koska validaattori saa käsiinsä vain palvelimelta ladatun staattisen sisällön. Tällä kurssilla juuri tässä virheet syntyvät.

Kokeile eroa itse:

• toolsrikki.html — rikkinäinen esimerkki HTML-muodossa
• toolsrikki.xhtml — sama tiedosto XHTML-muodossa
• toolsrikki.js — kummankin käyttämä rikkinäinen js-koodi
• tools.html ja tools.js — korjattu versio

Huomaa, että .html-versio näyttää selaimessa siedettävältä, mutta .xhtml-versio paljastaa ongelman heti.

Tapa 1: kopioi nykyinen DOM

Aja ohjelmaasi siihen tilanteeseen, jonka haluat tarkistaa. Avaa sitten kehittäjätyökalujen Inspector, klikkaa html-elementtiä hiiren oikealla ja valitse Copy → Outer HTML. Liitä tulos validaattorin tekstikenttään.

Tämä on hidas mutta ei vaadi mitään asennettavaa, ja se toimii aina. Sama onnistuu myös konsolista:

copy(document.documentElement.outerHTML);   // vie leikepöydälle

copy() on konsolin oma apufunktio, ei osa javascript-kieltä.

Jos käytät Web Developer -laajennusta, kokeile myös sen Validate Local HTML -toimintoa ja tarkista tuloksesta, näkyvätkö javascriptin tekemät muutokset. Varmin tapa on kuitenkin yllä kuvattu kopiointi, koska silloin tiedät varmasti, mitä validaattorille lähetettiin.

Tapa 2: validointi ohjelmasta käsin

Nu Html Checkerilla on rajapinta, jolle voi lähettää dokumentin ja saada virheet takaisin JSON-muodossa. Näin validoinnin voi tehdä juuri sillä hetkellä, kun sivu on halutussa tilassa:

async function validoi() {
  const lahde = "<!DOCTYPE html>\n" + document.documentElement.outerHTML;

  try {
    const vastaus = await fetch("https://validator.w3.org/nu/?out=json", {
      method: "POST",
      headers: { "Content-Type": "text/html; charset=utf-8" },
      body: lahde
    });
    const tulos = await vastaus.json();

    if (tulos.messages.length === 0) {
      console.log("%cValidointi OK", "color: green");
      return;
    }
    console.table(tulos.messages.map(m => ({
      tyyppi: m.type,
      rivi: m.lastLine,
      viesti: m.message
    })));
  }
  catch (virhe) {
    console.error("Validointi ei onnistunut:", virhe.message);
  }
}

Huomioitavaa:

• Validointi on asynkronista. Tulokset ilmestyvät konsoliin vasta kun validaattori ehtii vastata; oma ohjelmasi ei pysähdy odottamaan.
• Älä kutsu tätä silmukassa tai jokaisen näppäinpainalluksen jälkeen. Kyseessä on W3C:n ilmainen julkinen palvelu. Kutsu sitä käsin konsolista tai yhden napin takaa.
• Jos selain estää pyynnön CORS-syistä, käytä tapaa 1 tai kurssin valmista skriptiä.

Tapa 3: kurssin valmiit skriptit

Kurssilla on valmiina kaksi apuskriptiä:

• validator.user.js — validoi sivun W3C:n validaattorilla.
• htmlinspector.user.js — tutkii sivun rakennetta riippumatta siitä, onko se tuotettu staattisesti vai dynaamisesti. Huomaa, ettei htmlinspector ole varsinainen validaattori vaan tarkistaa yleisiä rakenneongelmia.

Skriptin voi liittää suoraan omaan sivuunsa lisäämällä head-osaan rivin:

<script src="https://appro.mit.jyu.fi/tools/validator/validator.user.js"
        defer="defer"></script>

Validoinnin voi tämän jälkeen tehdä kutsulla:

Validate();

Validointi tapahtuu asynkronisesti eli tulokset ilmestyvät konsoliin, kun validaattori ehtii työnsä tehdä ja verkko toimia. Oman ohjelman suoritus ei pysähdy odottamaan validointituloksia.

Validaattorin toimintaa voi kokeilla testisivulla, jonka lähdekoodista näkee myös, miten validointia kutsutaan omasta koodista.

Näitä saa käyttää apuna esimerkiksi viikkotehtävässä 3. Tehtävänannossa kielletään kirjoittamasta javascriptia html-sivun sisään, mutta kielto ei koske valmiissa pohjassa olevaa htmlinspectoria eikä validaattoriskriptiä.

Käyttäjäskriptit

Toinen tapa on asentaa skriptit selaimeen käyttäjäskripteinä, jolloin ne toimivat kaikilla valitsemillasi sivustoilla ilman että omaa koodia tarvitsee muuttaa. Tämä on kätevää esimerkiksi vertaisarvioitavan sivun tarkistamiseen. Käyttäjäskriptien hallintaan tarvitaan selainlaajennus:

• Violentmonkey — avoin lähdekoodi, toimii sekä Firefoxissa että Chromessa. Suositeltavin vaihtoehto.
• Tampermonkey — laajimmin käytetty, toimii kaikissa selaimissa.
• Greasemonkey — alkuperäinen, vain Firefoxille. Toimii edelleen, mutta sitä päivitetään harvakseltaan ja sen GM.*-rajapinta poikkeaa muiden käyttämästä vanhemmasta GM_*-tyylistä, joten kaikki skriptit eivät toimi sellaisenaan.

Älä laita validointiskriptiä toimimaan kaikilla sivustoilla, koska sillä rasittaa W3C:n validaattoria turhaan. Oletuksena skripti validoi users.jyu.fi-palvelimen alla olevat sivut ja kurssilla palautetut viikkotehtävät.

Yhteenveto