[JS] mootools voor beginners? - Softwareontwikkeling

vrijdag 8 februari 2008 13:40

Acties:

professional noob

Topicstarter

Op aanraden van velen van jullie toch maar eens begonnen met mootools!

Keurig de core gedownload, natuurlijk veel te weinig om een beetje lekker te kunnen testen, maar waar ik ook zoek, nergens is er ook maar iets te vinden voor een echte beginner!

Natuurlijk kan ik wat demo's bekijken, script kopieëren, maar het hoe & waarom blijft mij wat duister.
Met deze post roep ik natuurlijk allemaal reacties op dat ik geen JS moet doen als ik nog niet eens weet hoe een framework werkt, maar ik hoop eigenlijk op iemand met een hele simpele tip of korte omschrijving van hoe ik nuttig gebruik maak van mootools!

Ik heb inmiddels opnieuw mootools gedownload met een grotere hoeveelheid componenten, ik neem aan hiermee wel iets te kunnen. (krijg in ieder geval geen ontbrekende functie melding meer in m'n foutconsole)
Nu is mijn vraag dus of er iemand een kleine voorzet kan geven in wat ik fout doe in mijn eerste mootools scriptje EN, misschien nog belangrijker, hoe/waar ik de zo waardevolle foutmeldingen kan bekijken.
(ik meen namelijk gehoord te hebben dat je met een framework beter aan error handling kan doen dan met de foutconsole van FF, maar heb geen benul hoe of waar)

Dan nu mijn absurd simpele eerste script. Ik wil een focus op een textarea bij het laden van mijn pagina. Normaal doe ik altijd dit:

HTML:

1
2
3

<body onload="document.getElementById('opmerkingen')">
<form><textarea name="opmerkingen" id="opmerkingen"></textarea></form>
</body>

Maar nu met het mootools idee:

HTML:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function(){
        $('opmerkingen').focus;
    });
</script>
<body>
<form><textarea name="opmerkingen" id="opmerkingen"></textarea></form>
</body>

't zal vast een lachertje zijn, maar ergens moet ik beginnen

Als ik een leuke signature bedenk, zijn jullie de eerste die het weten

vrijdag 8 februari 2008 13:43

Acties:

BtM909

Watch out Guys...

[google=Mootools for beginners]

Overigens ben ik nieuwsgierig wat je tweede voorbeeld voor foutmeldingen geeft in diverse consolen (zoals firebug of de error console van firefox)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 8 februari 2008 13:46

Acties:

Patriot

Fulltime #whatpulsert

De dollarsign-functie wordt over het algemeen gebruikt als een elegante vervanging voor document.getElementById(), je moet dus het id van het object waarop je wilt focussen meegeven aan die functie. Jij geeft het id van een niet bestaand element mee (namelijk c3_username), dat id moet je vervangen voor 'opmerkingen'.

vrijdag 8 februari 2008 13:51

Acties:

Verwijderd

Tip: werk eerst eens een javascript beginnerstutorial door. Dan snap je een stuk sneller hoe je met mootools aan de slag kan.

De 'fout' die nu in je script zit heeft niet zoveel met mootools zelf te maken namelijk, t is meer een gevalletje PEBKAC (nofi

)

vrijdag 8 februari 2008 13:51

Acties:

kalechinees

Mootools is niet meer dan een verzameling veelgebruikte functies.... waarvan je 95% waarschijnlijk nooit zult gebruiken... bovendien is de standaard libary geloof ik al 200kb...

Persoonlijk gebruik ik javascript alleen waar nodig (focus, classname, styles, field checks etc). De enige leerweg is veel websites maken en tegen beperkingen aanlopen.
Na verloop van tijd zul je zelf een standaard functions.js samen gaan stellen...

ps: document.getElementById('opmerkingen').focus(); lijkt me een handigere oplossing

vrijdag 8 februari 2008 14:06

Acties:

equationunequal

Je wil de focus op het veld met het id "c3_username" (mbv. $('c3_username').focus; ) zetten, maar dit veld komt helemaal niet terug in je html. Nogal logisch dat het niet gaat werken dan.

Maak er eens "$('opmerkingen').focus();" van...

Let ook op de () achter focus, aangezien het een method is en geen property...

[ Voor 17% gewijzigd door equationunequal op 08-02-2008 14:07 ]

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

vrijdag 8 februari 2008 14:12

Acties:

H004

kalechinees schreef op vrijdag 08 februari 2008 @ 13:51:
Mootools is niet meer dan een verzameling veelgebruikte functies.... waarvan je 95% waarschijnlijk nooit zult gebruiken... bovendien is de standaard libary geloof ik al 200kb...

Persoonlijk gebruik ik javascript alleen waar nodig (focus, classname, styles, field checks etc). De enige leerweg is veel websites maken en tegen beperkingen aanlopen.
Na verloop van tijd zul je zelf een standaard functions.js samen gaan stellen...

ps: document.getElementById('opmerkingen').focus(); lijkt me een handigere oplossing

Mootools incl alle componenten en plugins is 180kb. Haal je alle documentatie en whitespaces weg (heb je niet nodig, behalve voor lokaal debuggen), dan hou je 80kb over. De standaard library is dus nowhere near 200kb!

Voor 2 regels JS is het inderdaad onzinnig om een library te gaan gebruiken, maar voor complexe RIA's wordt het opeens wel zeer interessant om dit soort libraries te gaan gebruiken. Het scheelt gewoon heel veel regels code, en (voor mij) belangrijker nog, heel veel debugwerk voor alle verschillende browsers. Alleen al de uitgebreide mogelijkheden wat betreft elementselectors van Mootools is voor mij al een reden om wel Mootools (of een andere library) te gebruiken.

Voor de TS: bekijk de demo's op mootools.net en probeer het na te maken. Snap wat elke regel js doet. Na een tijdje zie je de logica ervan! Ga een applicatie proberen te maken, en gaandeweg leer je alle uitgebreide mogelijkheden van zo'n library. Oefening baart kunst! Enige basiskennis van standaard JS is natuurlijk wel noodzakelijk: kennis over bv If-else constructies en javascript-syntax moet je gewoon hebben

vrijdag 8 februari 2008 14:30

Acties:

jbweb

professional noob

Topicstarter

@BtM909: Mag jij raden waar ik al twee dagen naar op zoek ben in google

en geen foutmeldingen in foutconsole en firebug. Komt waarschijnlijk door de stomme typefout van mij in mijn post

@All others: Zie hierboven, ik heb inderdaad verkeerd gecopied/gepaste. Het stond namelijk keurig als $('opmerkingen').focus; in mijn code... maar het werkte nog steeds niet

Uiteindelijk waren het inderdaad de haakjes achter focus. Daar was ik naar opzoek.

Nu ik weet dat de mootools werken is het in ieder geval veel makkelijker om echt wat te doen. Voor die tijd wist ik natuurlijk niet echt of de fout bij mij lag of in een verkeerde implementatie van mootools.

Als ik een leuke signature bedenk, zijn jullie de eerste die het weten

dinsdag 12 februari 2008 18:34

Acties:

jbweb

professional noob

Topicstarter

Is er ook een uitzonderings manier om te selecteren?
Op dit moment doe ik het volgende:

JavaScript:

1	var list = $$('#menu ul li');

Hierbij krijg ik een array met alle LI tags in mijn menu.
Maar nu wil ik een submenu maken. Helaas krijg ik nu ook alle LI tags van het submenu. Dat is niet de bedoeling natuurlijk.
Mijn html is als volgt:

HTML:

<div id="menu">
    <ul>
        <li>menu item 1</li>
        <li>menu item 2</li>
        <li>menu item 3
            <ul class="submenu">
                <li>submenu item 1</li>
                <li>submenu item 1</li>
            </ul>
        </li>
        <li>menu item 4</li>
    </ul>
</div>

Ik heb het volgende al geprobeerd:

JavaScript:

1	var list = $$('#menu ul li').filterByClass('.submenu');

Maar dat werkt niet. Is er een manier om aan te geven dat ik bepaalde LI tags op een dieper niveau niet wil?

Als ik een leuke signature bedenk, zijn jullie de eerste die het weten

dinsdag 12 februari 2008 19:23

Acties:

Cartman!

De simpelste oplossing is om de li elementen een class mee te geven en die als voorwaarde zet (bijv. <li class="main"> en dan $$('#menu ul li.main') gebruiken).

dinsdag 12 februari 2008 23:38

Acties:

SchizoDuckie

Kwaak

of gelijk upgraden naar mootools 1.2 beta als je het toch nog aant leren bent

Dan kan je je eigen helemaal uitleven met CSS queries en alle mogelijke selectors en modifiers, en dan werkt dit ook gewoon

code:

1	var list = $$('#menu > UL > LI');

[ Voor 11% gewijzigd door SchizoDuckie op 12-02-2008 23:42 ]

Stop uploading passwords to Github!