Praktyczne wprowadzenie do JavaScript

JavaScript to jeden z tych języków, które – wbrew pozorom – pomagają nam w łatwy sposób dodać do stron www nowe funkcjonalności, które przy użyciu tradycyjnych metod (mam tu namyśli CSS) są często trudne do zrealizowania, bądź w ogóle niemożliwe.

JavaScript (JS) to stworzony przez firmę Netscape zorientowany obiektowo skryptowy język programowania, najczęściej stosowany na stronach WWW. Implementacja JavaScriptu stworzona przez firmę Microsoft nosi nazwę JScript.

Wikipedia

Obiektowy?! Skryptowy?! O co chodzi?! – pomyślisz. Bez obaw, terminy te przydadzą się nam później, kiedy będzięsz mógł pochwalić się jakimkolwiek pojęciem o JS.

Przyjrzyjmy się jednak bliżej JS, a z pewnością uznacie, że „nie taki diabeł straszny, jak go malują”. Zakładam, drogi Czytelniku, że nieobce są Ci XHTML i wspomniany CSS. Bez znajomości ich podstaw, nie widzę dalszej współpracy. To prawie tak, jak drink bez alkoholu – niby można, jednak to nie to, o co nam chodzi.

Najprościej rzecz biorąc, JavaScript to kod, zbudowany z powtarzających się elementów. Co prawda, po wpisaniu byle jakiego, konkretnego elementu języka, nie uzyskamy w nim nic konkretnego. Daleko mu do HTML, gdzie wpisujemy <p>test</p> i cieszymy się natychmiast widocznym efektem. JavaScript – tak, jak wszystkie języki programowania – daje nam swobodę i pozwala zdecydować, co i kiedy ma się stać. Niesie nam możliwość ukrycia – na przykład – jakiegoś tekstu po najechaniu myszką, po kliknięciu na inny link/element strony, po wciśnięciu przycisku na klawiaturze. Nie ma też w nim tagów charakterystycznych dla HTML’a.

To właśnie na interakcji z użytkownikiem, korzystającym z naszej strony, opiera się głównie JavaScript. Jeśli więc chcemy ukryć tekst paragrafu <p></p> po kliknięciu na jakiś link, musimy to zaprogramować. Na chłopski rozum, musimy dać linkowi właściwość, która pozwoli wychwycić przeglądarce, że ktoś właśnie na niego kliknął. Jeśli przeglądarka poprawnie wychwyci nasz klik, uruchamiany zostaje inny kod, napisany przez nas, który zmienia sposób wyświetlania interesującego nas elementu – w tym wypadku jest to akapit.

Załóżmy więc, że mamy prosty dokument HTML z pojedynczym, skróconym newsem. Naszym celem będzie umożliwienie szybkiego podejrzenia całej wiadomości, po kliknięciu linku więcej.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z newsem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href="#">więcej</a></p>

<p id="more">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div>
</body>
</html>

Jak widzimy, sprawa jest dość prosta.

Naszemu rozwinięciu można oczywiście zdefiniować display: none; przy pomocy dołączonego arkusza stylów dla #more. Niestety JS nie odczyta tej wartości. Trzeba ją zdefiniować w dokumencie.
Dokonamy tego zabiegu tylko na potrzeby zrozumienia JS. W odcinku 7., a także w następnych, poznasz sposóby, które pozwolą ominąć Tobie powyższe nieeleganckie praktyki.

Mamy jeden <div> wraz z dwoma paragrafami <p>. Na razie jednak efekt jest mocno niepożądany. Drugi akapit, będący rozwinięciem treści, miał być przecież ukryty. Ukrywamy więc go przy pomocy style=”display: none;”.

<p id="more" style="display: none;">

Następnie kroki, jakie postawimy w drodze do upragnionego celu, zakładają obecność kodu JavaScript w dokumencie HTML. Wstawiamy go na kilka sposobów. Można więc dołączyć go do dokumentu w dowolnym pliku o rozszerzeniu .js, podobnie jak pliki CSS. Dobrym zwyczajem jest dołączanie plików .js w sekcji <head>. Mianowicie:

<head>
<title>Strona z newsem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<!-- Nasz kod Javascript: --><script type="text/javascript" src="skrypt.js"></script>

</head>

Jak można zauważyć, całość opiera się na znacznikach htmlowskich <script>.

Istnieje również możliwość bezpośredniego dołączania kodu JavaScript do plików HTML. Skorzystamy z tej możliwości w dalszej części, w trosce o większą przejrzystość.

<head>
<title>Strona z newsem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<!-- Nasz kod Javascript: -->
<script type="text/javascript">

	<!-- tutaj wkleimy jakiś kod -->

</script>
</head>

Tak naprawdę jednak, sposób, jaki wybierzemy, nie odgrywa większej roli. Efekt będzie taki sam.

Mamy więc pełen dokument HTML, gotowy na wszczepienie niezbędnego kodu JavaScript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z newsem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

	<!-- tutaj wkleimy jakiś kod Javascript -->

</script>

</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href="#">więcej</a></p>

<p id="more" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div>
</body>
</html>
Użycie onclick w dokumencie XHTML jest niepożądane. W dalszej części kursu, znajdziesz alternatywne sposoby na użycie onclick.

Jak już powiedziałem, naszym zadaniem jest przechwycenie informacji o tym, czy ktoś kliknął w link „więcej”. W tym celu, korzystamy z gotowego elementu języka JavaScript, który towarzyszył będzie nam w różnych postaciach w dalszej nauce JS – onclick.

<a href="#" onclick="">więcej</a>

Wstawienie onclick=”” do jakiegokolwiek tagu HTML powoduje, że po kliknięciu jego zawartości wykona się kod zawarty między cudzysłowami. Najprostszym i najczęściej wykorzystywanym przykładem działania onclick we wszelakich kursach jest wykorzystanie kolejnej funkcji języka, jaką jest alert(). Zobaczmy, na czym to polega, poprzez wstawienie odpowiedniego kodu do naszego przykładu:

<a href="#" onclick="alert('Kliknąłeś właśnie w link!');" >więcej</a>

Jak widzimy, po kliknięciu w link „więcej’ pojawia się nam okienko o treści, jaką wpisaliśmy w apostrofach otoczonych nawiasem.

alert(‚Jakis tekst’);
Jest to wbudowany element języka JavaScript, który, fachowo rzecz biorąc, nazywamy funkcją języka. Jakiś tekst to natomiast argument funkcji. Wszystkie funkcje języka JavaScript, które wywołujemy, można poznać po tej samej budowie: nazwa(atrybuty);. W przyszłości dowiesz się więcej o funkcjach.

Wiesz już, na czym to wszystko polega. Jak zapewne domyślasz się, musimy stworzyć coś podobnego do alert();, tyle że zmieniającego sposób wyświetlania akapitu z rozszerzoną treścią newsa. O ile więc alert(); jest funkcją wbudowaną w język, tak nasza funkcja obsługująca akapit będzie zdefiniowana przez nas. Całość umieścimy pomiędzy <script></script> w sekcji <head> naszego dokumentu.

Powiedzmy, że naszą funkcję nazwiemy PokazAkapit. Analogicznie rzecz biorąc, nasz link „więcej” wyglądał będzie tak:

<a href="#" onclick="PokazAkapit();">więcej</a>

A cały dokument tak:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z newsem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

	<!-- tutaj wkleimy jakiś kod -->

</script>

</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href="#" onclick="PokazAkapit();" >więcej</a></p>

<p id="more" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div>
</body>
</html>

Napiszmy więc fundamenty naszego pierwszego skryptu, oczywiście, jak się już rzekło, pomiędzy znacznikami <script></script>.

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

	function PokazAkapit()
	{
	
	}


</script>

Właśnie w ten sposób definiuje się funkcje w JavaScript, które wywołujemy m.in. w onclick.

function Nazwa(atrybuty)
{
cialo funkcji
}

W ten sposób definiuje się funkcje w JavaScript. Nazwa funkcji nie może zawierać spacji, możliwe są podkreślniki _, duże i małe litery oraz cyfry. O atrybutach dowiesz się w najbliższym czasie, przyjmijmy więc, że wszelkie funkcje definiujemy bez atrybutów. W klamrach natomiast wpisujemy zawartość skryptu. Jest to dość analogiczny element, podobny do definiowania klas w CSS. Jedyną różnicą jest to, że, naturalnie, pomiędzy klamrami mamy kod języka JavaScript. Każdą linijkę w ciele funkcji kończymy średnikiem!

Jak widać, nasza funkcja jest całkowicie bezużyteczna – nie ma w niej żadnego kodu. Do dzieła!

Omówmy więc logikę naszej nowej funkcji, czyli za co konkretnie będzie odpowiedzialna. Naszym celem, jak zostało powiedziane wcześniej, jest wyświetlenie akapitu z rozszerzoną treścią newsa. Najpierw, jak uważni Czytelnicy z pewnością przeczytali, ustaliliśmy, że akapit ten będzie miał ustawiony parametr stylów display: none;. Problemem jest teraz to, jak zmienić go z powrotem na display: block;? Musimy więc dostać się do właściwości stylów akapitu o id=”more”.

Umożliwia nam to funkcja operująca na elementach dokumentów HTML – document.getElementById(atrybut), gdzie w miejsce atrybut wpisujemy id interesującego nas elementu(tagu HTML).

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

	function PokazAkapit()
	{
	       var akapit = document.getElementById('more');
	}


</script>

W ten sposób odwołaliśmy się do akapitu o id=”more”.

var nazwa_zmiennej = 2;
Zmienne są to takie elementy języka JS, które pozwalają przechowywać jakieś wartości. Definiujemy je słówkiem var, po nim wpisując dowolną nazwę zmiennej i przyrównując ją do jakieś wartości. W tym wypadku otrzymamy zmienną o nazwie nazwa_zmiennej o wartości 2. Zmienne mogą również przechowywać odwołania do innych elementów, o czym później.

Zmienna akapit przechowuje więc odwołanie do naszego akapitu <p id=”more”>. Dzięki temu możemy wyświetlić wiele właściwości danego paragrafu. Jeśli interesuje nas jego treść, nic trudnego by ją zmienić, bądź usunąć. Nie jest to jednak nasz główny cel. Postanowiliśmy przecież dostać się do stylu display. Przy pomocy JavaScript jest to dziecinnie łatwe i logiczne.

Wypróbujmy więc coś takiego, klikając uprzednio w link „więcej” w pierwszym akapicie:

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

	function PokazAkapit()
	{
	       var akapit = document.getElementById('more');
                  alert(akapit.style.display);
	}


</script>

Przed naszym oczami pojawiło się niepozorne okienko o treści none. I to właśnie było naszym celem.

Zmiana wartości danej zmiennej/elementu jest zupełnie podobna do definiowania zmiennej:
zmienna = wartosc;

Jeśli nasza wartość to ciąg liter wtedy otaczamy ten ciąg apostrofami bądź cudzysłowami:
zmienna = „Jakas tam wartosc!”;

Wyświetliliśmy jedną z własności stylów akapitu! Spróbuj, drogi Czytelniku, nadać jakieś style paragrafowi o id=”more”, a następnie w naszym skrypcie, podmienić akapit.style.display na coś analogicznego, np. akapit.style.padding.

Jak widzimy, wywołane w alert(); zmienne mają określoną wartość. W przeciwnym razie ujrzelibyśmy puste okienko. Logika wskazuje na stwierdzenie, że jeśli coś ma wartość, to, generalnie, można ją zmienić. Zmieńmy więc akpit.style.display na block.

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

	function PokazAkapit()
	{
	       var akapit = document.getElementById('more');
                  akapit.style.display = "block";
	}


</script>

Eureka! Osiągnęliśmy zamierzony efekt! Cały dokument wygląda teraz następująco:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z newsem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

	function PokazAkapit()
	{
		var akapit = document.getElementById('more');
		akapit.style.display = "block";
	}

</script>

</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href="#" onclick="PokazAkapit();" >więcej</a></p>

<p id="more" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div>
</body>
</html>

Potrafimy niniejszym sposobem dostać się do konkretnego elementu dokumentu HTML o określonym id. Potrafimy też zmienić jego właściwości stylów. Jest to jednak nadal bardzo prymitywny skrypt, który aż prosi się o kolejne funkcjonalności. W następnej części na pewno takich się doczekacie. Omówimy również atrybuty funkcji i wszelkie inne elementy języka, które zostały – celowo – pominięte. Wiedz, że JavaScript to ogromne narzędzie i wiele jego kursów oferuje od początku natłok informacji, który może powalać i z reguły dla większości jest w dużej mierze mało istotny. Postanowiłem w związku z tym ograniczyć zaserwowany materiał, który będzie rozszerzany wraz z kolejnymi przykładami.

Komentarze

1

Bardzo fajnie i co najważniejsze ciekawie opisałeś wstęp do JS. Czekam na dalsze artykuły :)

2

mam nadzieję, że kolejne artykuły do tego kursu js się szybko pojawią, bo sie doczekać nie mogę :)

3

Dziekuje za pozytywne komentarze.

Pytanie, język kursu Wam odpowiada? Wszystko jest przejrzyste?

ferr
4

jak dla to cud, miód i orzeszki w groszki

5

[…] poprzedniej części kursu powstał prosty dokument HTML z minimalną funkcjonalnością JavaScript, jaką jest rozwinięcie […]

6

Oj kursik jest naprawed OK….bardzo to fajnei opisales i wogóle..thx pzdr czekam na wiecej artykułów:)

yagi
7

Bardzo dobrze napisany wstęp i stąd też dla ciebie ogromne brawa :)

oby tak dalej.

8

no na tym chyba skorzystam :) naprawdę wciąga – dziękuję za taki kurs!

gogus
9

Hej, byłoby świetnie gdybyś dał linki nawigacji po kursie (dalej / wcześniej) w stopce wpisu. ;)

10

True, postaram sie cos wymyslic w tej kwestii :).

11

Język kursu jest jak najbardziej odpowiedni. Jest zrozumiały zarówno dla nowicjuszy, jak i osób, które znają już co najmniej jeden inny język programowania. Ogólnie całość jest przystępnie napisana, a nauka staje się przyjemnością. Gratulacje dla autora za talent dydaktyczny :)

nephre
12

Jak dla mnie to chowam na półkę książkę z Helionu i zabieram się za kolejne części tego kursu ;)

13

Podoba mi się :) Zabieram się za kolejne części :)

14

[…] z JavaScriptem i AJAXem są dosyć ciężkie. Na szczęście Damian Wielgosik udostępnia świetny kurs JavaScript. Ponieważ jednak nie mam zbyt wiele czasu aby wgłębiać się w JS, zastosuję w przyszłych […]

15

good job man! bardzo mi się podoba ten kurs

maggus
16

Praktyczne wprowadzenie do JavaScript…

JavaScript to jeden z tych języków, które – wbrew pozorom – pomagają nam w łatwy sposób dodać do stron www nowe funkcjonalności, które przy użyciu tradycyjnych metod (mam tu namyśli CSS) są często trudne do zrealizowania, bądź w ogóle n…

17

A jak mam przejsc z tej strony do nastepych odcinkow? Nawigacja na tym „blogu” jest tragiczna! Logika serwisu bloga polega na porzadku czasowym, a nie merytorycznym. Kursu nie czyta sie jak pamietnika. Wystarczy uzyc jakiegokolwiek CMS zamiast bloga. No to?

zdezorientowany
18

CODEBLOCK

Wajsman
19

Wspaniałe wprowadzenie do javascript, biorę się za czytanie dalszych części :)

mempty
20

dzieki za dobre wprowadzenie ;-) jak widze js jest calkiem prosty :) odrazu zmodyfikowalem ten skrypt tak, ze po kliknieciu „wiecej” link znika a po drugim tekscie pojawia sie „mniej” :-)

21

3ci oraz 4ty listing jest zle zakodowany przez co 3ciego nie da sie skopiowac u mnie.

haRacz
22

Naszemu rozwinięciu można oczywiście zdefiniować display: none; przy pomocy dołączonego arkusza stylów dla #more. Niestety JS nie odczyta tej wartości. Trzeba ją zdefiniować w dokumencie

Moja wiedza nt. css i xhtml jest na razie na dosc podstawowym poziomie, dlatego moje pytanie moze wydac sie nieco „czepialskie”. Ale do rzeczy:
Czy faktycznie nie da sie osiagnac tego efektu w przypadku importowania akrusza stylu do kodu strony? Z czego to wynika?
Z pewnoscia rozbicie kodu stylu na import pliku .css oraz zagniezdzenie wlasciwosci w dokumencie .html zmniejsza jego czytelnosc i mysle, ze warto tego unikac. Byc moze ten problem zostal opisany w kolejnych odslonach kursu – jesli tak, to bardzo prosze o sam link.

joycake
23

Masz mnie, trochę pochopnie, bez żadnego komentarza, wstawiłem ten przypis. Teraz poprawiłem nieco i powinno być już jasniej.

24

Dzieki Ferrante. Korzystajac z okazji chce powiedziec, ze odwalasz kawal swietnej roboty. Dzieki takim jak Ty w Polsce zaczyna budowac sie spolecznosc, jaka od dluzszego czasu jest na Zachodzie – autorzy www dziela sie swoja wiedza, spostrzezeniami i doswiadczeniem. Moze brzmi to nieco gornolotnie, ale jako poczatkujacy az zbyt doskonale zdaje sobie sprawe, jak ciezko wychwycic wszystkie przydatne porady i wskazowki z anglojezycznych wpisow w blogach, komentarzach do nich oraz forach. Doceniam to co robisz.

joycake
25

Witam serdecznie! Kurs naprawdę zapowiada się ciekawie – ja sam znam od dawna tą stronę i zajrzałem tutaj w celu nauki jQuery. JavaScript znam dość nieźle, ale zdecydowałem sobie poczytać Twoje (jeśli mogę przez Ty) lekcje „początkujące” w kwestii JS. Bardzo fajnie opisane, wytłumaczone prostym językiem tak, aby każdy mógł śmiało zrozumieć. Przejrzę jeszcze pozostałe lekcje, a potem wezmę się za jQuery. Jakby ktoś był zainteresowany to sam w miarę możliwości czasowych piszę kurs JavaScript – zobacz – z góry mówię, że jest to taki zbiór lecki/przykładów – wizualnie nie wygląda to tak ładnie jak tutaj, ale kurs ten jest przede wszystkim jakimś takim miejscem gdzie czasem jak czegoś zapomnę mogę zerknąć na dane rozwiązanie. Co prawda obecnie nie ma tam zbyt wielu lekcji (bo niestety mam mało czasu), ale jakby ktoś miał ochotę to zapraszam. Jeszcze raz powiem, że strona bardzo dobra i świetnie napisane teksty, pozdrawiam !

26

Nareszcie znalazł się ktoś kto tłumaczy Java Script tak jak to powinno się wytłumaczyć. Nie ma w sieci żadnego kursu, który mógłby być tak jasno i przejrzyście napisany.
Dis is ektzaktli łot aj łont :)

Some
27

a jak jest jezeli program jakis sie nie otwiera i wyskakuje brak definicji window
microsoft jscript file

dolph299
28

Rewelacyjne wprowadzenie do JavaScriptu jako, że znam HTML, CSS, Basic, assembler i trochę C++ to na razie wszystko jest jasne aż miło. Żadnych zbędnych wypowiedzi, lania wody. wszystko pięknie wyłożone jak na patelni. Super

W internecie bardzo trudno jest znaleźć jest konkretne kursy JS, a już zwłaszcza te zgodne z najnowszymi standardami. Czuję, że właśnie Twój kurs będzie preludium do dalszej nauki tego języka programowania ;)

29

fajne wytłumaczone

kmita
30

Its piekne, Its beautiful!! :)

Jogy
31

Cześć być może moje pytanie uznasz za trywialne ale właśnie zaczynam swoją przygodę z JavaScript dzięki twojemu kursowi i próbuje nadać jakieś style paragrafowi o id=”more” po przez „akpit.style.display”. I nie wszystkie style zostają wyświetlane(zatrzymuje się wykonywanie skryptu) np: „akapit.style.text-transform = „uppercase”;” lub „akapit.style.font-weight = „bold”;”. I mam pytanie co jest tego przyczyną braku działania tych stylów css.

samuraijack
32

samuraijack,

nazwy paramterów, które w arkuszach CSS zawierają myślnik/pauzę/- , w JavaScript zastępujemy bardzo podobnymi, ale zgodnymi z camelNotation, czyli:
– zamiast akapit.style.text-transform użyj akapit.style.textTransform
– zamiast akapit.style.font-weight użyj akapit.style.fontWeight

analogicznie, chcąc zmienić kolor tła za pomocą JavaScript użyjesz akapit.style.backgroundColor = „#nowyKolor” , a wypunktowanie listy zmodyfikujesz wykonując polecenie akapit.style.listStyleType= „#noweWypunktowanie”

emiot
33

Świetne wprowadzenie. Dokładnie to czego oczekuje – nauka na prostych przykładach z pokazaniem zaawansowanych możliwości.

Glorifind
34

A jak zmodyfikować ten kod JS, by zamiast łapać z ID łapał z Class?

Andrie
35

Witam ;)

Po pierwszej stronie kursu widać że jest on napisany zupełnie inaczej niż inne jest przejrzysty i każdy element jest bardzo dobrze opisany ;)

@Andrie możesz zrobić tak:
function hmma(hmm){
var z = document.getElementById(hmm);
z.style.color = „white”;
z.style.background = „blue”;
z.style.width = „800px”;
z.innerHTML = „Tak.”

}

window.onload= function(){
hmma(„a”);
} // wywolanie

wtedy pobierzesz klase i wpiszesz ją do diva z podanym Id(w tym przypadku: a) ;)
jeszcze z tego co widziałem istnieje coś takiego jak className(dokładnie nie wiem jak tego używać, ale chyba tak: zmienna_ktora_cos_tam_wszesniej_robila = className(‚ok’) i ta zmienna otrzyma klase ok. Szczerze mówiąc dopiero zaczynam z js i nie jestem pewien ani składni i calej reszty też :D musisz sobie o tym poczytac)

Jacek
36

Ciekawie sie zapowiada =]

Jakub
37

Szukam gdzieś przykładu, jak w kombinacji Javascript/Ajax zablokować wysyłanie danych do serwera, aż nie zostanie zwrócona i odebrana odpowiedź na poprzednie żądanie. Formularz wysyłam buttonem. Jak nie zablokuję przycisku, to serwer jeszcze przetwarza poprzednią odpowiedź, a tu na nowym wirtualnym porcie mam nowe żądanie. Poprzedniej odpowiedzi nie ma komu wysłać. De facto wątek serwera nie wie, że jego socket jest już praktycznie martwy. Wyjściem jest jego zakończenie, ale lepszą wydajność uzyska się na działającym keep-alieve. Jak serwer nieraz ma zapytania do bazy po 2 minuty, to użytkownikowi różne rzeczy mogą przyjść do głowy.

Markiz
38

Po pierwszej lekcji mogę powiedzieć że chyba znalazłem to czego szukałem, wiedza oparta na przykładzie i co najważniejsze, nie na tym samym co na większości stron o JS zobaczymy jak będzie dalej

39

[…] z JavaScriptem i AJAXem są dosyć ciężkie. Na szczęście Damian Wielgosik udostępnia świetny kurs JavaScript. Ponieważ jednak nie mam zbyt wiele czasu aby wgłębiać się w JS, zastosuję w przyszłych […]

40

Przydałyby się przyciski przechodzenia pomiędzy kolejnymi lekcjami, poza tym znakomicie się czyta :)

41

Bardzo dobry początek, polecam wszystkim, któzy zaczynają.

42

Pytanie dość trywialne ale… Czy jest kontynuacja? Jeśli tak to gdzie?

Dodaj komentarz

Dozwolone tagi: <blockquote>, <code>, <strong>