Super Video. Ich bin nutze sehr oft JQuery aus Bequemlichkeit und würde mich sehr freuen, wenn du mehr solcher Videos machst. Gerne um Sachen wie slidein, show, hide, etc aus JQuery einfach in Javascript umzusetzen.
Die Sachen mit slidein, show, hide kannst du einfach mit einer css Definition umsetzen und mit JS die Klassen vergeben. hide/show machst du entweder mit visible, display oder opacity (je nachdem wie es sich auswirken soll), dazu noch transition für die Animation und fertig. slidein kannst du mit margin und width/height + transition für die Animation umsetzen. Oder für die Animation Keyframes verwenden. Ich glaube das ist sogar schon mehrfach in seinen Videos vorgekommen^^
Wenn du danach gehst, hätte er sich die komplette erste Hälfte des Videos schenken können. Denn Selektieren gehört auch zu den Basics und ist auch schon mehrfach vorgekommen.
13:10 da muss ich dir leider widersprechen, Sizzle (Selektor-Lib, welche von jQuery benutzt wird) kann schneller alle Elemente mit dem angegebenen Selektor sammeln. Test mit jeweils 1000 Selektionen Sizzle/jQuery: 2ms document.querySelectorAll: 5ms
ich bin noch ein echter Anfänger, jedoch die Erklärung super easy und sofort verstanden. Dafür dass in meinem Zeugnis ne 5 für Abschlussprüfung steht, war das wohl eine sehr gute Erklärung, danke man.
@9:00 Servus, ich bin neu in der Webentwicklung. Wie heisst dieser Editor, wo man den links "Click mich"-Button erstellt und dann sofort rechts oben den Button angezeigt bekommen und beim draufklicken dann unten rechts das Debugging stattfindet? Das ist ja krass interaktiv!
Sehr cooles Video! Für mich als (nicht mehr ganz) Einsteiger ist die Vortragsgeschwindigkeit so an der Obergrenze :) (Ihr Coder seit wohl immer auf Kaffee oder wie??) Aber das passt schon, man kann ja anhalten wenns Hirn mal stehen geblieben ist... Hab jQuery eigentlich immer als Bequemlichkeit benutzt, nie in großen Projekten, mache JS nur so hobbymäßig. Die Verlockung ist groß, wenn man diese rel. kurzen $(dingens) verwenden kann und nicht eeeewig lange getElemenById, Class usw. Aber genau so wie du im Viedo sagst ist das alles Makulatur bei kleinen Sachen. Würde mal gern einen Benchmark sehen, wo 10.000 divs mit jQuery vs. JS abgesucht werden, was da die Performance so sagt ;) Weiter so!
Performance ist bei plain JS sicher ein vielfaches schneller aber 10000 divs sollte man nicht haben ;) "Have more than 1,500 nodes total. Have a depth greater than 32 nodes. Have a parent node with more than 60 child nodes." - web.dev/dom-size/#recommendations
Ich finde einer der größeren Vorteile ist async laden der Scripte - Sie funktionieren unabhängig davon ob davor schon was geladen wurde oder nicht, das heißt ich muss nicht erst auf jQuery warten bis mein Slider oder was auch immer funktioniert. Was auch so interessant ist, da man unter anderem auch dank http/2, nicht mehr alles in ein file mergen muss. Und dadurch eben Scripte dann sofort funktionieren wenn sie geladen wurden. Gemessen hab ichs jetzt noch nicht, aber gefühlt funktioniert die Webseite deutlich früher.
Hey, weißt du noch wo die Sache mit dem forEach.call() auf dem Array-Literal her hast? Bzw könntest du das kurz näher ausführen woher das kommt? Hab gesucht und irgendwie nur unschlüssige/widersprüchliche Antworten gefunden (Googlen will gelernt sein) . Grüße
Hi, deine Videos sind gut gemacht. Schau mir diese gerne an. Auch wenn JavaScript ausreicht, ich mag JQuery irgendwie. Das ganze getElement geraffel ist mir durchaus geläufig. Ich bin damit quasi aufgewachsen ;-). Aber irgendwie zu viel Text. Daher finde ich $("#irgendwas").sonstwas gar nicht so schlecht. Gut ob meine Seiten nun 3 ms oder 10 ms laden darauf kommt es bei mir auch nicht an, da ich überwiegend APIs programmiere und das Frontend relativ schnell und einfach zusammengebaut werden soll. Ich setze auf insgesamt 2 Frameworks, da ich auch nicht wirklich Design kann. Das Backend ist kein Problem aber das Frontend :D. Mach weiter so hab auch mein Abo dagelassen. ************Idee für ein weiteres Video ************ ich würde mich freuen wenn du einen Wizzard einbinden könntest. Also quasi kein Bild Slider sondern ein Form Slider. Danke 👍👏 (mit Animation raus und rein bzw. Anzeige schritt 1 von 4)
Gutes Video, auch wenn nichtmal ein Bruchteil der Jquery Möglichkeiten abgedeckt worden ist. Aber da die gezeigten Funktionalitäten den Großteil bei einfachen Webseiten ausmachen, sehr treffend. Auf der anderen Seite kann man aber auch noch sagen, dass wenn man sich bei einfachen Webseiten, wegen der Einfachheit, Jquery sparen kann, man auch Jquery verwenden kann, denn es macht ja wohl keinen merklichen Unterschied, ob man 5-6 Click-Events mit Jquery oder native JS ausführt. Ein paar Pro-Argumente für Jquery: - schnelleres Arbeiten - schlankerer/übersichtlicherer Code - Jquery wird fast überall verwendet, daher ist es von Vorteil, sich darin auszukennen - Browserkompatibilität (hier Versionsabhänig und Umsetzungen durch Zusatztools für ältere Browser von neuen allg. HTML/CSS Features) - Es gibt viele tolle Plugins und andere Libaries, die Jquery als Grundlage verwenden. Contra: - etwas Performance Verlust Aber im Jahre 2018 schafft es jedes Telefon ohne merklichen Geschwindigkeitsverlust JS über Jquery auszuführen. Und die
Absolut! Da bin ich ganz deiner Meinung. Sage ja auch am Ende das jQuery seine Daseinsberechtigung hat und auch nicht verlieren wird. Auch die $ function ist viel viel Umfangreicher als hier gezeigt. Sollte eigentlich nur darum gehen das es immer besser ist auch zu wissen wie es ohne geht und solche 0815 Aktionen wie Selektieren usw. brauchen einfach kein jQuery. Bei größeren Projekten wird man eh nicht um zu kommen :D nutze es da ja auch weil es dann viel Arbeit sparrt.
Also ich bin der Meinung das man jQuery nicht mehr braucht, früher hatte das vielleicht sein Daseinsberechtigung, aber mittlerweile kann man die meisten Sachen ohne Jquery lösen und das mit nahezu keinem Aufwand bis gar kein Aufwand. Man sollte sein Zeit nicht mit jQuery verschwenden sondern viel besser Javascript lernen und sich dann auf VueJs/Angular/React konzentrieren.
@MkaY Das würde ich nicht so sagen. Abgesehen davon, dass deine genannten Sachen eher Frameworks sind als Libaries, und damit ein anderes Ziel anstreben, wird Jquery sehr viel verwendet. Möchte man im Webdesign/Webentwicklung tätig sein, so kommt man nicht drum herum, sich zumindest etwas mit Jquery auszukennen. Auch wenn man selbst nicht dazu greifen möchte, es kann durchaus passieren, dass einem Jquery in einem Projekt vorgesetzt wird. Dann kannste auch nicht sagen: "Ich finde jQuery doof, ich will lieber Angular nehmen". Und wie gesagt: Es sind zwei verschiedene Welten. Abgesehen davon ist Jquery schnell zu lernen. Nach 2-3 Wochen hat man die Grundlagen drin und die sollte man sich zumindest geben. Ein Js Framework kann man dann immer noch lernen^^ P.S. Bezüglich deines ersten Satzes: Welche Sachen konnte man denn bitte nur mit Jquery lösen? Ergibt für mich irgendwie keinen Sinn^^
Angular war auch nicht als jQuery ersatz gemeint, sondern als nächster Schritt nach Javascript (bzw. ES6). Grundlagen von jQuery kennen sollte man, aber sich darauf konzentrieren bzw. wissen wie man es mit Javascript umsetzt, anstatt sich nur auf jQuery zu konzentrieren.
[].forEach.call() finde ich nicht so gut. Viel besser ist: const listElements = document.querySelectorAll("ul li"); Array.from(listElements).forEach(el => el.addEventListener(...)); Array.from() macht aus der HTMLCollection ein normales JS Array, alternativ geht auch Spread: [...listElements].forEach(...) aber insbesondere für lesbaren Code und gemeinsame Projekte ist etwas klares wie Array.from() besser.
+|xPAiinZ| nutze ich nur nicht auf TH-cam ;) schreibe nur es6. Leider ist es hier schwer einfach ES6 zu nutzen, wenn man nicht in jedem Video erklärt wie man es benutzt. Da hier vor allem Anfänger unterwegs sind, würde das bei jedem Video 10 Minuten Erklärung bedeuten wie man überhaut diese Version nutzt.
Eine neue Version von JavaScript die seit 2015 von Browsern immer mehr unterstützt wird. Es handelt sich bei ES6 um den ECMAScript 6 - Standard, der auch teils Typescript von Microsoft als Grundlage dient. Genau genommen spricht man von JS ES6+, weil wir schon bei ES8 oder 9 angekommen sind, was aber nur kleine Änderungen an der großen Revolution ES6 sind, weshalb diese nicht einzel benannt werden.
document.querySelectorAll(...).forEach(...) wäre auch möglich. Da querySelectorAll ein Array mit den Dom Nodes als Rückgabewert hat und es demnach überflüssig ist den forEach an ein leeres Array zu hängen. So kann man sich auch das .call sparen.
Edit: Damit deine Herangehensweise funktioniert, musst du die Methode ans document Objekt binden, d.h. const $ = document.querySelectorAll.bind(document) funktioniert auch.
![Toggle Switch einfach bauen und nutzen?! Kein Problem! [TUTORIAL]](http://i.ytimg.com/vi/2zSJkuAUx5w/mqdefault.jpg)
![Toggle Switch einfach bauen und nutzen?! Kein Problem! [TUTORIAL]](/img/tr.png)
![How to hide a fixed Header? Einfacher als man denkt! [Tutorial]](http://i.ytimg.com/vi/kBGZcnP0Iok/mqdefault.jpg)
![😍 5 hammer JavaScript Funktionen die man kennen sollte! 👍 [TUTORIAL]](/img/n.gif)
Super Video. Ich bin nutze sehr oft JQuery aus Bequemlichkeit und würde mich sehr freuen, wenn du mehr solcher Videos machst. Gerne um Sachen wie slidein, show, hide, etc aus JQuery einfach in Javascript umzusetzen.
Die Sachen mit slidein, show, hide kannst du einfach mit einer css Definition umsetzen und mit JS die Klassen vergeben. hide/show machst du entweder mit visible, display oder opacity (je nachdem wie es sich auswirken soll), dazu noch transition für die Animation und fertig. slidein kannst du mit margin und width/height + transition für die Animation umsetzen. Oder für die Animation Keyframes verwenden.
Ich glaube das ist sogar schon mehrfach in seinen Videos vorgekommen^^
Wenn du danach gehst, hätte er sich die komplette erste Hälfte des Videos schenken können. Denn Selektieren gehört auch zu den Basics und ist auch schon mehrfach vorgekommen.
Sehr hilfreiches Video für mich als Einsteiger!
13:10 da muss ich dir leider widersprechen, Sizzle (Selektor-Lib, welche von jQuery benutzt wird) kann schneller alle Elemente mit dem angegebenen Selektor sammeln.
Test mit jeweils 1000 Selektionen
Sizzle/jQuery: 2ms
document.querySelectorAll: 5ms
ich bin noch ein echter Anfänger, jedoch die Erklärung super easy und sofort verstanden. Dafür dass in meinem Zeugnis ne 5 für Abschlussprüfung steht, war das wohl eine sehr gute Erklärung, danke man.
Freut mich wenn dir das Video helfen konnte :)
@9:00 Servus, ich bin neu in der Webentwicklung. Wie heisst dieser Editor, wo man den links "Click mich"-Button erstellt und dann sofort rechts oben den Button angezeigt bekommen und beim draufklicken dann unten rechts das Debugging stattfindet? Das ist ja krass interaktiv!
Sehr cooles Video! Für mich als (nicht mehr ganz) Einsteiger ist die Vortragsgeschwindigkeit so an der Obergrenze :) (Ihr Coder seit wohl immer auf Kaffee oder wie??)
Aber das passt schon, man kann ja anhalten wenns Hirn mal stehen geblieben ist...
Hab jQuery eigentlich immer als Bequemlichkeit benutzt, nie in großen Projekten, mache JS nur so hobbymäßig.
Die Verlockung ist groß, wenn man diese rel. kurzen $(dingens) verwenden kann und nicht eeeewig lange getElemenById, Class usw. Aber genau so wie du im Viedo sagst ist das alles Makulatur bei kleinen Sachen. Würde mal gern einen Benchmark sehen, wo 10.000 divs mit jQuery vs. JS abgesucht werden, was da die Performance so sagt ;)
Weiter so!
Performance ist bei plain JS sicher ein vielfaches schneller aber 10000 divs sollte man nicht haben ;) "Have more than 1,500 nodes total.
Have a depth greater than 32 nodes.
Have a parent node with more than 60 child nodes." - web.dev/dom-size/#recommendations
Ich finde einer der größeren Vorteile ist async laden der Scripte - Sie funktionieren unabhängig davon ob davor schon was geladen wurde oder nicht, das heißt ich muss nicht erst auf jQuery warten bis mein Slider oder was auch immer funktioniert.
Was auch so interessant ist, da man unter anderem auch dank http/2, nicht mehr alles in ein file mergen muss. Und dadurch eben Scripte dann sofort funktionieren wenn sie geladen wurden.
Gemessen hab ichs jetzt noch nicht, aber gefühlt funktioniert die Webseite deutlich früher.
Brauch ich immer IDs für JS bzw. jQuery oder geht es auch mit Klassen? :)
Hey, weißt du noch wo die Sache mit dem forEach.call() auf dem Array-Literal her hast? Bzw könntest du das kurz näher ausführen woher das kommt? Hab gesucht und irgendwie nur unschlüssige/widersprüchliche Antworten gefunden (Googlen will gelernt sein) . Grüße
Hi, deine Videos sind gut gemacht. Schau mir diese gerne an. Auch wenn JavaScript ausreicht, ich mag JQuery irgendwie. Das ganze getElement geraffel ist mir durchaus geläufig. Ich bin damit quasi aufgewachsen ;-). Aber irgendwie zu viel Text. Daher finde ich $("#irgendwas").sonstwas gar nicht so schlecht. Gut ob meine Seiten nun 3 ms oder 10 ms laden darauf kommt es bei mir auch nicht an, da ich überwiegend APIs programmiere und das Frontend relativ schnell und einfach zusammengebaut werden soll. Ich setze auf insgesamt 2 Frameworks, da ich auch nicht wirklich Design kann. Das Backend ist kein Problem aber das Frontend :D. Mach weiter so hab auch mein Abo dagelassen. ************Idee für ein weiteres Video ************ ich würde mich freuen wenn du einen Wizzard einbinden könntest. Also quasi kein Bild Slider sondern ein Form Slider. Danke 👍👏 (mit Animation raus und rein bzw. Anzeige schritt 1 von 4)
Sehr geil. Danke!
Freut mich wenn es gefällt :P
Hi Mega vid! Ich such gerade vergebens nach Jens' Kommentar
Gutes Video, auch wenn nichtmal ein Bruchteil der Jquery Möglichkeiten abgedeckt worden ist. Aber da die gezeigten Funktionalitäten den Großteil bei einfachen Webseiten ausmachen, sehr treffend.
Auf der anderen Seite kann man aber auch noch sagen, dass wenn man sich bei einfachen Webseiten, wegen der Einfachheit, Jquery sparen kann, man auch Jquery verwenden kann, denn es macht ja wohl keinen merklichen Unterschied, ob man 5-6 Click-Events mit Jquery oder native JS ausführt.
Ein paar Pro-Argumente für Jquery:
- schnelleres Arbeiten
- schlankerer/übersichtlicherer Code
- Jquery wird fast überall verwendet, daher ist es von Vorteil, sich darin auszukennen
- Browserkompatibilität (hier Versionsabhänig und Umsetzungen durch Zusatztools für ältere Browser von neuen allg. HTML/CSS Features)
- Es gibt viele tolle Plugins und andere Libaries, die Jquery als Grundlage verwenden.
Contra:
- etwas Performance Verlust
Aber im Jahre 2018 schafft es jedes Telefon ohne merklichen Geschwindigkeitsverlust JS über Jquery auszuführen. Und die
Absolut! Da bin ich ganz deiner Meinung. Sage ja auch am Ende das jQuery seine Daseinsberechtigung hat und auch nicht verlieren wird. Auch die $ function ist viel viel Umfangreicher als hier gezeigt. Sollte eigentlich nur darum gehen das es immer besser ist auch zu wissen wie es ohne geht und solche 0815 Aktionen wie Selektieren usw. brauchen einfach kein jQuery. Bei größeren Projekten wird man eh nicht um zu kommen :D nutze es da ja auch weil es dann viel Arbeit sparrt.
Also ich bin der Meinung das man jQuery nicht mehr braucht, früher hatte das vielleicht sein Daseinsberechtigung, aber mittlerweile kann man die meisten Sachen ohne Jquery lösen und das mit nahezu keinem Aufwand bis gar kein Aufwand.
Man sollte sein Zeit nicht mit jQuery verschwenden sondern viel besser Javascript lernen und sich dann auf VueJs/Angular/React konzentrieren.
@MkaY
Das würde ich nicht so sagen. Abgesehen davon, dass deine genannten Sachen eher Frameworks sind als Libaries, und damit ein anderes Ziel anstreben, wird Jquery sehr viel verwendet. Möchte man im Webdesign/Webentwicklung tätig sein, so kommt man nicht drum herum, sich zumindest etwas mit Jquery auszukennen. Auch wenn man selbst nicht dazu greifen möchte, es kann durchaus passieren, dass einem Jquery in einem Projekt vorgesetzt wird.
Dann kannste auch nicht sagen: "Ich finde jQuery doof, ich will lieber Angular nehmen". Und wie gesagt: Es sind zwei verschiedene Welten.
Abgesehen davon ist Jquery schnell zu lernen. Nach 2-3 Wochen hat man die Grundlagen drin und die sollte man sich zumindest geben.
Ein Js Framework kann man dann immer noch lernen^^
P.S.
Bezüglich deines ersten Satzes:
Welche Sachen konnte man denn bitte nur mit Jquery lösen? Ergibt für mich irgendwie keinen Sinn^^
Angular war auch nicht als jQuery ersatz gemeint, sondern als nächster Schritt nach Javascript (bzw. ES6).
Grundlagen von jQuery kennen sollte man, aber sich darauf konzentrieren bzw. wissen wie man es mit Javascript umsetzt, anstatt sich nur auf jQuery zu konzentrieren.
[].forEach.call() finde ich nicht so gut.
Viel besser ist:
const listElements = document.querySelectorAll("ul li");
Array.from(listElements).forEach(el => el.addEventListener(...));
Array.from() macht aus der HTMLCollection ein normales JS Array, alternativ geht auch Spread:
[...listElements].forEach(...)
aber insbesondere für lesbaren Code und gemeinsame Projekte ist etwas klares wie Array.from() besser.
Warum nutzt du nie ES6?
+|xPAiinZ| nutze ich nur nicht auf TH-cam ;) schreibe nur es6. Leider ist es hier schwer einfach ES6 zu nutzen, wenn man nicht in jedem Video erklärt wie man es benutzt. Da hier vor allem Anfänger unterwegs sind, würde das bei jedem Video 10 Minuten Erklärung bedeuten wie man überhaut diese Version nutzt.
Was ist es6?
Eine neue Version von JavaScript die seit 2015 von Browsern immer mehr unterstützt wird. Es handelt sich bei ES6 um den ECMAScript 6 - Standard, der auch teils Typescript von Microsoft als Grundlage dient. Genau genommen spricht man von JS ES6+, weil wir schon bei ES8 oder 9 angekommen sind, was aber nur kleine Änderungen an der großen Revolution ES6 sind, weshalb diese nicht einzel benannt werden.
document.querySelectorAll(...).forEach(...) wäre auch möglich. Da querySelectorAll ein Array mit den Dom Nodes als Rückgabewert hat und es demnach überflüssig ist den forEach an ein leeres Array zu hängen. So kann man sich auch das .call sparen.
Dieses "let" ist doch "ES6" :D (www.w3schools.com/js/js_es6.asp)
"Raute" != $ xD
xD stimmt haha ist mir erst jetzt aufgefallen das ich mich da versprochen habe
Unleashed Design kurz danach hast du es ja aber wieder richtig gesagt :D
Wenn ich diese Dollarzeichen sehe... bekomme ich einfach die Krise ..
dann solltest du nie Php angucken :P haha xD kann dich aber gut verstehen.
var $ = document.querySelectorAll
Sollte auch gehen.
Tut es nicht, sondern
const $ = q => document.querySelector(q)
Das const und die Arrow-Function sind optional
Edit: Damit deine Herangehensweise funktioniert, musst du die Methode ans document Objekt binden, d.h.
const $ = document.querySelectorAll.bind(document)
funktioniert auch.
Bin ich der einzige, der die alte Intro Musik vermisst? :>
Für gut befunden.