Loading:

Postanowienia noworoczne - a Ty czego nauczysz się w nowym roku? [-25%]

Palindrom w JavaScript - dla zielonych

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.



Napisz Artykuł

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'

 


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=5229

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: rufus Ranga: Poziom 3 Punktów: 50
Komentarze użytkowników
    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors