HTML-objekter

Fra HTX Arduino
Spring til navigation Spring til 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.

Webcode
JavaScript for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer
js Input Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event
js Output Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas
js Syntaks Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens
js Objekt Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model
Tid i JavaScript Date objektet - setTimeout - setInterval
PHP Header - Include