From 789699298c64316cba285f0c783376403ed2acef Mon Sep 17 00:00:00 2001 From: andy Date: Tue, 24 Mar 2020 13:08:14 +0100 Subject: [PATCH] JavaScript update --- README.md | 4 ++ html/jquery.html | 91 +++++++++++++++++++++++++++++++++++++++++ html/vanilla.html | 92 ++++++++++++++++++++++++++++++++++++++++++ index.html | 6 +++ js/jQuery.js | 23 +++++++++++ js/jquery-3.4.1.min.js | 2 + js/vanilla.js | 14 +++++++ 7 files changed, 232 insertions(+) create mode 100644 html/jquery.html create mode 100644 html/vanilla.html create mode 100644 js/jQuery.js create mode 100644 js/jquery-3.4.1.min.js create mode 100644 js/vanilla.js diff --git a/README.md b/README.md index d2f7ae3..f4251e0 100644 --- a/README.md +++ b/README.md @@ -80,3 +80,7 @@ * [Angular](https://angularjs.org/) * [Vue.js](https://vuejs.org/) * [Vanilla.js](http://vanilla-js.com/) + +### Interne Links +* [Pure JavaScript](html/vanilla.html) +* [jQuery](html/jquery.html) diff --git a/html/jquery.html b/html/jquery.html new file mode 100644 index 0000000..b72cac4 --- /dev/null +++ b/html/jquery.html @@ -0,0 +1,91 @@ + + + + + + + + JavaScript & jQery + + + + + + + +
+
+ Mein logo + +
+
+ +
+

JavaScript & jQery

+
+

simple jQery

+

jQuery (auch jQuery Core) ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt.

+

jQuery ist die meistverwendete JavaScript-Bibliothek. Jede zweite Website und 70 % der 10.000 meistbesuchten Websites nutzen jQuery. jQuery wird in vielen Content-Management-Systemen und Webframeworks bereits mitgeliefert.

+ +
+
+

Einbinden von jQuery

+ 
+</footer>
+    <script src="../js/jquery-3.4.1.min.js"></script>
+</body>
+
+
+
+
+

Einfache jQuery - Befehle

+ + + + + +
+
+
+
+
+

Ein und Ausblenden mit jQuery

+ 
+$( document ).ready(function() {
+    //Konsolen-Test
+        console.log( "jQuery ist bereit!" );
+    //Ausblenden / Einblenden
+        $("#aus").click(function(){
+            $(".box").fadeOut( 1500 );
+        });
+        $("#ein").click(function(){
+            $(".box").show();
+        });
+    });
+
+
+
+ + + +
+ + + + + + + + + \ No newline at end of file diff --git a/html/vanilla.html b/html/vanilla.html new file mode 100644 index 0000000..e4a43ef --- /dev/null +++ b/html/vanilla.html @@ -0,0 +1,92 @@ + + + + + + + + JavaScript & jQery + + + + + + + +
+
+ Mein logo + +
+
+ +
+

Javascript

+
+

Javascript == Vanilla.js

+

Javascript bringt Interaktion in statische HTML-Seiten und reduziert den aufwändigen Transfer zwischen Benutzer, Browser und Server. Scripte ändern den Inhalt einer Webseite, nachdem sie in den Browser geladen wurde.

+

JavaScript ist eine leichtgewichtige, interpretierte Sprache. JavaScript wird auch in vielen Umgebungen außerhalb des Browsers wie zum Beispiel Node.js, Apache CouchDB und Adobe Acrobat eingesetzt.

+ +
+
+

Einbinden von Javascript

+ 
+</footer>
+    <script src="../js/vanilla.js"></script>
+</body>
+
+
+
+
+

Einfache JavaScript - Befehle

+ + + + + +
+
+
+
+
+

JavaScript Code Beispiel

+ 
+var greenbox = document.querySelector('.box');
+    document.addEventListener('click', function (event) {
+    
+        if (event.target.matches('#ein')) {
+            greenbox.removeAttribute('hidden');
+            greenbox.classList.add('fadeInDown');
+        }
+    
+        if (event.target.matches('#aus')) {
+            greenbox.setAttribute('hidden', 'true');
+            greenbox.classList.remove('fadeInDown');
+        }
+    
+    }, false);
+
+
+
+ + +
+ + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index d734a83..3df8e68 100644 --- a/index.html +++ b/index.html @@ -129,6 +129,12 @@
  • Vanilla.js
    • +

    Interne Links

    + +