• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] JavaScript in HTML einbinden

P

Paul_Johann

Neues Mitglied
Hallo
Das mit dem Einbinden von meiner JavaScript Datei hat soweit ganz gut geklappt, aber jetzt weiß ich nicht, wie ich die Funktion im BODY aufrufen soll.
Die .html Datei lautet folgender Maßen:
HTML: 
<!DOCTYPE    html>
<html>
    <head>
        <title>Musterseite</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta charset="utf-8" />
        <script type="text/javascript" src="java.js"></script>
    </head>
    <body>

    </body>
Und in meiner .js Datei steht:
Javascript: 
<script src="[URL]http://code.jquery.com/jquery-1.10.2.min.js[/URL]"></script>
        <script type="text/javascript">
            $(document).ready(function() {
            $('.menubutton').click(function() {
            $('nav').slideToggle('slow');});});
        </script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script>
              $(document).ready(function (){
              $(window).scroll(function (){
              if ($(this).scrollTop() > 100){
                      $('.scrollup').fadeIn();}
            else {    $('.scrollup').fadeOut();}});
                      $('.scrollup').click(function () {
                      $("html, body").animate({scrollTop: 0}, 600);
              return false;});});
        </script>
Mit einer kleinen Funktion um die Uhrzeit anzuzeigen, hab ich gewusst, wie ich sie im BODY aufrufe. Nämlich einfach mit:
HTML: 
<script type="text/javascript" language="JavaScript>
<!--
zeit();
//-->
</script>
aber das war ja auch nicht schweer, weil die .js Datei folgendermaßen lautet:
Javascript: 
function zeit() {
uhrzeit = new Date();
document.write(uhrzeit.getHours() + " Uhr " + uhrzeit.getMinutes() + " Minuten" ); }

Ich habe das Scipt auch schon direkt in meine .html Datei geschrieben, und das hat dann auch funktioniert, allerdings hat die Seite immer ewig zum Laden gebraucht.

Ich danke im Vorraus :D
mfg. Paul
 
Tronjer schrieb:
Die Funktion wird automatisch ausgeführt, nachdem die Seite geladen ist.
Zum Vergrößern anklicken....

Aber meine Funktion wird auch nach längerem Warten nicht ausgeführt.
Kann es vielleicht sein, dass ich irgendwo einen Fehler drinn hab
Oder meinst du, die Funktion kann so überhaupt gehen?
Müsste sie ja eigendlich schun, da es ja klappt, wenn ich das script direkt in meine .html Datei rein schreibe.
 
Zuletzt bearbeitet:
Paul_Johann schrieb:
Die .html Datei lautet folgender Maßen:
HTML: 
<head>
  ...
  <script type="text/javascript" src="java.js"></script>
</head>
Und in meiner .js Datei steht:
Javascript: 
<script src="[URL]http://code.jquery.com/jquery-1.10.2.min.js[/URL]"></script>
        <script type="text/javascript">
            ...
        </script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script>
              ...
        </script>
Zum Vergrößern anklicken....
Fehler #1: <script></script>, sowie die Referenz zu *.js-Dateien haben in "java.js" nichts zu suchen.
Code: 
$(document).ready(function(){
  $('.menubutton').click(function(){
    $('nav').slideToggle('slow');
  });
  $(window).scroll(function(){
    if ($(this).scrollTop() > 100){
      $('.scrollup').fadeIn();
    } else {
      $('.scrollup').fadeOut();
    }
  });
  $('.scrollup').click(function(){
    $("html, body").animate({scrollTop: 0}, 600);
    return false;
  });
});
Fehler #2: Es wird nur eine jQuery-Bibliotheksdatei im HTML-Dokument implementiert.
HTML: 
<head>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script src="java.js"></script>
</head>
Paul_Johann schrieb:
Ich habe das Scipt auch schon direkt in meine .html Datei geschrieben, und das hat dann auch funktioniert, allerdings hat die Seite immer ewig zum Laden gebraucht.
Zum Vergrößern anklicken....
Wird in dem Moment wohl am Server von jQuery oder GoogleAPIs gelegen haben, woher Du die jQuery-Lib beziehst.

Alternativ kann die Bibliotheksdatei heruntergeladen, und auf dem eigenen Server hinterlegt werden.
 
Spicelab schrieb:
Fehler #1:
Wird in dem Moment wohl am Server von jQuery oder GoogleAPIs gelegen haben, woher Du die jQuery-Lib beziehst.

Alternativ kann die Bibliotheksdatei heruntergeladen, und auf dem eigenen Server hinterlegt werden.
Zum Vergrößern anklicken....

Danke für den Tipp
Aber, was mir gerade aufgefallen ist:
In meiner JavaScript Datei stehen 2 Scripte drinn, eins für den Menubutton in der mobilen Ansicht und eins für den Scrollup button.
Das erste für den Menübutton geht, nur das zweite für den scrollup button nicht.
 
Paul_Johann schrieb:
Kann es vielleicht sein, dass ich irgendwo einen Fehler drinn hab
Oder meinst du, die Funktion kann so überhaupt gehen?
Müsste sie ja eigendlich schun, da es ja klappt, wenn ich das script direkt in meine .html Datei rein schreibe.
Zum Vergrößern anklicken....
Wie gesagt, Fehler #1 ist der Grund dafür, dass auf diese Weise nichts mehr läuft.

Ist @Tronjer vielleicht (noch) nicht aufgefallen, dass der gesamte jQuery-Code (Lib + Scripts) incl. der einzelnen <script></script>-Tags in "java.js" steckt ???
 
Paul_Johann schrieb:
@Spicelab
die console zeigt an:
Uncaught SyntaxError: Unexpected token < java.js:1
Zum Vergrößern anklicken....
Und nun rate mal, worauf sich das <-Zeichen in der ersten Zeile Deines Scripts bezieht :(
Spicelab schrieb:
Paul_Johann schrieb:
In meiner JavaScript Datei stehen 2 Scripte drinn, eins für den Menubutton in der mobilen Ansicht und eins für den Scrollup button.
Das erste für den Menübutton geht, nur das zweite für den scrollup button nicht.
Zum Vergrößern anklicken....
Auch nicht mit meinem korrigierten HTML- u. JS-Code?
Zum Vergrößern anklicken....
Die Antwort bist Du mir noch schuldig geblieben.
"java.js"
Zum Vergrößern anklicken....
Btw, java != javascript :cool:
 
@Spicelab

Wenn ich nur so wie du geschrieben hast


$(document).ready(function(){
$('.menubutton').click(function(){
$('nav').slideToggle('slow');
});
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({scrollTop: 0}, 600);
return false;
});
});



reinschreibe, bringt er die fehlermeldung:
Uncaught ReferenceError: $ is not defined
 
Zuletzt bearbeitet:
Paul_Johann schrieb:
@Spicelab

Wenn ich nur so wie du geschrieben hast
  1. $(document).ready(function(){
  2. $('.menubutton').click(function(){
  3. $('nav').slideToggle('slow');
  4. });
  5. $(window).scroll(function(){
  6. if ($(this).scrollTop() > 100){
  7. $('.scrollup').fadeIn();
  8. } else {
  9. $('.scrollup').fadeOut();
  10. }
  11. });
  12. $('.scrollup').click(function(){
  13. $("html, body").animate({scrollTop: 0}, 600);
  14. return false;
  15. });
  16. });



reinschreibe, bringt er die fehlermeldung:
Uncaught ReferenceError: $ is not defined
Zum Vergrößern anklicken....
Und die besagt letztlich, dass die erforderliche jQuery-Bibliothek im HTML-Dokument fehlt.

Siehe hierzu nochmal den HTML-Code in meiner ersten Antwort bzgl. Fehler #2:
Spicelab schrieb:
Fehler #2: Es wird nur eine jQuery-Bibliotheksdatei im HTML-Dokument implementiert.
HTML: 
<head>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script src="java.js"></script>
</head>
Zum Vergrößern anklicken....
EDIT:

Hab die fehlerbereinigte Fassung aus Post #5 jetzt lokal getestet. Keinerlei Fehlermeldungen. Alle drei jQuery-Scripts verrichten ordnungsgemäß ihren Dienst.
 
OOOH, vielen lieben Dank @Spicelab , habe es zum Laufen gebracht.
Hätte mir vorher zumindest mal die Grundkenntnisse von JavaScript anlesen sollen...dann hätte ich auch gewusst, was ich in eine .js Datei reinschreiben soll und was nicht.
Aber jetzt funktioniert alles, vielen Dank
HTML: 
<!DOCTYPE    html>
<html>
    <head>
        <title>Musterseite</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta charset="utf-8" />
        <meta name="viewport" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
        <script src="[URL]http://code.jquery.com/jquery-1.10.2.min.js[/URL]"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script type="text/javascript" src="java.js"></script>
    </head>
    <body>
    </body>
Code: 
/*Menubutton */
        $(document).ready(function() {
        $('.menubutton').click(function() {
        $('nav').slideToggle('slow');});});
    /*Menubutton*/
 
    /*Scrollup-Button*/
        $(document).ready(function (){
          $(window).scroll(function (){
    if ($(this).scrollTop() > 100){
        $('.scrollup').fadeIn();}
  else {$('.scrollup').fadeOut();}});
          $('.scrollup').click(function () {
        $("html, body").animate({scrollTop: 0}, 600);
        return false;});});
    /*Scrollup-Button*/
 
Zuletzt bearbeitet:
Paul_Johann schrieb:
OOOH, vielen lieben Dank, habe es zum Laufen gebracht.
Hätte mir vorher zumindest mal die Grundkenntnisse von JavaScript anlesen sollen...dann hätte ich auch gewusst, was ich in eine .js Datei reinschreiben soll und was nicht.
Aber jetzt funktioniert alles, vielen Dank
HTML: 
<!DOCTYPE    html>
<html>
    <head>
        <title>Musterseite</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta charset="utf-8" />
        <meta name="viewport" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
        <script src="[URL]http://code.jquery.com/jquery-1.10.2.min.js[/URL]"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script type="text/javascript" src="java.js"></script>
    </head>
    <body>
    </body>
Code: 
/*Menubutton */
        $(document).ready(function() {
        $('.menubutton').click(function() {
        $('nav').slideToggle('slow');});});
    /*Menubutton*/

    /*Scrollup-Button*/
        $(document).ready(function (){
          $(window).scroll(function (){
    if ($(this).scrollTop() > 100){
        $('.scrollup').fadeIn();}
  else {$('.scrollup').fadeOut();}});
          $('.scrollup').click(function () {
        $("html, body").animate({scrollTop: 0}, 600);
        return false;});});
    /*Scrollup-Button*/
Zum Vergrößern anklicken....
Zeile 9 im HTML-Code bitte noch löschen (bevor Du hier irgendwann mit dem nächsten Problem aufschlägst), und $(document).ready() (https://learn.jquery.com/using-jquery-core/document-ready/) genügt einmal (siehe mein Script).
 
Paul_Johann schrieb:
achso, ok @Spicelab . Danke
Meinst du, ich soll die Verlinkungen ganz runrer unter meinen Content machen, dass der Browser zuerst den content lädt und dann das JavaScript?
Zum Vergrößern anklicken....
Ist so üblich, JS erst am Seitenende vor </body> einzubinden :)

Das erübrigt dann das $(document).ready() in Deinem jQuery-Script, weil zu diesem Zeitpunkt die Seite vollständig geladen ist, und somit im DOM alle Elemente, die per jQuery manipuliert werden sollen, dem Script bekannt sind :cool:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben