< Return to Video

Elemente von Grund auf neu erstellen | Computerprogrammierung | Khan Academy

  • 0:01 - 0:03
    Jetzt werde ich dir die Grundlagen
  • 0:03 - 0:06
    zum Einsatz von jQuery auf
    einer Webseite zeigen.
  • 0:06 - 0:09
    Der erste Schritt besteht darin,
    die jQuery-Bibliothek mit
  • 0:09 - 0:11
    einem '<script>'-Tag einzubinden.
  • 0:12 - 0:16
    Vorher haben wir JavaScript innerhalb
    unseres ''-Tags verwendet,
  • 0:16 - 0:20
    aber dieses Mal werde ich
    ein 'src'-Attribut hinzufügen.
  • 0:20 - 0:24
    Und das muss ich auf eine URL setzen.
  • 0:24 - 0:27
    Wie soll diese URL lauten?
  • 0:27 - 0:29
    Wenn ich an meinem eigenen
    Computer arbeiten würde
  • 0:29 - 0:30
    und jQuery in den gleichen
  • 0:30 - 0:33
    Ordner wie meine Webseite heruntergeladen hätte,
  • 0:33 - 0:36
    könnte ich hier einfach 'jquery.js' schreiben.
  • 0:36 - 0:39
    Aber das funktioniert hier bei Khan Academy nicht.
  • 0:39 - 0:43
    Hier brauche ich eine absolute URL von jQuery
  • 0:43 - 0:46
    irgendwo auf einem Online-Server.
  • 0:46 - 0:50
    Und es gibt eine Liste von
    diesen URLs unter jquery.com.
  • 0:51 - 0:53
    Eine davon werde ich hier einfügen.
  • 0:53 - 0:54
    So geht's.
  • 0:54 - 0:56
    Jetzt möchte ich auf ein paar Dinge
  • 0:56 - 0:58
    über diese URL hinweisen.
  • 0:58 - 1:02
    Die erste Sache ist, dass
    sie mit "https" beginnt.
  • 1:02 - 1:05
    Das bedeutet, dass es sich um eine sichere URL handelt.
  • 1:05 - 1:09
    Auf Khan Academy-Webseiten
    erlauben wir dir nur,
  • 1:09 - 1:11
    sichere Ressourcen zu verwenden.
  • 1:11 - 1:15
    Denn das ist generell eine gute
    Praxis in der Webentwicklung.
  • 1:16 - 1:19
    Okay. Die zweite Sache ist,
    dass diese Seite
  • 1:19 - 1:23
    auf einem Google-Server ist: googleapis.com.
  • 1:23 - 1:25
    Dieser Server wird ein CDN genannt,
  • 1:25 - 1:28
    ein Content Delivery Network,
  • 1:28 - 1:29
    was bedeutet, dass er optimiert ist,
  • 1:29 - 1:33
    um statische Dateien wie JavaScript-Bibliotheken
  • 1:33 - 1:35
    sehr schnell bereitzustellen.
  • 1:35 - 1:38
    Diesem Google-Server vertraue ich
  • 1:38 - 1:41
    und generell solltest du
    immer den Servern vertrauen,
  • 1:41 - 1:43
    von denen du Skripte einbindest.
  • 1:43 - 1:47
    Denn sie könnten möglicherweise
    schädliche Dinge mit deiner Seite anstellen.
  • 1:47 - 1:50
    Okay. Die dritte Sache ist,
    dass eine Versionsnummer
  • 1:50 - 1:54
    in dieser URL steht: 2.1.4.
  • 1:54 - 1:56
    Die jQuery-Bibliothek ist
    in aktiver Entwicklung
  • 1:56 - 1:59
    und es werden häufig neue Versionen veröffentlicht.
  • 1:59 - 2:01
    Die Zahlen weiter links
  • 2:01 - 2:03
    stehen für größere Versionsänderungen,
  • 2:03 - 2:06
    derweil die Zahlen weiter rechts
  • 2:06 - 2:08
    die kleineren Versionen darstellen.
  • 2:08 - 2:10
    Ich verwende hier jQuery 2,
  • 2:10 - 2:12
    das in modernen Browsern,
  • 2:12 - 2:14
    aber nicht im IE8 funktioniert.
  • 2:14 - 2:16
    Auf deiner eigenen Website
  • 2:16 - 2:20
    kannst du entscheiden, welche Version
    du je nach Bedarf verwenden willst.
  • 2:20 - 2:23
    Also gut. Wir haben also jQuery eingebunden.
  • 2:23 - 2:25
    Jetzt wollen wir es tatsächlich
  • 2:25 - 2:28
    in einem anderen '<script>'-Tag verwenden.
  • 2:30 - 2:33
    Jede JavaScript-Bibliothek stellt Funktionen zur Verfügung
  • 2:33 - 2:35
    und sie geben ihren Funktionen Namen.
  • 2:35 - 2:37
    Wir müssen in der Dokumentation nachsehen,
  • 2:37 - 2:39
    wie diese Funktionsnamen lauten
  • 2:39 - 2:42
    und was sie tatsächlich tun.
  • 2:42 - 2:45
    Nun, die jQuery-Bibliothek
    stellt eine Hauptfunktion
  • 2:45 - 2:48
    mit einem sehr kurzen Namen zur Verfügung.
  • 2:48 - 2:51
    Es ist nur ein Dollarzeichen.
  • 2:51 - 2:52
    Wir schreiben also
  • 2:52 - 2:54
    zuerst einfach Dollar.
  • 2:54 - 2:57
    Dann zwei Klammern,
    weil es eine Funktion ist,
  • 2:57 - 2:59
    und natürlich ein Semikolon.
  • 2:59 - 3:02
    Es ist schön, dass dieser
    Funktionsname so kurz ist,
  • 3:02 - 3:06
    denn wir werden diese Funktion
    sehr oft aufrufen.
  • 3:06 - 3:09
    Es gibt eine Menge Dinge, die wir
    an diese Funktion übergeben können,
  • 3:09 - 3:10
    aber für dieses erste Beispiel
  • 3:10 - 3:15
    werde ich nur 'h1' übergeben.
  • 3:16 - 3:18
    Wenn ich das getan habe,
  • 3:18 - 3:20
    sagt dies jQuery, dass es
  • 3:20 - 3:23
    alle 'h1'-Elemente auf der Seite finden und
  • 3:23 - 3:28
    sie als ein jQuery-Objekt zurückgeben soll.
  • 3:28 - 3:29
    Jetzt, wo ich das getan habe,
  • 3:29 - 3:33
    kann ich andere Methoden auf
    dem jQuery-Objekt aufrufen,
  • 3:33 - 3:37
    um alle gefundenen
    'h1'-Elemente zu bearbeiten.
  • 3:37 - 3:40
    Wenn ich zum Beispiel den
    Text aller Elemente ändern möchte,
  • 3:40 - 3:43
    kann ich die Funktion 'text' aufrufen
  • 3:43 - 3:46
    und ihr einen String übergeben.
  • 3:47 - 3:48
    Es funktioniert!
  • 3:48 - 3:50
    Ja!
  • 3:50 - 3:51
    Und wir sind fertig!
  • 3:51 - 3:53
    Das ist unser erstes Stück jQuery.
  • 3:53 - 3:57
    Wir haben also die jQuery
    Bibliothek mit dem 'script'-Tag eingebunden,
  • 3:57 - 4:00
    jQuery angewiesen, alle
    'H1' auf der Seite zu finden
  • 4:00 - 4:04
    und dann jQuery gebeten,
    den Text von allen zu ändern.
  • 4:04 - 4:06
    Bald werden wir noch mehr lernen.
  • 4:06 - 4:08
    Wir gehen mehr ins Detail,
  • 4:08 - 4:11
    werden mehr Möglichkeiten zur Auswahl haben
    und auch Elemente manipulieren.
  • 4:11 - 4:14
    Wir verwenden jQuery, um auf Benutzerereignisse
    auf der Seite zu reagieren. Und wir werden auch
  • 4:14 - 4:19
    lustige Sachen wie Animationen
    und Effekte ausprobieren.
Title:
Elemente von Grund auf neu erstellen | Computerprogrammierung | Khan Academy
Description:

Lerne, wie du die jQuery JavaScript-Bibliothek mithilfe eines Skript-Tags in deine Seite einbindest und wie du jQuery verwenden kannst, um Teile einer Seite zu verändern.

Übe diese Lektion gleich selbst auf KhanAcademy.org:
https://de.khanacademy.org/computing/computer-programming/html-js-jquery/jquery-intro/p/challenge-your-first-jquery?utm_source=YT&utm_medium=Desc&utm_campaign=computerprogramming

Schau dir die nächste Lektion an: https://de.khanacademy.org/computing/computer-programming/html-js-jquery/jquery-dom-access/p/finding-elements-with-jquery?utm_source=YT&utm_medium=Desc&utm_campaign=computerprogramming

Hast du die vorherige Lektion verpasst? https://de.khanacademy.org/computing/computer-programming/html-js-jquery/jquery-intro/v/what-is-jquery?utm_source=YT&utm_medium=Desc&utm_campaign=computerprogramming

Computerprogrammierung auf Khan Academy: Lerne, wie man Zeichnungen, Animationen und Spiele mit JavaScript und ProcessingJS programmiert, oder wie man Webseiten mit HTML und CSS erstellt. Du kannst alles, was du erstellst, mit anderen teilen, sehen, was andere erstellt haben und voneinander lernen!

Über Khan Academy: Khan Academy ist eine gemeinnützige Organisation, die es sich zur Aufgabe gemacht hat, jedem und überall eine kostenlose, erstklassige Bildung zu bieten. Wir glauben, dass Lernende jeden Alters unbegrenzten Zugang zu kostenlosen Bildungsinhalten haben sollten, die sie in ihrem eigenen Tempo meistern können. Wir nutzen intelligente Software, fundierte Datenanalysen und intuitive Benutzeroberflächen, um Schüler/innen und Lehrer/innen auf der ganzen Welt zu unterstützen. Unsere Ressourcen decken den gesamten Bildungsbereich von der Vorschule bis zum College ab, einschließlich Mathe, Biologie, Chemie, Physik, Wirtschaft, Finanzen, Geschichte, Grammatik und mehr. In Zusammenarbeit mit dem Entwickler des Tests, dem College Board, bieten wir eine kostenlose, personalisierte SAT-Testvorbereitung an. Khan Academy wurde in Dutzende von Sprachen übersetzt, und jedes Jahr nutzen 100 Millionen Menschen weltweit unsere Plattform. Weitere Informationen findest du unter www.khanacademy.org, folge uns auf Facebook oder auf Twitter unter @khanacademy. Und denk daran: Du kannst alles lernen.

Umsonst. Für jeden. Für immer. #YouCanLearnAnything

Abonniere den Computerprogrammier-Kanal von Khan Academy: https://www.youtube.com/channel/UCzYDKG5mmfPPIosXuQ1PvEA?sub_confirmation=1
Abonniere die Khan Academy: https://www.youtube.com/subscription_center?add_user=khanacademy
more » « less
Video Language:
English
Team:
Khan Academy
Duration:
04:19

German subtitles

Revisions Compare revisions

Our website uses cookies for analysis purposes.