Środowisko jsbin.com

Z Zasoby CoderDojo
Skocz do: nawigacji, wyszukiwania

Po wejściu na stronę jsbin.com oczom naszym ukazuje się środowisko programistyczne - ekran podzielony na około 3 części (ogólnie od 0 do 5).

Typowo po lewej mamy szczątkowy kod strony WWW, w której będziemy uruchamiali nasz kod. W tej części podłączamy bibliotekę p5 (patrz niżej) oraz inne, potrzebne nam do pracy. Kolejne elementy edytora to CSS, JavaScript, Console i Output. Do pracy będziemy potrzebowali sekcji JavaScript i Output. Sekcja Console przydaje się do debuggowania i wypisywania testowych komunikatów podczas uruchamiania programu. Niestety konsola nie jest zrobiona najlepiej i nie pokazuje automatycznie palcem gdzie jest błąd, ale przydaje się mimo wszystko.

Odkrywanie/zakrywanie sekcji – klikamy w nazwę w „pasku poleceń” na środku ekranu. Po prawej na górze mamy guzik „Run with JS” i checkbox „Auto-run JS”. Kiedy włączona jest opcja auto-run środowisko jsbin będzie starało się wykonać nasz kod jak tylko będzie on miał sens.

Dwukrotne kliknięcie w niebieski napis Javascript na górze sekcji edytora włącza numerowanie linii.

Po założeniu konta na githubie (github.com) można zalogować się do jsbina na konto z githuba. Dzięki temu jsbin będzie przechowywał wszystkie nasze programy i pozwoli na większą customizację środowiska (kolory, podświetlanie błędów itd.). Zachęcam.

Aby móc pisać w p5 musimy podpiąć odpowiednie biblioteki w sekcji HTML pomiędzy np. tagami "body"

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/wersja/p5.min.js"> </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/wersja/addons/p5.dom.min.js"> </script>

W miejsce słowa <wersja> podajemy numer aktualnej wersji, który podglądamy na stronie cdnjs.cloudflare.com po odszukaniu biblioteki p5. Najprościej w wyszukiwarce wpisać "p5 js cdns" - zazwyczaj pierwszy link prowadzi do najnowszej wersji p5.