JavaScript

Aus Flinkwiki
Wechseln zu: Navigation, Suche
Seitenübersicht
Zur Seite "Webprogrammierung"


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.)

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.

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"

Arrays

Funktionen

  • meinArray = ["abc", true, 5.5, 123] // Array(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

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" ]

Closures

Global variables can be made local (private) with closures.[1]

"use strict"

Pfeilfunktionen / arrow functions

Grundsyntax: 

() => { statements }

JSON

http://jsonplaceholder.typicode.com/posts

IIFE

Selbstauslösende Funktionen (Immediately Invoked Function Expression)[2]

Grundmuster:[3] 

(function () {
    //...
})();

Bei direkter Funktionsausführung entfällt die globale Variable.

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.

Cookies

Promise / Future

Quellen

Links


Youtube

Bücher

| | |

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