Einbindung von JavaScript in HTML

Inhaltsverzeichnis

internes Einbinden
externes Einladen

internes Einbinden

<html>
	<head>
		<title>
		</title>
		<script language="JavaScript">
		<!--
			
		//-->
		</script>
	</head>
	<body>
		
	</body>
</html>

Der JavaScript-Code kommt in den Header des HTML-Quelltextes, wobei der <script>-Container verwendet wird.
Einleiten eines Kommentars in HTML:
```
<!--
```
Beenden eines Kommentars in HTML:
```
//-->
```

externes Einladen

JavaScript kann über zwei Methoden von einer externen *.js-Datei eingeladen werden.

1.Möglichkeit:

Aufruf innerhalb des öffneneden Script-Containers

Syntax:

<script language="JavaScript" src="dateiname.js">
</script>

Bei dieser Art des Aufrufs ist es egal, ob man im Header oder im Body einbindet.

Beispiel:

*.htm-Datei:

<html>
	<head>
		<title>
			
		</title>
		<script language="JavaScript" src="einladen1.js">
		</script>
	</head>
	<body>
		
	</body>
</html>

*.js-Datei:

<!--
	var name="Peter";
	alert(name);
//-->

2.Möglichkeit:

für ältere Browser, die nur JavaScript 1.1 verstehen

Beispiel 1:

*.htm-Datei:

<html>
	<head>
		<title>
			
		</title>
		<script language="JavaScript" src="einladen1.js" type="text/javascript">
		</script>
	</head>
	<body>
		
	</body>
</html>

*.js-Datei:

<!--
	var name="Peter";
	alert(name);
//-->

Beispiel 2:

*.htm-Datei:

<html>
	<head>
		<title>
			
		</title>
		<script language="JavaScript" src="einladen3.js" type="text/javascript">
		</script>
	</head>
	<body>
		
	</body>
</html>

*.js-Datei:

<!--
	var y=1;
	var x=1;
	var i=1;
	document.write('<table border=1>');
	for(y=1;y<4;y++)
	{
		document.write('<tr>');
		for(x=1;x<3;x++)
		{
			document.write('<td>'+i+++'</td>');
		}
		document.write('<tr>');
	}
	document.write('<table>');
//-->

Beispiel 3:

*.htm-Datei:

<html>
	<head>
		<title>
			
		</title>
		<style>
			body{background-color:#D0D0D0;color:#000000;}
			h1{color:#800000;text-align:center;background-color:#FFFF00;}
			table{text-align:center;border-color:#FF0000;border-width:5px;background-color:#00FFFF}
			th{color:#000080;border-color:#00FF00;border-width:3px;
			p{text-align:center;font-size:9pt;}
		</style>
		<script language="JavaScript">
		<!--BEGIN
			document.writeln("<h1>Tabelle mit externen Daten</h1>");
		//END-->
		</script>
	</head>
	<body>
		<script language="JavaScript" src="einladen4.js"type="text/javascript">
		</script>
		<p>
			16.07.2002
		</p>
	</body>
</html>

*.js-Datei:

<!--
	var a=new Array("PETER","BERND","FRITZ","FRANZ","ERNST","KARL");
	document.write('<table border=1 width="50%">');
	for(var i=1;i<7;i=i+2)
	{
		document.write('<tr><th>'+i+") "+a[(i-1)]+'</th><th>'+(i+1)+") "+a[i]+'</th></tr>');
	}
	document.write('</table>');
//-->

zurück zum Seitenanfang
zurück zum Index