Section 1
Preview this deck
Case Sensitive
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
6 years ago
Date created
Mar 1, 2020
Cards (209)
Section 1
(50 cards)
Case Sensitive
• All identifiers are case sensitive. • The variables lastName and lastname, are two different variables.
Keywords
• JavaScript keywords are used to identify actions to be performed. • The var keyword tells the browser to create variables
Arrays
1 Variable with multiple, ordered values
Inline Code
<button type="button" onclick="alert('Hello inline')">Click me</button> • JavaScript as value of an attribute • Deprecated • Bad Practice
syntax
set of rules, how JavaScript programs are constructed eg. JavaScript statements are separated by semicolons
Array Properties
var numEntries = entries.length;
Program
• A computer program is a list of "instructions" to be "executed" by the computer. • In a programming language, these program instructions are called statements.
Variables
• In a programming language, variables are used to store data values. • JavaScript uses the "var" keyword to declare variables. • An equal sign is used to assign values to variables • example: var x; x = 6;´ • JavaScript does not interpret VAR or Var as the keyword var.
innerHTML
Writing into an HTML element • The id attribute defines the HTML element. The innerHTML property defines the HTML content
Assignment Operators
• JavaScript uses an assignment operator ( = ) to assign values to variables Operator Example Same As = x = y x = y += x += y x = x + y -= x -= y x = x - y x= x x= y x = x * y /= x /= y x = x / y %= x %= y x = x % y
Identifiers
• Identifiers are unique names. • In JavaScript, identifiers are used to name variables (and keywords, and functions, and labels). • The rules for legal names are much the same in most programming languages. • In JavaScript, the first character must be a letter, an underscore (_), or a dollar sign ($). • Subsequent characters may be letters, digits, underscores, or dollar signs. - Numbers are not allowed as the first character. This way JavaScript can easily distinguish identifiers from numbers.
Internal code block
<script> var x="Hello intern"; alert(x) </script> • Code in context of <script> tag • Location (Head/Body) affects behavior • Will executed automatically during website rendering
Local scopes
• Variables declared within a function, become LOCAL to the function • Local variables have local scope: They can only be accessed within the function
External JavaScript code
<html> <head> <script src="mycode.js"></script> <head> </html> • JS-Code defined in an dedicated file (code.js) • Loaded by <script> tag: Filename as value of src-attribute • Best Practice • You can place an external script reference in <head> or <body> as you like. • The script will behave as if it was located exactly where the <script> tag is located.
JavaScript
JavaScript to program the behavior of web pages - programming language
Components of a program/Statements:
• Variables • Operators • Control Structures • Values • Expressions • Keywords • Comments
External JavaScript Advantages
- It separates HTML and code - It makes HTML and JavaScript easier to read and maintain - Cached JavaScript files can speed up page loads - To add several script files to one page - use several script tags
External References
External scripts can be referenced with a full URL or with a path relative to the current web page. Example <script src="http://www.w3schools.com/js/myScript1.js"></script>
Numbers
written with or without decimals
Integration
Include external code Internal code block Inline Code
Comparison Operators
== equal to === equal value and equal type != not equal !== not equal value or not equal type > greater than < less than >= greater than or equal to <= less than or equal to ? ternary operator
console.log()
Writing into the browser console
Arithmetic Operators
• JavaScript uses arithmetic operators ( + - x / ) to compute values ((5 + 6) x 10) + Addition - Subtraction *x Multiplication / Division % Modulus ++ Increment -- Decrement
What can JavaScript Events Do?
Event handlers can be used to handle, and verify, user input, user actions, and browser actions: • Things that should be done every time a page loads • Things that should be done when the page is closed • Action that should be performed when a user clicks a button • Content that should be verified when a user inputs data • And more ... Many different methods can be used to let JavaScript work with events: • HTML event attributes can execute JavaScript code directly • HTML event attributes can call JavaScript functions • You can assign your own event handler functions to HTML elements • You can prevent events from being sent or being handled • And more ...
window.alert().
Writing into an alert box
The Lifetime of JavaScript Variables
• The lifetime of a JavaScript variable starts when it is declared. • Local variables are deleted when the function is completed. • Global variables are deleted when you close the page.
Integration (Anti-pattern)
If the src-Attribute of the <script>-Tag is defined, internal Code within context of that tag will be ignored!
Global JavaScript Variables
• A variable declared outside a function, becomes GLOBAL. • A global variable has global scope: All scripts and functions on a web page can access it.
Data Types
• JavaScript is a typeless programming language - data type of a variable is dynamic and derived by the value - will be defined during execution, not during programming • JS knows several Data Types - Number > Arithmetic, Math - Boolean > Decision Making - String > Text - Array > Storing multiple values in 1 variable - Object > Storing multiple names values in 1 variable
Components (Functions)
• Signature - name - parameters • Body - Statements -- Return-Statement
Events
HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events.
Character Set
• uses the Unicode character set. • Unicode covers (almost) all the characters, punctuations, and symbols in the world.
Functions with Attention
• Each functions has one own local scope - Variables defined within a function are local variables - Variables without a local definition are global variables - Global Variables are defined automatically, if they are called in a function context
Comments
• Not all JavaScript statements are "executed". • Code after double slashes // or between /x(sternchen) and x(sternchen)/ is treated as a comment. • Comments are ignored, and will not be executed
document.write()
Writing into the HTML output • Using document.write() after an HTML document is fully loaded, will delete all existing HTML
Functions
• Group of statements • ...which represents a sub-program... • ... that can started multiply times... • ... with different values => Don't rewrite the same code again & again & again....!!
Common HTML Events
Event Description onchange An HTML element has been changed onclick The user clicks an HTML element onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key onload The browser has finished loading the page
Array definition
var entries = ['Studieninteressierte', 'Studierende', 'Wirtschaft', 'Presse']
Bitwise Operators
Operator Description Example Same as Result Decimal & AND 5 & 1 0101 & 0001 0001 1 | OR 5 | 1 0101 | 0001 0101 5 ~ NOT ~ 5 ~0101 1010 10 ^ XOR 5 ^ 1 0101 ^ 0001 0100 4 << Zero fill left shift 5 << 1 0101 << 1 1010 10 >> Signed right shift 5 >> 1 0101 >> 1 0010 2 >>> Zero fill right shift 5 >>> 1 0101 >>> 1 0010 2
joining multiple words into one variable name
- Hyphens: first-name, last-name, master-card, inter-city (not in JavaScript) - Underscore: first_name, last_name, master_card, inter_city. - Camel Case: -- normally: FirstName, LastName, MasterCard, InterCity -- in JS mostly: firstName, lastName, masterCard, interCity
Accessing Object Properties
objectName.propertyName objectName["propertyName"] person.lastName; person["lastName"];
Operators
• used to modify variables • The behavior depends on the data types of the variable(s) - Data Type = Number: var x = 1; var y = 10*x; - Data Type = String: var txt1 = "HS"; var text2 = "Hannover"; var text3 = text1 + " " + "Hannover"; - String + Number = String: var z = text2+x;
Scopes
• Scopes are sets of variables, functions and objects • Global, shared scope for all scripts of a website ( = Modularization) • Code Structures like Functions, Control Structures & Inline have local Spaces • Local spaces inherit from the global space
Values
Fixed values and variable values. Fixed values = literals Variable values = variables.
Strings
text, written within double or single quotes " " ' '
Logical Operators
Operator Description && logical and || logical or ! logical not
Expressions
• An expression is a combination of values, variables, and operators, which computes to a value. • The computation is called an evaluation: - eg 5 * 10 evaluates to 50:
Display Possibilities
window.alert() document.write() innerHTML console.log()
Type Operators
Operator Description typeof Returns the type of a variable instanceof Returns true if an object is an instance of an object type
Literals
Numbers Strings
Section 2
(50 cards)
window.location
location.href =URL des aktuellen Fensters location.hostname =Vollständiger Domainname des Servers location.pathname =Pfad und Dateiname der aktuellen Seite location.protocol =Name des verwendeten Protokolls location.port=Verwendeter Port
By ID
var myElement = document.getElementById("myID");
BOM Baum
window - document - location - screen - navigator
window.navigator
navigator.platform =Betriebssystem navigator.language =Sprache des Internetbrowsers navigator.cookieEnabled =Cookies vom Browser unterstützt? navigator.javaEnabled =Java vom Browser unterstützt? navigator.appName =Name des Browser (!Funktioniert nicht wie erwartet!)
Window-Objekt Eigenschaften
• window.screen • window.location • window.navigator
Changing HTML Elements
• Changing Attribute values • Changing innerHTML
Add HTML Element to page
document.getElementById("list") .appendChild(childNode);
Object Methods
function() {return this.firstName + " " + this.lastName;}
By Collections
var myForm = document.forms[0]; var myForm = document.forms["myFormId"];
Cookies Löschen
• Ein Cookie kann nicht explizit gelöscht werden - Cookie muss so verändert werden, dass der Browser es löscht - Ablaufdatum in der Vergangenheit zuweisen, sodass das Cookie ungültig wird document.cookie="username=Max;expires=Thu, 06 Oct 2000;path=/;secure";
Zeit-gesteuerte Funktionalität
window.setTimeout(function, ms) =Führe Funktion function nach ms Sekunden aus window.setInterval(function,ms) =setTimeout in Endlosschleife window.clearInterval (zeitvar) =Beendet die Timout-Schleife
BOM
Browser Object Model (BOM) - The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.
document object properties Single Values
Nur einmal auf der Webseite vorhanden document.head - <head> element of the webpage document.body - <body> element of the webpage document.title - <title> element of the webpage document.URL - URL to the webpage
Cookies Trennung
durch Semikolon document.cookie="user=Max;expieres=Thu, 06 Oct 2016;path=/;secure";
Das window-Objekt muss nicht zwingend, explizit angesteuert werden
windows.document.getElementById("id") = document.getElementById("id") window.alert("WWW3") = alert("WWW3")
Document Object Model (DOM)
With the HTML DOM, JavaScript can access and change all the elements of an HTML document. DOM is the connection between JavaScript and HTML!!!!
Cookies Definieren
expires =Gültigkeitsdatum domain =Beschränkt Gültigkeit des Cookies auf bestimmten Domain path =Beschränkt Gültigkeit des Cookies auf bestimmten Pfad secure =Nur lesbare bei sicherer Verbindung zum Server document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
Write new HTML to Page
document.getElementById("infoBlock") .innerHTML="<h1>H1-Headline</h1>";
Adding and Deleting Elements
• Create an HTML Element • Add HTML Element to page • Delete an HTML Element • Write new HTML to Page
DOM Summary
• How to find HTML elements by Id using DOM • How to read values of a HTML element • How to write new values to a HTML element, without reloading the webpage • That JavaScript is more designed for interactive, dynamic websites - .. and less for large computations with different numeric data types - Especially large and complex computations are jobs for the server
By Class Name
var myDivs = document.getElementByClassName("infoblock");
Object Access
person["firstName"]; person.firstName;
document object properties Collections
Kann mehrmals auf der Webseite vorhanden sein document.images - All <img> elements of the webpage document.forms - All <form> elements of the webpage document.scripts - All <scripts> elements of the webpage
DOM Possibilities
Finding HTML Elements Changing HTML Elements Adding and Deleting Elements
Array Method
var sortEntries = entries.Sort()
Document Object Model (DOM) Navigation
• Navigation always starts at the document object • The document objects has several - Properties - Methods ... to access the elements
document object methods
document - create - add - delete - change
Changing innerHTML
document.getElementById("infoBlock"). innerHTML="<h1>H1-Headline</h1>";
Cookies Ändern
• Ein Cookie wird aktualisiert, indem man es einfach neu erstellt - Entscheidend ist der übereinstimmende Cookie-Name document.cookie="username=Max"; document.cookie="username=Moritz";
Changing Attribute values
document.getElementById("diashow"). src="penguins.jpg";
DOM-Tree
Cookies Hilfsfunktionen
zum schreiben oder zum auslesen von Cookies
Rückblick: Document Object Model (DOM)
• DOM ist das Verbindungsstück zwischen JavaScript und HTML • Mittels DOM kann JavaScript-Code HTML-Elemente der Seite .... - ... hinzufügen, verändern, löschen und auslesen ... - ... ohne die Seite neuzuladen. • DOM interpretiert den HTML-Code einer Webseite als hierarchisches Modell von Objekten, wobei: - Die Seite selbst „Document" genannt wird - Alle HTML-Elemente und deren Inhalte zu Objekten/ Nodes werden - Objekt-Properties (Eigenschaften) gelesen und verändert werden können - Objekt-Methoden bereitgestellt werden
window.screen
screen.width =Bildschirmbreite screen.height =Bildschirmhöhe screen.colorDepth =Farbtiefe screen.pixelDepth =Pixeltiefe
By Tag Name
var myDivs = doument.getElementByTagName("div");
window.location - Navigation
• Das Location-Object ermöglicht es, aus JS andere Websites (Documents) aufzurufen a) Interne Documents über Aktualisierung von location.href - window.location.hrf="infoPage.html"; b) Externe Documents über location.assign window.location.assign("http://www.hs-hannover.de")
Cookies Lesen
document.cookie wird verwendet um a) Einzelne Cookies zu setzen b) Alle Cookies auszulesen var x = document.cookie; document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value; document.cookie="username=Max;cookie2=Whatever;cookie3=WWW3"
Finding HTML Elements
• By ID • By Tag Name • By Class Name • By CSS • By Collections
Delete an HTML Element
var list=document.getElementById("list"); list.removeChild(list.ChildNodes[0]);
DOM
• A web page is represented by 1 Document Object • This document object is the owner of all objects in a web page • The objects/elements of a website are defined by HTML-Tags • Hiearchies in HTML are mapped to the DOM-Tree of the page
By CSS
var myDivs = document.querySelectorAll("div.infoblock");
Object Properties
The name:values pairs (in JavaScript objects) are called properties. var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; Property Property Value firstName John lastName Doe age 50 eyeColor blue
Create an HTML Element
var childNode=document .createElement("li");
Window-Objekt
• Das Objekt window repräsentiert im JavaScript-Code das Browser-Fenster • Wie für ein Objekt üblich, hat auch das window-Objekt Eigenschaften und Methoden • Jedes weitere Objekt ist ein Kind (=Eigenschaft) vom window-Objekt • Jede globale Variable ist eine Eigenschaft des window-Objekt • Jede globale Funktion ist eine Methode des window-Objekt
Object
Object: • 1 Variable ... • ... with multiple, associated values ... • ... that are callable by a defined name
5 Node-Types
- 1 Document node - Every HTML Element ist an element node - Text inside HTML elements are text nodes - Attributes of HTML elements are attribute nodes - All Comments are comment nodes
Array Access
var firstEntry = entries[0]; var lastEntry = entries[numEntries-1]
window.history
• JavaScript kann auf die Browser-History zugreifen • Aus Datenschutzgründen darf JS nur vor- und zurücknavigieren - Auslesen des Browser-Verlaufs ist nicht erlaubt
Cookies
• Sind die einzige Möglichkeit für JS, Daten auf die Festplatte des Website-Besuchers zu schreiben. • Können ausschließlich textuell definiert sein. • Besitzen einen Namen und einen Wert - ... können daher als Variablen verstanden werden • Gehören immer zu einer bestimmten Website • Werden dem Webserver bei Anfragen automatisch mitübermittelt = document.cookie="username=Max";
window popups
window.confirm() window.prompt() alert()
Section 3
(50 cards)
Animationen und Effekte mit jQuery
• JavaScript hat derzeit keine Keyframe-Funktionalität • Mit JavaScript kann aber eine Keyframe-Animation nachgebaut werden - DOM für Zugriff auf Elemente der Animation - BOM für zeitlich-gesteuertes Update
Frameworks
D3 AngularJS ThreeJS React => Sammlung von häufig benötigtem Programmcode und Programmlogik
Exkurs: Continuous Delivery Network
• Umso länger der Weg, umso langsamer der Download • CDN Duplizierung von großen Dateien aus regionale Server • Download vom geographisch nächsten Server
Zeit verändern
• setDate() • setTime() • setDay() • setHours() • setMinutes() • ...
Eigene Animationen Animationen stoppen
stop() = Animation wird fortgesetzt stop(true,true) = Endresultat des aktuellen Effekts wird gerendert stop(true, false) stop(false,true) = Endresultat des aktuellen Effekts wird gerendert + Animation wird fortgesetzt => .stop(stopAll, goToEnd)
Eigene Animationen
• Individuelle Animationen werden in jQuery mit animate() erstellt • Der nächste Key-Frame wird in CSS beschrieben und der Methode übergeben • Für selektierte Elemente erstellt jQuery eine Animations-Queue • Dadurch werden die Animations-Schritte sukzessive ausgeführt
Ajax Einsatzszenarien
• Nachladen von Inhalten, die nicht auf dem Client, sondern auf einem Server liegen - Newsletter - Live-Ticker - Suchmaschinen - ...
Toggle-Actions
Toggle-Actions starten inverse Actions hide() AND show() = toggle() fadeIn() AND fadeOut() = fadeToggle() slideDown() AND slideUp() = slideToggle()
DOM mit jQuery HTML schreiben
text("WWW3") =Text des HTML-Elements wird zu "WWW3" html("<p>WWW3</p>") =Fügt HTML-Code in Element ein val("WWW3") =Weist dem Attribut „value" den Wert "WWW3" zu attr("href", "seite.html") =Weist dem Attribut „href" den Wert "seite.html" zu
Synchrone Ausführung
Website ist blockiert, bis Hintergrundoperation abgeschlossen ist
jQuery-Actions Formular-Events
submit change focus blur
jQuery-Actions Events on()
Für die Zuweisung von mehreren EventHandlern zu einem HTML-Element wird die jQuery-Methode on() benutzt.
Animationen und Effekte mit jQuery Chaining
• Wenn mehrere Effekte einem Element zugefügt werden sollen, sollte das Element nicht jedes Mal selektiert werden müssen • In jQuery, können Actions daher verkettet werden $("p1").css("color", "red").slideUp(2000).slideDown(2000);
Ajax Definition
Asynchronous JavaScript And XML • Basiert auf: - JavaScript + DOM zum Lesen/Schreiben von Website-Inhalten - JavaScript + XMLHttpRequest-Objekt zur Kommunikation mit dem Webserver • Ist ein Konzept, keine eigene Technologie
jQuery-Actions Document/WindowEvents
load resize scroll Unload
DOM mit jQuery HTML hinzufügen
.append("<li> NeuerEintrag</li>") =Fügt "<li> NeuerEintrag</li>" als letztes Child-Node ein .prepend("<li> NeuerEintrag</li>") =Fügt "<li> NeuerEintrag</li>" als erstes Child-Node ein .before("<li> NeuerEintrag</li>") =Fügt "<li> NeuerEintrag</li>" vor dem Element ein .after("<li> NeuerEintrag</li>") =Fügt "<li> NeuerEintrag</li>" nach dem Element ein über variablen können auch mehrere Elemente gleichzeitig hinzugefügt werden
Asynchrone Ausführung
Website kann weiterbenutzt werden, während im Hintergrund etwas geladen wird
jQuery Selektoren
$("img") =document.getElementsByTagName("img") $("#myid") =document.getElementById("myid") $("(sternchen)") =Selektiert alle Elemente $(".myclass") =Selektiert alle Elemente die zur Klasse "myclass" gehören $("[href]") =Selektiert alle Elemente, die ein href-Attribut haben $("ul li:first") =Ersten Liste-Eintrag, der ersten Liste $("ul li:gt(0)") =Alle Einträge der ersten Liste, außer dem ersten Eintrag
jQuery-Actions Events
jQuery ermöglicht einen vereinfachten Umang mit Event-Listenern Maus-Events Tastatur-Events Formular-Events Document/WindowEvents Event-Listener fungieren als Schnittstelle und benötigen eine Handler-Funktion, welche durch das Event gestartet werden soll
Event-Handler als Anonyme Funktion
• Funktionen haben Namen, damit sie an beliebigen Stellen aufgerufen werden können function handlerFunc() {alert("clicked");} $("'list").click(handlerFunc); • Wenn eine Funktion ausschließlich an einer Stelle aufgerufen wird, ist kein definierter Name erforderlich $("'list").click( function(){alert("clicked");} );
Document Ready Event
• Wenn jQuery HTML-Code bearbeitet, müssen die HTML-Elemente auch existieren - Die Webseite (=Document) muss vollständig geladen sein • Sobald die Website vollständig geladen ist, wird das „Document Ready Event" ausgelöst $(document).ready(function(){ // jQuery code });
jQuery Syntax
• jQuery ist eine JavaScript-Library, d.h. es wird nach wie vor JavaScript genutzt • Integrale Stärke von jQuery ist die stark vereinfachte Nutzung von JavaScript • Ein jQuery-Statment besteht immer aus: 1. Einem $-Zeichen um jQuery anzusteuern 2. Einem Selektor, um bestimmte HTML-Elemente zu finden <- Query 3. Einer Aktion, die für die selektieren Elemente durchgeführt werden soll $("#list").hide()
Keyframe-Animationen in Web Vorteile Nachteile
CSS3 Vorteile • Wenig Code Nachteile • Nicht explizit aufrufbar • Kein Feedback • Animation wird automatisch gestartet JavaScript Vorteile • Explizit aufrufbar • Parametrisierbar • Dynamisch generierbar Nachteile • Aufwendige Umsetzung (Viel Code) => CSS3 rein syntaktisch die bessere Lösung => Wenn Animation mit JavaScript umgesetzt werden soll Jquery nutzen!
Ajax
• Aktualisierung bestimmter Website-Bereiche durch den Server • Ohne die komplette Seite zu aktualisieren • Asynchrone Kommunikation mit dem Server
Zeit formatiert ausgeben
• toGMTString • toLocaleString • ...
Keyframe-Animationen in Web
Keyframe-Animationen werden von CSS3 unterstützt
HTTP Grundlagen
Ablauf eines Website-Aufrufs: 1. Browser sendet HTTP-Request an Server 2. Webserver kann HTTP-Request verarbeiten 3. Webserver schickt HTTP-Reponse zum Aufrufer
Grundlagen der Animation
Keyframe-Animation: • Keyframes beschreiben definierte Zustände der Szene zu bestimmten Zeitpunkten • Die Frames zwischen 2 Keyframes werden errechnet (interpoliert, approximiert)
jQuery Website-Integration
• Einbindung als externes JavaScript a) Quelle: Lokal (Eigener Server) <script src="jquery-3-1.1.min.js"></script> b) Quelle: Global (Continuous Delivery Network (CDN ) von Google oder Microsoft) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Ajax und JQuery
$(document).ready(function(){ $("button").click(function() { $("#demo").load("content.txt"); }); });
Code Library
• Sammlung von Code zu häufig verwendeten Abläufen bzw. Komponenten • Optimierte Effizienz und Nutzbarkeit von JavaScript
Framework D3.js
• Umfangreiche Funktionen zur interaktiven Informationsvisualisierung • Daten-getriebene Infografiken
XMLHttpRequest-Object: Requests
Ein HTTP-Request wird durch die Methoden open und send generiert var xhttp = new XMLHttpRequest(); xhttp.open("GET", "content.txt", true); xhttp.send();
Date-Objekt
• Unterschied zum Window-Object: Date-Objekt muss explizit angelegt werden! • Zeiten werden intern in Millisekunden berechnet var today=new Date(); var d1=new Date(3000) // 3000ms nach dem 01.01.1970 00:00:00 var d2=new Date(2015,5,6,8,10,30,15) //06.05.2015 10:30:15
jQuery-Actions Maus-Events
click dblclick mouseenter mouseleave hover
jQuery-Actions Tastatur-Events
keypress keydown keyup
XMLHttpRequest-Object
a) HTTP-Requests senden und b) HTTP-Responses empfangen und verarbeiten können
DOM mit jQuery HTML löschen
.remove() =Löscht Element (Einschließlich aller Kind-Elemente!) .empty() =Löscht alle Kind-Elemente des Elements
HTML JavaScript jQuery
<ul id="list" onclick="handlerFunc()"> document.getElementById("list") .addEventListener("click",handlerFunc); $("#list").click(handlerFunc);
jQuery-Actions
Events Effects HTML Ajax Traversing
jQuery Einordnung
• (Web-)Anwendungen lassen sich häufig in einzelne Module unterteilen • Viele Module werden immer wieder benötigt - ... und sollten im Idealfall nicht immer wieder neu gecodet werden. => Code Library
DOM mit jQuery HTML auslesen
text() =Liefert den Text eines HTML-Elements html() =Liefert Text+HTML zurück val() =Liefert Wert des Attributes „value" zurück attr("href") =Liefert Wert des Attributes „href" zurück
jQuery-Effekt-Actions
hide() =Versteckt das HTML-Element show() =Blendet das HTML-Element ein fadeIn() =Lässt HTML-Element langsam erscheinen fadeOut() =Lässt HTML-Element langsam verblassen fadeTo() =Lässt Element in einer definierten Opazität erscheinen slideDown() =Lässt Element aufklappen slideUp() =Lässt Element zuklappen
Asynchronous JavaScript And XML
• Ursprünglich: JavaScript lädt asynchron XML • Anstatt einfachem Text, wird i.d.R. ein strukturiertes Format wie XML genutzt • Änderungen: a) responseXML, anstatt responseText b) Verarbeitung eines XML-Documents, anstatt eines Textes - DOM als Werkzeug verwenden
jQuery Definition
• JavaScript-Library mit dem Ziel: - Umfangreiche bzw. komplexe Funktionalität - Einfach nutzbar zu machen • Beispiele: - HTML-Manipulation (DOM) - Ajax - Animationen & Effekte - HTML-Events
HTTP (Hyptertext Transfer Protocol)
• Standard-Protokoll zur Übertragung von Webseiten • Unterstützt verschiedene Anfragemethoden (GET, POST) • Beschreib Zustand über Statuscodes 200 Erfolgreiche Bearbeitung der Anfrage 404 Es wurde eine Ressource angefragt, die nicht existiert
Zeit abfragen
• getDate() • getTime() • getDay() • getHours() • getMinutes() • ...
Um Daten mit dem Server austauschen zu können, muss JavaScript...
... HTTP-Request absenden können ... Inhalte aus einen HTTP-Response auslesen können Für uns relevant: • HTTP-Request: - Statuscode - Aufrufmethode - Request-URI
XMLHttpRequest-Object: Response
• Während der Benutzung durchläuft das XMLHttpRequest-Objekt Zustände (readyStates) 0 Objekt angelegt, Request noch nicht gesendet 1 HTTP-Request an Server geschickt 2 HTTP-Request bei Server angekommen 3 Verarbeitung ( z.B. Download-Prozess) 4 Fertig, Transaktion vollständig => Angefragter Inhalt kann erst gelesen werden, wenn readyState=4
Callback-Funktionen
Callback-Funktionen sind Code-Stellen, welche erst nach vollständiger Durchführung eines Effektes bzw. einer Animation aufgerufen werden Ohne Callback = Alert-Box wird angezeigt, obwohl h3 noch nicht ausgeblendet ist. mit Callback = Alert-Box wird erst angezeigt wenn h3 ausgeblendet ist (mit function)
Section 4
(50 cards)
D3.js Übergänge (Transitions)
• Transitions interpolieren Attribute und Style-Eigenschaften über einen bestimmten Zeitraum d3.select("body").transition().style("background-color", "black");
Web-Sicherheit XSS
• XSS steht für Cross-Site-Scripting • Angreifer schleust JS-Code in die Website ein
Informationsvisualisierung mit D3.js
• Data-Driven Documents • Basiert auf HTML, CSS, SVG und JavaScript • Bindet Daten an das DOM • Veränderung der Daten bewirkt Veränderung des DOM
Framework ThreeJS
• Bibliothek für 3D-Animationen im Web • WebGL-Wrapper
Single-Page-Applications
• Ein HTML-Dokument für die komplette Anwendung • HTML-Dokument wird dynamisch angepasst • Sitzungszustand wird beim Client gespeichert, nicht auf dem Server • Offline-Friendly
JSON Syntax Key/Value-Paare
• Name und zugehöriger Wert • Jeweils in Anführungszeichen • Durch Doppelpunkt getrennt • Values können mit folgenden Datentypen beschrieben werden: • Integer, Float, String, Boolean, Array, Objekt • Mehrere Key/Value-Paare werden durch Kommata getrennt "firstName":"John"
Web-Sicherheit
• JavaScript verlagert einen Teil der Logik auf den Client • Übermittlung und Ausführung von eigenem Code auf anderem Computer ist das Ziel jedes Hackers
AngularJS DOM Tabellen generieren
• daten-getrieben generiert werden <table> <tr ng-repeat="x in names | orderBy : 'Country'"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table>
JSON Syntax Arrays
• Key/Value-Paare und Objekte können in Arrays organisiert werden • Arrays sind mit eckigen Klammern umschlossen "employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]
Framework React
• Bibliothek für komplexe User Interfaces • Verwendung in Facebook, Instagram und Whatsapp • Von Facebook entwickelt
Framework AngularJS
• Framework für Single-Page-Websites • Framework für Web-basierte Apps • Inzwischen in Version 2 verfügbar • Wird von Google verwaltet und weiterentwickelt
AngularJS Controller
AngularJS controllers control the data of AngularJS applications. • JavaScript-Objekte, welche über Scopes Daten mit dem View (HTML) austauschen können. • Gehören immer zu einem Modul • Haben Eigenschaften und Methoden
MVC
Model View Controller
Single-Page-Applications Szenarien
• Offline-Applikationen: Anwendung wird einmalig vom Server geladen, Logik wird nachfolgend nur auf Client ausgeführt • Produkt/Veranstaltungs-Seiten • Hohe Benutzerzahlen (Facebook, Gmail, Google Maps) • Web-Apps
AngularJS Services: Eigenen Services definieren
JSON Syntax
Key/Value-Paare
MVC Controller
Process and responds to events, typically user actions, and invokes changes on the model
AngularJS Module
• Container für verschiedene Teile einer Webseite • Sammlung von: - Controllern - Services - Filter • Zwischen Modulen können Abhängigkeiten definiert werden var mainApp = angular.module("mainApp", [ ]);
D3.js Exit-Selektion
Elemente die gelöscht werden sollen
Performance-Aspekte Verzögertes Laden von JS-Code
• Während ein Browser eine große JS-Datei downloadet, ist der Download der Webseite blockiert - Keine Webseite -> Kein Rendering -> Nutzer sieht nichts Best-Practice: • JS-Code am Ende der Website platzieren
NodeJS
Node.js is a framework to develop highly-scalable applications which can handle tens of thousands of simultaneous client connections efficiently.
AngularJS
• Erweitert HTML um neue Attribute • Javascript-Framework für Single-Page-Applications • Nutzt das MVC-Muster • Schlüsselkonzepte: - Direktiven - Expressions - Module - Controller - Scopes - Services - Filter
D3.js Daten-Struktur konstruieren
var numbers=[4, 8, 15, 16, 23, 42];
D3.js Daten an DOM binden
var selection = d3.select("'chart") .selectAll("div).data(numbers);
AngularJS Module anordnen
angular.module ("RichEditor", []); angular.module ("Folder",[]); angular.module ("Inbox", ["Folder"]); angular.module ("Compose", ["RichEditor"]); angular.module ("EmailApplication", ["Inbox", "Compose"]);
MVC Model
stores an application data model domain layer adds meaning to raw data (eg calculating if today is the users birthday or the totals, taxes and shipping charges for shopping cart items)
D3.js HTML generieren
function processEnterSelection() { selection.enter().append("div").style("width, function(d) {return d + "px"; }).text(function(d) {return d;});} processEnterSelection();
AngularJS Filter
• Filter sind Transformations-Funktionen für Daten • Können über Pipes aneinander gehangen werden {{lastName | uppercase}} • Bereits vordefinierte Filter currency = Formatiert Zahl in Währungsformat date = Formatiert Datum in bestimmtes Format orderBy = Sortiert ein Array filter = Selektiert eine Teilmenge eines Arrays
NodeJS Vorteile
Vorteile: • Event-getriebene Bearbeitung von Requests ist flexibler als Thread-basierte • Eine Sprache (JavaScript) für die gesamte Anwendung - einschließlich, der Server-Komponenten • Effiziente Entwicklung durch Package-Management - Zahlreiche Funktionalitäten sind als Package verfügbar und müssen daher nicht selbst programmiert werden
AngularJS DOM Liste generieren
• daten-getrieben generiert werden <div ng-app="" ng-init="names=['Tick', 'Trick', 'Track']"> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>
Performance-Aspekte Minimierte DOM-Größe
• Umso größer das DOM, umso länger: - dauert der Download - benötigt der Browser zum rendern - dauern JS-basierte DOM-Anfragen
D3.js Selections
• Deklaratives Konzept um eine Menge von Elemente anzusteuern • Gleiches Konzept wie in jQuery d3.selectAll("p").style("color", "white");
MVC-Pattern
• Alternative zum klassischen 3-Schichten-Muster • Erhöhte Flexibilität durch losere Kopplung • Modelle tragen Daten • Mehrere Views können das gleiche Modell unterschiedlich darstellen
D3.js Join-By-Index
• .data-Operator verknüpft eine Selektion mit einer Datenstruktur • Das i-te Element der Datenstruktur wird mit dem i-tem Element der Selektion verknüpft d3.selectAll("p").data([4,8,15,16,23,42]).style("font-size", function(d) {return d + "px"; }); <p style="font-size:4px;"> <p style="font-size:8px;"> <p style="font-size:15px;"> <p style="font-size:16px;"> <p style="font-size:23px;"> <p style="font-size:42px;">
AngularJS Expressions
• Kleine Code-Stücke zur Datenmanipulation • Werden von doppelten geschweiften Klammern umschlossen • Werden direkt in HTML eingefügt (kein <script>-Tag notwendig) <div ng-app=""> <p>My first expression: {{ 5 + 5 }}</p> </div> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p>{{name}}</p> </div> • Können auch auf Applikations-Scope zugreifen... • ... und die Wert von Variablen in HTML eingügen
D3.js Enter-Selektion
Elemente die Eingefügt werden sollen
Server-seitiges JS mit NodeJS V8 Engine
• Interne Grundlage und Stärke von Google Chrome ist die V8 Engine • Übersetzt JS-Code in C++-Code, wodurch die Ausführung massiv beschleunigt wird
3-Schichten-Architektur
• Anwendungen lassen sich allgemein in 3 Schichten unterteilen • Präsentationsschicht = Datstellung der Daten • Logik/Kontroll-Schicht = Funktionalität, Datenmodifikation • Persistenzschicht = Applikationsdaten
JSON
JSON is a format for storing and transporting data. JSON is often used when data is sent from a server to a web page. • JavaScript Object Notation • Alternative zu XML und CSV • Wird überwiegend im JavaScript-Kontext genutzt, ist aber Programmiersprachenunabhängig • Hierarchische Beschreibung von Daten in Datei: JSON-Datei (name.json) • JSON kann von JavaScript direkt interpretiert werden
AngularJS Direktiven
• Erweiterung von HTML • Starten in Angular mit dem Präfix: ng- • Werden von Angular erkannt und für Erstellung & Änderung der Applikation verwendet ng-app = Definiert einer Angular-Applikation ng-bind = Bindet Applikationsdaten an HTML-Elemente ng-model = Bindet Inhalt von HTML-Steuerelementen (input, select,...) an Applikations-Daten
MVC View
renders model for an appropriate representation
D3.js Dynamische Eigenschaften
• Die Werte von Eigenschaften können dynamisch durch Funktionen berechnet werden d3.selectAll("p").style("color", function() {return "hsl(" + Math.random() * 360 + ",100%,50%)"; }); • Die Werte von Eigenschaften können an Datenstrukturen gebunden werden d3.selectAll("p").data([4,8,15,16,23,42]).style("font-size", function(d) {return d + "px"; });
Performance-Aspekte
• Minimierung von Schleifen-Aktivität • Minimierung von DOM-Zugriffen • Minimierte DOM-Größe • Verzögertes Laden von JS-Code
Server-seitiges JS mit NodeJS NodeJS
• Auf V8 basierende JS-Engine • Event-getriebenes, nicht-blockierendes I/O-Modell • Eignes Package-Konzept - Für viele Server-Funktionen gibt es fertige Package
AngularJS Scopes
• Im Scope werden die Variablen gespeichert, die sich HTML- und JS-Code teilen • Ein globaler Root-Scope im Kontext von ng-app • Pro Controller ein Scope
AngularJS DOM Sichtbarkeit
• Sichtbarkeit von HTML-Elementen lässt sich über Direktiven steuern
AngularJS Services
• Globale, wiederverwendbar Programmlogik (Funktionen) • Ca. 30 vordefinierte Services: - BOM ($location, $timeout, $interval) - Ajax($http) - ...
JSON Syntax Objekte
• Mehrere Key/Value-Paare können ein Objekt beschreiben • Objekte sind mit geschweiften Klammern abgegrenzt {"firstName":"John", "lastName":"Doe"}
AngularJS Vom eigenem Service zum eigenen Filter
AngularJS Einbindung
<div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> • ng-app makiert das <div>-Element als Angular-Applikation • ng-model bindet den Wert des Input-Feldes ab due Applicationsvariable „name" • ng-bind bindet das innerHTML des <p>-Elementes an die Applikationsvariable „name"
Section 5
(9 cards)