Javascriptová zkoušečka

Úvod

JS Zkoušečka (dále jen zkoušečka) je internetová aplikace, která umožňuje za běhu vyzkoušet javascriptový kód. Zkoušečka vznikla jako pomůcka k výuce JavaScriptu.

Okno zkoušečky

Použití

Okno zkoušečky obsahuje 3 záložky. První Kód slouží k zadání skriptu, který chceme vyzkoušet. Na této záložce se také nachází 2 volby pro zpracování chyb scriptu. První je Kontrola syntaxe, při této volbě dojde před spuštěním kódu k jeho kontrole nástrojem JSLint. Pokud je aktivní druhá volba, Zachytávat výjimky, je testovaný kód spouštěn v bloku try – catch a případné chyby jsou vypisovány do Výstupu

Po spuštění skriptu dojde k přepnutí do záložky Výstup. Zde se nachází případné hlášení chyb, varování a výstup scriptu (pomocí globálního objektu out, viz dále).

V třetí záložce se nachází iframe se stránkou, v rámci které se spouští testovaný skript.

Skript

V testovaném skriptu lze přistupovat k Výstupu pomocí globálního objektu out. Můžete použít následující metody:

out.cls()

Smaže obsah výstupu

out.p( text )

Vypíše na výstup text

out.pln( text )

Vypíše na výstup text a odřádkuje. Odpovídá out.p(text + "\n");

out.info( text )

Vypíše na výstup informační text

Ukázky použití

Prázdná zkoušečka

Spustit zkoušečku

Test výstupu

Následující skript vypíše na výstup 9 náhodných čísel.

1: // Ukázka použití „out“
2: 
3: out.info("9 náhodných čísel");
4: 
5: for(var i = 1; i < 10; i++){
6:    out.pln( i + ". náhodné číslo je " + (Math.floor(Math.random() * 5) + 1) );
7: }

Tento script si můžete otevřít ve zkoušečce kliknutím na „Vyzkoušet“.

Výpočet výrazu

Následující skript ukazuje použití metody toString() objektu Number pro převod čísla do jiné číselné soustavy, konkrétně do 16–kové.

1: // Převod čísla 123 (10–ková soustava) do 16–kové soustavy
2: 
3: (123).toString(16);

Trochu složitější ukázka

Následující skript je praktická ukázka objektového přístupu. Jedná se o vytvoření objektu StringBuffer, který slouží k práci s dlouhými textovými řetězci. Interne je StringBuffer založen na přidávání dílčích řetězců do pole. Pokud je potřeba celý řetězec, je volána metoda Array.join.

 1: // Objekt StringBuffer
 2: 
 3: function StringBuffer(){
 4:   this._strings = []; //new Array();
 5: }
 6: 
 7: StringBuffer.prototype.append = function(str){
 8:   this._strings.push(str);
 9: };
10: 
11: StringBuffer.prototype.toString = function(){
12:   return this._strings.join("");
13: };

Použití StringBuffer v praxi. Je vytvořena instance StringBuffer sp a následně je do ní 10 000× přidán řetězec „Lorem Ipsum “. Výsledek je pak zobrazen na výstupu.

 1: // Ukázka použití
 2: 
 3: var sb = new StringBuffer();
 4: 
 5: for(var i = 0; i<10000; i++){
 6:   sb.append("Lorem Ipsum ");
 7: }
 8: 
 9: out.pln( sb );

Závěr

Uvítám jakékoliv návrhy a postřehy ke zkoušečce.

Své názory můžete také psát na diskusi.