{"id":79,"date":"2025-08-11T16:30:23","date_gmt":"2025-08-11T14:30:23","guid":{"rendered":"https:\/\/creativecoding.pl\/jak-wstawic-javascript-do-html\/"},"modified":"2025-08-11T16:30:23","modified_gmt":"2025-08-11T14:30:23","slug":"jak-wstawic-javascript-do-html","status":"publish","type":"post","link":"https:\/\/creativecoding.pl\/jak-wstawic-javascript-do-html\/","title":{"rendered":"Jak wstawi\u0107 JavaScript do HTML?"},"content":{"rendered":"

Aby wstawi\u0107 JavaScript do HTML<\/strong>, nale\u017cy u\u017cy\u0107 specjalnego znacznika <script><\/code>. Dzi\u0119ki niemu mo\u017cliwe jest dodanie zar\u00f3wno prostych, jak i zaawansowanych funkcji dynamicznych na stronie internetowej. Poni\u017cej przedstawiam szczeg\u00f3\u0142owy poradnik wraz z przyk\u0142adami wykorzystania.<\/p>\n

Osadzenie kodu JavaScript w dokumencie HTML<\/h2>\n

Najprostsz\u0105 metod\u0105 wstawienia JavaScript jest umieszczenie kodu mi\u0119dzy znacznikami <script><\/script><\/code><\/strong> bezpo\u015brednio w pliku HTML.<\/p>\n

<!DOCTYPE html>\n<html lang=\"pl\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Przyk\u0142ad JavaScript w HTML<\/title>\n<\/head>\n<body>\n  <h1>Witaj na mojej stronie!<\/h1>\n  <script>\n    alert(\"Strona zosta\u0142a za\u0142adowana!\");\n  <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
Kod umieszczony wewn\u0105trz tagu <script><\/code> wykona si\u0119 w momencie odczytywania go przez przegl\u0105dark\u0119.<\/p>\n
Osadzanie skrypt\u00f3w w r\u00f3\u017cnych miejscach dokumentu<\/h2>\n
    \n
  • W sekcji <head><\/code><\/strong> \u2013 kod wykona si\u0119, zanim zostanie za\u0142adowana tre\u015b\u0107 strony; najcz\u0119\u015bciej umieszcza si\u0119 tam skrypty nieinteraktywne, np. ustawienia analityki;<\/li>\n
  • W sekcji <body><\/code><\/strong> \u2013 skrypt dzia\u0142a ju\u017c po wczytaniu tre\u015bci strony; to najcz\u0119stsze i zalecane miejsce dla kodu interaktywnego, reaguj\u0105cego na dzia\u0142ania u\u017cytkownika.<\/li>\n<\/ul>\n
    Wstawianie zewn\u0119trznych plik\u00f3w JavaScript<\/h2>\n
    Je\u015bli ten sam skrypt ma by\u0107 u\u017cywany na wielu podstronach lub jest bardzo rozbudowany, warto umie\u015bci\u0107 kod w osobnym pliku .js<\/code> i do\u0142\u0105czy\u0107 go za pomoc\u0105 atrybutu src<\/code>.<\/p>\n
    <script src=\"skrypt.js\"><\/script>\n<\/code><\/pre>\n
    Plik skrypt.js<\/code> powinien znajdowa\u0107 si\u0119 w tej samej lokalizacji co plik HTML, lub trzeba poda\u0107 do niego odpowiedni\u0105 \u015bcie\u017ck\u0119.<\/p>\n
    Atrybuty async<\/code> i defer<\/code> w tagu <script><\/code><\/h2>\n
    Dodanie atrybutu async<\/code> lub defer<\/code> przy wstawianiu zewn\u0119trznego skryptu umo\u017cliwia optymalizacj\u0119 szybko\u015bci \u0142adowania strony:<\/p>\n
      \n
    • async<\/code><\/strong> \u2013 skrypt \u0142adowany jest w tle, a gdy si\u0119 pobierze, natychmiast si\u0119 wykonuje (niekoniecznie w tej samej kolejno\u015bci co inne skrypty);<\/li>\n
    • defer<\/code><\/strong> \u2013 skrypt \u0142aduje si\u0119 w tle, lecz wykonuje dopiero po pe\u0142nym wczytaniu i zinterpretowaniu ca\u0142ego HTML.<\/li>\n<\/ul>\n
      Przyk\u0142ad:<\/p>\n
      <script src=\"duzy_skrypt.js\" async><\/script>\n<script src=\"inny_skrypt.js\" defer><\/script>\n<\/code><\/pre>\n
      Praktyczne przyk\u0142ady zastosowania JavaScript w HTML<\/h2>\n
      Wy\u015bwietlanie komunikatu u\u017cytkownikowi<\/h3>\n
      <script>\n  alert(\"Witamy u\u017cytkownika na stronie!\");\n<\/script>\n<\/code><\/pre>\n
      Dynamiczna zmiana tre\u015bci strony<\/h3>\n
      <button onclick=\"document.getElementById('demo').innerHTML = 'Tre\u015b\u0107 zmieniona przez JavaScript!'\">Kliknij mnie<\/button>\n<p id=\"demo\">Stara tre\u015b\u0107<\/p>\n<\/code><\/pre>\n
      Walidacja formularza<\/h3>\n
      <form onsubmit=\"return walidujFormularz()\">\n  Imi\u0119: <input type=\"text\" id=\"imie\">\n  <input type=\"submit\" value=\"Wy\u015blij\">\n<\/form>\n<script>\n  function walidujFormularz() {\n    var imie = document.getElementById('imie').value;\n    if(imie === \"\") {\n      alert(\"Pole imi\u0119 nie mo\u017ce by\u0107 puste.\");\n      return false; \/\/ Blokuje wys\u0142anie formularza\n    }\n    return true;\n  }\n<\/script>\n<\/code><\/pre>\n
      Obs\u0142uga zdarze\u0144 (np. klikni\u0119cia przycisku)<\/h3>\n
      <button id=\"mojPrzycisk\">Kliknij mnie<\/button>\n<script>\n  document.getElementById('mojPrzycisk').onclick = function() {\n    alert(\"Przycisk zosta\u0142 klikni\u0119ty!\");\n  }\n<\/script>\n<\/code><\/pre>\n
      Proste obliczenia i wstawianie wynik\u00f3w do strony<\/h3>\n
      <input type=\"number\" id=\"a\">\n<input type=\"number\" id=\"b\">\n<button onclick=\"dodaj()\">Dodaj liczby<\/button>\n<p id=\"wynik\"><\/p>\n<script>\n  function dodaj() {\n    var a = Number(document.getElementById('a').value);\n    var b = Number(document.getElementById('b').value);\n    document.getElementById('wynik').innerText = \"Wynik: \" + (a + b);\n  }\n<\/script>\n<\/code><\/pre>\n
      Dobre praktyki<\/h2>\n
        \n
      • Umieszczaj w\u0142asny kod na ko\u0144cu sekcji <body><\/code> albo u\u017cywaj defer<\/code> \u2013 dzi\u0119ki temu masz pewno\u015b\u0107, \u017ce elementy HTML s\u0105 ju\u017c za\u0142adowane przed uruchomieniem skryptu.<\/strong>;<\/li>\n
      • Stosuj pliki zewn\u0119trzne<\/strong> do wi\u0119kszych skrypt\u00f3w \u2013 u\u0142atwia to utrzymanie kodu oraz jego wielokrotne wykorzystanie;<\/li>\n
      • Komenduj kod<\/strong> \u2013 \u0142atwiej si\u0119 potem odnale\u017a\u0107 w projekcie;<\/li>\n
      • Unikaj konflikt\u00f3w z innymi skryptami<\/strong> przez stosowanie funkcji i zmiennych o unikatowych nazwach.<\/li>\n<\/ul>\n
        JavaScript w HTML pozwala na tworzenie nowoczesnych, interaktywnych stron<\/strong>, gdzie u\u017cytkownik mo\u017ce wchodzi\u0107 w bezpo\u015bredni\u0105 interakcj\u0119 z tre\u015bciami, formularzami i elementami na stronie. Dzi\u0119ki r\u00f3\u017cnym metodom osadzania kodu, mo\u017cesz dostosowa\u0107 spos\u00f3b dzia\u0142ania j\u0119zyka JavaScript do potrzeb ka\u017cdego projektu.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Aby wstawi\u0107 JavaScript do HTML, nale\u017cy u\u017cy\u0107 specjalnego znacznika <script>. Dzi\u0119ki niemu mo\u017cliwe jest dodanie zar\u00f3wno prostych, jak i zaawansowanych funkcji dynamicznych na stronie internetowej. Poni\u017cej przedstawiam szczeg\u00f3\u0142owy poradnik wraz…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-79","post","type-post","status-publish","format-standard","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/creativecoding.pl\/wp-json\/wp\/v2\/posts\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativecoding.pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativecoding.pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativecoding.pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativecoding.pl\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":0,"href":"https:\/\/creativecoding.pl\/wp-json\/wp\/v2\/posts\/79\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativecoding.pl\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativecoding.pl\/wp-json\/wp\/v2\/categories?post=79"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativecoding.pl\/wp-json\/wp\/v2\/tags?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}