[Tut][JS]Uczymy się JavaScript (instrukcja, zdarzenia czasowe, animacja)

[bnmbb]

Witam

Dzisiejszy tutorial będzie krótki ,ale za to w końcu będzie coś w praktyce

 

Co znajdziesz tutaj :

- Instrukcje warunkowe

- Zdarzenia czasowe

- Zdarzenia powtarzające się

- Piszemy funkcję

- Tworzymy prostą animację

 

Instrukcje warunkowe

Zdarzenia warunkowe są proste w zrozumieniu. Polegają na sprawdzeniu czy warunek jest spełniony czy nie.

Do użycia instrukcji warunkowej używamy if().

Przykłady :

if(zmienna == 1) {
//Tu się dzieje cos jesli warunek jest spełniony
} else {
//Tu się dzieje cos jesli warunek nie jest spełniony (opcjonalnie)
}
if(zmienna == true) { }
if(Zmienna == 'Haha') { }
if(zmienna == true || zmienna == false && zmienna != "") {}

Zobaczcie ostatni przykład. Można go przetłumaczyć na :

Jeśli zmienna wynosi true LUB zmienna wynosi false I zmienna nie jest równa (pustce). Czyli zmienna ma cokolwiek zapisane

 

 

Zdarzenia czasowe

Zdarzenia czasowe są używane w JavaScript. Dzięki niemu możemy po 5 sekundach wywołać sobie np. alert lub jakąś instrukcję ,którą sobie zapisaliśmy

do zdarzeń czasowych wykorzystujemy setTimeout('Instrukcja jaką ma wykonać', czas w ms ile ma odczekać)

Pamiętaj ,że 1000ms = 1s

 

Możemy napisać sobie to jako przykład :

<script type="text/javascript">
setTimeout("alert('Wyskoczyłem sekundę po otworzeniu strony ');", 1000);
</script>

Jak widać po sekundzie wyskoczył nam alert

 

Zdarzenia powtarzające się

Zdarzenia powtarzające się to zdarzenia ,które powtarzają się np. co 5 sekund.

Wykorzystujemy do tego setInterval('Instrukcja jaką ma wykonać', czas w ms co ile ma ją wykonywać)

 

Dobrym przykładem jest :

<script type="text/javascript">
setInterval("alert('Wyskakuję ci co 5 sekund');", 5000);
</script>

Zapamiętaj ! nie można używać funkcji setInterval i setTimeout w tagach HTML ,a przynajmniej w niektórych przypadkach jest to niewygodne :

 

<a OnClick="setInterval('alert("Kolizja ")', 5000);">tekst</a>

 

Mam nadzieję ,że zrozumieliście setTimeout i setInterval

No ,ale przy setInterval wyskakujące coś ciągle co 5 sekund mocno denerwuje. Jak to zatrzymać ?

do tego służy nam clearInterval();

Jeśli wiemy ,że interwał jest stopowany należy mu przypisać zmienną :

var x = setInterval("alert('Wyskakuję ci co 5 sekund'); clearInterval(x);", 5000);

W ten sposób wyskoczy nam TYLKO JEDEN alert ponieważ tuż po nim stopujemy interwał.

 

Piszemy funkcję

Najpierw powiedzmy sobie do czego można używać funkcję :

Funkcję można używać jako dobry zamiennik długiego tekstu w niewygodnym miejscu.

Funkcję należy pisać gdy używamy więcej niż jednej funkcji JS

Osoby znające PHP nie będą miały większego problemu

 

Przykład funkcji :

 

function alertek(tekst) {

alert(tekst);

}

 

dzięki temu możemy zamiast funkcji alert stosować funkcję alertek()

Użycie wyżej podanej funkcji w HTML :

<a OnClick="alertek('To jest mój tekst ');">Jakiś tekst</a>

 

Uwaga !Tak jak w PHP w funkcji możemy dać function alertek($tekst = 'coś tam') tak w JS nie możemy tego robić !

 

To na tyle. Jak macie pytania to piszcie

 

Tworzmy prostą animację

Przed rozpoczęciem upewnij się ,że wiesz i rozumiesz :

- Jak pobrać element

- Co to są zdarzenia powtarzające się i jak je uruchomić i zatrzymać

- Co to są funkcje

- Jak zmieniać styl elementu

- Co to instrukcja warunkowa

- Znasz właściwość opacity z CSS

 

Jeśli potrafisz i rozumiesz to co zapisałem powyżej przejdź dalej

 

Dobrze. Stwórzmy sobie w CSS czarny kwadrat taki np. 32x32 pixele. Ja stosuję taki kod :

<div style="background-color: black; width: 32px; height:32px;" id="1"></div>

Dobrze teraz nad div'a piszemy sobie deklarację javaScriptu (<script type="text/javascript"></script>)

a w niej :

 

Jeśli przepisaliście to wszystko jest dobrze

Manipulujemy tutaj właściwością opacity. By wywołać tą funkcję wystarczy divovi/bodemu nadać atrybut OnLoad i w nim napisać :

blinking(Id elementu);

 

Więc nasz kod wygląda tak :

 

w 99% będzie wam działało

Okej opiszmy sobie skrypt :

Na początku ustawiamy ,że obiekt ma zanikać i ustawiamy widoczność 100% i definiujemy obiekt.

Następnie piszemy funkcję blinking przyjmującą warunek elemenst_ID.

W funkcji pobieramy elemenet i sprawdzamy czy ma zanikać. Jeśli tak to zanika do połowy widoczności ,a następnie zaczyna pokazywać element .

Nasz obiekt zmniejsza przeźroczystość o 1% co 3 setne

 

Jakieś pytania ? Pisz !

[Twistekxx]

Wielkie dzięki, kiedyś tego szukałem ( i nie znalazłem więc sobie odpuściłem to co robiłem )

ale na pewno się przyda w przyszłości

[DoDomeno]

O właśnie Zdarzenie czasowe mi się przydało ale nie do końca zrozumiałem ;D

Like leci za prace !

 

 

 

 

PS: Co w nastepnym [Tut] <---

[bnmbb]

Zaraz napiszę

PS: Sory ,ale nie wiem czemu zdublował się temat :/

 

Edit: Wiesz ,że nie wiem ? Jakaś propozycja ? Chyba zrobię dla was walidację formularza

[DoDomeno]

@

Napisz tut o czasie np. do pracy co jest potrzebny albo do czegos innego np. na wyprawe (misja)

[Sodema]

Wytłumacz mi o co chodzi z tymi TRUE oraz FALSE.

Kiedy mam to użyć?

[bnmbb]

Patrz. Najprościej - wszystko co jest dobrze napisane ma domyślnie również zazwyczaj wartość true. Najlepszym przypadkiem będzie confirm() ,który gdy naciśniemy OK zwraca True ,a jak Anuluj - False :

if(confirm('Kliknij coś tylko nie ten czerwony X ') == true) {
alert("Kliknąłeś OK");
} else {
alert("Kliknąłeś anuluj");
}

Zapis

if(confirm('Kliknij coś tylko nie ten czerwony X ') == true)

jest jednym z 2 poprawnych zapisów. Drugim jest :

if(confirm('Kliknij coś tylko nie ten czerwony X '))

 

Zapis przy kliknięciu Anuluj (zwróceniu FALSE) w tym stylu wygląda tak :

if(!confirm('Kliknij coś tylko nie ten czerwony X '))

 

(Zapis ten jest również poprawny w PHP i pewnie nie tylko).

 

True i False są naprawdę rzadko używane

[Sodema]

Czyli nie muszę tak często na nich operować?

[bnmbb]

No operujesz tyle ile chcesz - twoja wola.