JavaScript: Unterschied zwischen den Versionen

Aus Flinkwiki
Wechseln zu: Navigation, Suche
(→‎Links)
 
(29 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 4: Zeile 4:
 
<div align="right">'''[[JavaScript: Beispiele|Zur Seite "JavaScript: Beispiele"]]'''</div>
 
<div align="right">'''[[JavaScript: Beispiele|Zur Seite "JavaScript: Beispiele"]]'''</div>
 
<div align="right">'''[[Webprogrammierung|Zur Seite "Webprogrammierung"]]'''</div>
 
<div align="right">'''[[Webprogrammierung|Zur Seite "Webprogrammierung"]]'''</div>
 +
<div align="right">'''[[HTML|Zur Seite "HTML"]]'''</div>
 +
<div align="right">'''[[CSS|Zur Seite "CSS"]]'''</div>
  
  
Zeile 185: Zeile 187:
  
 
var x; typeof(x); // "undefined"
 
var x; typeof(x); // "undefined"
 +
 +
----
 +
 +
=== Object ===
 +
 +
Siehe [[#Objekte | Objekte]]
  
 
----
 
----
Zeile 244: Zeile 252:
  
 
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
 
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
 +
* https://wiki.selfhtml.org/wiki/JavaScript/Array
  
 
----
 
----
  
−
=== Funktionen ===
+
=== Methoden ===
  
−
* meinArray = ["abc", true, 5.5, 123] // Array(4) [ "abc", true, 5.5, 123 ]
+
* 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[meinArray.length-1] // 123
 
* meinArray.indexOf(5.5); // 2
 
* meinArray.indexOf(5.5); // 2
Zeile 257: Zeile 267:
 
* a // "rot"
 
* a // "rot"
 
* meinArray.join(); // "blau,abc,true,5.5,123" // Umwandlung von Array in String
 
* 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
  
 
----
 
----
Zeile 265: Zeile 282:
 
* zweitesArray = ["Katze", "Hund"] // Array [ "Katze", "Hund" ]
 
* zweitesArray = ["Katze", "Hund"] // Array [ "Katze", "Hund" ]
 
* drittesArray = ["links", "rechts", "geradeaus"] // Array(3) [ "links", "rechts", "geradeaus" ]
 
* drittesArray = ["links", "rechts", "geradeaus"] // Array(3) [ "links", "rechts", "geradeaus" ]
−
* viertesArray = meinArray.concat(zweitesArray, drittesArray);  
+
* viertesArray = meinArray.'''concat'''(zweitesArray, drittesArray);  
 
* viertesArray // Array(10) [ "blau", "abc", true, 5.5, 123, "Katze", "Hund", "links", "rechts", "geradeaus" ]
 
* viertesArray // Array(10) [ "blau", "abc", true, 5.5, 123, "Katze", "Hund", "links", "rechts", "geradeaus" ]
 +
 +
----
 +
 +
== Objekte ==
 +
 +
Datentyp ''Object'':
 +
var person = new Object();
 +
oder
 +
var person = {};
 +
person.name = "Otto";
 +
person.alter = 33;
 +
Ausgabe für ''person'' in der Konsole (Chromium):
 +
<nowiki>
 +
{name: "Otto", alter: 33}
 +
alter: 33
 +
name: "Otto"
 +
__proto__: Object
 +
</nowiki>
 +
 +
----
 +
 +
Objekt verwenden:
 +
<nowiki>
 +
function personVorstellen (){
 +
  document.write("Die Person heißt " + this.name + " und ist " + this.alter + " Jahre alt.");
 +
}
 +
person.vorstellen = personVorstellen;
 +
 +
person.vorstellen();
 +
</nowiki>
 +
Ausgabe:
 +
Die Person heißt Otto und ist 33 Jahre alt.
 +
 +
----
 +
 +
 +
Alternativ: literale Notation
 +
var person = {name: "Otto", alter: 33, vorstellen: personVorstellen }
  
 
----
 
----
Zeile 349: Zeile 404:
 
==== alert ====
 
==== alert ====
  
−
Mit ''alert()'' stellt man sicher, dass eine Meldung beim Benutzer ankommt.
+
Mit ''alert()'' stellt man sicher, dass eine Meldung beim Benutzer ankommt. Die Meldung wird als String ausgegeben.
  
 
----
 
----
 +
 
==== confirm ====
 
==== confirm ====
  
Zeile 364: Zeile 420:
  
 
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.
 
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.
 +
 +
Die Eingaben werden als Strings übernommen. Wenn man mit den Eingaben rechnen will, muss man sie erst mit <code>parseInt()</code> oder <code>parseFloat()</code> umwandeln.
  
 
----
 
----
Zeile 457: Zeile 515:
  
 
== Date ==
 
== Date ==
 +
 +
Javascript ermittelt die Client-Uhrzeit.
 +
 +
----
 +
 +
=== Datumswerte ermitteln ===
  
 
  var datum = new Date();
 
  var datum = new Date();
Zeile 462: Zeile 526:
 
Ausgabe z. B.:
 
Ausgabe z. B.:
 
  26.9.2019, 10:24:43
 
  26.9.2019, 10:24:43
 +
 +
Weitere Zeitangaben:
 +
<nowiki>
 +
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>");
 +
</nowiki>
  
 
----
 
----
Zeile 479: Zeile 553:
 
== Cookies ==
 
== Cookies ==
  
 +
Cookies werden über die Eigenschaft ''document.cookie'' erstellt und ausgelesen.
 +
 +
Die im Cookie gespeicherte Zeichenkette hat folgenden Aufbau (Schlüssel-Wert-Paare):
 +
"name=Wert; max-age=WertInSekunden; path=Pfad; domain=Domainname; secure"
 +
Statt ''max-age'' gibt es auch die Variante ''expires=Verfallszeit'' (veraltet).
 +
 +
----
 +
 +
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.
 +
 +
----
 +
 +
* https://www.mediaevent.de/javascript/cookies.html
 
* https://www.w3schools.com/js/js_cookies.asp
 
* https://www.w3schools.com/js/js_cookies.asp
  
 
----
 
----
 +
 
== Promise / Future ==
 
== Promise / Future ==
 
   
 
   
Zeile 495: Zeile 583:
 
=== Links ===
 
=== Links ===
  
 +
* https://javascript.info/
 
* https://wiki.selfhtml.org/wiki/JavaScript
 
* https://wiki.selfhtml.org/wiki/JavaScript
 
* https://www.w3schools.com/js/
 
* https://www.w3schools.com/js/
 
* https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript
 
* https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript
 +
* https://developer.mozilla.org/en-US/
 
* https://developer.mozilla.org/de/Learn/JavaScript
 
* https://developer.mozilla.org/de/Learn/JavaScript
 
* https://www.peterkropff.de/site/javascript/javascript.htm
 
* https://www.peterkropff.de/site/javascript/javascript.htm
Zeile 505: Zeile 595:
 
* [https://codeburst.io/javascript-what-is-a-function-172e3488fcdc JavaScript — What is a function?]
 
* [https://codeburst.io/javascript-what-is-a-function-172e3488fcdc JavaScript — What is a function?]
 
* http://fizzy.school/ Lessons in JavaScript for anyone writing jQuery
 
* http://fizzy.school/ Lessons in JavaScript for anyone writing jQuery
−
* http://www.javascriptkit.com/
+
* https://eloquentjavascript.net/
 
* https://www.javascript-kurs.de
 
* https://www.javascript-kurs.de
 
----
 
----

Aktuelle Version vom 19. Dezember 2020, 20:29 Uhr

Seitenübersicht
Zur Seite "JavaScript: DOM"
Zur Seite "JavaScript: Events"
Zur Seite "JavaScript: Beispiele"
Zur Seite "Webprogrammierung"
Zur Seite "HTML"
Zur Seite "CSS"


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"

Arrays

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.

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 Object: 

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. Die Meldung wird als String ausgegeben.

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.

Die Eingaben werden als Strings übernommen. Wenn man mit den Eingaben rechnen will, muss man sie erst mit parseInt() oder parseFloat() umwandeln.

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 (Schlüssel-Wert-Paare): 

"name=Wert; max-age=WertInSekunden; path=Pfad; domain=Domainname; secure"

Statt max-age gibt es auch die Variante expires=Verfallszeit (veraltet).

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

Sandboxes

Youtube

Bücher

| | |

Abgerufen von „https://flinkwiki.de/index.php?title=JavaScript&oldid=1708“