Co to jest Javascript?

JS jest to interpretowany skryptowy język programowania wykonywany po stronie klienta.

Czy są jakieś zasady programowania w dobrym stylu? Co to znaczy programować w dobrym stylu?

Oczywiście, że są takie zasady. Wiąże się to z pracą w zespole. Wtedy wiele osób ogląda nasz kod źródłowy / skrypt. Czasem jak otwieramy nasz stary kod to łatwiej będzie się nam odnaleźć jak będą komentarze, wcięcia, niż jakby ich nie było.

Kilka zasad programowania w dobrym stylu:

• każdą instrukcję piszemy w oddzielnym wierszu,
• dla czytelności kodu stosujemy wcięcia,
• stosujemy komentarze,
• używamy zrozumiałych nazw zmiennych,
• używamy notacji camelCase lub innej notacji,

Składnia języka JS:

• każdą instrukcję oddzielamy średnikiem [ ; ],
• komentarze mogą składać się z jednej linii lub wielu linii [ // ] [/* */ ],
• wielkość liter w nazwach zmiennych ma znaczenie,

Co to jest JavaScript?

JavaScript to skryptowy język programowania wykonywany przez przeglądarkę po stronie klienta.

Co można robić za pomocą JS?

Za pomocą JS możemy:

• zmieniać dynamicznie wygląd wybranych elementów (wielkość tekstu, kolor, tło itp.)
• wykonać walidację formularzy wypełnianych przez użytkowników, ale nie zwalnia nas to z obowiązku walidacji wysłanych danych po stronie serwera. Jak sami wiecie są różni użytkownicy Internetu i na pewno znajdzie się bardzo wielu, którzy będą chcieli „sprawdzić” Waszą stronę
• wysyłać żądania poprzez AJAX (Asynchronous JavaScript and XML). Jest to technika tworzenia aplikacji internetowych, w której interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu.

Miejsca umieszczania skryptów w dokumencie HTML:

• w sekcji dokumentu HTML,
• w jakimkolwiek miejscu dokumentu HTML,
• na końcu dokumentu HTML.

Sposoby umieszczania skryptów JS w HTML:

• używając znacznika , a cały skrypt znajduje się bezpośrednio w dokumencie HTML, (skrypt osadzony):
  np.: <script> ... </script>
• importując kod skryptu z zewnętrznego pliku .js:
  np.: <script type="text/javascript"> ... </script>
  atrybut type jest wymagany w HTML 4, ale opcjonalny w HTML 5

Instrukcją odpowiedzialną za wyświetlenie tekstu na stronie w javascript jest instrukcja document.write(). Żeby wyświetlić tekst na stronie należy go umieścić w nawiasach okrągłych i w cudzysłowie:

document.write("tekst do wyświetlenia");

Na końcu każdej instrukcji należy umieścić średnik. Instrukcja document.write() mówi przeglądarce, żeby wykonała metodę write na obiekcie document. Obiekt document reprezentuje aktualną stronę. Przykład: Wpisz po znaczniku body taki skrypt i sprawdź działanie:

<script>
	document.write("pierwszy skrypt");
</script>

Instrukcja document.write pozwala również na wyświetlanie wartości liczbowych: document.write(31); Można również łączyć ze sobą kilka ciągów znaków z wartościami liczbowymi:

document.write("to jest pierwszy ciąg znaków " + 120 + "to jest drugi ciąg znaków");

Ćwiczenie: Proszę o wpisanie takiego skryptu i przeanalizowanie jego działania:

<script>
    document.write("Jan Kowalski: ");
    document.write("Wiek - " + 31 + " lat");
    document.write("Wzrost - " + 1.70 + " m");
    document.write("Waga - " + 90.9 + " kg");
</script>

Typy danych w JS:

W JS jest kilka typów danych i można na nich wykonywać operacje:

• liczby (Number),
• ciągi znaków (String),
• wartości logiczne (Boolean),
• obiekty (Object),
• tablice (Array),
• typy specjalne: Null, Undefined.

Każdy z tych typów można przypisać do zmiennej.

typ liczbowy – w porównaniu z innymi językami programowania nie uwzględnia on podziału na liczby całkowite i zmiennoprzecinkowe. Umożliwia wprowadzanie liczb w postaci dziesiętnej (np. 16), ósemkowej (np. 020) lub szesnastkowej (np. 0xF) dozwolona jest również notacja wykładnicza w postaci X.YeZ, gdzie X stanowi część całkowitą, Y część dziesiętną, z Z jest wykładnikiem potęgi liczby 10 (np. 0.16e2),

ciągi znaków (typ łańcuchowy) – to dowolne ciągi znaków. Należy umieścić je w cudzysłowie lub w apostrofach. W ciągach znaków mogą również wystąpić znaki specjalne np.:

Przykład zastosowania sekwencji znaków.

Łańcuchy znaków to obiekty typu String. Na tych obiektach możemy wywoływać różne metody. W tabeli zawarte są najczęściej używane:

Typ logiczny może przyjmować jedną z dwóch dostępnych wartości: true oraz false. Jest stosowany głównie przy budowaniu wyrażeń logicznych lub do porównywania danych. Typ obiektowy służy do reprezentacji obiektów. Najczęściej wykorzystuje się obiekty wbudowane oraz udostępniane przez przeglądarkę, ale nic nie stoi na przeszkodzie, aby stworzyć własny typ obiektowy.

Typ tablicowy. Tablice w JS obsługiwane są przez klasę Array. Obiekt tej klasy, czyli tablicę, możemy tworzyć na trzy sposoby:

• var tabl = new Array(); //pusta tablica
• var tabl = new Array(10); //utworzenie tablicy 10 elem.
• var tabl = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); //utworzenie tablicy z podaniem elementów, które mają się w niej znaleźć.

Możemy również utworzyć tablicę stosując nawiasy kwadratowe:

• var tabl = [ ];
• var tabl = [ 10 ];
• var tabl = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Aby pobrać wartość pierwszego elementu tablicy należy posłużyć się składnią: tabl[0]. W nawiasy kwadratowe wpisujemy indeks elementu, który chcemy pobrać. Indeksy numerowane są od zera. Są również tablice wielowymiarowe i asocjacyjne.

Typy specjalne dzielą się na dwa rodzaje:

• null – określa wartość pustą,
• undefined – określa wartość niezdefiniowaną. Można go przypisać do zmiennej bezpośrednio lub przyjmuje go zmienna, która nie została zainicjowana – nie przypisano do niej żadnej wartości.

Co to jest zmienna?

Zmienna jest to element programu pozwalający na przechowywanie danych różnych typów. W JavaScript nie wymaga się podania typu zmiennej podczas jej deklaracji. Ponadto typ zmiennej może ulec modyfikacji podczas wykonywania skryptu np. zmienne typu łańcuchowego (String) możemy przypisać wartość logiczną (Boolean).

Jak się deklaruje (ustawia) zmienne?

Deklaracja zmiennej odbywa się przez nadanie jej jednoznacznej nazwy, przez którą jest identyfikowana. Przed nazwą należy wprowadzić instrukcję var (variable – zmienna). Zasady w nazewnictwie zmiennych:

• nazwa zmiennej musi zaczynać się od litery, lub od znaku podkreślenia [ _ ],
• w nazwie można używać cyfr, np.: zmienna1, zmienna2
• wielkość znaków w nazwie ma znaczenie, (zmienna i ZMIEnna to dwie różne zmienne)
• nazwa zmiennej nie może być słowem kluczowym np.: function, var, alert,
• w nazwach zmiennych nie używamy polskich liter np.: ą, ć, ę,
• nazwa zmiennej nie może zawierać spacji.

Skrypt pokazujący jak zachowują się zmienne.

<script>
    var zmienna_a = 3;
    document.write(zmienna_a+"<br />");
    document.write(zmienna_a+"<br />");
    zmienna_a = true;
    document.write(zmienna_a+"<br />");
    zmienna_a = "Ala ma kota";
    document.write(zmienna_a+"<br />");
</script>

Do czego wykorzystywane są operatory arytmetyczne?

Operatory arytmetyczne wykorzystywane są do wykonywania operacji matematycznych na zmiennych (i nie tylko zmiennych).

Skrypt pokazujący działanie operatorów arytmetycznych:

<script>
    var a = 4;
    var b = 3;
    document.write("a = " + a +"<br />");
    document.write("b = " + b +"<br />");
    document.write("a + b = " +(a + b) +"<br />");
    document.write("a – b = " +(a - b) +"<br />");
    document.write("a * b = " +(a * b) +"<br />");
    document.write("a / b = " +(a / b) +"<br />");
    document.write("a % b = " +(a % b) +"<br />");
</script>

Operator łańcuchowy pozwala na łączenie dwóch ciągów znaków w jeden. Stosuje się w tym celu „+”, przykład:

"text1" + "tekst2" //wynik działania text1tekst2

Operatory bitowe związane są z wykonywaniem operacji na bitach. Na odpowiednich bitach zmiennych wykonywane są operacji algebry logicznej. Najpowszechniej chyba spotykanym przypadkiem stosowania wartości bitowych są wszelkiego rodzaju systemy uprawnień.

Operatory bitowe traktują swoje argumenty jako zbiory 32 bitów, a nie jak liczby dziesiętne, szesnastkowe, czy ósemkowe. Na przykład binarny zapis liczby dziesiętnej 9 to 1001. Operatory bitowe dokonują swoich operacji na takich właśnie reprezentacjach dwójkowych, ale zwracają standardowe wartości liczbowe JavaScript.

Operatory przypisania.

Operatory inkrementacji i dekrementacji

Operatory porównania – wykorzystuje się je do porównania dwóch argumentów. W wyniku podawana jest wartość true, jeżeli zależność jest prawdziwa lub wartość false, jeżeli warunek nie został spełniony.

Operatory logiczne

Instrukcja warunkowa określa, który z fragmentów programu zostanie wykonany w zależności od spełnienia określonych warunków. Ogólna postać instrukcji warunkowej.

if (warunek) {
    instrukcje;
}

Instrukcja warunkowa z blokiem else

if (warunek) {
    instrukcje;
}else{
    inne_instrukcje;
}

Instrukcja przetwarzania warunkowego pozwala na łatwa i szybkie zastąpienie bloku if..else. Można powiedzieć, że stanowi jego skróconą wersję. Jeżeli wynikiem działania warunku jest wartość true, to zostanie wykonana pierwsza instrukcja. Jeżeli warunek nie zostanie spełniony i przyjmie wartość false, zostanie wykonana instrukcja_2

    (warunek) ? {instrukcja_1}:{instrukcja_2}

Prosty skrypt pokazujący działanie instrukcji przetwarzania warunkowego:

<script type="text/javascript">
    var x = prompt("Podaj liczbę", "");
    x = (x%2==0) ? "parzysta" : "nieparzysta";
    document.write("x to liczba " + x);
</script>

Czasem się zdarzy, że trzeba byłoby kilkukrotnie sprawdzać warunek czy zmienna przyjmuje odpowiednią wartość. Na przykład weźmy, że w zależności od wartości zmiennej x będziemy wykonywać inne operacje. Dla instrukcji warunkowej if wyglądałoby to mniej więcej tak:

if (x==0){
    instrukcja_1;
}
if (x==1){
    instrukcja_2;
}
if (x==2){
    instrukcja_3;
}

Jak sami widzicie nie wygląda to zbyt elegancko. Z pomocą przychodzi nam konstrukcja switch. Powyższe instrukcje if można zamienić na:

switch (x){
    case 0 : instrukcja_1;break;
    case 1 : instrukcja_2;break;
    case 2 : instrukcja_3;
}

W konstrukcji switch można dopisać blok default. Wykonuje się on wtedy, kiedy żaden warunek nie jest spełniony:

switch (x){
    case 0 : instrukcja_1;break;
    case 1 : instrukcja_2;break;
    case 2 : instrukcja_3;break;
    default: instrukcja_4;
}

Instrukcja break odpowiedzialna jest za wyjście z konstrukcji switch po znalezieniu opcji. Jeżeli nie byłoby break instrukcje następujące po znalezionej opcji wykonałyby się jedna po drugiej. Na ostatniej opcji nie jest wymagana instrukcja break.

Czasem zachodzi potrzeba, żeby sprawdzić warunek w sekcji else. Robi się to poprzez konstrukcję

if (x){
    instrukcja_1;
}
else if(y>0){
    instrukcja_2;
}

Pętla for jest chyba najczęściej stosowaną pętlą w JS.

Składnia pętli for:

for(inicjalizacja; warunek_wyjścia; wyrażenie_modyfikujące){
	wykowywane intrukcje;
}

Opis poszczególnych elementów:

• inicjalizacja – instrukcja wykonywana tylko raz na samym początku pętli. Zwykle używa się jej do przypisania wartości początkowej do zmiennej, która np. będzie zwiększana po każdym obiegu pętli. Zmienna taka zwykle nazywana jest licznikiem pętli
• warunek_wyjścia – dowolny warunek, który będzie sprawdzany przed każdym obiegiem pętli, także tym pierwszym. W momencie, gdy warunek zwróci false wykonywanie pętli zostanie przerwane,
• wyrażenie_modyfikujące – instrukcja, która będzie wykonywana po każdym obiegu pętli. Zwykle jej zadaniem jest zwiększenie wartości zmiennej pełniącej rolę licznika pętli.

Przykład pętli for, która wypisze kolejne cyfry od 0 do 9

for (i = 0; i < 10; ++i){
	document.write(i)
}

Każdy z trzech elementów znajdujących się wewnątrz okrągłych nawiasów pętli for może być bardziej skomplikowanym wyrażeniem, np.:

for (n = inicjuj(); czy_kontynuowac(n); n = wylicz_nastepny(n))
    wykonaj_fukcje(n);

Można również napisać pętlę, która posiada kilka liczników lub inaczej mówiąc wykonuje kilka instrukcji. Można to zrobić w częściach inicjalizacja i wyrażenie_modyfikujące, poprzez rozdzielenie wyrażeń za pomocą przecinka. Aby zrobić coś takiego w części warunek_wyjścia należy zastosować operatory logiczne

for(i = 0, j = 1; i < 10; ++i, j+=4)
	document.write(i + j);

Pętle można zagnieżdżać. Przykład wypisze wszystkie iloczyny liczb od 0 do 9

for (i = 0; i < 10; ++i)
	for (j=0; j < 10; ++j)
		document.write(i * j);

Wszystkie elementy pętli for, czyli inicjalizacja, warunek_wyjścia i wyrażenie_modyfikujące są opcjonalne i można je pominąć. Należy jednak pozostawić średniki. Przykład pętli poniżej jest prawidłowy:

for( ; ; )
	document.write(":D");

Jest to tak zwana pętla nieskończona. Będzie się ona wykonywać w nieskończoność, albo do zamknięcia okna, karty przeglądarki. Rzadko się stosuje taki rodzaj pętli. Nowoczesne przeglądarki posiadają zabezpieczenie przed długo działającymi skryptami i po jakimś czasie zadają pytanie czy przerwać skrypt.

Takie pętle jak pisałem wcześniej rzadko się stosuje, ale nadal z takiej pętli można wyjść „od środka”. Pętla sama się nie zakończy ale możemy ją przerwać stosując instrukcję break. Kolejny przykład pokazuje jej użycie. Zauważcie, że w pętli nie ma części warunku_wyjścia.

for(i = 0; ; ++i){
	if (i == 10)
		break;
	document.write( i );
}

Pętla powyżej zakończy się w chwili jak zmienna i osiągnie wartość 10. Inne instrukcje, które powodują wyjście z pętli to return (powrót z funkcji) i throw (rzucenie wyjątku).

Kolejną instrukcją, którą należy znać to continue. Wykonanie tej instrukcji powoduje, że pętla od razu wykonuje część wyrażenie_modyfikujące i rozpoczyna kolejną iterację, czyli przejście. W ten sposób można na przykład wyświetlić tylko liczby parzyste.

for (i = 0; i < 100; ++i){
	if (i % 2 != 0)
		continue;
	document.write( i )
}

Pętla for/in. Pętla ta służy do łatwego wyliczania kolejnych elementów tablic i właściwości obiektów. Składnia:

for (zmienna in tablica_lub_obiekt){
	instrukcja_1;
	instrukcja_2;
}

Przykład wypisania zawartości tablicy przy użyciu pętli for/in:

tablica = Array( 'a', 'b', 'c', 'd' );
for (n in tablica)
{
    document.write(tablica[n]);
}

Zadania. Przy użyciu instrukcji document.write("#") i pętli wyświetlić w przeglądarce:

• linię składającą się z ośmiu znaków #:
  

  ########

• trójkąt o dolnej podstawie pięciu #:
  

  #
  ##
  ###
  ####
  #####
  

• prostokąt zbudowany ze znaków # o wymiarach 3 x 7:

  #######
  #######
  #######
  

• odwróconą choinkę ze znaków # o górnej podstawie 9

  #########
   #######
    #####
     ###
      #
  

• choinkę ze znaków # o podstawie 9

      #
     ###
    #####
   #######
  #########
  

Zadanie: zrobić tabliczkę mnożenia używając tabeli w HTML

Pętla while wykonuje się dopóki sprawdzany warunek będzie prawdziwy. Składnia pętli while wygląda następująco:

while (warunek) {
	//instrukcje, które będziemy wykonywać w pętli
}

Jak widzicie warunek jest sprawdzany przed wejściem do pętli, czyli może się zdarzyć, że pętla może się nigdy nie wykonać. Ważnym jest, aby warunek, który sprawdzamy po każdorazowym przejściu mógł być kiedyś fałszywy. Unikniemy pętli, która nigdy się nie zakończy. Przykład użycia pętli while. Skrypt będzie wypisywał liczby podzielne przez 5. Skrypt zacznie szukać liczb podzielnym przez 5 od 1 do 99:

<script type="text/javascript">
var x = 1;
	while (x<100){
		if (x%5 == 0){
			document.write(x+', ');
		}
		++x;
}
</script>

Oczywiście w pętli tej można również użyć instrukcji break i continue. Zasada działania tych instrukcji jest taka sama jak w pętli for.

Zadania do wykonania

• Wypisać wszystkie dzielniki liczby 912 używając pętli while.
• Policzyć sumę wszystkich liczb od 1 do 100 używając pętli while.