{"id":1010,"date":"2022-02-22T18:37:33","date_gmt":"2022-02-22T17:37:33","guid":{"rendered":"https:\/\/piotrgabriel.pl\/wiki\/?p=1010"},"modified":"2024-09-22T18:38:02","modified_gmt":"2024-09-22T16:38:02","slug":"javascript-podstawy-cz-3-prompt-queryselector-if-else-settimeout-transition-isnan-addeventlistener-switch","status":"publish","type":"post","link":"https:\/\/piotrgabriel.pl\/wiki\/javascript-podstawy-cz-3-prompt-queryselector-if-else-settimeout-transition-isnan-addeventlistener-switch\/","title":{"rendered":"JavaScript podstawy cz.3 \u2013 prompt(), querySelector(), if…else, setTimeout(), transition, isNaN(), addEventListener(), switch"},"content":{"rendered":"

W tym artykule zajmiemy si\u0119 takimi zagadnieniami jak podstawowe funkcje, instrukcje warunkowe i prze\u0142\u0105czniki, jakie stosujemy w j\u0119zyku JavaScript. Om\u00f3wimy wi\u0119c z przyk\u0142adami zastosowa\u0144, czym s\u0105 prompt()<\/em>, querySelector()<\/em>, if…else<\/em>, setTimeout()<\/em>, transition<\/em>, isNaN()<\/em>, addEventListener()<\/em> oraz switch.<\/em><\/p>\n

<\/p>\n

Wy\u015bwietlanie tekstu na stronie: innerHTML<\/code><\/h2>\n

Kiedy chcemy wy\u015bwietli\u0107 co\u015b na stronie, u\u017cywamy metody innerHTML<\/code>. Pozwala ona wstawi\u0107 tekst lub kod HTML do elementu. Przyk\u0142ad:<\/p>\n

const element = document.querySelector(\"#suma\");<\/code>
\nelement.innerHTML = 'Wynik: ' + (a + b);<\/code><\/p>\n

Ten kod znajduje element z id \u201esuma\u201d i wstawia do niego wynik dzia\u0142ania.<\/p>\n

Pobieranie danych od u\u017cytkownika: prompt()<\/code><\/h2>\n

Zajmiemy si\u0119 teraz funkcj\u0105 prompt()<\/code>, kt\u00f3ra pozwala na wy\u015bwietlenie okna dialogowego, kt\u00f3re prosi u\u017cytkownika o wpisanie danych. Zwraca tekst, wi\u0119c cz\u0119sto u\u017cywamy parseInt()<\/code>, aby zamieni\u0107 ten tekst na liczb\u0119:<\/p>\n

let a = parseInt(prompt('Podaj liczb\u0119 a'));<\/code>
\nlet b = parseInt(prompt('Podaj liczb\u0119 b'));<\/code><\/p>\n

Zapisywanie wynik\u00f3w w zmiennych: let<\/code> i const<\/code><\/h2>\n

W JavaScript u\u017cywamy let<\/code> lub const<\/code>, aby tworzy\u0107 zmienne oraz sta\u0142e. let<\/code> pozwala na zmian\u0119 warto\u015bci zmiennej, natomiast const<\/code> oznacza, \u017ce warto\u015b\u0107 nie b\u0119dzie mog\u0142a zosta\u0107 zmieniona.<\/p>\n

Przyk\u0142ad:<\/p>\n

let a = 5; \/\/ zmienna, kt\u00f3r\u0105 mo\u017cemy zmienia\u0107<\/code>
\nconst element = document.querySelector(\"#wynik\"); \/\/ sta\u0142a, kt\u00f3rej warto\u015bci nie zmieniamy<\/code><\/p>\n

Znajdowanie element\u00f3w na stronie: querySelector()<\/code><\/h2>\n

Aby JavaScript m\u00f3g\u0142 „porozumiewa\u0107 si\u0119” z HTML, musimy znale\u017a\u0107 odpowiednie elementy. Do tego s\u0142u\u017cy querySelector()<\/code>. Na przyk\u0142ad:<\/p>\n

const element = document.querySelector(\"#suma\");<\/code><\/p>\n

Tutaj wybieramy element z id \u201esuma\u201d z dokumentu HTML. Pami\u0119tajcie, \u017ce r\u00f3\u017cnica polega na tym, \u017ce selektor w JavaScript oznaczamy poprzedzaj\u0105c jego nazw\u0119 znakiem #, natomiast w HTML zawsze odnosi si\u0119 w\u0142a\u015bnie do elementu oznaczonego jako id, w tym przypadku id=\"suma\"<\/code><\/p>\n

Operacje matematyczne<\/h2>\n

JavaScript obs\u0142uguje podstawowe operacje matematyczne, takie jak dodawanie (+<\/code>), odejmowanie (-<\/code>), mno\u017cenie (*<\/code>) i dzielenie (\/<\/code>). Mo\u017cemy tak\u017ce podnosi\u0107 liczby do pot\u0119gi za pomoc\u0105 **<\/code>:<\/p>\n

let wynik = a + b; \/\/ dodawanie<\/code>
\nlet potega = a ** b; \/\/ pot\u0119gowanie<\/code><\/p>\n

Operacje matematyczne w JavaScript obejmuj\u0105 podstawowe dzia\u0142ania, takie jak dodawanie i mno\u017cenie, ale tak\u017ce bardziej zaawansowane operacje, kt\u00f3re mog\u0105 by\u0107 przydatne w r\u00f3\u017cnych sytuacjach. Poni\u017cej znajdziesz tabel\u0119 przedstawiaj\u0105c\u0105 wszystkie mo\u017cliwe operacje matematyczne w JavaScript:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Operacja<\/strong><\/th>\nOpis<\/strong><\/th>\nPrzyk\u0142ad<\/strong><\/th>\nWynik<\/strong><\/th>\n<\/tr>\n<\/thead>\n
Dodawanie (+<\/code>)<\/td>\nDodaje dwie liczby<\/td>\n5 + 3<\/code><\/td>\n8<\/code><\/td>\n<\/tr>\n
Odejmowanie (-<\/code>)<\/td>\nOdejmuje jedn\u0105 liczb\u0119 od drugiej<\/td>\n10 - 4<\/code><\/td>\n6<\/code><\/td>\n<\/tr>\n
Mno\u017cenie (*<\/code>)<\/td>\nMno\u017cy dwie liczby<\/td>\n6 * 2<\/code><\/td>\n12<\/code><\/td>\n<\/tr>\n
Dzielenie (\/<\/code>)<\/td>\nDzieli jedn\u0105 liczb\u0119 przez drug\u0105<\/td>\n15 \/ 3<\/code><\/td>\n5<\/code><\/td>\n<\/tr>\n
Reszta z dzielenia (%<\/code>)<\/td>\nZwraca reszt\u0119 z dzielenia dw\u00f3ch liczb<\/td>\n10 % 3<\/code><\/td>\n1<\/code><\/td>\n<\/tr>\n
Pot\u0119gowanie (**<\/code>)<\/td>\nPodnosi liczb\u0119 do pot\u0119gi<\/td>\n2 ** 3<\/code><\/td>\n8<\/code><\/td>\n<\/tr>\n
Przypisanie dodawania (+=<\/code>)<\/td>\nDodaje i przypisuje wynik<\/td>\nlet a = 5; a += 3;<\/code><\/td>\na = 8<\/code><\/td>\n<\/tr>\n
Przypisanie odejmowania (-=<\/code>)<\/td>\nOdejmuje i przypisuje wynik<\/td>\nlet a = 10; a -= 4;<\/code><\/td>\na = 6<\/code><\/td>\n<\/tr>\n
Przypisanie mno\u017cenia (*=<\/code>)<\/td>\nMno\u017cy i przypisuje wynik<\/td>\nlet a = 6; a *= 2;<\/code><\/td>\na = 12<\/code><\/td>\n<\/tr>\n
Przypisanie dzielenia (\/=<\/code>)<\/td>\nDzieli i przypisuje wynik<\/td>\nlet a = 15; a \/= 3;<\/code><\/td>\na = 5<\/code><\/td>\n<\/tr>\n
Zaokr\u0105glenie w d\u00f3\u0142 (Math.floor()<\/code>)<\/td>\nZaokr\u0105gla liczb\u0119 w d\u00f3\u0142<\/td>\nMath.floor(4.7)<\/code><\/td>\n4<\/code><\/td>\n<\/tr>\n
Zaokr\u0105glenie w g\u00f3r\u0119 (Math.ceil()<\/code>)<\/td>\nZaokr\u0105gla liczb\u0119 w g\u00f3r\u0119<\/td>\nMath.ceil(4.1)<\/code><\/td>\n5<\/code><\/td>\n<\/tr>\n
Zaokr\u0105glenie (Math.round()<\/code>)<\/td>\nZaokr\u0105gla liczb\u0119 do najbli\u017cszej ca\u0142o\u015bci<\/td>\nMath.round(4.5)<\/code><\/td>\n5<\/code><\/td>\n<\/tr>\n
Pierwiastek kwadratowy (Math.sqrt()<\/code>)<\/td>\nZwraca pierwiastek kwadratowy<\/td>\nMath.sqrt(16)<\/code><\/td>\n4<\/code><\/td>\n<\/tr>\n
Warto\u015b\u0107 bezwzgl\u0119dna (Math.abs()<\/code>)<\/td>\nZwraca warto\u015b\u0107 bezwzgl\u0119dn\u0105 liczby<\/td>\nMath.abs(-5)<\/code><\/td>\n5<\/code><\/td>\n<\/tr>\n
Losowa liczba (Math.random()<\/code>)<\/td>\nGeneruje losow\u0105 liczb\u0119 z przedzia\u0142u (0, 1)<\/td>\nMath.random()<\/code><\/td>\nnp. 0.678<\/code><\/td>\n<\/tr>\n
Maksimum (Math.max()<\/code>)<\/td>\nZwraca najwi\u0119ksz\u0105 liczb\u0119 z podanych<\/td>\nMath.max(5, 10, 15)<\/code><\/td>\n15<\/code><\/td>\n<\/tr>\n
Minimum (Math.min()<\/code>)<\/td>\nZwraca najmniejsz\u0105 liczb\u0119 z podanych<\/td>\nMath.min(5, 10, 15)<\/code><\/td>\n5<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Wyja\u015bnienie<\/h3>\n
    \n
  • Podstawowe operacje (+<\/code>, -<\/code>, *<\/code>, \/<\/code>)<\/strong> s\u0105 intuicyjne i odpowiadaj\u0105 tradycyjnym dzia\u0142aniom matematycznym.<\/li>\n
  • Reszta z dzielenia (%<\/code>)<\/strong> przydaje si\u0119 np. przy sprawdzaniu parzysto\u015bci liczby (liczba % 2<\/code>).<\/li>\n
  • Pot\u0119gowanie (**<\/code>)<\/strong> pozwala szybko oblicza\u0107 pot\u0119gi liczb.<\/li>\n
  • Metody Math<\/code><\/strong> oferuj\u0105 r\u00f3\u017cne funkcje do zaokr\u0105glania liczb (Math.floor()<\/code>, Math.ceil()<\/code>) lub generowania losowych liczb (Math.random()<\/code>).<\/li>\n<\/ul>\n

    Ka\u017cda z tych operacji znajduje swoje zastosowanie w codziennych zadaniach programistycznych, takich jak obliczenia w formularzach, kalkulacje w grach czy przetwarzanie danych liczbowych.<\/p>\n

    Warunki: if...else<\/code><\/h2>\n

    Cz\u0119sto musimy podj\u0105\u0107 decyzj\u0119 na podstawie jakiego\u015b warunku. Na przyk\u0142ad, je\u015bli wynik jest wi\u0119kszy ni\u017c 10, zmie\u0144 kolor t\u0142a. Ni\u017cej przyk\u0142ad zastosowania if…else, kt\u00f3ry w prosty spos\u00f3b pokazuje, co si\u0119 zadzieje ze stron\u0105, w przypadku spe\u0142nienia warunku, lub w przeciwnym wypadku.<\/p>\n

    if (wynik > 10) {<\/code>
    \ndocument.body.style.backgroundColor = 'green';<\/code>
    \n} else {<\/code>
    \ndocument.body.style.backgroundColor = 'red';<\/code>
    \n}<\/code><\/p>\n

    Wyja\u015bnijmy teraz jak to si\u0119 odnosi do dokumentu HTML:<\/p>\n

    document.body.style.backgroundColor<\/code> to zapis w JavaScript, kt\u00f3ry zmienia kolor t\u0142a ca\u0142ej strony internetowej.<\/p>\n

      \n
    • document<\/code><\/strong>: odnosi si\u0119 do bie\u017c\u0105cego dokumentu HTML.<\/li>\n
    • body<\/code><\/strong>: wybiera element <body><\/code>, czyli g\u0142\u00f3wn\u0105 cz\u0119\u015b\u0107 strony.<\/li>\n
    • style.backgroundColor<\/code><\/strong>: pozwala zmieni\u0107 w\u0142a\u015bciwo\u015b\u0107 CSS, kt\u00f3ra okre\u015bla kolor t\u0142a. Mo\u017cesz przypisa\u0107 do niej dowolny kolor, np. 'green'<\/code>, 'red'<\/code>, lub kolor w formacie heksadecymalnym ('#ff0000'<\/code>).<\/li>\n<\/ul>\n

      Aby odnie\u015b\u0107 si\u0119 do innego elementu ni\u017c <body><\/code>, mo\u017cesz u\u017cy\u0107 np. jego identyfikatora (id<\/code>), klasy (class<\/code>), lub dowolnego innego selektora za pomoc\u0105 document.querySelector()<\/code>. Oto kilka przyk\u0142ad\u00f3w:<\/p>\n

      Zmiana t\u0142a elementu z id „box”:<\/strong><\/p>\n

      document.querySelector('#box').style.backgroundColor = 'yellow';<\/code><\/p>\n

      Zmiana t\u0142a elementu z klas\u0105 „container”:<\/strong><\/p>\n

      document.querySelector('.container').style.backgroundColor = 'blue';<\/code><\/p>\n

      Zmiana t\u0142a pierwszego akapitu (<p><\/code>):<\/strong><\/p>\n

      document.querySelector('p').style.backgroundColor = 'pink';<\/code><\/p>\n

      Zmiana t\u0142a wszystkich element\u00f3w <div><\/code>:<\/strong><\/p>\n

      document.querySelectorAll('div').forEach(el => {<\/code>
      \nel.style.backgroundColor = 'green';<\/code>
      \n});<\/code><\/p>\n

      Ka\u017cda z tych metod odnosi si\u0119 do r\u00f3\u017cnych element\u00f3w na stronie, pozwalaj\u0105c na dynamiczne manipulowanie stylem tych element\u00f3w.<\/p>\n

      Wy\u015bwietlanie formatowanego tekstu z HTML<\/h2>\n

      Mo\u017cemy u\u017cy\u0107 innerHTML<\/code> do wstawienia nie tylko tekstu, ale i element\u00f3w HTML, np. zmieniaj\u0105c styl wyniku:<\/p>\n

      const wynik = document.querySelector(\"#suma\");<\/code>
      \nwynik.innerHTML = '<h1 style=\"color:red;\">Wynik dodawania: ' + (a + b) + '<\/h1>';<\/code><\/p>\n

      P\u0142ynne animacje: setTimeout()<\/code> i transition<\/code><\/h2>\n

      Je\u015bli chcemy, aby co\u015b zmienia\u0142o si\u0119 stopniowo, mo\u017cemy u\u017cy\u0107 animacji CSS, a do jej uruchomienia w odpowiednim momencie setTimeout()<\/code>:<\/p>\n

      const wynik = document.getElementById(\"wynik\");<\/code>
      \nwynik.innerHTML = 'Suma: ' + suma;<\/code>
      \nsetTimeout(() => {<\/code>
      \nwynik.style.transition = \"font-size 2s\";<\/code>
      \nwynik.style.fontSize = \"40px\";<\/code>
      \n}, 100); \/\/ op\u00f3\u017anienie w wykonaniu kodu<\/code><\/p>\n

      W powy\u017cszym przyk\u0142adzie, mamy wynik.style.transition ustawiony dla elementu CSS o nazwie font-size, kt\u00f3ry ma trwa\u0107 2s. Oznacza to, \u017ce do wpisanego ni\u017cej fontsize wynosz\u0105cego 40px, czcionka wyniku ma zwi\u0119ksza\u0107 si\u0119 przez 2s, a\u017c uzyska rozmiar 40px.<\/p>\n

      Sprawdzanie typu danych: isNaN()<\/code><\/h2>\n

      Aby upewni\u0107 si\u0119, \u017ce u\u017cytkownik wprowadzi\u0142 liczb\u0119, mo\u017cemy sprawdzi\u0107, czy dana warto\u015b\u0107 nie jest tekstem. U\u017cywamy do tego isNaN()<\/code>:<\/p>\n

      if (isNaN(a)) {<\/code>
      \nalert(\"To nie jest liczba!\");<\/code>
      \n}<\/code><\/p>\n

      Kod zadzia\u0142\u0105 w ten spos\u00f3b, \u017ce sprawdzi warto\u015b\u0107 liczby a<\/code> i je\u015bli nie jest ona liczb\u0105, wy\u015bwietli komunikat o b\u0142\u0119dzie „To nie jest liczba!”.<\/p>\n

      Zdarzenia i obs\u0142uga przycisk\u00f3w: addEventListener()<\/code><\/h2>\n

      Mo\u017cemy uruchomi\u0107 kod w momencie, gdy u\u017cytkownik kliknie przycisk. Aby to zrobi\u0107, u\u017cywamy addEventListener()<\/code>:<\/p>\n

      W praktyce wygl\u0105da to tak, \u017ce cz\u0119\u015b\u0107 kodu JavaScript dzia\u0142a na stronie odrazu po jej za\u0142adowaniu, natomiast addEventListener()<\/code> daje mo\u017cliwo\u015b\u0107 wywo\u0142ania kodu JavaScript dopiero, w czasie, kiedy b\u0119dzie to wymagane. Oto przyk\u0142ad takiego zastosowania:<\/p>\n

      document.getElementById(\"przycisk\").addEventListener(\"click\", function() {<\/code>
      \nlet a = parseInt(prompt('Podaj a'));<\/code>
      \nlet b = parseInt(prompt('Podaj b'));<\/code>
      \ndocument.querySelector(\"#wynik\").innerHTML = 'Wynik: ' + (a + b);<\/code>
      \n});<\/code><\/p>\n

      Przeanalizujcie poni\u017cszy, ca\u0142y kod strony, zwr\u00f3\u0107cie uwag\u0119, gdzie znajduje si\u0119 przycisk (button) i jak si\u0119 go oznacza, \u017ceby m\u00f3g\u0142 zosta\u0107 rozpoznany przez JavaScript<\/p>\n

      <!DOCTYPE html><\/code>
      \n<html lang=\"pl\"><\/code>
      \n<head><\/code>
      \n<meta charset=\"UTF-8\"><\/code>
      \n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code>
      \n<title>Kalkulator dodawania<\/title><\/code>
      \n<\/head><\/code>
      \n<body><\/code><\/p>\n

      <div id=\"wynik\"><\/div><\/code>
      \n<button id=\"przycisk\">Oblicz sum\u0119<\/button><\/code><\/p>\n

      <script><\/code>
      \ndocument.getElementById(\"przycisk\").addEventListener(\"click\", function() {<\/code>
      \nlet a = parseInt(prompt('Podaj liczb\u0119 a'));<\/code>
      \nlet b = parseInt(prompt('Podaj liczb\u0119 b'));<\/code>
      \ndocument.querySelector(\"#wynik\").innerHTML = 'Wynik: ' + (a + b);<\/code>
      \n});<\/code>
      \n<\/script><\/code><\/p>\n

      <\/body><\/code>
      \n<\/html><\/code><\/p>\n

      Obs\u0142uga r\u00f3\u017cnych operacji: switch<\/code><\/h2>\n

      Aby wykona\u0107 r\u00f3\u017cne operacje w zale\u017cno\u015bci od wyboru u\u017cytkownika, mo\u017cemy u\u017cy\u0107 switch<\/code>:<\/p>\n

      Switch dzia\u0142a bardzo podobnie w ka\u017cdym j\u0119zyku, ni\u017cej na przyk\u0142adzie sk\u0142adnia tej instrukcji, w j\u0119zyku JavaScript.<\/p>\n

      let operacja = prompt('Podaj operacj\u0119: +, -, *, \/');<\/code>
      \nswitch (operacja) {<\/code>
      \ncase '+':<\/code>
      \nwynik = a + b;<\/code>
      \nbreak;<\/code>
      \ncase '-':<\/code>
      \nwynik = a - b;<\/code>
      \nbreak;<\/code>
      \ncase '*':<\/code>
      \nwynik = a * b;<\/code>
      \nbreak;<\/code>
      \ncase '\/':<\/code>
      \nwynik = a \/ b;<\/code>
      \nbreak;<\/code>
      \ndefault:<\/code>
      \nwynik = 'Nieznana operacja';<\/code>
      \n}<\/code><\/p>\n

      switch<\/code> pozwala na szybkie sprawdzenie kilku warunk\u00f3w.<\/p>\n

      Na koniec..<\/h2>\n

      JavaScript daje ogromne mo\u017cliwo\u015bci interakcji z u\u017cytkownikiem. Dzi\u0119ki metodom takim jak innerHTML<\/code> mo\u017cemy dynamicznie zmienia\u0107 zawarto\u015b\u0107 strony, a z u\u017cyciem prompt()<\/code> wprowadza\u0107 dane od u\u017cytkownika. Dodaj\u0105c do tego warunki, operacje matematyczne oraz zdarzenia jak klikni\u0119cie przycisku, mo\u017cemy tworzy\u0107 proste aplikacje i kalkulatory, kt\u00f3re wprowadzaj\u0105 interaktywno\u015b\u0107 na naszej stronie.<\/p>\n

      Pracuj\u0105c z JavaScriptem, kluczowe jest zrozumienie, w jakich sytuacjach i jak stosowa\u0107 powy\u017csze elementy, aby realizowa\u0107 r\u00f3\u017cnorodne zadania. Mamy nadziej\u0119, \u017ce ten artyku\u0142 pomo\u017ce Ci opanowa\u0107 te podstawy i wykorzysta\u0107 je w Twoich projektach!<\/p>\n","protected":false},"excerpt":{"rendered":"

      W tym artykule zajmiemy si\u0119 takimi zagadnieniami jak podstawowe funkcje, instrukcje warunkowe i prze\u0142\u0105czniki, jakie stosujemy w j\u0119zyku JavaScript. Om\u00f3wimy wi\u0119c z przyk\u0142adami zastosowa\u0144, czym s\u0105 prompt(), querySelector(), if…else, setTimeout(), transition, isNaN(), addEventListener() oraz switch.<\/p>\n","protected":false},"author":1,"featured_media":260,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[45,64],"class_list":["post-1010","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3-javascript","tag-html5","tag-javascript"],"_links":{"self":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/comments?post=1010"}],"version-history":[{"count":0,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1010\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media?parent=1010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=1010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=1010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}