PROGRAMOWANIE

 

 

 

 

 

 

Program Visual Studio Code do ściągnięcia. Wersja portable bez instalacji.

Podstawy programowania

Algorytm - to skończony, uporządkowany ciąg jasno zdefiniowanych czynności, koniecznych do wykonania pewnego zadania.

Cechy algorytmu:

  • Jednoznaczność (potrzebne dane, czynności i ich kolejność, oczekiwany wynik)
  • Możliwość zastosowania do wielu podobnych zadań (klasa zadań rozwiązywanych za pomocą algorytmu)
  • Poprawność - dla określonej klasy danych zawsze otrzymujemy wynik zgodny z oczekiwaniami np. największą z możliwych wartość wskaźnika podczas optymalizacji.
  • Wykonalność - dla określonej klasy danych algorytm zawsze się kończy (własność stopu). Algorytm musi być wykonalny aby mógł być poprawny.
  • Złożoność obliczeniowa (np. szukanie książki (w zbiorze n książek)
    • Złożoność czasowa - czas najczęściej zależy od wymiarowości zadania. O czasie wykonania obliczeń decyduje niewielka część najczęściej wykonywanych operacji. Typowe zależności:
    • Czas stały niezależny od wymiarowości
    • Liniowa (n)
    • Logarytmiczna (log2n)
    • Liniowo-logarytmiczna (n * log2n)
    • Kwadratowa (n2 )
  • Złożoność pamięciowa – często istnieje wymienność, szybsze obliczenia kosztem większego zapotrzebowania na pamięć
  • Złożoność pesymistyczna – n sprawdzeń
  • Złożoność średnia – n/2 sprawdzeń
  • Skończoność - Poprawie zaprojektowany algorytm powinien zatrzymać się po skończonej liczbie kroków (chyba, ze zbudujemy algorytm, który nie ma końca).

Algorytmiczne rozwiązywanie problemów

Komputer jest stosowany do rozwiązywania problemów zarówno przez profesjonalnych informatyków, którzy projektują i tworzą oprogramowanie, jak i przez tych, którzy stosują tylko technologię informacyjno-komunikacyjną, czyli nie wykraczają poza posługiwanie się gotowymi narzędziami informatycznymi. W obu przypadkach ma zastosowanie podejście do rozwiązywania problemów algorytmicznych, która polega na systematycznej pracy nad komputerowym rozwiązaniem problemu i obejmuje cały proces projektowania i otrzymania rozwiązania. Celem nadrzędnym tej metodologii jest otrzymanie dobrego rozwiązania, czyli takiego, które jest:

  • zrozumiałe dla każdego, kto zna dziedzinę rozwiązywanego problemu i użyte narzędzia komputerowe,
  • poprawne, czyli spełnia specyfikację problemu, a więc dokładny opis problemu,
  • efektywne, czyli niepotrzebnie nie marnuje zasobów komputerowych, czasu i pamięci.

Ta metoda składa się z następujących sześciu etapów:

1. Opis i analiza sytuacji problemowej. Na podstawie opisu i analizy sytuacji problemowej należy w pełni zrozumieć, na czym polega problem, jakie są dane dla problemu i jakich oczekujemy wyników, oraz jakie są możliwe ograniczenia.

2. Sporządzenie specyfikacji problemu, czyli dokładnego opisu problemu na podstawie rezultatów etapu 1. Specyfikacja problemu zawiera:

  • opis danych,
  • opis wyników,
  • opis relacji (powiązań, zależności) między danymi i wynikami.

Specyfikacja jest wykorzystana w następnym etapie jako specyfikacja tworzonego rozwiązania (np. programu).

3. Zaprojektowanie rozwiązania. Dla sporządzonej na poprzednim etapie specyfikacji problemu, jest projektowane rozwiązanie komputerowe (np. program), czyli wybierany odpowiedni algorytm i dobierane do niego struktury danych. Wybierane jest także środowisko komputerowe (np. język programowania), w którym będzie realizowane rozwiązanie na komputerze.

4. Komputerowa realizacja rozwiązania. Dla projektu rozwiązania, opracowanego na poprzednim etapie, jest budowane kompletne rozwiązanie komputerowe, np. w postaci programu w wybranym języku programowania. Następnie, testowana jest poprawność rozwiązania komputerowego i badana jego efektywność działania na różnych danych.

5. Testowanie rozwiązania. Ten etap jest poświęcony na systematyczną weryfikację poprawności rozwiązania i testowanie jego własności, w tym zgodności ze specyfikacją.

6. Prezentacja rozwiązania. Dla otrzymanego rozwiązania należy jeszcze opracować dokumentację i pomoc dla (innego) użytkownika. Cały proces rozwiązywania problemu kończy prezentacja innym zainteresowanym osobom (uczniom, nauczycielowi) sposobu otrzymania rozwiązania oraz samego rozwiązania wraz z dokumentacją.

Katalog uporządkowany

  • Dla katalogu nieuporządkowanego nie znamy lepszego algorytmu wyszukiwania niż „pełny przegląd” (n)
  • Dla katalogu uporządkowanego istnieje szybszy algorytm –„wyszukiwanie binarne” ((log2n)

Język programowania

Przeznaczenie: definiowanie algorytmów.

Wymagane cechy:

  • Jednoznaczność
  • Przejrzystość
  • Zwarty zapis
  • Precyzja.
  • Czytelność

Język programowania służy do:

  • Komunikowania się programisty z komputerem
  • Komunikowania się programisty z innymi programistami
  • Komunikowania się programisty z samym sobą.

Podstawowe elementy języka programowania

  • Komentarze – uwagi pomagające zrozumieć opis algorytmu
  • Deklaracje – używane biblioteki, przestrzeń nazw, opcje,…
  • Zmienne – nazwa, typ (int, float, text)
  • Stałe – dane używane w obliczeniach
  • Struktury kontrolne (if, for, while,..)
  • Procedury, funkcje, klasy

Zmienne i stałe

  • Stała – pewna wartość używana podczas obliczeń np. 0.22 , ”abc”
  • Zmienna – nazwana wielkość używana w obliczeniach, która może w trakcie obliczeń przyjmować różne wartości.
  • Do przechowywania zmiennych rezerwuje się potrzebną ilość pamięci
  • Podstawienie wartości na zmienną x=50 lub x=x+y
  • Zmienne wykorzystujemy w wyrażeniach arytmetycznych i logicznych np.:

if (x <100 && x>40)

x=x+30;

Struktury kontrolne

Zmieniają kolejność wykonywania komend języka

  • if ( x > 100 ) { x1 = x } else { x1 = x+x1 }
  • for (i = 0; i < 10; i++) { a[i] = a[i+1];}
  • do {i++;} while (i < 10);
  • switch (s) { case ”a”: x=”b”; break; …
  • goto et100;

Procedury i funkcje

Przeznaczenie: wygodne wydzielenie powtarzalnego fragmentu kodu np.:

int xy(int x, int y) {

… powtarzany fragment kodu

}

OPIS: int – typ zwracanego wyniku

xy – nazwa funkcji

x – przekazywany parametr

y – przekazywany parametr

Rekurencja

  • Wywoływanie funkcji przez siebie, algorytm odwołuje się do samego siebie.
  • Przydatny sposób do realizacji algorytmów dotyczących struktur wykazujących podobieństwo na różnych poziomach np. struktur hierarchicznych
  • Realizacja z wykorzystaniem stosu – możliwe przepełnienie stosu "Stack overflow error."
  • Przykładem rekurencji może być algorytm tzw. Wieża Hanoi, liczby Fibonacciego, algorytm Euklidesa i in;

Sortowanie danych

Jest bardzo wiele różnych algorytmów sortowania, a wszystkie różnią się znacznie czasem wykonywania I wymaganą pamięcią. Jedne działają szybko dla każdego rodzaju danych, inne bardzo zwalniają dla pewnych typów danych wejściowych. Wyróżniamy:

  • Sortowanie przez wstawianie (insertionsort)
  • Sortowanie przez wymianę/wybór (selectionsort)
  • Sortowanie przez zliczanie (countingsort)
  • Sortowanie szybkie (quicksort)
  • Sortowanie stogowe (heapsort)
  • Algorytm iteracyjny:
    • Iteracja z określoną liczbą powtórzeń: wykonuj czynność A dokładnie N razy
    • Iteracja warunkowa: wykonaj czynność A, dopóki jest spełniony warunek M

Klasy

  • Wspólna definicja obiektów opisywanych tym samym zestawem atrybutów i funkcji
  • Dziedziczenie –definiowanie nowej klasy na podstawie już zrealizowanej

Wyrażenia arytmetyczne i logiczne

W językach programowania można używać swobodnie złożonych wyrażeń arytmetycznych i logicznych

Semantyka i syntaktyka

W językach programowania ściśle określa się

  • syntaktykę (gramatykę) – dopuszczalną budowę zdań języka (kolejność elementów, relacje między nimi,…)
  • semantykę – znaczenie poszczególnych elementów języka (co spowoduje użycie pewnej konstrukcji językowej)

Notacja BNF (Backus-Naur form) – ścisłe definiowanie gramatyki języków programowania (bezkontekstowe)

Przykład:

<liczba_binarna> ::= <liczba_binarna> <cyfra>
<liczba_binarna> ::= <cyfra>
<cyfra> ::= 0 | 1

Języki proceduralne

  • Biblioteki procedur podzielone na grupy funkcjonalne
  • Wszystkie dane potrzebne do wykonania przekazywane jako parametry podczas wywołania procedury (funkcji)

Języki obiektowe

  • Definiujemy klasę obiektów podając listę atrybutów określających obiekt oraz listę funkcji, za pomocą których można wpływać na działanie obiektu.
  • Tworzymy egzemplarze obiektów (słowo kluczowe new) np. przyciski w okienku.
  • Do atrybutów można odwoływać się poprzez nazwę obiektu i nawę atrybutu np. nazwa.atrybut
  • Funkcje obiektu można uruchomić podając nazwę obiektu i nazwę funkcji np. nazwa.funkcja()

Języki programowania

  • Assembler - język niskiego poziomu, operuje na rejestrach procesora i komórkach pamięci;
  • Fortran - uniwersalny język do obliczeń inżynierskich. Obsługuje wyrażenia arytmetyczne, tablice, funkcje;
  • Algol - Uniwersalny język algorytmiczny oparty na ściśle zdefiniowanej gramatyce (notacja BNF)
  • Cobol - Common Business Oriented Language - Język przetwarzania danych biznesowych;
  • PL-1 - Programming Language One, „wszystkomający” uniwersalny język programowania dla celów naukowych, inżynierskich i biznesowych
  • C - do budowy jądra Unix'a
  • Simula - rozszerzenie Algol'a
  • Smalltalk - Pierwszy czysto obiektowy język programowania
  • C++ jest rozszerzeniem obiektowym języka C (Bogaty ale dość złożony język, którym łatwo można zrobić wszystko włącznie z błędami)
  • Java, C# - Podstawowe koncepcje przejęte z języka Smalltalk, składnia wzorowana na C++ ale starano się usunąć te elementy, które były przyczyną błędów programistycznych w C++, kompilowany do kodu bajtowego, dziedziczenie tylko od jednej klasy, posiada bogate biblioteki klas, uruchamianie w programach NetBeans, JBuilder/ Język C# wersja Microsoft, środowisko I biblioteki klas .NET I program Visual Studio;
  • Prolog -
  • Lisp -
  • Perl, PHP - język skryptowy
  • JavaScript -  język skryptowy

SŁOWNIK POJĘĆ / DEFINICJE:

Program - (ang. computer program) zbiór poleceń zapisany w kodzie maszynowym przeznaczony do wykonania przez komputer. Za jego pomocą maszyna ta może przetwarzać dane, rozwiązywać zadania i wykonywać wiele innych funkcji.

Programowanie - (ang. programming) proces tworzenia oprogramowania komputerowego, na który składają się takie etapy pracy jak: projektowanie programu, jego pisanie (programowanie właściwe), kompilacja, testowanie i aktualizowanie.

Słowa kluczowe - słowa zarezerwowane dla danego języka programowania, mające ściśle określone znaczenie, np. nazwy poleceń;

Kod źródłowy - (ang. code) określony, logiczny system zapisu stosowany do przedstawiania informacji. W informatyce pod pojęciem kod kryje się sposób przedstawiania danych jako liczb binarnych lub heksadecymalnych, aby były one zrozumiałe dla komputera.

Translator czyli interpretator - program służący do tłumaczenia kodu programu zapisanego w jęz. programowania z postaci źródłowej do postaci wynikowej. Wyróżniamy: kompilatory tłum. programy zapisane w jęz. wysokiego poziomu; asemblery tłum. programy zapisane w jęz. symbolicznym.

Kompilator - program służący do tłumaczenia kodu w jęz. źródłowym (w jęz. programowania) na odpowiadający mu kod w jęz. wynikowym (maszynowym).

Interpreter   program analizujacy kod źródłowy instrukcja po instrukcji i przedstawiający sprawdzony fragment kodu na bieżąco;

Moduł - to wydzielony fragment programu komp. Każdy moduł jest kompilowany osobno, co ułatwia pracę i analizę błędów.

Linker (konsolidator) - narzędzie do łączenia skompilowanych modułów w jeden plik wykonywalny;

Konsolidacja - proces łączenia skompilowanych modułów w jeden plik wykonywalny;

Aplikacja - ogólna nazwa programów użytkowych napisanych dla konkretnych zastosowań. Aplikacje przeznaczone są do uruchamiania na określonych typach komputerów, systemów operacyjnych.

Aplikacja internetowa (web application) - program pracujacy na serwerze i komunikujący się z userem poprzez sieć oraz przez przeglądarkę internetową

Aplet - niewielki program komputerowy który pracuje tylko w połączeniu z programem głównym, są to biblioteki np. aplety jęz. java, active-x uruchamiany na stronach internetowych;

Edytor - program umożliwiający obróbkę (edycję) danych pewnego rodzaju (np. edytor tekstowy, edytor dyskowy, edytor kodów źródłowych)

Parser - analizator składni. Program interpretujący dane wejściowe i dzielący tak, żeby były zrozumiałe dla następnych w kolejności mechanizmów przetwarzania m. in. kompilatora, języki skryptowe są wykonywane bezpośrednio przez parser.

Debbuger - procedura wyszukiwania błędów (ang. bug) krok po kroku w programach komputerowych. Służą do tego specjalne programy zwane debbuger'ami. Wspomagają programistów gdyż wyszukiwanie błędów jest bardzo żmudną i pracochłonną czynnością

Na koniec trochę przykładów algorytmów - gry: [WIEŻA HANOI] [GRA W ŻYCIE] [WISIELEC]

Podstawy algorytmiki

    Schemat blokowy albo sieć działań jest graficznym sposobem opisu algorytmów. Charakteryzuje się dużą czytelnością i łatwością analizy algorytmów. Poniżej w tabeli przedstawione są najczęściej stosowane symbole w sieciach działań.

    Początek algorytmu. Wewnątrz symbolu wpisuje się zwykle słowo "START" lub nazwę podprogramu. W algorytmie może wystąpić tylko jeden taki symbol. Zakończenie algorytmu. Wewnątrz symbolu wpisuje się zwykle słowo "STOP" lub "WRÓĆ", "RETURN" (dla podprogramów). W algorytmie może wystąpić wiele takich symboli.
    Linie ze strzałkami określają kolejność wykonywanych czynności w algorytmie. Linii tych nie wolno rozgałęziać, natomiast mogą się schodzić w jednym punkcie (węźle). Pierwszy symbol oznacza ogólnie operację wejścia/wyjścia. Wygodniej jest jednak odróżnić kierunek wymiany danych.
    Drugi symbol oznacza operacje wejściowe (np. dane z klawiatury, z pliku lub parametry wywołania procedury).
    Trzeci symbol oznacza operacje wyjściowe (np. na ekran, drukarkę lub do pliku).
    Instrukcja warunkowa. Jest to jedyny sposób rozgałęzienia sieci działań. Wewnątrz symbolu wpisuje się wyrażenie warunkowe. Wychodzą z symbolu dwie ścieżki oznaczone jako T (tak, prawda) oraz N (nie, fałsz). Jeżeli wyrażenie jest rozbudowane, to można symbol rozszerzyć tak, aby zmieścić zapis wzoru. Odmiana instrukcji warunkowej oznaczająca wybór dalszej ścieżki zależnie od wartości zmiennej lub wyrażenia. Odpowiada ciągowi instrukcji warunkowych ale pozwala na bardziej zwarty zapis algorytmu i programu.
    Symbol "przetwarzanie danych". Wewnątrz opisuje się czynności przetwarzania danych, najczęściej za pomocą wzorów lub tekstu. Wywołanie podprogramu. Wewnątrz zwykle wpisuje się nazwę podprogramu i parametry wywołania.
    Łączniki umożliwiają połączenie odległych fragmentów sieci działań. Stosowane są przy dużych sieciach działań. Pierwsza para przedstawia łączniki wewnątrzstronicowe, druga międzystronicowe. Wewnątrz symbolu należy wpisać etykietę łącznika (np. litera lub cyfra), a w łączniku międzystronicowym również numer strony, do której prowadzi połączenie. Komentarze, czyli opisy różnych elementów sieci. Można w ten sposób zaznaczać np. istotne, węzłowe miejsca w programie lub dodatkowo opisać niektóre czynności.
    Bliżej nieokreślony ciąg instrukcji. Stosowany we wstępnych etapach konstruowania algorytmu. Symbol pętli typu for. Pętle konstruuje się zwykle przy pomocy instrukcji warunkowej. Jednak dla pętli for (zwłaszcza zagnieżdżonych) prowadzi do dość skomplikowanych i nieczytelnych struktur sieci. Ten symbol znacznie upraszcza sieć działań.
    Instrukcje

    Poniżej przedstawiam podstawowe instrukcje w językach Pascal, C++, Java(Java Script) i PHP . Warto zauważyć niemal identyczną postać instrukcji w językach C++, Java Script i PHP.

    1. Instrukcja złożona (blok, ciąg instrukcji)

    W instrukcjach typu pętle lub warunki często norma języka przewiduje pojedyńczą instrukcję. Jeżeli chcemy użyć dłuższego ciągu instrukcji, to należy go przekształcić w tzw. instrukcję złożoną (blok instrukcji).)
    Pascal C++ Java Script PHP 
    begin
    Instrukcja1;
    Instrukcja2;
    ...
    Instrukcjan
end;
    		 
    {   Instrukcja1;
    Instrukcja2;
    ...
    Instrukcjan;
}
    		 
    {   Instrukcja1;
    Instrukcja2;
    ...
    Instrukcjan;
}
    		 
    {   Instrukcja1;
    Instrukcja2;
    ...
    Instrukcjan;
}

    2. Instrukcja warunkowa prosta - "if-then"

    Jeżeli warunek W jest spełniony to wykonaj instrukcję, w przeciwnym wypadku nie rób nic.
    Pascal C++ Java Script PHP 
    if x>0 then
    Instrukcja;
                   
    
if x>0 then
   begin
    CiągInstrukcji
   end;
    		 
    if (x>0)
    Instrukcja;
                   
    
if (x>0)
{
    CiągInstrukcji;
}
    		 
    if (x>0)
    Instrukcja;
                      
    
if (x>0)
{
    CiągInstrukcji;
}
    		 
    if ($x>0):
    CiągInstrukcji;
endif;
                        
    
if ($x>0)
{
    CiągInstrukcji;
}

    3. Instrukcja warunkowa złożona- "if-then-else"

    Jeżeli warunek W jest spełniony to wykonaj instrukcję 1, w przeciwnym wypadku wykonaj instrukcję 2.
    Pascal C++ Java Script PHP 
    if x>0 then
    Instrukcja1
else
    Instrukcja2;
                   
    
if x>0 then
   begin
    CiągInstrukcji1
   end
else
   begin
    CiągInstrukcji2
   end;
    		 
    if (x>0)
    Instrukcja1;
else
    Instrukcja2;
                    
    
if (x>0)
{
    CiągInstrukcji1;
}
else
{
    CiągInstrukcji2;
}
    		 
    if (x>0)
    Instrukcja1;
else
    Instrukcja2;
                      
    
if (x>0)
{
    CiągInstrukcji1;
}
else
{
    CiągInstrukcji2;
}
    		 
    if ($x>0):
    CiągInstrukcji1;
else:
    CiągInstrukcji2;
endif;
                        
    
if ($x>0)
{
    CiągInstrukcji1;
}
else
{
    CiągInstrukcji2;
}

    4. Instrukcja wyboru - "case"

    Jeżeli x=s1 to wykonaj Instr 1, jeżeli x=s2 to wykonaj Instr 2, itd. Jeżeli wartość x nie jest wymieniona, to wykonaj Inne

    Testowana jest wartość wyrażenia (lub zmiennej) typu porządkowego przez porównanie ze stałymi s1, s2 itd. Jeżeli nie zostanie znaleziona, to nastąpi przejście do frazy else / default, o ile ona występuje.

    Rzeczywiste działanie instrukcji wyboru w Pascalu i w pozostałych językach nieco się różni. W Pascalu po wykonaniu wskazanej instrukcji następuje wyjście za instrukcję wyboru, natomiast w C++, JS i PHP wykonywane są kolejne instrukcje (należące do następnej frazy case). Wyjście ze struktury instrukcji wyboru należy wymusić poleceniem break;
    Pascal C++ Java Script PHP 
    case wyrażenie of
  s1:  Instrukcja1;
  s2:  Instrukcja2;
  s3:  Instrukcja3;
  ...
  else    Inne
end
    		 
    switch (wyrażenie)
{ case s1:  CiągInstr1;
            break;
  case s2:  CiągInstr2;
            break;
  case s3:  CiągInstr3;
            break;
  ...
  default:   Inne;
}
    		 
    switch (wyrażenie)
{ case s1:  CiągInstr1;
            break;
  case s2:  CiągInstr2;
            break;
  case s3:  CiągInstr3;
            break;
  ...
  default:   Inne;
}
    		 
    switch ($wyrażenie):
  case s1:  CiągInstr1;
            break;
  case s2:  CiągInstr2;
            break;
  case s3:  CiągInstr3;
            break;
  ...
  default:   Inne;
endswitch;
                        
    
switch ($wyrażenie)
{ case s1:  CiągInstr1;
            break;
  case s2:  CiągInstr2;
            break;
  case s3:  CiągInstr3;
            break;
  ...
  default:   Inne;
}

    5. Pętla ze sprawdzaniem warunku na początku - "while"

    Dopóki wyrażenie w jest prawdziwe wykonuj Instrukcję

    Warunek powtarzania pętli jest sprawdzany przed wejściem do niej. Z tego powodu zmienne wykorzystywane w wyrażeniu warunkowym muszą być określone przed instrukcją pętli.

    Jeżeli warunek jest fałszywy przy pierwszym testowaniu, to w ogóle nie nastąpi wykonanie pętli.
    Pascal C++ Java Script PHP 
    while x<>0 do
   Instrukcja;
                                
    
while x<>0 do
begin
   CiągInstrukcji
end
    		 
    while (x!=0)
   Instrukcja;
                  
    
while (x!=0)
{
   CiągInstrukcji;
}
    		 
    while (x!=0)
   Instrukcja;
                
    
while (x!=0)
{
   CiągInstrukcji;
}
    		 
    while ($x!=0):
   CiągInstrukcji;
endwhile;
                     
    
while ($x!=0)
{
   CiągInstrukcji;
}

    6. Pętla ze sprawdzaniem warunku na końcu - "repeat"

    Powtarzaj Instrukcje aż do spełnienia warunku w.(Pascal)
    Powtarzaj Instrukcje dopóki warunek w jest spełniony.(C++, JS i PHP)

    Ponieważ warunek pętli sprawdzany jest na końcu, to jej treść zostanie wykonana przynajmniej raz.
    Istotną różnicą między językami jest znaczenie wyrażenia warunkowego:
    - w Pascalu jest to warunek zakończenia pętli,
    - w C++, PHP i JS jest to warunek kontynuacji pętli. Ilustrują to sieci działań.
    Ze względu na tą różnicę w celu uzyskania takiego samego efektu w Pascalu i językach C++, JS i PHP należy w tych drugich odwrócić warunek.
    Pascal C++ Java Script PHP 
    repeat
   CiągInstrukcji
until x=0;
    		 
    do
   CiągInstrukcji;
while (x!=0);
    		 
    do
   CiągInstrukcji;
while (x!=0);
    		 
    do
   CiągInstrukcji;
while ($x!=0);

    7. Pętla z licznikiem - "for"

    Pascal:

    Dla i zmienniającego się od wartości początkowej (wp) do wartości końcowej (wk) z krokiem 1 wykonuj Instrukcję

    W Pascalu istnieje druga wersja z krokiem -1 (zamiast to należy wpisać downto).

    W językach C++, JS i PHP jej działanie jest inne, bardziej uogólnione:

    for(inicjacja ; warunek ; modyfikacja)
    Instrukcja;

    Wykonaj instrukcje inicjujące. Następnie, dopóki warunek jest spełniony wykonuj Instrukcję i Instrukcje modyfikujące

    Taka postać instrukcji jest bardzo elastyczna i pozwala na realizację dość skomplikowanych i nietypowych pętli.
    Pascal C++ Java Script PHP 
    for i:=1 to 20 do
   Instrukcja;
              
    
for i:=1 to 20 do
begin
   CiągInstrukcji
end;
    		 
    for(i=1; i<=20 ;i++)
   Instrukcja;
             
    
for(i=1; i<=20 ;i++)
{
   CiągInstrukcji;
}
    		 
    for(i=1; i<=20 ;i++)
   Instrukcja;
              
    
for(i=1; i<=20 ;i++)
{
   CiągInstrukcji;
}
    		 
    for($i=1; $i<=20 ;$i++)
   Instrukcja;
                    
    
for($i=1; $i<=20 ;$i++)
{
   CiągInstrukcji;
}

    8. Pętla dostępu do tablic - "foreach"

    Instrukcja pę tli foreach występuje tylko w języku PHP. Daje możliwość obróbki wszystkich elementów tablicy bez znajomości kluczy lub indeksów.

    Dla wszystkich elementów tablicy wykonaj Instrukcję

    Taka postać pętli for wynika z nietypowej konstrukcji tabel w PHP.
    Pascal C++ Java Script PHP 
    nie istnieje
    		 
    nie istnieje
    		 
    nie istnieje
    		 
    foreach($tablica as $wartość)
{
   CiągInstrukcji;
}
                                
    
foreach($tablica as $klucz => $wartość)
{
   CiągInstrukcji;
}

_____________________________________

Praca z arkuszem kalkulacyjnym

 

Arkusz kalkulacyjny jest elektroniczną wersją tabeli. Składa się z wielu rozmieszczonych obok siebie komórek. Komórka jest elementem znajdującym się na przecięciu określonego wiersza i kolumny tabeli. Każdy wiersz posiada swój numer od 1 do 65536, zaś kolumna od A do kombinacji liter IV (256 kolumn). Podstawowym zadaniem arkusza kalkulacyjnego jest wykonywanie obliczeń na pojedynczych komórkach i ich grupach. Użytkownik może dowolnie zmienić jej wygląd (krój i rozmiar czcionki, sposób wyrównywania, kolory, obramowanie, sposób wyświetlania liczb) tworzonej tabeli.

Każda komórka arkusza ma własny adres złożony z oznaczeń kolumny i wiersza, na przecięciu, których się znajduje. (np.: „A1”, „B54”, „CD43”). Jest on wykorzystywany w formułach do odwoływania się do określonych komórek.

Często zachodzi konieczność zaadresowania więcej niż jednej komórki; prostokątny obszar przylegających do siebie komórek nosi nazwę zakresu komórek. Można go wskazać poprzez podanie adresów komórek leżących w przeciwległych narożnikach obszaru oddzielonych dwukropkiem (na przykład „A1:C4”).

Do komórek arkusza można wprowadzać następujące rodzaje danych: liczbę, tekst i formułę.

Liczby umożliwiają wypełnienie arkusza własnymi danymi, które następnie można poddać dalszej analizie. Umożliwiają one przechowywanie danych zarówno w postaci całkowitej, jak i ułamkowej. Również data i czas zapamiętywane są jako pojedyncze liczby.

Tekst jest ciągiem liczb, liter lub innych znaków. Najczęściej służy do opisu innych obszarów arkusza. Może być wykorzystywany przez niektóre formuły. Liczbę, która ma być odczytana przez arkusz jako tekst należy poprzedzić znakiem „ ’ ”.

Formuły umożliwiają wykonywanie obliczeń na pojedynczych komórkach i ich grupach. Oprócz podstawowych działań (dodawanie, odejmowanie, mnożenie, dzielenie, potęgowanie) istnieje możliwość wykorzystania zaawansowanych funkcji matematycznych, logicznych, finansowych i innych.

Podstawowe informacje o projektowaniu arkusza kalkulacyjnego zostaną przekazane w oparciu o program Excel – elementu pakietu MS Office.

Na powyższym rysunku wyróżniono widok okna programu:

Występują w nim charakterystyczne dla innych programów pakietu Office, menu rozwijane, paski narzędzi, paski przewijania. Elementami nowymi są: pasek formuły (2) i struktura arkusza.

1. Karty arkuszy – umożliwiają dostęp do dowolnego arkusza w skoroszycie; karta wyróżniona wskazuje arkusz aktywny.

2. Pasek formuły – w tym miejscu widać wartość lub formułę wprowadzoną do komórki. Tu również możliwa jest ich edycja.

3. Pole nazwy komórki/zakresu lub lista funkcji – dowolnej komórce lub ich grupie (aktualnie zaznaczonej) można nadać w tym miejscu unikalną nazwę i następnie wykorzystać ją w adresowaniu. W czasie wprowadzania formuł znajduje się tu lista dostępnych funkcji.

Istotą samego programu jest konstruowanie tabel, zawierających wymienione trzy rodzaje danych dla potrzeb rozwiązywania problemów organizacyjnych, finansowych.

Do komórki aktywnej można wpisywać nowe informacje. Po wpisaniu dowolnego znaku z klawiatury pojawia się on w aktywnej komórce. Zakończenie wprowadzania następuje po wybraniu innej komórki lub po naciśnięciu klawisza ENTER. Po wpisaniu danych do komórek następuje ich klasyfikacja do jednej z trzech kategorii: liczby, formuły lub tekstu.

Teksty wyrównywane są domyślnie do lewej krawędzi komórki, liczby do prawej, natomiast w przypadku formuły zamiast jej treści w komórce pojawia się wyliczona z niej wartość. Edycję formuły rozpoczynamy od znaku „=”.

Istnieje możliwość modyfikowania rozmiaru komórek i dostosowania ich do potrzeb projektowanego arkusza.

Oprócz zawartości każdej komórce przypisany jest określony format. Określa on wygląd komórki. Jego modyfikacja polega na zmianie kroju, rozmiaru i atrybutów czcionki, koloru wypełnienia, sposobu wyrównywania tekstu, sposobu wyświetlania liczb. Do formatowania komórek służy opcja „Format/Komórki”.

Komórki lub grupę komórek można, korzystając z poleceń edycyjnych, przenosić (Edycja/Wytnij, Edycja/Wklej) lub kopiować (Edycja/Kopiuj, Edycja/Wklej). Do wymienionych operacji można wykorzystać pasek narzędzi lub odpowiednie skróty klawiszowe. Obszar przenoszony lub kopiowany zaznaczony jest animowaną linią przerywaną aż do momentu zakończenia operacji lub anulowania jej klawiszem ESC.

Komórki można również przenosić i kopiować za pomocą myszy. Należy zaznaczyć żądany zakres komórek, „schwycić” go za otaczającą go grubą ramkę, a następnie przeciągnąć myszą zaznaczenie w miejsce docelowe. Spowoduje to przeniesienie komórek w nowe miejsce. Aby komórki skopiować należy dodatkowo w czasie tej operacji przytrzymać wciśnięty klawisz Ctrl.

Jeśli jako dane źródłowe zaznaczymy pojedynczą komórkę, a jako obszar docelowy większą grupę komórek, wówczas komórka źródłowa zostanie powielona odpowiednią ilość razy tak, aby wypełnić zaznaczenie.

Formuły są to wyrażenia matematyczne umożliwiające prowadzenie obliczeń w arkuszu kalkulacyjnym. Wprowadzanie formuły rozpoczyna się od znaku równości „=”. Jest to sygnał dla programu, że jest to wyrażenie do obliczenia a nie zwykły tekst. Argumentami dla operacji wykonywanych w formułach są zarówno stałe wartości wprowadzone przez użytkownika, jak i wartości innych komórek arkusza, do których odwołuje się poprzez adres komórki.

Projektując zapis formuły można korzystać z czterech podstawowych działań arytmetycznych tj. dodawania, odejmowania, mnożenia i dzielenia oraz potęgowania, a także zbioru funkcji oferowanych przez program. Możliwe jest stosowanie nawiasów okrągłych w celu określenia kolejności wykonywania działań

.

Ogółem dostępnych jest kilkaset funkcji. Zostały one podzielone na następujące kategorie:

  • finansowe,
  • daty i czasu,
  • matematyczne,
  • statystyczne,
  • wyszukiwania i adresu,
  • bazy danych,
  • tekstowe,
  • logiczne,
  • informacyjne,
  • użytkownika.

Program zawiera pełny opis każdej funkcji wraz z listą argumentów i przykładami ich użycia.

Formuły można powielać kopiując i przenosząc komórki.

Projektując arkusz należy pamiętać o możliwości kopiowania komórek zawierających formuły. Procesowi temu towarzyszy modyfikacja zapisanych w formułach adresów komórek. Adresy komórek zawierające jedynie numer kolumny i wiersza są adresami względnymi i w trakcie kopiowania ulegają modyfikacji. Określający je numer kolumny i wiersza zmienia się w zależności od miejsca docelowego kopiowanej komórki.

Dla przykładu, jeśli w komórkach A1 i B1 umieści się jakieś liczby a w komórce C1 formułę „=A1+B1” to po przekopiowaniu komórki C1 do komórki C2 postać formuły będzie następująca „=A2+B2”. Choć taka właściwość arkusza wydaje się bardzo przydatna, to jednak czasem zachodzi potrzeba odwołania się do konkretnej komórki bez względu na to, jak i ile razy zostanie powielona formuła. W celu zablokowania zmian w adresie komórki podczas kopiowania należy adres tej komórki wzbogacić o znak „$” umieszczony przed numerem wiersza lub numerem kolumny (adresowanie mieszane) lub w obu miejscach naraz (adresowanie bezwzględne) w zależności od specyfiki projektowanego arkusza.

Wykresy

Bardzo istotną częścią programu Microsoft Excel są wykresy. Umożliwiają one przedstawienie w sposób graficzny i na wiele różnych sposobów danych umieszczonych w arkuszu

Tworzenie wykresu rozpoczyna się od wybrania z arkusza serii danych. Seria danych jest to pojedynczy zakres komórek mieszczący się w jednym wierszu lub kolumnie, z którego wartości są graficznie interpretowane na wykresie. Podczas tworzenia wykresu można skorzystać z kreatora. Uruchomienie kreatora następuje po wydaniu z menu „Wstaw” polecenia „Wykres...”. W trakcie tworzenia wykresu należy określić takie parametry jak: typ wykresu, zakres komórek, z których pobierane są dane, parametry dotyczące wyglądu wykresu oraz miejsce umieszczenia wykresu.

Arkusz jako tabelaryczna baza danych

Odpowiednio zaprojektowany arkusz kalkulacyjny o jednolitej strukturze, w którym poszczególne kolumny określają jednolity typ danych, a wiersze stanowią uporządkowany opis określonego elementu można potraktować jako bazę danych o tabelarycznej strukturze. Wiersze takiej tabeli stanowią rekordy bazy, zaś kolumny – pola. Excel posiada wbudowane funkcje umożliwiające wykonywanie podstawowych operacji na tak stworzonej bazie. Do tych operacji należy: sortowanie filtrowanie danych, tworzenie formularza dla potrzeb wprowadzania danych, sumowanie list, konstruowanie tabel przestawnych. Wszystkie wymienione funkcje są dostępne w menu Dane.

Aby dokonać sortowania danych w tabeli należy wywołać funkcje „Dane/Sortowanie” oraz dokonać wyboru do 3 pól, według których dane zostaną posortowane. Należy również pamiętać o określeniu sposobu sortowania: malejąco lub rosnąco. Funkcja filtrowania (Dane/Filtr) pozwala na wyświetlanie wybranych rekordów bazy według określonego kryterium. Funkcja ta pozwala wykorzystać autofiltr lub filtr zaawansowany. Funkcja „sumy częściowe” umożliwia wykonywanie operacji na danych w tabeli uporządkowanych według określonych kryteriów. W tym celu można wykorzystać takie funkcje, jak: suma, licznik, średnia, maksimum, minimum, licznik.

Konstruując bazę w arkuszu kalkulacyjnym, należy pamiętać o możliwości wprowadzania do niej danych poprzez formularz wywoływany poprzez menu Dane/Formularz. Program Microsoft Excel może posłużyć do budowy prostej bazy danych.

Zagadnienie projektowania i budowy baz danych zostało dokładniej omówione w pakiecie do modułu 312[01].Z2.01.

TWORZENIE BAZY DANYCH W EXCELU - MINI PRZEWODNIK [zobacz]

Tabele przestawne

Program Excel jest wyposażony w kreator tabel przestawnych, umożliwiających konstruowanie tabel podsumowujących dane zawarte w arkuszu pełniącym rolę bazy. Informacje zawarte w tabeli przestawnej mogą być wzbogacone o interpretację graficzną w postaci wykresu. Kreator tabel przestawnych wywołuje się w menu „Dane/Raport” tabeli przestawnej i wykresu przestawnego.

Makro

Wykonując często powtarzające się czynności podczas konstruowania arkusza kalkulacyjnego można je zautomatyzować za pomocą makro. Makro jest zestawem poleceń i funkcji zapisanych za pomocą języka Visual Basic, uruchamianych podczas wykonywania określonego zadania. Projektując makra należy pamiętać, że istnieje możliwość ich automatycznego rejestrowania. Zarejestrowane makro można przyporządkować do zaprojektowanej ikony paska narzędzi lub skrótu klawiszowego w celu łatwego jego wywoływania. Każde makro można edytować i wykorzystując język Visual Basicmodyfikować jego zawartość.

 

 

 

SKRYPTY W JAVA SCRIPT

1 - Co to jest JavaScript ?

 

Z poniższego tekstu dowiesz się co to jest JavaScript, do czego służy i jak można uruchamiać skrypty napisane w tym języku.

JavaScript jest to język skryptowy dla dokumentów internetowych. Skrypty napisane za pomocą JavaScript mogą być umieszczane na stronach WWW. Dzięki temu językowi można np. uzależnić wykonanie jakiejś instrukcji od reakcji osoby przeglądającej daną stronę. JavaScript ma też szerokie zastosowanie w tworzeniu formularzy. Umożliwia wnikanie w ich treści i sprawdzanie poprawności wypełnienia poszczególnych pól czy zaznaczenie odpowiednich opcji.

Aby uruchomić skrypt napisany w języku JavaScript trzeba posiadać przeglądarkę internetową Netscape Navigator w wersji przynajmniej 2.0 lub Microsoft Internet Explorer w wersji 3.0. Jednak, aby przedstawione w tym kursie przykłady działy prawidłowo potrzebna jest przeglądarka firmy Netscape w wersji przynajmniej 4.0 (posługując się przeglądarką Microsoft Internet Explorer możesz natrafić na błędy). Chcąc zacząć poznawać ten język trzeba posiadać umiejętność tworzenia chociaż najprostszych stron WWW w języku HTML. UWAGA! Współczesne przeglądarki internetowe wprawdzie interpretują polecenia języka skryptowego, ale wiele ze skryptów może nie działać, ponieważ blokują je tzw. zabezpieczenia 'Ustawień internetowych'.

 

2 - Jak tworzyć strony WWW ze skryptami ?

Znaczników <SCRIPT> i </SCRIPT> używa się do rozpoczęcia i zakończenia pisania skryptu. Pierwszy z tych znaczników powinien zawierać opcję language z parametrem JavaScript.

Poniższy przykład pokazuje jak zbudować stronę zawierającą skrypty JavaScipt. Wyjaśnia do czego służą znaczniki <SCRIPT> i </SCRIPT>

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<SCRIPT language="JavaScript">
document.write("<B>Ten tekst został napisany dzięki JavaScript<B>")
Dzięki poleceniu document.write("tekst") w skrypcie można wykorzystać instrukcje języka HTML. Po prostu w miejsce tekst należy wstawić dowolny ciąg instrukcji HTML, które mają być wykonane w skrypcie.
</SCRIPT>
Ten zaś został napisany w HTML-u
</BODY>
</HTML> Powyższy przykład obrazuje jak używać języka JavaScript do pisania stron. Został tu zastosowany bardzo prosty skrypt. Jego instrukcje są wykonywane bez względu na reakcje użytkownika. Oczywiście na stronie może występować kilka skryptów i znaczników <SCRIPT&gt.

 

3 - Definiowanie zmiennych

Zmienne służą do przechowywania danych. W języku JavaScript są cztery typy danych: liczby, łańcuchy tekstowe, wartości logiczne (true, false) oraz typ null. Nie ma konieczności definiowania zmiennych na początku programu. Można je zdefiniować bezpośrednio przed użyciem.

Poniższy przykład pokazuje do czego służą zmienne, jak je definiować i jak ich używać

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<SCRIPT language="JavaScript">
{ imie="Jacek ";
nazwisko="Kowalski";
tekst=imie+nazwisko;
document.write(tekst) }
</SCRIPT>
</BODY>
</HTML>

Imię Jacek i nazwisko Kowalski zostają zapamiętane w zmiennych tekstowych 'imie' i 'nazwisko'. Następnie zmienne te są sumowane i powstaje nowy łańcuch o nazwie tekst. Łańcuch ten zostaje napisany na ekranie. Warto zauważyć, że podczas pisania skryptów definiowanie zmiennych jak i polecenia oddziela się średnikami.

 

4 - Pasek statusu

Do operowania nad tekstem statusu służą dwie właściwości obiektu window: defaultStatus i status. Dzięki DefaultStatus można wyświetlić stały tekst statusu, zaś dzięki właściwości status można wyświetlać teksty tymczasowe.

Poniższy przykład pokazuje jak można zmieniać domyślny tekst statusu oraz jak wyświetlić tekst w pasku statusu na pewien czas.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
<BODY bgcolor="#6FB20F">
<SCRIPT language="JavaScript">
defaultStatus="Wjedź na ten rysunek !";
</SCRIPT>
</HEAD>
<BODY bgcolor="#6FB20F">
<A HREF="../przyk/przyk_18.htm" onMouseOver="window.status='Dziękuję.'; return true">
Zdarzenie onMouseOver wywoływane jest w momencie najechania myszką na obiekt posiadający obsługę tego zdarzenia.
<IMG SRC="../rys/status.gif" border=0></A>
</BODY>
</HTML>

 

Właściwości status najlepiej używać z procedurami obsługi zdarzeń. Wszystkie zdarzenia zostały dokładnie opisane w dodatkach.

 

5 - Okienka dialogowe

Są trzy typy okienek dialogowych:
- okienko informacyjne, które może służyć jako pomoc dla użytkownika w pewnych sytuacjach. Sposób wywołania: alert("komunikat"), gdzie komunikat jest tekstem wyświetlanym w okienku.W tym okienku wyświetlany jest tylko przycisk OK.
- okienko z klwiszami OK i Anuluj (lub Cancel), powodujące zwrócenie wartości true lub false. Sposób wywołania: confirm("komunikat").
- okienko zawierające pole do wprowadzenia danych. Sposób wywołania: prompt("komunikat","domyślna_wartość"), gdzie domyślna_wartość jest wyświetlana w polu okienka w czasie jego wywołania.

Poniższy przykład wyjaśnia do czego mogą służyć okienka dialogowe oraz pokazuje, które okienka należy zastosować do danej sytuacji.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<CENTER>
<FORM>
<INPUT type="button" value="Pokaż adres strony" onClick="alert('Jesteś na stronie:'+document.URL);">
Zdarzenie onClick wywoływane jest w momencie naciśnięcia przycisku myszy na obiekcie posiadającym obsługę tego zdarzenia (zob. dodatki).
Document.URL zwraca adres URL aktualnego dokumentu w przeglądarce.
<P>
<INPUT type="button" value="Zamknij to okno"
onClick="if (confirm('Czy na pewno tego chcesz?')) { window.close() }";>
Funkcja window.close() powoduje zamknięcie aktualnego okna.
<P>
<INPUT type="button" value="Połącz się..." onClick="adres=prompt('Wprowadź adres strony','http://home.netscape.com'); if (adres!=null) {location.href=adres}">
Operator != sprawdza czy lewe wyrażenie jest różne od prawego (zob. dodatki).
Location.href powoduje przejście do strony o podanym adresie.
</FORM>
</BODY>
</HTML>

W powyższym przykładzie można zauważyć, iż okienko alert nie ma wpływu na wygląd strony, czy działanie skryptu. Dzięki okienkom confirm i prompt można uzależnić wygląd swojej strony od decyzji lub danych użytkownika.

 

6 - Lista historyczna

Aby otrzymać adres URL poprzedniej strony z listy historii należy skorzystać z właściwości previous obiektu history. Adres URL aktualnej i następnej uzyskuje się zaś dzięki właściwościom current i next. Chcąc jednak przejść do tych stron trzeba posłużyć się metodą back(), go(0) lub forward() - w zależności od strony, do której chce się przejść - także obiektu history.

Poniższy przykład pokazuje jak wyświetlać teksty w różnych krojach czcionki. Dzięki poznanym metodom tworzone strony staną się bardziej czytelne i przejrzyste.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<FORM NAME="form1">
<INPUT TYPE="button" VALUE="WSTECZ" onClick="history.back()">
<INPUT TYPE="button" VALUE="Przeładuj tą stronę" onClick="history.go(0)">
<INPUT TYPE="button" VALUE="DALEJ" onClick="history.forward()">
</FORM>
</BODY>
</HTML>

Przykład:

 

Metody go(n) można używać także do wywoływania stron z innych pozycji listy historii. Jeżeli n jest liczbą ujemną, wtedy wyświetlana jest strona wcześniejsza o n względem aktualnej. Jeżeli jest liczbą dodatnią - na odwrót. Wyjątkowo przykład do tego kroku znajduje się pod jego kodem źródłowym. Jeżeli znajdowałby się w nowo otwartym oknie to jego lista historyczna byłaby pusta.

 

7 - Instrukcja wyboru

Instrukcja wyboru jest to instrukcja, która w zależności od zadanego warunku wykonuje odpowiednie polecenia. Oto jej zapis:
if (warunek) { polecenia } else { polecennia }. Jeśli warunek ma wartość true to zostaną wykonane polecenia z pierwszego nawiasu klamrowego. Jeżeli zaś warunek ma wartość false to zostaną wykonane polecenia z drugiego nawiasu. Drugi nawias wraz z instrukcją else można opuścić. Wtedy w przypadku, gdy warunek ma wartość false nie będą wykonywane żadne polecenia

Poniższy przykład pokazuje do czego służy instrukcja wyboru i jak należy z niej korzystać.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
<SCRIPT language="JavaScript">
wiek=(prompt("Wpisz w poniższe pole liczbę swoich lat.",""));
napis="";
if (wiek<150) { napis="Dobrze wyglądasz" };
if (wiek<80) { napis="Jesteś w pełni wieku" };
if (wiek<50) { napis="Czy nie jesteś jeszcze za młody na takie rzeczy ?" };
if (wiek<20) { napis="Masz tyle samo lat co ja !" };
if (wiek<10) { napis="Musisz jeszcze podrosnąć !" };
if (napis=="") {napis="Nie oszukasz mie !"};
document.write(napis);
</SCRIPT>
</HEAD>
<BODY bgcolor="#6FB20F">
</BODY>
</HTML>

Po napisaniu liczby lat i naciśnięciu OK podana wartość zostaje zapamiętana w zmiennej 'wiek'. W zależności od wartości tej zmiennej, zmienna tekstowa 'napis' przybiera różną wartość. Zmienna 'napis' jest wypisana w oknie przeglądarki.

 

8 - Pętle

Pętla jest to blok instrukcji wykonywany określoną ilość razy. Można wyróżnić dwa rodzaje pętli. Pierwszy rodzaj pętli to pętla: for(zmienna; warunki; modyfikacja_indeksu) { polecenia }, gdzie zmienna jest to wartość indeksu pętli, warunki są warunkami zakończenia pętli, a modyfikacja_indeksu jest wyrażeniem modyfikującym wartość indeksu pętli. Polecenia znajdujące się w nawiasach klamrowych będą wykonywane dotąd aż indeks przestanie spełniać warunek. Drugim rodzajem pętli jest pętla: while(warunek) { polecenia }. W tym przypadku polecenia będą wykonywane tak długo, jak długo warunek jest spełniony.

Poniższy przykład pokazuje jak używać pętli for. Dzięki niemu można zobaczyć do czego mogą się przydać pętle.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<CENTER>Tabliczka mnożenia
<P>
<TABLE border="1">
<SCRIPT language="JavaScript">
czynnik1=1;
czynnik2=1;
document.write("<TD></TD>");
for (czynnik1;czynnik1<11;czynnik1++)
Wyrażenie czynnik1++ spowoduje przypisanie tej zmiennej wartości o jeden większej. Jest to równoważne zapisowi czynnik1=czynnik1+1. Spis wszystkich operatorów przypisania znajduje się w dodatkach.
{ document.write("<TD>"+czynnik1+"</TD>");}
czynnik1=1;
for (czynnik2;czynnik2<11;czynnik2++)
{ document.write("<TR><TD>"+czynnik2+"</TD>");
 for (czynnik1;czynnik1<11;czynnik1++)
 { document.write("<TD>"+czynnik1*czynnik2+"</TD>"); }
  document.write("</TR>" height=1);
 czynnik1=1; }
</SCRIPT>
</BODY>
</HTML>

Wywołanie tego przykładu spowoduje wyświetlenie w oknie przeglądarki tabliczki mnożenia do 100.

 

9 - Funkcje

Funkcja to blok instrukcji, który będzie wykonywany dopiero po jej wywołaniu. Funkcje mogą zawierać wywołania innych funkcji. Każda funkcja musi zawierać swoją, niepowtarzającą się nazwę. Funkcje mogą też zawierać argumenty tzn. wartości od których będzie uzależnione działanie funkcji. Definicję funkcji rozpoczyna się słowem function:
function nazwa_funkcji(argumenty)
{ polecenia;
return wartość }
Definicję funkcji należy umieszczać pomiędzy znacznikami <HEAD> i </HEAD&gt. Należy pamiętać, aby argumenty oddzielać przecinkami, a polecenia średnikami. Polecenie return zwraca konkretną wartość jako wynik działania funkcji. Można go nie podawać, wtedy funkcja zwróci wartość null.

Poniższy przykład pokazuje jak i w którym miejscu definiuje się funkcje. Przedstawia również sposób wywołania funkcji z argumentem.

<HTML>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
<HEAD>
<SCRIPT language="JavaScript">
function napisz(tekst)
 { odwrotnie="";
 dlugosc=tekst.length;
Dlugosc.length jest właściwością obiektu String. Zwróci ona długość zmiennej tekstowej długosc.
 for (dlugosc;dlugosc>0;dlugosc--)
 { odwrotnie=odwrotnie+tekst[dlugosc-1]; }
Zmienna tekst[x] przyjmuje wartość znaku będącego w zmiennej tekst, przy czym x oznacza pozycję tego znaku w tej zmiennej. Uwaga! Dla pierwszego znaku zmiennej tekstowej tekst wartość x wynosi 0.
 document.forms["wpisz"].pole2.value=odwrotnie; }
Powyższy zapis spowoduje nadanie jednemu z pól, wartości wcześniej utworzonego formularza o nazwie wpisz.
</SCRIPT>
</HEAD>
<BODY bgcolor="#6FB20F">
<FORM name="wpisz">
Wpisz tu jakiś tekst:<BR>
<INPUT type="text" name="pole1" onChange="napisz(this.value)"><BR>
Zdarzenie onChange zostanie wywołane w momencie zmiany zawartości pola o nazwie pole1. Dokładny opis wszystkich zdarzeń znajduje się w dodatkach.
Ten tekst napisany od końca wygląda tak:<BR>
<INPUT type="text" name="pole2">
</FORM>
</BODY>
</HTML>

Jeżeli do pierwszego pola zostanie wpisany pewien tekst to w poniższym polu ukaże się ten sam tekst napisany od końca. Zmiana kolejności liter i wyświetlenie tekstu zawarte są w funkcji napisz(tekst). W powyższym przykładzie można zauważyć, iż nazwy zmiennych nie mogą zawierać polskich znaków (np. zmienna dlugosc).

 

10 - Tablice

Tablice są zbiorami zmiennych połączonych wspólną nazwą. Zapisanie wartości w tych zmiennych odbywa się za pomocą indeksów. Tablicę tworzy się według schematu:
tablica = new Array(wartość_1, wartość_2, ..., wartość_n);
Wartości poszczególnych zmiennych w tablicy można zmieniać. Np.:
tablica[0]= wartość_2;
tablica[1]= wartość_5
Dzięki temu do utworzonej już tablicy można definiować nowe elementy wraz z ich wartościami, a także utworzyć pustą tablicę w celu późniejszego zdefiniowania jej elementów.

Poniższy przykład pokazuje do czego służą tablice, jak należy je definiować oraz jak nadawać ich elementom wartości.

<HTML>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
<HEAD>
<SCRIPT language="JavaScript">
function sortuj()
{wyraz=new Array();
 wyraz[0]=document.forms["wyrazy"].wyr1.value;
Dzięki temu zapisowi można odwołać się do wartości każdego pola formularza.
 wyraz[1]=document.forms["wyrazy"].wyr2.value;
 wyraz[2]=document.forms["wyrazy"].wyr3.value;
 wyraz[3]=document.forms["wyrazy"].wyr4.value;
 wyraz[4]=document.forms["wyrazy"].wyr5.value;
 wyraz.sort();
Funkcja sort() powoduje alfabetyczne posortowanie elementów w tablicy.
 alfab=wyraz[0]+" "+wyraz[1]+" "+wyraz[2]+" "+wyraz[3]+" "+wyraz[4];
 document.forms["wyrazy"].posortowane.value=alfab; }
</SCRIPT>
</HEAD>
<BODY bgcolor="#6FB20F">
<FORM name="wyrazy">
Wpisz w te pola jakieś wyrazy.<BR>
<INPUT type="text" size="10" name="wyr1">
<INPUT type="text" size="10" name="wyr2">
<INPUT type="text" size="10" name="wyr3">
<INPUT type="text" size="10" name="wyr4">
<INPUT type="text" size="10" name="wyr5">
<P><INPUT type="button" value="Gotowe" onClick="sortuj()">
<P>Wyrazy te w kolejności alfabetycznej:<BR>
<INPUT type="text" size="50" name="posortowane">
</FORM>
</BODY>
</HTML>

Jeżeli w pięć górnych pól zostaną wprowadzone wyrazy to po naciśnięciu przycisku "gotowe", w dolnym polu ukażą się te wyrazy wypisane alfabetycznie.

 

11 - Formatowanie tekstu (rozmiar i kolor)

Do wyświetlania tekstu w innym niż domyślnym kolorze służy funkcja tekst.fontcolor(kolor), gdzie rozmiar jest zmienną tekstową, a kolor nazwą koloru (patrz tablica kolorów w dodatkach). Aby wyświetlić tekst powiększony lub pomniejszony należy użyć funkcji tekst.fontsize(rozmiar),gdzie rozmiar jest liczbą z przedziału od 1 do 7. Rozmiar 3 jest rozmiarem domyślnym.

Poniższy przykład pokazuje jak wyświetlać tekst w różnych kolorach i w różnych rozmiarach. Dzięki poznanym metodom na swoich stronach można umieszczać bardzo ciekawe efekty.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<SCRIPT language="JavaScript">
kolor=new Array("#00008B", "#B8860B", "#8B008B", "#FF8C00", "#8B0000", "#2F4F4F");
imie="Michał";
nazwisko="Gwóźdź";
for (i=0; i<imie.length; i++) {document.write(imie[i].fontsize(7-i).fontcolor(kolor[i]));}
document.write(" ");
for (i=0; i<nazwisko.length; i++) {document.write(nazwisko[i].fontsize(7-i).fontcolor(kolor[i]));}
</SCRIPT>
</BODY>
</HTML>

Dzięki zastosowaniu pętli każda litera będzie wyświetlona w innym kolorze i innym rozmiarze. Aby wyświetlić tekst w jakimś kolorze lub rozmiarze należy funkcję tekst.fontcolor(kolor) lub tekst.fontsize(rozmiar) użyć razem z funkcją document.write(tekst).

 

12 - Formatowanie tekstu (kroje czcionek)

Aby strony były bardziej czytelne należy, w zależności od tekstu, zmieniać krój czcionki, którą jest napisany. W JavaScript robi to się za pomocą schematu:
document.write(tekst.styl()), gdzie tekst jest dowolną zmienną tekstową, zaś styl jest rodzajem kroju lub formatu czcionki. Można używać następujących stylów: italics (kursywa), bold (pogrubienie), strike (przekreślenie), sub (indeks dolny), sup (indeks górny), blink (tekst migający).

Poniższy przykład pokazuje jak wyświetlać teksty w różnych krojach czcionki. Dzięki poznanym metodom tworzone strony staną się bardziej czytelne i przejrzyste.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<SCRIPT language="JavaScript">
document.write("To jest tekst pochylony (kursywa)<BR>".italics());
document.write("To jest tekst pogrubiony<BR>".bold());
document.write("Ten zaś jest pogrubiony i pochylony<BR>".bold().italics());
document.write("To jest tekst przekreślony<BR>.strike());
document.write("Tekst w indeksie dolnym ".sub()+" ABC ");
document.write("Tekst w indeksie górnym<BR>".sup());
document.write("Ten tekst miga".blink());
</SCRIPT>
</BODY>
</HTML>

Po uruchomieniu przykładu w oknie pokażą się teksty w różnych krojach czcionek. Ukaże się także tekst, który będzie migał. Efekt ten będą mogli zobaczyć tylko użytkownicy przeglądarki Netscape Navigator.

 

13 - Liczby losowe

Korzystanie z liczb losowych jest dosyć przydatne podczas tworzenia skryptów. Do generowania liczb losowych służy funkcja Math.random(). Ma ona jednak pewną wadę ponieważ generuje liczby losowe z przedziału od 0 do 1. Aby otrzymywać liczby z innych zakresów należy użyć funkcji Math.round(zakres*Math.random()). Funkcja Math.round służy do zaokrąglenia liczby do najbliższej liczby całkowitej. Dokładny opis obiektu Math można znaleźć w dodatkach.

Poniższy przykład pokazuje do czego przydatne mogą być liczby losowe i jak je generować.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
<SCRIPT>
function sprawdz(liczba)
{licznik++;
if (liczba==moja) {alert("Brawo! Zgadłeś za "+licznik+" razem");}
if (liczba<moja) {alert("Moja liczba jest większa");}
if (liczba>moja) {alert("Moja liczba jest mniejsza");}}
</SCRIPT>
</HEAD>
<BODY bgcolor="#6FB20F">
<SCRIPT>
licznik=0;
moja=Math.round(1000*Math.random())
</SCRIPT>
Właśnie wylosowałem liczbę z przedziału od 0 do 1000. Spróbuj zgadnąć jaka to liczba. Po wpisaniu jej w poniższe pole kliknij na przycisk znajdujący się obok niego.
<FORM name="liczba">
<INPUT type="text" name="strzal" size="5">
<INPUT type="button" value="Sprawdź" onClick="sprawdz(document.forms['liczba'].strzal.value)">
<P>
<INPUT type="button" value="Jeszcze raz" onClick="document.forms['liczba'].reset();history.go(0)">
</FORM>
</BODY>
</HTML>

 

Metody go(n) można używać także do wywoływania stron z innych pozycji listy historii. Jeżeli n jest liczbą ujemną, wtedy wyświetlana jest strona wcześniejsza o n względem aktualnej. Jeżeli jest liczbą dodatnią - na odwrót. Wyjątkowo przykład do tego kroku znajduje się pod jego kodem źródłowym. Jeżeli znajdowałby się w nowo otwartym oknie to jego lista historyczna byłaby pusta.

 

14 - Formularze

Każde pole formularza ma swój adres. Aby odnieść się do konkretnego pola w utworzonym już formularzu należy podać jego adres według schematu: document.forms["nazwa_formularza"].nazwa_pola . Każde pole formularza ma kilka właściwości. Na przykład właściwość value zwraca napis przycisku (element Button) lub tekst napisany w polu tekstowym (element Text). Dokładna lista właściwości znajduje się w dodatkach.

Poniższy przykład pokazuje jak odnosić się do konkretnych pól formularza oraz jak zmieniać ich wartości.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
<SCRIPT>
function litery(wielkosc)
{if (wielkosc=="duze") {document.formularz.imie.value=document.formularz.imie.value.toUpperCase() document.formularz.nazwisko.value=document.formularz.nazwisko.value.toUpperCase() }
Funkcja toUpperCase() zmienia małe litery na duże.
else
{ document.formularz.imie.value=document.formularz.imie.value.toLowerCase() document.formularz.nazwisko.value=document.formularz.nazwisko.value.toLowerCase() } }
Funkcja toLowerCase() zmienia duże litery na małe.
</SCRIPT>
</HEAD>
<BODY bgcolor="#6FB20F">
<FORM name="formularz">
Wpisz imię:
<INPUT type="text" name="imie" size="20"><BR>
Wpisz nazwisko:
<INPUT type="text" name="nazwisko" size="20"><P>
<INPUT type="button" value="Duże litery" onClick="litery('duze')">
<INPUT type="button" value="Małe litery" onClick="litery('male')">
</FORM>
</BODY>
</HTML>

 

Po naciśnięciu na przycisk "Duże litery" wpisane imię i nazwisko zostanie wyświetlone dużymi literami. Chcąc zamienić na małe litery należy nacisnąć przycisk "Małe litery". Użytkownicy przeglądarek w wersji innej niż polska będą mieli kłopoty przy zamianie polskich liter.

 

15 - Data i czas

Aktualną datę i czas można poznać dzięki obiektowi Date. Funkcjami umożliwiającymi to są: getDate(), getYear(), getMonth(), getHours(), getMinutes(), getSeconds(). Metody te wykorzystują datę i czas systemowy więc przy błędnych ustawieniach aktualna data i czas będzie również błędna. Aby móc korzystać z w/w funkcji należy utworzyć najpierw zmienną dla daty: zmienna = new Date().

Poniższy przykład pokazuje jak uzyskiwać aktualną datę i czas systemowy.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<FONT size="4" color="4b0082">Dzisiejsza data:</FONT><BR>
<SCRIPT language="JavaScript">
dzisiaj=new Date;
document.write("Dzień: "+dzisiaj.getDate()+"<BR>")
document.write("Miesiąc: "+,dzisiaj.getMonth()+1,"<BR>")
document.write("Rok: "+dzisiaj.getYear()+"<BR>")
document.write("Godzina: "+dzisiaj.getHours()+":"+dzisiaj.getMinutes()+"<BR>")
</SCRIPT>
</BODY>
</HTML>

 

Warto zauważyć, że JavaScript zwraca numer miesiąca od 0 do 11. Aby uzyskać więc poprawną datę należy dodać do numeru miesiąca liczbę jeden. Po uruchomieniu przykładu w oknie zostanie wyświetlona aktualna data czas.

 

16 - Ramki w dokumencie

Kiedy w dokumencie są utworzone ramki, można korzystać z funkcji i zmiennych, które są zdefiniowane w innej ramce niż obecna. Podobnie jak w przypadku pól formularzy należy podać pewien adres według schematu: parent.frames["nazwa_ramki"].nazwa_funkcji(), a w przypadku zmiennych parent.frames["nazwa_ramki"].nazwa_zmiennej.

Poniższy przykład pokazuje jak korzystać z funkcji zdefiniowanych w innych ramkach, a także jak pobierać wartości zmiennych, które nie są zdefiniowane w ramce bieżącej.

Definicja ramek <HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<FRAMESET rows="*,20%,20%">
<FRAME SRC="przyk16a.htm" SCROLLING="no" NAME="r1">
<FRAME SRC="przyk16b.htm" SCROLLING="no" NAME="r2">
<FRAME SRC="przyk16c.htm" SCROLLING="no" NAME="r3">
</FRAMESET>
</HTML>
Plik przyk16a.htm <HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<FONT size="6">
<SCRIPT language="JavaScript">
skladnik1=Math.round(1000*Math.random());
skladnik2=Math.round(1000*Math.random());
wynik=skladnik1+skladnik2;
document.write("Jle to jest "+skladnik1+" + "+skladnik2+" ?");
</SCRIPT>
</BODY>
</HTML>
Plik przyk16b.htm <HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<FORM name="dzialanie">
Tutaj wpisz wynik:
<INPUT type="text" name="suma" size="20" onChange="parent.frames['r3'].sprawdz()"><BR>
</FORM>
</BODY>
</HTML>
Plik przyk16c.htm <HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
<SCRIPT language="JavaScript">
function sprawdz()
{twoj=parent.frames['r2'].document.forms["dzialanie"].suma.value;
dobry=parent.frames['r1'].wynik
if (twoj==dobry)
{ document.forms["dobry"].poprawny.value="Twoja odpowiedź jest poprawna" }
else
{ document.forms["dobry"].poprawny.value="Niestety, suma tych liczb wynosi "+dobry } }
</SCRIPT>
</HEAD>
<BODY bgcolor="#6FB20F">
<FORM name="dobry">
<INPUT type="text" name="poprawny" size="50">
<INPUT type="button" value="Jeszcze raz" onClick="parent.frames['r1'].history.go(0);document.forms['dobry'].poprawny.value=''">
</FORM>
</BODY>
</HTML>

 

Jeżeli w środkowej ramce zostanie podana jakaś liczba, to w dolnej ramce zostanie wyświetlony komunikat dotyczący poprawności wykonania działania znajdującego się w górnej ramce.

 

17 - Operacje na rysunkach

Dane każdego obrazka umieszczonego na stronie przechowywane są we właściwości images ["nazwa_rysunku"] obiektu document. Każdy rysunek ma kilka własności, które można zmieniać w dowolnej chwili: src (nazwa pliku z obrazkiem), width i height (szerokość i wysokość obrazka).

Poniższy przykład pokazuje jak użytkownik może zmieniać obrazki pokazujące się na stronie WWW.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
<SCRIPT language="JavaScript">
function zmien(plik)
{if (plik==0) { nazwa="../rys/czysta.jpg" }
if (plik==1) { nazwa="../rys/win95.jpg" }
if (plik==2) { nazwa="../rys/word.jpg" }
if (plik==3) { nazwa="../rys/photo.jpg" }
document.images["plyta"].src=nazwa }
</SCRIPT>
</HEAD>
<BODY bgcolor="#6FB20F">
<IMG SRC="../rys/czysta.jpg" name="plyta">
<FORM>
Wybierz płytę, którą chcesz zobaczyć:
<SELECT onChange="zmien(this.selectedIndex)">
<OPTION value="czysta" selected>Czysta płyta
<OPTION value="win95">Windows 95
<OPTION value="word">Word 97
<OPTION value="photo">Adobe PhotoDeluxe
</SELECT>
</FORM>
</BODY>
</HTML>

 

Dzięki powyższym wiadomościom można teraz bez problemu tworzyć animację na swoich stronach WWW. Wystarczy w pętli zmieniać właściwość src jakiegoś rysunku, a pojawiać się będą obrazki z różnych plików.

 

18 - Informacje o przeglądarce

Obiektem umożliwiającym uzyskanie informacji o przeglądarce jest obiekt navigator. Najczęściej używanymi właściwościami tego obiektu są: appName, appVersion i language. Zwracają one nazwę przeglądarki jej wersję oraz wersję językową.

Poniższy przykład pokazuje jak uzyskiwać dane o przeglądarce.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<FONT size="4" color="4B0082">Dane twojej przeglądarki:</FONT><BR>
<SCRIPT language="JavaScript">
document.write("Nazwa: "+navigator.appName+"<BR>")
document.write("Wersja: "+navigator.appVersion+"<BR>")
document.write("Język: "+navigator.language+"<BR>")
</SCRIPT>
</BODY>
</HTML>

 

Dzięki obiektowi navigator można uzależnić wykonywanie niektórych funkcji od np. nazwy lub wersji przeglądarki. Ustrzec to może przed niepożądanymi błędami wynikającymi z niezgodności z przeglądarką.

Autor całego konspektu o JS: Michał Gwóźdź

 by Kasprzak

 

Komentarze

Prześlij komentarz