1. Naslovnica
  2. Uvod u html
  3. Html i JavaScript

HTML i JavaScript : HTML and JavaScript

Postoje tri načina za povezivanje HTML-a s JavaScript-om: Umetanjem interne skripte, povezivanjem s vanjskom .js datotekom ili dodjeljivanjem događaja u sam HTML element.

Uvod u HTML
krivulja

Tečaj - Uvod u HTML

Uvod u html

Image by rawpixel.com on Freepik

4.5

Zašto ne sada?

Uvod u HTML

Povezivanje s JavaScript-om : Include JavaScript


Interne skripte

Vanjsko povezivanje

Događaji u HTML elementu

Interne skripte : Internal Scripts

Kôd možemo umetnuti između početne i završne oznake html elementa <script>. <script> element se može nalaziti bilo unutar <head> ili <body> dijela web stranice.

Primjer umetanja JavaScript kôda u datoteci main.jsunutar <head> elementa:

<!doctype HTML>
<head>
  <script>
    if(document.getElementById('js-mouse')) {
    document.getElementById('js-mouse').onmouseover = function() {
        alert('Miš se nalazi iznad!');
    }
  </script>
</head>

JavaScript i web dizajn? Svakako!

Vanjsko povezivanje : External JavaScript Code

Koristeći vanjsko povezivanje s JavaScriptom, njegove funkcije možemo koristiti na više web stranica.

Povezivanje s vanjskom .js datotekom obavljamo dodavanjem vrijednosti src svojstvu u početnoj oznaci html elementa <script>. Kada je dodijeljena vrijednost svojstvu src, <script> element ne smije sadržavati interni kôd.

Primjer povezivanja html dokumenta s vanjskom JavaScript datotekom (u ovom primjeru datoteka u kojoj se nalazi JavaScript kôd se zove skripta.js):

<script type="text/javascript" src="skripta.js">

U HTML elementu : Inside HTML elements

JavaScript događaje možemo umetnuti i unutar pojedinih html elemenata dodavanjem nazivu događaja kao vrijednosti kôd u JavaScriptu.

Primjer dodavanja JavaScript kôda događaju onmouseover (Događaj se okida kada se miš nalazi na području koje pokriva element. Za blok elemente to površina cijelog retka roditeljskog elementa).

<p onmouseover="alert('Miš se nalazi iznad!')">Moj web dizajn</p>

Gornji primjer u web pregledniku imao bi slijedeći izgled. Kada pokazivač miša dovedemo na područje naslova ispisat će se navedena poruka u pop-up prozoru:

Moj web dizajn