JavaScript lernen

Darstellung in JavaScript ändern

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das jQuery-Framework arbeitet mit CSS zusammen. Dabei passen Änderungen im JavaScript-Quellcode die Darstellung der Informationen auf einer Website entsprechend an.
03:04

Transkript

Jetzt kommen wir zur hohen Schule und verknüpfen alle drei Bereiche, nämlich HTML, CSS und JavaScript. Wir haben hier ein einfaches HTML-Dokument mit einer Überschrift und einem Text. Wir haben hier einen CSS-Bereich, der eben das Aussehen dieser Webseite beeinflusst, also Farbe, Größe und so weiter. Und jetzt möchte ich mal mit JavaScript auch auf diese Webseite Einfluss nehmen. Ich habe hier ein Framework ausgesucht, jQuery, und weil ich das ausgesucht habe, kann ich mit dem Befehl "$" und dann runde Klammer Einfluss nehmen, beispielsweise auf diesen Bereich Alter. Und das mache ich genauso wie hier oben mit einem Rautezeichen. Weil ich ja auf die ID zugreife, schreibe ich "Alter", runde Klammer zu und jetzt mache ich einen Punkt und möchte die Breite verändern, hier das "width", das möchte ich jetzt hier auch mal verändern. "Width" und dann schreibe ich "400", runde Klammer zu. Pixel muss ich hier nicht angeben. Jetzt machen wir mal RUN, und Sie sehen, jetzt ist dieser Balken deutlich größer. Wenn ich hier z. B. nur "100" eintrage, dann ist der Balken deutlich kleiner, deutlich weniger breit und muss sogar zweizeilig werden. Sie sehen hier an diesem einfachen Beispiel auch, dass JavaScript CSS schlägt. Das bedeutet, wenn wir hier unterschiedliche Angaben haben, also hier eine Breite von 100, hier aber eine Breite von 200, dann nimmt der Computer tatsächlich auch den Wert aus JavaScript. Ich kann mit jQuery auch direkt auf CSS zugreifen, indem ich jetzt dieses "width" ersetze durch CSS. Dann schreibe ich in diese runde Klammer zwei Werte, zum einen den CSS-Wert, den ich verändern möchte, also zum Beispiel "background" den umschließe ich in Anführungszeichen, weil es ja ein Text ist, dann schreibe ich "Komma" und dann sage ich z. B. "blue". Probieren wir es aus. Was passiert? Jetzt ist der Hintergrund blau geworden, weil ich diesen CSS-Wert "background", den ich hier habe, ersetze durch "blue" und eben nicht mehr durch "red". Achten Sie darauf: Hier oben brauche ich keinerlei Anführungszeichen, ich habe hier immer einen Doppelpunkt zwischen dem, was ich verändern möchte, und dem, wie ich es verändern möchte. Hier muss ich ein Komma dazwischen schreiben und Anführungszeichen verwenden. Das sind einfach unterschiedliche Systeme, die wir eben auch unterschiedlich bezeichnen müssen. Zu guter Letzt möchte ich Ihnen nochmal einen Befehl zeigen, den wir schon mal hatten, der heißt "fadeOut". Dann sage ich hier in der runden Klammer einfach, soll das Ganze schnell oder langsam gehen. Sagen wir mal "slow". Wenn ich jetzt auf RUN gehe, dann sehen Sie, wir hatten ganz kurz das Alter gesehen, dann fadet es langsam aus.

JavaScript lernen

Sehen, lernen und üben Sie das Schreiben von kleinen Programmen, die allesamt mit der Programmiersprache JavaScript erstellt werden.

2 Std. 6 min (37 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!