Popup boxe med alert(), confirm() og prompt()
Hvad går det ud på?
Pop up boxe bruges til at interagere med brugeren. Det kan f.eks. være fejlmeddelelser, noget der skal tages stilling til eller hvis der er brug for at indtaste et eller andet. Man arbejder med fire typer:
- Alert box
- Confirm box
- Prompt box
- Modal box
Alert Box
Alert boxe er pop-up-beskeder, hvor man kun kan trykke OK, når man har læst dem. Syntaxen er window.alert(), eller bare alert().
En knap, der ved tryk på denne, giver en besked, ser således ud som kode:
På skærmen kommer det til at se således ud:
Med alert har man stort set ingen muligheder for at formattere teksten. Man kan lave tvungen linjeskift med \n, men det er det hele. Hvis vi tager et eksempel:
som på skærmen ser således ud:
Det at man ikke kan lave noget med billeder på en alert box, har selvfølgelig får nogen til at finde en workaround. Kan man lave tekst, kan man også lave ASCII-billeder, så med lidt fingersnilde og tålmodighed kan man lave sådan noget som denne:
som på skærmen ser således ud:
Bemærk, at for at få teksten til at vise et backslash og en apostrof, i stedet for at behandle det som kode, skal der et backslash foran, dvs. \\ og \'.
En knap, der ved tryk på denne, giver en besked, ser således ud som kode:
<BUTTON TYPE="button" ONCLICK="alert('Hej med dig!')">Klik på mig!</BUTTON>
På skærmen kommer det til at se således ud:
Med alert har man stort set ingen muligheder for at formattere teksten. Man kan lave tvungen linjeskift med \n, men det er det hele. Hvis vi tager et eksempel:
<BUTTON TYPE="button" ONCLICK="alert(' Hej med dig! \n Velkommen til!')">Klik på mig!</BUTTON>
som på skærmen ser således ud:
Det at man ikke kan lave noget med billeder på en alert box, har selvfølgelig får nogen til at finde en workaround. Kan man lave tekst, kan man også lave ASCII-billeder, så med lidt fingersnilde og tålmodighed kan man lave sådan noget som denne:
<BUTTON TYPE="button" ONCLICK="alert(' HEJ! \n\n (\\__/) \n (=\'.\'=) \n(\'\')__(\'\')')">Klik en kat!</BUTTON>
som på skærmen ser således ud:
Bemærk, at for at få teksten til at vise et backslash og en apostrof, i stedet for at behandle det som kode, skal der et backslash foran, dvs. \\ og \'.
Confirm Box
Confirm boxe er, som navnet antyder, popup boxe, hvor man skal bekræfte eller verificere et eller andet. Hvor alert boxen kun havde knappen OK, er confirm knapperne OK og Cancel. Det kunne f.eks. være om du vitterligt ville åbne et givent dokument. Typisk er det ved "OK" gør en ting, ved "Cancel", gør noget andet, hvor det man gør det ene af stederne er ingenting.
Fordi confirm boxen skal kunne gøre flere ting i henhold til et valg, skal vi have gang i en if/else konstruktion. Principielt kan man godt gøre det direkte i ONCLICK, men det er uoverskueligt at arbejde med, så det man gør, er at lave en function, som man kalder. Her lægger vi den ind som et internt script, af hensyn til demonstrationen, men det kan lige så godt være et eksternt script.
Det første vi gør, er at lave knappen der kalder scriptet confirmFunction(). Det ser således ud:
Under dette laver vi scriptet, der ved tryk på OK, dvs. confirm == true, gør den grå baggrund omkring knappen grøn, og ellers sørger for at baggrunden har den grå farve der bruges normalt. Teksten til hvad man skal trykke OK eller Cancel til, skriver man efter confirm. Her skriver vi "Skal baggrunden være grøn?". For at koden fungerer, har den DIV som knappen vises i, fået ID="ColorChanger", for at kunne anvende getElementById() til eksemplet. Så ser konstruktionen således ud:
På skærmen kommer det så til at se således ud:
Ligesom med alert boxen, kan man ikke lave andet end tekst, så skal man lave noget grafisk, skal det være ASCII-billeder.
Fordi confirm boxen skal kunne gøre flere ting i henhold til et valg, skal vi have gang i en if/else konstruktion. Principielt kan man godt gøre det direkte i ONCLICK, men det er uoverskueligt at arbejde med, så det man gør, er at lave en function, som man kalder. Her lægger vi den ind som et internt script, af hensyn til demonstrationen, men det kan lige så godt være et eksternt script.
Det første vi gør, er at lave knappen der kalder scriptet confirmFunction(). Det ser således ud:
<BUTTON TYPE="button" ONCLICK="confirmFunction()">Klik på mig!</BUTTON>
Under dette laver vi scriptet, der ved tryk på OK, dvs. confirm == true, gør den grå baggrund omkring knappen grøn, og ellers sørger for at baggrunden har den grå farve der bruges normalt. Teksten til hvad man skal trykke OK eller Cancel til, skriver man efter confirm. Her skriver vi "Skal baggrunden være grøn?". For at koden fungerer, har den DIV som knappen vises i, fået ID="ColorChanger", for at kunne anvende getElementById() til eksemplet. Så ser konstruktionen således ud:
<BUTTON TYPE="button" ONCLICK="confirmFunction()">Klik på mig!</BUTTON>
<SCRIPT>
function confirmFunction() {
if (confirm("Skal baggrunden være grøn?") == true) {
document.getElementById("ColorChanger").style.backgroundColor = "green";
} else {
document.getElementById("ColorChanger").style.backgroundColor = "#C0C0C0";
}
}
</SCRIPT>
<SCRIPT>
function confirmFunction() {
if (confirm("Skal baggrunden være grøn?") == true) {
document.getElementById("ColorChanger").style.backgroundColor = "green";
} else {
document.getElementById("ColorChanger").style.backgroundColor = "#C0C0C0";
}
}
</SCRIPT>
På skærmen kommer det så til at se således ud:
Ligesom med alert boxen, kan man ikke lave andet end tekst, så skal man lave noget grafisk, skal det være ASCII-billeder.
Prompt Box
En prompt box er en box til input, f.eks. talværdier der skal regnes på, der fungerer som et alternativ til skrivefelter. Syntaxen er windows.prompt() eller blot prompt(), afhængig af hvad man foretrækker. Ligesom confirm(), skal prompt() bruge et script til at gøre noget ved det man skriver.
Til eksemplet, der bliver gennemgået her, skal der også være et felt til at skrive i, men det man skriver, kan lige så godt være en adgangskode eller et opslag i en database, så skrivefeltet er ikke et absolut must.
Det første vi gør, er at lave knappen der kalder scriptet promptFunction(). Det ser således ud:
Vi skal også have feltet til at skrive i. I dette tilfælde bruger vi en DIV med ID="TextString". Koden til skrivefeltet ser således ud:
Ud over teksten der skal stå i boxen med prompt(), indeholder prompt() også muligheden for en default værdi. De to tekststrenge er i anførselstegn og adskilt med komma, dvs. prompt("Teksten til boxen", "Default-værdien i skrivefeltet").
På popup boxen, der kommer frem, er der, ligesom ved confirm(), to knapper: OK og Cancel. Det hedder sig, at ved OK eksekveres JavaScriptet og ved Cancel stoppes scriptet. Dette er ikke korrekt! Når man trykker Cancel, returneres værdien null som ens input, men scriptet fortsætter med at køre. Dette har betydning for scriptets struktur.
Det der skrives i skrivefeltet (input) håndterer man som en variabel, her kaldet Tekst. Så ser koden således ud:
I dette eksempel skelner vi først mellem om der trykkes OK eller Cancel, med if/else-konstruktion der spørger på om variablen Tekst er forskellig fra null. Hvis der er trykket OK, skelnes der mellem om feltet er tomt eller ej. Er der tekst, indsættes denne i en tekststreng, mens et tomt felt giver en besked om at der ikke var skrevet noget i feltet. Hvis der klikkes på Cancel, skriver du en tom streng, "", da scriptet er nødt til at reagere på klikket, for eller får du en fejlmeddelelse. Så ser det således ud:
På skærmen kommer det til at se således ud:
Til eksemplet, der bliver gennemgået her, skal der også være et felt til at skrive i, men det man skriver, kan lige så godt være en adgangskode eller et opslag i en database, så skrivefeltet er ikke et absolut must.
Det første vi gør, er at lave knappen der kalder scriptet promptFunction(). Det ser således ud:
<BUTTON TYPE="button" ONCLICK="promptFunction()">Klik på mig!</BUTTON>
Vi skal også have feltet til at skrive i. I dette tilfælde bruger vi en DIV med ID="TextString". Koden til skrivefeltet ser således ud:
<DIV ID="TextString"> </DIV>
Ud over teksten der skal stå i boxen med prompt(), indeholder prompt() også muligheden for en default værdi. De to tekststrenge er i anførselstegn og adskilt med komma, dvs. prompt("Teksten til boxen", "Default-værdien i skrivefeltet").
På popup boxen, der kommer frem, er der, ligesom ved confirm(), to knapper: OK og Cancel. Det hedder sig, at ved OK eksekveres JavaScriptet og ved Cancel stoppes scriptet. Dette er ikke korrekt! Når man trykker Cancel, returneres værdien null som ens input, men scriptet fortsætter med at køre. Dette har betydning for scriptets struktur.
Det der skrives i skrivefeltet (input) håndterer man som en variabel, her kaldet Tekst. Så ser koden således ud:
<BUTTON TYPE="button" ONCLICK="promptFunction()">Klik på mig!</BUTTON>
<SCRIPT>
function promptFunction() {
var Tekst = prompt("Skriv tekst her:", "");
}
</SCRIPT>
<DIV ID="TextString"> </DIV>
<SCRIPT>
function promptFunction() {
var Tekst = prompt("Skriv tekst her:", "");
}
</SCRIPT>
<DIV ID="TextString"> </DIV>
I dette eksempel skelner vi først mellem om der trykkes OK eller Cancel, med if/else-konstruktion der spørger på om variablen Tekst er forskellig fra null. Hvis der er trykket OK, skelnes der mellem om feltet er tomt eller ej. Er der tekst, indsættes denne i en tekststreng, mens et tomt felt giver en besked om at der ikke var skrevet noget i feltet. Hvis der klikkes på Cancel, skriver du en tom streng, "", da scriptet er nødt til at reagere på klikket, for eller får du en fejlmeddelelse. Så ser det således ud:
<BUTTON TYPE="button" ONCLICK="promptFunction()">Klik på mig!</BUTTON>
<SCRIPT>
function promptFunction() {
var Tekst = prompt("Skriv tekst her:", "");
if (Tekst != null) {
if (Tekst != "") {
document.getElementById("TextString").innerHTML = "Du skrev " + Tekst + " i feltet!";
} else {
document.getElementById("TextString").innerHTML = "Du skrev ikke noget i feltet!";
}}
else {
document.getElementById("TextString").innerHTML = "";
}
}
</SCRIPT>
<DIV ID="TextString"> </DIV>
<SCRIPT>
function promptFunction() {
var Tekst = prompt("Skriv tekst her:", "");
if (Tekst != null) {
if (Tekst != "") {
document.getElementById("TextString").innerHTML = "Du skrev " + Tekst + " i feltet!";
} else {
document.getElementById("TextString").innerHTML = "Du skrev ikke noget i feltet!";
}}
else {
document.getElementById("TextString").innerHTML = "";
}
}
</SCRIPT>
<DIV ID="TextString"> </DIV>
På skærmen kommer det til at se således ud: