Како користити ЈаваСцрипт у ХТМЛ-у за креирање интерактивних веб страница

by
Tweet
Share
Share
Pin

HTML, CSS i JavaScript su tri ključna jezika koja se upotrebljavaju u razvoju front-end-a. HTML je jezik za markiranje sadržaja, dok je CSS zadužen za stilizovanje elemenata.

JavaScript, kao objektno orijentisani programski jezik, primarno se koristi za kreiranje klijentske strane web i mobilnih aplikacija. Ovaj dinamički jezik otvorenog koda postao je jedan od najpopularnijih programskih jezika zahvaljujući svojoj fleksibilnosti i jednostavnosti razumevanja.

Kombinovanjem HTML5 i CSS3 možete kreirati statičke web stranice. Međutim, kako biste im dodali interaktivnost, neophodno je koristiti programski jezik poput JavaScript-a, koji web pregledači mogu da interpretiraju.

Ovaj članak će objasniti zašto je bitno koristiti JavaScript uz HTML, različite načine za dodavanje JavaScript koda u HTML, kao i najbolje prakse za integraciju ova dva jezika.

Zašto je ključno koristiti JavaScript u HTML-u

  • Dodavanje interaktivnosti: Interaktivnost omogućava da se reaguje na korisničke unose i akcije u realnom vremenu, bez potrebe za ponovnim učitavanjem stranice. Na primer, možete imati brojač koji se povećava svaki put kada se klikne. Drugi primer bi bio prikaz poruke korisniku da je njihov feedback poslat nakon klika na dugme za slanje.
  • Validacija na strani klijenta: JavaScript vam omogućava da proverite ispravnost unetih podataka u obrascima. Na primer, možete proveriti da li su uneti podaci u skladu sa formatom e-pošte, dužinom lozinke i kombinacijom znakova koje treba koristiti prilikom registracije.
  • Manipulacija DOM-om: JavaScript nudi Document Object Model (DOM), koji olakšava dinamičku promenu sadržaja web stranice. Pomoću ove tehnologije, sadržaj stranice se automatski ažurira na osnovu korisničkih interakcija, bez potrebe za ponovnim učitavanjem stranice.
  • Kompatibilnost između pretraživača: JavaScript je kompatibilan sa svim modernim web pregledačima. Stoga, web stranice kreirane pomoću HTML-a, CSS-a i JavaScript-a će funkcionisati bez problema u svim pregledačima.

Preduslovi

  • Osnovno razumevanje HTML-a: Potrebno je da razumete osnovne HTML oznake, kao što je dodavanje dugmića i kreiranje obrazaca.
  • Osnovno razumevanje CSS-a: Potrebno je da razumete CSS koncepte, kao što su ID-evi, klase i selektori elemenata.
  • Editor koda: Možete koristiti editor koda poput VS Code ili Atom. Takođe, možete koristiti online JavaScript kompajler ukoliko ne želite da instalirate softver na svom sistemu.

Kako koristiti JavaScript u HTML-u

Postoje tri glavna pristupa za dodavanje JavaScript koda u HTML. Razmotrićemo svaki od ovih pristupa i njihovu primenljivost.

#1. Ugrađivanje koda između oznaka <script> i </script>

Ovaj pristup omogućava da se JavaScript i HTML kodovi nalaze u istom fajlu (HTML fajlu). Za početak, kreiraćemo folder projekta kako bismo demonstrirali ovaj pristup. Možete koristiti sledeće komande:

mkdir javascript-html-playground
cd javascript-html-playground

Kreirajte dva fajla: index.html i style.css.

Dodajte sledeći početni kod u HTML fajl:

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Ime:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Poruka:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Pošalji" />
      </form>
    </div>
  </body>
</html>

Dodajte sledeći početni kod u svoj CSS fajl:

.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
  display: block;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 8px;
}
input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 2.5px;
  font-size: 8px;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #3e8e41;
}

Kada se web stranica prikaže, dobićete nešto slično ovome:

Sada možemo dodati jednostavan JavaScript kod koji prikazuje poruku „poslato“ kada se klikne na dugme za slanje. Refaktorisani HTML kod sa JavaScript-om će biti:

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Ime:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Poruka:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Pošalji" onclick="submitted()" />
      </form>
    </div>
    <script>
      function submitted() {
        alert("poslato");
      }
    </script>
  </body>
</html>

Kada kliknete na dugme za slanje, dobićete nešto slično ovome:

Prednosti ugrađivanja JavaScript koda između <script> … </script> oznaka

  • Brza implementacija: Rad u istom fajlu može uštedeti vreme, jer možete referencirati svoj JavaScript kod iz HTML koda iz istog fajla.
  • Lak za čitanje: Prisustvo <script> oznaka razdvaja HTML od JavaScript koda, što olakšava čitanje i debagovanje.

Nedostaci ugrađivanja JavaScript koda između <script> … </script> oznaka

  • Otežano ponovno korišćenje koda: Ako imate više formi u svojoj aplikaciji, to znači da ćete kreirati JavaScript kod za svaku formu.
  • Usporene performanse: Veliki blokovi koda u HTML dokumentu mogu usporiti brzinu učitavanja stranice.

#2. Inline kod korišćenjem JavaScript koda direktno u HTML-u

Umesto da zatvarate gornji JavaScript kod u <script> … </script> oznake, možete ga dodati direktno u HTML kod. Koristićemo isti HTML kod i stilski list (style.css).

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Ime:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Poruka:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Pošalji" onclick="alert('inline submit')" />
      </form>
    </div>
  </body>
</html>

Kada kliknete na pošalji, pojaviće se mali prozor na vašem pregledaču sa rečima „inline submit“.

Prednosti dodavanja JavaScript-a kao inline koda

  • Brza implementacija: Nema potrebe da se prebacujete sa jednog dokumenta na drugi da biste pisali HTML i JavaScript kod.
  • Savršeno za malu aplikaciju: Ako imate malu aplikaciju koja ne zahteva mnogo interaktivnosti, inline JavaScript je dobar izbor.

Nedostaci dodavanja JavaScript-a kao inline koda

  • Kod se ne može ponovo koristiti: Ako vaša aplikacija ima više formi, kreiraćete JavaScript kod za svaku formu.
  • Usporene performanse: Veliki blokovi koda u HTML dokumentu mogu usporiti brzinu učitavanja.
  • Čitljivost koda: Kako baza koda nastavlja da raste, čitljivost koda se smanjuje.

#3. Kreiranje eksternog JavaScript fajla

Kako vaša aplikacija raste, primetićete da dodavanje JavaScript koda direktno u HTML fajl nije dobra ideja. Takođe, verovatno ćete imati web stranice sa malom brzinom učitavanja ukoliko imate mnogo koda u HTML fajlu.

Kreirajte novi fajl script.js koji će sadržati vaš JavaScript kod.

Uvezite fajl script.js u HTML fajl:

<head>
  <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>
</head>

Nova ažurirana HTML stranica će imati ovaj kod:

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
    <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Ime:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Poruka:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Pošalji" />
      </form>
    </div>
  </body>
</html>

Dodajte ovaj kod u fajl script.js:

document.addEventListener("DOMContentLoaded", function() {
  const form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    event.preventDefault();
    alert("eksterni JS fajl submit");
  });
});

Ovaj JavaScript kod radi sledeće:

  • Ima slušaoca događaja koji čeka da se pokrene događaj DOMContentLoaded.
  • Funkcija povratnog poziva se izvršava nakon što se pokrene događaj DOMContentLoaded.
  • Kod koristi querySelector za odabir forme.
  • Koristimo event.preventDefault() da sprečimo DOM da izabere podrazumevano ponašanje (osveži stranicu ili pređe na novu stranicu) kada se pokrene događaj slanja.
  • Poruka „eksterni JS fajl submit“ se pokreće kada se pokrene događaj slanja.

JavaScript u HTML-u: najbolje prakse

  • Smanjite veličine fajlova: Što je veća veličina fajla, to je više vremena potrebno za učitavanje u web pregledaču. Minifikacija uklanja sve nepotrebne znakove u izvornom kodu bez promene njegovog značenja ili performansi. Možete koristiti alate poput Yahoo YUI Compressor i HTMLMinifier da biste kreirali kompaktnu bazu kodova.
  • Neka vaš kod bude organizovan: Ovo će učiniti vaš kod lakim za čitanje i održavanje. Možete koristiti ekstenzije kao što je Prettier da organizujete svoj kod.
  • Koristite spoljne biblioteke: Ako biblioteka može da izvrši određeni zadatak za vašu aplikaciju, nema potrebe da pišete kod od nule. Međutim, izbegavajte korišćenje više biblioteka koje postižu iste ciljeve na istom projektu.
  • Optimizujte JavaScript plasman: Ako nameravate da dodate JavaScript kod u svoj HTML fajl, uverite se da dolazi nakon HTML koda. Postavite JavaScript između oznaka <script> pre nego što zatvorite oznaku </body>. Ovo osigurava da se HTML sadržaj kao što su tekst, slike i tabela učitavaju prvo pre JavaScript-a, poboljšavajući brzinu učitavanja.

Zaključak

Sada možete komotno da koristite JavaScript sa HTML-om za kreiranje interaktivnih web stranica. Pristup koji ćete koristiti za spajanje ove dve tehnologije zavisiće od prirode web aplikacije koju kreirate. Na primer, možete da koristite inline kod kada pravite malu aplikaciju. S druge strane, velikoj aplikaciji je potreban eksterni JavaScript fajl koji ćete uvesti u svoj HTML fajl.

Pogledajte JavaScript biblioteke za tabele koje možete koristiti danas.