HTML-objekter

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

Alle tags i HTML kan betragtes som objekter.

Visningen i en hjemmeside er styret ved hjælp af tags, hvor nogle af de helt generelle tags er Paragraph - et P-tag - Header niveau 1 - et H1-tag - en link-tag (Anchor) A-tag, der ken skrives som vist her

<p>
    Et afsnit (en Paragraph) lagt ind i et P-tag
</p>

<h1>En overskrift (Header) H1-tag</h1>
<a href="http://www.google.com">Link-tag med link til google</a>

Set fra javascripts side kan alle tags manipuleres, og man kan tilknytte kode til de forskellige tags (objekter).

Alle objekter (tags) kan have forskellige egenskaber, der kan tilknyttes på forskellig vis.

  • Man kan skrive egenskaberne direkte på objekterne, som f.x. link-tagget der har en href-egenskab tilknyttet som angiver hvor linket fører hen - tilsvarende kan mange egenskaber tilknyttes direkte på tagget.
  • Man kan sætte generelle egenskaber på tags ved hjælp af CSS, enten defineret inde i filen eller i en separat CSS-fil. Disse generelle egenskaber kan sætte til at gælde alle tags i hele filen (det kan have den type egenskaber), de kan sættes på alle tags af en bestemt type, og de kan sættes til en bestemt class, som så sættes på de objekter (tags) man ønsker skal have den egenskab.
  • Man kan lade javascript bestemme egenskaberne for objektet, og her kan det lade sig gære at ændre egenskaber dynamisk (mens brugeren er i siden), det kan f.x. være at skifte indholdet i et billede, når musen føres hen over.

Til et objekt kan man også tilknytte forskellige handlinger - det er typisk at man angiver at en funktion skal kaldes, når der sker noget med objektet - det kan være at en funktion skal kaldes, når man klikker på objektet - det kalder man at der tilknyttes en Event-handler, altså at der på en Event (handling) bliver tilknyttet hvilken handling der skal ske (en funktion) når eventen indtræffer.

Eksempel på kode med egenskaber og event-handler

<html>
    <head>
        <script type="text/Javascript" langauge="Javascript">

        function skiftTekst() {
             // denne javascript function går ned i html´en og finder objektet med det id, den har fået at vide den skal.
             // inde i objektet skifter den value ud med en anden tekst, så det skifter inde i objektet
             document.getElementById("b").value = "med dig";
        }
        </script>

    </head>

<body>

<!-- input har et id, og en form, som enten kan være "text" eller en "button"
     det har nogle egenskaber (en value der er "hej"), og der er tilknyttet en eventhandler på mouse over. -->
   <input id="b" type="text" value="hej" onmouseover="skiftTekst();" />

</body>
</html>

Koden ligger i en ZIP-fil her.