NA VRH
DOMOV HTML CSS JavaScript jQuery AngularJS PHP MySQL Python C# Sass WordPress
glave/headings

JavaScript JavaScript načini Sintaksa Spremenljivke Števila Objekti Funkcije Pogoji Zanke Nizi Datum in čas DOM Array AJAX Knjižnica

JavaScript načini

V primeru JavaScript v glavi HTML sem dodal gumb in z uporabo JavaScript, se zgodi nek dogodek (ang. Event). Ta dogodek je lahko sprememba besedila, slike ali kaj podobnega. V gumb (ang. Button) sem dodal JavaScript funkcijo, zato da se gumb sklicuje na element. Element v tem primeru je <p>, in se lahko ponovi samo enkrat, ker drugače lahko pride do zmešnjav.

JavaScript načini

Inline način se vpisuje enako kot CSS Inline način, in sicer tako, da ga vpišemo kar v element sam, kot je recimo osvežiti spletno stran v gumbu.

    <button class="gumb-zelen" onclick="window.location.reload()">Osveži spletno stran!</button>
        

Zunanji JavaScript pa je podoben kot CSS Zunanji slog, pomeni, da scrip napišemo v zunanjo datoteko, in jo shranimo na strežnik kot .js. Potem jo s spodnjim ukazom, uvozimo v naš dokument.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>External file</title>
        <script src="povezava do datoteke/imeDatoteke.js"></script>
    </head>
    <body>
    <p id="example"></p>
    <button onclick="myFunction()">Click me</button>
    </body>
    </html>
            

Dodajam še primer notranjega načina, in sicer sem v odstavek dodal id, ki sem ga imenoval primer in ga dodal v JavaScript. V JavaScript vidimo tudi funkcijo getElementById, ki pomeni, da se sklicuje na določen element, v mojem primeru je to <p>. InnerHTML pomeni, da bo elementu spremenil vsebino ob pritisku na gumb. onclick je atribut, ki bo spremenil vrednost besedila ob pritisku.

    <p id="primer">Odstavek, ki se vedno začne v novi vrstici, in je blok za besedilo.</p>
    <button onclick="mojaFunkcija()">Pritisni gumb</button>

    <script>
        function mojaFunkcija() {
            document.getElementById("primer").innerHTML = "Dobrodošli v JavaScript!";
        }
    </script>
            

V tretjem primeru naj bi z gumbi prižigali in ugašali žarnico.

    <button onclick="on()">Prižgi luč</button>
    <img id="img" src="povezava do slike">
    <button onclick="off()">Ugasni luč</button>

    <script>
        function on() {
            document.getElementById('img').src="povezava do slike";
        }
        function off() {
            document.getElementById('img').src="povezava do slike"
        }
    </script>