Veel Voorkomende Vragen
Maak een lokale JavaScript syntaxiscontrole
De volgende opdrachten zijn een beetje uitgebreid, maar dat is simpelweg om er zeker van te zijn om iemand die niet zo bekend is met de JS code niet te laten struikelen
Benodigde materialen
- Een kopie van JS Lint (Ik heb de toestemming van de auteur om dit te gebruiken).
- hkShowInTemplate plug-in geïnstalleerd in de HTML-Kit.
Voordat we van start gaan - wat betekent Douglas Crockford's JS Lint?
De JS Lint pagina is een gratis service vriendelijk verorgd door Douglas Crockford. De hoofdpagina van JS Lint heeft een link naar ondersteunende documentatie (Engels). JS Lint is een syntaxiscontrole - die je helpt om fouten op te sporen, zoals nietovereenkomende paren van accolades '{}', een ontbrekende puntkomma ';' aan het einde van een regel, etc. Ik adviseer ten sterkste om eerst JS Lint online te proberen voordat je een lokale kopie maakt, zodat je vetrouwd raakt met het functioneren ervan.
HTML-Kit voorbereiden
Als je dat nog niet hebt gedaan, download en installeer de hkShowInTemplate plug-in. Het wordt geïnstalleerd op de 'Gereedschapsbalk' Je ziet dan een pictogram zoals deze:
Maak een lokale kopie van JS Lint
Nu is het nodig om zowel een kopie te maken van het JS Lint bestand als het maken van twee aanpassingen. De eerste is het importeren van een externe JS library code in het bestand; als dit niet gedaan wordt dan initialiseert JS niet zorgvuldig wanneer de plugin wordt aangeroepen. De tweede aanpassing gaat om de plugin plaatsbepalingcode te zetten in de JS Lint pagina.
Kies in HTML-Kit "Bestand | Open URL" in het hoofdmenu. Geef de volgende URL in:
http://www.JSLint.html
Nadat de inhoud van de webpagina zich opent in een nieuw bestand, gebruik je "Wijzigen | Vervang". In de Find what [Vind wat] regel kopieer je & plak deze code:
src=\"jslint.js\"></script>
. . ." rechts naast de Replace with [Vervang met] regel.
type="text/javascript"> </script>
Zet de cursor in de lege regel boven het </script> label. Selecteer "Bestand | Invoegen | Invoegen vanuit URL" in het hoofdmenu. Schrijf de volgende URL:
http://www.JSLint.com
Open "Wijzigen | Vervang" opnieuw en kopieer & plak deze code in de regel Find what [Vindt wat] (zorg er voor dat de Regular expression optie niet is aangevinkt):
<textarea name=input onchange="clearoutput();"></textarea>
<textarea name=input onchange="clearoutput();">{{SOURCE_ENCODED}}</textarea>
Replace" [Vervang] knop. De tweede aanpassing is nu klaar.
Sla nu de modelcode op met de naam 'jslint.htm' in een map (misschien je HTML-Kit pluginmap) en sluit het af. In feite kan je elke naam of map gebruiken maar schrijf dan wel de lokatie op, want je hebt die nodig voor de pluginopties.
Verbindt het nieuwe JS Lint 'model' en de plugin.
Op de werkbalk klik je op het hkShowInTemplate pictogram's rolmenu en kies je 'preferences' [voorkeuren]:
In het venster dat vervolgens verschijnt plak je het pad naar je modelbestanden of je gebruikt de ". . ." knop om er naar toe te gaan. Je bent nu gereed om dit nieuwe gereedschap te gebruiken.
Test
Open een bestand met een JS code. Selecteer de JS code - zonder <script> labels, anders zal JS Lint aangeven dat het geen correcte HTML pagina is. Met de code geselecteerd klik je op het hkShowInTemplate pictogram op de werkbalk. De JS Lint pagina wordt geopend met de gekozen code erin. Klik op de "jslint" knop en je code wordt gecontroleerd. Onder het codevenster (het kan nodig zijn dat je schuifbalk moet gebruiken) wordt een OK weergegeven met een opsomming van de variabelen, functies etc. of het geeft de eerste fout weer die wordt gevonden. Als er fouten zijn wijzig dan in het JS Lint venster de code, kopieer het, en ga terug naar de normale code en plak het over de foutieve code. Heel simpel!
Een paar laatse opmerkingen
Neem de tijd om vertrouwd te raken met JS Lint. Standaard past het {} toe achter 'for', 'switch' en 'if' etc. en het houdt niet van ++ or --. Dit staat ook allemaal in de documentatie. Sommige van deze controles kunnen worden uitgeschakeld door de betreffende hokjes aan te klikken op de JS Lint pagina.
Houdt er wel rekening mee dat JS Lint niet een totale foutenvinder is. Het kijkt naar de syntax, en het maakt niet uit wat voor variabele waarden of welke objecten er zijn bedoeld. Echter, de meeste JS fouten komen door over het hoofd zien van kleine tekstfouten.
De verbinding naar de documentatie wijst steeds naar de online-pagina. Dus zolang je verbinding hebt kan je altijd de documentatie raadplegen (of je kan de code naar een lokale kopie kopiëren).
Respecteer Douglas Crockford's copyright en zijn welwillendheid om HTML-Kit gebruikers toe te staan een lokale kopie van zijn programma te gebruiken en doe niet net alsof het jouw code is door zijn naam van de pagina te verwijderen.
Het is te hopen dat er nu minder verborgen JavaScript fouten in de broncode zullen zijn!
