[Tut][JS]Uczymy się JavaScript (elementy i zmienne)

[bnmbb]

Witam w 2 części kursu JavaScript.

O czym dziś sobie powiemy ? :

- Co to są zmienne

- Jak Deklarować zmienne

- Jak użyć zmienną w kodzie JavaScript

 

Co więcej powiemy sobie o :

- Jak pobrać Element

- Jak ustawić atrybuty dla elementu

- Jak zmienić styl lub klasę elementowi

- Jak usunąć element ?

 

Więc zacznijmy !

 

Zmienne :

Jak pewnie osoby znające inne języki wiedzą ,że zmienna jest takim "pojemnikiem"

na tekst, liczby, obliczenia i inne śmiecie .

Zmienne deklaruje się w prosty sposób ,a mianowicie :

var mojazmienna;

Dosyć proste prawda ?

Ale JavaScript daje też możliwość deklaracji kilku zmiennych jednocześnie ,a mianowicie :

var mojazmienna1, mojazmienna2;

Można też sobie przypisać od razu wartość do zmiennej :

var mojazmienna = 1;

Zmienną w kodzie używa się łatwo - jak pewnie osoby wiedzą ,że zmienne w PHP od tekstu odgradza się krokpą tak tutaj odgradza się je plusem

Dobrym przykładem jest ten skrypcik :

 

Za każdym razem wyświetliło nam ten sam tekst mimo różnego zapisu

Jak również widzicie tylko na początku piszę var moja_zmienna = ..., a potem tylko moja_zmienna = .... - Zapamiętaj to !

 

Mam nadzieję ,że zrozumieliście zmienne

 

Elementy na stronie :

Gwoli przypomnienia - elementem nazywamy wszystkie tagi HTML jakie używamy czyli a, b, img, input, textarea itd.

 

Elementy można pobrać za pomocą nazwy tagu, Id, atrybutu name. Odpowiednio :

document.getElementById()
document.getElementsByTagName()
document.getElementsByName()

Przykładowo :

document.getElementById("mojeId")
document.getElementByTagName("div")
document.getElementByName("nazwa")

 

Jak można to wykorzystać . Skopiujcie sobie kod poniżej :

(Możecie go jeszcze nie rozumieć ,ale wytłumaczę )

Jako iż document.getElementById() jest najczęściej wykorzystywany napiszę wam go :

<div id="1">
Wiesz ,że tekst ,który tu widzisz jest zapisany w tym divie ?
</div>
<script type="text/javascript">
alert(document.getElementById("1").innerHTML);
</script>

Jak widzicie po załadowaniu strony wyświetlił nam się alert z zawartością div'a.

Ale przyjrzyjmy się co do wpisałem do alertu:

document.getElementById("1").innerHTML

 

Na podstawie tego wiemy co zrobić by manipulować kodem HTML w elemencie

Więc wtedy piszemy sobie taki skrypcik by to udowodnić :

 

 

Jak widać - Najpierw wyświetlił nam się div z treścią Stary tekst. ,a po kliknięciu OK zawartość div'a zmieniła się i znów została wyświetlona

 

inne atrybuty jakie można dać :

.style - Zmienia styl ( o tym powiemy sobie za chwilę )

.class - Zmienia klasę elementu

.value - zmienia wartość elementu

.id - Zmienia ID elementu

.onclick - zmienia nam zawartość zdarzenia OnClick (Można wykorzystywać inne zdarzenia )

 

Jak ustawić odpowiedni styl elementowi ?

Po pobraniu elementu można ustawiać styl . Jak to zrobić ?

Ano pobierzmy sobie element :

var x = document.getElementById("1");
x.style.position = "absolute"; //I pozycja stała się absolutna 
x.style.zIndex = "10"; //Z-index został ustawiony na 10
x.style.backgroundColor = "red"; //kolor tła jest czerwony 

Wskazówka : zauważ ,że pobieram element do zmiennej x i później piszę tylko x.style.cos ,a nie document.getElementById("1").style.cos

Wskazówka : zauważ ,że piszę zIndex i backgroundColor ,a nie z-index i background-color

 

Jak usuwać ,element ?

Do usunięcia elementu służy nam document.body.removeChild()

 

Przykład :

document.body.removeChild(document.body.getElementById("1"));

 

Narazie tyle ,dzięki za przeczytanie .

W kolejnym tutku :

 

- Zdarzenia czasowe

- Zdarzenia powtarzające się

- Tworzymy prostą animację

[DoDomeno]

Świetne NAPEWNO MI SIE PRZYDA !

Like leci !

[Sodema]

Bardzo ciekawe tutoriale.

Jakbyś dodawał na końcu zadania które sprawdzą nasze umiejętności było by super.

[DoDomeno]

A kiedy napiszesz Zdarzenia czasowe TUT? Bo bardzoooooooo mi to jest potrzebne