CSS, Javascript los van HTML

Door CB2thephp , 20 jaar geleden, 6.625x bekeken

Hoe krijg je CSS en Javascript (AJAX) gescheiden van HTML, ervaring javascript en CSS vereist.

Gesponsorde koppelingen

Inhoudsopgave

  1. Inleiding
  2. CSS in HTML en Eruit
  3. Javascript in HTML
  4. Hoe los je dit op
  5. Conclusie

 

Er zijn 6 reacties op 'Css javascript los van html'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
CB2thephp
CB2thephp
20 jaar geleden
 
0 +1 -0 -1
Je kunt reageren, maar svp denk aan mijn memo's in de conclusie om de reacties nuttig te houden.

Greetz,

Christian Bolster
Pim Vernooij
Pim Vernooij
20 jaar geleden
 
0 +1 -0 -1
Correctie: 'myrules is een array' moet zijn 'myrules is een object'. Dit fenomeen heet 'unobtrusive' javascript. Ik vind de implementatie van je event handler vrij over-the-top. Het kan een stuk makkelijker, zoals bijvoorbeeld onderstaand script:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
function addEvent(obj, eventType, fn, useCapture) {
        if (obj.addEventListener) {
                obj.addEventListener(eventType, fn, useCapture);
                return true;
        }
        else if (obj.attachEvent) {
                var r = obj.attachEvent("on"+eventType, fn);
                return r;
        }
}
var myObject = document.getElementById("mijnUrl");
addEvent( myObject, 'click', function() { alert( "jaja, er is op mij geklikt!" ); }, false);

Op deze manier is het ook mogelijk om meerdere events van hetzelfde type aan een object te hangen. Iets wat bij jouw behaviour script niet mogelijk is.

Dan webb's scripting essentials zijn een goede verzameling van aanvullingen voor dit type javascripting.
Jelmer -
Jelmer -
20 jaar geleden
 
0 +1 -0 -1
In deze tutorial staat ook nog een stukje over events, maar dan wat minder extreem. Meer de kant die Pim al geeft.
CB2thephp
CB2thephp
20 jaar geleden
 
0 +1 -0 -1
Jelmer en Pim Lees aub de teksten goed door. De event handlers zijn niet door mij gemaakt, maar door Ben Nolan. Want dit komt uit het bestand behaviour.js h?. Dus bij dit soort fouten graag melden bij Ben Nolan zelf. Hij zal het dan upgraden naar een nieuwe versie. Ik wil graag jullie tutorials bekijken, want dan leer ik meer over events, maar de events hierin gemaakt zijn niet van mij dus lees de volgende beter ;)

@Pim ik zal mijn fout corrigeren over de array, trouwens de unobtrusive staat in mijn tekst.

Ik hoop dat jullie mijn punt hierboven begrijpen

Greetz,

Christian Bolster
Jelmer -
Jelmer -
20 jaar geleden
 
0 +1 -0 -1
Wat wij zeggen is dat jou aanpak van Javascript koppelen aan HTML nogal een drastische aanpak is. Het heeft meer overeenkomsten met CSS en XBL dan met Javascript. Een wat lichtere manier is het gebruik van addEvent, zoals ik in mijn tutorial besprak.

AddEvent is niets meer dan een functie aanroepen die een link legt tussen het drukken op een knop en het uitvoeren van een functie. Voordeel van deze simpele methode is dat je hem veel gerichter kan toepassen. Nadeel is dat waneer je meerdere elementen wilt voorzien van event listeners, dan zal je zelf een for-lusje moeten maken.

Wat dit als kritiek is op je tutorial? Je zegt dat het Behavior-script de beste oplossing is, maar geeft niet aan welke andere mogelijkheden er waren noch argumenten waarom het de beste oplossing is.

Wat jij doet is een beetje vergelijkbaar met het MVC pattern uitleggen, en zeggen dat de View in MVC Smarty of een andere template-parser moet zijn, terwijl PHP zelf dit ook prima voor zijn rekening kan nemen. En het argument dat 'je de designer niet met code wilt laten schrikken' gaat niet op voor Javascript mag ik hopen ;)

edit: het is overigens fijn dat iemand hier eens een tutorial over schrijft, want inderdaad met de opkomst van de AJAX-aapjes is het wel handig ze een schop in de goede richting te geven :)
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
CB2thephp
CB2thephp
20 jaar geleden
 
0 +1 -0 -1
Sorry, ik wist niet van andere methodes, ik wil graag kijken naar andere methodes, toch heeft deze methode 1 voordeel. Het is simpel en dus niet moeilijk te bevatten, ik hoop dat je deze argument niet erg vindt.

Ik zal van het weekend kijken in jou gegeven methodes en dan proberen erbij toe te voegen

Greetz,

Christian Bolster

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. Inleiding
  2. CSS in HTML en Eruit
  3. Javascript in HTML
  4. Hoe los je dit op
  5. Conclusie

Labels

  • Geen tags toegevoegd.

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.