Tijden veranderen
javascript tutorial & standaarden
Ik ben nu vrij ver met html, css en php en loop steeds vaker tegen het probleem aan dat je voor sommige dingen echt javascript nodig heb.
Dus zoek ik een (gratis en online) tutorial. Een heldere, die vooral het werken met het DOM bespreekt. Nu heb ik al gezocht, maar een echt goeie heb ik nog niet gevonden. Iemand tips? Nederlands is een pre, maar geen must.
Ps. Ik heb wat gelezen dat sommige browsers andere doms gebruiken dan anderen. Wat is de huidige aanrader om te leren?
Via functies als getElementById('x') (pak 1 element met een id x) en getElementsByClassName('x') (pak alle elementen (let op de s) met een class x) en getElementsByTagName('x') (pak alle elementen met een tagnaam s) kun je elementen uit de DOM halen en deze aanpassen en weer terug stoppen.
Het handige van JS is dat het behoorlijk lijkt op PHP. En dan bedoel ik qua loops, statements, operators, enz.
Het is goed om eerst de basis te kennen, dus functies en arrays en string en getallen enz. Dit kun je leren door de video tutorial serie JavaScript from null. Engels, maar goed te volgen.
Doordat je kennis hebt in PHP zul je hier niet heel veel moeite mee hebben, maar wat syntaxes zijn anders, dus het is toch goed dit even door te nemen.
Dan zou beginnen met het leren van jQuery. Dan krijg je een simpele kennismaking met JS en begrijp je alles stukken beter. Een tutorialserie die heel goed en gloednieuw is is Learn jQuery in 30 Days, helaas wel in het engels maar dat kan ook bijna niet anders. Doordat de maker, Jeffrey Way, alles uitlegt, meteen code typt en meteen het resultaat laat zien begrijp je het ook als je niet goed bent in Engels, echt een aanrader!
Vervolgens kun je verder gaan en mensen als Paul Irish en James Padolsey volgen. Vooral de 10/11 things I learned from jQuery source code van paul irish is zeker een aanrader: 10 things en 11 more things.
Ook de pagina JavaScript Garden legt problemen die je waarschijnlijk tegen komt goed uit.
Als je wilt kun je je JS kennis nog verder uitbouwen door andere frameworks te leren als MooTools en Dojo Toolkit.
Ik hoop dat ik genoeg tutorials, references en andere dingen heb laten zien.
En nog even een linkje leggen naam de topic titel, voor het 'standaarden' gedeelte. De JS standaarden worden bepaald door 2 groepen:
1) ECMA
2) De browsers zelf. Ontwikkelaars van browsers ontdekken altijd weer nieuwe en handige dingen om JS uit te bereiden. Die voegen ze toe en andere browsers gaan het overnemen en dan komt het in de ECMA standaarden.
Toevoeging op 24/02/2012 00:34:12:
edit: ik heb de eerste les net doorgekeken en hij legt het echt DUIDELIJK uit ik denk de beste tut die ik tot nu toe gehad heb ( zelfs beter dan text tuts ) en heb al gelijk iets nieuws geleerd!
Quote:
dus mijn vraag voor hoeverre lijkt dit op JS?
Ik heb nog nooit gewerkt met Flash. Dus ik weet niet hoever het er op lijkt. Ik heb wel gewerkt met JAVA, maar dat is niet te vergelijken met JS.
Als je een taal wilt vergelijken qua syntaxes dan moet je kijken naar Ruby.
Voorbeelden:
Code (php)
1
2
3
4
2
3
4
jQuery('#box') vs document.getElementById('box');
jQuery('.box') vs document.getElementsByClassName('box');
jQuery('div') vs document.getElementsByTagName('div');
jQuery('#box').addClass('some-class') vs document.getElementById('box').className += ' some-class';
jQuery('.box') vs document.getElementsByClassName('box');
jQuery('div') vs document.getElementsByTagName('div');
jQuery('#box').addClass('some-class') vs document.getElementById('box').className += ' some-class';
Maar leer eerst maar eens leuk jQuery en ga dan kijken hoe het in Raw JS eruit ziet.
PS: Als je niet elke dag wilt wachten, maar er meer op een dag wilt doen kun je eens hier kijken: http://tutsplus.com/course/30-days-to-learn-jquery/
ps youtube is daar ook makkelijk voor
jQuery is een bibliotheek aan heel interessante javascript-functies (en nog wat andere dingen), die heel veel voor jou doen.
Het meest interessante is waarschijnlijk de selector. jQuery staat toe dat je html-elementen kan aanspreken net zoals css.
Stel, je wil iets doen met alle input elementen binnen de form met id="form1", die required zijn.
Stel, je wil ze allemaal een rode background-color geven.
Wat doe je met css/html?
bv.
Je geeft die bepaalde input elementen een class="required"
Dan ken je met css dit doen:
Code (php)
1
2
3
2
3
#form1 input.required {
background-color: red;
}
background-color: red;
}
Als je die elementen wil aanspreken met standaard javascript, moet je beginnen met een combinatie van:
- getElementById('x') om id="form1" aan te spreken
- getElementsByClassName('x') om class="required"
- getElementsByTagName('x') om <input> aan te spreken
jQuery staat toe dat je de selector aanspreekt net zoals css; dat wordt dan
$("#form1 input.required")
----
Nog een voorbeeld: het XMLHttp Request object maken (voor Ajax requests)
Je hebt code nodig die je telkens opnieuw ergens met copy/pasten.
(zie http://www.scriptorama.nl/ajax/xmlhttp-request-object-maken )
Een natuurlijke reactie die je zou kunnen hebben, is ergens zelf een bibliotheek aanmaken waar je die code zet die je normaal telkens zou moeten zoeken en copy/pasten.
Je giet die bv in wrapper functies, zodat je dit zou hebben:
doeAjaxCall(url, callbackAlsKlaar, postData)
----
Wel, dat is precies wat jQuery voor je doet.
Die bibliotheek, die je in principe perfect zelf zou kunnen schrijven, is jQuery.js .
Quote:
Het meest interessante is waarschijnlijk de selector. jQuery staat toe dat je html-elementen kan aanspreken net zoals css.
Als je alleen jQuery gebruikt voor de selector engine kun je beter gewoon Sizzle gebruiken, dit is de selector engine van jQuery.
Overigens is dit:
$("#form1").children("input.required");
Sneller dan dit:
$("#form1 input.required")
En dus kun je beter het eerste gebruiken.
Verder een hele goede en duidelijke uitleg!
Gewijzigd op 24/02/2012 12:44:25 door Wouter J
Wouter J op 24/02/2012 12:44:01:
Als je alleen jQuery gebruikt voor de selector engine ...
Het is niet het enige wat ik gebruik, maar eigenlijk zocht ik precies dit wel.
Thanks
Zeer vaak denk ik toch: de rest kan ik zelf wel.
.html(), .each(), ...
Handig, leuk, fancy ... maar niet echt nodig.
Ikzelf hou niet zo van die uitgebreide editors, geef mij maar iets met syntax highlighting en handige tools als Zen Coding. Daarom ben ik begonnen met Vim. Een geweldige editor, alleen het kost wel wat tijd om onder de knie te krijgen.
Ook kun je InType gebruiken, dit een editor die tussen Aptana en Vim inzit.
Notepad++ vond ik fijn, gewoon alles rechttoe rechtaan, alleen de syntax highlighting is hier en daar wat verwarrend.
Intype ziet er wel leuk uit, ga hem nu eens testen
Toevoeging op 24/02/2012 14:29:28:
edit: ik heb even gekeken die gozer van de tuts die gebruikt deze http://www.sublimetext.com/download ik heb even gekeken op de site en hij is wel heel vet! wel betaald maar ik denk dat je dan alles hebt voor zowel windows, mac als linux
Gewijzigd op 24/02/2012 14:30:48 door Wouter J