JavaScript: Unterschied zwischen den Versionen
Flinh1 (Diskussion | Beiträge) (→Objekte) |
Flinh1 (Diskussion | Beiträge) (→Typumwandlung) |
||
Zeile 187: | Zeile 187: | ||
var x; typeof(x); // "undefined" | var x; typeof(x); // "undefined" | ||
+ | |||
+ | ---- | ||
+ | |||
+ | === Object == | ||
+ | |||
+ | Siehe [https://flinkwiki.de/index.php?title=JavaScript#Objekte Objekte] | ||
---- | ---- |
Version vom 6. Oktober 2019, 15:59 Uhr
Inhaltsverzeichnis
Grundgerüst
Inline-Script
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="UTF-8"> <title>Inline-Script</title> </head> <body onload="window.alert('Dokument geladen!')"> <div id="panel"> <script type="text/javascript">document.write("Hallo Welt!");</script> </div> </body> </html>
Script im Head-Bereich
Beispiel 01
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="UTF-8"> <title>Script im Head-Bereich</title> <script type="text/javascript"> function init() { document.getElementById( "panel" ).innerHTML = "Hallo: Javascript-Grüße aus dem Head-Bereich!"; window.alert( "Dokument wurde geladen!" ) ; } </script> </head> <body onload = "init()" > <div id="panel"></div> </body> </html>
Script in eingebetteter Datei
HTML-Datei external.html:
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="UTF-8"> <title>Externes Script</title> <script type="text/javascript" src="external.js"></script> </head> <body> <div id="panel"></div> </body> </html>
Datei "external.js":
function init() { document.getElementById( "panel" ).innerHTML = "Hallo... von einer externen JavaScript-Datei!" ; window.alert( "Dokument geladen!" ) ; } window.onload = init ;
JavaScript-Konsole aufrufen
Chrome
Menüsymbol rechts oben > Weitere Tools > Entwicklertools > Reiter Console
oder F12 / strg+shift+i
, Reiter Console
Shortcut: ctrl+shift+j
oder Mac: alt+cmd+j
IE
F12 > Reiter Console
Firefox
Menüsymbol rechts oben > Entwickler-Werkzeuge > Web-Konsole
Shortcut: ctrl+shift+k
oder Mac: cmd+alt+k
Opera
Rechtsklick > Element untersuchen (öffnet Dragonfly)
Mac: Darstellung > Entwicklerwerkzeuge > Opera Dragonfly > Reiter Konsole.
Shortcut Mac: cmd+alt+i
(Press Ctrl+Shift+I (Cmd+Option+I on Mac) to launch Opera Dragonfly which is a fully featured development and debugging tool integrated into the Opera browser.)
Safari
Safari: > Einstellungen > Erweitert > Menü "Entwickler in der Menüleiste anzeigen" > In der Menüleiste im Menü "Entwickler" > Javascript-Konsole einblenden
Shortcut: ctrl+alt+c
oder Mac: cmd+alt+c
(Enable the Developer Menu from Safari's preferences. It will give access the various tools (Error Console, Web Inspector, JavaScript Profiler, etc). Of course there are also shortcuts, like Cmd+Alt+C for the console.)
Datentypen
Den Datentyp identifiziert man mit dem Operator typeof.
string
- Konkatenation: a = 5; b = '6'; a + b; // "56"
- "abc".length; // 3
- "abc"[1]; // "b"
- "abc".slice(0,2); // "ab"
- "abcdef".slice(2); // "cdef"
- "abcdef".toUpperCase(); // "ABCDEF"
- "aBCDef".toLowerCase(); // "abcdef"
number
- Ganzzahlen: 12345
- Gleitpunktzahlen: 5.5
boolean
- true
- false
undefined
var x; typeof(x); // "undefined"
= Object
Siehe Objekte
Typumwandlung
Nicht-explizit
a = "3"; b = 4; c = a + b; // "34"
explizit
parseInt()
var a = "5"; typeof a; // "string" var b = parseInt(a); typeof b; // "number"
parseFloat()
var a = "5.5"; var b = parseFloat(a); // // c hat den Wert 5.5 typeof b; // "number"
Erstellen eines neuen Objekts der gewünschten Zielklasse:
var a = "5.5"; var b = Number(a); // 5.5 typeof b; // "number"
var c = Boolean(a); //true typeof c; // "boolean"
var d = String(c); // "true" typeof d; // "string"
Template-Literale (template literals)
JavaScript erlaubt es, Ausdrücke in einen String einzuschließen, der von backticks ( `...` ) begrenzt wird. Innerhab des Strings werden die Ausdrücke mit der Syntax ${expression} dargestellt.
const land = "Deutschland"; console.log(`Ich lebe in ${land}.`); // "Ich lebe in Deutschland."
const a = 3; const b = 7; console.log(`${a} + ${b} = ${a + b}`); // "3 + 7 = 10"
- https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/template-literal
- https://css-tricks.com/template-literals/
Arrays
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
- https://wiki.selfhtml.org/wiki/JavaScript/Array
Methoden
- meinArray = [123, 5.5, true, "abc"] // Array(4) [ 123, 5.5, true, "abc" ]
- meinArray.reverse(); // (4) [ "abc", true, 5.5, 123 ]
- meinArray[meinArray.length-1] // 123
- meinArray.indexOf(5.5); // 2
- meinArray.push("rot") // Array(5) [ "abc", true, 5.5, 123, "rot" ]
- meinArray.unshift("blau") // Array(6) [ "blau", "abc", true, 5.5, 123, "rot" ]
- a = meinArray.pop(); // Array(5) [ "blau", "abc", true, 5.5, 123 ]
- a // "rot"
- meinArray.join(); // "blau,abc,true,5.5,123" // Umwandlung von Array in String
Mit console.dir(meinArray) lassen sich unter __proto__ alle Methoden anzeigen.
- http://openbook.rheinwerk-verlag.de/javascript_ajax/34_referenz_002.htm#5fffb3e82cc3af9389c10244049d9592
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
- https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Array
Arrays verbinden
- meinArray = [ "blau", "abc", true, 5.5, 123 ]; // Array(5) [ "blau", "abc", true, 5.5, 123 ]
- zweitesArray = ["Katze", "Hund"] // Array [ "Katze", "Hund" ]
- drittesArray = ["links", "rechts", "geradeaus"] // Array(3) [ "links", "rechts", "geradeaus" ]
- viertesArray = meinArray.concat(zweitesArray, drittesArray);
- viertesArray // Array(10) [ "blau", "abc", true, 5.5, 123, "Katze", "Hund", "links", "rechts", "geradeaus" ]
Objekte
Datentyp Objekt:
var person = new Object();
oder
var person = {}; person.name = "Otto"; person.alter = 33;
Ausgabe für person in der Konsole (Chromium):
{name: "Otto", alter: 33} alter: 33 name: "Otto" __proto__: Object
Objekt verwenden:
function personVorstellen (){ document.write("Die Person heißt " + this.name + " und ist " + this.alter + " Jahre alt."); } person.vorstellen = personVorstellen; person.vorstellen();
Ausgabe:
Die Person heißt Otto und ist 33 Jahre alt.
Alternativ: literale Notation
var person = {name: "Otto", alter: 33, vorstellen: personVorstellen }
Schleifen
Es gibt die 3 von C "geerbten" Schleifen:
- for(var i; /* bedingung */; /* inkrement/dekrement */) { /*anweisungsblock */ }
- while( / *bedingung */ ) { /*anweisungsblock */ }
- do { /*anweisungsblock */ } while( / *bedingung */ ) ;
Darüber hinaus gibt es die for ... in-Schleife:
var a = [5, 4, 3, 0, 1, 2, 11, 22]; var summe = 0; for (let i in a) { summe += i; } alert(summe); // Ausgabe 001234567 alert (typeof(summe)); // Ausgabe string
let a = [5,4,3,0,1,2,11,22]; var summe = 0; for(let i in a){ summe += a[i]; } alert(summe); // Ausgabe: 48
... und die for ... of-Schleife, iterierend über ein Array:
var a = [5, 4, 3, 0, 1, 2, 11, 22]; var summe = 0; for (let i of a) { summe += i; } alert(summe); // Ausgabe: 48
... oder ein Array mit Objekten:
const passagiere = [ { name: "Heinrich Flink", ticketNumber: 111142 }, { name: "Barack Obama", ticketNumber: 222236 }, { name: "Greta Thunberg", ticketNumber: 333342 }, { name: "Amal Clooney", ticketNumber: 444411 } ] for (let p of passagiere) { document.write('Einstieg ' + p.name + ' mit Ticket ' + p.ticketNumber +'<br>'); }
Funktionen
Popup-Fenster
alert
Mit alert() stellt man sicher, dass eine Meldung beim Benutzer ankommt.
confirm
Das confirm()-Fenster wird verwendet, um eine Bestätigung einzuholen.
Wenn der Benutzer "OK" klickt, gibt das Fenster true zurück. Wenn der Benutzer "Cancel"/"Abbrechen" klickt, gibt das Fenster false zurück.
prompt
prompt() wird für Benutzereingaben verwendet.
Wenn der Benutzer "OK" klickt, gibt das Fenster den eingegebenen Wert zurück. Wenn der Benutzer "Cancel"/"Abbrechen" klickt, gibt das Fenster null zurück.
IIFE
Selbstauslösende Funktionen (Immediately Invoked Function Expression)[1]
Grundmuster:[2]
(function () { //... })();
Die Funktion ist isoliert, vergleichbar einer Sandbox. Beispiel:
var beispiel = 'blau'; // Globale Variable 'blau' (function() { // Beginn der isolierten Zone. var beispiel = 'rot'; // In der isolierten Zone wird die gleiche Variable mit dem Wert 'rot' erzeugt. alert('In der isolierten Zone lautet die Farbe: ' + beispiel); })(); // Ende der isolierten Zone. Hier erzeugte Variablen werden zerstört. alert('In der nicht isolierten Zone lautet die Farbe: ' + beispiel); // Der abschließende Text enthält das Wort "blau". Die isolierte Zone hat keinen Einfluss auf den Rest des Codes.
Es ist möglich, im globalen Code einen Wert aus einer isolierten Funktion zu übernehmen:
dieFarbe = (function() { // Beginn der isolierten Zone. return 'rot'; // In der isolierten Zone wird der Wert 'rot' zurückgegeben. })(); alert(dieFarbe); // Ausgabe: rot
Closures
Global variables can be made local (private) with closures.[3]
function outside(){ var x = 3; document.write("<p>Ergebnis: ") function inside(){ innerst(); document.write(x); } function innerst(){ x *= 5; } inside(); document.write(" Punkte</p>") } outside();
Ausgabe:
Ergebnis: 15 Punkte
Pfeilfunktionen / arrow functions
Grundsyntax:
() => { statements }
Beispiel:
const pfeil = (zahl1, zahl2) => { return zahl1 + zahl2; } const addition = pfeil(5,7); console.log(addition);
Ausgabe: 12
Date
Javascript ermittelt die Client-Uhrzeit.
Datumswerte ermitteln
var datum = new Date(); document.write(datum.toLocaleString(),"
");
Ausgabe z. B.:
26.9.2019, 10:24:43
Weitere Zeitangaben:
document.write(datum.getDate(),"<br>"); // Tag im Monat document.write(datum.getMonth() + 1,"<br>"); // Monat 0-basiert, daher + 1 document.write(datum.getFullYear(),"<br>"); // getYear() gibt Jahr abzüglich 1900 an document.write(datum.getHours(),"<br>"); document.write(datum.getMinutes(),"<br>"); document.write(datum.getSeconds(),"<br>");
"use strict"
JSON
http://jsonplaceholder.typicode.com/posts
Cookies
Cookies werden über die Eigenschaft document.cookie erstellt und ausgelesen.
Die im Cookie gespeicherte Zeichenkette hat folgenden Aufbau:
"name=Wert; expires=Verfallszeit; path=Pfad; domain=Domainname; secure"
Pfad: Nur Dateien, die unterhalb des Verzeichnisses der das Cookie setzenden Webseite liegen, können das Cookie lesen. Wird das Hauptverzeichnis der Homepage / angegeben, kann bekommen alle HTML-Dokumente des Servers Zugriff.
Promise / Future
Quellen
Links
- https://wiki.selfhtml.org/wiki/JavaScript
- https://www.w3schools.com/js/
- https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript
- https://developer.mozilla.org/en-US/
- https://developer.mozilla.org/de/Learn/JavaScript
- https://www.peterkropff.de/site/javascript/javascript.htm
- http://odyssey.sdlm.be/javascript.htm Exercices JavaScript interactifs
- https://openclassrooms.com/fr/courses/6175841-apprenez-a-programmer-avec-javascript/6278392-declarez-des-variables-et-modifiez-leurs-valeurs
- https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/introduction-au-javascript
- JavaScript — What is a function?
- http://fizzy.school/ Lessons in JavaScript for anyone writing jQuery
- https://eloquentjavascript.net/
- https://www.javascript-kurs.de
- https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web
- https://jquery.org/
- https://www.freeformatter.com/javascript-minifier.html
- https://vuejs.org/ The Progressive JavaScript Framework
Sandboxes
Youtube
Bücher
- Johann Pardanaud, Sébastien de la Marck: Découvrez le langage JavaScript, Paris 2017 (EYROLLES)
- Eric Freeman / Elisabeth Robson: JavaScript-Programmierung von Kopf bis Fuß, Köln 2015
- Nick Morgan: JavaScript kinderleicht, Heidelberg 2015 (dpunkt)
- Mike McGrath: JavaScript. create functions for the web, Warwickshire 2015
| | |