JavaScript

JavaScript jest językiem skryptowym przeznaczonym głównie dla dokumentów internetowych. Skrypty napisane za pomocą JavaScript mogą być umieszczane bezpośrednio na stronach HTML (podobnie jak VBScript).

Funkcje JavaScript najlepiej jest deklarować w ramach znacznika <head> dokumentu HTML. Są one wtedy ładowane zanim jeszcze czytelnik strony będzie mógł wykonać coś, co jest związane z funkcją. Skrypty powinny być umieszczone w ramach komentarzy, aby sama definicja skryptu nie była wyświetlana w przeglądarkach, które nie interpretują JavaScript (trudno o takie).

Przykład prostego formularza:

<html>
    <head>
        <script language="JavaScript">
        <!--
              function pobierzImie(str)

            {
                alert("Witaj "+ str+"!");
            }
        -->
        </script>
    </head>
    <body>
        Wpisz swoje imię:
        <form>
              <input type="text" name="name" onBlur="pobierzImie(this.value)" value="">
        </form>
    </body>
</html>
 Data i czas

W naszym skrypcie zaimplementujemy funkcję daty. Możemy spowodować, aby przeglądarka czytelnika wyświetliła datę ostatniej aktualizacji dokumentu. Jest to czasem bardzo pożądana funkcja. Nie musimy wpisywać daty w dokumencie ręcznie.

<html>
  <body>
Ostatnia modyfikacja:
  <script language="JavaScript">
  <!--  
    document.write(document.lastModified)
  // -->
  </script>
</body>
</html>

Teraz inny przykład użycia metod 'time' i 'date'. Wprowadzimy lokalny czas do naszego dokumentu. Metoda ta wykorzystuje czas i datę naszego komputera.

Kod skryptu:

<script language="JavaScript">
<!-- 
  today = new Date()
document.write(" Czas bieżšcy: ",today.getHours(),":",today.getMinutes())
document.write(" Dzisiejsza data: ",today.getDay(),".",today.getMonth()+1,".",today.getYear())
-->
</script>


Najpierw tworzymy zmienną dla daty.
Robimy to deklarując today=new Date(). Jeśli nie określimy wyraźnie czasu i daty przeglądarka wykorzysta czas systemowy i przypisze zmiennej today odpowiednią wartość. Utworzyliśmy, więc obiekt 'time', który zawiera lokalny czas i datę. Teraz możemy wprowadzić jego wartość do dokumentu. Metoda getMonth() zwraca liczbę z zakresu od 0 do 11 (0 oznacza styczeń a 11 - grudzień). Musimy, więc dodać do tej liczby 1, aby otrzymać właściwy numer miesiąca.

 

Tworzenie okien

Za pomocą skryptów możemy tworzyć nowe okna. Odczytywać dokumenty HTML. Spróbujemy otworzyć nowe okno i coś w nim zapisać.

<html>
  <head>
    <script language="JavaScript">
      function WinOpen() 
      {
        msg=open("","Okno","toolbar=no,directories=no,menubar=no");
        msg.document.write("<HEAD><TITLE>Moje okno</TITLE></HEAD>");
        msg.document.write("<CENTER><h1><B>Moje nowe okno!</B></h1></CENTER>");
      }
    </script>
  </head>
  <body>
    <form>
      <input type="button" name="Button1" value="Otwórz okno" onclick="WinOpen()">
    </form>
  </body>
</html>

Funkcja WinOpen() tworzy nowe okno za pomocą metody 'open'. Pierwsza para cudzysłowów zawiera URL tej strony. Można tam umieścić adres dokumentu HTML, który chcemy odczytać. Jeśli nic nie podamy, to przeglądarka nie załaduje żadnej gotowej strony, ale będziemy mogli sami pisać na tej stronie za pomocą JavaScript.
Druga para cudzysłowów zawiera nazwę okna.
Następna para cudzysłowów zawiera właściwości okna. Możemy tu określić, czy chcemy mieć listwę z narzędziami (toolbar), suwaki (scrollbars) itd.
Jeśli napiszemy toolbar=yes to będziemy mieli toolbar w swoim oknie.

Przykłady kilku różnych właściwości:

toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=piksele
height=piksele
 

W miejscu piksele  podajemy liczbę pikseli. W ten sposób możemy przekazać przeglądarce, jaka powinna być wielkość okna.
W otwartym oknie możemy pisać wykorzystując znaczniki HTML. 

 

Informacje w linii stanu (statusu)

Umieścimy tekst w linii stanu (wiersz u dołu ekranu przeglądarki, gdzie zwykle pokazywane są URL-e).

<html>
  <head>
    <script language="JavaScript">
    <!-- 
      function wstaw(txt) 
      {
        window.status = txt;
        setTimeout("usun()",2000);
      }
        function usun() 
        {
          window.status="";
      }
        // -->
    </script>
  </head>
  <body>
    <a href="" onMouseOver="wstaw('Opis odsyłacza - wyœwietlany 2 sekundy!');return true;">Odsyłacz</a>
  </body>
</html>

 Wykorzystujemy tu właściwość onMouseOver, której przypisujemy funkcję wstaw z argumentem będącym treścią tekstu pojawiającego się przez określony czas na pasku stanu. Funkcję wstaw zdefiniowaliśmy w naszym skrypcie. Zawiera ona przypisanie tekstu do właściwości status obiektu window i wywołanie funkcji setTimeout. Funkcji setTimeout przekazujemy dwa argumenty: nazwę naszej funkcji usun i czas wyrażony w milisekundach, po którym zostanie uruchomiona funkcja przekazana jako pierwszy parametr.

Przewijany napis

Na koniec napiszemy jeszcze nieco bardziej złożony skrypt, tworzący na pasku stanu efekt pływającego (przewijanego) napisu.

<html>
  <head>
    <script language="JavaScript">
    <!--

      var scrtxt="Pływajšcy napis na pasku stanu !!!!!!";

      var lentxt=scrtxt.length;
      var width=100;
      var pos=1-width;

      function scroll()
      {
        pos++;
        var scroller="";
        if (pos==lentxt)
 {
          pos=1-width;
       }
        if (pos<0)
       {
    for (var i=1; i<=Math.abs(pos); i++) {
          scroller=scroller+" ";}
          scroller=scroller+scrtxt.substring(0,width-i+1);
       }
 else
       {
   scroller=scroller+scrtxt.substring(pos,width+pos);
       }
 window.status = scroller;
 setTimeout("scroll()",150);
     }
    //-->
    </script>
  </head>
  <body onLoad="scroll();return true;">

  Strona z przewijanym napisem na pasku stanu!

 
</body>
</html>

Skrypt ten pozostawiam bez komentarza. Zachęcam zainteresowanych czytelników do własnych eksperymentów i przemyśleń.

Zadanie

Uzupełnić swoją stronę z ramkami: