CMS verbeteren d.m.v JavaScript - Softwareontwikkeling

zaterdag 18 juni 2005 21:21

Acties:

Verwijderd

Topicstarter

Note to self: Nooit posts wissen voordat de tekst gekopieerd en geplakt en opgeslagen is op je HD

Vanwege de eerste reactie: Zie vier posts hieronder een nieuwe vraagstelling

Eén van de resultaten van dit topic (de andere ergernis aan ieders kant door mijn duidelijke formuleringen

) is een JavaScript dat uit een paragraaf tag met "date" klasse een tweede numerieke klasse (in epoch formaat) uitleest, een 'dynamische tijd' (Written 2 hours and 20 minutes ago) creërt, en de normale datum tekst in de paragraaf vervangt door deze 'dynamische' datum. Zie de eerste post op pagina twee voor de (eerste versie van) de code.

[ Voor 227% gewijzigd door Verwijderd op 20-06-2005 19:42 ]

zondag 19 juni 2005 13:57

Acties:

Blauw

De Schreeuw

En nu verwacht je dat wij kilometers van jou code door gaan zitten te bladeren om er commentaar op te leveren? Kan je het zelf niet ff kritisch bekijken en terugkomen wanneer het helemaal af is?

Bedenk je vooral ook even wat jou CMS voor meerwaarde gaat hebben tov. al die andere pakketten

[ Voor 21% gewijzigd door Blauw op 19-06-2005 13:57 ]

zondag 19 juni 2005 14:12

Acties:

Verwijderd

Topicstarter

Blauw schreef op zondag 19 juni 2005 @ 13:57:
En nu verwacht je dat wij kilometers van jou code door gaan zitten te bladeren om er commentaar op te leveren? Kan je het zelf niet ff kritisch bekijken en terugkomen wanneer het helemaal af is?

Oke, ik gaf geen JavaScript code weer die ik gebruik, dit deed ik in de veronderstelling/hoop dat de genoemde problemen bekend waren. Maar ik het toch duidelijk de problemen genoemd? Dan alsnog, I get the hint, zal even wat duidelijke(re) & concrete(re) vragen & voorbeelden van code posten.

Bedenk je vooral ook even wat jou CMS voor meerwaarde gaat hebben tov. al die andere pakketten

[ Voor 55% gewijzigd door Verwijderd op 19-06-2005 14:47 ]

zondag 19 juni 2005 14:16

Acties:

The Eagle

I wear my sunglasses at night

Ik weet niet wat je wilt, maar sitechecks doen we hier niet, zie [rml][ W&G FAQ] W&G Policy & Beleid[/rml]

Al is het nieuws nog zo slecht, het wordt leuker als je het op zijn Brabants zegt :)

zondag 19 juni 2005 15:13

Acties:

Verwijderd

Topicstarter

The_Eagle schreef op zondag 19 juni 2005 @ 14:16:
Ik weet niet wat je wilt, maar sitechecks doen we hier niet, zie [rml][ W&G FAQ] W&G Policy & Beleid[/rml]

Excuse moi, ik heb mij verkeerd uitgedrukt in de topic titel. Het was niet mijn intentie achteruit te leunen en suggesties binnen te laten stromen. Daarom ben ik ook al meer dan twee maand bezig met deze code. Als een mod de topic titel zou kunnen veranderen in iets als "CMS verbeteren d.m.v JavaScript" waardeer ik dit.

Ik probeer het nog een keer, met duidelijke concrete vragen:

Data aan element koppelen en opvragen via JavaScript

Eén van de JavaScript verbeteringen ten opzichte van de <noscript> interface is dat alle data onder posts en comments weergegeven worden in de vorm "Posted 15 hours and 46 minutes ago". Als JavaScript niet beschikbaar is neemt de normale datum in de <noscript> het over:

code:

<p class="date">Posted 
    <script type="text/javascript">
        showFriendlyDate("June 16, 2005 23:11:34");
        document.write(" ago");
    </script>
    <noscript>Thursday the 16th of June 2005 at 23:11</noscript>
</p>

Opzich is dit wel oke in het opzicht dat er geen rare situatie ontstaat als JavaScript niet werkt, maar toch voelt het niet goed om dit soort blokken JavaScript inline te zetten. En het kost natuurlijk bestandsgrootte. Als ik de datum gewoon als

code:

1	<p class="date">Thursday the 16th of June 2005 at 23:11</p>

kan weergeven blijft de HTML bron code schoon, maar dan moet ik wel de datum weer terug kunnen krijgen met JavaScript, zodat ik hem kan verwerken. Het lijkt me niet echt slim om met JavaScript de bovenstaande string te gaan parsen, dus moet ik de datum voor JavaScript op een andere manier op slaan. Ik zat zelf te denken aan twee klassen voor de paragraaf, "date" en een integer in epoc formaat, 1119186350. (Ik weet niet eens of een klassenaam bestaande uit nummers wel correct is, even opzoeken) Wat denken jullie, zou dit cross browser te doen moeten zijn? (Ik vraag hier dus niet om kant en klare code, al zou een richting fijn zijn

)

Ik heb alistapart.com al doorgelezen en ook quirksmode.org geprobeerd. Het schijnt dat niemand op dit probleem een kant en klare oplossing heeft. Ik wil geen ongeldige attributen gebruiken. De title tag zou kunnen, maar ook dat is niet echt een mooie oplossing. Ik vraag me dus af of ik ergens overheen gekeken heb...

Concreet genoeg?

[ Voor 17% gewijzigd door Verwijderd op 19-06-2005 15:17 ]

zondag 19 juni 2005 16:03

Acties:

Not Pingu

Dumbass ex machina

wacht even, dus je wilt datums formatteren mbv. Javascript aan de clientside? Maakt je CMS verder wel gebruik van PHP of ASP of een andere serverside-platform? Zoja, waarom handel je datumformatteren daar niet af? Zoniet, is het dan wel een CMS?

Certified smart block developer op de agile darkchain stack. PM voor info.

zondag 19 juni 2005 16:26

Acties:

Verwijderd

Topicstarter

Ja zo gaat dat met die klote browsers. De eerste post bevatte een duidelijke omschrijving van mijn idee, maar ik heb die verwijderd omdat ik hem overnieuw wilde schrijven, duidelijker, als reply, en toen ik die tekst in de nieuwe reply aan het bewerken was crashte mijn browser

Het systeem moet dus statisch blijven. Dat is het hele idee erachter. Geen database, geen pagina's die door PHP opgebouwd worden. Het systeem dat de pagina's genereert, comments beheert, brondata opslaat, RSS feeds regelt, syntax highlighting uitvoert, etc, draait op alles >= PHP 4.

Het enige wat dynamisch is aan de kant van de bezoekers is de comment editor, en die wordt opgeroepen als /admin/actions/comment/, dus als ik index.php vervang door index.html met de melding dat comments zijn uitgeschakeld, is mijn hele systeem in één simpele stap een statische website. Dit vind ik wel een fijn idee.

Ook vind ik dat Apache beter overweg kan met LastModified, E-tag en Content-range headers als een willekeurig script dat ik of wie dan ook schrijft. Apache is het resultaat van jarenlang programmeren door honderden mensen. Dat doet mijn PHP systeempje vast niet beter.

Hiernaast is het voor mij een uitdaging om een interface te maken die dynamischer is als een groot deel van de écht dynamische websites, die dus met PHP, Perl, CF, etc on-the-fly uit een database tevoorschijn getoverd worden.

Kortgezegd, als het mogelijk is om een CMS te creëren zonder serverside scripts die door bezoekers gebruikt worden, waarom dan niet?!

Maargoed, deze topic ging vanaf zijn geboorte al nergens heen

. Ik zal het gewoon zelf moeten uitzoeken.

Als iemand toch geïnteresseerd is in het systeem, zie dan xolox.goddeloos.nl (Als iemand me op een plaintext link nog afkeurt onder het mom van geen sitecheck requests is dit mijn laatste bezoek aan GOT

).

[ Voor 15% gewijzigd door Verwijderd op 19-06-2005 16:39 ]

zondag 19 juni 2005 16:40

Acties:

ripexx

bibs

Verwijderd schreef op zondag 19 juni 2005 @ 16:26:
Het systeem moet dus statisch blijven. Dat is het hele idee erachter. Geen database, geen pagina's die door PHP opgebouwd worden. Het enige wat dynamisch is, is de comment editor, en die wordt opgeroepen als /admin/actions/comment/, dus als ik index.php vervang door index.html met de melding dat comments zijn uitgeschakeld, is mijn hele systeem in één simpele stap een statische website. Dit vind ik wel een fijn idee. Ook vind ik dat Apache beter overweg kan met LastModified, E-tag en Content-range headers als een willekeurig script dat ik schrijf. Hiernaast is het voor mij een uitdaging om een interface te maken die dynamischer is als een groot deel van de écht dynamische websites, die dus met PHP, Perl, CF, etc werken.

Kortgezegd, als het mogelijk is om een CMS te creëren zonder serverside scripts die door bezoekers gebruikt worden, waarom dan niet?!

Hoe wil je dan de source van de pagina op de server aanpassen? Client side Javascript kan niet iets weg schrijven op de server.

Maargoed, deze topic ging al vanaf zijn geboorte al nergens heen . Ik zal het gewoon zelf moeten uitzoeken.

Wellicht is het voor ons niet helemaal duidelijk wat je nu wilt? Kan je niet een simpel proof of concept maken waarmee je het probleem duidelijk maakt?

Als iemand toch geïnteresseerd is in het systeem, zie dan xolox.goddeloos.nl (Als iemand me op een plaintext link nog afkeurt onder het mom van geen sitecheck requests is dit mijn laatste bezoek aan GOT).

Kom op zeg, dit soort kinderachtige opmerkingen zijn niet nodig. Als jij met een paar regels code kan aangeven wat je wil zonder een link naar een andere website of het plaatsen van 100'en regels code is het voor diegene die willen meedenken ook makelijker.

Het is een kwestie van geven en nemen.

buit is binnen sukkel

zondag 19 juni 2005 16:43

Acties:

Not Pingu

Dumbass ex machina

Ik snap dus nog steeds niet waarom je die datum perse met javascript wilt formatten. Is het volgens jou echt zo belangrijk dat een relatieve datum (X dagen geleden) wordt getoond?

Opzich is het een aardig streven om volledig statische output te creeeren, ware het niet dat bijv. search engine indexing allang geen problemem meer oplevert met 'rare' URL's. Vervelend dat dat soort wijsheden lang na hun houdbaarheidsdatum blijven rondspoken.

Certified smart block developer op de agile darkchain stack. PM voor info.

zondag 19 juni 2005 17:26

Acties:

Grijze Vos

Verwijderd schreef op zondag 19 juni 2005 @ 16:26:
Ook vind ik dat Apache beter overweg kan met LastModified, E-tag en Content-range headers als een willekeurig script dat ik of wie dan ook schrijft. Apache is het resultaat van jarenlang programmeren door honderden mensen. Dat doet mijn PHP systeempje vast niet beter.

www.php.net

10 years since PHP 1.0 was released!

[08-Jun-2005] It has been 10 years since Rasmus released the first version of PHP. To everyone that has helped to shape PHP into what it is today; from the people developing the core and extensions, documentors, script developers, bug reporters, beta testers, PHP application developers and even just people that are using PHP—Thank you!

Ja, PHP is natuurlijk ontwikkeld door 3 mensen op een zolderkamertje.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

zondag 19 juni 2005 17:44

Acties:

Verwijderd

Topicstarter

Ten eerste, heb al 4 nachten niet geslapen, dus vandaar dat vandaag / dit topic niet helemaal soepel loopt

ripexx schreef op zondag 19 juni 2005 @ 16:40:
Hoe wil je dan de source van de pagina op de server aanpassen? Client side Javascript kan niet iets weg schrijven op de server.

Sorry, verkeerde terminologie, ik zei "geen pagina's die door PHP opgebouwd worden", maar bedoelde hiermee dat dit niet gebeurt als gebruikers een pagina opvragen, natuurlijk wel als ik een post/entry opsla.

Wellicht is het voor ons niet helemaal duidelijk wat je nu wilt? Kan je niet een simpel proof of concept maken waarmee je het probleem duidelijk maakt?

Oke, bekijk http://xolox.goddeloos.nl/2005/06/18/syntax_highlighting/ eens, als je tijd hebt en moeite niet erg vindt

. De data die je in die pagina ziet (als het goed is) worden dus door mijn document.write script gemaakt. Ik zou dit op een andere manier willen doen. Dus op de een of andere manier binnen de de normale datum opslaan, maar ook een datum bewaren waar JavaScript iets mee kan. zoals bijvoorbeeld

code:

1	<p class="date 1119186350">Posted on Thursday the 16th of June 2005 at 23:11</p>

En dan een GetElementsBySelector op p#date, vervolgens de integer klasse (1119186350) verkrijgen, de dynamische datum creëren met -in principe- de code die ik nu gebruik, en de inhoud van p#date vervangen met de gecreërde, dynamische datum.

Ik ben nu een proof of concept aan het schrijven, dat zal waarschijnlijk nog wel even op zich laten wachten, aangezien ik niet bepaald vloeiend JavaScript spreek.

Kom op zeg, dit soort kinderachtige opmerkingen zijn niet nodig. Als jij met een paar regels code kan aangeven wat je wil zonder een link naar een andere website of het plaatsen van 100'en regels code is het voor diegene die willen meedenken ook makelijker. Het is een kwestie van geven en nemen.

Vier nachten niet geslapen en, zonder over iemand anders te oordelen (eerder mezelf), dit topic ging gewoon vervelend. Maar toch, er stond een

achter, zo van, niet te serieus.

Bedankt voor jullie reacties

Gunp01nt schreef op zondag 19 juni 2005 @ 16:43:
Ik snap dus nog steeds niet waarom je die datum perse met javascript wilt formatten. Is het volgens jou echt zo belangrijk dat een relatieve datum (X dagen geleden) wordt getoond?

Omdat het mogelijk is. Waarom zou ik een CMS willen schrijven? Ik heb echt niet de illusie er geld mee te verdienen. Programmeren is een hobby en ik vindt een lijst comments met dynamische datums prettiger lezen. Dit is genoeg motivatie om het te doen.

Opzich is het een aardig streven om volledig statische output te creeeren, ware het niet dat bijv. search engine indexing allang geen problemem meer oplevert met 'rare' URL's. Vervelend dat dat soort wijsheden lang na hun houdbaarheidsdatum blijven rondspoken.

Hoe kom je daarbij? Mijn website gelezen? Zo ja, dit wist ik al. De tekst op mijn website (letterlijk "No worries about search engine indexing") had ik moeten verwijderen voordat die pagina's online gingen. Ik vond het gewoon leuk alle potientiele voordelen op een rij te zetten. Ik weet dat alleen URL's met een querystring parameter van de naam "id" soms niet worden geïndexed. Dit is dus geen motivatie voor mij, al vind ik clean URL's zeker fijn.

Grijze Vos schreef op zondag 19 juni 2005 @ 17:26:
Ja, PHP is natuurlijk ontwikkeld door 3 mensen op een zolderkamertje

Neem je me in de zeik of snap je me niet? Het heeft niks met PHP te maken, maar met het feit dat Apache alles automatisch en vrijwel zeker ook efficienter kan doen dan ik met PHP. PHP is begonnen als template taal geschreven in Perl/CGI. Apache is nooit geen webserver geweest. Onder het mom van waarom het wiel opnieuw uitvinden...

[ Voor 9% gewijzigd door Verwijderd op 19-06-2005 17:49 ]

zondag 19 juni 2005 19:28

Acties:

ripexx

bibs

Verwijderd schreef op zondag 19 juni 2005 @ 17:44:
Ten eerste, heb al 4 nachten niet geslapen, dus vandaar dat vandaag / dit topic niet helemaal soepel loopt

Dat is nog geen reden. Hou je aan de forum etiquette en dan kan je soms best verbaasd zijn.

Sorry, verkeerde terminologie, ik zei "geen pagina's die door PHP opgebouwd worden", maar bedoelde hiermee dat dit niet gebeurt als gebruikers een pagina opvragen, natuurlijk wel als ik een post/entry opsla.

Kijk nu wordt het wat duidelijker

Oke, bekijk http://xolox.goddeloos.nl/2005/06/18/syntax_highlighting/ eens, als je tijd hebt en moeite niet erg vindt . De data die je in die pagina ziet (als het goed is) worden dus door mijn document.write script gemaakt. Ik zou dit op een andere manier willen doen. Dus op de een of andere manier binnen de de normale datum opslaan, maar ook een datum bewaren waar JavaScript iets mee kan. zoals bijvoorbeeld
code:
1
Posted on Thursday the 16th of June 2005 at 23:11
En dan een GetElementsBySelector op p#date, vervolgens de integer klasse (1119186350) verkrijgen, de dynamische datum creëren met -in principe- de code die ik nu gebruik, en de inhoud van p#date vervangen met de gecreërde, dynamische datum.

Ik ben nu een proof of concept aan het schrijven, dat zal waarschijnlijk nog wel even op zich laten wachten, aangezien ik niet bepaald vloeiend JavaScript spreek.

Waarom moetlijk doen met een Get ElementBySelector, gebruik gewoon getElementById(). Je kan gewoon met een innerhtml de text vervangen door een gerieke datum. Daarnaast heeft dat hele noscript gebeuren weinig nut. 99% van de browser onderstuenen gewoon JS en hebben er niets aan. Ook niet elke browser houdt zich aan dit soort (script)tags.

code:

1	<p>Posted <span id="jsdate">19-06-2005</span></p>

Nu gewoon met JS de span om vormen en je bent klaar. Niet veel moeijker doen.

Vier nachten niet geslapen en, zonder over iemand anders te oordelen (eerder mezelf), dit topic ging gewoon vervelend. Maar toch, er stond een achter, zo van, niet te serieus.

Ten eerste die

stond er niet direct achter en los daar van is het gewoon een stomme ondoordachte opmerking. Dus geef dat gewoon toe inplaats van er om heen te draaien, daar verdien je respect mee, niet door het achteraf af te zwakken.

[...]

Neem je me in de zeik of snap je me niet? Het heeft niks met PHP te maken, maar met het feit dat Apache alles automatisch en vrijwel zeker ook efficienter kan doen dan ik met PHP. PHP is begonnen als template taal geschreven in Perl/CGI. Apache is nooit geen webserver geweest. Onder het mom van waarom het wiel opnieuw uitvinden...

Dit is weer lekker makelijk

Tja dat PHP ooit begonnen is als een Perl script wil niets zeggen. Tegenwoordig is het gewoon een C/C++ module welke gewoon rechstreeks in apache zit ingebakken. Tuurlijk heb je wel wat overhead maar dat is nihil tov wat jij nu wilt. Als je echt rap statische files wil serveren gebruik dan boa ofzo want die is nog velemalen sneller dan apache. Verder slaat je opmerking nergens op. Kort om onderbouw je mening nu eens op een behoorlijke manier in plaats van alleen maar botte ondoordachte opmerkingen te maken. Want je maakt jezelf iig niet echt populair.

[ Voor 3% gewijzigd door ripexx op 19-06-2005 19:28 ]

buit is binnen sukkel

maandag 20 juni 2005 01:43

Acties:

Eärendil

ripexx schreef op zondag 19 juni 2005 @ 19:28:
Waarom moetlijk doen met een Get ElementBySelector, gebruik gewoon getElementById(). Je kan gewoon met een innerhtml de text vervangen door een gerieke datum. Daarnaast heeft dat hele noscript gebeuren weinig nut. 99% van de browser onderstuenen gewoon JS en hebben er niets aan. Ook niet elke browser houdt zich aan dit soort (script)tags.
code:
1
Posted 19-06-2005
Nu gewoon met JS de span om vormen en je bent klaar. Niet veel moeijker doen.

Dit idee had ik ook, maar ik zou geen id's gebruiken maar classes, er kunnen er natuurlijk meerdere van voorkomen. Moet je alleen even een functie zoeken die alle elementen van een bepaalde class geeft.

maandag 20 juni 2005 02:10

Acties:

Verwijderd

list = getElementsByClass(node, "jsdate")

class gebruiken dus.

maandag 20 juni 2005 03:17

Acties:

Verwijderd

Topicstarter

Ik dacht dat GetElement(s)ByClass helemaal niet bestond, vandaar de GetElementsBySelector, daarvan wist ik iig dat het werkt, en idd Eärendil, geen id maar klasse gebruiken, omdat er onder één post ook meerdere comments worden weergegeven.

Over de hele discussie of de server of scripttaal sneller is, sorry, had er niet over moeten beginnen, logisch dat we het hier niet over eens worden. Wil niet zeggen dat het onmogelijk is een PHP script te schrijven wat slim omgaat met E-tag, LastModified en Content-Range headers. Alleen dat het meer gedoe is.

Edit: Ik zit nu in een toetsweek, maar zal eens kijken of ik vandaag wat werkende kan krijgen. Bedankt voor jullie input.

Edit2:

ripexx schreef op zondag 19 juni 2005 @ 19:28:
Dit is weer lekker makelijk Tja dat PHP ooit begonnen is als een Perl script wil niets zeggen. Tegenwoordig is het gewoon een C/C++ module welke gewoon rechstreeks in apache zit ingebakken. Tuurlijk heb je wel wat overhead maar dat is nihil tov wat jij nu wilt. Als je echt rap statische files wil serveren gebruik dan boa ofzo want die is nog velemalen sneller dan apache.

Niet iedereen heeft de luxe van een zelf beheerbare en/of snelle webserver. Ik dus niet. Een 'oplossing' als Boa is dus niet mogelijk. En juist omdat ik de server niet beheer, en deze dynamische pagina's soms/te vaak een dikke 15 seconden laat wachten, ben ik zo gefixeerd op optimalisaties, én een website die voor bezoekers statisch is.

Verder slaat je opmerking nergens op. Kort om onderbouw je mening nu eens op een behoorlijke manier in plaats van alleen maar botte ondoordachte opmerkingen te maken. Want je maakt jezelf iig niet echt populair.

Ik erken dat ik flauwe/ondoordachte opmerkingen geplaatst heb. Ik was ook gewoon chagrijnig. Had ik idd beter even kunnen wachten met posten. Zal ik volgende keer doen. Maar "alleen maar botte ondoordachte opmerkingen" is gewoon onzin, ik heb (waarschijnlijk IMO) nauwelijks onvriendelijk gedaan.

[ Voor 60% gewijzigd door Verwijderd op 20-06-2005 18:58 . Reden: Even duidelijker verklaren ]

maandag 20 juni 2005 08:43

Acties:

crisp

Devver

Pixelated

JavaScript:

document.getElementsByClassName = function (needle, tagname)
{
    if (!tagname) tagname = '*';
    var s = document.getElementsByTagName(tagname), i = s.length, r = [], e, c;
    needle = ' ' + needle + ' ';

    while (i--)
    {
        e = s.item(i);

        if (e.className)
        {
            c = ' ' + e.className + ' ';
            if (c.indexOf(needle) != -1) r.push(e);
        }
    }

    return r;
}

edit: note dat IE5.x de push() method niet ondersteund...

[ Voor 7% gewijzigd door crisp op 20-06-2005 16:43 ]

Intentionally left blank

maandag 20 juni 2005 13:36

Acties:

Verwijderd

Topicstarter

Bedankt! Die komt in m'n toolbox

En interessant dat je functies aan document kunt 'toevoegen' (wat de term er ook voor is). Kun je zien hoe zo'n JS n00b ik ben

Even een vraagje, ik ben hier al naar op zoek, maar denk ik probeer het hier ook even: Wat is de beste manier om content in een pagina te krijgen zonder inline JavaScript/document.write? Ik heb nu een InnerHTML proof of concept grotendeels werkende, in MSIE en Mozilla. Maar is InnerHTML correct, of MSIE specifiek en werkt het in Mozilla vanwege compatibility modus? (Er staat me iets bij over zo'n modus, maar heb geen idee wat er allemaal onderdeel van is)

En als ik dan toch bezig ben, kent iemand nog een goede online JavaScript reference? Zo van, kort en bondig, heb geen voorbeelden nodig, moet gewoon functies en syntax naslag hebben.

Update: InnerHTML is dus idd een extensie van JavaScript (volgens IEBlog), maar een cross browser alternatief heb ik nog niet...

ps. Dank aan admin voor nieuwe topic title!

[ Voor 25% gewijzigd door Verwijderd op 20-06-2005 13:40 ]

maandag 20 juni 2005 13:42

Acties:

crisp

Devver

Pixelated

innerHTML is een Microsoft propriety extention op DOM (Document Object Model), maar wordt wel door alle moderne browsers ondersteund. innerHTML is handig als je een grote hoeveelheid pre-formatted HTML wil toevoegen aan je document. In alle andere gevallen kan je het beste gewoon met de DOM-methods werken (zoals createElement, createTextNode, appendChild) en DOM-properties bewerken (zoals nodeValue).

Online JS reference (vroegere DevEdge): http://devedge-temp.mozil.../javascript/index_en.html
Online DOM reference: http://www.mozilla.org/docs/dom/domref/dom_shortIX.html (specifiek Gecko, maar omvat dus ook core DOM)

[ Voor 23% gewijzigd door crisp op 20-06-2005 13:46 ]

Intentionally left blank

maandag 20 juni 2005 13:45

Acties:

Verwijderd

Topicstarter

Oke. Bedankt voor de snelle reactie & reference! Kan ik weer een paar uurtjes verder kloten met JavaScript

.

[ Voor 7% gewijzigd door Verwijderd op 20-06-2005 13:55 ]

maandag 20 juni 2005 15:51

Acties:

Verwijderd

Topicstarter

Ik heb het bijna werkende. Mijn showDynamicDate() functie geeft nu een string terug, i.p.v directe document.write's. Ik kan de klasse die de epoch datum bevat verkrijgen. Alles werkt!

Maar als ik het combineer niet

Als ik in showDynamicDate() een epoch datum als
[code]postedTime = new Date(1014744562000);[/code]
hardcode, is alles goed. De dynamische datum word weergegeven. Als ik de datum doorgeef, werkt het niet. Dus ik dacht, er gaat al eerder iets mis. Maar
[code]function showDynamicDate(epochDate) {
alert(epochDate);
postedTime = new Date(epochDate);[/code]
geeft me wél een alert met het getal, onveranderd. Wat gaat er hier fout? Wordt de epochDate als string behandeld waardoor ik hem wel kan weergeven maar niet als input voor Date() kan gebruiken?

Het epoch getal dat ik gebruikt heb, hardcoded zowel als verkregen via het paragraaf element, is hetzelfde in alle gevallen... Dit heb ik gecontroleerd via de alert().

Opgelost. Als ik de epochdate typecast (heet het zo in JavaScript?) als Number(epochdate) werkt alles. Allemaal bedankt, enneh, zal nog even het script poste. Het is wel groot

[ Voor 15% gewijzigd door Verwijderd op 20-06-2005 16:13 ]

maandag 20 juni 2005 16:11

Acties:

crisp

Devver

Pixelated

JavaScript:

1	alert(typeof epochDate);

als daar 'String' uitkomt dan moet je dus eerst naar een integer omzetten met bijvoorbeeld parseInt()

Intentionally left blank

maandag 20 juni 2005 16:15

Acties:

Verwijderd

Topicstarter

Bedankt, doch net te laat

Number(epochDate) werkt ook. Even goed?

Jammer dat er op Tweakers geen attachments zijn toegestaan, alhoewel begrijpelijk. Hieronder komt zodirect een grote lap code, eerst nog even testen op honderd paragrafen ofzo

maandag 20 juni 2005 16:18

Acties:

crisp

Devver

Pixelated

de Number() constructor forceert een typecast; parseInt() is echt een omzetting, maar zelfs dit is een mogelijkheid (forceert ook een typecast):

JavaScript:

1	var postedTime = new Date(epochDate/1);

[ Voor 8% gewijzigd door crisp op 20-06-2005 16:19 ]

Intentionally left blank

maandag 20 juni 2005 16:30

Acties:

Verwijderd

Topicstarter

Veel geleerd vandaag. Bedankt voor alle JavaScript info.

Ben er net achter gekomen waarom de combinatie PHP / JavaScript niet werkt.

Een datum in het epoch formaat, die werkt met JavaScript, geeft in PHP niet dezelfde output. Hij gebruikt drie meer decimalen. Door met testen...

Edit: Dank je, had het net uitgevogeld

[ Voor 46% gewijzigd door Verwijderd op 20-06-2005 16:36 ]

maandag 20 juni 2005 16:34

Acties:

crisp

Devver

Pixelated

epoch wil hier niet meer zeggen dan 'tijd vanaf 1 januari 1970'; in javascript zijn dat milliseconden, en in PHP seconden

zie wikipedia:

The word epoch can mean either an interval of time, or a particular point in time used as a reference point.

[ Voor 3% gewijzigd door crisp op 20-06-2005 16:36 ]

Intentionally left blank

maandag 20 juni 2005 16:52

Acties:

Verwijderd

Topicstarter

Het is geen mooie code, heb een aantal helper functies gebruikt, en het werkt vast niet efficient, maar het werkt.

Voor wie deze code wil gebruiken (mocht er iemand zijn

)
Deze code zoekt naar alle p-tags met de klasse date en een numerieke klasse. Deze numerieke klasse is de tijd sinds de UNIX epoch in milliseconden. Alle tekst in de paragraaf wordt gewist, en vervangen door de dynamische datum.

Als ik honderd verschillende data via een for-loopje in PHP uitspuug, en ik bekijk de pagina, zie ik zonder de originele paragraaf inhoud te zien voorbij flitsen alle dynamische data. Dus zonder vertraging. Das wel fijn

.

Ieder bedankt voor zijn input, heeft me op zijn minst een aantal dagen rondkloten gescheeld.

JavaScript:

// Array Extensions  v1.0.6 by Chris Nott (chris[at]dithered[dot]com)

var undefined;

function isUndefined(property) {
  return (typeof property == 'undefined');
}

// Array.push() - Add an element to the end of an array
if (isUndefined(Array.prototype.push) == true) {
  Array.prototype.push = function() {
     var currentLength = this.length;
     for (var i = 0; i < arguments.length; i++) {
        this[currentLength + i] = arguments[i];
     }
     return this.length;
  };
}

// Door crisp

document.getElementsByClassName = function (needle, tagname) {
    if (!tagname) tagname = '*';
    var s = document.getElementsByTagName(tagname), i = s.length, r = [], e, c;
    needle = ' ' + needle + ' ';
    while (i--) {
        e = s.item(i);
        if (e.className) {
            c = ' ' + e.className + ' ';
            if (c.indexOf(needle) != -1) { r.push(e); }
        }
    }
    return r;
}

function isInteger(val){
    if (isBlank(val)){ return false; }
    for(var i=0;i<val.length;i++){
        if (!isDigit(val.charAt(i))) { return false; }
        }
    return true;
}

function isBlank(val){
    if(val==null){return true;}
    for(var i=0;i<val.length;i++) {
        if ((val.charAt(i) != ' ') && (val.charAt(i) != "\t") && (val.charAt(i) != "\n") && (val.charAt(i) != "\r")){ return false; }
    }
    return true;
}

function isDigit(num) {
    if (num.length > 1){ return false; }
    var string = "1234567890";
    if (string.indexOf(num) != -1){ return true; }
    return false;
}

function showDynamicDates() {
    var dateInEpochFormat;
    if (document.getElementsByClassName) {
        dynamic_dates = document.getElementsByClassName('date', 'p');
        for (i = 0; i < dynamic_dates.length; i++) {
            classNames = dynamic_dates[i].className.split(' ');
            getDateFromClassName:
            for (j = 0; j < classNames.length; j++) {
                if (isInteger(classNames[j])) {
                    dateInEpochFormat = classNames[j];
                    break getDateFromClassName;
                }
            }
            dynamic_dates[i].firstChild.nodeValue = showDynamicDate(dateInEpochFormat);
        }
    }
}

function showDynamicDate(epochDate) {
    var friendlyDate = 'Written ';
    postedTime = new Date(parseInt(epochDate));
    currentTime = new Date();
    currentYear = currentTime.getFullYear();
    currentMonth = currentTime.getMonth();
    currentDate = currentTime.getDate();
    currentHour = currentTime.getHours();
    currentMinute = currentTime.getMinutes();
    currentSecond = currentTime.getSeconds();
    postedYear = postedTime.getFullYear();
    postedMonth = postedTime.getMonth();
    postedDate = postedTime.getDate();
    postedHour = postedTime.getHours();
    postedMinute = postedTime.getMinutes();
    postedSecond = postedTime.getSeconds();
    if ((currentYear / 4) == (Math.round(currentYear / 4))) { countLeap = 29; } else { countLeap = 28; }
    if (currentMonth == 2) { countMonth = countLeap; } else { if (currentMonth == 4) { countMonth = 30; } else { if (currentMonth == 6) { countMonth = 30; } else { if (currentMonth == 9) { countMonth = 30; } else { if (currentMonth == 11) { countMonth = 30; } else { countMonth = 31; } } } } }
    if (currentMinute > postedMinute) { diffMinute = currentMinute - postedMinute; calcHour = 0; } else { diffMinute = currentMinute + 60 - postedMinute; calcHour = -1; }
    if (currentHour > postedHour) { diffHour = currentHour - postedHour + calcHour; calcDate = 0; } else { diffHour = currentHour + 24 - postedHour  + calcHour; calcDate = -1; }
    if (currentDate > postedDate) { diffDate = currentDate - postedDate + calcDate; calcMonth = 0; } else { diffDate = currentDate + countMonth - postedDate  + calcDate; calcMonth = -1; }
    if (currentMonth > postedMonth) { diffMonth = currentMonth - postedMonth + calcMonth; calcYear = 0; } else { diffMonth = currentMonth + 12 - postedMonth + calcMonth; calcYear = -1; }
    diffYear = currentYear - postedYear + calcYear;
    if (diffMinute == 60) { diffMinute = 0; diffHour = diffHour + 1; }
    if (diffHour == 24) { diffHour = 0; diffDate = diffDate + 1; }
    if (diffDate == countMonth) { diffDate = 0; diffMonth = diffMonth + 1; }
    if (diffMonth == 12) { diffMonth = 0; diffYear = diffYear + 1; }
    if (diffYear == 0 && diffMonth == 0 && diffHour == 0 && diffMinute < 30) { friendlyDate += ' just '; }
    if (diffYear > 0) { friendlyDate += diffYear + (diffYear < 2 ? ' year, ' : ' years, '); }
    if (diffMonth > 0) { friendlyDate += diffMonth + (diffMonth < 2 ? ' month, ' : ' months, '); }
    if (diffDate > 0) { friendlyDate += diffDate + (diffDate < 2 ? ' day, ' : ' days, '); }
    if (diffHour > 0) { friendlyDate += diffHour + (diffHour < 2 ? ' hour ' : '  hours '); }
    if (diffMinute > 0) { friendlyDate += (diffHour > 0 ? 'and ' : '') + diffMinute + (diffMinute < 2 ? ' minute ' : ' minutes '); }
    if (diffYear == 0 && diffMonth == 0 && diffHour == 0 && diffMinute < 1) { friendlyDate += 'a few seconds '; }
    return friendlyDate + 'ago';
}
window.onload = showDynamicDates()

Alle suggesties / verbeteringen welkom!

[ Voor 25% gewijzigd door Verwijderd op 21-06-2005 15:33 ]

maandag 20 juni 2005 17:33

Acties:

Verwijderd

Topicstarter

Bedankt voor je feedback.

Bedankt voor de tip over de scope van een variabele. Dat wist ik dus niet, en de globale scope schoonhouden is van groot belang, zowel omdat het gewoon 'hoort' (mijn mening) als omdat ik meer dan 500 regels JS van plan ben te gaan gebruiken.

Het misbruiken van het klasse attribuut vind ook ik verdedigbaar, zeker als je ziet wat voor inline JavaScripts ik eerder gebruikte

.

MSIE5 ondersteuning moet dus idd nog komen. Op het moment is mijn site ook nog nauwelijks live te noemen, dus gelukkig heb ik alle tijd.

Van het tijdzone probleem ben ik me bewust. Voor nu even de vingers gekruist houden dat mensen mijn site toch pas over een paar weken ontdekken

. Ik kan een check inbouwen voor een negatieve uitkomst, wat iig niet klopt dus. Nog zien wat ik daar dan mee doe... Volgens mij is er in het algemeen geen goede oplossing voor de combinatie server datum/client datum/JavaScript tijd berekeningen. Ik kan er iig voor zorgen dat de server op een standaard staat (of dat mijn script dit regelt, aangezien ik de server niet beheer), en eventueel kan ik zelfs aan bezoekers vragen wat ze er van denken (met een dialog), ook al vind ik dit een nogal vies idee.

Enneh, ja, goed idee, wel zo slim van je om het verschil via de epoch waarde te berekenen. De code die de datum genereert was niet gemaakt met het "een epoch waarde bevat geen spaties en kan dus als klasse worden gebruikt" concept in het achterhoofd.

Edit: Eén van de belangrijke voordelen die deze code heeft over de online JavaScripts is dat ik kan kiezen om de functie nooit uit te voeren, en dan blijft de gewone datum staan. Als ik met die inline scripts gebruikers een cookie/optie wilde geven om normale data weer te geven dan moest ik daar een extra blok code voor schrijven terwijl de normale data gewoon in de <noscript> stonden! Nu wordt de code simpelweg niet uitgevoerd. En het scheelt nog bestandsgrootte ook!

[ Voor 16% gewijzigd door Verwijderd op 20-06-2005 17:47 ]

maandag 20 juni 2005 17:48

Acties:

crisp

Devver

Pixelated

het enige nadeel met het verschil tussen 2 epoch timestamps is dat je wat lastiger een verschil in 'maanden' of 'jaren' kan aangeven.

Verder ga ik er van uit dat je de 'postedTime' ook wel ergens voorhanden hebt, dus zou je die ook ergens alvast in een JS-variabele kunnen opnemen.

Intentionally left blank

maandag 20 juni 2005 19:18

Acties:

Verwijderd

Topicstarter

crisp schreef op maandag 20 juni 2005 @ 17:48:
het enige nadeel met het verschil tussen 2 epoch timestamps is dat je wat lastiger een verschil in 'maanden' of 'jaren' kan aangeven.

Of ik de code ga herschrijven weet ik nog niet. Eerst maar eens een goed 'algoritme' vinden om alle tijden correct weer te geven

.

Verder ga ik er van uit dat je de 'postedTime' ook wel ergens voorhanden hebt, dus zou je die ook ergens alvast in een JS-variabele kunnen opnemen.

Uhm, hoe bedoel je? Voorhanden waar? Zodra ik hem uit className heb verkregen dus wel. Maar wat bedoel je precies?

Edit:

Hier is een nieuwe versie van createDynamicDate die met een simpeler 'algoritme' werkt om altijd een goede combinatie van komma's en 'and' te creëren.

Alle data die weergegeven worden voeg ik aan een array toe. Vervolgens ga ik de array of om de strings samen te voegen en tot de twee na laatste string een komma erachter te zetten, en bij de een na laatste string het woord 'and':

JavaScript:

function createDynamicDate(epochDate) {
    var postedTime = new Date(parseInt(epochDate));
    var currentTime = new Date();
    var currentYear = currentTime.getFullYear();
    var currentMonth = currentTime.getMonth();
    var currentDay = currentTime.getDate();
    var currentHour = currentTime.getHours();
    var currentMinute = currentTime.getMinutes();
    var currentSecond = currentTime.getSeconds();
    var postedYear = postedTime.getFullYear();
    var postedMonth = postedTime.getMonth();
    var postedDate = postedTime.getDate();
    var postedHour = postedTime.getHours();
    var postedMinute = postedTime.getMinutes();
    var postedSecond = postedTime.getSeconds();
    if ((currentYear / 4) == (Math.round(currentYear / 4))) { countLeap = 29; } else { countLeap = 28; }
    if (currentMonth == 2) { countMonth = countLeap; } else { if (currentMonth == 4) { countMonth = 30; } else { if (currentMonth == 6) { countMonth = 30; } else { if (currentMonth == 9) { countMonth = 30; } else { if (currentMonth == 11) { countMonth = 30; } else { countMonth = 31; } } } } }
    if (currentMinute > postedMinute) { diffMinute = currentMinute - postedMinute; calcHour = 0; } else { diffMinute = currentMinute + 60 - postedMinute; calcHour = -1; }
    if (currentHour > postedHour) { diffHour = currentHour - postedHour + calcHour; calcDate = 0; } else { diffHour = currentHour + 24 - postedHour  + calcHour; calcDate = -1; }
    if (currentDay > postedDate) { diffDay = currentDay - postedDate + calcDate; calcMonth = 0; } else { diffDay = currentDay + countMonth - postedDate  + calcDate; calcMonth = -1; }
    if (currentMonth > postedMonth) { diffMonth = currentMonth - postedMonth + calcMonth; calcYear = 0; } else { diffMonth = currentMonth + 12 - postedMonth + calcMonth; calcYear = -1; }
    diffYear = currentYear - postedYear + calcYear;
    if (diffMinute == 60) { diffMinute = 0; diffHour = diffHour + 1; }
    if (diffHour == 24) { diffHour = 0; diffDay = diffDay + 1; }
    if (diffDay == countMonth) { diffDay = 0; diffMonth = diffMonth + 1; }
    if (diffMonth == 12) { diffMonth = 0; diffYear = diffYear + 1; }
    // Create array of all text
    var combinedDates = new Array;
    if (diffYear > 0) { combinedDates[combinedDates.length] = diffYear + ' ' + (diffYear < 2 ? 'year' : 'years'); }
    if (diffMonth > 0) { combinedDates[combinedDates.length] = diffMonth + ' ' + (diffMonth < 2 ? 'month' : 'month'); }
    if (diffDay > 0) { combinedDates[combinedDates.length] = diffDay + ' ' + (diffDay < 2 ? 'day' : 'days'); }
    if (diffHour > 0) { combinedDates[combinedDates.length] = diffHour + ' ' + (diffHour < 2 ? 'hour' : 'hours'); }
    if (diffMinute > 0) { combinedDates[combinedDates.length] = diffMinute + ' ' + (diffMinute < 2 ? 'minute' : 'minutes'); }
    if (diffYear+diffMonth+diffDay+diffHour+diffMinute<1) {
        combinedDates[combinedDates.length] = 'just a few seconds';
    }
    // Prepare output string
    var friendlyDate = '';
    // Loop over all text parts and logically put them together
    for (i = 0; i < combinedDates.length; i++) {
        friendlyDate += combinedDates[i];
        if (i < (combinedDates.length-2)) {
            friendlyDate += ', ';
        } else if (i < (combinedDates.length-1)) {
            friendlyDate += ' and ';
        }
    }
    return 'Written ' + friendlyDate + ' ago';
}

[ Voor 174% gewijzigd door Verwijderd op 21-06-2005 17:37 . Reden: Nieuwe versie van createDynamicDate gepost ]