|
|
TIPS AND TRICKS
FORMATY PAPIERU
LOGOTYPY I LOGA
BRAMKA SMS
KOMUNIKATORY
INTERNETOWE
PRZEGLADARKI
INTERNETOWE (arch.)
WYSZUKIWARKA PKT
Za co kochamy system windows
Jak wygląda Kinga Rusin "na żywo"
Sklep apple uzywa nieznanego certyfikatu
druk offset krakow drukarnia krakow w krakowie drukarnia krakw
|
JAVASCRIPT TUTORIAL part.4
Po malej przerwie...
Jesli dokładnie przyjrzymy sie naszemu przykladowi z poprzedniej częsci ex4.html, zobaczymy, że przycisk istotnie zmienia wygląd po nasunięciu kursora myszki, natomiast po pierwszym załadowaniu strony czas oczekiwania jest denerwujaco długi. Dzieje sie tak dlatego, że przegladarka dopiero w momencie nasunięcia kursora myszki nad obrazek jest informowana o istnieniu drugiego obrazka i dopiero w momencie nasunięcia kursora myszki nad obrazek rozpoczyna pobieranie z serwera pliku graficznego. Jak to można poprawić? No, logicznie rzecz ujmując należało by jakoś wcześniej przeglądarce "powiedzieć", żeby sobie "ściagneła" plik do pamieci (do bufora przeglądarki) i miała go przygotowanego "na zaś". W tym celu musimy porzucić eteykietkę BAAAARDZO POCZĄTKUJĄCEGO i rozpoczniemy troszkę poważniejsze zagadnienie. Nie użyjemy już funkcji wbudowanych w HTML'a, tylko napiszemy pierwszy "prawdziwy" skrypt.
Zagnieżdżanie Javascript w kodzie HTML
Aby przeglądarka "wiedziała, że dany fragment kodu jest Javascriptem, a nie np. VisualBasicScriptem albo Html'em musimy umieścic znacznik <script language=javascript>
--TUTAJ TREŚĆ KODU Javascript
i zamykamy znacznik--
</script> . Javascript możemy umieścic w sekcji HEAD lub BODY kodu html.
Variable czyli zmienna
Pierwszym pojęciem, które dobrze byłoby sobie przyswoić, to "zmienna". Zmienna jest to logiczny "pojemnik" do którego możemy włożyć jakąś wartość czyli możemy przypisać zmiennej jakąś wartość (ale nie musimy). A więc zmienna to nazwa (lub symbol), której możemy przypisać jakąś wartość. W Javascripcie nazwa zmiennej musi się zaczynać od litery albo znaku podkreślenia [czyli "dolnej pauzy (_)], nie może się zaczynać od liczby.
No to sprobójmy zdefiniowac naszą piewszą zmienna.Zmienną najpierw definiujemy czyli nadajemy jej nazwę, a potem deklarujemy czyli przypisujemy jej wartość.
W Javascipcie definiujemy zmienną za pomocą słowa var np:
var zdanie1 = "W tej zmiennej umiescilem moje zdanie."
W ten sposób zdefiniowałem zmienna (nadałem jej nazwę) a następnie przypisałem jej wartość (czyli zadeklarowałem zmienną). Tak samo mogę jej przypisac wartść liczbową np:
var moja_liczba = 5 Tak więc nasz skrypt powinien wyglądac np. tak:
<html>
<head>
<title>
Pierwszy skrypt
</title>
</head>
<body>
<script language="javascript">
var zdanie1 = "W tej zmiennej umiescilem moje zdanie."
var moja_liczba = 5
</script>
</body>
dygresja:
Ten skrypt na razie nic nie " robi", ale proszę zwrócić uwage, że zmiennej "zdanie1" przypisałem wartość zawartą w znak cudzysłowu dlatego, że jest to zmienna typu "łancuch" (ang. string) czyli ciag (łancuch własnie) znaków alfanumerycznych, a zmiennej "moja_liczba" przypisałem wartość liczbowa - liczbę całkowitą (ang.integer), i NIE umieściłem jej w cudzysłowiu. Na razie nie bedę tłumaczył dlaczego tak postąpiłem, ale prosze zmienne typu łancuchowego (string) umieszczać w znaku cudzysłowia.Wiecej można znaleźć tutaj:
TYPY ZMIENNYCH W JAVASCRIPT
koniec dygresji
document.write
Teraz należało by zobaczyć jak od javascript wydobyć te zmienne.
Aby zobaczyć wartosć naszej zmiennej musimy zapoznać sie z jeszcze z metoda, mianowicie document.write Metoda document.write zwraca (oups nie wiem jak to ładniej nazwac) żądaną wartosc na ekran. np.
document.write ("To pisze Javascrpt, a nie HTML !")
Prosze zauważyć, że w to co chcemy zwrócić na ekran jest zawarte w nawiasie i cudzysłowiu. Jedno i drugie należy bezwzględnie zamknąć. Przypominam, że javascript jest wrażliwy na wielkość liter, więc document.write i DOCUMENT.WRITE to absolutnie nie to samo.
Popatrzmy na następujący kod:
<html>
<head>
<title>
Pierwszy skrypt
</title>
</head>
<body>
<script language="javascript">
document.write("To pisze Javascrpt, a nie HTML !")
</script>
</body>
ZOBACZ JAK TO DZIALA
Za pomocą metody document.write możemy kazac Javascriptowi "wypuszczać" (zwracać) na ekran wszystko, co nam sie podoba.
No to sprobójmy "wypuścić" wartości naszych zmiennych na ekran.Teraz użyjemy metody document.write a w nawiasie umieścimy nazwę zmiennej - bez cudzysłowia. Gdybyśmy umieścili nazwę zmiennej w cudzysłowiu, Javascript potraktowałby ją jako łańcuch, a nie nazwę zmiennej.
<html>
<head>
<title>
Pierwszy skrypt
</title>
</head>
<body>
<script language="javascript">
var zdanie1 = "W tej zmiennej umiescilem moje zdanie."
var moja_liczba = 5
document.write(zdanie1)
document.write(moja_liczba)
</script>
</body>
ZOBACZ JAK TO DZIALA
"Gdybyśmy umieścili nazwę zmiennej w cudzysłowiu, Javascript potraktowałby ją jako łańcuch, a nie nazwę zmiennej."
<script language="javascript">
var zdanie1 = "W tej zmiennej umiescilem moje zdanie."
var moja_liczba = 5
document.write(zdanie1)
document.write(moja_liczba)
document.write("moja_liczba")
</script>
ZOBACZ JAK TO DZIALA
Teraz skoro jako-tako zapoznaliśmy się z istotą zmiennej, możemy powrócić do naszego obrazka, który ładuje się "za późno".
Chcemy poinformować przeglądarkę już w momencie ładowania strony, że będzie nam potrzebny obrazek (plik graficzny), chociaż bedzie on dopiero widoczny po nasunięciu kursora nad inny obrazek.
W tym celu zdefiniujemy sobie zmienną moj_rollover.
var moj_rollover=new Image();
W teb sposob utowrzyliśmy nowy OBIEKT - Image. Obiekt (w tym wypadku Image)
to w Javascripcie pojęcie logiczne (nie obrazek jako plik graficzny np. gif albo jpg) tylko zbiór właściwości, zbiór cech, które obiektowi możemy przypisać.
Tak samo jak zmiennej możemy przypisać jakąś wartość, tak obiektowi możemy przypisać właściwość.
Nie jest to w tym momencie takie istotne, ale warto zapamietać "na potem".
Jeżeli zaineresowałeś sie troche programowaniem - w Javascipcie możemy programowac obiektowo (właśnie tworząc obiekty i przypisując im właściwości) albo strukturalnie piszac ciag procedur
(pewna strukture procedur) np: document.write("napisz to") document.write("teraz napisz tamto") document.write("teraz napisz jeszcze cos innego").
Tak więc utworzyliśmy nowy obiekt "Image",
za pomocą konstruktora "new" i nadaliśmy mu nazwę. A po co te puste nawiasy ? A no w Javascripcie w tych nawiasach sa umieszczane argumenty funkcji, konstruktor jest funkcją, a ta akurat nie pobiera żadnych argumentów.
Trudne ? Pomalutku. W nawiasach podajemy parametry lub wartości z jaką dana metoda (funkcja) ma być zastosowana. Np. "write" jest metoda obietktu "document" i w nawiasie podajemy wartość jaką ma się posłużyc Javascript przy jej wykonywaniu
np. document.write("Napisz to").
"Napisz to" jest wartością (argumentem) funkcji (metody) 'write'.
Tak więc nasz konstruktor 'new Image()' nie posiada żadnego argumentu. Teraz przypiszemy mu właściwość:
moj_rollover.src="obrazek_aktywny.gif"
W ten sposób Javascipt został poinformowany, że źródłem obiektu Image jest plik graficzny
"obrazek_aktywny.gif".
Teraz Javascript "wie", że ma załadować do bufora przeglądarki plik "obrazek_aktywny.gif".
Zobaczmy teraz jak szybko i w jakiej kolejności ładują się pliki do naszego preloadera. W tym celu dodamy wbudowaną funkcję javascriptu "onLoad". Funkcja onLoad "mówi" przeglądarce co ma "zrobić" kiedy dany element zostanie załadowany do bufora przegądarki.
My poprosimy javascript aby powiadomił nas alertem gdy obrazeka zostanie załadowany:
var moj_rollover=new Image;
moj_rollover.src="ex2.jpg";
onLoad=alert("OBRAZEK ZALADOWANY");
Zobaczmy jak to działa:
PRELOADER
Teraz widzimy, że pierwszy ładuje się obrazek, o który "poprosiliśmy" javascript, a następnie obrazek z kodu HTML strony.
W ten sposób powinno się wstępnie ładować wszystkie obrazki, które będziemy używać w naszych skryptach, tak aby javascript nie wykonywał żadnych operacji na "obazkach" (plikach graficznych), które jeszcze nie są załadowane.
Skoro potrafimy już wyświetlić obrazek, popatrzmu jak możemy za pomocą javascript manipulować innymi właściwościami elementów strony. Ciekawą cechą javascript jest to, że potrafi doskonale współpracować z kaskadowymi arkuszami stylów, i zmieniać
właściwości (style) obiektów. Spróbujmy napisać skrypt który bedzie pokazywał lub ukrywał element &alt;div>.
Jak wiadomo w CSS istnieje parametr "display" który może przybierać rożne wartosci np display:none albodisplay:block
naszym zadaniem będzie zmiana parametru "display" z "none" na "block" i odwrotnie. Tutaj jest krótki wstęp do CSSa,
właściwie tylko dla tych którzy nie maja absolutnego pojęcia co to jest CSS.
W javascript aby odwolac sie do stylu danego elementu stosujemy wbydowana funkcje javascript getElementbyId .
Aby uzyskac style danego elementu musimy podac jednoznaczny identyfikator obiektu - id. Aby wykonac nasze zadanie stwórzmy sobie element <div> o identyfikatorze id="WET" (oczywiscie id zalezy tylko
od Twoich osobistych preferencji).
<div
id="WET"
style="display:none;
position:absolute;
left:200px;
top:100px;
border-style: solid;
background-color: white;
padding: 5px;">
MAT
</div>
Proszę zwrócić na identyfikator
id="WET"
Towlasnie on pozwala odwołać się do danego elementu. Oczywiście identyfikator powinien być unikalny.
Teraz spróbujmy pobrać właścwosć jego stylu za pomoca javascript.
Stosując znaną już notacje kropkowa odwołamy się do elementu 'WET' i pobierzemy właściwość stylu display.
document.getElementById('WET').style.display
Aby sprawdzić jak to działa umieszczę przycisk (button) który onClick bedzie zwracał alert z wartoscia stylu display.
onClick="alert(document.getElementById('WET').style.display)"
Dosyć istotna rzeczą jest aby identyfikator obiektu był w pojedynczym cudzysłowiu, ponieważ całą komendę onClick musimy umieścić w podwójnych.
No to zobaczmy jak to działa TUTAJ
Teraz dodamy button, który będzie pokazywał nasz ukryty element, czyli zmienimy styl display z 'none' na 'block'
<input type="button" value='POKAZ' onClick="document.getElementById('WET').style.display='block'">
Nadal prosze zwrócić uwagę na znaki cudzysłowia - pozostawienie otwartego cudzysłowia powoduje "niedziałanie skryptu" - lub działanie inne od zamierzonego.
Dokończenie w nast. odcinku...
C.D.N.
Komentarze i uwagi
Tutaj można zamieszczać komentarze i uwagi
ADD URL
twojadres@email.com
twoj komentarz
mafu
bez przesady ...
stefan
bardzo
dobrze
phtoto tut
http://www.photoworkshop.com/registered/softwarecinema/adobecs2.html
instalacja ColdFusio
http://www.communitymx.com/content/article.cfm?page=1&cid=C5ACC
javascript
Kiedy nastepna czesc ?
mikus
zajebiste!! dzieki
whatever
kiedy nast czesc
jot
http://tutorials.learnflash.com/tutorials/flash/customscroller.html
w
w
w
w
|
