JavaScript

JavaScript

2informatyka +

• JavaScript, to język programowania, obsługiwany przez wiele współczesnych przeglądarek WWW

– Internet Explerer

– Opera

– Safari

– Firefox

– Google Chrome

– Konqueror

Na co pozwala?

3informatyka +

• JavaScript (JS) pozwala m. in. na:

– dynamiczne modyfikowanie zawartości stron

– reagowanie na akcje podejmowane przez użytkownika (kliknięcie, wpisanie tekstu, ruch myszką)

– przeprowadzanie obliczeń

• Podczas tych zajęć pokażemy wykorzystanie wszystkich tych elementów

4informatyka +

Wykorzystajmy JS jako kalkulator:

<html>

<head><title>kalkulator</title></head>

<body>

<script type="text/javascript">

document.write(3*(2+1));

alert(3*(2+1));

</script>

</body>

</html>

Jak działa?

5informatyka +

• Jak to działa?

– przeglądarka próbuje wyświetlić stronę napisaną w HTML

– napotyka na znacznik script

– zaczyna interpretować program zawarty w znaczniku script

– funkcja document.write – wpisuje argument do wyświetlanego okienka

– funkcja alert – pokazuje nowe okienko

Znacznik script

6informatyka +

• Popatrzmy na znacznik script

– type = 'text/javascript' – czyli program jest w javascripcie, ale czy mógłby być w innym języku?• teoretycznie tak, np. konqueror pozwala na

dołączanie programów w pythonie

– a co zrobić z przeglądarką, która nie obsługuje javascriptu?• użyć znacznika noscript

Dołączanie zewnętrznych JS

7informatyka +

• Niekiedy chcemy oddzielić programy w JS od stron HTML.

• Czy program w JS może być w oddzielnym pliku?

– Tak. Używamy w tym celu atrybutu src:

<script type="text/javascript" src="skrypt.js">

</script>

CSS

8informatyka +

• Będziemy chcieli pokazać, jak wykorzystać JS do zmian wyglądu strony internetowej, ale najpierw musimy zastanowić się jak w ogóle opisywać wygląd stron?

• Do opisywania wyglądu stron służy język CSS.

• Podobnie jak JavaScript, CSS jest obsługiwany przez większość przeglądarek WWW.

Jak wygląda?

9informatyka +

<link rel="stylesheet"

href="p2.css" type="text/css">

<body>

<h1>Duże</h1>

<h2>Średnie</h2>

<h3>Małe</h3>

</body>

Ale czy na pewno?

Co można nim zrobić?

10informatyka +

A może to będzie wyglądać tak?

Za pomocą CSS można uzyskać taki efekt.

CSS - budowa

11informatyka +

• Plik CSS składa się z par

opis elementu {właściwości}

• opis elementu (selektor) może być m.in:

– nazwą znacznika (np. h1) i wtedy pasuje do wszystkich znaczników h1

– nazwą klasy poprzedzoną kropką (np. .czerwone) i wtedy pasuje do elementów tej klasy (np. <h1 class='czerwone'>)

– identyfikatorem elementu poprzedzonym znakiem # (np. #x1) i wtedy pasuje tylko do tego elementu (np. <h1 id='x1'>)

CSS - przykład

12informatyka +

• właściwości są opisywane w postaci:

nazwa: wartość;

np.

color: red;

background-color: green;

Popatrzmy na przykład:

p3.html

CSS możliwości

13informatyka +

• zmiana atrybutów wizualnych (kolory, czcionki, odstępy, podkreślenia, pogrubienia, tło, ...)

• zmiana pozycji (wyżej, niżej, względem innego elementu)

• wyświetlanie elementów w postaci bloków

• wyświetlanie elementów pływających

• ... i wiele innych ...

CSS – różne właściwości

14informatyka +

• background-color: kolor tła

– lista kolorów: http://www.w3schools.com/css/css_colornames.asp

– kolory można podawać w formacie #FFFFFF

• font-weight: czy czcionka ma być pogrubiona (bold)

• text-decoration: możliwość podkreślenia

• margin: cztery (top, bottom, left, right) marginesy

• border: ramki (np. border-top: 2px solid red)

• padding: odstęp od ramki

• width, height: szerokość i wysokość elementu

CSS w życiu

15informatyka +

• Tak naprawdę, CSSy są bardziej skomplikowane:

– selektory pozwalają więcej wyrazić

– istnieją reguły skrótowe

– reguły mogą być sprzeczne

– istnieje hierarchia ważności CSS

– ale dla naszych potrzeb to wystarcza

• Zainteresowanym polecam setki artykułów w internecie.

CSS + JS

16informatyka +

• Jak połączyć CSS i JS?

– można pisać w „czystym” JS, ale może nam to sprawić kłopoty z kompatybilnością przeglądarek

– można wykorzystać jedną z wielu dostępnych bibliotek, my użyjemy jQuery

Przykład 1

17informatyka +

• Popatrzmy na przykład jq1.html

$(document).ready(function(){ ... }

W miejsce trzech kropek wstawiamy funkcję, która zostanie wywołana automatycznie po załadowaniu dokumentu.

$(”a”).click(function(event){ ... }

W miejsce trzech kropek wstawiamy funkcję, która zostanie wywołana po kliknięciu na dowolny link. Zamiast ”a” możemy napisać dowolny selektor CSS!

Przykład 1 c.d.

18informatyka +


Przyjrzyjmy się funkcji. Dostaje ona parametr. Tym parametrem jest opis zdarzenia, które wywołało kliknięcie. Większość zdarzeń można zatrzymać za pomocą metody preventDefault(). Spróbujmy dodać

event.preventDefault();

do naszej funkcji. Co się stanie?

Funkcje w JS

19informatyka +

• funkcję oznacza słowo kluczowe

function()

• funkcje mogą przyjmować parametry

• funkcje mogą być nazwane:

function wypisz (tekst)

• parametry funkcji nie są sprawdzane, więc poprawne zarówno wypisz() jak i wypisz(1, ”a”)

Przykład 1 c.d.

20informatyka +


Widzimy teraz, że używamy funkcji nienazwanej. Funkcję tą, stosujemy do wszystkich elementów ”a”, czyli do wszystkich odnośników, ale gdybyśmy napisali:

$(”#a1”).click(function(event){ ... }

to okazałoby się, że funkcja ta jest stosowana jedynie do elementów pasujących do ”#a1”, czyli do elementu o identyfikatorze a1.

Ustawianie klas CSS

21informatyka +

$("#tu").removeClass("green");

$("#tu").addClass("red");

ten fragment programu usuwa z elementu o identyfikatorze tu klasę green i ustawia temu samemu elementowi klasę red. Jeśli element nie ma wcześniej klasy green, to nic złego się nie dzieje. W ten sposób element tu stanie się czerwony.

Ustawianie zawartości

22informatyka +

$("#tu").html("No i<hr><strong>Udało się</strong>");

ten fragment programu ustawia zawartość elementu tu na wartość No....się. Zwróćmy uwagę na to, że ten fragment jest napisany w HTML i są zachowanie zarówno formatowanie (belka pozioma) jak i własności CSS jeśli są ustawione.

Efekciarstwo

23informatyka +

$("#toggle").click(function(event){

$("#tu").toggle(); }

po kliknięciu przycisku toggle uruchamia się efekt toggle (czyli na przemian show i hide). W ten sposób możemy pokazywać i ukrywać elementy. Pozostałe efekty działają podobnie ale bardziej widowiskowo.

Ustawianie właściwości

24informatyka +

$("#p1").click(function(event){

$("#tu").css('margin-left', '200px'); });

wcześniej dowiedzieliśmy się jak ustawiać elementom klasy. Teraz możemy zobaczyć w jaki sposób elementom można ustawiać pojedyncze własności. W tym przypadku ustawiamy lewy margines na 200px co sprawia, że element odsuwa się w prawo.

Podsumowanie manipulacji wyglądem i zawartością

25informatyka +

Potrafimy już:

• Potrafimy już dynamicznie:

– obsługiwać kliknięcia myszki

– nadawać elementom klasy

– ustawiać elementom właściwości

– zmieniać zawartość elementów

– stosować proste efekty

Czas na programowanie

26informatyka +

Będziemy chcieli się nauczyć częściowo o:

• zmiennych

• obsłudze napisów

• niektórych instrukcjach

• używaniu tablic

To pozwala na pisanie całkiem skomplikowanych programów, chociaż jest tylko niewielkim wstępem do możliwości oferowanych przez JS.

Zmienne

27informatyka +

Zmienne przechowują wartości dowolnych typów. Jeśli zmienna nie została użyta w programie to ma wartość undefined

Problemem sprawiającym dużo kłopotów jest to, iż wszystkie zmienne są globalne, chyba że zostaną zadeklarowane wewnątrz funkcji za pomocą słowa kluczowego var.

Popatrzmy na przykład na następnym slajdzie.

Lokalność zmiennych

28informatyka +

function a()

{ var i = 1 }

function b()

{ i = 2 }

i = 3;

a();

alert(i); // wypisuje 3

b();

alert(i); // wypisuje 1

Typy zmiennych

29informatyka +

• Liczby różnią się od napisów.

• Napisy zapisujemy ”w cudzysłowach” lub 'tak'

• Nie musimy przejmować się konwersją liczb całkowitych i zmiennoprzecinkowych.

• Operator ”+” dodaje liczby ale łączy (konkatenuje) napisy.

• JS sam domyśla się, czy coś powinno być liczbą czy napisem.

• Istnieje prawda (true) i fałsz (false).

Różne wyrażenia

30informatyka +

alert(1+2); // 3

alert("1"+'2a3'); // "12a3"

alert(1/2); // 0.5

alert(3%2); // 1 (reszta z dzielenia 3 przez 2)

alert(1+2*3); // 7

alert(1+"2"); // 12 (zamienił 1 na "1")

alert(1+2==3); // true

alert(3>=4); // false

Instrukcja for

31informatyka +

• Instrukcja for służy do wielokrotnego powtarzania tego samego fragmentu programu (pętla)

s = ''

l = 0;

for(i = 2; i < 10; i = i + 2)

{

s = s + i;

l = l + i;

}

alert(s); // '2468' - napis

alert(l); // 20 - liczba

Instrukcja if

32informatyka +

• Instrukcja if służy do wykonania fragmentu programu w zależności od tego czy coś jest prawdą, czy nie.

i = 2;

if (i > 2)

{ alert('więcej') }

else if (i < 2)

{alert('mniej')}

else

{alert('równo')}

Instrukcja return

33informatyka +

• Instrukcja ta służy do zwrócenia wartości funkcji

function ustaw() {

var a = 2 + 3;

return a;

}

x = ustaw();

alert(x); //5

Inne instrukcje

34informatyka +

• JavaScript obsługuje wszystkie instrukcje typowe dla języków podobnych do C, C++ i Javy:

– while (warunek) {}

– switch (wyrazenie) { case wartosc: }

– break

– continue

– try catch

• Nie zdążymy nauczyć się tu wszystkich :(

• Ale to co umiemy wystarczy nam do programowania

Napisy

35informatyka +

• napis[3] – czwarta litera napisu

• napis.length – długość napisu

• napis.indexOf('b')) – pierwsze wystąpienie b lub -1 jeśli b w napisie nie występuje

• napis.lastIndexOf('a') – ostatnie wystąpienie a

• napis.substr(1,3) – fragment napisu od drugiej litery zawierający trzy znaki

Przykłady użycia napisów

36informatyka +

napis = "ab" + "ca";

alert(napis); //abca

alert(napis == 'abca'); //true

alert(napis[3]); // a

alert(napis.length); // 4

alert(napis.indexOf('b')); // 1

alert(napis.indexOf('e')); // -1

alert(napis.lastIndexOf('a')); // 3

alert(napis.substr(1,2)); // bc

Obsługa liczb

37informatyka +

• Math.abs(a) // wartość bezwzględna a

• Math.ceil(a) // sufit a

• Math.floor(a) // podłoga a

• Math.max(a,b) // maksimum z a i b

• Math.min(a,b) // minimum z a i b

• Math.pow(a,b) // a do potęgi b

• Math.random() // pseudolosowa liczba od 0 to 1

• Math.round(a) // zaokrąglenie a

• Math.sqrt(a) // pierwiastek kwadratowy z a

Obsługa tablic

38informatyka +

• new Array(6) – stworzenie tablicy o sześciu elementach

• a[3] – czwarty element tablicy

• a.length – rozmiar tablicy

• a.push('cd') – dodanie elementu cd na koniec tablicy

• a.pop() - usunięcie elementu z końca tablicy i jego zwrócenie

• a.indexOf('ab') – szukanie elemenu ab w tablicy

• a.splice(2,5) – usunięcie pięciu elementów począwszy od trzeciego elementu z tablicy

Przykłady użycia tablic

39informatyka +

a = new Array(3);

a.push('a');

alert(a.length); //4

alert(a.pop()); a

alert(a.length); //3

a[0] = 'o';

a[2] = 2;

alert(a.toString()); // o,,2

a.splice(1,1);

alert(a.indexOf(2)); // 1

Koniec.

40informatyka +

Dziękujemy.Pytania?

JavaScript

Documents

Transcript of JavaScript