Hey allemaal!
Hier is me 2de TUT waarbij ik javascript leer
TUT 1: http://www.one2xs.com/threads/18147
Dit keer gaan we met jQuery beginnen
Je denkt nu zeker WTF IS JQUERY
jQuery is een javascript waarmee je veel meer kan!
jQuery heeft effecten (sliden & faden) maar ook andere functies
Bij jQuery zijn de functies handiger
Oké we gaan beginnen
De HTML
Voor jQuery moet je eerst jQuery hebben
Dit stukje is niet verplicht, Wel handig
Je kan jQuery downloaden
Ga naar https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js en sla het bestand op
Upload het bestand naar je hosting of ergens anders
We beginnen nu (eindelijk) met het script
Om jQuery te gebruiken moet je het in je site zetten
= Script afsluiten
Bij LINK moet je natuurlijk de link naar jQuery invullen
- Niet geupload? https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
- Wel geupload? Waarschijnlijk http://SITE.EXT/jquery.min.js (Weet je zelf het beste
)
Dat was de HTML!
De javascript
Oké we zijn al bij de JS!!!!
Zoals altijd met javascript openen (en sluiten we
) javascript
Wat het betekend weet je nu al (PS: de // is voor commentaar)
We beginnen met elementen
Element kan body, document, div En alle andere HTML elementen zijn
Als je begint met . dan bedoel je classes dus:
Is NIET de body maar alle elementen met de class body
Als het begint met de # bedoel je ID dus:
Is NIET de body maar HET element met het id body
Waarom HET? Een ID moet uniek zijn, Als er meerdere elementen zijn met het zelfde ID werkt het dus NIET
Hoe ging het in normaal javascript:
Dan is jQuery toch handiger?
Oké dat is dan ook weer klaarWe gaan nu CSS bewerken!
jQuery heeft de functie css()
Als je css(height); gebruikt zal je de height van het element krijgen
Als je css(height, 800px); gebruikt zal de height van het element op 800px gezet worden
Voorbeeld:
Hmm, Dat gaat al lekker snel! We gaan nu beginnen met effecten!
De effecten zijn eigenlijk best makkelijk (net zoals de CSS)
- Effect: Slide
Sliden? Ja! Met dit effect zal een div open OF dicht glijden Net als bij one2xs!
Als je iets wilt openen gebruik je slideDown (De div gaat naar naar beneden glijden)
(De S leg ik zo meteen uit, Die moet je weglaten als je er nog niet bent!!!)
Maar om iets dicht te sliden gebruik je slideUp (Je snapt nu wel hoe je het erin zet, Toch?)
Je hebt ook nog het fade effect
fadeIn() = In faden
fadeOut = uit faden
Je snapt nu wel hoe dat werkt
-- De S:
Wat is die S?
De S is de Snelheid
Je kan bij jQuery fast gebruiken (met ) en slow (met )
Je kan ook zelf kiezen wat je wilt je zet dan het aantal MILLISECONDEN neer
1 seconde = 1000 milliseconden
We gaan nu naar het laatste onderdeel, Dan heb je de basis al!
Wat is het laatste onderdeel dan?
Paginas ophalen
! (Net als one2xs alle laatste posts ophaalt)
Dit kan met 3 functies AJAX, GET en POST
De functies GET en POST gebruiken de functie AJAX
Dus daarom slaan we de functie AJAX over
GET:
Bij GET heb je geen element nodigDus we starten het zo:
Maar we moeten wel een pagina ophalen:
Als je de opgehaalde gegevens wilt gebruiken doe je dit:
data = de opgehaalde data, Je kan de variable ook veranderen
Bij // hier kan je een code neerzetten die wordt uitgevoerd als de pagina is opgehaald
Bijvoorbeeld:
Ook kan je de POST functie gebruiken
Dit is handig om data te posten & ontvangen
Voorbeeld:
Je ziet dat er nu {} bij staat
Hier kan je de data inzetten die moet worden gepost
Zoiets dus
En dat was de javascript!
Einde
Dit was alweer het einde van me tweede javascript tutorial
Ik hoop dat jullie er wat van hebben geleerd
Vragen kan je natuurlijk altijd in het topic zetten
Deze tutorial mag niet zonder toestemming op andere sites worden gezet
- Niels
Hier is me 2de TUT waarbij ik javascript leer
TUT 1: http://www.one2xs.com/threads/18147Dit keer gaan we met jQuery beginnen
Je denkt nu zeker WTF IS JQUERY
jQuery is een javascript waarmee je veel meer kan!
jQuery heeft effecten (sliden & faden) maar ook andere functies
Bij jQuery zijn de functies handiger
Oké we gaan beginnen
De HTML
Voor jQuery moet je eerst jQuery hebben
Dit stukje is niet verplicht, Wel handig
Je kan jQuery downloaden
Ga naar https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js en sla het bestand op
Upload het bestand naar je hosting of ergens anders
We beginnen nu (eindelijk) met het script
Om jQuery te gebruiken moet je het in je site zetten<script src="" type="text/javascript"></script>= Script afsluiten
Bij LINK moet je natuurlijk de link naar jQuery invullen
- Niet geupload? https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
- Wel geupload? Waarschijnlijk http://SITE.EXT/jquery.min.js (Weet je zelf het beste
)Dat was de HTML!
De javascript
Oké we zijn al bij de JS
!!!!Zoals altijd met javascript openen (en sluiten we
) javascript<script type="text/javascript">
// Voor de duidelijkheid, Hier komt de code!
</script>Wat het betekend weet je nu al
(PS: de // is voor commentaar)We beginnen met elementen
$(element);Element kan body, document, div En alle andere HTML elementen zijn
Als je begint met . dan bedoel je classes dus:
$(.body);Is NIET de body maar alle elementen met de class body
Als het begint met de # bedoel je ID dus:
$(#body);Is NIET de body maar HET element met het id body
Waarom HET? Een ID moet uniek zijn, Als er meerdere elementen zijn met het zelfde ID werkt het dus NIET
Hoe ging het in normaal javascript:
document.getElementById(elementId);Dan is jQuery toch handiger?
Oké dat is dan ook weer klaar
We gaan nu CSS bewerken!jQuery heeft de functie css()
Als je css(height); gebruikt zal je de height van het element krijgen
Als je css(height, 800px); gebruikt zal de height van het element op 800px gezet worden
Voorbeeld:
$(element).css(height, 800px);
var height = $(element).css(height); // Is dus 800pxHmm, Dat gaat al lekker snel! We gaan nu beginnen met effecten!
De effecten zijn eigenlijk best makkelijk (net zoals de CSS
)- Effect: Slide
Sliden? Ja! Met dit effect zal een div open OF dicht glijden Net als bij one2xs!
Als je iets wilt openen gebruik je slideDown (De div gaat naar naar beneden glijden)
$(element).slideDown(S);(De S leg ik zo meteen uit, Die moet je weglaten als je er nog niet bent!!!)
Maar om iets dicht te sliden gebruik je slideUp (Je snapt nu wel hoe je het erin zet, Toch?)
Je hebt ook nog het fade effect
fadeIn() = In faden
fadeOut = uit faden
Je snapt nu wel hoe dat werkt
-- De S:
Wat is die S?
De S is de Snelheid
Je kan bij jQuery fast gebruiken (met ) en slow (met )
Je kan ook zelf kiezen wat je wilt je zet dan het aantal MILLISECONDEN neer
1 seconde = 1000 milliseconden
We gaan nu naar het laatste onderdeel, Dan heb je de basis al!
Wat is het laatste onderdeel dan?
Paginas ophalen
! (Net als one2xs alle laatste posts ophaalt)Dit kan met 3 functies AJAX, GET en POST
De functies GET en POST gebruiken de functie AJAX
Dus daarom slaan we de functie AJAX over
GET:
Bij GET heb je geen element nodig
Dus we starten het zo:$.get();Maar we moeten wel een pagina ophalen:
$.get(PAGINA);Als je de opgehaalde gegevens wilt gebruiken doe je dit:
$.get(PAGINA, function(data){
// Hier
});data = de opgehaalde data, Je kan de variable ook veranderen
Bij // hier kan je een code neerzetten die wordt uitgevoerd als de pagina is opgehaald
Bijvoorbeeld:
$.get(PAGINA, function(data){
$(#div).html(data); // Zet de inhoud van #div naar de data die opgehaald is!
});Ook kan je de POST functie gebruiken
Dit is handig om data te posten & ontvangen
Voorbeeld:
$.post(PAGINA, {}, function(data){
$(#div).html(data); // Zet de inhoud van #div naar de data die opgehaald is!
});Je ziet dat er nu {} bij staat
Hier kan je de data inzetten die moet worden gepost
{naam: Jan, leeftijd: 40}Zoiets dus
En dat was de javascript!
Einde
Dit was alweer het einde van me tweede javascript tutorial
Ik hoop dat jullie er wat van hebben geleerd
Vragen kan je natuurlijk altijd in het topic zetten
Deze tutorial mag niet zonder toestemming op andere sites worden gezet
- Niels
