 [JavaScript][AJAX]Wszelkie pytania początkującego JS - AJAX |
  |
| [JavaScript][AJAX]Wszelkie pytania początkującego JS - AJAX |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 59 Pomógł: 1 Dołączył: 8.11.2010 Ostrzeżenie: (0%) 
 |
Jako że php nie sprawia mi już większych kłopotów i w miarę dobrze to opanowałem - postanowiłem się wziąć za js, ajaxa. Pamietam jak kilka miesiecy temu twierdzilem ze PHP jest nie dla mnie i to wszystko było takie trudne
 to chyba jedyne piękne wspomnienie w moim zyciu no ale do rzeczy. Jak to u mnie zazwyczaj bywa - pierw musze zadać kilka pytać żeby zrozumieć co w książce piszą.Zrobiłem cos takiego ze po najechaniu na guzik - pokazuje sie zdjecie a jak zrobic zeby zdjecie sie pokazywalo tylko wtedy kiedy jest na guziku kursor ? <script language="javascript" type="text/javascript"> var LinkDoFoto = '<img src="http://www.webtistic.co.uk/wp-content/uploads/2010/04/puppy.jpg" width="300" height="300" />'; function PokazFoto() { document.getElementById('foto').innerHTML = LinkDoFoto; } </script> <form><input type="button" value="POKAZ ZDJECIE" onmouseover="PokazFoto()"</form><br /> <div id="foto"></div> |
 |
 
|
|
Post
#2
|
|
 Grupa: Zarejestrowani Postów: 623 Pomógł: 11 Dołączył: 1.01.2009 Skąd: Wrocław Ostrzeżenie: (0%)
|
Cytat Zrobiłem cos takiego ze po najechaniu na guzik - pokazuje sie zdjecie a jak zrobic zeby zdjecie sie pokazywalo tylko wtedy kiedy jest na guziku kursor Sorki, ale nie bardzo rozumiem, przecież po najechaniu na guzik == kiedy jest na guziku kursor Napisz dokładnie co chcesz zrobić -------------------- |
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 59 Pomógł: 1 Dołączył: 8.11.2010 Ostrzeżenie: (0%)
|
Niom jesli kursor jest na guziku to zdjecie sie pojawia a jesli rusze kursor poza guzik to zdjecie znika
|
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 623 Pomógł: 11 Dołączył: 1.01.2009 Skąd: Wrocław Ostrzeżenie: (0%)
|
tak na szybko:
i do znacznika <img /> dodaj
-------------------- |
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 59 Pomógł: 1 Dołączył: 8.11.2010 Ostrzeżenie: (0%)
|
Tak robiłem ale nie chciało zadziałaś - teraz działa - dzieki.
Co prawda juz padam ale pochwale się rano co zrobiłem  ALBO JESZCZE COS jak zrobic po kliknieciu to wiem, a jak zrobic zeby po nastepnym kliknieciu sie schowało ? Ten post edytował Ideal 4.01.2011, 00:34:47 |
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 623 Pomógł: 11 Dołączył: 1.01.2009 Skąd: Wrocław Ostrzeżenie: (0%)
|
No to w funkcji PokazFoto() zrób if'a w którym sprawdzasz, czy element jest wyświetlany.
-------------------- |
|
|
|
|
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 59 Pomógł: 1 Dołączył: 8.11.2010 Ostrzeżenie: (0%)
|
nie dziala mi to - nie wiem czmu - mozesz podpowiedziec ?
|
|
|
|
|
Post
#8
|
|
|
Grupa: Zarejestrowani Postów: 623 Pomógł: 11 Dołączył: 1.01.2009 Skąd: Wrocław Ostrzeżenie: (0%)
|
Jeżeli zdjęcie jest widoczne, to zmienna widocznosc ma wartość true, w przeciwnym wypadku - false. Ten post edytował sweter 4.01.2011, 16:32:10 -------------------- |
|
|
|
|
Post
#9
|
|
|
Grupa: Zarejestrowani Postów: 59 Pomógł: 1 Dołączył: 8.11.2010 Ostrzeżenie: (0%)
|
w sensie ze do chowania to np.:
document.getElementById('foto').innerHTML = " "; ale nie dziala no chyba ze ja cos zle mysle ? MAM MĘTLIK W GŁOWIE - już tyle pomysłów sprawdziłem i ciagle sie nie chowa :/ Ten post edytował Ideal 4.01.2011, 17:28:35 |
|
|
|
|
Post
#10
|
|
 Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
Po pierwsze AJAX to część JS.
Po drugie kod Kod document.getElementById('foto').innerHTML = " "; powinien działaćPo trzecie poczytaj o DOM( http://kurs.browsehappy.pl/JavaScript/DOM ) i edycji CSS za pomocą JS( np. taka konstrukcja--> element.style.display = 'none'; <--) Po czwarte poczytaj o poprawnym dodawaniu zdarzeń(czyli np. click, mousemove itd. ) w JS. Po piąte popraw kod zgodny z moimi wskazówkami. Zdaje sobie sprawę, że jesteś początkujący, ale jak nauczysz się robić wszystko poprawnie to może będzie z Ciebie w miarę dobry programista. Poprawny kod, który jest zgodny z moimi wskazówkami: Kod <html> <head> <script> onload = function(){ //tzn. funkcja anonimowa podczepiona do zdarzenia onload(gdy stona się załaduje) - załadowany DOM document.getElementById('button').onclick = function(){ //kolejna funkcja anonimowa - zdarzenie click(kliknięcie) var el = document.getElementById('photo'); //zmienna lokalna el -> referencja do elementu if( el.style.display == 'none' ) el.style.display = ''; else el.style.display = 'none'; } } </script> </head> <body> <img src="http://www.google.pl/intl/en_com/images/srpr/logo1w.png" id="photo" style="display: none;"> <br> <input type="button" value="kliknij" id="button"> </body> </html> -------------------- |
|
|
|
Post
#11
|
|
|
Grupa: Zarejestrowani Postów: 5 Pomógł: 0 Dołączył: 26.02.2010 Ostrzeżenie: (0%)
|
Proponuje zamiast czystego JS użyć jQuery bibliotek jest lepiej i prościej i współpracuje z wszystkimi przeglądarkami.
|
|
|
|
|
Post
#12
|
|
|
Grupa: Zarejestrowani Postów: 59 Pomógł: 1 Dołączył: 8.11.2010 Ostrzeżenie: (0%)
|
na jQuery przyjdzie czas tez;
dzieki kamil4u - musze to przeanalizowac, nie kapuje nic z tego DOM`u :/ no nic moze kiedys zalape :/ Ten post edytował Ideal 5.01.2011, 00:15:45 |
|
|
|
|
Post
#13
|
|
|
Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
Cytat nie kapuje nic z tego DOM`u To nic trudnego, w wielkim skrócie to wszystkie elementy jakie masz na stronie, wszelkie divy, spany, tabelki, inputy, zwykłe teksty - generalnie wszystko to co piszesz w HTML, ale zapisane w jakieś tam specjalnej formie(,która Ciebie w ogóle nie zajmuje). Aby wykonać dowolną operację na jakimś elemencie HTML w JS, musisz najpierw znaleźć ten element, a poszukujesz go właśnie po przez DOM. Czyli jak chcesz zmienić np. tekst, jakiegoś elementu(innerHTML) to znajdujesz dany element w tzn. drzewie DOM( http://kurs.browsehappy.pl/Definicja/DOM ) i wykonujesz na nim operacje. Problem jest w tym, że najpierw przeglądarka musi mieć załadowane to drzewo DOM, gdzieś w swoim cache-u( to proste, załadowany element w tym drzewie DOM = możesz na nim operować). Możesz to 2 sensowne sposoby: - Szukać tego elementu, dopiero po wpisaniu div-a(czyli w kodzie najpierw masz dany element, a dopiero potem się do niego odwołujesz) Kod <div id="test">element do, którego chce się dostać</div> <script> alert( document.getElementById('test').innerHTML ); </script> - wykorzystać odpowiednie zdarzenie, aby spr. czy DOM jest załadowany - np. onload - czyli jak drzewo DOM jest załadowane to wtedy wykonaj pewne operacje( akurat przy onload to funkcja wywoływana jest to oprócz DOM, muszą być załadowane też wszelkie inne elementy strony np. obrazki), są sposoby, aby wykonać te funkcje dopiero po załadowaniu DOM, ale na razie nie musisz ich znać. I w sumie to wszystko. Jedyne co jeszcze musisz wiedzieć to jak dobrać się do elementów. Możesz to robić na wiele sposobów, szukając ich po id, name, class, tagu HTML funkcje getElement(s)By(Id|Name|Class|TagName) - lub poprzez inne sposoby np. następny element na stronie( patrz poprzedni link) Dobrze wiedzieć jeszcze, że możesz zapisywać sobie referencję(takie odwołanie) do danego elementu, np: Kod var el = document.getElementById('test'); //zmienna el trzyma referencję do elementu o id == test //możesz teraz stosować różne operacje na tym elemencie el.innerHTML = '123'; el.style.color = '#123456'; Jest to bardzo dobre, gdyż nie musisz szukać elementu za każdym razem(optymalizacja) - kod jest, krótszy, często czytelniejszy. Jeszcze napisze Ci o this (z ang. "to"), które bezpośrednio odwołuje się do używanego elementu(nie zawsze, ale to za dużo tłumaczenia ): Kod document.getElementById('test').onclick = function(){//przypisanie zdarzenia 'klikania' this.innerHTML = '1234567890'; //this odwołuje się do document.getElementById('test') } To chyba wszystko - solidne podstawy. Jeszcze czegoś nie rozumiem to pisz(mam fazę pisania dłuższych opisów, zamiast odsyłać do tutków, więc możesz to wykorzystać  )
Ten post edytował kamil4u 5.01.2011, 22:35:09 -------------------- |
|
|
|
|
Post
#14
|
|
|
Grupa: Zarejestrowani Postów: 59 Pomógł: 1 Dołączył: 8.11.2010 Ostrzeżenie: (0%)
|
Dziekuje kamil4u, dzeki sweter
ZROZUMIALEM TO  ! ! ! TO JEST PIEKNY DZIEN Zrozumialem na czym to wszystko polega Boze ile to daje mozliwosci + PHP do tego mniam ZANIM ZOBACZYSZ - pragne powiedziec ze wszystko to co stworzylem to tylko i wylaczenie Wasza pomoc i mój łeb (grafika moja oprocz zdjec, pomysl tez) Jesli chodzi o chat to zrobilem odswiezanie co pol sekundy wiec wyswietla rekordy z bazy ale nie wiem jak zrobic zeby je do niej przeslac tzn bez przeladawania stony w js. No ale do tego dojde za chwile (no chyba ze kamil4u nie stracil weny i moze mi to w jasny sposob wytłumaczyc) WIECZOREM PEWNIE WSTAWIE COS WIECEJ BO MAM KILKA RZECZY KTÓRE ZAWSZE CHCIALEM ZROBIC ALE NIE UMIALEM A TERAZ JUZ POTRAFIE.http://www.mojetesty.vot.pl/ |
|
|
|
|
Post
#15
|
|
|
Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
Cytat tzn bez przeladawania stony w js Pewnie chodzi Ci o AJAX - polecam: http://www.xul.fr/en-xml-ajax.html i popatrz na skrypty shoutbox-ów. Co to samej strony to funkcje oneColor( i pokrewne) i ShowPictureOne(i pokrewne) są źle zrobione, powinno być: Kod function ShowPicture(x) { document.getElementById('gallerymaindown').getElementsByTagName('img')[0].src = "gallery"+x+".jpg"; } Albo nadaj <img> jakieś id i bezpośrednio do niego(obrazka) się odwołuj. getElementsByTagName zwraca tablicę, stąd za nim [0], czyli pierwszy element img w divie o id == gallerymaindown. To samo z drugą funkcją. Jak się da to staraj się nie używać innerHTML, a zmieniać tylko tę część, która ma się zmienić na stronie. -------------------- |
|
|
|
|
Post
#16
|
|
|
Grupa: Zarejestrowani Postów: 59 Pomógł: 1 Dołączył: 8.11.2010 Ostrzeżenie: (0%)
|
Witam, nie chce zakladac nowego tematu szczegolnie ze problem dotyczy CSS. Pierwszy raz mi sie cos takiego zdarzyło a juz troche w tym siedze i nie wiem co jest nie tak; mianowicie mam:
glownego div`a a w nim lewy i prawy: #main { width:200px; height:30px; margin:0px auto; } #mainleft { width:100px; height:30px; float:left; } #mainright { width:100px; height:30px; float:right; } <div id="main"> <div id="mainleft"></div> <div id="mainright"></div> </div> I WLASNIE ONE NIE CHCA WEJSC DO SRODKA - Z TYM TO SIE JESZCZE NIE SPOTKALEM :/ main div jest gdzies sobie indziej a lewy i prawy gdzies indziej i podobny problem na tej samej stronie z divem ktorego nazwalem core - nie wyswietla sie a elemnty ktore sa w nim sa w pozcyjach prawidlowych - spitkaliscie sie z takim czyms ? sprawdzalem wszystko - zmienialem wysokosci glownego, szerokosci i nic. dodam jeszcze ze style pobiera z pliku no i reszta jest dobra tylko te wlasnie elementy - odczywiscie style sie nie powtarzaja. |
|
|
|
|
|
Aktualny czas: 22.08.2025 - 09:07 |
![<script language="javascript" type="text/javascript">var LinkDoFoto = '<img src="http://www.webtistic.co.uk/wp-content/uploads/2010/04/puppy.jpg" width="300" height="300" />';function PokazFoto() { document.getElementById('foto').innerHTML = LinkDoFoto; }</script>](http://pl.php.net/<br /><br /><script language="javascript" type="text/javascript"><br /><br />var LinkDoFoto = '<img src="http://www.webtistic.co.uk/wp-content/uploads/2010/04/puppy.jpg" width="300" height="300" />';<br /><br />function PokazFoto() {<br /><br /> document.getElementById('foto').innerHTML = LinkDoFoto;<br /> <br />}<br /><br /></script><br /><br />){kind=link}