Palindrom – wyraz, liczba, zdanie a nawet wiersz, który ma to samo znaczenie niezależnie od tego, czy czytamy go normalnie, czy od tyłu (czyli wspak).
Chciałbym Wam zaprezentować prosty skrypcik sprawdzający, czy dany wyraz jest palindromem. Skrypt adresowany stricte do początkujących userów. Nie można przecież od razu chwytać się za rozbudowane aplikacje webowe. Jasne, że taki skrypt nigdzie się nie przyda, ale moim zdaniem dobrze jest poćwiczyć na tego typu przykładach. Na pewno się przyda chociażby na lekcje informatyki.
Poniżej skrypt w JS oraz kod HTML. Wszystko opatrzone w dokładne komentarze (chyba aż nadto szczegółowe).
UWAGA!
Z sekcji BODY należy usunąć moje komentarze. Dla wygody i czytelności posłużyłem się javascriptowskim komentowaniem, które różni się od tego w HTMLu.
Listing
/* ------------ Sekcja BODY ------------ */
<p>Wpisz dowolny wyraz i wciśnij "Sprawdź".</p>
<form method="get"> // (1)
<p><input type="text" id="wyraz" style="width:200px;"/></p> // (2)
<p> <input type="text" id="wynik" readonly="readonly" style="border:0; background-color:white; font-family: verdana; font-weight: bold; width:300px;"/></p> //(3)
<p><input class="button" type="button" value="Sprawdź" onclick="palindrom()"/> // (4)
<input class="button" type="reset" value="Reset" /></p> // (5)
</form>
(1) - tworzymy prosty formularz, który będzie pobierał dane
(2) - pole tekstowe do którego user wpisze wyraz
(3) - pole tekstowe wyświetlające wynik sprawdzenia; dodałem kilka stylów, aby pole to nie wyglądało "jak pole"
(4) - przycisk wywołujący funkcję
(5) - przycisk czyszczący
/* ------------ Sekcja HEAD ------------ */
function palindrom(){
var wyraz=document.getElementById("wyraz").value; // (1)
wyraz=wyraz.toUpperCase(); // (2)
var sprawdz=true; // (3)
var dlugosc=wyraz.length; // (4)
if (dlugosc==0) // (5)
document.getElementById("wynik").value="Nic nie wpisałeś!"; // (6)
else {
for (var i=0; i<dlugosc; i++ ) // (7)
{
if (wyraz.charAt(i)!=wyraz.charAt(dlugosc-i-1)) // (8)
sprawdz=false;
}
if (sprawdz==true) // (9)
document.getElementById("wynik").value="Podany wyraz JEST palindromem."; // (6)
else
document.getElementById("wynik").value="Podany wyraz NIE JEST palindromem."; // (6)
}
}
(1) - tworzymy zmienną 'wyraz', której zostaje przypisana wartość naszego pola tekstowego; wartość, czyli wpisany wyraz
(2) - aby zlikwidować kolizję małych i wielkich liter, zamieniamy wszystkie na wielkie
(3) - zmienna pomocnicza 'sprawdz'
(4) - zmienna 'dlugosc', przechowująca liczbę znaków w wyrazie
(5) - chyba jasne
(6) - wyświetlenie danego tekstu w miejscu pola tekstowego 'wynik'
(7) - pętla porównująca pierwszą i ostanią literę wyrazu (liczymy od 0)
(8) - jeśli 0-owa i ostatnia litera się różnią, zmienna 'sprawdz' przyjmuje wartość false jeśli zaś są takie same, zmienna 'sprawdz' dalej pozostaje true
(9) - po zakończeniu pętly for, sprawdzamy jaką wartość posiada zmienna 'sprawdz'