Tutorials
CSS, Javascript los van HTML
Hoe krijg je CSS en Javascript (AJAX) gescheiden van HTML, ervaring javascript en CSS vereist.
Pagina 1
Inleiding
Hallo mensen,
Ik heb deze tutorial gemaakt om aandacht te schenken aan een gouden regel genaamd: “Houd je opmaak en HTML apart”. Nu doen de meeste mensen dit wel, maar toch doen sommige het niet. Dan komt ook nog bij dat de afgelopen tijd AJAX sterk aan het groeien is, waardoor er veel javascript bij de HTML komt. Ik bevat javascript eigenlijk net als opmaak, dus het moet eruit.
Als je levend door deze tutorial wilt komen, dan moet je de basis principes van CSS en Javascript weten (Bij Javascript wordt AJAX als voorbeeld genoemt, maar hoeft niet bevat worden als een vereiste, want je kunt het ook op Javascript zelf toepassen!)
Ik begin eerst met CSS, want dat is gewoon het makkelijkst, daarna komt javascript eraan, hieronder volgt de orde:
- CSS in HTML en Eruit
- Javascript in HTML
- Hoe los je dit op
- Conclusie
De CSS kant is zo gebeurd, gelukkig, maar de Javascript kant heeft toch meer informatie nodig. Lees maar snel verder dan kun je het toepassen.
Ik heb deze tutorial gemaakt om aandacht te schenken aan een gouden regel genaamd: “Houd je opmaak en HTML apart”. Nu doen de meeste mensen dit wel, maar toch doen sommige het niet. Dan komt ook nog bij dat de afgelopen tijd AJAX sterk aan het groeien is, waardoor er veel javascript bij de HTML komt. Ik bevat javascript eigenlijk net als opmaak, dus het moet eruit.
Als je levend door deze tutorial wilt komen, dan moet je de basis principes van CSS en Javascript weten (Bij Javascript wordt AJAX als voorbeeld genoemt, maar hoeft niet bevat worden als een vereiste, want je kunt het ook op Javascript zelf toepassen!)
Ik begin eerst met CSS, want dat is gewoon het makkelijkst, daarna komt javascript eraan, hieronder volgt de orde:
- CSS in HTML en Eruit
- Javascript in HTML
- Hoe los je dit op
- Conclusie
De CSS kant is zo gebeurd, gelukkig, maar de Javascript kant heeft toch meer informatie nodig. Lees maar snel verder dan kun je het toepassen.
Pagina 2
CSS in HTML en Eruit
CSS in HTML
Je kent het tegenwoordig wel, CSS, de macht onder de opmaak. Hoewel CSS goed wordt gemaakt, met veel problemen (Dank U Microsoft), doen mensen toch nog iets fout. Nou zou je denken wat doen mensen fout nou kijk maar:
Index.html
Als ik dit zie dan ga ik zowat over mijn nek, figuurlijk gesproken. Dit soort HTML zie je vaak bij dreamweaver gemaakte websites. Ik kan nu al zeggen, als de website telkens weer dit hele HTML en CSS zooitje moet herladen dan kan dat bij grote websites veel tijd kosten. Natuurlijk niet te vergeten bandbreedte. Laten we snel verder gaan en kijken naar de oplossing, die eigenlijk super simpel is.
CSS uit HTML
De oplossing is heel simpel, er is altijd gezegd door CSS goeroe’s houdt opmaak en HTML apart, door gebruik te maken van id's en classes. Dus laten we dat doen.
Index.html
Style.css
Ik heb hier alleen id's gebruikt, omdat er maar één content is en niet twee etc. Als je meer van hetzelfde wilt gebruiken dan heb je classes nodig. Denk eraan om id's op te roepen in css gebruik de #(hekje) en voor classes de .(punt).
Dankzij dit zal de snelheid toenemen en bandbreedte afnemen, waarom, omdat een extern CSS bestand wordt opgeslagen in een cache en zolang niks veranderd er altijd is. Dit zorgt ervoor dat bij een tweede bezoek de opmaak klaar is en alleen de HTML hoeft worden opgehaald. Dan er nog een toefje bij het is overzichterlijker. Dit was natuurlijk simpel laten we nu verder gaan naar AJAX.
Je kent het tegenwoordig wel, CSS, de macht onder de opmaak. Hoewel CSS goed wordt gemaakt, met veel problemen (Dank U Microsoft), doen mensen toch nog iets fout. Nou zou je denken wat doen mensen fout nou kijk maar:
Index.html
<html>
<head>
<title>Welcome</title>
</head>
<body>
<div>
<div>
<img src="header.jpg" width="700" height="300" alt="XXX">
</div>
<div style="width: 700px; height: 1000px">
<h1><span style="font-size: 16pt; font-family: Serif">Welcome</span></h1>
<span style="font-size: 10pt">
<span style="font-family:Arial">
<span style="color: #ffffff">
<span style="background-color: #000000">
Some text
</span>
</span>
</span>
</span>
</div>
</div>
</body>
</html>
Als ik dit zie dan ga ik zowat over mijn nek, figuurlijk gesproken. Dit soort HTML zie je vaak bij dreamweaver gemaakte websites. Ik kan nu al zeggen, als de website telkens weer dit hele HTML en CSS zooitje moet herladen dan kan dat bij grote websites veel tijd kosten. Natuurlijk niet te vergeten bandbreedte. Laten we snel verder gaan en kijken naar de oplossing, die eigenlijk super simpel is.
CSS uit HTML
De oplossing is heel simpel, er is altijd gezegd door CSS goeroe’s houdt opmaak en HTML apart, door gebruik te maken van id's en classes. Dus laten we dat doen.
Index.html
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div>
<div id=”top”></div>
<div id="content">
<h1>Welcome</h1>
Some text
</div>
</div>
</body>
</html>
Style.css
#top {
Background: #fff url(header.jpg) no-repeat center;
Width:700px;
Height:300px;
}
#content {
Width:700px
Height:1000px;
Font-size:10pt;
Font-family:Arial;
Background-color:#000; //000 is short tag voor 000000
Color:#fff;
}
H1 {
Font-size:16pt;
Font-family: Serif;
}
Ik heb hier alleen id's gebruikt, omdat er maar één content is en niet twee etc. Als je meer van hetzelfde wilt gebruiken dan heb je classes nodig. Denk eraan om id's op te roepen in css gebruik de #(hekje) en voor classes de .(punt).
Dankzij dit zal de snelheid toenemen en bandbreedte afnemen, waarom, omdat een extern CSS bestand wordt opgeslagen in een cache en zolang niks veranderd er altijd is. Dit zorgt ervoor dat bij een tweede bezoek de opmaak klaar is en alleen de HTML hoeft worden opgehaald. Dan er nog een toefje bij het is overzichterlijker. Dit was natuurlijk simpel laten we nu verder gaan naar AJAX.
Pagina 3
Javascript in HTML
Javascript heeft zijn populariteit tegenwoordig te bedanken aan AJAX, maar met de hele AJAX gebeuren zitten fouten in, namelijk backbuttons die het niet doen, geen favorieten ondersteuning en natuurlijk iemand javascript uit, dan kun je zeggen dag potentiële bezoekers. Laat ik hier met een voorbeeld zien hoe het dus niet moet:
Index.html
Dit is wel mooi en aardig, maar javascript zit in HTML, geen backbuttons, geen favorieten en geen ondersteuning voor mensen die javascript uit hebben. Dit was dus niks, laat ik nog een foute voorbeeld tonen, die echter al wat beter was dan de vorige en wel de ondersteuning voor iedereen gaf:
Index.html
Nu kon iedereen juichen, want dit keer werd alles ondersteund, namelijk backbuttons, favorieten en mensen die zonder javascript willen werken. Toch is dit niet de ideale oplossing, want javascript staat erin en dat betekent bandbreedte en snelheids verlies, wat heb ik toch met deze woorden hé.
Index.html
<html>
<head>
<title>Welcome</title>
<script src="ajax.js"></script>
</head>
<body>
<a href=”javascript:onclick=”doedit(Ga.html, GET)”>LINK</a>
<div id=”content”></div>
</body>
</html>
Dit is wel mooi en aardig, maar javascript zit in HTML, geen backbuttons, geen favorieten en geen ondersteuning voor mensen die javascript uit hebben. Dit was dus niks, laat ik nog een foute voorbeeld tonen, die echter al wat beter was dan de vorige en wel de ondersteuning voor iedereen gaf:
Index.html
<html>
<head>
<title>Welcome</title>
<script src="ajax.js"></script>
</head>
<body>
<a href=”Ga.html” onclick=”doedit(Ga.html, GET); return false;”>LINK</a>
<div id=”content”></div>
</body>
</html>
Nu kon iedereen juichen, want dit keer werd alles ondersteund, namelijk backbuttons, favorieten en mensen die zonder javascript willen werken. Toch is dit niet de ideale oplossing, want javascript staat erin en dat betekent bandbreedte en snelheids verlies, wat heb ik toch met deze woorden hé.
Pagina 4
Hoe los je dit op
Voor deze antwoord kwam Ben Nolan op de beste manier uit, maak een behaviour systeem. Dit heeft hij voor ons gedaan, dit kun je gratis downloaden het is 5KB. Nu zou je denken 5KB dat is veel, ik kan je nu al zeggen liever 5KB aan externe oplossing dan interne oplossing, want alles wat buiten de HTML bestanden omgaat, wordt namelijk gecached.
Om het bestandje te downloaden heb ik hier de link:
http://www.bennolan.com/behaviour/behaviour.js
Dit hele systeem heeft een officiële naam, namelijk unobtrusive javascript behaviours (UJB).
Nadat je dit gedownload hebt, kun je natuurlijk in gaan rippen door spaties etc. weg te halen, dit kan het bestand aanzienlijk verkleinen. Bij mij lukte het bij de 2KB te komen, kan altijd nog minder, maar ik had de copyright rechten enzo ingelaten.
Na dit alles kan ik je eindelijk de beste oplossing laten zien, zie hier mijn eind voorbeeld:
Index.html
Voeg het volgende aan ajax.js toe:
Myrules is een object, waardoor je dus meerdere regels kunt toevoegen en Behaviour.register voegt de regels toe aan de behaviour.js, waardoor het systeem inwerking komt.
Nu zou alles weer moeten werken, en kijk geen javascript in de HTML bestand te zien. Alleen puur HTML, dit wilden we hebben. Denk eraan de gegeven voorbeelden kun je ook gebruiken met andere technieken. Voor meer informatie over UJB check: http://www.bennolan.com/behaviour/
Hoewel dit één manier is om alle javascript code uit de bron te halen zijn er andere mogelijkheden. Ik heb echter deze manier nu gekozen, omdat het simpel en eenvoudig te bevatten is. Het is waar er zitten fouten in, maar nu kun je javascript code uit laten voeren met behulp van classes en id's en is interne javascript niet meer nodig. Als je echter deze manier te overbodig vindt en te uitbundig, kijk dan even deze tutorial na: http://www.phphulp.nl/php/tutorials/8/309/611/, maak van af hier je eigen keuze met de stijl.
Om het bestandje te downloaden heb ik hier de link:
http://www.bennolan.com/behaviour/behaviour.js
Dit hele systeem heeft een officiële naam, namelijk unobtrusive javascript behaviours (UJB).
Nadat je dit gedownload hebt, kun je natuurlijk in gaan rippen door spaties etc. weg te halen, dit kan het bestand aanzienlijk verkleinen. Bij mij lukte het bij de 2KB te komen, kan altijd nog minder, maar ik had de copyright rechten enzo ingelaten.
Na dit alles kan ik je eindelijk de beste oplossing laten zien, zie hier mijn eind voorbeeld:
Index.html
<html>
<head>
<title>Welcome</title>
<script src="behaviour.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<a href=”Ga.html” class=”link”>LINK</a>
<div id=”content”></div>
</body>
</html>
Voeg het volgende aan ajax.js toe:
var myrules = {
‘.link’: function(el){
el.onclick = function(){
var url=getAttribute(href);
doedit(url, GET);
return false;
}
}
};
Behaviour.register(myrules);
Myrules is een object, waardoor je dus meerdere regels kunt toevoegen en Behaviour.register voegt de regels toe aan de behaviour.js, waardoor het systeem inwerking komt.
Nu zou alles weer moeten werken, en kijk geen javascript in de HTML bestand te zien. Alleen puur HTML, dit wilden we hebben. Denk eraan de gegeven voorbeelden kun je ook gebruiken met andere technieken. Voor meer informatie over UJB check: http://www.bennolan.com/behaviour/
Hoewel dit één manier is om alle javascript code uit de bron te halen zijn er andere mogelijkheden. Ik heb echter deze manier nu gekozen, omdat het simpel en eenvoudig te bevatten is. Het is waar er zitten fouten in, maar nu kun je javascript code uit laten voeren met behulp van classes en id's en is interne javascript niet meer nodig. Als je echter deze manier te overbodig vindt en te uitbundig, kijk dan even deze tutorial na: http://www.phphulp.nl/php/tutorials/8/309/611/, maak van af hier je eigen keuze met de stijl.
Pagina 5
Conclusie
HTML, opmaak en javascript moeten apart worden gehouden, dat weten jullie onderhand wel. Ik heb jullie laten zien hoe je alles apart moet houden en ik hoop dat jullie daaraan gaan houden.
Ter Memo:
- Alle voorbeelden zijn niet gecheckt of ze het ook echt doen en de voorbeelden zijn niet gemaakt om een tevreden layout resultaat te geven.
- S.V.P. wil ik graag alle Nederlandse schrijf fouten binnenkrijgen via PM, om de hele tijd Nederlands talige fouten te voorkomen in reacties.
- Als je een fout ontdekt in een van mijn geschreven voorbeelden of tekst (Technische fouten niet taal, zie bovenstaande) dan graag melden bij reacties en het liefst zeggen wat fout is. Als het kan ook de oplossing :).
Ik hoop dat jullie het interessant vonden en hoop dat jullie dit een goede tutorial vonden. Tenslotte het is mijn eerste tutorial dus van fouten wil ik graag leren.
Greetz,
Christian Bolster
Ter Memo:
- Alle voorbeelden zijn niet gecheckt of ze het ook echt doen en de voorbeelden zijn niet gemaakt om een tevreden layout resultaat te geven.
- S.V.P. wil ik graag alle Nederlandse schrijf fouten binnenkrijgen via PM, om de hele tijd Nederlands talige fouten te voorkomen in reacties.
- Als je een fout ontdekt in een van mijn geschreven voorbeelden of tekst (Technische fouten niet taal, zie bovenstaande) dan graag melden bij reacties en het liefst zeggen wat fout is. Als het kan ook de oplossing :).
Ik hoop dat jullie het interessant vonden en hoop dat jullie dit een goede tutorial vonden. Tenslotte het is mijn eerste tutorial dus van fouten wil ik graag leren.
Greetz,
Christian Bolster
Reacties
0