Witam,
uczęszczam na pewne szkolenie z Javy Script (poziom podstawowy, dotyczącej strony wizualnej w Java Script). Na tym szkoleniu prowadząca używa edytora kodu z biblioteki P5 oraz posiłkuje się biblioteką p5.js.
**Link do edytora z P5: **
[(https://editor.p5js.org/)]
P5 to jakaś biblioteka Javy Script. Na zajęciach klepiemy sobie kod w tym edytorze i wszystko niby działa. Ja w przeszłości "liznąłem" trochę frontend i chciałbym się tym zajmować profesjonalnie (jak się tego wszystkiego nauczę). Dlatego po zajęciach używam sobie programu Brackets i lokalnie na dysku komputera sobie działam.
Powtarzam sobie wykonywane ćwiczenia na moim komputerze i klepie kod w Bracketsie. Problem polega na tym, że już dwie rzeczy z tego kursu nie działają. Jak robię to lokalnie na dysku komputera, klepie kod w Bracketsie i włączam kod w przeglądarkach (Chrome, Mozzila, Edge, IE), to nic się nie wyświetla. Natomiast w edytorze P5 i w okienku previev tego edytora wszystko działa poprawnie. Prowadząca zajęcia uważa, że to wina przeglądarek, ich aktualizacji, braku jeszcze jakiś załatanych "dziur". Sugeruje, że należy poczekać aż wyjdą kolejne updaty. Ja niekoniecznie z tym się zgadzam, bo wg mnie nie jest to do końca logiczne. Bo co, bo bez update programista nie może sobie teraz wyświetlić tekstu czy obrazka..? Dlatego pytam na forum. Jak ktoś z Was zna odpowiedź na poniższy problem, to z góry serdecznie dziękuję. Jeżeli faktycznie jest to wina aktualizacji przeglądarek, to jak wyświetlić tekst (problem nr 1) i jak wyświetlić obrazek (problem nr 2)?
1) Tekst nie wyświetla się w żadnej przeglądarce (jedynie pojawia się napis: Loading...), chociaż wyświetlał się jeszcze przed update w przeglądarce EDGE. Po zrobieniu update przestał się wyświetlać. Natomiast w edytorze P5 w okienku previev wyświetla się.
W jednym folderze mam następujące pliki:
index.html
p5.js
robotocondensed-regular.ttf
script.js
KOD PLIKU index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kurs JS WSKSIM</title>
<script src="p5.js"></script>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
KOD PLIKU script.js
var font, fontsize = 32;
function preload()
{
font = loadFont('robotocondensed-regular.ttf');
}
function setup()
{
createCanvas(720, 360);
textFont(font);
textSize(fontsize);
textAlign(CENTER, CENTER);
}
function draw()
{
background(160);
var margin = 10;
var x = 30;
translate(margin * 6, margin * 3);
var y = 10;
var tekst = char(35)+"zajecia";
text(tekst, x,y);
}
2) Załączony obrazek nie wyświetla się w żadnej przeglądarce. Natomiast w edytorze P5 w okienku previev wyświetla się.
W jednym folderze mam następujące pliki:
1.png
index.html
p5.js
script.js
KOD PLIKU index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kurs JS WSKSIM</title>
<script src="p5.js"></script>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
KOD PLIKU script.js
var img = new Image();
function setup()
{
createCanvas(480, 120);
img = loadImage("1.png");
}
function draw()
{
background(255);
image(img, 0, 0);
}