Forum PHP.pl > [JavaScript]Ocena kodu

Pomoc - Szukaj - Użytkownicy - Kalendarz

CconradD

23.02.2009, 18:06:33

Witam

Ponieważ zacząłem się uczyć JavaScript, chciałbym poddać mój kod pod ocenę (wydaje mi się że jest to najlepsza forma nauki). Chodzi mi o błędne zapisy (nawet o ocenę i praktyczne wskazówki jak prowadzić zapis, żeby był czytelny), może jakieś błędy w składni itp.

[XML] pobierz, plaintext 
<head>
<title>Get Description Script 01 (GDS01)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
 
<style>
div#alert { width:350px; border-color: #999999; border-style: solid; border-width: 1px} 
</style>
 
<script>
function search()
{
      var result = document.getElementById("result");
      var search = document.getElementById("search");
      var string = search.value.toLowerCase();
      var alert = document.getElementById("alert");
      var line = "Hello world!";
 
      line = line.toLowerCase();
      if (string.length>2) {
            if (line.indexOf(string) != -1) {
                  alert.innerHTML = "Fraze: <b>" + search.value + "</b> - znaleziono. Nr kolumny: " + line.indexOf(string);
                  alert.style.background = '#FFFFFF';
                  result.innerHTML = line.indexOf(string) + "<br />";
            }
            else {
                  alert.innerHTML = "Fraze: <b>" + search.value + "</b> - nie znaleziona";
                  alert.style.background = '#FF4500';
            }
      }
      else {
            alert.innerHTML = "Szukany wyraz musi zawierac minimum 3 znaki";
            alert.style.background = '#FFFFCC';
      }
}
 
</script>
</head>
 
<body>
 
<p><input type="text" id="search" onKeyup="search();">
<p><div id="alert">Wpisz slowo</div>
<p><div id="result"></div>
</body>
</html>
[XML] pobierz, plaintext

Rafal Filipek

23.02.2009, 18:24:39

Ok ,więc tak generalnie całość jest ok. Ale jak to przeważnie bywa w JS można zapisać to krócej

no wiec tak. Moje zmiany to. Troche oszczędniejsze zdefiniowanie zmiennych. Skasowanie niepotrzebnych zmiennych. Przerobiłem też if'y. Na początku masz if który jeżeli nie jest sprawdzony automatycznie zakańcza funkcję. Poźniej to już bardziej kosmetyka. Zmieniłem też sposób wywołania funkcji. Zamiast przypisywać ją do inputa z poziomu atrybutu, wstawiam ją po załadowaniu się dokumentu.
Moja propozycja.

Kod

<head>
<title>Get Description Script 01 (GDS01)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style>
div#alert { width:350px; border-color: #999999; border-style: solid; border-width: 1px}
</style>

<script>
function search(){
    var result = document.getElementById("result"),
        string = document.getElementById("search").value,
        alert = document.getElementById("alert"),
        line = "Hello world!".toLowerCase(),
        index;
    if(string.length<3){
        alert.innerHTML = "Szukany wyraz musi zawierac minimum 3 znaki";
        alert.style.backgroundColor = '#FFFFCC';
        return;
    }
    if(index = line.indexOf(string.toLowerCase()) != -1){
        alert.innerHTML = "Fraze: <b>" + string + "</b> - znaleziono. Nr kolumny: " + index;
        alert.style.backgroundColor = '#FFFFFF';
        result.innerHTML = index + "<br />";
    }else{
        alert.innerHTML = "Fraze: <b>" + string + "</b> - nie znaleziona";
        alert.style.backgroundColor = '#FF4500';
    }
}
window.onload = function(){
    document.getElementById('search').onkeyup = function(){ search() };
}
</script>
</head>

<body>

<p><input type="text" id="search">
<p><div id="alert">Wpisz slowo</div>
<p><div id="result"></div>
</body>
</html>

CconradD

23.02.2009, 18:58:23

Super, dzięki

W takim zapisie jest tylko jeden problem, bo zmienną index traktuje jako wynik sprawdzania czy jest różny, nie jako cyfrę. Ale to wiem jak poprawić

[HTML] pobierz, plaintext 
if((index = line.indexOf(string.toLowerCase())) != -1){
[HTML] pobierz, plaintext

I jeszcze jedno pytanie, czy da się jakoś "zerować" to co jest wysyłane do diva "result", ponieważ zapamiętuje on numer znalezionego słowa, pomimo jego zmiany.
Wpadłem na takie coś, dodawane do 2 pozostałych pętel (ale pewnie jest jakieś łatwiejsze rozwiązanie):

[HTML] pobierz, plaintext 
result.innerHTML = null;
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.