Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

Scripletinteko-opas ja -generaattori

Sisällysluettelo

Scripletin teko-opas

Käsittelemme tässä scripletin tekoa vaihe vaiheelta. Teemme prosenttilaskuriscripletin, koska usein joudun laskemaan eri prosenttimääriä eri summista ja tahdon välttää erillisen laskinohjelman avaamista tai prosenttilaskin-sivulle siirtymistä. Joten tarkoituksena on tehdä koodi, joka laskee käyttäjän syöttämästä summasta (esim. 100) käyttäjän syöttämän prosenttimäärän (esim. 15) ja antaa tuloksen (tässä tapauksessa 15). Tarvitsemamme kaava on yksinkertainen:

prosentti × summa ÷ 100 = tulos

Kaavasta saammekin tarvitsemamme kolme luonnollista muuttujaa (prosentti, summa, tulos), mutta lisäämme vielä yhden merkkijonomuuttujaan, koska käytämme samaa tekstiä kahdessa eri kohdassa koodia.

Prosenttilaskimen JavaScript-koodi

/*
 * Tunnus:		JavaScript-prosenttilaskin
 * Tekijä:		Osmo Saarikumpu
 * Tehty:		2003-10-01
 * Tekijänoikeudet:	Vapaasti käytettävissä
 */

// Ilmoitetaan tarvittavat muuttujat:

var summa; //summa josta prosenttiluku lasketaan
var pros;  //summasta laskettava prosenttimäärä
var tulos; //laskutoimituksen tulos
var vihje; //koodissa esiintyvä merkkijono

// Sijoitetaan vihjeteksti muuttujaan:

vihje='Käytä pistettä desimaalierottimena.';

// Käytetään JavaScriptin window-olion prompt-metodia
// pyytämään käyttäjältä summa,
// näyttämään vihjeteksti
// ja sijoitetaan summa muuttujaan:

summa=prompt('Syötä summa josta tahdot laskea prosentit:',vihje);

// Käytetään JavaScriptin window-olion prompt-metodia
// pyytämään käyttäjältä prosenttimäärä,
// näytetään vihjeteksti
// ja sijoitetaan prosenttimäärä muuttujaan:

pros=prompt('Syötä haluttu prosenttimäärä:',vihje);

// Suoritetaan tarvittava laskukaava
// ja sijoitetaan tulos muuttujaan:

tulos=pros*summa/100;

// Lopuksi tulostetaan tulos-muuttujan arvo prompt-metodilla,
// josta se on helppo siirtää leikepöydälle.

prompt('Tulos on:',tulos);

/* Prosenttilaskin koodin loppu. */

JavaScript-koodin muunto scriplettikelpoiseksi

Koodistamme on helppo saada scriplettikelpoista, koska noudatimme yleisiä suositeltavia käytäntöjä, kuten lauseiden päättäminen puolipisteillä ja merkkijonojen lainaaminen (yksipilkkuisilla) heittomerkeillä. Periaatteessa ei tarvitse muuta kuin riisua kommentit ja poistaa turha tyhjä tila, kuten välilyönnit ja rivinvaihdot, mutta tiiviyden vuoksi poistamme myös muuttujien ilmoitukset, jolloin koodimme näyttää seuraavanlaiselta:

vihje='Käytä pistettä desimaalierottimena.';
summa=prompt('Syötä summa josta tahdot laskea prosentit:',vihje);
pros=prompt('Syötä haluttu prosenttimäärä:',vihje);
tulos=pros*summa/100;
prompt('Tulos on:',tulos)

Huom. Olen lisännyt yo. koodiin rivinvaihdot puolipisteiden jälkeen luettavuuden vuoksi. Todellisuudessa kaikki kuuluu yhteen pötköön!

Scripletin luominen

Scriplettikelpoista koodista saadaan scripletti sijoittamalla koodi aivan tavalliseen linkkiin, eli A-elementin HREF-attribuutin arvoksi, ja tekemällä selaimeen tästä linkistä kirjamerkki tai suosikki. Parasta kuitenkin on tuottaa linkki scriplettigeneraattorilla, koska se lisää siihen turvallisuutta piilottamalla muuttujat muilta scripteiltä. Generoidun linkin syntaksi on seuraava:

<a
 href="javascript:(function () {/*koodi*/})()">scripletti</a>

Joten scripletti voidaan luoda kopioimalla scriplettikelpoinen koodi yo. kommentin tilalle ja muuttamalla linkkiteksti kuvaavammaksi, tai välittämällä koodi ja teksti ao. generaattorille, vaikkapa seuraavaa nappia painamalla:

Scriplettigeneraattori

Tällä JS-sovelmalla voit nopeasti testata ja muokata scripletti-ideoitasi.

Kirjoita koodisi tekstilaatikkoon:

Esimerkki valmiina:

Nimeä scripletti: ja

yksi taso ylös