Entwickler-Ecke :: Thema anzeigen

Dude566 - Mo 20.06.11 12:14
Titel: JS in HTML(5)

Hallo Community,

ich habe mal eine Frage zu HTML(5) und Javascript.

Ich schreibe gerade zu Übungszwecken an einem kleinen Zeichenprogramm bei dem ich das neue Canvas Element von HTML5 verwende.

Ich habe die Methoden etc. zum Zeichnen in eine externe JS-Datei ausgelagert und binde diese dann im HTML-Code ein.

Warum aber kann ich die Datei nicht in "head" eintragen aber im "body" ist es in Ordnung und funktioniert auch?

HTML

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

<!DOCTYPE HTML>
<html>
<head>
  <title>Online Zeichenprogramm</title>
  <!-- Funktioniert nicht -->
  <script type="text/javascript" src="drawing.js"></script>
</head>
<body>

  <h1>Online-Zeichenprogramm</h1>
  
  <canvas id="DrawingArea" width="800" height="800" style="border: 1px solid #000000; cursor: crosshair;" onmousemove="drawLine(event);" onmousedown="start(event);" onmouseup="stop();">
  </canvas>
  
  <!-- Funktioniert -->
  <script type="text/javascript" src="drawing.js"></script>
  
</body>
</html>

Javascript

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:

var canvas = document.getElementById("DrawingArea");
var ctx = canvas.getContext("2d");
var draw = false;

function drawLine(event) {
  if (draw) {
    var posX = event.pageX;
    var posY = event.pageY;
    ctx.lineTo(posX, posY);
    ctx.stroke();
    // mit ctx.fill() würde der Inhalt von Anfangs und Endpunkt ausgefüllt werden
  }
}
    
function start(event) {
  var posX = event.pageX;
  var posY = event.pageY;
  ctx.moveTo(posX, posY);
  draw = true;
}
    
function stop() {
  draw = false;
}

Hoffe ihr könnt mir diese Anfängerfrage beantworten, ich stehe gerade auf dem Schlauch. :oops:

jaenicke - Mo 20.06.11 13:37

Dude566 hat folgendes geschrieben :

Quelltext

1:	var canvas = document.getElementById("DrawingArea");

Dein Element DrawingArea existiert doch noch gar nicht, die Seite ist ja noch im Head in dem Moment. ;-)

Normalerweise packt man das in eine Funktion, die dann im Body bei onload aufgerufen werden kann.

Regan - Mo 20.06.11 14:45

Dude566 hat folgendes geschrieben :

Oh deshalb, weil ich im head Bereich JS-Code einbinde der auf ein Element zugreift welches erst später im HTML Code auftaucht. :D

Prinzipiell nein. Du sollst den Javascript Code schon in den Head schreiben. Allerdings greifst du auf ein Element zu, was zu diesem Zeitpunkt noch nicht existiert. Verbessert könnte es so aussehen (ungetestet):

HTML

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

<!DOCTYPE HTML>
<html>
<head>
  <title>Online Zeichenprogramm</title>
  <script type="text/javascript" src="drawing.js"></script>
</head>
<body onload="init();">

  <h1>Online-Zeichenprogramm</h1>
  
  <canvas id="DrawingArea" width="800" height="800" style="border: 1px solid #000000; cursor: crosshair;" onmousemove="drawLine(event);" onmousedown="start(event);" onmouseup="stop();">
  </canvas>  
</body>
</html>

Javascript

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:

var canvas;
var ctx;
var draw = false;
function init() {
  canvas = document.getElementById("DrawingArea");
  ctx = canvas.getContext("2d");
}

function drawLine(event) {
  if (draw) {
    var posX = event.pageX;
    var posY = event.pageY;
    ctx.lineTo(posX, posY);
    ctx.stroke();
    // mit ctx.fill() würde der Inhalt von Anfangs und Endpunkt ausgefüllt werden
  }
}
    
function start(event) {
  var posX = event.pageX;
  var posY = event.pageY;
  ctx.moveTo(posX, posY);
  draw = true;
}
    
function stop() {
  draw = false;
}

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2026 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!