Objekt output

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

Hvordan anvendes et objekt til output

Lige som med input text-feltet, så er det en egenskab ved et objekt man sætter til en ny værdi.

I HTML-koden skal man have et tag (objekt) man kan skrive til. I princippet kan man skrive til mange forskellige typer objekter, men to typiske objekter man anvender er DIV-tag og SPAN-tag.

Et DIV-tag opfører sig næsten som et P-tag, bare uden den samme formattering, altså det laver et afsnit for sig selv.

Et SPAN-tag er helt neutralt, og man kan altså indlejre det i en linje, hvis man ønsker at kunne ændre på en del inde i en linje.

Et eksempel på et DIV-tag i HTML-koden kunne være:

<div id="udFelt">Startindhold af udFelt</div>

Hvor <div> og </div> angiver rammerne på tagget.

id="udFelt" er det ID (feltet har, som vi senere skal have fat i med javaScript koden. Dette ID skal være unikt i koden, for at browseren kan finde ud af hvilket tag den skal rette i.

Koden for at skrive noget ud i DIV-tagget er:

document.getElementById("udFelt").innerHTML = "Dette kommer ud i DIV-tagget";

Her er document.getElementById() den funktion der kan finde det rigtige objekt.

"udFelt" er navnet på netop det objekt vi vil have fat i.

innerHTML er den egenskab ved objektet vi skriver i, som indeholder indholdet der vises.

"Dette kommer ud i DIV-tagget" er det der kommer til at stå efter koden er udført.

Man kan vælge at starte med et tomt tag, hvor teksten så bare dukker op, eller man kan have et indhold i forvejen - dette indhold bliver så overskrevet.

Eksempler på anvendelse af et objekt til output

Her er 4 forskellige eksempler der viser lidt variation af hvordan tekst kan komme ud på en side.

Filen med de 4 koder kan hentes i en Zip-fil

Første eksempel viser at man kan læse noget ind i en variabel (her med en prompt), og få det indlæste ud i et objekt.

<html>
<head>
	<title>object</title>
<script type="text/javascript" language="JavaScript">
// javaScript funktioner og variable

function vis() {
	var test = prompt("Indtast noget");
	document.getElementById("udFelt").innerHTML = test;
}
</script>
</head>
<body>
<h1>objekter i siden</h1>
<p>Alting i siden er faktisk objekter, som man kan gøre noget ved med javaScript</p>
<p><input type="button" value="Klik på knappen" onClick="vis();"></p>

<div id="udFelt">Her er det er div-tag med et id der er navngivet udFelt</div>
</body>
</html>

Det næste eksempel er lidt mere sammensat, men viser at man kan få to forskellige tekster ud i et bestemt objekt (her er det et felt i en tabel), og det illustrerer også hvordan det kan ændre på layoutet

<head>
<script type="text/javascript" language="JavaScript">
// En lidt anden måde at demonstrere objekter på
var titel="Skrivning til Objecter";
document.title = titel;

function tekst1() {
	etFelt = document.getElementById("skriveFelt");
	etFelt.innerHTML = "Dette er en tekst der kan være i feltet";
}

function tekst2() {
	etFelt = document.getElementById("skriveFelt");
	etFelt.innerHTML = "Dette er en tekst der er for stor til være i feltet.<br />Det der sker, er at resten af siden bliver brudt om, for at teksten kan være der.<br />Teksten kan dog stadig læses, men det ser ikke så godt ud.";
}
</script>
</head>
<body>
<h1><script type="text/javascript" language="JavaScript">
document.write(titel + "</h1>");
</script>
<p>Layoutet er styret af en tabel</p>
<table width="400">
<tr>
        <td width="150">Her står noget</td>
        <td>Her står der noget mere, det fylder bare meget</td>
</tr>
<tr>
        <td>Her står igen noget</td>
        <td id="skriveFelt"></td> <!-- Det felt hvor outputtet kommer -->
</tr>
<tr>
        <td><input type="button" value="Skriv en tekst" onClick="tekst1();"></td>
        <td><input type="button" value="Skriv en tekst der er for stor" onClick="tekst2();"></td>
</tr>
</table>
</body>

Tredie eksempel viser lidt mere databehandling og kontrol af hvad der tastes ind, inden det kommer ud igen i et objekt.

Eksemplet har også en illustration af hvordan man kan sætte et inputfelt i fokus idet man loader siden.

<html>
<head>
	<title>object - 3</title>
<script type="text/javascript" language="JavaScript">
// Scriptet med en funktion - en tredie måde at demonstrere objekter på

// En funktion der kaldes når der klikkes på knappen "Beregn noget"
function beregn() {
	// Få fat i input-boksen som object
	ind = document.getElementById("inObject");
	// Læs værdien i input-boksen i egenskaben value
	tal = ind.value;
	// test om det er et tal
	if (isNaN(tal)) {
		alert("Der skal indtastes et tal");
		return;
	}
	// Foretag en tilfældig beregning
	tal = tal * 3;
	// Få fat i div-tagget som object
	ud = document.getElementById("outObject");
	// Skriv resultatet i div-tagget
	ud.innerHTML = "gange 3 = " + tal;
}
</script>
</head>
<body onLoad="document.getElementById('inObject').focus()">
<h2>Test af objekter</h2>
<input id="inObject" type="text" value="Tast et tal" />
<input type="button" value="Beregn noget" onClick="beregn();"/>
<div id="outObject">Resultat</div>
</body>
</html>

Fjerde eksempel viser hvordan man kan samle input op løbende og præsentere det - egentlig bliver det ikke samlet op i selve outputtet, selvom det ser sådan ud, men bliver samlet op i en variabel, der så overskriver objektet hver gang funktionen kaldes.

<html>
<head>
	<title>object - at udvide indholdet</title>
<script type="text/javascript" language="JavaScript">
// javaScript funktioner og variable

var streng = "";	// Dette er en tom streng, hvor der efterhånden opsamles mere tekst

function vis() {
	streng = streng + "Her kommer der bare noget tilfældig tekst<br />";
	document.getElementById("udFelt").innerHTML = streng;
}
</script>
</head>

<body>
<h1>Opsamling af objekter i siden</h1>
<p>Alting i siden er faktisk objekter, som man kan gøre noget ved med javaScript</p>
<p><input type="button" value="Klik på knappen" onClick="vis();"></p>

<div id="udFelt">Her er det er div-tag med et id der er navngivet udFelt</div>

<p>Prøv at klikke flere gange på knappen.</p>
</body>
</html>

Filen med de 4 koder kan hentes i en Zip-fil

Fordele ved et objekt til output

Fordelen ved at anvende et objekt til output er, at den er meget fleksibel, og man har mange muligheder med den.

Ulemper ved et objekt til output

Ulempen ved at anvende et objekt til output er, at den er lidt mere besværlig at anvende i praksis.