JavaScript update
andy
parent
3f0d3b7424
commit
789699298c
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Die HTML Struktur in Webseiten">
|
||||
<title>JavaScript & jQery</title>
|
||||
<link rel="stylesheet" href="../css/reset.css">
|
||||
<link rel="stylesheet" href="../css/code.css">
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/flex.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="wrapper">
|
||||
<a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li><a href="float.html">Float</a></li>
|
||||
<li><a href="position.html">Position</a></li>
|
||||
<li><a href="flexbox.html">Flexbox</a></li>
|
||||
<li><a href="grid.html">Grid</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main role="main" class="wrapper">
|
||||
<h1>JavaScript & jQery</h1>
|
||||
<article>
|
||||
<h2>simple jQery</h2>
|
||||
<p>jQuery (auch jQuery Core) ist eine freie JavaScript-Bibliothek, die Funktionen zur <a href="https://de.wikipedia.org/wiki/Document_Object_Model">DOM-Navigation und -Manipulation</a> zur Verfügung stellt.</p>
|
||||
<p></p>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. </p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Einbinden von jQuery</h2>
|
||||
<pre class="line-numbers language-html">
|
||||
<code class="language-html"></footer>
|
||||
<script src="../js/jquery-3.4.1.min.js"></script>
|
||||
</body>
|
||||
</code>
|
||||
</pre>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Einfache jQuery - Befehle</h2>
|
||||
<button id="aus">Ausblenden</button>
|
||||
<button id="ein">Einblenden</button>
|
||||
<button id="anim">Animation</button>
|
||||
|
||||
|
||||
<div class="bigbox">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Ein und Ausblenden mit jQuery</h2>
|
||||
<pre class="line-numbers language-js">
|
||||
<code class="language-js">$( document ).ready(function() {
|
||||
//Konsolen-Test
|
||||
console.log( "jQuery ist bereit!" );
|
||||
//Ausblenden / Einblenden
|
||||
$("#aus").click(function(){
|
||||
$(".box").fadeOut( 1500 );
|
||||
});
|
||||
$("#ein").click(function(){
|
||||
$(".box").show();
|
||||
});
|
||||
});
|
||||
</code>
|
||||
</pre>
|
||||
</article>
|
||||
</pre>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrapper">
|
||||
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../js/code.js"></script>
|
||||
<script src="../js/jquery-3.4.1.min.js"></script>
|
||||
<script src="../js/jQuery.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Die HTML Struktur in Webseiten">
|
||||
<title>JavaScript & jQery</title>
|
||||
<link rel="stylesheet" href="../css/reset.css">
|
||||
<link rel="stylesheet" href="../css/code.css">
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/flex.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="wrapper">
|
||||
<a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li><a href="float.html">Float</a></li>
|
||||
<li><a href="position.html">Position</a></li>
|
||||
<li><a href="flexbox.html">Flexbox</a></li>
|
||||
<li><a href="grid.html">Grid</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main role="main" class="wrapper">
|
||||
<h1>Javascript</h1>
|
||||
<article>
|
||||
<h2>Javascript == Vanilla.js</h2>
|
||||
<p>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.</p>
|
||||
<p>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. </p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Einbinden von Javascript</h2>
|
||||
<pre class="line-numbers language-html">
|
||||
<code class="language-html"></footer>
|
||||
<script src="../js/vanilla.js"></script>
|
||||
</body>
|
||||
</code>
|
||||
</pre>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Einfache JavaScript - Befehle</h2>
|
||||
<button id="aus">Ausblenden</button>
|
||||
<button id="ein">Einblenden</button>
|
||||
|
||||
|
||||
|
||||
<div class="bigbox">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h2>JavaScript Code Beispiel</h2>
|
||||
<pre class="line-numbers language-js">
|
||||
<code class="language-js">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);
|
||||
</code>
|
||||
</pre>
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrapper">
|
||||
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../js/code.js"></script>
|
||||
<script src="../js/vanilla.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -129,6 +129,12 @@
|
|||
<li><a href="http://vanilla-js.com/)">Vanilla.js</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Interne Links</h3>
|
||||
<ul>
|
||||
<li><a href="html/vanilla.html">Pure JavaScript</a></li>
|
||||
<li><a href="html/jquery.html"></a>jQuery</li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
// Ist jQery bereit?.
|
||||
$( document ).ready(function() {
|
||||
|
||||
//Konsolen-Test
|
||||
console.log( "jQuery ist bereit!" );
|
||||
|
||||
//Ausblenden / Einblenden
|
||||
$("#aus").click(function(){
|
||||
$(".box").fadeOut( 1500 );
|
||||
});
|
||||
$("#ein").click(function(){
|
||||
$(".box").show();
|
||||
});
|
||||
|
||||
//Animieren
|
||||
$("#anim").click(function(){
|
||||
$(".box").animate({
|
||||
marginLeft: "150px",
|
||||
opacity: 0.5
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,14 @@
|
|||
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);
|
||||
Loading…
Reference in New Issue