Kurs 2: Lär dig språket JavaScript - Texter - Skriva sitt namn

JavaScript.nu / JavaScript-kurs / Variabler, document.write(), alert() och prompt()

LÄR DIG SPRÅKET JAVASCRIPT
Variabler, document.write(), alert() och prompt()

Det vi nu ska lära oss är något oanvändbart i vanligt bruk, men dock viktigt när du ska lära dig JavaScript.

Som du först lärde dig skulle man skriva...

<SCRIPT LANGUAGE="JavaScript">
<!--

JavaScripten

//-->
</SCRIPT>

...För att få JavaScript. Det jag först ska lära ut är att du ska skriva:
document.write("EN VALFRI TEXT");

Alltså ska du skriva document.write("EN VALFRI TEXT") där jag har skrivit JavaScripten.
Alltså ser scriptet ut såhär:

<SCRIPT LANGUAGE="JavaScript">
<!--

document.write("EN VALFRI TEXT");

//-->
</SCRIPT>

Låt oss nu visa hur resultatet blir:
EN VALFRI TEXT

Imponerad? Nja, skulle inte tro det, men faktum är att du senare kan lägga in fler saker där du nu skrivit EN VALFRI TEXT, vilket gör det lite mer avancerat.

En vanlig funktion som används vid JavaScript är när besökaren får skriva in sitt namn och han sedan ser en kommentar som:
Hej besökarens_namn, du har kommit till min hemsida.

Vill du testa? Tryck här (det öppnas ett nytt litet fönster).

Detta JavaScript har jag skrivs såhär:

<SCRIPT LANGUAGE="JavaScript">
<!--

var ett_namn=prompt("Skriv in ditt namn här:","Ulf Svensson");
document.write("Välkommen " + ett_namn + ", är det inte otroligt roligt att titta på detta JavaScript?");

//-->
</SCRIPT>

Vad är nu det här?
var säger till webbläsaren att ett_namn ska få ett värde, värdet är det som skrivs i ett promptfönster (prompt). Var gör alltså en variabel (variabel = matematisk term, något som kan variera), i detta fall variabeln ett_namn.
Det som ska uppmanas i promptfönstret (i detta fall att man ska skriva in sitt namn) skrivs först inom citatet och efter ett kommatecken skriver man 2 till citattecken, där det förutbestämda värdet anges (Ulf Svensson).

Nu har vi gett ett värde till ett_namn. Värdet (i detta fall besökarens namn) anges av besökaren när han skriver in det, om han inte skriver in det genom att trycka på Cancel eller genom att stänga frågefönstret får ett_namn värdet null. Vill du testa så titta på scriptet igen och tryck på cancel så ser du att det kommer att stå:
Välkommen null, är det inte otroligt roligt att titta på detta JavaScript?

Vad händer då på nästa rad?
På den andra (och sista) raden så ser du (precis som du tidigar lärt dig) texten document.write, och därefter inomparantes och inom citat texten som visas. Men där namnet dyker upp står ju " + ett_namn + ", vilket betyder att ett_namns värde ska skrivas ut där, vilket det också görs.

Vad mer kan man göra med JavaScript?
Jo, t.ex. kan man öppna ett välkomstfönster med eller utan besökarens namn, vilket man gör genom att skriva:
alert("EN VALFRI TEXT")

Vill du testa? Tryck här (observera att sidan som dyker upp kommer att vara tom med text).

Detta JavaScript är skrivet på följande sätt:

<SCRIPT LANGUAGE="JavaScript">
<!--

alert("Välkommen till detta JavaScript.");

//-->
</SCRIPT>

Det enda den omfattar är alltså en alert-rad som visar en ruta med endast en OK-knapp och texten som anges.

Vill man blanda in detta script med det förra kan man göra det genom att ha med både raden som anger värdet för ett_namn och raden som visar en ruta med OK-knappen och en text, men denna gång infogar man " + en_text + " i den raden som öppnar en alertruta med texten. När man skriver " + en_text + " bland den andra texten som dyker upp så visas ju en_texts värde i rutan.

Den som vill testa denna kombination är välkommen att trycka här.

OBSERVERA att den enda skillnaden mellan det första scriptet (det som skrev ut namnet på sidan) och detta script är att jag har bytt ut document.write (som skriver ut en text på sidan) mot alert (som öppnar en ruta med text och en OK-knapp).
Liksom förut så blir ett_namns värde null om man stänger det första fönstret eller trycker på Cancel.

Såhär har scriptet skrivits:

<SCRIPT LANGUAGE="JavaScript">
<!--

var ett_namn=prompt("Skriv in ditt namn här:","Ulf Svensson");
alert("Välkommen " + ett_namn + ", är det inte otroligt roligt att titta på detta JavaScript?");

//-->
</SCRIPT>

Glöm inte bort att texten ett_namn kan ändras till vad du vill, t.ex. mot namnet eller text, men då måste BÅDA ett_namn bytas ut mot det nya namnet.

Vidare ska du tänka på att du kan skriva hur många ett_namn som helst, så din alert-rad skulle kunna vara såhär:

alert("Välkommen " + ett_namn + "! Idag är alla som heter " + ett_namn + " hjärtligt välkomna, men även om du inte heter " + ett_namn + " så kan du komma till min sida.");

Nu kan du gå vidare till nästa del av min JavaScriptkurs

LÄR DIG SPRÅKET JAVASCRIPT Variabler, document.write(), alert() och prompt()

LÄR DIG SPRÅKET JAVASCRIPT
Variabler, document.write(), alert() och prompt()