Hoe ontwikkel je een TW script?

Discussie in 'Tutorials' gestart door De Goede Fee, 8. jul 2011.

Deel Deze Pagina

  1. De Goede Fee

    De Goede Fee

    Lid geworden:
    8. dec 2008
    Berichten:
    1.411
    Leuk Bevonden:
    3
    (Tooling update: 03/2015)

    Omdat ik af en toe de vraag krijg van een aspirant scripter hoe je aan zo'n script begint zet ik het hier even bijeen zodat ik er daarna gewoon naar kan verwijzen:D

    Hoe begin je aan een TW script als je enige programmeer-ervaring met je DVD recorder is?
    Ongetwijfeld de meest gestelde vraag...

    Alle scripts die geïntegreerd worden in de browser, zowel snellijst scripts als UserScripts/Greasemonkey, worden geschreven in JavaScript.
    Als we die omschrijving ontleden:
    Scripttaal: Je kan JavaScript schrijven in een editor zoals Kladblok en je hebt daarna niets meer nodig om het werkend te krijgen. Je plakt je script in je snellijst en je kan het direct uittesten!
    Webpagina's interactief: De pagina's van een website zijn allemaal "statisch", er beweegt niets, er is geen enkele interactie met de surfer. JavaScript is dé taal die gebruikt wordt om het web interactiever te maken.

    Met tutorials kan je jezelf de basis syntax aanleren. De syntax vertoont veel gelijkenissen met talen zoals Java of C#. Als je een van die talen een beetje kent, dan zal je ook snel weg zijn met JavaScript. Via tutorials zal je al snel in staat zijn om bestaande scripts naar je hand te zetten. Bijvoorbeeld als je niet wil dat de mass recruter automatisch op de "Rekruteren" knop klikt dan zal je dit met een basis JS kennis kunnen vinden en aanpassen. De meeste JS talenten zijn hiermee begonnen: Een aantal tutorials en dan hier en daar een kleine aanpassing aan hun snellijst scripts... Om van daaruit verder te werken naar meer geavanceerde scripts.

    Begin met iets kleins te maken dat werkt.
    Begin niet met een script zoals TBR Map, er zijn een heel resem skills nodig om zoiets ineen te steken, skills die je nu nog niet hebt. Je zal gefrustreerd afhaken en gedegouteerd raken van JavaScript en programmeren in het algemeen :D Begin met iets kleins, zoals vb het invullen van troepen in de verzamelplaats, maar maak zeker iets dat je zelf zal gebruiken. Bij elk nieuw script(je) leer je wat bij.. Tot je een idee hebt voor een groter script, dan kan je al de opgedane kennis opnieuw gebruiken: Als je troepen kan invullen in de verzamelplaats, dan kan je ook grondstoffen invullen in de markt etc.

    JavaScript Beginner Tutorials:
    CodeAcademy
    Heel leuk opgebouwde tutorial waarbij je interactief de taal aanleert. Als je geen enkel idee hebt wat een script of programmeren precies is, start dan met deze tutorial.

    Voor specifieke vragen kan je in je Google search direct StackOverflow.com vermelden, op die Q&A site staat waarschijnlijk ongeveer elke JavaScript/jQuery vraag beantwoord. (Of je kan zelf je vraag posten...)

    Oei, allemaal in het Engels?
    Er zijn ongetwijfeld ook Nederlandstalige tutorials. Hou er gewoon rekening mee dat 99% van alle 'resources' over JavaScript op het web engelstalig zullen zijn. Uiteindelijk is de JS syntax zelf (en de foutmeldingen) ook in het Engels.

    Mja, ik wil net mijn eigen script(s) schrijven!?
    Ik heb vrees ik slecht nieuws. Door een aantal tutorials te lezen ben je mogelijk nog niet in staat om zelf een uitgebreidt script van 0 te schrijven. Eenmaal je de basics onder de knie hebt kun je je verder verdiepen in JavaScript met meer geavanceerde informatie: stackoverflow.com
    Op die link op StackOverflow worden 'de beste' tutorials gelinkt (tekst, videos en boeken).

    Die links, en zeker een boek als "JavaScript: The Definitive Guide", zijn dan mogelijk weeral overkill (dat boek is zo'n 750 pagina's extreem droge lectuur). Er staat daar veel meer in dan je ooit zal nodig hebben voor eender welk TW script. Natuurlijk als je dat boek gelezen hebt, dan weet je perfect wat er beschikbaar is en ga je het wiel niet opnieuw uitvinden.

    Blijkbaar enorm veel te leren, maar de geavanceerde tutorials zijn misschien niet eens nodig, wat is dan het slechte nieuws?

    Andere Technologieën
    Het probleem is dat je er met JavaScript alleen niet komt. JavaScript wordt pas interessant als je de webpagina zelf begint aan te passen (tabellen sorteren, formulieren invullen, zelf inputvelden, knoppen, cellen, ... toevoegen, wijzigen of verwijderen). JavaScript is de programmeertaal, de browser en de webpagina's zijn de omgeving waarin JS opereert. Alle webpagina's in TW zijn opgebouwd met HTML. HTML is een relatief simpele statische taal, te vergelijken met de BB codes hier op het forum. De opmaak van de pagina's (kleuren, positionering, ...) gebeurt door CSS. Het is dus vooral nodig voor de afwerking, de naadloze integratie van je script in de TW pagina.

    Als je een tabel wil vergroten (vb een extra rij of kolom toevoegen) dan moet je JavaScript code schrijven die op de juiste plaats wat extra HTML toevoegt aan de pagina. De achtergrondkleur, grootte, ... van de nieuwe kolom/rij wordt bepaald met CSS.

    Het volgende probleem is dat dit in JavaScript enorm enerverend is. Introduceer:

    Het Document Object Model:
    JavaScript wijzigt een HTML pagina via de DOM. De DOM stelt de hele HTML pagina voor in een boomstructuur en er zijn in JavaScript methoden beschikbaar om van de takken (Parents/Branches) naar de bladeren (Children/Leafs) te "lopen" en om elementen te verwijderen, toe te voegen etc.

    Voorbeeld van Wikipedia:
    [​IMG]
    Je kan de DOM van eender welke pagina bekijken in Chrome, Opera of FireFox (rechter klik op de achtergrond en dan staat het normaal onderaan in het menu).

    De DOM aanpassen is natuurlijk exact wat je wil doen, nieuwe mogelijkheden toevoegen aan de pagina. En het probleem is dat die DOM doorgronden, de kennis om je nieuw inputveld op de exact juiste plaats te krijgen, totaal niet evident is... :D

    Een geluk is dat er heel deftige JavaScript libraries beschibaar zijn die een intieme kennis van de DOM min of meer overbodig maakt. Introduceer:

    jQuery
    jQuery is zelf geschreven in JavaScript. Het biedt features aan die ondermeer het selecteren van elementen/tekst op een pagina (vb het aantal grondstoffen) heel makkelijk maakt. Alsook het aanpassen van de DOM zonder dat je echt beseft dat je die aan het wijzigen bent...
    TW zelf maakt sinds versie 6 (dacht ik) gebruik van jQuery. Alsook het Sangu Package en de berichtenhernoemer.

    Ik heb jQuery geleerd via volgende boek: jQuery In Action (veel leesbaarder dan "JavaScript: The Definitive Guide")
    De interactieve tutorial: CodeAcademy
    Officieel: jQuery.com Tutorials



    Welke tools heb ik nodig om een TW script te schrijven?
    Ik gebruik momenteel uitsluitend Chrome als browser. Deze heeft in mijn opinie de beste tools om je te helpen debuggen etc (F12 om de dev tools te openen). Maar velen zweren bij de FireBug van Firefox. (Ook Opera is een optie)

    De code zelf kan je schrijven in het al op Windoze beschikbare Kladblok maar dat is absoluut niet aan te raden... Een editor met lijn nummers, keyword highlighting, oneindige undo etc is zeer sterk aan te raden. Notepad++ is een klassieke vervanger van Kladblok. SublimeText3 is momenteel de editor van mijn keuze en raad ik zeker aan om eens te proberen! WebStorm gebruik ik voor ontwikkeling aan het Sangu Package maar dat is betalende software.

    Wat ook een grote aanrader is: Gebruik Source-Control. Als je ooit de neiging hebt om een kopie te nemen van je script omdat je dan naar die (gedeeltelijk werkende) versie kan terugkeren mocht er iets mislopen, dan ben je iets aan het doen waarvoor source control uitgevonden is. Git is gratis en je kan relatief snel van start via een UI zoals vb SourceTree.

    Als je toch verschillende versies van je script wil/moet gaan vergelijken, gebruik dan compare software: kdiff, windiff, diffmerge, etc etc. Dat zal de taak al een stuk minder pijnlijk maken :)

    Nog een aantal praktische links:

    jsbeautifier.org - Als je een script vanop je snellijst wil aanpassen kun je best de jsbeautifier gebruiken: De website zet je code van 1 lijn naar een overzichtelijk geheel.

    javascriptcompressor.com of Closure Compiler - Om je script weer op 1 lijn zetten zodat je het in de snellijst kan plakken.

    javascriptlint.com - Hiermee kan je je JavaScript laten valideren op syntax fouten. (kan dus geen logische fouten vinden:D)
     
    Laatst bewerkt: 27. mrt 2015
    finalzero vindt dit leuk.
  2. lordexa

    lordexa

    Lid geworden:
    1. feb 2009
    Berichten:
    2.456
    Leuk Bevonden:
    0
    Mooi gemaakt! Deze is zeker een sticky waard. ;)
     
  3. Gene E. Yuss

    Gene E. Yuss

    Lid geworden:
    3. jul 2011
    Berichten:
    65
    Leuk Bevonden:
    0
    Inderdaad, mooi gedaan! ;)
     
  4. De Goede Fee

    De Goede Fee

    Lid geworden:
    8. dec 2008
    Berichten:
    1.411
    Leuk Bevonden:
    3
    Merci :D

    Dit is min of meer een reservatie; zat namelijk aan de karakter limiet in de beginpost.
     
  5. KPHS

    KPHS

    Lid geworden:
    15. feb 2008
    Berichten:
    3.693
    Leuk Bevonden:
    17
    Had dan wat extra reserves posts gemaakt:p

    Ziet er goed uit GS! Denk dat ik er ook is aan ga beginnen.
     
  6. Mr. Javier

    Mr. Javier

    Lid geworden:
    20. mrt 2010
    Berichten:
    1.499
    Leuk Bevonden:
    0
    Heel erg bedankt :)
     
  7. wolfy

    wolfy

    Lid geworden:
    16. feb 2008
    Berichten:
    761
    Leuk Bevonden:
    0
    Heel erg bedankt Goede fee!
    Ik was een van die personen die je daar naar vroeg!

    Top!

    Mvg,
    mark
     
  8. Videre Videnda

    Videre Videnda

    Lid geworden:
    10. jul 2011
    Berichten:
    41
    Leuk Bevonden:
    0
    Ik zat te denken om me deze zomervakantie wat te gaan verdiepen in de php en dergelijke scripting die nodig zijn voor een goede website.

    Ik vind dit ook wel interessant dus ik ga dit zeker een keertje doorlezen en misschien wel beoefenen. :D

    Dankjewel! :)

    Richard // Videre Videnda
     
  9. De Goede Fee

    De Goede Fee

    Lid geworden:
    8. dec 2008
    Berichten:
    1.411
    Leuk Bevonden:
    3
    @Videre Videnda
    Ook als je PHP gaat doen heb je kennis nodig van HTML en CSS.
    De basis syntax van JavaScript en PHP is ook hetzelfde. (Net als die van C#, C++, Java, ...)

    Geen scripting:
    De HTML pagina staat op de server, de gebruiker gaat naar de URL van de pagina en de pagina wordt doorgestuurd.

    PHP of server-side scripting:
    De PHP pagina staat op de server, dit is een normale HTML pagina maar met extra PHP code. De PHP code wordt op de server uitgevoerd en een standaard HTML pagina wordt naar de gebruiker terug gestuurd. De PHP code verlaat nooit de server en de code kan dus ook nooit achterhaald worden door een gebruiker. Eenmaal de pagina doorgestuurd is, is de PHP code dus niet meer actief.

    JavaScript of client-side scripting:
    Een HTML pagina wordt naar de gebruiker gestuurd MET de JavaScript code. Het is mogelijk dat de HTML pagina die doorgestuurd werd al server-side scripting (PHP, ASP, ...) heeft ondergaan. Server-side en client-side scripting worden dikwijls gecombineerd. Eenmaal de pagina naar de gebruiker is doorgestuurd wordt de JavaScript code geïnterpreteerd en uitgevoerd door de browser. Dit houdt in dat: 1) Je JavaScript is, in tegenstelling tot PHP, zichtbaar/downloadbaar/wijzigbaar voor/door elke gebruiker. 2) Je JavaScript wordt niet noodzakelijk uitgevoerd, de gebruiker kan JS uitschakelen.


    TW zelf maakt gebruik van PHP: bijvoorbeeld een overzichtscherm is het ophalen van alle grondstoffen, troepen, groepen, ... van alle dorpen binnen een bepaalde groep en de HTML op basis daarvan opstellen. Daarnaast maken ze ook gebruik van JavaScript: bijvoorbeeld bij bouwen kan de gebruiker een bepaald hoger/lager in de lijst zetten.
     
  10. Lekensteyn

    Lekensteyn

    Lid geworden:
    29. jan 2008
    Berichten:
    3.106
    Leuk Bevonden:
    0
    Goed werk! Een geavanceerdere tool voor het comprimeren van code is Closure Compiler. Om de code zo te comprimeren dat er gegarandeerd geen functionaliteit verloren gaat kies je voor "Whitespace only". Kies alleen voor "Advanced" als je weet wat je doet.

    Een andere iets om rekening mee te houden is dat de modulo operator (%) een speciale betekenis heeft in URLs. Om het zowel als javascript code als javascript-URL te kunnen gebruiken, plaats er een spatie achter. Zo zal de browser geen rare fratsen uithalen als je een procent-teken in de URL hebt.
     
  11. Godness of Insomnia.

    Godness of Insomnia.

    Lid geworden:
    12. sep 2011
    Berichten:
    1.814
    Leuk Bevonden:
    0
    Erg bedankt voor je guide, Ik heb er veel aan gehad!
    Ik heb wel een download link voor Code-Genie kunnen vinden.
     
  12. YourNightmar3

    YourNightmar3

    Lid geworden:
    9. nov 2009
    Berichten:
    904
    Leuk Bevonden:
    0
    mooi gedaan

    alleen ik kan al 3 andere programmeer talen

    ik kan batch, vbs en visual basic 2010

    een 4de lukt me (nog) niet heb ik al gemerkt:(
     
  13. lordexa

    lordexa

    Lid geworden:
    1. feb 2009
    Berichten:
    2.456
    Leuk Bevonden:
    0
    batch en vbs zijn scripttalen.
    Met vb 2010 zul je wel vb.net bedoelen, dat is wel een programmeertaal.
    Javascript is ook geen programmeer- maar een scripttaal.
     
  14. YourNightmar3

    YourNightmar3

    Lid geworden:
    9. nov 2009
    Berichten:
    904
    Leuk Bevonden:
    0
    jah weet ik veel
    ik weet alleen hoe ze werken, niet precies hoe ze heten

    .vbs:

    Code:
    msgBox("Hallo, dit is een vbs script", 12, "vbs script")
    kopieer dat in kladblok en save het als iets.vbs


    en open het dan ;)

    .bat:

    Code:
    @echo off
    echo lol
    echo dit is een .bat script
    echo druk op een toets om verder te gaan
    pause >null
    echo.
    echo.
    echo.
    echo.
    echo lol
    pause
    exit
    kopieer dit in kladblok en save het als iets.bat


    vb.net

    Code:
    Public Class Form1
    
        Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
            Button1.Enabled = False
            MsgBox("lol", MsgBoxStyle.Critical, "lol")
    
        End Sub
    
        Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Button1.Enabled = True
        End Sub
    End Class
     
  15. Auseinandersetzung

    Auseinandersetzung

    Lid geworden:
    19. apr 2011
    Berichten:
    10.708
    Leuk Bevonden:
    26
    Had dit serieus nog nooit zien staan terwijl ik hier toch wel vaak kom =/ Echt helmaal geweldig, had gisteren een boek van 650 + bladzijden gedownload om java te leren maar dit lijkt me toch wat leuker :D

    Hartelijk bedankt voor de guide ;)
     
  16. De Goede Fee

    De Goede Fee

    Lid geworden:
    8. dec 2008
    Berichten:
    1.411
    Leuk Bevonden:
    3
    Ik weet niet of ik het in de beginpost expliciet gezegd heb maar er is, ondanks de naam, een enorm verschil tussen Java en JavaScript.

    Het idee om een followup post te schrijven die meer praktisch ingesteld is speelt al even door m'n hoofd.
    - Hoe aan een nieuw greasemonkey en/of snellijst script te beginnen.
    - Een paar code voorbeelden van dingen die oa in het package frequent gebruikt worden. (vb: een knop toevoegen aan een pagina, een bepaald veld of een volledige tabel uitlezen en daar een berekening met doen etc)
     
  17. Auseinandersetzung

    Auseinandersetzung

    Lid geworden:
    19. apr 2011
    Berichten:
    10.708
    Leuk Bevonden:
    26
    Bedoelde javascript sorry :)o) Head-first javascript heet het, is wel met veel prentjes etc maar vind deze manier toch nog wat beter :)

    En zeker doen, dit is echt een geweldig initiatief!
     
  18. Godness of Insomnia.

    Godness of Insomnia.

    Lid geworden:
    12. sep 2011
    Berichten:
    1.814
    Leuk Bevonden:
    0
    100% mee eens!
     
  19. nightmares..

    nightmares..

    Lid geworden:
    10. jan 2012
    Berichten:
    18
    Leuk Bevonden:
    0
    even een gigantisch domme vraag (heb er dan ook totaal geen verstand van..)
    wat doe je met die scripts? wat leveren ze je op? wat heb je er aan?:O
     
  20. Auseinandersetzung

    Auseinandersetzung

    Lid geworden:
    19. apr 2011
    Berichten:
    10.708
    Leuk Bevonden:
    26
    Scripts zorgen ervoor dat je bepaalde spelhandelingen sneller uit kunt voeren. Tevens brengen ze verbeteringen aan aan de bestaande opties in het spel. Onder andere