JS in HTML(5)

Dude566 · Verfasst: Mo 20.06.11 12:14

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

markieren

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

markieren

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:

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

jaenicke · Verfasst: Mo 20.06.11 13:37

Dude566 hat folgendes geschrieben :

markieren

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.

Dude566 · Verfasst: Mo 20.06.11 13:50

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

Da hatte ich garnicht dran gedacht, jetzt muss ich immer darauf achten. :wink:

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

Regan · Verfasst: 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.

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):

markieren

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>

markieren

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;
}

Dude566 · Verfasst: Mo 20.06.11 15:44

Regan hat folgendes geschrieben :

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):

Das habe ich doch so gemeint, oder ist das falsch rüber gekommen?!

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

Regan · Verfasst: Mo 20.06.11 17:59

Ich dachte, dass du jetzt die Script-Tags immer in den Body hinter das Auftauchen des Elementes schreibst

Dude566 · Verfasst: Mo 20.06.11 18:33

Regan hat folgendes geschrieben :

Ich dachte, dass du jetzt die Script-Tags immer in den Body hinter das Auftauchen des Elementes schreibst

Nein nein, ich habe es schon nach user profile icon

jaenickes Antwort so gemacht wie du oben im Code, trotzdem danke.

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme