JavaScript-Verständnisfrage


Kai-Behncke

Erfahrenes Mitglied
#1
Hallo liebe Leute,
ich habe eine grundlegende JavaScript-Verständnisfrage:

Wenn ich folgendes HTML mit JavaScript hochlade:

Code:
<!DOCTYPE html>

<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Draw and Modify Features</title>
<script>
function myFunction (){
alert ("bla");

}
</script>
</head>
<body>
<p id="demo" onclick="myFunction();">Hallo</p>
</body>


So wird das Skript nach einem Mausklick auf den demo-p einwandfrei ausgeführt.

Nun ist es jedoch so, dass ich innerhalb des Codes noch eine Bibliothek importiere (import.js) (diese funktioniert einwandfrei)

z.B. mit verschiedenen externen Klassen:
Javascript:
 import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import {Draw, Modify, Snap} from 'ol/interaction.js';
      import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
      import {OSM, Vector as VectorSource} from 'ol/source.js';
      import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
Das "Gesamtskript sieht dann so aus:

Code:
<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Draw and Modify Features</title>

           <script>
          alert ("hello");
          function myFunction (){
          alert ("bla");
          }
      
      </script>
  </head>
  <body>

   <div id="test" style="width: 350px; height: 260px;"></div>
  
      <script src="./import.js"></script>

      <p id="demo" onclick="myFunction();">Hallo</p>
  </body>
</html>

...und, damit die externe Bibliothek funzzt, muss ich daraus ein bundle erstellen

[npm run build]

Wenn ich das tue, dann funktioniert aber mein Miniscript nicht "myFunction();".
Ich erhalte dann immer die Meldung:

myFunction is not defined

Kann mir jemand helfen? Ich glaube ich verstehe etwas Grundsätzliches nicht.....:-/
 

basti1012

Erfahrenes Mitglied
#2
my function ist not defined heist ja eigentlich das es noch nicht erstellt wurde wenn drauf zugegriffen wurde.
versuch mal dein mini script am ende der datei einzubinden, also am Ende vom body
 
#4
War oder ist es nicht so, dass JS von unten nach oben geht?
Ja das nennt man prozedural. Aber z.b. funktionen oder wenn man Objektorientiert programmiert kann auch dynamisch auf Teile des Codes zugegriffen werden welche irgendwo im Code stehen.
jetzt mal so etwas einfach ausgedrückt :).

Grundsätzlich sollte JS-Code immer am Ende des Doms stehen oder man nutzt eine funktion wie .ready (jQuery) oder vanilla js Equvalent.