Środowisko jsbin.com: Różnice pomiędzy wersjami

Z Zasoby CoderDojo
Skocz do: nawigacji, wyszukiwania
(Utworzono nową stronę "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 ma...")
 
Linia 11: Linia 11:
 
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.
 
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
+
Aby móc pisać w p5 musimy podpiąć odpowiednie biblioteki w sekcji HTML pomiędzy np. tagami "body"
<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/p5.min.js"> </script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/<wersja>/addons/p5.dom.min.js"> </script>
+
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/wersja/addons/p5.dom.min.js"> </script>
</body>
+
  
 
W miejsce słowa <wersja> podajemy numer aktualnej wersji, który podglądamy na stronie https://cdnjs.cloudflare.com [[https://cdnjs.cloudflare.com]] po odszukaniu biblioteki p5. Najprościej w wyszukiwarce wpisać "p5 js cdns" - zazwyczaj pierwszy link prowadzi do najnowszej wersji p5.
 
W miejsce słowa <wersja> podajemy numer aktualnej wersji, który podglądamy na stronie https://cdnjs.cloudflare.com [[https://cdnjs.cloudflare.com]] po odszukaniu biblioteki p5. Najprościej w wyszukiwarce wpisać "p5 js cdns" - zazwyczaj pierwszy link prowadzi do najnowszej wersji p5.

Wersja z 11:59, 3 sty 2019

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 https://cdnjs.cloudflare.com [[1]] po odszukaniu biblioteki p5. Najprościej w wyszukiwarce wpisać "p5 js cdns" - zazwyczaj pierwszy link prowadzi do najnowszej wersji p5.